网页制作实验报告格式

实验一：站点设置

一、实验目的及要求

本实例是通过“站点定义为”对话框中的“高级”选项卡创建一个新站点。

二、仪器用具

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

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

3、安装网页三剑客(dreamweaver mx;flash mx;fireworks mx)等网页设计软件;

三、实验原理

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

四、实验方法与步骤

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

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

3)在“站点名称”文本框中输入站点名称，在“默认文件夹”文本框中选择所创建的站点文件夹。在“默认图象文件夹”文本框中选择存放图象的文件夹，完成后单击“确定”按钮，返回“管理站点”对话框。

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

五、实验结果

六、讨论与结论

实验开始之前要先建立一个根文件夹，在实验的过程中把站点存在自己建的文件夹里，这样才能使实验条理化，不至于在实验后找不到自己的站点。在实验过程中会出现一些选项，计算机一般会有默认的选择，最后不要去更改，如果要更改要先充分了解清楚该选项的含义，以及它会造成的效果，否则会使实验的结果失真。实验前先熟悉好操作软件是做好该实验的关键。

实验二：页面图像设置

一、实验目的及要求：

本实例的目的是设置页面的背景图像,并创建鼠标经过图像。

二、仪器用具

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

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

3、安装网页三剑客(dreamweaver mx;flash mx;fireworks mx)等网页设计软件;

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

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

三、实验原理

设置页面的背景图像,并创建鼠标经过图像。

四、实验方法与步骤

1) 在“页面属性”对话框中设置页面的背景图像。

2) 在页面文档中单击“”插入鼠标经过图像。

五、实验结果

六、讨论与结论

实验结束后我们可以看到页面的背景变成了我们插入的图像，并且要鼠标经过的时候会变成另一个图像，这就是鼠标经过图像的效果。当然这种实验效果很难在实验结果的截图里表现出来。这个实验的关键在于背景图像的选择，如果背景图像太大不仅会影响网页的打开速度，甚至图像在插入会也会有失真的感觉，因此在插入前对图像进行必要的处理能使实验的效果更好。

实验三：表格制作

一、实验目的及要求：

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

二、仪器用具

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

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

3、安装网页三剑客(dreamweaver mx;flash mx;fireworks mx)等网页设计软件;

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

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

三、实验原理

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

四、实验方法与步骤

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

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

3) 在表格中选中所有的单元格，在“属性”面版中将“背景颜色”设置为“白色”(#ffffff)。

4) 设置完毕，保存页面，按下“f12”键预览。

五、实验结果

六、讨论与结论

本实验主要通过整个表格和单元格颜色的差异来衬托出实验效果，间距的作用主要在于表现这种颜色差异。表格的背景颜色和单元格的背景颜色容易混淆，在实验中要认真判断，一旦操作错误则得不到实验的效果。“表格宽度”文本框右侧的表格的宽度单位，包括“像素”和“百分比”两种，容易混淆，要充分地理解这两种单位表示的意义才能正确地进行选择，否则就不能达到自己想要的效果，设置错误就会严重影响实验效果。

实验四：创建锚点链接

一、实验目的及要求：

本实例的目的是创建锚点链接。

二、仪器用具

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

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

3、安装网页三剑客(dreamweaver mx;flash mx;fireworks mx)等网页设计软件;

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、安装windows xp操作系统;建立iis服务器环境，支持asp。

3、安装网页三剑客(dreamweaver mx;flash mx;fireworks mx)等网页设计软件;

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

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

三、实验原理

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

四、实验方法与步骤

1) 在网页中创建一个表格。

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

3) 在弹出的对话框中进行设置，完成后单击“确定”按钮。

五、实验结果

六、讨论与结论

对话框中各项指标和属性的设置存在一定的难度，如果没熟练掌握就容易出错使实验失败。对“ccs”样式所要使用的各种按扭不够熟悉在使用的时候觉得很生硬。这个实验成功的关键在于对软件的掌握程度以及对各种属性的认识程度，只要充分地掌握了软件的各种操作，对各属性所代表的含义有充分的认识就能很好地完成这个实验。

实验六：创建表单

一、实验目的及要求：

本实例的目的是创建一个募捐表单。

二、仪器用具

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

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

3、安装网页三剑客(dreamweaver mx;flash mx;fireworks mx)等网页设计软件;

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

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

三、实验原理

创建一个募捐表单。

四、实验方法与步骤

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

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

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

4) 按下“f12”键，预览效果。

五、实验结果

六、讨论与结论

这个图像关键首先在于背景图象的选择，图像如果过于花俏则会使表单过于杂乱，如果颜色过深则会掩盖了表单上的字，依次最好不要用黑色。图像也不能过大，不然会使表单太繁杂。其次是各多选框和单选按扭的设置难度比较大，对于初次做这个实验的人来说需要多次的试验才能达到满意的效果。表格拆分的难度大，要多次实验才能达到自己想要的效果。

实验七：页面中控制播放flash动画

一、实验目的及要求：

本实例的目的是实现在页面中控制播放flash动画。

二、仪器用具

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

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

3、安装网页三剑客(dreamweaver mx;flash mx;fireworks mx)等网页设计软件;

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

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

三、实验原理

实现在页面中控制播放flash动画。

四、实验方法与步骤

1) 在页面中插入表格，并在表格中插入flash动画和两个表单按钮。

2) 分别选择两个表单按钮，在“行为”面板中单击“”按钮，在弹出的快捷菜单中选择“控制shockwave或flash”命令，打开“控制shockwave或flash”对话框，分别设置。

3) 保存页面，按下“f12”键预览。单击“播放”按钮时，开始播放flash动画;当单击“停止”按钮时，则停止播放flash动画。

五、实验结果

六、讨论与结论

“控制shockwave或flash”对话框，设置难度比较大，设置错误flash可能无法播放。控制按钮的创建也是关键所在，控制按钮不能使用则等于整个实验的失败，因此要认真做好各个按钮并确保质量。在这次实验中我遇到的最大问题就是设置“控制shockwave或flash”对话框，因为我对其各项的属性了解不够清楚，在选择时很难正确地做出判断，因此掌握好这方面的知识是做好这个实验的前提。

实验八：制作浮雕文字

一、实验目的及要求：

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

二、仪器用具

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

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

3、安装网页三剑客(dreamweaver mx;flash mx;fireworks mx)等网页设计软件;

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、安装windows xp操作系统;建立iis服务器环境，支持asp。

3、安装网页三剑客(dreamweaver mx;flash mx;fireworks mx)等网页设计软件;

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

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

三、实验原理

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

四、实验方法与步骤

1) 执行“文件导入导入到库”命令，导入一个图像文件到“库”面板中。

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

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

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

五、实验结果

六、讨论与结论

这个实验的前提是要学会做移动补间动画，因为移动补间动画是表现实验效果的关键，其次要懂得遮罩层的设置，这两项都是实验的关键。背景图像的选择也很关键，如果背景图像的颜色过于单一，则不能很好地表现实验的效果，字体颜色的变化也会比较不明显。因此这个实验的技术含量比较大，因此难度也比较大，要有耐心去认真研究。

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

一、实验目的及要求：

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

二、仪器用具

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

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

3、安装网页三剑客(dreamweaver mx;flash mx;fireworks mx)等网页设计软件;

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

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

三、实验原理

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

四、实验方法与步骤

1) 创建图形元件在舞台中绘制一个卡通人物。

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

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

4) 执行“文件导入导入到库命令”，导入一个声音文件。新建一个图层，并选择第1帧，在帧“属性”面板中，在“声音”下拉列表中选择导入的声音文件名称，在“同步”下拉列表中选择“数据流”选项，其他选项为默认值。

5) 保存文件，按下“ctrl+ enter”组合键输出影片即可。

五、实验结果

六、讨论与结论

这个实验首先要创建图形元件，因此要求对画图工具有比较清楚的了解，在实验中我遇到最大的难题就是没法准确地使用钢笔工具，常常画不成自己想要的形状，最后通过查阅相关的书籍才彻底明白它的使用方法。这个实验涉及到动作补间动画的制作，和以前做的移动补间动画有一定的区别，在实验中要认真区分。导声音文件也是这个实验新涉及的内容，在各项属性的设置方面要认真把握和学习。

实验十一：action script脚本程序制作

一、实验目的及要求：

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

二、仪器用具

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

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

3、安装网页三剑客(dreamweaver mx;flash mx;fireworks mx)等网页设计软件;

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

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

三、实验原理

本实例模拟播放器中音频高低显示的效果。本例是一个完全由action script脚本程序制作的图形动画。

四、实验方法与步骤

1) 开启flash mx 20xx，新建一个空白文档，执行“修改文档”命令，开启“文档属性”对话框，修改属性参数为：宽：600px;高：300px;背景颜色#000000。

2) 执行“窗口开发面板动作”命令，为图层1添加如下动作脚本。

- root. on enter frame= function ()

{

create empty movie clip (“ caidai ”, random (2))

caidai. –x= 150;

caidai. –y=200;

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

{

cai dai. begin fill (math. random () *0xffffff,60)

var gaodu= math. random () *50+10;

var xzuobiao= [i*30,i*30+20,i*30+20, i*30]

var yzvobiao=[- gaodu,- gaodu,0,0]

caidai, moveto(i*30,o)

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

{caidai, line to (xzuo biao[j],,yzuobio[j]);

}

}

}

3) 按下“ctrl+ s”组合键保存文件，执行“控制测试影片”命令，欣赏本例完成后的效果。

五、实验结果

六、讨论与结论

这个实验主要是操作flash mx，虽然这个实验整体的步骤很简单，但是脚本程序的正确性决定着这个实验的成败，因此在实验中要认真分析脚本并对其进行不断的调试使其能正确地运行。而这方面对程序方面的知识有比较高的要求因此对于我们非计算机类的学生来说难度比较大，如果要做好这个实验我们必须加强学习程序方面的知识。

实验十二：创建一个特效字

一、实验目的及要求：

本章上机实训的目的是创建一个特效字。

二、仪器用具

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

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

3、安装网页三剑客(dreamweaver mx;flash mx;fireworks mx)等网页设计软件;

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

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

三、实验原理

创建一个特效字。

四、实验方法与步骤

1) 新建一个fireworks文档，并输入文字，将字体加粗，字号设置为120。

2) 将文字转化为路径，在“属性”面板中单击“”按钮，在弹出的快捷菜单中选择“阴影和光晕投影”命令，如图15-42所示。

3) 选中文本对象，执行“编辑克隆”命令。选中克隆对象，执行“修改改变路径扩展笔触”命令，在弹出的“展开笔触”对话框中设置为如图15-43所示。特效字制作完毕。

五、实验结果

六、讨论与结论

fireworks 软件的打开速度比较慢，而且会影响计算机的反应速度，同时使用dreemwaver和fireworks会使整个电脑很卡，因此这个实验需要比较好的计算机系统的支持。对 “阴影和光晕投影”命令我还不能比较深刻地理解在实验的时候有点迷糊，对“编辑克隆”命令和“修改改变路径扩展笔触”命令我也存在同样的困惑，因此做好实验前的准备是顺利地完成实验的关键。

实验十三：绘制一个效果图

一、实验目的及要求：

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

二、仪器用具

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

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

3、安装网页三剑客(dreamweaver mx;flash mx;fireworks mx)等网页设计软件;

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

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

三、实验原理

绘制一个效果图。

四、实验方法与步骤

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

2) 执行“修改组合路径联合”命令，联合途径，并填充为黑色。

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

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

五、实验结果

六、讨论与结论

这个实验很多要用到椭圆工具和钢笔工具，因此要先熟悉地掌握他们的使用方法，多看课本并进行一些实验操作能比较快地掌握它们的使用方法。实验时要分别地绘制出企鹅各部分的图形元件然后执行“修改组合路径联合”命令，联合途径，因此在实验切记不能把整个图象作为绘制的对象，否则就不能达到实验效果，操作的难度也会加大。同时对 “修改组合路径联合”命令要深入了解才能在适当的时间和位置使用。

实验十四：创建管道图像

一、实验目的及要求：

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

二、仪器用具

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

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

3、安装网页三剑客(dreamweaver mx;flash mx;fireworks mx)等网页设计软件;

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

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

三、实验原理

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

四、实验方法与步骤

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

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

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

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

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

6) 设置完成后，执行“文件导出”命令，在“导出”对话框中选择导出的路径，完成后单击“保存”按钮。

五、实验结果

六、讨论与结论

横向的管道绘制比较简单，效果也比较明显，竖向和拐角的管道绘制的难度很大，经常做了对多次还不能达到理想的效果，由也反应了我们对实验工具的熟练程度不够，在今后的学习中要加强这方面的学习。填充设置和“垂直线3”纹理“25%”设置是达到实验效果关键，因此要认真地了解它代表的意义，然后认真地进行设置。正确地选择背景图像，也是达到实验效果的关键。

实验十五：创建图像热点和切片

一、实验目的及要求：

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

二、仪器用具

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

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

3、安装网页三剑客(dreamweaver mx;flash mx;fireworks mx)等网页设计软件;

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

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

三、实验原理

创建图像热点和切片。

四、实验方法与步骤

1) 打开，执行“文件打开”命令，打开一幅图像。

2) 使用矩形热点工具在图像的文字位置处创建热点链接。

3) 分别选择矩形切片工具和多边形切片工具，在图像中创建切片。

4) 执行“文件导出”命令，在“导出”对话框中选择切片和html文档。打开导出的html文件观看。

五、实验结果

六、讨论与结论

这个实验的操作相对比较简单，花费的时间也比较少。在实验中能明显地体会到实验的效果但是在预览后很难看出处理后的图像和原始图像的区别，因此常常产生实验失败的错觉，就因为这个错觉我进行了多次的实验，最后与其他同学讨论过才发现这是实验的正常现象，因此在实验中多与同学交流是学习的好方法。

实验十六：其他动画制作及图形处理软件介绍

一、实验目的及要求：

本实训的主要目的是了解其他动画制作及图形处理软件的基本使用。

二、仪器用具

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

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

3、安装网页三剑客(dreamweaver mx;flash mx;fireworks mx)等网页设计软件;

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

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

三、实验原理

了解其他动画制作及图形处理软件的基本使用。

四、实验方法与步骤

根据教师所介绍的其他动画制作及图形处理软件，进行相关的基本使用操作。本实验可以与其它实验相结合进行。

1) acdsee图形处理软件

2) swftext(flash文字制作工具) 1.2 raindy汉化修正版软件使用

五、实验结果

六、讨论与结论

这个软件是一个简单易懂的软件，操作起来也比较方便，相对于photoshop软件这个软比较达到效果，但是这个软件的能动性比较低，我们只能被动地使用里面所包含的各项设置但是不能能动地绘制自己想要的图片，各项属性的设置也是只能从中选择。因此如果只是简单的制作可以采用这个软件，但是如果想做自己特色的东西就要选择更高级点的软件。