网页设计与制作项目四.ppt

1、网页设计与制作项目四利用项目四利用Fireworks CS6Fireworks CS6制作网页制作网页认识认识Fireworks CS6Fireworks CS61制作网站制作网站LOGOLOGO中的各类字体中的各类字体2制作网站制作网站LOGOLOGO中的各类图形中的各类图形3添加滤镜与制作动画添加滤镜与制作动画4任务任务1 1认识认识Fireworks CS6Fireworks CS6Fireworks CS6的主界面工作区工具条“属性”面板组合面板任务任务1 1认识认识Fireworks CS6Fireworks CS61 面板部分面板部分工作界面的调整、变化工作界面的调整、变化2 菜单

2、部分菜单部分菜单命令的增强、重组菜单命令的增强、重组3 实战操作实战操作工作流程的快捷、轻松工作流程的快捷、轻松任务任务1 1认识认识Fireworks CS6Fireworks CS6“图像编辑”面板“自动形状属性”面板“层”面板123任务任务2 2制作网站制作网站LOGOLOGO中的各类字体中的各类字体立体字体立体字体金属字体金属字体透视文字特效透视文字特效环形字体环形字体印章文字印章文字立体字效果效果尽显的金属文字透视阴影效果图环形文字效果图印章效果图任务任务3 3制作网站制作网站LOGOLOGO中的各类图形中的各类图形制作圆角按钮制作圆角按钮制作心形光晕图制作心形光晕图制作奥林匹克五环

3、旗制作奥林匹克五环旗示范按钮光晕效果心形图奥运五环效果图任务任务4 4添加滤镜与制作动画添加滤镜与制作动画(1)建立新文件。启动Fireworks CS6，按Ctrl+N组合键新建一个工作区，设置工作区的宽度为400，高度为300,颜色为蓝色，其余为默认值。(2)输人文本。首先单击文本工具，设置参数如下:字体为华文行楷，大小为20,颜色为红色(#FF0000)，其余为默认值。然后在文本框中输入文字，单击“确定”按钮。用箭头工具选择并移动文本到工作区稍微靠上的位置，接着在滤镜中选择“阴影和光晕”一“光晕”命令，设置具体参数如下:宽度为2，柔化度为1，颜色为黄色(#FFFF00)，透明度为6500

4、，如图所示。此时文本效果如图所示。发光属性设置文本效果任务任务4 4添加滤镜与制作动画添加滤镜与制作动画(3)制作文本图形的分布路径。文本附加到路径文本属性设置任务任务4 4添加滤镜与制作动画添加滤镜与制作动画(4)开始制作动画。“转化为元件”对话框文本转化为元件任务任务4 4添加滤镜与制作动画添加滤镜与制作动画(5)克隆其他图例。克隆并旋转多个元件任务任务4 4添加滤镜与制作动画添加滤镜与制作动画(6)创建动画。补间实例分散到各状态任务任务4 4添加滤镜与制作动画添加滤镜与制作动画(7)输出动画。图像预览导出设置任务任务4 4添加滤镜与制作动画添加滤镜与制作动画旋转文字的最终效果图任务任务4

5、 4添加滤镜与制作动画添加滤镜与制作动画(1)打开Fireworks CS6软件，新建一个白色背景的画布，画布大小设置为390 X 68像素，如图所示。(2)使用左边工具条中的文本工具在画布中输入文字，然后在下方“属性”面板中调整文本的大小和字体，并将消除锯齿级别设置为“强力消除锯齿”，如图所示。“新建文档”对话框文字设置任务任务4 4添加滤镜与制作动画添加滤镜与制作动画(3)在“状态”面板中将状态1拖到“新建/重制状态”按钮上，重复2次，共制作成3个状态，如图所示。一般是看闪底素材有多少个状态，然后就制作多少个状态。(4)编辑闪底素材。一般的闪底并不是想要的大小，有时会比字小，所以就需要编辑

6、一下。首先打开闪底素材，单击下方“属性”面板中的“画布大小”按钮，调整为闪字画布大小，如图所示。添加状态更改画布大小任务任务4 4添加滤镜与制作动画添加滤镜与制作动画(5)在“状态”面板中单击洋葱皮按钮，勾选“多状态编辑”，并将结束状态滑块拖到最后一个状态上，框选所有图像内容，如图所示。(6)框选中的是三个状态中的对象，使用移动工具将对象移到画布最左边，然后按Alt键并选择“移动复制对象至满画布”，闪底效果如图所示，然后保存并关闭闪底。多状态编辑闪底效果图任务任务4 4添加滤镜与制作动画添加滤镜与制作动画(7)回到闪字的制作画布中，选择菜单中的“文件”“导人”命令或按Ctrl+R组合键，导入刚

7、才修改并保存的闪底素材图，如图所示。导人图片任务任务4 4添加滤镜与制作动画添加滤镜与制作动画(8)导人后会看到动画元件布满了整个画布，如图所示。选中闪图，按Ctrl+X组合键剪切下来。任务任务4 4添加滤镜与制作动画添加滤镜与制作动画(9)单击状态1中的文字并将其选中，选择菜单中的“编辑”“粘贴于内部”命令，如图所示。将文字粘贴于内部任务任务4 4添加滤镜与制作动画添加滤镜与制作动画(10)这时闪字动画已经制作好，预览效果如图所示。闪字动画预览效果(11)闪字动画制作完成后，接下来就是将这个闪字图像保存为GIF动画格式。任务任务4 4添加滤镜与制作动画添加滤镜与制作动画(1)启动Firewo

8、rks CS6，在起始界面中选择“文件”一“新建”命令，打开“新建文档”对话框，设置画布宽度为300像素，画布高度为300像素，分辨率为72像素/英寸，画布底色为白色，然后单击“确定”按钮，出现编辑文档。(2)单击工具箱中的圆角矩形工具，在“属性”面板中选择不使用填充颜色，线条颜色为黑色，并选择“1像素柔化”类型，如图所示。在画布中某一点按下鼠标并拖动，画出一个矩形，使矩形的中心大致在图形文档的中心偏上方一点，然后调整圆角矩形的调节点，直至达到满意的效果。设置圆角矩形的属性任务任务4 4添加滤镜与制作动画添加滤镜与制作动画(3)在画布中的矩形框外单击鼠标，使鼠标没有选中任何图形。单击工具箱中的

9、圆角矩形工具，在画布上画出矩形，然后调整所画的圆角矩形的调节点，使两个圆角矩形在画布中的位置如图所示。(4)单击工具箱中的矩形工具，在画布上两个圆角矩形的下方画一个矩形，并使其上边与原来大矩形的下边重合。(5)单击工具箱中的画线工具，在步骤(4)中所画的矩形的下方画两条斜线，然后利用矩形工具在斜线下方画出作为底座的矩形，如图所示。两个圆角矩形的位置两个矩形和两条斜线的位置任务任务4 4添加滤镜与制作动画添加滤镜与制作动画(6)在屏幕的右下角画一个开关，其操作为:在工具箱中选择椭圆工具，画出小圆后选择渐变填充，填充的边缘选择放射状填充，从白色向蓝色过渡，从而增加立体效果，使小圆变成小球，如图所示

10、。(7)在“图层”面板中单击层1的名字，用工具箱中的矩形切片工具在小的圆角矩形内画出一个矩形切片，这时画布被分成很多部分，选中遮盖矩形的四框，如图所示。环形按钮的位置和效果创建切片区域任务任务4 4添加滤镜与制作动画添加滤镜与制作动画(8)在“属性”面板最左边的文本框中显示的是切片对象的缺省名称，这里把它修改为“monitor，切片导出设置选择“GIF接近网页128色”，如图所示。(9)同步骤(7)，在工具箱中选择切片工具，然后画出一个矩形切片，由左上角拖至右下角，使画出的矩形将小球覆盖，如图所示。在如图所示的“属性”面板中，切片属性设置切片绘制任务任务4 4添加滤镜与制作动画添加滤镜与制作动

11、画(10)选中覆盖小圆球的切片，此时切片中心会出现一个圆形手柄，在此处右击鼠标，会弹出如图所示的菜单，选择“添加交换图像行为”选项。(11)弹出“交换图像”对话框，选择要替代的切片是电视屏幕所在的切片monitor，并选择替代源为“图像文件”，然后单击文本框后面的浏览按钮，打开资源管理器，选择一个动画文件(用实例1中的动画)后单击“确定”按钮，如图所示。切片的动作设置替代图像设置任务任务4 4添加滤镜与制作动画添加滤镜与制作动画(12)按F12键预览，如果发现问题，则切换到Fireworks CS6的工作界面中进行调整，并重新预览。最后选择菜单中的“文件”“导出”命令将图片导出并保存，最终效果如图所示。最终效果END.