网页制作实验四.docx

网页制作实验四.docx

《网页制作实验四.docx》由会员分享，可在线阅读，更多相关《网页制作实验四.docx（11页珍藏版）》请在冰豆网上搜索。

网页制作实验四

江西科技师范学院电子版实验报告

实验项目名称

Fireworks网页设计

指导老师

实验课程名称

教育网站制作

班级

姓名

学 号

评 分

实验地点

2304

实验日期

一、实验目的和要求

掌握Fireworks的各种基本工具的使用；掌握矢量绘图工具；掌握Fireworks制作网页的方法。

二、实验内容和原理

内容：

用Fireworks设计一个以课外辅导为主题的培训机构网站。

步骤：

1.新建一个Fireworks文件。

2.在弹出的“新建文档”对话框中设置画布的宽度为760像素，高度为430像素，背景颜色为白色。

3.选择绘图工具栏中的“选取框”工具，在“属性”面板中进行相应的设置，如下图所示。

4.使用“选取框”工具在画布的右侧绘制一个矩形选区。

5.选择绘图工具栏中的“渐变”工具，这时“属性”面板会自动变成渐变色的调节属性。

设置渐变的类型为线性渐变，渐变颜色为白色过度到绿色。

如下图所示。

6.使用“渐变”工具，在画布右侧的选区中单击鼠标左键，渐变色即可填充到当前选区中。

如下图所示。

填充完毕，按快捷键【Ctrl+D】推出位图编辑模式。

7.在Fireworks8的新窗口中打开事先准备好的图像素材“花草.jpg”，选择绘图工具栏中的“椭圆选取框”工具，在“属性”面板中进行相应的设置，如下图所示。

8.使用“椭圆选取框”工具在图像“花草.jpg”中绘制一个正圆的选区。

如下图所示。

9.按住键盘的【Shift】键，这时在鼠标指针的右下角会显示一个小【+】号，表示添加选区。

使用“椭圆选取框”工具在当前选区的基础上增加一个新的选区。

如下图所示。

10.现在得到的是有点类似于望远镜的两个椭圆连接在一起的选区，如果需要调整选区在图像中的位置，在“椭圆选取框”工具选中的状态下，直接用鼠标移动即可。

把选择的像素区域，复制到前面新建立的画布中来。

如下图所示。

11.在Fireworks8的新窗口中打开事先准备好的图像素材

10.现在得到的是有点类似于望远镜的两个椭圆连接在一起的选区，如果需要调整选区在图像中的位置，在“椭圆选取框”工具选中的状态下，直接用鼠标移动即可。

把选择的像素区域，复制到前面新建立的画布中来。

如下图所示。

11.在Fireworks8的新窗口中打开事先准备好的图像素材“模特.jpg”，选择绘图工具栏中的“多边形套索”工具，在“属性”面板中进行相应的设置，如下图所示。

12.使用“多边形套索”工具,把图像素材“模特.jpg”的人物区域选中，如下图所示。

在选择的过程中，不需要完全的压边，因为有羽化的设置。

同时如果不小心选择错误的话，必须重新绘制选区。

13.把选中的像素区域复制到前面新建的画布中，如下图所示。

14.选择绘图工具栏中的“椭圆选取框”工具，其属性设置和前面一致。

在画布中绘制一个椭圆的选区。

如下图所示。

15.选择“选择”菜单中的“反选”命令，对选区进行反选操作，这样选中的就是椭圆选区以外的部分。

如下图所示。

16.在图层中选择图像素材“模特.jpg”所在的图层，按键盘的【Delete】键，即可删除所选中的像素区域。

根据需要，可以适当移动选区，对图像素材“模特.jpg”的边缘部分进行多次删除，最终效果如下图所示。

17.选择“修改”菜单中的“变形”/“水平翻转”命令，改变模特素材的水平方向。

并且使用“缩放”工具适当调整图像的尺寸，对齐到相应的位置。

18.打开“属性”面板中的“亮度/对比度”滤镜命令，适当增加其“亮度”和“对比度”属性，使图像素材更清晰明亮。

如下图所示。

19.使用绘图工具栏中的“直线”工具，在画布中绘制一个十字坐标，并且在“属性”面板中设置其笔触样式为虚线。

如下图所示。

20.在Fireworks8的新窗口中打开事先准备好的图像素材“向日葵.jpg”，选择绘图工具栏中的“多边形套索”工具，其属性设置和前面一致，把向日葵选择下来，并且复制到当前画布中。

如下图所示。

21.首先把向日葵复制一个，选中复制的向日葵图像，在“属性”面板的“滤镜”菜单中选择“模糊”/“运动模糊”命令。

22.在弹出的“运动模糊”对话框中设置好相应的属性，效果如下图所示。

23.在“图层”面板中调整模糊后向日葵的排列顺序，拖拽到所有对象的下方，并且同时设置其“透明度”为40。

如下图所示。

24.把另外一张向日葵的图像缩小到适当的尺寸，并且移动到十字坐标上，如下图所示。

25.使用绘图工具栏中的“选取框”工具，选中图像中多余的像素区域，依次删除。

如下图所示。

26.最后，在画布中添加文本和网站标志，整个页面效果图就制作完毕了。

效果如下图。

25.使用绘图工具栏中的“选取框”工具，选中图像中多余的像素区域，依次删除。

如下图所示。

26.最后，在画布中添加文本和网站标志，整个页面效果图就制作完毕了。

效果如下图。

原理：

利用Fireworks的位图绘图工具和矢量绘图工具进行网页设计；利用Fireworks的web工具、热区工具、切片工具进行网站的规划。

三、主要仪器设备

计算机与Windows2000/XP系统；网页三剑客；photoshop等软件。

四、实验结果

掌握Fireworks的各种基本工具的使用；掌握矢量绘图工具；掌握Fireworks制作网页的方法。