《网页制作技术（第二版）-电子教案-许莉 08.任务八 制作网页图形》由会员分享，可在线阅读，更多相关《网页制作技术（第二版）-电子教案-许莉 08.任务八 制作网页图形（44页珍藏版）》请在金锄头文库上搜索。
1、网页制作技术（第二版）,主编 许莉 中国水利水电出版社,网页设计与制作,任务八 制作网页图形,学习目标 了解Fireworks CS4的功能、特点以及工作界面 掌握矢量图形的绘制方法 掌握矢量图形的笔触、填充的设置方法 掌握图层的使用方法 掌握文本应用的方法,任务八 制作网页图形,目录： 知识1 Fireworks CS4的功能和特点 知识2 Fireworks CS4的工作界面 知识3 Fireworks CS4文档的基本操作 知识4 矢量图形的绘制 知识5 对象的处理 知识6 文本的创建 任务1 绘制几何图形 任务2 绘制公司标志 任务3 制作新浪网标志,任务八 制作网页图形,知识1 Fi
2、reworks CS4的功能和特点,认识Fireworks CS4 Fireworks CS4是一种网页图形设计软件，它与Dreamweaver CS4、Flash CS4高度集成，使网页设计时更加方便快捷。只要将Dreamweaver CS4的默认图形编辑器设为Fireworks CS4，那么在Fireworks CS4中修改的文件将在Dreamweaver CS4中得到即时的更新。使用Fireworks CS4不仅可以创建和编辑矢量图和位图，处理各种网页图像，还可以制作风格各异的LOGO、BANNER和导航栏，同时，还可以切割图形，创建热区，直接输出Web页，并在内部嵌入Web页常用的动画
3、、JavaScript脚本等。,知识1 Fireworks CS4的功能和特点,Fireworks CS4的新增功能 Fireworks CS4与CS3版本相比，可以说是一次真正意义上的升级，主要表现在以下方面： 1）性能的升级 2）PDF 导出新增功能 3）可自定义、重用的资产增强功 4）全新用户界面新增功 5）增强的字体处理新增功能 6）CSS 导出新增功能 7）动态样式 8）工作区改进增强功能,知识2 Fireworks CS4的工作界面,Fireworks CS4启动后会出现一个“开始页”，如图所示。在“开始页”中可以新建和打开Fireworks文档，并能快速访问最近打开项目、Fire
4、works教程、新增功能和资源。,知识2 Fireworks CS4的工作界面,选择“新建Fireworks文档（PNG）”后，会弹出“新建文档”对话框，如图所示。在此可以选择画布的宽度、高度、分辨率以及颜色。,知识2 Fireworks CS4的工作界面,点击确定之后，进入Fireworks CS4的工作界面，如图所示。Fireworks CS4的工作界面主要由 “菜单栏”、“工具栏”、“工具箱”、“编辑窗口”、“属性面板”和“浮动面板”六个部分组成。,知识3 Fireworks CS4文档的基本操作,创建、打开和保存文档 1）新建文档 选择菜单【文件】|【新建】命令，弹出“新建文档”对话框
5、，设置画布的宽度、高度、分辨率以及画布颜色，单击确定即可。 2）打开文档 选择菜单【文件】|【打开】命令，弹出“打开”对话框，如图所示，选择需要打开的文件，单击打开即可。,知识3 Fireworks CS4文档的基本操作,3）保存文档 当文档进行了编辑之后，可以选择菜单【文件】|【保存】或【文件】|【另存为】命令，在对话框中输入需要的路径和名称，即可保存文档，文件默认的扩展名为.png。 如果需要保存为其他格式的文件（如JPEG或GIF格式），可以选择菜单【文件】|【导出】命令，选择保存类型，并设置文件的完整名称即可。,知识3 Fireworks CS4文档的基本操作,修改文档属性 1）修改画
6、布大小 选择菜单【修改】|【画布】|【画布大小】，或者在属性栏点击按钮“画布大小”，会弹出“画布大小”对话框，如图所示。在“宽度”和“高度”文本框中输入新的尺寸。 单击“锚定”按钮以指定 Fireworks 将在画布的哪一边添加或删除，然后单击“确定”。 默认情况下选择中心锚定，这表示对画布大小的更改将在所有边上进行。,知识3 Fireworks CS4文档的基本操作,2）改变画布颜色 选择菜单【修改】|【画布】|【画布颜色】，如图所示。选择“白色”、“透明”或“自定义”。如果选择“自定义”，则在“样本”弹出窗口中单击一种颜色。,知识3 Fireworks CS4文档的基本操作,3）旋转画布
7、当导入的图像倒置或侧放时，可以旋转画布。在【修改】|【画布】菜单中有三种旋转方式：旋转 180 度，顺时针旋转90度以及逆时针旋转90度。 4）修剪画布和符合画布 如果文档在画布内容周围有多余的空间，则可以选择【修改】|【画布】|【修剪画布】，也可以选择【修改】|【画布】|【符合画布】。如果文档内容超过了画布大小，则需要选择【修改】|【画布】|【符合画布】，或单击属性栏的“符合画布”按钮，使画布与文档大小一致。,知识3 Fireworks CS4文档的基本操作,5）改变图像大小 选择【修改】|【画布】|【图像大小】，“图像大小”对话框将打开，如图所示。 在此可以设置图像大小以及分辨率。,知识3
8、 Fireworks CS4文档的基本操作,使用布局工具 为了精确定位和排版对象，Fireworks CS4提供了标尺、辅助线和网格等布局工具。 标尺主要用于测量、组织和计划作品的布局。选择【视图】|【标尺】命令即可显示或隐藏标尺。 网格主要用于精确地放置对象。选择【视图】|【网格】|【显示网格】命令即可显示或隐藏标尺。 辅助线是用来帮助放置和对齐对象的辅助绘制工具。它可以用于标记文档的重要部分，如边距、文档中心点和精确的工作区域。创建水平或垂直辅助线：单击并从相应的标尺拖动，在画布上定位辅助线并释放鼠标按钮。要删除辅助线，可以将辅助线从画布拖走。 Fireworks CS4还增加了智能辅助线
9、工具，当拖曳或移动对象时，智能辅助线能自动在对象边缘产生虚线来帮助对齐。选择【视图】|【智能辅助线】|【显示智能辅助线】以及【对齐智能辅助线】，就可以显示并对齐智能辅助线。,知识4 矢量图形的绘制,关于矢量图形 矢量图形是由数学方式描述的曲线组成，其基本组成单位是锚点和路径。编辑矢量图形时，修改的是描述矢量图形的线条的属性，因此，矢量图形与分辨率无关，无论放大缩小多少倍，都不会改变其外观品质。,知识4 矢量图形的绘制,绘制基本形状 1）绘制直线 方法1：使用直线工具。 选择直线工具，在画布上按下鼠标左键，拖动鼠标到合适位置释放鼠标。如果需要绘制水平、垂直或45的线条，可以在拖动鼠标时按住Shi
10、ft键。 方法2：使用钢笔工具 选择钢笔工具，在画布上按下鼠标左键，移动鼠标到合适位置单击鼠标。如图所示。如果只绘制一条直线，在终点处双击鼠标；如果绘制折线，继续移动鼠标到终点再双击鼠标；如果绘制封闭路径，当把鼠标放到起始点处时，鼠标指针右下角会显示一个圆形，单击鼠标即可。,知识4 矢量图形的绘制,2）绘制曲线 方法1：使用钢笔工具 选择钢笔工具，在画布上按下鼠标左键，移动鼠标到合适位置单击并拖动鼠标。如图所示。在绘制的过程中，可以临时切换到部分选定工具更改点的位置和曲线的形状。双击最后一个点可以结束路径。 方法2：使用矢量路径工具 选择矢量路径工具，拖动鼠标即可绘制。如图所示。,知识4 矢量
11、图形的绘制,3）绘制简单几何图形 选中矩形工具，单击右下角的三角形，会列出很多几何图形工具。选择所需要的几何图形，在画布上按下并拖动鼠标即可，如图所示。如果要绘制正的图形，如正方形或正圆，需要在拖动鼠标的同时按住“Shift”键；如果要以特定中心点绘制图形，首先将指针放在预期的中心点，然后按下“Alt”键并拖动鼠标即可。如果要以特定中心点绘制正的图形，就需要按下“Shift+Alt”组合键。,知识4 矢量图形的绘制,路径的操作 1）路径的接合与拆分 路径的接合是指将两个或两个以上的路径连接起来成为一个路径。路径的拆分就是把已经连接起来的路径拆分为单独的路径。 选择两个或多个路径，然后选择【修改
12、】|【组合路径】|【接合】，即可完成路径的接合操作，如图所示。矢量对象接合后会清除对象共同的填充部分，并且使用同一种颜色填充接合之后的对象。选择【修改】|【组合路径】|【拆分】，即可把接合的路径拆分。如图所示。,知识4 矢量图形的绘制,2）路径的联合 路径的联合与接合不同，不仅将多个对象合并为一个对象，而且将其中重合的部分完全融合，只剩下最外部的轮廓。所得到的路径具有最先放置的对象的笔触和填充属性。 选择两个或多个路径，然后选择【修改】|【组合路径】|【联合】，即可完成路径的联合操作。如图所示。 3）路径的交集 路径的交集是指将两个或多个对象的相交部分的外部轮廓保留下来，生成一个新的对象。所得
13、到的路径具有最先放置的对象的笔触和填充属性。 选择两个或多个路径，然后选择【修改】|【组合路径】|【交集】。如图所示。,知识4 矢量图形的绘制,2）路径的打孔 路径的打孔是指用上层对象的轮廓删除下层对象的内容，生成一个新的对象。选择两个路径，然后选择【修改】|【组合路径】|【打孔】。如图所示。 3）路径的裁切 路径的裁切与路径的打孔是相反操作，是用上层对象的轮廓修剪下层对象的内容，得到的路径具有最先放置的对象的笔触和填充属性。如图所示。,知识4 矢量图形的绘制,对象的变换 1）缩放 2）旋转 3）倾斜 4）扭曲 5）翻转 6）数值变形,知识5 对象的处理,笔触的设置 所谓笔触，是指图形的描边，
14、它附着在路径上。当使用矢量绘图工具绘制图形后，在属性面板中，可以设置笔触的颜色、笔尖大小、描边种类、边缘柔化、纹理和纹理总量。笔触颜色还可以在“工具箱”面板和“混色器”面板中进行修改。 在矢量工具面板中选择星形，在画布上绘制一个五角星，然后在属性面板中设置笔触颜色为蓝色，笔尖大小为12，描边种类为“非自然”中的的“粘性异己颜料”，边缘柔化值为30，纹理为DNA，纹理总量为50%。如图所示。,知识5 对象的处理,填充的设置 所谓填充，是指图形的内容，它处于路径的内部。在Fireworks CS4中填充的方式主要有实心填充、渐变填充和图案填充三种。 1）实心填充 实心填充就是填充对象内部的纯色。如
15、果要使填充显得更加生动，可以添加纹理效果。在矢量工具面板中选择钢笔工具，在画布上绘制一个心星，然后在属性面板中设置填充颜色为桃红色，填充种类为“实心”，边缘为“实边”，纹理为DNA，纹理总量为50%。如图所示。,知识5 对象的处理,2）渐变填充 渐变填充将多种颜色混合在一起产生渐变的效果。渐变色彩一般用于产生光的效果。Fireworks提供了12种渐变类别和13种颜色组合方案。 下面用渐变填充制作球体效果。 步骤1：绘制正圆，在属性面板中选择填充类型为“放射状”渐变，并调整颜色为从白到红，如图所示。,知识5 对象的处理,步骤2：使用指针工具调整渐变的位置，如图所示。 步骤3：在正圆的右下方绘制
16、一个小椭圆，填充为黑色，并设置填充边缘“羽化”，调整羽化量，形成如图所示的效果。,知识5 对象的处理,3）图案填充 图案填充就是将位图图形填充到对象内部。Fireworks提供了多种填充图案，如布纹、 叶片和木纹等等。选择图案填充后，可以通过拖动图案上的手柄调整图案的大小和方向。 在矢量工具面板中选择星形，在画布上绘制一个五角星，然后在属性面板中设置填充颜色类别为“图案”中的“油画3”，边缘为“消除锯齿”，纹理为DNA，纹理总量为0%。如图所示。,知识5 对象的处理,图层的使用 图层就是一幅图像中包含的一些离散的平面，如果将所有的平面叠放在一起，并从顶部俯视，看到的就是实际图像的效果。一个文档可以包含许多个层，而每一层又可以包含很多对象。在 Fireworks CS4中，“层”面板列出了每一层中包含的对象。,知识5 对象的处理,添加图层有三种方法：选择菜单命令【编辑】|【插入】|【层】；在“层”面板的菜单中选择“新建层”命令；
