教案首页
（以2课时为单元）
课序：1
第一章 第 1—2节 第二章 第 1—2节
目的要求：
通过此节的学习，读者应掌握网络相关的基础知识，了解网页制作工具，掌握HTML语言，掌握dreamwever工具的使用，掌握站点创建方法，掌握简单网页的制作。
教学内容：
1. internet基础
2. 网页制作工具
3. HTML语言的语法结构
4. 利用HTML语言制作简单网页
5. Dreamweaver工具界面
6. 了解并掌握站点的创建
7. 掌握简单网页的制作
重点与难点：
重点：HTML语言和站点的创建
难点：HTML语言
教学方法： 多媒体教学
手段：课程讲授为主，学生讨论练习为辅。
教学步骤：
1. 首先介绍当前internet发展情况，然后导入WWW、IP及域名、网页及网站的概念。
2. 首先介绍dreamweaver工具，然后讲解站点的创建和简单网页的制作。
复习提问：
作业题目：
习题1-2
预习内容：浏览网站，分析网站结构特点及配特点。
课时分配：
教学环节 | 复习提问 | 新课讲解 | 课堂讨论 | 小节 | 作业布置 |
时间分配 | 0 | 85 | 10 | 3 | 2 |
第1章 网页设计基础知识
本章主要介绍了网页设计前需要了解的准备知识，如网络基础知识、网页制作工具以及HTML语言等。
【本章学习目的】
通过本章的学习，读者应了解与网络相关的基础知识，了解网页制作工具，掌握HTML语言。
一、Internet基础
1、Internet概述
Internet是相互连接的网络集合。网络协议是网络中的设备进行通信时共同遵循的一套规则，即以何种方法获得所需的信息。
Internet所提供的服务主要是WWW、E-mail、FTP、网上传呼、、网上购物等等，而其中WWW和E-mail是最常用的服务。
2、 WWW
WWW(World Wide Web)简称为万维网，客户端只要通过“浏览器”（Browser）就可以非常方便地访问internet上的服务器端，迅速地获得所需的信息。
3、 网页与网站
什么是网页？什么是网站？两者有什么样的联系与区别呢？
构建WWW的基本单位是网页。网页中包含所谓的“超链接”，通过已经定义好的关键字和图形，只要用鼠标轻轻一点，就可以自动跳转到相应的其它文件，获得相应的信息，从而实现网页之间的链接，从而构成了WWW的纵横交织的网状结构。
通过超链接连接起来的一系列逻辑上可以视为一个整体的页面，则叫做网站。
4、 域名与IP地址
在Internet上的每台网络设备都要有一个唯一的地址才能被访问到，这个地址就是IP地址。
IP地址是由32位的二进制数值构成，分成4组，转化为十进制用点分隔，比如：202.100.4.11。
域名系统是一个分层的树状结构组织。最上面是一个无名的根域，下层为顶级域名，接着是二级……
顶级域名的分类：从组织上和地理上分类，顶级域名的管理和分配由internet网络信息中心控制，网址为：www.internic。
美国采用的组织分类形式，而其它国家采用的是地理上分类，用代表国家或地区的顶级域名，中国国内域名由中国互联网信息中心控制，网址为：wwwnic。
域名的书写格式为：叶节点名.二级域名.顶级域名
例如：www.sohu，www：web服务器名，sohu：企业名称，com：顶级域名。
二、网页制作工具
目前网页制作工具较多，大多数网页的制作都是通过“所见即所得”的编辑工具完成的，在网页制作过程，还需要进行素材的创作和加工，即图形和动画制作工具。
1、 网页编辑工具
网页编辑工具主要分为标记型和所见即所得型。
所见即所得型的编辑软件主要有：微软的Frontpage和Dreamweaver。其中Frontpage继承了OFFICE系列软件的界面通用、操作简单的特点，十分适合初学者使用。
但Frontpage与MacroMedia公司的Dreamweaver相比，在HTML源代码的精确性、实用性以及对各种新技术的支持上都略逊一筹，本教材主要介绍的网页编辑工具是Dreamweaver。
2、 图形和图像处理工具
目前常用的图形和图像处理工具主要是Adobe公司出品的著名的图形图像处理软件：Photoshop和MacroMedia公司推出的Fireworks（MacroMedia公司也已被Adobe公司收购）。
Photoshop的功能十分强大，是目前最为广泛的专业图形图像处理软件之一，它捆绑了Image Ready，能够实现各种专业化的图像处理、动画的制作等。有兴趣的读者可查阅相关的参考书研究和学习。
Fireworks是由MacroMedia公司出品的首选WEB图形图像处理软件。它的独特之处在于其能够优化处理大图片、切割图片、为图片加入特殊效果、制作网页的动态行为等，可以生成Fireworks HTML，直接导入到网页中，使用非常方便。本教材将在以后的章节做详细的介绍。
3、 动画制作工具
Flash是目前网页制作中最为出的动画制作软件，它是一种交互式动画设计工具，用它可以将音乐、声效、动画以及富有新意的界面融合在一起，以制作出高品质的网页动态效果。Flash所使用的图形是压缩的矢量图形，采用了网络流式媒体技术，突破了网络带宽的限制，可以边下载边播放，这样避免用户长时间的等待，设计者可以随心所欲地设计出高品质的动画，Flash已经慢慢成为网页动画的标准，成为一种新兴的技术发展方向。
三、HTML语言
网页的本质是HTML，HTML即为超文本标记语言，超文本使网页之间具有跳转能力，使浏览者可以选择阅读路径。
使用HTML编写的WEB页面称之为HTML文件，这种文件一般以“html”或者“htm”为扩展名，使用网页编辑工具创建HTML文件。
1、 HTML语法结构
HTML文件的所有控制语句称为标签，标签在一对尖括号之间，格式如下：
<标签>HTML语言元素</标签>
标签分为成对标签和非成对标签，比如： <table>…</talbe>，而<br>、<hr>等属于非成对标签。标签忽略大小写，书写格式非常灵活。可使用标签的属性来进一步限定标签，一个标签可以有多个属性项，各属性项的次序不限定，各属性项之间用空格来进行分隔。例如：<img src="images/girl.gif" width="100" height="87">。
HTML中使用的注释语句为，注释内容可插入文本中任何位置，注释内容不会显示在网页中。例如：
2、 常见的HTML标签
1. <HTML>…</HTML>
2. <HEAD>…</HEAD>
● <title>…<title>
● <meta …>
3. <BODY>…</BODY>
(1) <P>…</P>
(2) <FONT>…</FONT>
(3) <IMG>
(4) <A>
(5) <table>…</table>
● <caption>…</caption>表格标题标签，定义表格的标题。
● <tr>…</tr>表格的行标签，定义表格中的一行。
● <td>…</td>表格的单元格标签，定义表格行中的一个单元格。
第2章 创建站点
本章主要介绍了Dreamweaver 8的主要功能、工作界面及各个面板的用途等。
【本章学习目的】
本章重点讲解了Dreamweaver 8工作界面的组成、常用的工具面板和工具栏的功能等，通过学习，读者应了解Dreamweaver 8功能以及面板的使用方法，掌握创建站点的方法。
一、Dreamweaver MX 8工作界面
Dreamweaver是集网页制作和网站管理于一身的网页制作软件，它是专门为网页设计师量身定制的可视化网页制作软件，利用它可以方便、快捷地制作跨平台和跨浏览器的动感网页。
Dreamweaver 8是Dreamweaver 系列产品的最新版本，它在原来版本的功能基础之上进行了改进和升级，功能更加强大，而且界面更美观、操作更方便，也更适于网页制作和网站管理。
二、定义本地站点专门的网页制作工具有
在 Dreamweaver中，“站点”一词既表示Web站点，又表示属于Web站点的文档的本地存储位置。在开始构建Web站点之前，您需要建立站点文档的本地存储位置。Dreamweaver 站点可组织与 Web 站点相关的所有文档，跟踪和维护链接、管理文件、共享文件以及将站点文件传输到Web服务器上。
要制作一个能够被大家浏览的网站，首先需要在本地磁盘上制作，放置在本地磁盘上的网站被称为本地站点，传输到位于互联网web服务器里的网站被称为远程站点。Dreamweaver 8提供了对本地站点和远程站点强大的管理功能。
因而应用Dreamweaver 8不仅可以创建单独的文档，还可以创建完整的Web站点。
1、 创建站点
2、管理站点
单击“站点”菜单｜“管理站点”命令，弹出“管理站点”对话框，进行新建、编辑、删除、复制站点等操作。
3、创建网页
在建好站点之后，就是创建网页。
● 新建网页
● 保存网页
● 网页制作过程
第一步，在“文档”工具栏中输入网页标题，将在浏览器的标题栏中显示。
第二步，添加背景图像。单击“属性”面板中的“页面属性”按钮，弹出“页面属性”对话框，选择“外观”选项，设置背景图像。
第三步，输入文字，居中对齐。
第四步，插入FLASH动画。
第五步，插入图像。
教案首页
（以2课时为单元）
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论