2025年网页设计与制作实验指导手册

网页制作试验汇报格式

试验「站点设置

一、试验目的及规定

本实例是通过1•站点定义为”对话框中的“高级”选项R创立一种新站点。

二、仪器用品

1、生均一台多媒体电脑，批建内部局域网，并且接入国际互联网。

2、安装windowsxp操作系统;建立iis服务器环境，支持asp,

3、安装网页三剑客(dreamweavermx;flashmx;fireworksmx)等网页设计软件；

三、试验原理

通过“站点定义为”对话框中的“高级”选项卡创立一种新站点。

四、试验措施与环节

1)执行“站点'管理站点"命令，在弹出的“管理站点”对话框中单击'新建"按钮，在弹出的快捷菜单

中选择"站点"命令。

2)在弹出的“站点定义为”对话框中单击傣级"选项卜。

3)在“站点名称”文本框中输入站点名称，在■默认文献夹”文本框中选择所创立的站点文献夹。在

“默认图象文献夹”文本框中选择寄存图象的文献夹，完毕后单击“确定”按钮，返回“管理站点”对话框。

4)在“管理站点”对话框中单方“完毕”按钮，站点创立完毕。

五、试验成果

六、讨论与结论

试验开始之前要先建立一种根文献夹，在试验的过程中把站点存在自己建的文献夹里，这样才

能使试验条理化，不至于在试验后找不到自己的站点。在试验过程中会出现某些选项，计算机一般会

布•默认的选择，最终不要去更改，暇如要更改要先充足理解清晰该选项的含义，以及它会导致的效果，

否则会使试验的成果失真。试验前先熟悉好操作软件是做好该试验的关键。

试验二：页面图像设更

一、试验目的及规定：

本实例的目的是设置页面的背景图像，并创立鼠标通过图像。

二、仪器用品

1、生均一台多媒体电脑，组建内部局域网，并且接入国际互联网。

2,安装windowsxp操作系统健立iis服务器环境，支持asp,

3、安装网页三剑客(dreamweavermx;flashmx;fireworksmx)等网页设计软件；

4、安装acdsee、photoshop等图形处理与制作软件；

5,其他某些动画与图形处理或制作软件。

三、试验原理

设置页面的背景图像，并创立鼠标通过图像。

四、试验措施与环节

1）在“页面属性"对•话框中设置页面的背景图像。

2）在页面文档中单击“插入鼠标通过图像。

五、试验成果

六、讨论与结论

试验结束后我们可以看到页面的背景变成了我们插入的图像，并且要鼠标通过的时候会变成另

一种图像，这就是鼠标通过图像的效果。当然这种试验效果很难在试验成果的截图里体现出来。这个

试验的关键在于背完图像的选择，假如背加图像太大不仅会影响网页的打开速度，甚至图像在插入会

也会有失真的感觉，因此在插入前对图像进行必要的处理能使试验的效果更好。

试验三：表格制作

一、试验目的及规定：

本实例是要创立边框为1像素的表格。

二、仪器用品

1、生均一台多媒体电脑，沮建内部局域网，并且接入国际互联网。

2、安装windowsxp操作系统;建立iis服务器环境，支持asp。

3、安装网页三剑客（dreamweavermx;flashmx;fireworksmx）等网页设计软件；

4.安装acdsee、photoshop等图形处理与制作软件；

5、其他某些动画与图形处理或制作软件.

三、试验原理

创立边框为1像素的表格。

四、试验措施与环节

1）在文档中，单击表格"”接钮，在对话框中将“单元格间距"设置为"1"。

2）选中插入的表格，将“背景颜色”设置为“黑色”（#0000000）。

3）在表格中选中所有的单元格，在“属性"而版中将“背景颜色”设置为“白色”伸ffffff）。

4）设置完毕，保留贝面，按下¥12"键预览。

五、试验成果

六、讨论与结论

本试验币:要通过整个表格和单元格颜色的差异来烘托出试验效果，间距的作用俄要在于体现这

种颜色差异。表格的背景颜色和单元格的背景颜色轻易混淆，在试验中要认真判断，一旦操作错误则

得不到试验的效果。"表格宽度”文本框右侧的表格的宽度单位，包括“像素"和“比例"两种，轻易混渚，

要充足地理解这两种单位表达的意义才能对的地进行选择，否则就不能到达自己想要的效果，设置借

误就会严重影响试验效果。

试验四：创立锚点链接

一、试验目的及规定：

本实例的日的他创立锚点链接。

二、仪器用品

1、生均一台多媒体电脑，沮建内部局域网，并且接入国际互联网。

2、安装windowsxp操作系统;建立iis服务器环境，支持asp,

3.安装网页三剑客（dreamweavermx;flashmx;fireworksmx）等网页设il,软件；

4、安装acdsee、photoshop等图形处理与制作软件；

5、其他某些动画与图形处理或制作软件。

三、试验原理

创立锚点链接。

四、试验措施与环节

1）在页面中插入1行4列的表格，并在各单元格中输入导航文字。

2）分别选中各单元格的文字，单击“按钮，在弹出的“超级链接”对话框上的“链接”文本框分别输

入“#01”"#02""#03""#04”。

3）在文档中输入文字并设置锚记名称“01"，按下“enter"键换行.输入一篇文章。

4）在文章的结尾处换行，输入文字并设置锚记名称“02"，按下‘enter”健换行，输入一篇文章。

5）同样的措施在页面卜.文分别输入文字和命名铺记为“03”和“04”，并输入文章。

6）保留页面，按下“f12”键预览。

五、试验成果

六、讨论与结论

添加瞄记的作用是可以帮读者迅速找到自己想要的文章，同步也可以使页面愈加精简。本试验

的关键难点在于链接文本框输入的名称和瞄记的名称要相•致才能到达试验的效果，同步要记得是在

上•篇文章的结尾处输入文字并设置瞄记名称，并记得输入对应的文章，否则瞄记也许不能用。纯熟

程度低在试验中不能很好地使用多种工具，无法•次精确地寻找到合适的位置。试验中忘掉选择“不

可见元素”，几次试险都失败，最终才得出对的的结论。因此在试险前要先做好预习，否则试验过程

会比较吃力。

试验五：设置css样式

一、试验目的及规定：

本实例的目的是通过设置css样式创立表格的虚线边框。

二、仪器用品

1、生均一台多媒体电脑，组建内部局域网，弁且接入国际互联网。

2、安装windowsxp操作系统健立iis服务器环境,支持asp。

3、安装网页三剑客(dreamweavermx;flashmx;fireworksmx)等网页设计软件；

4、安装acdsee、photoshop等图形处理与制作软件；

5、其他某些动画与图形处理或制作软件。

三、试验原理

通过设置css样式创立表格的虚线边框。

四、试验措施与环节

1)在网页中创立一种表格。

2)在“css样式”而板中单击""按钮，在弹出的对话框中进行设置，完毕后单击“确定”按钮。

3)在弹出的对话框中进行i殳置，完毕后单击"确定"按钮。

五、试验成果

六、讨论与结论

对话框中各项指标和属性的i殳置存在•定的难度，假如没纯熟掌握就轻易出错使试验失败。对

“ccs”样式所要使用的多种按扭不够熟悉在使用的时候觉得很生硬。这个试验成功的关键在于对软件的

掌握程度以及对多种属性的认识程度，只要充足地掌握了软件的多种操作，对各属性所代表的含义有

充足的认谡就能很好地完毕这个试验.

试验六：创立表单

一、试验目的及规定：

本实例的0的是创立一种募捐表单。

二、仪器用品

1、生均一台多媒体电脑，殂建内部局域网，并且接入国际互联网。

2、安装WindowsXP操作系统;建立IIS服务器环境，支持ASP。

3、安装网页三剑客(DrearrweaverMX;FlashMX;FireworksMX)等网贞设计软件；

4、安装Acdsee、Photoshop等图形处理与制作软件；

5、其他某些动画与图形处理或制作软件。

三、试验原理

创立一种募捐表单。

四、试验措施与环节

1）在网页中插入表格，设置为居中对齐，并插入一幅图像。

2）在表格的第二行单元格中，单击"”按钮，插入表单。

3）在表单域中插入表内对象和文字。

4）按下“F12”键，预览效果。

五、试验成果

六、讨论与结论

这个图像关键首先在于背景图象的选择，图像假如过于花俏则会使表单过于杂乱，假如颜色过

深则会掩盖了表单上的字，依次最佳不要用黑色。图像也不能过大，否则会使表单太繁杂。另一方面

是各多选框和单项选择按扭的设置难度比较大，对于初次做这个试验的人来说需要多次的试验才能到

达满意的效果。表格拆分的难度大，要多次试验才能到达自己想要的效果。

试验七：页面中控制播放Flash动画

一、试验目的及规定：

本实例的口的是实口前页面中控制播放Flash动画。

二、仪器用品

1、生均一台多媒体电脑，沮建内部局域网，并且接入国际互联网。

2、安装WindowsXP操作系统;建立IIS服务器环境，支持ASP。

3、安装网页三剑客（DrearrweaverMX;FlashMX;FireworksMX）等网页设计软件；

4.安装Acdsee、Photoshop等图形处理与制作软件；

5、其他某些动画与图形处理或制作软件.

三、试验原理

实目前页面中控制播放Flash动两。

四、试验措施与环节

1）在页面中插入表格，并在表格中插入Flash动画和两个表单或钮。

2）分别选择两个表单按钮，在“行为”面板中单击“”按钮，在弹出的快捷菜单中选择“控制

Shockwave或Flash"命令，打开"控制Shockwave或Flash”对话框，分别设置。

3）保留页而，按下T12”键预览。单击“播放"按钮时，开始播放Flash动画;当单击“停止”按钮时，

则停止播放Flash动画。

五、试验成果

六、讨论与结论

“控制Shockwave或Flash'对话框，设置难度比较大，设置错误FLASH也许无法播放。控制

按钮的创立也是关键所在，控制按钮不能使用则等于整个试验的失败，因此要认真做好各个按钮并保

证质量。在这次试验中我碰到的最大问题就是设置“控制Shockwave或Flash”对话框，由于我对其各

项的属性理解不够清晰，在选择时很难对的地做出判断，因此掌握好这方面的知识是做好这个试验的

前提。

试验八：制作浮雕文字

一、试验目的及规定：

本实例使用Flash的绘画工具制作出的有浮雕感的文字。

二、仪器用品

1、生均一台多媒体电脑，沮建内部局域网，并且接入国际互联网。

2、安装WindowsXP操作系统;建立IIS服务器环境，支持ASP。

3.安装网页三剑客(DrearrweaverMX;FlashMX;FireworksMX)等网页设it软件；

4、安装Acdsee、Photoshop等图形处理与制作软件；

5、其他某些动画与图形处理或制作软件。

三、试验原理

使用Flash的绘画工具制作出的有浮雕感的文字。

四、试验措施与环节

1)在舞台中输入文本，并将文本移动到舞台中央位置。

2)新建图层2,并复制图层1的第1帧到图层2的第1帧，并变化字体颜色。

3)拖曳图层2到图层1的下方，分别按下键盘上的方向键的左移键和上移键各一次。

4)新建图层3,且制图层2的第1帧到图层3的第1帧，并拖曳图层3到图层1的上方。

5)选择图层3的第1帧，执行“修改'分离"命令两次，将文本打散，并填充为由白色(#FFFFFF)

渐变到黄色(#FFFFF00).

6)分别按下两次键盘上的方向键中的左移键和下称键，拖曳图层3到图层1的下方，该实例制

作完毕。

五、试验成果

六、讨论与结论

掌握好层和桢的知识是做好这个试验的关键，由于这个试验重要波及到桢和层的创立和移动，

对层和桢不熟悉，在选择和移动时没法精确地把握，否则就打不到预期的试验效果。本次试验需要多

次地移动层和桢，只有合理地移动才能到达试验效果，因此在试验中要保持清醒的头脑，也需要耐心

和细心，过于急噪就会影响试验的效果和效率。

试验九：字母位置颜色的变化效果

一、试验目的及规定：

本实例重要表目前有字母的位置才能看到颜色的变化效果。

二、仪器用品

1、生均一台多媒体电脑，组建内部局域网，并且接入国际互联网。

2、安装WindowsXP操作系统;建立IIS服务器环境，支持ASP。

3、安装网页三剑客(DrearrweaverMX;FlashMX;FireworksMX)等网页设计软件；

4,安装Acdsee、Photoshop等图形处理与制作软件；

5、其他某些动画与图形处理或制作软件。

三、试验原理

表目前有字母的位置才能看到颜色的变化效果。

四、试验措施与环节

1)执行“文献'导入'导入到库"命令，导入一•种图像文献到“库"面板中。

2)将图像文献拖曳到舞台并转换为图形元件，然后创立移动补间动画。

3)新建图层2,输入文本并设置其属性。

4)将图层2设理为遮罩层，完毕本实例的制作。

五、试验成果

六、讨论与结论

这个试验的前提是要学会做移动补间动画，由于移动补间动画矩体现试验效果的关犍，另•方

面要懂得遮单层的设置，这两项都是试脸的关键。背景图像的选择也很关键，假如背景图像的颜色过

于单一，则不能很好地体现试验的效果，字体颜色的变化也会比较不明显。因此这个试验的技术含量

比较大,因此难度也比蛟大,要有耐心夫认直研究.

试验十：动作补间动画及声音效果

一、试验目的及规定：

本实例首先创立一种动作补间动画，然后在对其添加声音效果。

二、仪器用品

1、生均一台多媒体电脑，组建内部局域网，并且接入国际互联网。

2、安装WindowsXP操作系统;建立IIS服务器环境，支持ASP。

3,安装网页三剑客(DrearrweaverMX;FlashMX;FireworksMX)等网页设计软件；

4、安装Acdsee、Photoshop等图形处理与制作软件；

5、其他某些动画与图形处理或制作软件。

三、试验原理

创立一种动作补间动画，然后在对其添加声音效果。

四、试验措施与环节

1）创立图形元件在舞台中绘制一种卡通人物。

2）创立卡通人物越飞越远的动作补间动画。

3）新建一种图层，导入一幅背景图片，并置位于最下层。

4）执行“文献'导入'导入到库命令"，导入一种声音文献。新建一种图层，并选择第1帧，在帧“属

性”面板中，在■•声音”卜拉列表中选择导入的声音文献名称，在“同步”卜・拉列表中选择“数据流”选项，

其他选项为默认值。

5）保留文献，按下“Ctrl+Enter”组合键输出影片即可。

五、试验成果

六、讨论与结论

这个试验首先要创立图形元件，因此规定对画图工具有比较清晰的理解，在试验中我碰到最大

的难题就是没法精确地使用钢笔工具，常常画不成自己想要的形状，最终通过查阅有关的书籍才彻底

明白它的使用措施。这个试验波及到动作补间动画的制作，和此前做的移动补间动画有•定的区别,

在试验中要认真辨别。导声音文献也是这个试验新波及的内容，在各项属性的设置方面要认我把握和

学习。

试验H^一：ActionScript脚本程序制作

一、试验目的及规定：

本实例模拟播放器中音频高下显示的效果。

二、仪器用品

1、生均一台多媒体电脑，组建内部局域网，并且接入国际互联网。

2、安装WindowsXP操作系统;建立IIS服务器环境，支持ASP。

3,安装网页三剑客（DrearrweaverMX;FlashMX;FireworksMX）等网页设计软件；

4,安装Acdsee、Photoshop等图形处理与制作软件；

5、其他某些动画与图形处理或制作软件。

三、试验原理

本实例模拟播放器中音频高下显示的效果。木例是一种完全由ActionScript脚本程序制作的图

形动画。

四、试验措施与环节

1）启动FlashMX,新建一种空白文档，执行“修改'文档"命令，启动“文档属性”对话框，修改

属性参数为：宽：600px;高：300px;背景颜色#000000°

2）执行1•窗口"开发面板'动作"命令，为图层1添加如下动作脚本。

-root.OnEnterFrame=function()

createEmptyMovieClip("caidai",random(2))

caidai.-X=150;

caidai.-Y=200;

for(vari=0<12:i++)

(

caidai.beginFilL(Math.Fandom()*0xffffff,60)

vargaodu=Math.Randorr()*50+10;

varxzuobiao=[i*30,i*30+23,i*30+20,i*30]

varyzvobiao=[-gaodu,-gaoduQQ]

caidai,moveTo(i*30,o)

for(varj=0;<5;j++)

{caidai,LineTo(xzuobiao[j]„yzuobio[j]);

}

)

)

3)按下Ptrl+S"组合键保留文献，执行“控制'测试影片”命令，欣赏本例完毕后的效果。

五、试验成果

六、讨论与结论

这个试验重要是操作FlashMX,虽然这个试验整体的环节很简补，不过脚本程序的对的性决定

着这个试验的成败，因此在试验中要认真.分析脚本并对其进行不停的调试使其能对的地运行。而这方

面对程序方面的知识有比较高的规定因此对于我们非计算机类的学生来说难度比较大，假如要做好这

个试验我们必须加强学习程序方面的知识。

试验十二：创立一种特效字

一、试验目的及规定：

本章上机实训的目的是创立一种特效字。

二、仪器用品

1、生均一台多媒体电脑，组建内部局域网，弁且接入国际互联网。

2、安装WindowsXP操作系统;建立IIS服务器环境，支持ASP。

3,安装网页三剑客(DrearrweaverMX;FlashMX;FireworksMX)等网页设计软件；

4,安装Acdsee、Photoshop等图形处理与制作软件；

5、其他某些动画与图形处理或制作软件。

三、试验原理

创立一种特效字。

四、试验措施与环节

1）新建一种Fireworks文档，并输入文字，将字体加粗，字号设置为120。

2）将文字转化为途径，在强性"面板中单击""按钮，在弹出的快搦菜单中选择“阴影和光晕'投影"

命令,如图15-42所示。

3）选中文本对象，执行“编辑'克隆•1命令。选中克隆对象，执行‘修改"变化途径'扩展笔触”命令，

在弹出的“展开笔触”对话框中设置为如图15-43所示。特效字制作完毕.

五、试验成果

六、讨论与结论

Fireworks软件的打开速度比较慢，并且会影响计算机的反应速度，同步使用DREEMWAVER

和FIREWORKS会使整个电脑很卡，因此这个试验需要比很好的计算机系统的支持。对“阴影和光

晕"投影"命令我还不能比较深刻地理解在试验的时候有点迷糊，对"编辑V克隆”命令和“修改'变化途径"

扩展笔触"命令我也存在同样的困惑，因此做好试验前的准备是顺利地完毕试验的关键。

试验十三：绘制一种效果图

一、试验目的及规定：

本上机实训的目的是绘制一种效果图。

二、仪器用品

1、生均•台多媒体电脑，组建内部局域网，并且接入国际互联网。

2、安装WindowsXP操作系统;建立IIS服务器环境，支持ASP.

3、安装网页三剑客（DrearrweaverMX;FlashMX;FireworksMX）等网页设计软件；

4、安装Acdsee、Photoshop等图形处理与制作软件；

5.其他某些动画与图形处理或制作软件。

三、试验原理

绘制一种效果图。

四、试验措施与环节

1）用椭圆工具和钢笔工具分别绘制出企鹅的身体和翅膀。

2）执行"修改'组合途径\联合"命令，联合途径，并填充为黑色。

3）用椭圆工具绘制限睛，并用钢笔工具构出脚丫、嘴、围巾、和肚皮，并填充对应的颜色。

4）将所有的部分放到对应的位置，本例制作完毕。

五、试验成果

六、讨论与结论

这个试验诸多要用到椭圆工具和钢谊工具，因此要先熟悉地掌握他们的使用措施，多看书本并

进行某些试验操作能比较快地掌握它们的使用措施。试验时要分别地绘制出企鹅各部分的图形元件然

后执行“修改'组合途径'联合”命令，联合途径，因此在试验牢记不能把整个图象作为绘制的对象，否

则就不能到达试验效果，操作的难度也会加大。同步对“修改悝合途径'联合”命令要深入理解才能在

合适的时间和位置使用。

试转十四：创立管道图像

一、试验目的及规定：

本实例是创立一种如管道图像，并通过“优化”面板对图像进行优化导出。

二、仪器用品

1、生均一台多媒体电脑，沮建内部局域网，并且接入国际互联网。

2、安装WindowsXP操作系统健立IIS服务器环境，支持ASP。

3、安装网页三剑客（DrearrweaverMX;FlashMX;FireworksMX）等网页设计软件；

4.安装Acdsee、Photoshop等图形处理与制作软件；

5、其他某些动画与图形处理或制作软件。

三、试验原理

创立一种如管道图像，并通过“优化”面板对图像进行优化导出。

四、试验措施与环节

1）新建一种图像文档，绘制一种矩形，并将其设置为线性填充。

2）用钢笔工具绘制一种途径，并将其设置.为放射状填充，作为管道的拐角。

3）复制所创立的拐角和线性矩形，并进行缩放和组合。

4）选择“垂直线3”纹理“25%”设置为粗管道。

5）设置一幅背景图像，用钢笔工具勾画出闪光的效果。执行“窗口'优化"命令，将“优化”面板进

行设置。

6）设置完毕后，执行“文献'导出”命令，在“导出”对话框中选择导出的途径，完毕后单击“保留”

按钮。

五、试验成果

六、讨论与结论

横向的管道绘制比较简朴，效果也比较明显，竖向和拐角的管道绘制的难度很大，常常做了对

多次还不能到达理想的效果，由也反应了我们对试验工具的纯熟程度不够，在此后的学习中耍加强这

方面的学习。填充设置和“垂直线3”纹理“25%”设置是到达试验效果关匏，因此要认真地理解它代表的

意义，然后认真地进行设置。对的地选择背景图像，也处到达试验效果的关键。

试验十五：创立图像热点和切片

一、试验口的及规定：

本实训的重要目的是创立图像热点和切片。

二、仪器用品

1、生均一台多媒体电脑，组建内部局域网，并且接入国际互联网。

2、安装WindowsXP操作系统;建