网页制作实验四Word格式.docx
《网页制作实验四Word格式.docx》由会员分享,可在线阅读,更多相关《网页制作实验四Word格式.docx(11页珍藏版)》请在冰豆网上搜索。
![网页制作实验四Word格式.docx](https://file1.bdocx.com/fileroot1/2022-11/16/a12678d6-3c02-4b2c-a9b9-42cfa4cbb149/a12678d6-3c02-4b2c-a9b9-42cfa4cbb1491.gif)
教育网站制作
班级
姓名
学
号
评
分
实验地点
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的新窗口中打开事先准备好的图像素材
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.最后,在画布中添加文本和网站标志,整个页面效果图就制作完毕了。
效果如下图。
原理:
利用Fireworks的位图绘图工具和矢量绘图工具进行网页设计;
利用Fireworks的web工具、热区工具、切片工具进行网站的规划。
三、主要仪器设备
计算机与Windows2000/XP系统;
网页三剑客;
photoshop等软件。
四、实验结果