网页设计与制作(第四版).ppt

任务1认识FireworksCS6二、FIREWORKSCS6的主要面板123任务2制作网站LOGO中的各类字体立体字体金属字体透视文字特效环形字体印章文字立体字效果效果尽显的金属文字透视阴影效果图环形文字效果图印章效果图任务3制作网站LOGO中的各类图形制作圆角按钮制作心形光晕图制作奥林匹克五环旗示范按钮光晕效果心形图奥运五环效果图任务4添加滤镜与制作动画一、制作旋转文字动画(1)建立新文件。启动FireworksCS6，按Ctrl+N组合键新建一个工作区，设置工作区的宽度为400，高度为300,颜色为蓝色，其余为默认值。(2)输人文本。首先单击文本工具，设置参数如下:字体为华文行楷，大小为20,颜色为红色(#FF0000)，其余为默认值。然后在文本框中输入文字，单击“确定”按钮。用箭头工具选择并移动文本到工作区稍微靠上的位置，接着在滤镜中选择“阴影和光晕”一“光晕”命令，设置具体参数如下:宽度为2，柔化度为1，颜色为黄色(#FFFF00)，透明度为6500，如图所示。此时文本效果如图所示。发光属性设置文本效果任务6使用CSS修饰和美化网页一、创建CSS样式定义.w1的CSS规则任务6使用CSS修饰和美化网页二、用CSS美化网页(一)文本样式的设置设置CSS的文本样式将CSS样式应用于标签应用CSS样式后的文字效果任务6使用CSS修饰和美化网页二、用CSS美化网页(二)背景样式的设置WI的背景设置任务6使用CSS修饰和美化网页二、用CSS美化网页(三)区块样式的设置在“.WI的CSS规则定义”对话框的左侧选择“区块”，可以在右边区域中设置CSS的区块样式。任务6使用CSS修饰和美化网页二、用CSS美化网页(四)方框样式的设置前面已经设置过图像的大小、图像水平和垂直方向上的空白区域、图像是否有文字环绕效果等，方框样式则进一步完善和丰富了这些设置。在“.WI的CSS规则定义”对话框的左侧选择“方框”，可以在右边区域中设置CSS的方框样式。任务6使用CSS修饰和美化网页二、用CSS美化网页(五)边框样式的设置设置边框样式可以给对象添加边框，设置边框的颜色、粗细、样式。任务6使用CSS修饰和美化网页二、用CSS美化网页(五)边框样式的设置应用表格边框样式后的效果任务6使用CSS修饰和美化网页二、用CSS美化网页(六)列表样式的设置CSS中有关列表的设置丰富了列表的外观。在“.WI的CSS规则定义”对话框的左侧选择“列表”，可以在右边区域中设置CSS的列表样式。任务6使用CSS修饰和美化网页三、CSS样式表的其他操作(一)编辑CSS样式任务6使用CSS修饰和美化网页三、CSS样式表的其他操作(二)应用CSS自定义样式利用快捷菜单设置CSS样式任务6使用CSS修饰和美化网页三、CSS样式表的其他操作(三)附加样式表“链接外部样式表”对话框任务6使用CSS修饰和美化网页四、CSS样式表制作实例(一)用CSS样式表的滤镜制作模糊文字效果w2的CSS规则设置CSS扩展的模糊设置模糊文字效果任务6使用CSS修饰和美化网页四、CSS样式表制作实例(二)超链接的CSS样式原始导航条带链接的导航条新建CSS规则任务6使用CSS修饰和美化网页四、CSS样式表制作实例(二)超链接的CSS样式a:link的CSS规则定义”对话框应用超链接样式后的导航效果任务7基于行为与Spry特效制作网页一、了解行为任务7基于行为与Spry特效制作网页二、应用行为(一)“行为”面板“行为”面板任务7基于行为与Spry特效制作网页二、应用行为(二)创建行为弹出公告选择对象添加动作调整事件任务7基于行为与Spry特效制作网页三、行为的应用(一)状态栏文本设置实例“设置状态栏文本”对话框状态栏文本设置预览效果任务7基于行为与Spry特效制作网页三、行为的应用(二)制作图像显示/渐隐效果选择“显示/渐隐”命令显示/渐隐设置选择行为事件提示复制相关文件任务7基于行为与Spry特效制作网页三、行为的应用(三)制作图像左右晃动效果选择“晃动”命令晃动设置选择行为事件提示复制相关文件任务7基于行为与Spry特效制作网页三、行为的应用(四)制作跟随鼠标信息提示添加Spry下具提示构件Spry工具提示文本设置Spry工具提示属性设置提示复制相关文件Spry工具提示效果任务8使用模板快速制作网页一、创建模板任务8使用模板快速制作网页二、