Dreamweaver_8_网页设计培训教程_第10章ppt课件.ppt

《Dreamweaver_8_网页设计培训教程_第10章ppt课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第10章网页制作三剑客的综合应用（时间：2次课，4学时）第10章网页制作三剑客的综合应用教学提示：本章将利用一个综合实例，制作一个包含通过Fireworks8处理图像、使用Flash8制作动画和应用Dreamweaver8制作的综合网站，使得读者在掌握前面内容后进一步明确网站网页的制作方法和流程。教学目标：Macromedia公司出品的被人们称为“网页制作三剑客”的网页设计系列软件Dreamweaver、Fireworks和Flash之间可以无缝集成，能够有效地解决网络带宽问题，是设计动画网页和网络流媒体的

2、最佳解决方案。第10章网页制作三剑客的综合应用10.1用Fireworks8制作和优化图像10.2用Flash8制作动画10.3用Dreamweaver8构建站点10.4上机实战10.1用Fireworks8制作和优化图像10.1.1认识Fireworks8的工作环境10.1.2制作网站徽标10.1.3制作按钮图像10.1用Fireworks8制作和优化图像在网站网页制作流程中，用户在设计好网站的内容和基本结构后，需要根据网站内容和基本结构设计的要求，准备网站制作使用的各种素材。图像在网页中是必不可少的，在

3、这一节中我们将通过实例介绍网站网页中的各种图像编辑。10.1.1认识Fireworks8的工作环境Fireworks是一个专业化的Web图像设计程序。它是第一个专门针对Web开发的图像设计软件，目前已经得到广泛的应用。使用Fireworks既可以编辑Web图像，又可以编辑Web动画。Fireworks的一个很大优势就在于它将位图处理和矢量处理合二为一。换句话说，它既是一个优秀的位图图像处理程序，又是一个矢量图像处理程序，这使它的应用范围更加广泛。在安装FireworksMX后，它会自动在Windows的【开

4、始】菜单中创建程序组，选择【开始】

5、【程序】

6、Macromedia

7、MacromediaFireworks8命令，即可启动Fireworks8。Fireworks8的程序界面如图10.1所示。Fireworks8是一个多文档编辑程序，它可以同时打开多个图像进行编辑，而且每个图像都处于一个图像窗口中。一个Fireworks8程序窗口包含以下几个部分。10.1.1认识Fireworks8的工作环境图10.1Fireworks8程序操作窗口10.1.1认识Fireworks8的工作环境1.标题栏标题栏上显示当前正

8、在编辑的文档名称。如果当前打开了多个文档，则显示最上面处于可编辑状态的文档名称。Fireworks8的默认文件扩展名为.png的图像文档。2.菜单栏几乎所有的工作都可以通过菜单来完成，尽管利用【浮动】面板可以加快操作速度，但是有时候为了节省屏幕空间，会将【浮动】面板关闭，这时利用菜单就显得尤为重要。3.状态栏Fireworks8的状态栏位于窗口底部，包括几个功能区，分别用于显示当前选中对象的类型、当前选中工具的操作提示信息以及用于播放动画帧的控制按钮。10.1.1认识Fireworks8的工作环境4.工具箱

9、工具箱中包含了选择工具、绘制工具以及各种编辑工具。其中还包括放大工具、热区工具、切片工具以及笔画和填充颜色控制工具等。利用工具箱，用户可以选择需要的图像编辑和设计工具，大多数的图像编辑操作都需要通过工具箱中的工具完成。5.文档编辑窗口文档编辑窗口显示Fireworks8正在编辑的图像内容。文档编辑窗口包含4个选项卡，利用这些选项卡，用户可以在原始状态、预览状态、2窗口状态和4窗口状态之间进行切换。6.可停靠浮动面板可停靠浮动面板是一个工具集合的控制框架，它仿佛一个船坞，可以将各种浮动面板放置在其中，从而组合

10、成为选项卡的形式，以节省屏幕空间。必要时还可以将这些浮动面板从中剥离，使它成为独立的浮动面板窗口。10.1.2制作网站徽标制作网站徽标的具体操作如下。(1)启动Fireworks，选择【文件】

11、【打开】命令。(2)在出现的打开文件对话框中选择需要处理的图像，如图10.2所示。(3)选择【窗口】

12、【属性】命令打开【属性】面板，然后单击工具箱中的【矩形】按钮，在【矩形】工具的【属性】面板中打开如图10.3所示的笔触【属性】面板。(4)在【属性】面板中设置笔触效果如下：【笔触颜色】为“金黄色”(＃FFCC66)；

13、【笔尖宽度】为“72”【笔触类型】为“毛毡笔尖”中的“加亮标记”；【边缘】选项设置边缘柔和度为“100”；其他设置默认。则画出矩形后的效果如图10.4所示，使得图像感觉更加柔和、真实。10.1.2制作网站徽标图10.2原始图像10.1.2制作网站徽标图10.3笔触【属性】面板10.1.2制作网站徽标图10.4进行笔触效果处理10.1.2制作网站徽标(5)单击【矢量】工具箱中的【文本】按钮，和以前版本不同，Fire