网页设计与制作实验指导书范本

网页设计与制作实

验指导书

文档仅供参考

网页设计与制作

实验指导书

黄石理工学院计算机学院

二OO八年八月二十月

文档仅供参考

实验一HTML的基本标志的使用4学时

实验二HTML表格、表单与框架标志使用6学时

实验三CSS层叠样式表的使用4学时

实验四网页图像处理与动画制作6学时

实验五使用Dreamweaver编辑网站4学时

实验六网站设计与制作6学时

文档仅供参考

实验一HTML的基本标志的使用

［实验目的】

1、使学生掌握HTML的基本标志的使用方法

2、掌握Dreamweaver的基本使用方法，并利用Dreamweaver工具

制作一个比较完整的网页。

【实验器材】安装有Windows98//xp；DreamweaverMX,Flash

MX,FireworksMX；IE浏览器，NetScape浏览器，IIS5.0等软件

的计算机。

【实验内容】

>基本HTML标记符的使用；

>Dreamweaver的使用；

>本地站点的创立；

>网页页面属性设置；

（实验步骤】

一、使用Windows操作系统自带的记事本程序编写一个网页。

要求窗体标题为“这是我的第一个网页“，使用

HTML文档由head和body两部分组成，

使用<head>***</head〉和vbody>***</body>。用浏览器阅读时要

看见4段文字，每段文字的size分别是8、6、4、2,使用〈font

size="6">***</font>,其中要求每段文字的颜色不同，分别为

#OOffff、#882299、#ffOO88、#55ccaa,使用<fonl

文档仅供参考

color="#OOffff>*******v/font>,每段文字要求居中排列，使用<p

,

align='center->******</p>o编写完成后用HTML为文件扩展名存

盘。

使用浏览器浏览编写的HTML文档。

二、在Dreamweaver中建立本地站点

1、在Dreamweaver文档窗口中，依次单击“站点”菜单f“新建

站点”命令或者是在“站点”面板中单击“站点”菜单一“新建

站点”命令，打开“站点定义”对话框。如图所示。选择“高

级”选项卡建立站点（也能够按“基本”选项卡中的向导进行操

作，但不如用“高级”选项卡方便）。

“站点定义”对话框

2、管理本地站点

选择“站点”面板“文件”菜单中对应命令，即可对选取文

件进行编辑操作。例如，选择文件后，在“站点”面板中选择

文档仅供参考

“文件”菜单中的“打开”命令，则Dreamweaver在文档窗口中

打开该文件(当然最简单的方法是在站点中双击相应的文件图

标)。在对站点中的文件或文件夹进行操作时丁合理地使用右键快

捷菜单能大大加快操作速度。例如，在选中的文件夹上单击鼠标

右键，然后选择“新建文件夹”命令，能够在相应文件夹中新建

一个文件夹。

3、编辑站点具体操作步骤如下：

在站点面板中单击“站点名称”框右边的下拉列表按钮，在

下拉列表中选择“编辑站点”命令，打开“编辑站点”对话框，

如图所示。

“编辑站点”对话框

三、使用超级链接实现站内网页的跳转。

使用Dreamweaver建立一个Web站点，在站点内部新建5个

HTML页面，分别为首页(index.html)＞汽车(auto.html)房产

(house.html)、运动(sport.html)、游戏(game.html)。

文档仅供参考

要求在每个页面里分别添加对其它四个页面的链接，保证用户能

够在五个页面中正常的跳转。

切换到代码视图认真观察超链接标记的使用方法，在浏览器中测

试链接的有效性。

四、图像映射超链接

选中网页中插入的图片，打开属性控制面板，其面板的左下

角区域即用于设置图片映像的区域。如图所示。

IMap

VSpaceTargetBorder

HSpaceLowSrc@口AlignDefault

属性控制面板热区设置工具

选中图中绘制工具：口矩形热区绘制工具。圆形热区绘制

工具2多边形热区绘制工具，其中一种，就能够在图片上绘制热

区了。当绘制完热区后，属性控制面板中显示出热区的属性，在

link栏内输入网址或网页文件名，或点击link栏右侧的文件夹按

钮，在打开的对话框中选择一个网页文件作为链接地址。

五、利用Dreamweaver为修改网页的页面属性

打开Dreamweaver,新建一个网页。打开页面属性面板，修改

网页的字体、文本颜色、和背景颜色，修改超级链接的颜色和样

式，添加网页标题，设置网页跟踪图像。

预览修改后的页面。

文档仅供参考

【问题讨论】

I、如果超链接的对象不是某个文件，而是同一个文件中的某个段

落区域，该如何编写HTML代码。

2、如何给网页添加水印效果。

3、如何给网站添加虚拟目录。

文档仅供参考

实验二HTML表格、表单与框架标志使用

［实验目的】使学生掌握表格插入、修改、删除及应用，表单

的制作和框架的建立及实际应用。

【实验器材】安装有Windows98//xp；DreamweaverMX,Flash

MX,FireworksMX；IE浏览器，NetScape浏览器，IIS5.0等软件

的计算机。

［实验内容】

＞利用表格布局网页

＞利用表单制作注册页面

＞建立1个框架网页；

＞层的使用

［实验步骤】

一、利用表格布局网页

用Dreamweaver创立一个HTML文件，在设计视图中用表格

来进行一个“三字型”页面布局，要求表格的宽度设置为

800px,高度为600pxo表格内三个单元格的高度依次为lOOpx.

400px＞lOOpx,三个表格的背景使用不同的颜色（必须注意颜色

的搭配）。表格的对齐方式均为水平垂直居中，表格的边框大小

设置为1,颜色设置为黑色。在表格里面输入适当的文本内容，

并对文本内容进行修饰。

切换到代码视图认真观察文本标记和表格标记的使用方法，使

文档仅供参考

用浏览器浏览设计的HTML文档结果。

用户名

密码

性别

出生年月

特长

自我简介

二、制作一个用户注册页面

图2—1新用户注册页面

使用Dreamweaver制作一个用户注册页面，要求使用表格布

局，页面中必须包含〈input,、〈select〉、＜textarea＞等标记c页面

制作效果如图1—1所示。

切换到代码视图认真观察表单标记的使用方法，使用浏览器

浏览设计的HTML文档结果。

三、创立一个框架网页

创立框架结构•股有两种方法：•是使用“新建文档”对话

框中的“框架集”选项新建一个框架结构的页面文档；二是利用

“插入栏”中的“框架”选项中提供了框架结构创立。

文档仅供参考

使用“新建文档”命令创立框架结构操作方法如下：

①单击“文件”菜单，选择“新建”命令，弹出“新建文

件”对话框。

②在“新建文件”对话框中，选择“框架集”类别，

四、层的运用

制作下拉选单

(1)现在开始制作下拉出现的菜单，同样用层来制作。再次

从Objects面板的布局栏中插入一个层到前面我们做好的导航条的

PZ7屋w号左3砺一嵬g际--ffxsa<x)|ibsopE3®

I国卜二I上(p[i^~・上[5^^刎<0加1””・"3wiwaip£j_________

tew|3ra：si玄

下方，各项参数填为：“层编号”框填入menul,左、上、宽、

高框分别填入8、34、120、80,其中L和T两个参数是设置这个

层距离窗口左边框和上边框的距离，一定不能填错，不然菜单将

会错位，也将影响完成后的可用性。层属性设置如图2-2所示。

图2-2设置后层memul的“属性检查器”

这时候，我们便能够在menul这个层中输入我们所要的菜单内

:Drewr*eaver;

Fir^orks

五!

FlashAction；

容。为了排版方便，我在这还是使用表格来做菜单。这个层将作

文档仅供参考

为“经典论坛”的下拉选单出现，填入你所需要的菜单链接。最

终效果如图2-3所示。

图2-3层memu1的设计效果

（2）同样的方法，再为“天极网”也做一个下拉选单（层

menu2）。其层的属性设置和最终效果如图2-4和图2-5所示。

图2-4设置后层memu2的“属性检查器”

E1

!♦经典论坛♦天极网

；新闻：

Dreamweaver・・・・•・•就浑

Fireworks

..…Flash…F藏•••？

FlashAction

图2-5层memu2的设计效果

（3）按F2打开LAYER（层）面板，其中列出了网页中的三

个层，点menul和menu2的前面一格，出现闭着的眼睛图标，这

文档仅供参考

两个层便隐藏起来了。操作这一步是因为下拉菜单的初始状态是

不可见的。如图2-6所示。

图2-6“层”面板

下面为下拉菜单添加显示和隐藏效果

本步骤分为两部分：第一，对导航条中的主菜单添加控制显

示隐藏的命令；第二，给下拉选单本身添加显示隐藏的命

令。

（4）选择第一个单元格中的文字部分，再按Shift+F4或选择

“窗口”。“行为”命令打开行为面析，点国按钮，在下拉选项

用二;J.

E&以|蒜・打刑50・0

・皿・

«二）.%＞初住二J

打开口

列出值・

2W86A17OUI

Ml

打假・TEW

皿

2至M

中选中“显示•隐藏层”（如图2-7所示）。如果选项中没有这一

项或这一项不可用，则选择“显示事件”下的IE5.0（如图2-8所

示）后，图2-7“显示-隐藏层”菜单图2-8”显

示事件”菜单

重新点击按钮，此时“显示-隐藏层”将出现或变为可用。

文档仅供参考

（5）这时将会弹出“显示-隐藏层”对话框。在“命名的层”

框中会列出当前网页所有的层，选中“层,因为我们

想要menul这个层对“经典论坛”响应。然后点下面的“显示”

按钮，选中“层"menu2"”，然后点击下面的“隐藏”按钮，然

后单击“确定”即可c如图2-9所示。

图2-9“显示-隐藏层”对话框

（6）这时会回到行为面板中，面板中出现如图2-47所示字

样，点击文字“onClick”，会出现一个向下的小箭头，点击它,

在下拉选项中选中onMouseOver如图2-10所示。这一步的作用是

实现当鼠标移至第一个单元格时，下拉选单menul的状态变为显

示(Show)。

吊''-MI

MkSlW

<a31iaiik

7・1,

wKeyFr.,,

皿7f•，

MflrsiUm.

图2-10“行为”面板图2-11下拉选项中的

行为动作

（7）用同样的方法设置下拉选单menu2在鼠标移至第二个单

文档仅供参考

元格的文字上时变为显示状态。只是选中“层"menu2"”，然后

点下面的“显示”按钮，选中“层"menul"”，然后点击下面的

“隐藏”按钮，如图2-12所示。回到行为面板中，点击onClick

向下的小箭头，在下拉选项中选中onMouseOut。

图2-12“显示-隐藏层”对话框

(8)选中层menul,用与导航条部分同样的方法在行为面板

中为它添加显示与隐藏自己的命令。这样做的效果是当鼠标移出

层menul时,层menul就自动隐藏。最后层menul的

onMouseOut行为的设置如图2-13所示，onMouseOver行为的设置

如图2・14所示。

图2-13层memu1的onMouseOut行为设置

图2-14层memul的onMouseOver行为设置

(9)用同样的方法为层memu2添加显示与隐藏自己的命

令。到此为止，这个下拉菜单已经制作完成，保存后我们按F12

文档仅供参考

键测试。

文档仅供参考

实验三CSS层叠样式表的使用

［实验目的】熟悉CSS样式表的创立和应用。

【实验器材】安装有Windows98//xp；DreamweaverMX,Flash

MX,FireworksMX；IE浏览器,NetScape浏览器，XS5.0等软件

的计算机。

【实验内容】

＞自定义CSS样式表。要求：定义一种网页中常见的正文样

式，效果为“字体为楷体，文字大小为20PX,文字颜色为蓝

色”，并应用于文档，预览页面效果；

＞重新定义HTML标签样式。要求：重新定义BODY的标签样

式属性，效果为“华文行楷，大小为20PX,文字颜色为白

色，悲景为深蓝色”，并应用于文档，预览页面效果；

＞CSS选择器样式的定义。要求：经过CSS选择器样式的设

置，实现基于文字超链接的动态效果，链接正常显示

（a:link）效果为“字体为楷体，文字大小为18PX,文字颜色

为黑色”；鼠标停留在链接文字上的样式（a:hover）效果为

“字体为隶书，文字大小为18PX,文字颜色为红色”，并预

览页面效果；

【实验步骤】

1、自定义CSS样式表。要求：定义一种网页中常见的正文样

式，效果为“字体为楷体，文字大小为20PX,文字颜色为

蓝色”，并应用于文档，预览页面效果。

文档仅供参考

实验步骤：

（1）打开一个包含段落文本的文档，打.开“CSS样式”面

版，然后单击“新建CSS样式”按钮，在弹出的对话

框中输入样式名称，在“类型”中选择“创立自定义

样式”，选择“仅对该文档”，完成后单击“确

定”；

（2）在打开的对话框中设置“字体为楷体，文字大小为

20PX,文字颜色为蓝色”，单击“确定”；

（3）在文档窗口中选取要应用样式的文本，在“CSS样

式”面版中选择“应用样式”单选按钮，最后在

“CSS样式”列表中单击要应用在样式，并按F12键

预览页面效果。

2、重新定义HTML标签样式。要求：重新定义BODY的标签

样式属性，效果为“华文行楷，大小为20PX,文字颜色为

白色，背景为深蓝色”，并应用于文档，预览页面效果。

实验步骤：

（1）打开一个包含段落文本的文档，打开“CSS样式”面

版，然后单击“新建CSS样式”按钮，在“类型”中

选择“重定义HTML标签”，在“标签”下拉列表

中选择BODY,选择“仅对该文档”，完成后单击

“确定”；

（2）在打开的对话框中设置“字体为华文行楷，文字大小

文档仅供参考

为20PX,文字颜色为白菜色”，在“分类”列表框

中选择“背景”选取项，在“背景颜色”文本框中输

入“#333366”，单击“确定”；

（3）在文档窗口中选取要应用样式的文本，在“CSS样

式”面版中选择“应用样式”单选按钮，最后在

“CSS样式”列表中单击要应用在样式，并按F12键

预览页面效果。

3、CSS选择器样式的定义。要求：经过CSS选择器样式的设

置，实现基于文字超链接的动态效果，链接正常显示

（a:link）效果为“字体为楷体，文字大小为18PX,文字颜

色为黑色”；鼠标停留在链接文字上的样式（a:hover）效

果为“字体为隶书，文字大小为18PX,文字颜色为红

色”，并预览页面效果。

实验步骤：

（1）打开一个包含段落文本的文档，打开“CSS样式”面

版，然后单击“新建CSS样式”按钮，在“类型”中

选择“使用CSS选择器”，在“选择器”下拉列表中

选择“a:link”，选择“仅对该文档”，完成后单击

“确定”；

（2）在打开的对话框中设置“字体为楷体，文字大小为

18PX,在“修饰”选项区中选择“无”，文字颜色

文本框中输入“#000000””,单击“确定”；

文档仅供参考

（3）再次单击“新建CSS样式”按钮，在“类型”中选择

“使用CSS选择器”，在“选择器”下拉列表中选择

“a:hover”，选择“仅对该文档”,完成后单击“确

定”；

（4）在打开的对话框中设置“字体为隶书，文字大小为

18PX,在“修饰”选项区中选择“下划线”，文字

颜色文本框中输入“#0000FF"”，单击“确定”；

（5）保存文件后，按F12键预览页面效果。

文档仅供参考

实验四网页图像处理与动画制作

［实验目的】

1.使学生熟练掌握Fireworks图像文档的设置、文档的导入和输

出；绘图工具和图像处理工具的使用；掌握图像优化及按指定格

式（GIF、JPEG）的导出、掌握按钮、导航条的创立；掌握切片

和热点的使用；掌握弹出菜单的制作；掌握图层操作，文字处

理，蒙版的创立与编辑，GIF动画的制作。

2.使学生熟练掌握FLASHMX的基本操作，逐帧动画的创立过

程，补间动画和形状补间的创立，交互动画的创立。

【实验器材】安装有Windows98//xp；DreamweaverMX,Flash

MX,FireworksMX；IE浏览器，NetScape浏览器，IIS5.0等软件

的计算机。

【实验内容】

＞FireworksMX的基本应用；

＞利用Fireworks制作GIF动画；

＞利用Flash制作网页动画；

［实验步骤】

一、FireworksMX的基本应用

1.导入和导出文档

（1）导入文档。在编辑文档时,能够调入其它相应格式的文

档。单击“文件”一“导入”菜单命令，可弹出“导入”对话框。利用

文档仅供参考

该对话框，能够导入BMP、WMF、TIFF、JPEG和GIF等格式的

图像文件，以及HTML、ASCII和RTF文本等格式的文件。

（2）导出文档。单击”文件”一”导出”菜单命令或单击主要工

具栏中的“导出”按钮，弹出“导出”对话框。利用该对话框，能够

选择文件夹、要保存的文件类型（能够保存为JPEG、GIF和

HTML等格式文件）和输入文件名，单击“保存”按钮即可。

2.优化文档

在导出文档前要对文档进行优化处理，能够单击“窗口”一“优

化''菜单命令，打开“优化”面板，然后利用该面板设置文档格式、

调色板类型和设置类型等参数。

单击“文件”一“导出预览”菜单命令，弹出“导出预览”对话

框。利用该对话框能够对文档进行优化设置。

3.几何图形和填充属性

工具箱中的几何绘图工具（绘制矩形、圆角矩形、椭圆和多

边形）的使用方法基本一样。单击工具箱中的几何绘图工具按

钮，在其属性栏中设置相应的属性，然后用鼠标在画布中拖曳，

即可绘制出相应的几何图形。几何绘图工具的属性栏的特点如

下。

1）.矩形

“矩形”工具和“圆角矩形”工具的属性栏与图6-1基本相同。圆

角矩形工具的“属性”栏增加了一个“矩形圆度”文本框，减少了“效

果”栏。它们的属性栏中的第2栏用来设置选中对象的填充属性。

文档仅供参考

（1）“矩形圆度”文本框：用来设置圆角矩形四角的角度值。

（2）“填充类别”下拉列表框：用来选择各种填充方式，例如

实心填充、图案填充、线性填充、放射状填充、椭圆形填充和无

填充等。如果选择“填充选项”选项，会弹出“填充选项”面板，如

图6-2所示，利用它能够设置填充属性。

（灯填第鼬在“填充类为Pf期像帽单选择“实心”

选项后，单击它可弹出“颜色”面板，它没有下边的列表框和复选

框。利用该面板能够设置对象的填充属性。如果“填充类别”下拉

列表框选择的是其它选项，则会弹出相应的面板，利用这些面板

能够调整填充属性。

在给对象进行非单色的填充后，一般还能够进行填充效果的

调整，只要用鼠标拖曳填充物中出现的控制柄，即可进行填充的

中心点和填充方向调整，如图6-3中的第一个图形。

多边形”工具、“椭圆”工具和其它形状工具的属性栏与图6-1

所示基本相同，t

AQ必生ll伯囱筋加I

4.增加切点

单击“滤镜”一“切点”一“新增切点”菜单命令，弹出“新增切点”

对话框。在该对话框内的“数量”文本框中输入一个数值，或者单

文档仅供参考

击按钮，调出一个滑杆，用拖曳的方法设置切点的数量。然后，

单击“确定”按钮，即可给图像添加切点。

5.图像的负片效果

单击“滤镜J"调整颜色"一反转”菜单命令，即可将图像反

相，获得图像的负片效果（像照片的底版），即对图像中的像素

颜色值取其相反的值c

6.模糊图像

FireworksMX系统对图像的模糊处理是使用“滤镜”一"模糊”

一“XXXX”菜单命令实现的。模糊图像有6种：”放射状模

糊”、"高斯模糊”、“进一步模糊”、"缩放模糊”、“运动模糊”和“模

糊”。例如，单击“高斯模糊”菜单命令，可弹出“高斯模糊”对话

框。调整该对话框中的“模糊范围”数值的大小，单击“确定”按

钮，即可使图像模糊c

7.锐化图像

FireworksMX系统对图像的锐化处理是使用“滤镜”一“锐化”

一“XXXX”菜单命令实现的，系统会自动将所选对象进行锐化

滤镜处理。FireworksMX系统对图像的锐化处理有“钝化蒙版，

“进一步锐化''和“锐化”3种方式。如果要设置图像的锐化程度，可

单击“锐化蒙版”菜单命令，弹出“钝化蒙版”对话框，利用该对话

框即可使图像锐化。

在“钝化蒙版”对话框中，“锐化量”用来设置锐化效果的强

度；“像素半径”用来设置锐化过程中像素的半径值，半径值越

文档仅供参考

大，锐化程度越强，半径值越小，锐化程度越弱；“阈值”用来设

置对什么对比度以上的像素进行锐化，如果设置为0,表示所有

的像素都被锐化。

经过“锐化”滤镜能够处理那些不太清晰的图像，这样能够增

大图像区域中像素边缘两侧之间的对比度，从而达到增强图像色

彩及局部细节的效果C

8.“转化为Alpha”滤镜效果

“Alpha”通道是一种特殊的通道，它能够将图像中选中的区域

转换成8位灰度图像并存放。利用FireworksMX的“转化为

Alpha”滤镜能够使图像透明。单击“滤镜”“其它”一“转换为

Alpha”菜单命令，系统会自动地将所选对象进行滤镜处理。如果

再绘制一个图形，放在经过该滤镜处理过的图像的后面，会看到

经过滤镜处理的图像具有透明的效果。

9.查找图像的边界

单击“滤镜”一“其它”一“查找边缘”菜单命令，能够取出一些

颜色反差比较大的图像边界。

另外，FireworksMX系统也能够