网页设计基础fw

1、Fireworks 8 Fireworks 8 的工作界面位图编辑矢量图编辑图像效果设置文本对象的编辑Fireworks HTML应用动画制作1一、 Fireworks 8 的工作界面Fireworks 8的工作界面 由“菜单栏”、“工具栏”、“工作区”、“工具箱”、“组合面板”和“属性面板（检查器）”六个部分组成。 Fireworks的工作界面工具栏菜单栏2一、 Fireworks 8 的工作界面Fireworks 8的文件操作 Fireworks的文件扩展名为.png。文件的基本操作包括：新建、打开和导入、保存和导出、关闭，以及将Fireworks 的文件转换为其他格式文件。新建文件：新建

2、文档/设置画布大小、分辩率、颜色/绘制与编辑图像导入（即插入）图像：文件/导入/选择位置与文件名/打开/拖动鼠标保存和导出文档：保存文档：将文档保存为PNG格式导出文档：可以生成图像的HTML文件、库文件、CSS层文件等文件转换：文件/图像预览/选择“选项”中的“格式” 、品质等/调整缩放比例（文件卡）和导出区域等/导出/导出3二、 位图编辑位图：由像素组成图形，也称为栅格图像。位图图像的特点：颜色基于像素：颜色变化比较丰富，能如实反映真实世界的面貌，并可以直接、快速地在浏览器中显示出来。图像品质与分辩率相关联，不可任意放大。常见的位图格式：BMP、GIF、JPG、TGAT等。位图处理工具：在

3、Fireworks 8的文档中，位图图像和矢量图像可以同时并存，但需要使用各自的工具进行编辑。使用位图图像工具，能够实现选取、裁剪、绘制、修饰位图图像的功能。 位图处理工具4二、 位图编辑位图工具使用实例截取图像：打开图像文件1.gif选择“多边形套索”工具，沿动物边缘单击鼠标成封闭区域，选中小狗选择菜单编辑复制新建一文档，粘贴保存文档羽化图像：打开图像文件2.jpg选择“椭圆”工具，在图像上拖出一区域选择菜单选择羽化，给定羽化值选择菜单修改蒙板显示所选选择符合画布保存文档5三、 矢量图编辑矢量图形：用路径 （线条和曲线）构成图像，它的特点：颜色基于线条和曲线不受分辩率影响，可以任意缩放、旋转

4、、扭曲等变换而不改变图像的品质。矢量图形的作用：主要用于插图、文字的可以自由缩放的徽标的制作。常见的矢量图格式：AI、FLA、SWF等。矢量图处理工具：钢笔工具变形工具图形工具6三、 矢量图编辑矢量工具使用实例绘制自由路径：使用钢笔工具绘制直线折线和曲线编辑路径：使用次选、自由变形工具调整路径图形变形控制：选择星形工具绘制一五角星，任意色填充增减角度（点）：12角度，向下=减角度、向上=增角度调整“圆度1”：拖向中心调整“半径1”：向中心拖半程调整“圆度2”、“半径2”，观察图形变化7三、 矢量图编辑“形状”面板(资源/形状) 可以将面板中的某个图形拖放到画布上，同样是通过调节对象上的每个控制

5、点（黄色）来改变对象的相关属性 。“形状”面板 8四、图像效果设置在Fireworks中，笔触、填充和效果是设计和处理图形图像的三个法宝。图形效果包括宽、高、填充、笔触、滤镜、不透明度等，可以通过属性面板设置。填充笔触效果9四、图像效果设置使用笔触 矢量绘图中路径是图形的“骨胳”结构，它决定了图形的形状。沿路径使用不同的画笔描边，将得到千变万化的线条效果，即笔触效果。例：选择螺旋形工具，无填充，绘制图形笔触类型： 颜色#0FF、20像素，非自然-牙膏，可加纹理螺旋度：向上增加到10使用填充填充是用单一颜色、渐变色、图案来填充路径内部。例：选择圆形工具，绘制圆形填充类型：渐变-放射状填充颜色：打

6、开填充调色板，选择右侧颜料箱，设置颜色为#F90选择指针工具，调整渐变控制点使用滤镜滤镜可以为选定对象设置特殊效果。例：浮雕效果绘制一大红五角星选中，滤镜-E-B-斜角宽70、高20、平滑度25、暗度510五、使用蒙板蒙板是一种遮罩工具，可以部分显示被遮罩的图像。图形蒙板新建文档，导入一图像选择椭圆工具，绘制多个图形选中作为蒙板的椭圆，用键选择多个图形选择菜单编辑剪切选择图像， 编辑粘贴为蒙板文本蒙板新建文档，导入一图像选择文本工具，输入文字选中文字选择菜单编辑剪切选择图像， 编辑粘贴为蒙板图像蒙板新建文档，导入二幅图像；或打开一幅图，导入一幅图选中作为蒙板的图像，选择菜单编辑剪切选择另一图像

7、，选择菜单编辑粘贴为蒙板11六、文本对象的编辑文本对象的编辑输入文本：使用“文本”工具设置文本属性：常规、字距、宽度、对齐、排列方向和消除锯齿等对文字应用笔触、填充和效果。例：制作特效文字新建文档，选择文本工具，输入文字选中文字，隶书、颜色为#900选择滤镜阴影和光晕投影：距离5、柔化3选择滤镜阴影和光晕纯色阴影：角度45、距离5、纯色金黄选择滤镜斜角和浮雕外斜角：宽度5、柔化3选择滤镜Eye-motion：方向45、145、40、4512六、文本对象的编辑文本对象的艺术化将文本附加到路径新建文档：500X500，黑色背景输入文字：白色、黑体、26px绘制路径：圆形、白色选中圆和文本选择菜单文

8、本附加到路径调整文字偏移：文本偏移=-175调整文字方向：菜单文本方向将文本转换为路径新建文档：500X500，黑色背景输入文字：红色、黑体、46px选中文本选择菜单文本转换为路径选择部分选择工具，拖动文字上的路径节点，改变字符形状。13七、Fireworks HTML应用网页动态按钮制作与应用（例9）制作按钮图像：绘制图形编辑按钮：按钮的四种状态导出按钮：HTML和图像在网页中使用按钮：插入图像对象“Fireworks HTML”创建网页导航条（例10）同上制作动态按钮，并将其“重制”为多个编辑导航条：组合多个按钮修改各按钮：修改按钮文字和状态颜色导出导航条在网页中应用导航条添加导航条弹出菜单（例11）在上述导航条中选中一按钮添加弹出菜单：修改弹出菜单，编辑F12预览导出导航条在网页中应用导航条14八、动画制作动画制作的方法有四种用