网页制作基础知识

第10章 网页制作基础知识Fireworks界面的认识及其工具面板和属性的使用Flash界面的认识及工具面板、时间轴和属性的使用熟练掌握Fireworks工具面板的使用熟练掌握Fireworks制作简单的图像了解图像文件的导出与优化方法熟练掌握Flash工具面板的使用掌握使用Flash创建运动和变形动画的方法掌握Dreamweaver与Fireworks和Flash的调用方法使用Fireworks制作广告词使用Fireworks对图像进行优化使用Flash制作运动动画和变形动画10.1 图像的制作与优化对于网页来说，图像和动画的精美漂亮是网页制作成功的关键，Macromedia公司除了提供Dreamweaver这个专业的网页制作工具外，还提供了图像制作工具Fireworks和动画制作工具Flash。10.1.1 Fireworks 8.0简介Fireworks是集创建、编辑和优化图像为一体的软件，它不仅可以创建、编辑位图和矢量图，而且可以优化图像。运行Fireworks 8.0以后看到操作界面，其顶部是菜单栏，包含了该软件中大部分的命令选项。左侧是工具箱，其中的按钮用来对图形、图像、颜色和文本等对象进行编辑处理；中间是“起始页”对话框；右侧是功能面板的组合；底部是“属性”面板，用来设置当前所编辑对象的各项属性参数，如图101所示。功能面板组合工具箱属性面板菜单栏起始页图101 Fireworks 8.0操作界面10.1.2 制作漂亮的广告词使用Fireworks制作漂亮的广告文字“保护水资源，生命真永远。”。1单击2新建文档画布参数3单击打开Fireworks 8.0的操作界面，在“起始页”对话框中单击“Fireworks文件”选项，打开“新建文档”对话框，或执行【文件】【新建】菜单命令打开“新建文档”对话框，按照图102所示的内容进行设置。图102 新建文档单击“确定”按钮后，打开新建文档窗口，如图103所示。新建文件图103 新建文档窗口在Fireworks 8.0操作界面的左侧工具箱中单击“文本”工具按钮，在新建文档的窗口中单击鼠标左键，输入如图104所示的文本。4“文本”工具输入文字内容图104 在文档中输入文本选中输入文字，在“属性”面板的“字体”下拉列表中选择“华文新魏”，在“大小”选项文本框内输入“62”。在“颜色”调色板中选择黑色“#000000”，并且单击字体加粗按钮，其他选项为默认设置即可，如图105所示。5设置字体6设置字体大小7设置颜色调色板8字体加粗图105 设置文字属性9样式面板10选择样式选中画布上的文本，在操作界面右侧的“资源”/“样式”面板中，单击其中1个样式，例如Style 25，如图106所示。图106 设置文字属性在“属性”面板中单击“滤镜”右边的按钮，在弹出的菜单中选择【斜角和浮雕】【凸起浮雕】命令，如图107所示。12选择滤镜效果11单击图107 设置浮雕效果接着在底部弹出的面板中，调整各个文本框的参数，设置效果如图108所示。13调整参数图108 调整参数值按【Enter】键，给文本添加浮雕效果，如图109所示。图109 添加浮雕效果执行菜单栏中的【文件】【图像预览】命令，打开“图像预览”对话框。在“图像预览”对话框的“格式”下拉列表中选择“JPEG”，在“保存的设置”下拉列表中选择“JPEG-较高品质”选项。单击按钮，打开“导出”对话框，选择保存文件的文件夹，然后为文件命名，单击按钮，图像文件就保存了，如图1010所示。14选择格式15选择保存设置类型16单击17输入文件名18单击图1010 图像预览参数设置及导出本节主要介绍了如何使用文本、文本样式和图像导出等知识，大家要善于利用文本“属性”面板中的“滤镜”效果，利用它可以设置各种特殊效果。在导出图像时，“GIF”“GIF动画”和“JPEG”这3种格式是常用的，要根据不同的图像来选择，一般透明图像选择GIF格式，照片选择JPEG格式。制作“欢迎参观我的主页”文字，并添加浮雕效果。10.1.3 Fireworks中的图像优化Fireworks除了可以制作文字和图像外，还可以对已有的图像进行优化，使图像在不影响视觉效果的前提下，体积变小，更有利于网络上传和下载。在制作网站时对主页广告条进行优化，观察图像优化后的效果，如图1011所示。图1011 优化后的效果打开Fireworks 8.0的操作界面，执行【文件】【打开】菜单命令。1选择菜单命令2选择图像3单击在“打开”对话框中，选中要优化的图像，单击“打开”按钮，如图1012所示。图1012 选择目标图像在工作窗口中打开图像，执行【窗口】【优化】菜单命令或快捷键【F6】，打开“优化”面板，如图1013所示。4选择菜单命令5优化面板图1013 打开“优化”面板在“优化”面板中单击第1个下拉列表框，在下拉列表中选择“GIF接近网页256色”。在“优化”面板中有许多参数值，单击各个设置栏的下拉列表项目，可以调整优化效果，如图1014所示。6选择优化类型7设置优化参数图1014 图像优化设置执行【文件】【导出】菜单命令，打开“导出”对话框，在“导出”对话框中输入文件名，单击“导出”命令将图像导出，如图1015所示。8选择菜单命令9输入导出文件名10单击图1015 导出优化图像打开导出文件的文件夹，可以发现优化后的图片比优化前的图片容量要小得多，可见优化效果对制作网页上的图像是非常重要的。优化1张自己的相片，上传到自己的个人主页上。10.1.4 Fireworks与Dreamweaver互动应用在Dreamweaver操作中，随时可以打开Fireworks，对网页中的图像进行编辑和优化时，选中Dreamweaver窗口中的图像，然后在“属性”面板中单击“编辑”右边按钮，即可打开Fireworks，如图1016所示。2单击1选中图1016 单击按钮打开Fireworks软件Fireworks窗口中可以打开在Dreamweaver被选中