河南科技大学网页设计实验作业

《网页设计与制作实验指导书》

河南科技大学管理学院

目录

实验规则.................................................................3

实验报告要求.............................................................4

基本实验方法.............................................................4

实验环境.................................................................4

实验一Dreamweaver8基本操作、站点管理...............................5

实验二网页的定位技术以及制作层动画..................................7

实验三网页编辑与超链接................................................13

实验四层叠样式、模板和库..............................................17

实验五表单与表单域....................................................23

实验规则

为了顺利完成实验教学任务，确保人身设备安全，培养严谨、踏实、实事求

是的科学作风和爱护国家财产的优良品质，特制定以下实验规则：

1、实验纪律

(1)在实验室不得做和实验无关的事情。

(2)遵守纪律，不迟到，不旷课。

(3)不能拆卸硬件，更不能拿走实验设备或仪器。

(4)保持实验室安静、整洁，爱护公物。

2、实验过程

(1)预习实验内容。

(2)上机操作。记录实验中遇到的问题，主要是错误信息和错误原因。

(3)检查操作结果是否正确。

(4)根据实验过程的记录书写实验报告。

实验报告要求

1、报告用纸采用统一的河南科技大学实验报告用纸，或按照指导老师指

定的统一格式打印。

2、实验报告封面内容

实验名称：（如实验一网页的定位技术）

班级名称：（如计031班）

学生学号：

学生姓名：

实验时间：

3、实验报告内容

见各具体实验项目的要求。

基本实验方法

本实验要求熟悉Dreamweaver8.0的工作环境和网页设计制作的相关知识。

实验环境

Dreamweaver8.0

实验一Dreamweaver8基本操作、站点管理

一、实验目的和要求：

1.掌握Dreamweaver8启动和退出的方法。

2.掌握本站点的设置方法。

3.掌握创建、打开和保存HTML文档的方法

二、实验内容：

1.网页编辑器的基本操作

(1)用不同的方法启动和退出Dreamweaver8。

(2)用快捷键打开和关闭【插入】面板和【属性】面板。

(3)将【代码】浮动面板组打开后，先移出，再移入浮动面板放置区，然后再将【设

计】浮动面板组中的【CSS样式】组合到【代码】浮动面板组中。察看浮动

面板组操作后的效果。

(4)用快捷键关闭和打开浮动面板组，用鼠标折叠和展开各个浮动面板组，察看浮

动面板组操作后的效果。

2.建立网站的基本操作

(1)打开站点管理器，在本地计算机的当前盘根文件夹中，建立名为myweb的文

件夹。

(2)把文件夹myweb设置为本地站点的根文件夹。然后建立名为image文件夹。

(3)在本地计算机的当前盘根文件夹中，建立名为oursite的子文件夹，并切换为

本地站点的根文件夹。

3.文件管理基本操作

(1)将chl2\material文件夹中的两个文件bg0004.gif和bg0093.gif及myrose中的

文件rose.htm,分别复制到本地站点“我们的站点”的oursite文件夹中。

(2)在文件夹中oursite中新建子文件夹image,并将oursite中的文件bg0004.gif

和bg0093.gif转移到image文件夹中。

(3)请正确显示rose.htm网页。

4.制作简单网页

按下述要求制作网页exel2-l.htm,如图12-2所示。

(1)页面的背景图片为ch12\material文件夹中的图片bgOO15.jpg。

(2)在合适的位置上插入chl2\material文件夹中的图片文件exl.jpg。

(3)在网页中输入文字：一件好的作品，如一阵清新的风，一曲温婉的歌，让人心

旷神怡。一件好的作品，如一杯香醇的茶，一瓶陈年的酒，让人回味无穷…

(4)将网页用exel2-l.htm为名保存在本地站点的文件夹oursite中。

图12-2简单网页exel2-l.htm

三、实验学时：3学时

实验二网页的定位技术以及制作层动画

一、实验目的和要求：

1.掌握表格创建和编辑的方法

2.掌握布局表格和布局单元格的使用方法

3.掌握层的创建、编辑和应用的方法

4,掌握框架网页的创建、编辑和保存的方法

二、实验内容：

1.表格的创建、插入、删除、复制和移动等操作

(1)创建一个名为exel4-l.htm的网页文件，将其保存到Mysite文件中。在页面上

输入4行5列的表格，表格宽度为500像素，表格的边框为1像素，在表格中输入如表14-1

所示的内容。并在表格上方增加标题“信息学院各班平均成绩”，标题格式设置为方正舒体、

5号、粗体、#003366o

表14-1各班平均成绩表

科目数据原理计算机组成实验英语精读电子商务

00级1班73857779

01级1班83798291

01级3班90808592

(2)在表格“01级3班”前插入一行。内容为“01级2班、85、82、88、82”。在表

格中“计算机组成实验”列插入一列。内容为“计算机组成、69、73、75、80"。

(3)将00级1班这一行移到表格的最后一行，删除“英语精读”这一列。

2.单元格的拆分、合并和格式化操作

(1)是表格中的数据全部居中；是整个表格在页面上居中。

(2)按不同年级将表格拆分成两个表格，将01级表格的“科目”一行复制到00级表

格上方，使之成为00级表格的第一行，在00级表格上面加上1行标题“信息学院00级平

均成绩表”，并删除00级表格的“科目”这一列。

(3)将01级表格的“计算机组成”和“计算机组成实验”两个单元格合并成一个单

元格，内容改为“计算机组成和实验”、居中、黑体、5号。

（4）01级和00级两个表格分别套用系统预设的格式Simple3、Simplelo

3.导入外部数据和表格排序

（1）将Excel文件value.xls打开，另存为Mysite\value.csv文件，数据的分隔符是

逗号。

（2）新建名为exel4-2.htm的网页文件，将其保存到Mlysite文件中。背景图片为

Mysite\jpg\bg0015.jpgo导入数据文件value.csv.

（3）按表格的“合计值”列降序排序，合并表格标题所在的单元格，并使标题居中。

（4）表格【边框】为3；【边框颜色】为#FF00000

4.布局表格和布局单元格的应用

（1）创建一个名为exel4-3.htm的网页文件，将其保存到Mysite文件夹。网页背景

图片文件为Mysite\gif\bgOO52.gif,用600*360像素的布局表格布局，布局表格中的3行5

列布局单元格每个为120*120像素，如图14-5所示。

图14-5页面布局表格示意

（2）如图14-5所示，在布局单元个中分别设置布局单元个的颜色#CCCC99、

#FF9900o

（3）如图•4-5所示，在布局单元格中分别插入Mysite\jpg文件夹中的名为

tul.jpg、....tu7.jpg的图片。

（4）预览页面后，保存该文件。

5.层的基本操作

(1)创建议个名为exel4-4.htm的网页文件，将其保存到Mysite文件中。设置背景

图片Mysite\gif\bg0052.gif。

(2)在网页合适的位置上，分别创建两个名为source和shadow的层，层的尺寸为

550*70像素，Z-index的值分别为2和1。

(3)在层中输入文字“书一人生的伴侣，知识的源泉”，两个层中的文字颜色分别

为红色和黑色，字体及大小自行定义。移动层，使两个层略微错开重叠，使文字带有阴影效

果，如图14-6所示。

图14-6两个层错开重叠

(4)打开【层】浮动面板，选中【防止重叠】复选框，然后移动名为source的层，

试比较改复选项与不选的区别。

(5)分别完成激活层、选中层、改变层的大小、改变层的可见性的操作。

(6)改变这两个层的叠放次序，使名为source的层成为shadow层的子层，观察改

变后的结果，然后恢复原样。

6.层与表格的综合练习

(1)创建名为exel4-5.htm的网页文件，将其保存到Mysite文件夹中。设置背景图

片为Mysite\jpg\bg0006.gif。在网页合适的位置上插入1行4列的表格。表格的各项参数为

【宽】为360像素、【高】为30像素、【背景颜色】为#FFFFEE、【边框颜色】为#99CCCC、

【边框】为2像素、【填充】为0、【间距】为0。

(2)每个单元格中的内容分别为“现代生活”、“生活艺术”、“文化教育”、“科学技

术”。

(3)在网页合适的位置上插上4个层，层的大小为90*90像素，在每个层中插入一

个4行1列的表格，表格的每个单元格的大小分别为90*22像素，【边框】为1像素、【背景

颜色】为#FFFFEE,如图14-7所示。

现代文学生活艺术文化教育科学技术1

纪实小说饮食旅满督学宗故工程建筑

外国文学室内装潢政治法律能源环境

儿童文学美容美发社会历史生物医药

诗隶散文花草鱼生心理卫生电脑技术

图14-7由层和表格组成的下拉菜单

(4)改变这4个层的叠放次序和改变层的可见性，观察结果后保存文件，(该文件在

实验15中还会有用)。

7.框架和框架集的创建、选者和保存

(1)创建一个名为exel4-6.htm的网页文件，将其保存到Mysite文件中。用鼠标、

菜单两种不同的方法创建【左侧和嵌套的顶部框架】和【顶部和嵌套的左侧框架】，试比较

两种框架的不同之处。

(2)删除上题中创建的框架，然后创建【顶部框架工并把【顶部框架】改为【顶部

和嵌套的左侧框架工调整框架的大小。

(3)分别用鼠标在框架面板中选中主框架(bottomFrame),选中左框架(leftFrame)

插入顶部框架，将左框架分割成上(topFrame)下(leftFrame)两部分。

(4)在主框架(mainFrame)中插入底部框架(bottomFrame),选中左框架(leftFrame)

插入顶部框架，将左框架分割成上(topFrame)下(leftFrame)两部分。

(5)将左框架(leftFrame)调整为与底部框架(bottomFrame)高度相同。

(6)分别在框架面板中选中topFrame、topFrame1、mainFrame>leftFrame,

bottomFrame5个框架，并给5个框架设置背景颜色#AAFFFF、#CCFFFF、#

CCFFCC、#CCFFCC、#CCFFFF。

(7)用topFrame、topFrameKmainFrame、bottomFrame、leftFrame为框架文件名

和exel4-6.htm为框架集名保存框架文件到Mysite文件中。

8.设置框架和框架集的属性和超链接

(1)设置exel4-6.htm框架文件的框架集属性。各项参数分别为：【边框】为是、【边

框颜色】为#00CCFF、【边框宽度】为2像素、左边【列】为200像素。

(2)分别设置【列】的单位，在【单位】下拉式菜单中分别选者【像素】、【百分比】、

【相对】命令，观察不同的结果。

(3)设置exel4-6.htm框架文件的框架属性。

.在名为topFramel的框架中，插入一个大小为120*160像素的层，层中插入4行

1列的表格，表格为120*160像素，边框宽度为1像素。

.在表格的4个单元格里分别插入Mysite\jpg文件中4个按钮图片文件al.jpg、

a2.jpg、a3.jpg、a4.jpgo

.在主框架(mainFrame)中，设置框架链接的页面文件为Mysite\doc文件中

的oa.htm,【滚动】的方式为自动，【边框宽度】为120像素，【边框高度】为30像素。

.在顶框架(topFrame)中，插入Mysite'swf文件中的Flash文件shu.swf.

.在左框架(leftFrame)和底部框架(bottomFrame)中输入如图14T3所示的

文字。

(4)在【属性】面板中分别为4个单元格里的按钮图片建立链接，被链接的网页文

件分别是Mysite\doc文件中的literature.htm、art.htm、edu.htm、sice,htm,被链接

的网页在主框架中显示。

(5)预览网页后，保存网页文件。

9.时间轴动画的制作

(1)创建网页文件exel5-6.ht,在4个层中插入Mysite\img文件夹中的图像文件

campl.jpg>camp2.jpg,camp3.jpg、camp4.jpg,并将这4个层叠放在一起，用时间轴控制层

的显示顺序，每过半秒钟显示一幅层中的图像。一个循环依次显示这4幅图像，循环5次后

停止，保存文件后，预览页面观察效果。

(2)创建网页文件exel5-7.ht,设置背景图像bg0052.gif。在网页合适的位置上插入

一个层，层中插入Mysite'img文件夹中的图像文件email.gif。创建时间轴动画，动画运动

轨迹为一条水平直线，并设置每秒播放20帧，自动循环播放，动画条长度为50帧，保存文

件后，预览页面观察效果。

(3)在上述时间轴动画条的第10、20、30、40、50帧处插入关键帧，然后用鼠标拖

拽该层，改变在关键帧处的动画轨迹，使动画轨迹由原来直线轨迹改为波浪线轨迹，预览页

面效果后用exel5-8,htm为名保存文件。

(4)在上述时间轴动画条的第10到20帧和第30到40帧隐藏层。在第5层帧处插入

关键帧，并为该帧添加行为，在响应事件onFrame5(即动画运行到第5帧时)时触发播放

声音动作，播放wav声音Appluase.wav,预览页面观察效果后用exel5-9.htm为名保存文件。

(5)打开网页文件exel5-8.htm,在网页的合适位置上插入一个层，层中插入鼠标经过

图像，原始图像和翻转图像分别为Mysite\img文件夹中的Play.jpg和Stop.jpgo网页具有

下列功能：

①当用鼠标双击Play按钮时，此按钮翻转成Stop按钮，此时时间轴动画开始沿轨迹

■动JO

②当用鼠标双击Stop按钮时，Stop按钮翻转成Play按钮，时间轴动画停止运动。

③预览后用exel5-10.htm为名保存文件

(6)打开网页文件exel5-10.htm,在网页的右边和合适位置上插入一个层，层中插入

图像文件bird.gif。在网页上再增加一条时间轴动画条，控制新插入图像的运动轨迹，如图

15-12所示，预览后，用exel5-ll.htm为名保存文件。

三、实验学时：6学时

实验三网页编辑与超链接

一、实验目的和要求：

1.掌握网页文档常用的格式化方法

2.掌握在网页中插入各种对象的方法

3.掌握超链接的创建方法

二、实验内容：

1.网页文档的基本操作

(1)将Mysite\doc文件中的两个word文件(oa.doc和book.doc)转换成WordHtml

文件，分别以文件名exel3-l.htm和exel3-2.htm为名，保存在Mysite中。

(2)在Dreamweaver中，导入Mysite\exel3-l.htm文件。并将Mysite\doc中

book.doc文件的第2、3段文字插入到当前文档的最后面，并使插入的文字与原文档

之间有空行。

(3)给页面文档添加标题“办公自动化”，并将网页标题改为“办公自动化一说”。

将网页中第2段文字删除，然后恢复。

(4)在网页第2段文字前插入一段文字：“办公自动化的目标是提高办公的效率和

办公的质量，由于如今技术和经济的发展，办公自动化早已超越了狭窄的办公室，人

们把包括了办公与管理范畴的工作统称为办公自动化。”

(5)将第1自然段折成两段，使“目前，以计算机为主要办公工具，........促

进现代办公自动化(OfficeAutomation)活动的迅速发展。”的文字成为第2自然段。

(6)给第2、3段加项目符号。并将文档中的文字“办公自动化”替代为“OA”。

(7)按功能键F12预览网页后，将文档中的文字“0A”恢复成“办公自动化”。

(8)预览该网页，以exel3-3.htm为名将其保存到Mysite中。

2.图片的编辑操作

(1)创建一个如图13-3所示的名为exel3-5.htm的网页，设置其页面背景为

bg0027.jpg,网页标题为“图形编辑实验”，将其保存到Mysite中。

⑥图形编辑实验-傲流[laxthon]

文件9编辑⑥查看9收藏®快健蛆⑥）选项。工具9窗口世）帮助理）①•B!圆▼口

军一雅神的报

食

V

但完毕@0»。|»*©192.1680.2000年节151M1

图13-3exel3-5.htm网页

在页面合适的位置插入一个两行两列的表格,表格中每个单元格为150*150像素。

在四个单元格中分别插入Mysite'jpg文件夹中图片文件tl.jpg、t2.jpg,t3.jpg、t4.jpg。

给每张图片设置2个像素的边框，分别给其中2张图片设置替代文字”书一精

神的粮食”、“书——力量的源泉”，设置的代替文字是指在浏览时，但鼠标指向图片

时显示的文字。

插入页面文字”书一精神的粮食”。

启动外部图片编辑器Fireworks,给4张图片加上文字“书籍”、“知识”、“力量”、

“智慧”。

（2）创建一个名为exel3-6.htm的网页，如图13-4所示。设置页面背景图片尾

bg0026.jpg,并添加页面文字“书——知识的源泉”。

鼠标经过图像实验-傲游[Maxthon]口同区

文件9编辑②查看W)收藏⑥快捷蛆⑹选项©)工具(X)窗口国)帮助国)：1国▼BJ0▼国

鼠标经过图像...

布知例的源泉

图13-4exel3-6.htm网页

在页面合适的位置插入1行4列的表格，每个单元格为79*79像素。在四个单元

格中制作【鼠标经过图像】，初始图片为tll.jpg、t22.jpg、t33.jpg、t44.jpg,翻转图

片分别为t5.jpg、t6.jpg>t7.jpg、t8.jpgo单击翻转图片时链接的页面文件分别是Mysite

\html'中的edu.htm>art.htm>literatuer.htm,scie.htm»

预览后，保存该文件为Mysite\exel3-6.htm.

(3)创建名为exel3-7.htm的网页文件，如图13-5所示。用Mysite\photo文件夹

中的tl.jpg-t8.jpg图片创建网上图片相册。

网页和相册标题为“书一知识的源泉”，背景图片为bg0026.jpg。初始图片文件

夹为Mysite文件夹下photo子文件夹，目标图片文件夹为本地根文件夹Mysite。

页面图片的缩略图尺寸为100*100像素；每行列数为4歹U,缩略图片文件格式为.jpgo

3.创建超链接

(1)打开Mysite\exel3-l.htm网页，在该网页文档的底部创建E-mail链接，电

子邮件的链接的文本为“请与我们联系"；E-mail地址为练习者正式注册的电子邮件

地址。预览后，保存文件为Mysite\exel3-8.htm。

(2)打开Mysite\html\literature.htm网页文件，在该网页文件的首尾两处“中国

文学”之中，分别插入名为W1和W2的锚点。用选中文档第1行中的文字“古老民

族”，作锚点W2的源端点，建立内部锚点链接，保存该文件为Mysite\exel3-9.htm；

打开Mysite\exel3-3.htm网页文档，用标题“办公自动化”作锚点W1的链接源端点，

建立外部锚点链接。预览后，保存该文件为Mysite\exel3-10.htm。

(3)打开Mysite\exel3-l.htm网页，在该网页文档合适的位置添加一个跳转菜单，

跳转菜单的第1项标识文字为“友情链接”。跳转菜单的选项和链接网页URL,分为：

上海热线：http:〃

搜狐http:〃

网易http:〃

中文雅虎http:〃

预览后，保存该文件为Mysite\exel3-ll.htmo

(4)打开Mysite\exel3-l.htm网页，在该网页文档合适的位置添加一个导航条，

导航条上四个按钮分别是“现代文学”、“生活艺术”、“文化教育”、“科学技术”，四

个按钮对应的图片文件分别是Mysite\button中的文件al.gif----a4.gif>

bl.gif----b4.gif>cl.gif----c4.gif>dl.gif-----d4.gif,四个按钮所链接的网页分别为Mysite\

html\literature.htm>art.htm、edu.htm>scie.htmo预览后，保存该文件为Mysite\

exel3-12.htm.

(5)创建名为exel3-13.htm的网页文件，在网页中合适的位置上插入Mysite

\jpg\netl.jpg图片文件。用多边形、圆形和矩形创建影射图链接，其中多边形、圆形和

矩形影射图链接分别自选Mysit\html中的网页文件，预览后保存该文件。

三、实验学时：3学时

实验四层叠样式、模板和库

一、实验目的和要求：

1.掌握附加和编辑外部样式表的方法

2,掌握CSS样式的各种特殊效果的方法

3.掌握创建和应用CSS样式及CSS样式表的方法

4.掌握模板的创建、编辑和应用的方法

5.掌握对象的创建、编辑和应用的方法

二、实验内容：

1.CSS样式表的创建、编辑和应用

(1)在网页编辑窗口中，打开本地站点Mysite\html文件夹中的art.htm文件。修改文档

的标题为“生活和艺术”，文档每段文符改成首行缩进两个字样。

(2)在本地根文件夹Mysite中，创建名为docformat.css的层叠样式表文件，以及背景色

为#99FFCC的层叠样式docformato

(3)创建名为.charl的层叠样式，并将这个样式定义在docformat.css的层叠样式表文件

中。将其【类型】的参数设置：【字体】为方正舒体、【大小】为36像素、【样式】

为斜体、【颜色】#方法FF0000。样式作用于标题文字“生活和艺术”。

(4)将名为.charl的样式复制成名为.char2的层叠样式，并将其【类型】的参数设置：

【字体】为楷体、【大小】为18像素、【样式】为正常、【颜色】为#000000。

样式作用第1段文字。

(5)新建名为,char3的层叠样式，并将其【类型】的参数设置：【字体】为仿宋体、【大

小】为18像素、【样式】为正常、【颜色】为井333333。样式作用于第2段文字，

浏览网页观察效果。

(6)将名为.char3的样式修改：【字体】为方正舒体、【大小】为16像素、【样式】为

偏斜体、【颜色】为#000099。

(7)创建名为borderl的样式，选择【边框】类型，并将其参数设置：【样式】为双线、

【宽度】的【上】、【右】、【下】、【左】的值为4个像素、【颜色】为#99CC33。

(8)在新建网页exel6-l.htm上的创建8个1行1列的表格，表格的宽度和高度是100*

30像素。分别用borderl、border2.............border8为名新建层叠样式，选择【边框】

类型，并分别定义他们的【样式】为：【虚线】、【点划线】、【实线】、【双线】、【槽状】、

【脊状】、【凹陷】、【凸出】8种风格，并设置合适的边框高度和颜色，作用于8个

表格，预览网页观察其效果。然后保存样式表文件docformat.css和网页文档

exel6-l.htm。

(9)在网页编辑器窗口中，打开literature.htm文件,并链接外部样式表文件docformat.csso

(10)修改名为.charl的样式，将【颜色】值#FF0000该为#0000CC,并作用约标题文

字“中国文学二浏览网页文档art.htm和literature.htm,观察标题文字的颜色变化。

2.CSS样式特殊效果的应用

(1)创建名exel6-2.htm的网页，在网页合时的位置上插入380*285像素的层，并

将Mysite\img文件夹中的图像文件campus3.jpg插入层中，用CSS的Alpha滤镜制作如

图16-5所示的效果。

图16-5Alpha滤镜效果

(2)创建名为exel6-3.htm的网页，在网页的合适位置上插入2行2列4个布局单元格，每

个单元格为120*100像素,并在每个单元格中插入Mysite\img文件夹中的图像文件fOLjpg,

如图16-6所示。然后用CSS的翻转滤镜制作出如图16-7所示的效果。

苧CSS1H转滤镜实验-Bic...均回区

图16・64幅相同的图像

图16-7CSS翻转滤镜效果

(3)创建名为exel6-4.htm的网页，在网页合适位置上插入1行3列3个布局单元格，每个

单元格为120*220像素，并在每个单元格中插入Mysite\img文件夹中的图像文件

campus4.jpgo然后用CSS的波浪滤镜制作出如图16-8所示的效果。

左边图参数为Wave(Add=LFreq=2,Lightsrenth=70,Phase=50,Strength=10);

右边图参数为Wave(Add=0,Freq=3,Lightsrenth=10,Phase=75,Strength=10);

中间图为原始图。预览后，用exel6-4.htm为名将网页保存在本地站点根文件夹中。

图16・8CSS波浪滤镜效果

(4)创建一个名为exel6-5.htm的网页，然后用CSS样式的翻转滤镜制作出如图16-9所示

的效果。预览网页后，用exel6-5.htm为名将网页保存在本地站点根文件夹中。

图16・9CSS翻转滤镜效果

(5)利用显示滤镜(RevealTrans)设置进入网页art.htm的切换效果为随机效果，其参

数为Revealtrans(Transition=23,duration=3.0),选择标题文字与地1行文字，建立与

literature.htm和exel6-6.htm的超链接。

设置离开网页文件literture.htm的效果代号是8号的垂直百叶窗，其参数为

Revealtrans(Transition=8,duration=2.0),选择标题文字与第1行文字，建立与art.htm和

exel6-6.htm的超链接，用原文件名保存这两个文件。

创建新的网页文件exel6-6.htm,在其中分别输入“艺术”和“中国文学”，并建立art.htm

与literature.htm文件的超链接，再将网页保存在本地站点根文件夹中。

预览网页，观察切换效果。

(6)利用模糊滤镜(Blur)设置网页edu.htm的标题为立体效果，作用在标题上的模糊滤

镜效果参数为Blur(Add=True,Direction=135,Strength=20)□预览网页后，用exel6-7.htm

名将网页保存在本地站点根文件夹中。

3.模板的应用

(1)将Mysite文件中flower.htm文档改变成模板，将其中7幅图像所处的区域设置为可

编辑区，可编辑区的名字为imgl.img2...............img7,如图16-10所示,模板文件名为

flower.htm,将模板文件保存在本地网站的Template文件中。

图16-10模板创建示意

(2)利用模板文件flower.dwt,创建网页文档exel6-8.htm。其中可编辑区域插入的图像

分别是Mysite\img文件夹中tul.img,tu2.img.........tu6.img>tu7.img,预览网页后，用

exel6-8.htm保存文件。

(3)将模板文件flower.dwt改名为grid.dwt,保存后更新站点中所有基于该模板的网页

文件。

(4)修改模板文件grid.dwt,将其背景图象改为bg0021.gif,保存修改后的模板文件。用

这个模板文件更新站点中所有基于该模板的网页文档，观察网页文件flower.htm和

exel6-8.htm背景图像格变化情况。

(5)利用【资源】面板创建一个名为test.dwt的模板，模板的可编辑区有文字区和图像

区，版面构图自定。在模板的底部插入一个