Dreamweaver8第10章.pptVIP

第10章 网页制作三剑客的综合应用 （时间：2次课，4学时） 第10章 网页制作三剑客的综合应用 教学提示：本章将利用一个综合实例，制作一个包含通过Fireworks 8处理图像、使用Flash 8制作动画和应用Dreamweaver 8制作的综合网站，使得读者在掌握前面内容后进一步明确网站网页的制作方法和流程。 教学目标：Macromedia公司出品的被人们称为“网页制作三剑客”的网页设计系列软件Dreamweaver、Fireworks和Flash之间可以无缝集成，能够有效地解决网络带宽问题，是设计动画网页和网络流媒体的最佳解决方案。 第10章 网页制作三剑客的综合应用 10.1 用Fireworks 8制作和优化图像 10.2 用Flash 8制作动画 10.3 用Dreamweaver 8构建站点 10.4 上 机 实 战 10.1 用Fireworks 8制作和优化图像 10.1.1 认识Fireworks 8的工作环境 10.1.2 制作网站徽标 10.1.3 制作按钮图像 10.1 用Fireworks 8制作和优化图像 在网站网页制作流程中，用户在设计好网站的内容和基本结构后，需要根据网站内容和基本结构设计的要求，准备网站制作使用的各种素材。图像在网页中是必不可少的，在这一节中我们将通过实例介绍网站网页中的各种图像编辑。 10.1.1 认识Fireworks 8的工作环境 Fireworks是一个专业化的Web图像设计程序。它是第一个专门针对Web开发的图像设计软件，目前已经得到广泛的应用。 使用Fireworks既可以编辑Web图像，又可以编辑Web动画。Fireworks的一个很大优势就在于它将位图处理和矢量处理合二为一。换句话说，它既是一个优秀的位图图像处理程序，又是一个矢量图像处理程序，这使它的应用范围更加广泛。 在安装Fireworks MX后，它会自动在Windows的【开始】菜单中创建程序组，选择【开始】|【程序】| Macromedia | Macromedia Fireworks 8命令，即可启动Fireworks 8。Fireworks 8的程序界面如图10.1所示。 Fireworks 8是一个多文档编辑程序，它可以同时打开多个图像进行编辑，而且每个图像都处于一个图像窗口中。一个Fireworks 8程序窗口包含以下几个部分。 10.1.1 认识Fireworks 8的工作环境 10.1.1 认识Fireworks 8的工作环境 1. 标题栏 标题栏上显示当前正在编辑的文档名称。如果当前打开了多个文档，则显示最上面处于可编辑状态的文档名称。Fireworks 8的默认文件扩展名为.png的图像文档。 2. 菜单栏 几乎所有的工作都可以通过菜单来完成，尽管利用【浮动】面板可以加快操作速度，但是有时候为了节省屏幕空间，会将【浮动】面板关闭，这时利用菜单就显得尤为重要。 3. 状态栏 Fireworks 8的状态栏位于窗口底部，包括几个功能区，分别用于显示当前选中对象的类型、当前选中工具的操作提示信息以及用于播放动画帧的控制按钮。 10.1.1 认识Fireworks 8的工作环境 4. 工具箱 工具箱中包含了选择工具、绘制工具以及各种编辑工具。其中还包括放大工具、热区工具、切片工具以及笔画和填充颜色控制工具等。利用工具箱，用户可以选择需要的图像编辑和设计工具，大多数的图像编辑操作都需要通过工具箱中的工具完成。 5. 文档编辑窗口 文档编辑窗口显示Fireworks 8正在编辑的图像内容。文档编辑窗口包含4个选项卡，利用这些选项卡，用户可以在原始状态、预览状态、2窗口状态和4窗口状态之间进行 切换。 6. 可停靠浮动面板 可停靠浮动面板是一个工具集合的控制框架，它仿佛一个船坞，可以将各种浮动面板放置在其中，从而组合成为选项卡的形式，以节省屏幕空间。必要时还可以将这些浮动面板从中剥离，使它成为独立的浮动面板窗口。 10.1.2 制作网站徽标 制作网站徽标的具体操作如下。 (1) 启动Fireworks，选择【文件】|【打开】命令。 (2) 在出现的打开文件对话框中选择需要处理的图像，如图10.2所示。 (3) 选择【窗口】|【属性】命令打开【属性】面板，然后单击工具箱中的【矩形】按钮，在【矩形】工具的【属性】面板中打开如图10.3所示的笔触【属性】面板。 (4) 在【属性】面板中设置笔触效果如下：【笔触颜色】为“金黄色”(＃FFCC66)；【笔尖宽度】为“72”【笔触类型】为“毛毡笔尖”中的“加亮标记”；【边缘】选项设置边缘柔和度为“100”；其他设置默认。则画出矩形后的效果如图10.4所示，使得图像感觉更加柔和、真实。 10.1.2 制作网站