DREAMWEAVER 8.0 网页制作教案
（二）邝翠珊
cskuang@gdut.edu.cn
39322544-826
复习：
网页制作的一些常用功能：定义站点、数据表格的制作（学习表格的插入、合并拆分与嵌套）、利用表格布局网页、页面属性的设置、图片插入、文字的插入、日期的插入、插入电子邮件链接、flash动画插入、插入水平线、练习
1、练习上节课的内容：建立站点（包括站点文件）、用表格布局网页、设置页面属性、图片、文字、日期、电子邮件链接、flash动画、水平线等的插入
一、交换图象效果的制作：（插入→图像对象→鼠标经过图象）
鼠标经过图象的效果是当鼠标指针经过或者按下按钮的时候，图像或按钮的形状或颜色就会发生变化，如图像变换，发光，或者阴影出现等等。是网页变的生动活泼起来。
看dreamweaver学习网站导航演示：鼠标移动到图片上的时候，图片变成了另外一幅，当鼠标移开后恢复到原来的图象。
制作步骤：
1、光标移动到欲插入的位置，点击菜单栏【插入】【图像对象】【鼠标经过图像】打开对话框：
【图像名称】鼠标经过图像的名称，名称是自定义的，只要不与同页面另一个鼠标经过图像名称相同即可，也可以不填。
【原始图像】页面开始时显示的图像
【鼠标经过图像】鼠标经过的时候显示的图像。
【替换文本】图像无法正常显示的时候出现的文本注释，也是图像正常显示时鼠标指向链接时的说明，也可以不填。
【前往的URL】点击鼠标后链接的目标。
【预载鼠标经过图像】浏览网页时两个图片都同时被下载，当鼠标经过时无需从网上下载，而是调用预先下载的图像，减少延迟，使效果平滑流畅。
二、了解简单的HTML：超文本标志语言，简要的介绍网页中使用的超文本标识语言HTML的基本概念和用途通过一个简单的html示例（html.html）了解html的基本构成，介绍html的基本组成部分.如果深入了解可以参考：http://www.xiexiebang.com 或file:///F|/web/jingpin.htm
地球，中国，广州
文档相对路径：以当前文档所在位置为起点到被连接文档经由的路径。这是用于本地链接的最适宜的路径。例如，dreamweaver/contents.html就是一个文档相对路径。当我们要把当前文档与处在相同文件夹中的另一文档链接，或把同一网站下不同文件夹中的文档相互链接时，就可使用相对路径。
根相对路径：根相对路径是指从站点根文件夹到被链接文档经由的路径。一个根相对路径以前斜杠开头，它代表站点根文件夹。例如，/support/tips.html就是站点根文件夹下的support子文件夹中的一个文件（tips.html）的根相对路径。根相对路径是指定网站内文档链接的最好方法，因为在我们移动一个包含根相对链接的文档时，无需对原有的链接进行修改。
认识链接的目标：（链接网页打开的方式）
1、_seft为本窗口；
2、_top为上级窗口（使用多级框架时）
3、_blank为打开新窗口；
4、_parent为父窗口（使用框架时）；
5、默认的效果
.第1和第5种情况是相同的，_self表示“相同窗口”。点击链接后，地址栏不变。在网页中没有做设置时，网页链接默认的窗口为_self。.第2和第4种情况，也是相同的。_top表示整页窗口，_parent表示父窗口。实际使用中，它们没有任何区别，地址栏会变化。
._blank是最常见的链接方式，表示超链接的目标地址在新建窗口中打开。
练习
4、打开：未做超链接.html的文件，在此网页中做超链接的练习，参看文件超链接.htm。
五、word和excel文档的导入。
六、利用一个现有网页制作其他网页（相同的页眉，导航，页脚）
例如利用首页index.html制作课程介绍这一页
kcjs.html 步骤：
1、打开index.html文件，把页面中相同的部分如页眉，导航，页脚等保留，不同的地方删除或更改，再保存为kcjs.html
2、在需要更改的地方插入图片等其他网页内容。
练习
5、打开index.htm,利用这个网页制作出几个相同的页眉，导航，页脚的网页。并设置这些网页导航的链接，七、行为的简单运用：
（一）利用行为创建弹出式菜单
制作“弹出式菜单”的步骤如下：
（1）在网页上选择要附加该行为的对象（导航栏按钮、链接文本、图片等）并打开“行为”面板。
（2）单击加号(+)按钮并从“动作”弹出式菜单中选择“显示弹出式菜单”，弹出设置对话框，如图14-13所示。
图14-13 设置弹出式菜单
（3）在出现的“显示弹出式菜单”对话框中，使用以下标签来设置弹出式菜单的选项： 内容：设置、更改单个菜单项的名称、结构、URL 和框架目标。
外观：设置菜单一般状态和滑过状态的外观以及设置菜单项文本的字体选择。 高级：设置菜单单元格的属性。例如，可以设置单元格的宽度和高度、单元格颜色和边框宽度、文本缩进以及在用户将鼠标指针移到触发器上后菜单出现之前的延迟时间长度。
位置：设置菜单相对于触发图像或链接的放置位置。
（4）单击“确定”，关闭对话框。
（5）检查默认事件是否是所需的事件。该行为的事件一般为“onMouseover”，即鼠标滑过时显示菜单。
（二）弹出消息框。
（三）打开浏览窗口
（1）选择网页中需要点击的内容，在属性面板上的链接栏上填上 #，如下图：
（2）打开「行为」面板，点击（+）按钮并从「动作」弹出式菜单中选择「打开浏览器窗口」；
（3）在打开的浏览器窗口中点击「浏览」选取需要链接的文件，或者输入您需要显示的URL地址。
（4）设置下列选项：
「窗口宽度」 指定以象素为单位的窗口宽度。
「窗口高度」 指定以象素为单位的窗口高度。
「导航工具栏」 是一行浏览器按钮包括「前进」，「后退」，「主页」和「刷新」。
「地址工具栏」 是一行浏览器选项，其中包括地址域。
「状态栏」 是浏览器窗口底部的区域，用于显示信息（如剩余加载时间，和URL关联的链接）。
「菜单条」 是浏览器窗口（Windows）或桌面（Macintosh）上菜单出现的区域。菜单包括如「文件」，「编辑」，「查看」，「转到」，「帮助」等等。如果您需要来访者可以从新窗口导航，那么您可以明确地设置该选项。如果您不设置该选项，来访者在新窗口中将只能关闭或最小化窗口（Windows）或者关闭窗口或退出程序（Macintosh）。
「需要时使用滚动条」 指定如果内容超过可见区域时滚动条自动出现。如果您不明确设置该选项，滚动条不会出现。如果「调整大小手柄」也被关闭，那么来访者将没有方便的办法看见超过窗口原始大小的那部分内容。（虽然他们可能可以通过使用拖动窗口边缘的办法使窗口滚动。）
「调整大小手柄」 指定用户是否可以调整窗口大小，无论是通过拖动窗口的右下角还是点击右上角的最大化按钮（Windows）或大小框（Macintosh）的办法。如果该选项没有明确设置，调整大小控制将不可用，而且右下角也是不可拖动的。
「窗口名称」 就是新窗口的名称。如果您想使用其作为链接目标或者用JavaScript控制它，那么您应该给新窗口命名。该名称中不能包含空格或特殊字符。
（5）点击「确定」。
（6）检查默认事件是否是您需要的事件。
如果该事件不是您所需的，请从弹出式菜单中选择另一个事件。如果您需要的事件没有列出，请在「选择浏览器」弹出式菜单中改变目标浏览器。
（四）在网页中添加背景音乐。（wave、mp3等格式）
练习6：制作利用行为制作弹出式菜单、打开浏览窗口和弹出消息框、在网页中添加背景音乐的练习。
八、内框的运用 滚动内框
| 代码中红色部分nk1.html为内框中的网页
九、创建网站相册：如果你要处理大量图片时，可以用这个。
练习7：
在你站点下建立一个放置数张图片的文件夹,本实例是将文件夹命名为photo。创建网站相册
网页制作与设计教案
第一讲 网页设计概述....................................................................................................................3 1.1WWW和URL.....................................................................................................................3 1.2IE5的使用............................................................................................................................3 1.3 网页中所使用的技术............................................................................................................4 1.4 制作网页的基本方法............................................................................................................4 第二讲 HTML的基本标志与格式标志.......................................................................................4 2.1 HTML文档的基本结构.........................................................................................................5 第三讲 HTML的文本、图片与超级链接标志...........................................................................5 2.2 插入文字................................................................................................................................6 2.3 插入图片................................................................................................................................8 2.4 建立超级链接........................................................................................................................8 第四讲 HTML表格、表单与框架标志.......................................................................................9 2.5 插入表格................................................................................................................................9 2.6 表单的应用..........................................................................................................................10 2.7 框架窗口..............................................................................................................................10 第五讲 HTML标志综合运用案例.............................................................................................11 第六讲 DREAMWEAVER中简单WEB站点建立与管理.....................................................12 3.1 DREAMWEAVER概述............................................................................................................12 第七讲 DREAMWEAVER中静态网页设计.............................................................................13 3.2 在页面中加入文字和图像..................................................................................................14 3.3 超级链接的运用..................................................................................................................14 3.4.表格的应用.........................................................................................................................14 3.5.在网页中创建表单.............................................................................................................15 第八讲 DREAMWEAVER中动态网页设计.............................................................................15 第九讲 DREAMWEAVER综合性网页设计案例.....................................................................16 第十讲 VBSCRIPT概述.............................................................................................................17 4.1 VBSCRIPT语言简介.............................................................................................................17 第十一讲 VBSCRIPT的基本元素与输入输出.........................................................................18 4.2.基本数据类型.......................................................................................................................18 4.2.表达式和运算符.................................................................................................................19 第十二讲 VBSCRIPT的条件语句、循环语句和过程.............................................................20 4.3 VBSCRIPT基本语句.............................................................................................................20
第一讲 网页设计概述
【教学内容】
讲解网页设计的相关术语及网站制作的基本流程。【教学目的】
使学生对网站及网页有一定的认识，激发学生学习网页设计的兴趣。【教学重点】
网页设计中的若干术语。【教学难点】
理解网页设计中的若干术语。【教学方式】
讲授式、讨论式、案例分析式。【教学参考】
1、《网页设计与制作》杨尚森 曲宏山 贾文峰等著 电子工业出版社。
2、《Internet 网页工场》Wittime工作室 重庆出版社。
3、《WEB网站设计》Joel Sklar著 高等教育出版社。
4、《HTML网页制作教程》材义语编著 铁道出版社。【新课内容】
1.1 WWW和URL 1.1.1 Web的起源
Web是World Wide Web的简称，一般也称之为WWW或3W 1.1.2 Web的特点和结构
Web最大的特点是使用了超文本（Hypertext）WWW采用C/S（客户机/服务器）工作模式
在浏览器和服务器之间应用HTTP（Hyper Text Transfer Protocol，超文本传输协议）作为网络应用层通信协议 1.1.3 URL URL的完整格式
协议://主机名或IP地址：端口号/路径名/文件名
1.2 IE5的使用
Web浏览器是浏览Internet资源的客户端软件
在Windows环境下使用的浏览器主要有Internet Explorer、Netscape Navigator、Mosaic等
1.2.1 IE5的界面 1.2.2 IE5的使用
列表标志的使用。【教学方式】
讨论式、案例分析式、练习式。【教学参考】
1、《网页设计与制作》杨尚森 曲宏山 贾文峰等著 电子工业出版社。
2、《WEB网站设计》Joel Sklar著 高等教育出版社。
3、《HTML网页制作教程》材义语编著 铁道出版社。【新课内容】
2.1 HTML文档的基本结构
2.1.1 HTML语法
1、双标记
语法：
<标记>内容
2、单标记 语法：<标记> 最常用的单标记是
3、标记属性 语法
<标记
属性1 属性2 属性3 … > 例子
4、注释语句 格式
例子
2.1.2 HTML文档的基本结构 【课后小结】
通过本次课的学习,要求能熟练掌握网页面的基本标志与格式标志,并能灵活运用 列表,有序列表,无序列表标志及属性。
第三讲 HTML的文本、图片与超级链接标志
【教学内容】
讲解HTML标准中的文本、图片与超级链接标志 【教学目的】
* 使学生了解标题元素,掌握字体,上下标,及特殊字符的标志。
< EM>......，强调文字，通常用斜体。
< STRONG>......，特别强调的文字，通常用黑体。
......，以等宽体显示西文字符。
......，使文字大小相对于前面的文字增大一级。
......，使文字大小相对于前面的文字减小一级。......，使文字成为前一个字符的上标。......，使文字成为前一个字符的下标。......，使文字显示为闪烁效果。2.2.6
文本修饰 2.2.7
预格式化文本 使用预格式化标记
不再忽略在此之间的空格、制表符与回车符等元素 2.2.8 转义字符与特殊字符
一般转义符都是以“&”开始，以“；”结束，一个转义符之间不能有空格 2.2.9 文本强制换行和不换行 文本强制换行
不换行 2.2.10 插入水平线 使用
标记
属性：Width，Size，Align，Noshade，color 2.2.11 使用列表
1、无序列表
2、有序列表
- 列表条目1
- 列表条目2......
3、定义列表
- 列表条目1
- 条目1的说明
- 列表条目2
- 条目2的说明 ……
...... 2.4.4 图像地图 【课后小结】
本节介绍了在网页中加入文本、图片和超级链接的标志与相应属性，熟练运用这些标志是制作多媒体网页的基础。超级链接标志中，书签链接是一类特殊的链接方式，理解和使用书签链接学习HTML中超级链接标志的难点。
第四讲 HTML表格、表单与框架标志
【教学内容】
讲解HTML中制作表格、表单与框架的标志。【教学目的】
使学生掌握简单表格、表单与框架的制作。【教学重点】
* 表格中单元格的合并以及表格嵌套和叠加操作。* 框架的嵌套使用。* 表单元素标志与属性。【教学难点】
* 理解表格属性rowspan与colspan的含义以及表格嵌套实现的基本思想。* 理解框架属性name、target的意义。
* 理解表单中相应元素对应标志及属性的含义。【教学方式】
案例分析式、项目教学 【教学参考】
1、《网页设计与制作》杨尚森 曲宏山 贾文峰等著 电子工业出版社。
2、《WEB网站设计》Joel Sklar著 高等教育出版社。
3、《HTML网页制作教程》材义语编著 铁道出版社。【新课内容】
2.5 插入表格
2.5.1 在网页中插入表格
表格的基本构成元素：表头，单元格，列，行
| 第一行第一列 | 第一行第二列 |
| 第二行第一列 | 第二行第二列 | FrameSpacing=“2“
BorderColor=”#008000“ >
2.7.3 子窗口属性设置
2.7.4 常见的框架窗口划分方法（1）标题和正文，分为上下两部分（2）层次结构，分为上中下三部分
（3）目录和标题，分为左上、左下、右三部分
（4）标题、目录和正文，分为上、左下、右下三部分（5）嵌套目录，分为左、右上、右下三部分 2.7.5 不支持框架的网页
