网页制作技术（第二版）许莉 08.任务八 制作网页图形

《网页制作技术（第二版）许莉 08.任务八 制作网页图形》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、网页制作技术（第二版）主编许莉中国水利水电出版社网页设计与制作任务八制作网页图形学习目标了解FireworksCS4的功能、特点以及工作界面掌握矢量图形的绘制方法掌握矢量图形的笔触、填充的设置方法掌握图层的使用方法掌握文本应用的方法任务八制作网页图形目录：知识1FireworksCS4的功能和特点知识2FireworksCS4的工作界面知识3FireworksCS4文档的基本操作知识4矢量图形的绘制知识5对象的处理知识6文本的创建任务1绘制几何图形任务2绘制公司标志任务3制作新浪网标志任务八制作网页图形知识1FireworksCS4的功能和特点认识FireworksCS4Firewor

2、ksCS4是一种网页图形设计软件，它与DreamweaverCS4、FlashCS4高度集成，使网页设计时更加方便快捷。只要将DreamweaverCS4的默认图形编辑器设为FireworksCS4，那么在FireworksCS4中修改的文件将在DreamweaverCS4中得到即时的更新。使用FireworksCS4不仅可以创建和编辑矢量图和位图，处理各种网页图像，还可以制作风格各异的LOGO、BANNER和导航栏，同时，还可以切割图形，创建热区，直接输出Web页，并在内部嵌入Web页常用的动画、JavaScript脚本等。知识1FireworksCS4的功能和特点Fireworks

3、CS4的新增功能FireworksCS4与CS3版本相比，可以说是一次真正意义上的升级，主要表现在以下方面：1）性能的升级2）PDF导出新增功能3）可自定义、重用的资产增强功4）全新用户界面新增功5）增强的字体处理新增功能6）CSS导出新增功能7）动态样式8）工作区改进增强功能知识2FireworksCS4的工作界面FireworksCS4启动后会出现一个“开始页”，如图所示。在“开始页”中可以新建和打开Fireworks文档，并能快速访问最近打开项目、Fireworks教程、新增功能和资源。知识2FireworksCS4的工作界面选择“新建Fireworks文档（PNG）”后，会弹出

4、“新建文档”对话框，如图所示。在此可以选择画布的宽度、高度、分辨率以及颜色。知识2FireworksCS4的工作界面点击确定之后，进入FireworksCS4的工作界面，如图所示。FireworksCS4的工作界面主要由“菜单栏”、“工具栏”、“工具箱”、“编辑窗口”、“属性面板”和“浮动面板”六个部分组成。知识3FireworksCS4文档的基本操作创建、打开和保存文档1）新建文档选择菜单【文件】

5、【新建】命令，弹出“新建文档”对话框，设置画布的宽度、高度、分辨率以及画布颜色，单击确定即可。2）打开文档选择菜单【文件】

6、【打开】命令，弹出“打开”对话框，如图所示，选择需要打开的文件，

7、单击打开即可。知识3FireworksCS4文档的基本操作3）保存文档当文档进行了编辑之后，可以选择菜单【文件】

8、【保存】或【文件】

9、【另存为】命令，在对话框中输入需要的路径和名称，即可保存文档，文件默认的扩展名为.png。如果需要保存为其他格式的文件（如JPEG或GIF格式），可以选择菜单【文件】

10、【导出】命令，选择保存类型，并设置文件的完整名称即可。知识3FireworksCS4文档的基本操作修改文档属性1）修改画布大小选择菜单【修改】

11、【画布】

12、【画布大小】，或者在属性栏点击按钮“画布大小”，会弹出“画布大小”对话框，如图所示。在“宽度”和“高度”文本框中输入新的尺寸。单击“锚定

13、”按钮以指定Fireworks将在画布的哪一边添加或删除，然后单击“确定”。默认情况下选择中心锚定，这表示对画布大小的更改将在所有边上进行。知识3FireworksCS4文档的基本操作2）改变画布颜色选择菜单【修改】

14、【画布】

15、【画布颜色】，如图所示。选择“白色”、“透明”或“自定义”。如果选择“自定义”，则在“样本”弹出窗口中单击一种颜色。知识3FireworksCS4文档的基本操作3）旋转画布当导入的图像倒置或侧放时，可以旋转画布。在【修改】

16、【画布】菜单中有三种旋转方式：旋转180度，顺时针旋转90度以及逆时针旋转90度。4）修剪画布和符合画布如果文档在画布内容周围有多余的空间，

17、则可以选择【修改】

18、【画布】

19、【修剪画布】，也可以选择【修改】

20、【画布】

21、【符合画布】。如果文档内容超过了画布大小，则需要选择【修改】

22、【画布】

23、【符合画布】，或单击属性栏的“符合画布”按钮，使画布与文档大小一致。知识3FireworksCS4文档的基本操作5）改变图像大小选择【修改】

24、【画布】

25、【图像大小】，“图像大小”对话框将打开，如图所示。在此可以设置图像大小以及分辨率。知识3FireworksCS4文档的基本操作使用布局工具为了精确定位