网页制作实验四Word格式.docx

1、教育网站制作班级姓 名学号评 分实验地点2304实验日期一、实验目的和要求掌握Fireworks的各种基本工具的使用；掌握矢量绘图工具；掌握Fireworks制作网页的方法。二、实验内容和原理 内容：用Fireworks设计一个以课外辅导为主题的培训机构网站。步骤：1. 新建一个Fireworks文件。2. 在弹出的“新建文档”对话框中设置画布的宽度为760像素，高度为430像素，背景颜色为白色。3. 选择绘图工具栏中的“选取框”工具，在“属性”面板中进行相应的设置，如下图所示。4. 使用“选取框”工具在画布的右侧绘制一个矩形选区。 5. 选择绘图工具栏中的“渐变”工具 ，这时“属性”面板会自

2、动变成渐变色的调节属性。设置渐变的类型为线性渐变，渐变颜色为白色过度到绿色。如下图所示。6. 使用“渐变”工具，在画布右侧的选区中单击鼠标左键，渐变色即可填充到当前选区中。填充完毕，按快捷键【Ctrl+D】推出位图编辑模式。7. 在Fireworks 8的新窗口中打开事先准备好的图像素材“花草.jpg”，选择绘图工具栏中的“椭圆选取框”工具，在“属性”面板中进行相应的设置，如下图所示。8. 使用“椭圆选取框”工具在图像“花草.jpg”中绘制一个正圆的选区。9. 按住键盘的【Shift】键，这时在鼠标指针的右下角会显示一个小【+】号，表示添加选区。使用“椭圆选取框”工具在当前选区的基础上增加一个

3、新的选区。10. 现在得到的是有点类似于望远镜的两个椭圆连接在一起的选区，如果需要调整选区在图像中的位置，在“椭圆选取框”工具选中的状态下，直接用鼠标移动即可。把选择的像素区域，复制到前面新建立的画布中来。11. 在Fireworks 8的新窗口中打开事先准备好的图像素材11. 在Fireworks 8的新窗口中打开事先准备好的图像素材“模特.jpg”，选择绘图工具栏中的“多边形套索”工具，在“属性”面板中进行相应的设置，如下图所示。12. 使用“多边形套索”工具,把图像素材“模特.jpg”的人物区域选中，如下图所示。在选择的过程中，不需要完全的压边，因为有羽化的设置。同时如果不小心选择错误的

4、话，必须重新绘制选区。13. 把选中的像素区域复制到前面新建的画布中，如下图所示。14. 选择绘图工具栏中的“椭圆选取框”工具，其属性设置和前面一致。在画布中绘制一个椭圆的选区。15. 选择“选择”菜单中的“反选”命令，对选区进行反选操作，这样选中的就是椭圆选区以外的部分。16. 在图层中选择图像素材“模特.jpg”所在的图层，按键盘的【Delete】键，即可删除所选中的像素区域。根据需要，可以适当移动选区，对图像素材“模特.jpg”的边缘部分进行多次删除，最终效果如下图所示。17. 选择“修改”菜单中的“变形”/“水平翻转”命令，改变模特素材的水平方向。并且使用“缩放”工具适当调整图像的尺寸

5、，对齐到相应的位置。18. 打开“属性”面板中的“亮度/对比度”滤镜命令，适当增加其“亮度”和“对比度”属性，使图像素材更清晰明亮。19. 使用绘图工具栏中的“直线”工具，在画布中绘制一个十字坐标，并且在“属性”面板中设置其笔触样式为虚线。20. 在Fireworks 8的新窗口中打开事先准备好的图像素材“向日葵.jpg”，选择绘图工具栏中的“多边形套索”工具，其属性设置和前面一致，把向日葵选择下来，并且复制到当前画布中。21. 首先把向日葵复制一个，选中复制的向日葵图像，在“属性”面板的“滤镜”菜单中选择“模糊”/“运动模糊”命令。22. 在弹出的“运动模糊”对话框中设置好相应的属性，效果如

6、下图所示。23. 在“图层”面板中调整模糊后向日葵的排列顺序，拖拽到所有对象的下方，并且同时设置其“透明度”为40。24. 把另外一张向日葵的图像缩小到适当的尺寸，并且移动到十字坐标上，如下图所示。25. 使用绘图工具栏中的“选取框”工具，选中图像中多余的像素区域，依次删除。26. 最后，在画布中添加文本和网站标志，整个页面效果图就制作完毕了。效果如下图。原理：利用Fireworks的位图绘图工具和矢量绘图工具进行网页设计；利用Fireworks的web工具、热区工具、切片工具进行网站的规划。三、主要仪器设备计算机与Windows 2000/XP系统；网页三剑客；photoshop等软件。四、实验结果