《网页设计》实验讲义

实验一用Dreamweaver制作简单网页
一、实验目的
1. 熟悉Dreamweaver界面和基本操作
2. 掌握在Dreamweaver中创建网站、创建空白网页、保存网页的方法
3. 掌握网页基本元素的插入和设置方法
二、预备知识
1. 文档窗口视图
“代码”视图：是一个用于编写和编辑XHTML、JavaScript、ASP、PHP等代码的手工编码环境，可在该视图中直接输入XHTML等代码制作网页。

“设计”视图：是一个用于可视化编辑网页的设计环境，在该视图中显示的页面类似于在浏览器中看到的页面。

“拆分”视图：将文档窗口一分为二，上面显示“代码”视图，下面显示“设计”视图，以方便对照。

2. 常用面板
“插入”面板：位置紧接在菜单栏下面，包括“常用”、“布局”、“表单”等子面板，可用来在网页光标处插入各种网页元素。

相应的功能也可由菜单“插入记录”完成。

“属性”面板：位置在网页编辑区下面，用于显示或修改所选中的网页元素的属性，是Dreamweaver中最常用的面板。

随着所选对象不同，属性面板呈现的参数也不同。

“文件”面板：位置在网页编辑区右边，用于访问和管理网站内容。

如图1-1所示。

图1-1 Dreamweaver界面
3. 创建站点
在Windows资源管理器中创建目录作为站点目录，并在该目录下创建images目录，将
所需要的图片等素材文件复制到images目录下。

注意：网站中的目录名和文件名应该用英文字母和数字，避免用中文，否则后面创建网页时可能会识别不出来。

启动Dreamweaver，选择“站点”菜单→“新建站点”命令，进行设置。

4. 创建网页及保存
选择“文件”菜单→“新建”命令，创建网页。

选择“文件”菜单→“保存”命令，保存网页。

默认保存位置为站点目录，默认保存类型为“.html”。

注意：网页创建后，应该立即保存，这样以后在页面中插入的图片、链接可以以相对路径保存，避免网站上传后找不到图片、链接的情况发生。

5. 设置页面属性
在“属性”面板中单击“页面属性”按钮，可以设置如网页标题、页面文本字体格式、网页背景颜色或图像、链接文字颜色和格式等页面属性。

6. 插入网页基本元素
添加文本：
直接输入，可在“属性”面板中设置文本格式。

插入表格：
选择“插入记录”菜单→“表格”命令，在光标处插入表格。

可在“属性”面板中设置表格属性。

插入图像：
选择“插入记录”菜单→“图像”命令，在光标处插入图像。

可在“属性”面板中设置图像属性。

添加链接：
选择热点文字或图像，在属性面板中单击“链接”文本框右边的，选择站点目录下的文件，即可将热点链接到该文件。

三、示例
1. 启动Dreamweaver
在桌面上双击Dreamweaver图标。

2. 熟悉Dreamweaver窗口和基本操作
操作1：观察Dreamweaver的窗口组成。

操作2：显示或隐藏面板
界面上未显示的面板，可通过选择“窗口”菜单中相应的面板名显示出来（此时相应命令前有“√”），再执行一次同样的命令则隐藏面板。

3. 创建网站
操作1：在Windows资源管理器中创建目录D:\WEB\experiment，作为站点目录；再在该目录下创建images目录，将所需要的图片等素材文件复制到images目录下。

操作2：选择“站点”菜单→“新建站点”命令，在对话框中选择“高级”选项卡，如图1-2设置站点，“确定”。

完成站点创建。

图1-2 站点设置
4. 创建空白网页并保存
操作1：选择“文件”菜单→“新建”命令，在打开的对话框中，选“空白页”，“页面类型”选“HTML”，“布局”选“无”，单击“创建”按钮。

操作2：选择“文件”菜单→“保存”命令，在打开的对话框中，会发现保存位置已经是站点目录D:\WEB\experiment，输入文件名“index”，保存类型默认是“.html”，单击“保存”按钮。

此时可在右边的文件面板中看到名为“index.html”的文件（若看不到可选择“窗口”菜单→“文件”命令显示文件面板）。

5. 观察Dreamweaver文档窗口的三个视图
操作1：单击“index.html”文档窗口的“代码”按钮，切换到代码视图，可以看到如图6.1所示的Dreamweaver自动生成的XHTML文档基本结构，可在该视图中直接输入XHTML代码制作网页。

操作2：单击“拆分”按钮，切换到拆分视图，可看到文档窗口一分为二，上面显示“代码”视图，下面显示相应的“设计”视图，方便对照。

操作3：单击“设计”按钮，切换到设计视图，这是Dreamweaver提供的可视化编辑视图，在Dreamweaver中设计网页主要在该视图进行。

6. 设置页面属性
操作1：在属性面板中单击“页面属性”按钮，打开对话框。

操作2：单击“页面字体”右边的按钮，若选项中没有“隶书”，则选择“编辑字体列表”，在“可用字体”中选择“隶书”，单击按钮，可以看到“选择的字体”中出现了“隶书”，单击“确定”按钮。

再次单击“页面字体”右边的按钮，可以看到“隶书”出现在选项中，选择“隶书”。

网页的默认字体设为隶书。

操作3：“大小”选择24像素，将网页的默认字体大小设为24像素。

操作4：“文本颜色”选择黑色（#000000），将网页的默认文本颜色设为黑色。

操作5：单击“背景图像”右边的“浏览”按钮，选择站点images目录下的“greenrabbit.jpg”
文件，该图片将作为整个网页的背景。

操作6：在“分类”中单击“标题/编码”，在“标题”文本框中输入“小白兔幼儿园”，该标题将显示在浏览器标题栏上。

操作7：单击“确定”按钮，完成页面属性设置。

7. 添加网页内容
操作1：在文档窗口中输入“小白兔幼儿园”，回车，回车。

选中文字“小白兔幼儿园”，在属性面板中单击“居中对齐”按钮，“大小”输入48，回车。

操作2：在文档窗口中单击“小白兔幼儿园”的下一行，选择“插入记录”菜单→“表格”命令，在打开的对话框中，设置1行4列，“表格宽度”为70%，下面3个文本框全部输入0，单击“确定”按钮。

在属性面板中，“对齐”选“居中对齐”，则表格在页面中水平居中。

操作3：在表格的4个单元格中，依次输入“教育教学”、“招生信息”、“家园互动”、“联系方式”。

选中4个单元格，在属性面板中单击“居中对齐”按钮，则文字在单元格中居中对齐。

操作4：添加链接。

选中文字“教育教学”，在属性面板中单击“链接”文本框右边的，选择站点目录下的“education.html”文件，“确定”。

可以看到“链接”文本框中出现“education.html”文件名，这样就为文字“教育教学”创建了到网页“education.html”的链接。

选中文字“招生信息”，在文件面板中将“recruit.html”文件拖曳到属性面板的“链接”文本框中，回车。

这样就为文字“招生信息”创建了到网页“recruit.html”的链接，这是添加链接的另一种方法。

为文字“家园互动”创建到“interaction.html”的链接。

为文字“联系方式”创建到“communication.html”的链接。

操作5：单击表格的下一行，选择“插入记录”菜单→“表格”命令，在打开的对话框中，设置1行2列，“表格宽度”为90%，“边框粗细”为0，“单元格边距”为10，“单元格间距”为10，单击“确定”按钮。

在属性面板中，“对齐”选“居中对齐”。

操作6：单击第一个单元格，选择“插入记录”菜单→“图像”命令，选择站点images 目录下的“children.jpg”文件，“确定”，“确定”。

此时图像为原始大小，单元格自动调整宽高以恰好容纳图像。

在属性面板中设宽为240、高为210。

在文档窗口中单击一下，单元格重新调整。

操作7：在右边单元格中输入并设置幼儿园简介文字。

输入文字“幼儿园简介”，回车。

选中“幼儿园简介”，在属性面板中单击“居中对齐”按钮，“大小”输入30，回车。

在“幼儿园简介”下一行输入以下文字：
小白兔幼儿园位于上海市西南部，建于一九八六年十月，建筑面积4000平方米。

拥有幼儿500余名。

建园以来，我们在上级幼教部门的关怀和领导下，以全国省、市教育工作精神和邓小平同志关于“教育要面向现代、面向世界、面向未来”的思想为指导，以贯彻两个幼教行政法规为依据，以“一切为了孩子”为办园宗旨，本着“幼儿至上、服务第一、团结求实、进取创新”精神，全面实施素质教育，使园所面貌发生了深刻的变化，先后荣获了市先进单位和市示范幼儿园称号。

8. 保存网页
选择“文件”菜单→“保存”命令。

9. 打开网页
操作1：按F12键，可在IE浏览器中预览网页。

操作2：在Windows资源管理器中双击“index.html”文件，打开网页，如图1-3所示。

图1-3 实验一示例网页
图1-4 实验一二练习网页
四、练习
按照图1-4所示样张完成网页，以文件名“ex621.html”保存。

具体要求如下：
1. 网页默认字体“隶书”，默认字体大小24像素，背景图像“police.jpg”，网页标题“交通规则”。

2. 文字“欢迎学习交通规则”为白色、48像素、居中对齐。

3. 为左边一列各章设置链接。

4. 合并中间一列，输入图示文字。

5. 合并右边一列，插入图片“safety.jpg”，设宽150、高260。

实验二用Dreamweaver制作表单
一、实验目的
1. 了解表单的作用
2. 了解Dreamweaver的常用表单项及其属性
3. 掌握表单界面的设计方法
二、预备知识
1. 表单
表单用于Web服务器和浏览器之间数据的双向流动，服务器通过表单从浏览器端收集信息，交由服务器端CGI(Common Gateway Interface)程序处理后，将结果返回给浏览器。

在网页中插入表单，就能实现网页的交互作用。

要使表单真正起作用，必须结合服务器端CGI 程序一起使用。

本章不涉及编程，所以只是要求掌握表单界面的设计。

2. 表单及表单项的插入方法
有两种方法：
选择“插入记录”菜单→“表单”命令，表单及所有的表单项都可以在其中找到。

选择“插入”面板→“表单”子面板，表单及所有的表单项都可以在其中找到。

3. 插入表单
光标定位在要插入表单的地方。

选择“插入记录”菜单→“表单”→“表单”命令，在光标处出现一个红色虚线框，这就是表单，可以看到下面的属性面板中出现表单属性。

以后插入的属于这个表单的表单项都必须放在红框中，这样提交时才能作为一个整体提交。

4. 插入文本域
选择“插入记录”菜单→“表单”→“文本域”命令。

文本域是一个单行文本框。

5. 插入文本区域
选择“插入记录”菜单→“表单”→“文本区域”命令。

文本区域是一个多行文本框。

6. 插入复选框
选择“插入记录”菜单→“表单”→“复选框”命令，插入一个复选框。

7. 插入单选按钮
选择“插入记录”菜单→“表单”→“单选按钮组”命令，插入一组单选按钮（默认2个）。

由于单选按钮具有组内只能选一个的特性，因此建议用“单选按钮组”命令而不是各自为战的“单选按钮”命令。

8. 插入列表/菜单
选择“插入记录”菜单→“表单”→“列表/菜单”命令，插入一个列表框。

“菜单”即下拉式列表框，只占一行，单击下拉按钮时显示列表选项，只允许选一项；“列表”可以指定占几行（“高度”属性），允许多选。

9. 插入按钮
选择“插入记录”菜单→“表单”→“按钮”命令，插入一个按钮（默认为提交按钮）。

一个表单必须包含一个提交按钮，才能将各表单项内容提交给服务器。

10. 插入跳转菜单
选择“插入记录”菜单→“表单”→“跳转菜单”命令，插入一个下拉菜单，可以添加菜单命令并指定执行命令后转向的网页。

“跳转菜单”命令可以单独使用。

三、示例
1. 在站点目录下新建文件“register.html”，作为小白兔幼儿园的入园报名网页
操作1：选择“文件”菜单→“新建”命令，在打开的对话框中，选“空白页”，“页面类型”选“HTML”，“布局”选“无”，单击“创建”按钮。

操作2：选择“文件”菜单→“保存”命令，在打开的对话框中，会发现保存位置已经是站点目录D:\WEB\experiment，输入文件名“register.html”，单击“保存”按钮。

2. 设置页面属性
操作1：在属性面板中单击“页面属性”按钮，打开对话框。

操作2：设置“页面字体”为“隶书”，“大小”为24像素，“文本颜色”为墨绿色（#006600）。

操作3：在“分类”中单击“标题/编码”，输入“标题”为“小白兔幼儿园入园报名”。

操作4：单击“确定”按钮，完成页面属性设置。

3. 添加网页内容
操作1：在文档窗口中输入“入园报名”，回车。

选中文字，在属性面板中单击“居中对齐”按钮，“大小”输入48，回车。

操作2：在“入园报名”的下一行，选择“插入记录”菜单→“表单”→“表单”命令，在页面中插入一个空表单。

操作3：在表单虚线框中，选择“插入记录”菜单→“表格”命令，在打开的对话框中，设置7行3列，“表格宽度”为90%，“边框粗细”为0，“单元格边距”为0，“单元格间距”为10，单击“确定”按钮。

在属性面板中，“对齐”选“居中对齐”。

操作4：在第一行第一个单元格中，输入“宝宝姓名：”；第二个单元格中，选择“插入记录”菜单→“表单”→“文本域”命令，在弹出的对话框中单击“取消”按钮。

操作5：在第二行第一个单元格中，输入“宝宝出生日期：”；第二个单元格中，选择“插入记录”菜单→“表单”→“文本域”命令，单击“取消”按钮。

操作6：在第三行第一个单元格中，输入“宝宝性别：”；第二个单元格中，选择“插入记录”菜单→“表单”→“单选按钮组”命令，在弹出的对话框中将第一行的“标签”和“值”均设为“男”，第二行的“标签”和“值”均设为“女”，单击“确定”按钮。

鼠标在页面上“男”后单击，按Del键，现在两个选项在同一行上。

操作7：在第四行第一个单元格中，输入“家长姓名：”；第二个单元格中，选择“插入记录”菜单→“表单”→“文本域”命令，单击“取消”按钮。

操作8：在第五行第一个单元格中，输入“所属小区：”；第二个单元格中，选择“插入记录”菜单→“表单”→“列表/菜单”命令，单击“取消”按钮。

在属性面板中单击“列
表值”按钮，在如图2-1所示的对话框中，“项目标签”下输入“长桥一村”，单击，输入“长桥二村”，单击，输入“罗阳一村”，“确定”。

操作9：在第六行第一个单元格中，输入“联系电话：”；第二个单元格中，选择“插入记录”菜单→“表单”→“文本域”命令，单击“取消”按钮。

操作10：选中第七行前2个单元格，在属性面板上单击单元格合并按钮。

单击合并后的单元格，选择菜单“插入记录”→“表单”→“按钮”命令，单击“取消”按钮。

光标放到提交按钮右边，输入一个全角空格，选择菜单“插入记录”→“表单”→“按钮”命令，单击“取消”按钮，在属性面板上设置“动作”为“重设表单”。

光标放到重置按钮右边，在属性面板上单击“居中对齐”按钮。

操作11：鼠标单击“家长姓名”单元格，选择“修改”菜单→“表格”→“插入行”命令，
图2-1所属小区列表值对话框
图2-2 实验二示例网页
在“家长姓名”上方插入一行。

在第一个单元格中，输入“宝宝简介：”；第二个单元格中，选择“插入记录”菜单→“表单”→“文本区域”命令，单击“取消”按钮。

操作12：选中第三列的前3个单元格，在属性面板上单击单元格合并按钮，单击合并后的单元格，选择菜单“插入记录”→“图像”命令，选择“catmum.jpg”文件，“确定”，“确定”，在属性面板上设“宽”为180、“高”为150。

选中第三列的中间2个单元格，在属性面板上单击单元格合并按钮，单击合并后的单元格，选择菜单“插入记录”→“图像”命令，选择“dog1.jpg”文件，“确定”，“确定”，在属性面板上设“宽”为180、“高”为150。

选中第三列的后3个单元格，在属性面板上单击单元格合并按钮，单击合并后的单元格，选择菜单“插入记录”→“图像”命令，选择“dog2.jpg”文件，“确定”，“确定”，在属性面板上设“宽”为180、“高”为150。

4. 保存网页
选择“文件”菜单→“保存”命令。

5. 打开网页
按F12键，可在IE浏览器中看到如图2-2所示的网页。

四、练习
按照图2-3所示样张完成网页，以文件名“ex631.html”保存。

具体要求如下：
1. 网页默认字体“楷体”，默认字体大小16像素，网页标题“交通规则测试”。

2. 文字“交通规则测试”大小为24像素、居中对齐。

3. 表单中设置表格（2列），测试题放在表格中。

图2-3 实验二练习网页
实验三用Dreamweaver制作框架网页（一）
一、实验目的
1. 了解框架与框架集的定义
2. 了解框架的作用
3. 掌握用框架进行页面布局的方法
二、预备知识
1. 框架与框架集
请看下面的XHTML代码：
<html>
<head>
<title>框架集网页</title>
</head>
<frameset cols="200,*">
<frame src="catalog.html" name="leftFrame" />
<frame src="chapter1.html" name="mainFrame" />
</frameset>
</html>
这是一个框架集文件的源代码，解释如下：
<html>和</html>作为一个XHTML文档的开始标记和结束标记，浏览器从<html>开始解释，直到遇到</html>为止。

<head>与</head>之间为XHTML文档的头部，其中包含了<title>与</title>之间的网页标题。

<frameset>是框架集，<frame>是框架，一个框架集包含几个框架。

<frameset>标记可以包含属性"cols"或"rows"，<frameset cols="200,*">表示该框架集包含纵向的两个框架，左起第一个框架宽度为200像素，余下的浏览器窗口宽度都给第二个框架。

<frame src="catalog.html" name="leftFrame" />表示第一个框架中显示"catalog.html"文件的内容，框架名为"leftFrame"。

<frame src="chapter1.html" name="mainFrame" />表示第二个框架中显示"chapter1.html"文件的内容，框架名为"mainFrame"。

打开框架集文件，浏览器显示如图5-1所示的框架网页。

若将源代码中的<frameset cols="200,*">替换为<frameset rows="200,*">，则表示该框架集包含横向的两个框架，上起第一个框架高度为200像素，余下的浏览器窗口高度都给第二个框架，如图5-2所示。

框架集可以嵌套。

可以看到框架集文件不包含<body>部分。

<body>与</body>之间是页面内容。

框架集文件犹如一本书的目录，指出本书包含几章、篇幅如何分配，但不会包含正文内容。

正文内容在哪里，由<frame>标记的"src"属性指定。

2. 框架网页
框架网页是框架与框架集的组合，框架集指定整个浏览器窗口由几个框架组成、如何分配，框架指定其中显示哪个网页。

如图3-1、3-2显示的都称为框架网页。

在框架网页中，框架集文件是总纲，要显示框架网页，应该打开框架集文件而不是框架中的某一个网页文件。

3. Dreamweaver的页面布局方法
在Dreamweaver中，页面布局有三种方法：表格、框架和层。

一般简单网页常用表格布局，优点是简单方便。

复杂一点的网页常用框架布局，优点是将复杂网页切块，分而治之，降低每一个网页的复杂度。

而且当网页的一部分是固定不动的时候，可以将固定的部分与变化的部分放在不同
的网页中。

比如网页的导航条通常是固定的，可以单独放在一个网页中，当用户单击超链接的时候，只要更新某个框架的网页就可以了，这对于整个框架网页来说相当于部分更新，可以节约带宽、提高速度。

图3-1 纵向框架集
图3-2 横向框架集
层可以放在页面的任何地方，可以任意指定层的大小，用层布局的优点是灵活，但当页面比较复杂时，初学者不容易掌握。

4. Dreamweaver中框架网页的创建、设置与保存
创建：选择“文件”菜单→“新建”命令，在打开的对话框左侧一栏中选“示例中的页”，“示例文件夹”选“框架集”，“示例页”中选一种布局，“创建”，“确定”。

设置：选择“窗口”菜单→“框架”命令，在屏幕右边显示框架面板。

可以在框架面板中选择框架集或某个框架，再在相应的属性面板中设置。

可以设置布局参数，也可指定框架显示哪个网页文件。

保存：选择“文件”菜单→“保存全部”命令，在“另存为”对话框中，首先要求保存的是框架集文件，然后依次要求保存各框架中未命名的网页文件，这时需要观察文档窗口，看哪个框架被阴影框住，输入相应的文件名。

注意，若某个框架中显示的是已存在的网页文件（在该框架的属性面板中设置），则不会要求起名保存，而是将已改动的内容直接保存在该网页文件中。

三、示例
1. 在站点目录下新建文件夹“frame”，将所需文件复制过来。

操作1：站点目录为“D:\WEB\experiment”，在Windows资源管理器中，在“D:\WEB\experiment”下新建文件夹“frame”。

“communication.html”、操作2：将“D:\WEB\experiment”下的“index.html”、“register.html”、
“education.html”、“interaction.html”、“recruit.html”6个文件复制到“frame”文件夹下。

2. 用框架布局的方式为小白兔幼儿园创建主页。

操作1：创建框架集文件。

选择“文件”菜单→“新建”命令，在打开的对话框左侧一栏中选“示例中的页”，“示例文件夹”选“框架集”，“示例页”选“上方固定”，“创建”，“确定”。

操作2：设置框架集文件。

选择“窗口”菜单→“框架”命令，在屏幕右边显示框架面板，单击最外面的框架线，如图3-3所示，选中整个框架集。

在文档窗口上方“标题”文本框中输入框架网页标题“小白兔幼儿园”，如图3-4所示。

图3-4 标题文本框
图3-3 在框架面板中选择框架集图3-5 在框架面板中选择mainFrame框架在框架面板中单击mainFrame框架，如图3.5所示。

在属性面板中单击“源文件”右侧的，选择“frame”文件夹下的“index.html”文件。

这样就指定了mainFrame框架中初始显示的网页。

操作3：保存框架网页。

框架网页包含框架集文件和各框架对应的网页文件。

选择“文件”菜单→“保存全部”命令，在“另存为”对话框中，“保存在”选“frame”文件夹，“文件名”中首先输入的是框架集文件名“fmindex.html”，单击“保存”按钮。

接着可以看到文档窗口中上方框架被阴影框住，在“另存为”对话框“文件名”中输入“top.html”，这是topFrame框架对应的网页。

由于mainFrame框架对应的网页已经存在，不会要求保存。

操作4：修改框架中的网页。

我们的设想是将页面标题和导航条这些固定的部分放到上方框架中，下面mainFrame 框架的内容则随链接而变。

选中下方框架中的标题和链接行，剪切，到上方框架中粘贴。

由于上方框架高度不够，只能看到标题行。

单击文档窗口中两个框架间的分隔线，在属性面板“行”中输入值为150，如图3-6所示，将上方框架高度改为150像素。

图3-6 框架集属性面板
现在上方框架中的文字为默认字体宋体，这是因为我们没有对“top.html”文件设置页面属性。

在文档窗口上方框架中单击，设置页面属性，将“页面字体”设为隶书、“大小”设为24像素、“背景图像”设为站点images目录下的“greenrabbit_01.jpg”文件，“确定”。

选中文字“小白兔幼儿园”，在属性面板上设为48像素。

在上方框架中选中“家园互动”，选择“修改”菜单→“表格”→“插入列”命令，在“家园互动”前插入一列。

输入“入园报名”，设为居中对齐。

选中“入园报名”，在属性面板中设置链接到“register.html”文件，“目标”选择“mainFrame”，如图3-7所示。

这是指定单击“入园报名”后，链接的网页将在mainFrame框架中显示。

同样将其它链接的目标均设为“mainFrame”。

图3-7 链接目标
单击文档窗口下方框架第一行，按Backspace键删除第一行空白行。

我们看到左边的图片是灰色的占位符，这是因为“index.html”文件被复制到另一个文件夹下，原来的图片相对路径不适用了，系统找不到图片。

重新设置一下就可以了。

单击灰色的图片占位符，在属性面板中单击“源文件”右侧的，选择“images”文件夹下的“children.jpg”文件，将“宽”设为240、“高”210。

同样“index.html”文件的背景图像也找不到了，需要重新设置页面属性。

由于框架网页几个框架的背景图像合在一起必须天衣无缝，所以应该事先做好相应大小的图片，如“greenrabbit_01.jpg”和“greenrabbit_02.jpg”就是“greenrabbit.jpg”拆分而得。

将“index.html”文件的背景图像设为images目录下的“greenrabbit_02.jpg”文件。

选择“文件”菜单→“保存全部”命令，保存修改后的框架网页。

操作5：浏览框架主页。

按F12键，可在IE浏览器中看到如图3-8所示的网页。

图3-8 小白兔幼儿园框架主页
图3-9 小白兔幼儿园入园报名页面
操作6：关闭框架主页文档窗口。

3. 修改其它网页。

现在需要修改作为导航条链接对象的几个网页文件，以“register.html”文件为例。

操作1：在Dreamweaver中打开“register.html”文件。

操作2：可以看到3个图片都是灰色占位符。

重新设置图片源文件，并将图片“宽”、“高”统一设置为180、150。

操作3：将背景图像设为images目录下的“greenrabbit_02.jpg”文件。

操作4：在IE浏览器中打开小白兔幼儿园框架主页，单击“入园报名”，页面如图3-9所示。

四、练习
1. 按照图3-10所示样张完成网页，以文件名“ex641.html”保存。

具体要求如下：
框架网页布局选择“上方固定，左侧嵌套”，标题为“交通规则”。

mainFrame框架显示“ex621.html”网页文件，上方框架网页文件命名为“top.html”，左侧框架网页文件命名为“left.html”。

上方框架行高80，左侧框架列宽150。

所有字体均为楷体。

将“top.html”文件的背景图像设为images目录下的“police_01.jpg”文件，将“left.html”文件的背景图像设为“police_02.jpg”文件，将“ex621.html”文件的背景图像设为“police_03.jpg”文件。

将“测试”链接到“ex631.html”文件，“目标”为mainFrame框架；将“主页”链接到“ex621.html”文件，“目标”为mainFrame框架。

将左侧框架所有链接的目标均设为mainFrame框架。

图3-10实验三练习1网页。