网页制作实验四.docx
- 文档编号:2917091
- 上传时间:2022-11-16
- 格式:DOCX
- 页数:11
- 大小:384.95KB
网页制作实验四.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制作网页的方法。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页制作 实验四 网页 制作 实验