全套课件·《Fireworks.ppt

1、预备知识v具备一定的计算机技能，能够比较熟练地操作计算机。v有一定的网络基础知识，了解互联网应用。v对网页设计软件有初步的了解。v能够利用Photoshop制作和编辑位图。vFireworks CS4：网页网页图形图像处理软件v是一款用来设计网页图形的多功能应用程序。可以创建和编辑位图和矢量图像、设计网页效果（如变换图像和弹出菜单）、修剪和优化图形以减小其文件大小。解决了图形设计人员和网站管理员所面临的主要问题。v网页图像要求：简洁、明快、信息量小（适合网络传输）v传统平面设计软件：专注于图像质量，没有考虑网络要求，与网页设计集成度低。vMacromedia Macromedia 家族三剑客：

2、家族三剑客：vDreamweaverDreamweaver vFlashFlash vFireworksFireworks v完整版v简化版：去除其它组件v文件窗口v工具面板v属性面板v浮动面板v隐藏或显示所有面板，按Tab或F4键v管理文件窗口 v停放和取消停放浮动面板 v移动、添加和删除面板v处理面板组 v堆叠浮动的面板 v调整面板大小 v处理折叠为图标的面板 v通过将面板的当前大小和位置存储为命名的工作区，即使移动或关闭了面板，也可以恢复该工作区。已存储的工作区的名称出现在应用程序栏上的工作区切换器中。v工作区切换器中选择“保存当前”v6个工具组v工具箱面板的拖动、关闭和打开v某些工具右

3、下角小黑三角的作用v上下文关联的动态面板v属性面板的折叠、拖动、关闭和打开v优化面板：寻找颜色、压缩和品质的适当组合v层面板：组织文档结构v公用库面板：显示公用库文件夹的内容 v页面面板：当前文件中的页面且包含用于操作页面的选项 v状态面板：创建动画v历史记录面板：快速撤销操作；重复操作，合成命令（批处理）v自动形状面板v样式面板v文档库面板：图形、按钮、动画元件库vURL面板：简化多次输入同样的超链接地址v混色器面板和样本面板：类同与颜色工具组v信息面板v行为面板：热点、切片对鼠标的响应v查找面板：查找和替换元素v对齐面板v自动形状属性面板v调色板面板v图像编辑面板v路径面板v特殊字符面板v

4、元件属性面板v文件窗口选项卡 优化设置：网页外观和显示速度的平衡。v显示比例和动画控制按钮v创建文件的过程就相当于画画的时候提供一张白纸。“可以开始作画了”vPNG格式：fireworks默认的文件格式。v文件/新建v分辨率：输出图片时单位长度包含的象素值v文件/打开v可以打开除PNG外的其它图形格式文件v注意：尽管可以打开各种图形格式，但是在fireworks的内部操作中，只使用PNG格式编辑图像。向向Fireworks文件中插入对象文件中插入对象 v从其它应用程序复制的对象粘贴到Fireworks中时会把该对象放置在活动文件的中心 v在将图像文件导入到活动Fireworks文件的当前层上时

5、，Fireworks将保持导入图像的比例不变。v“文件”“导入”v“保存”和“另存为”命令v“导出”命令v“导出”与优化面板的设置v新建文件难免有些属性的设置与后期制作存在偏差v修改/画布/画布大小v属性面板/画布大小v修改/画布/画布颜色v属性面板/画布颜色指示器v修改/画布/图像大小v属性面板/图像大小v旋转180v顺时针90v逆时针90v符合画布：将画布调整为恰好容纳所有对象v裁剪画布：裁剪超出画布边界的对象 v布局工具帮助进行绘图，虽然它们在图像上可见，但并不是图像的组成部分。v视图/标尺v以象素为单位v水平辅助线/垂直辅助线v视图/辅助线v切片辅助线v视图/网格v显示网格/对齐网格智

6、能辅助线v是临时的对齐辅助线 v视图/智能辅助线v文档缩小和放大比例66400v文档缩放的3种方法v指定区域缩放v手形工具拖动图片v符合全部v3种界面视图v定制个性化工作环境v编辑/首选参数v文档选项/启动选项v最大撤消次数 v插值法v颜色默认值v工作区自动折叠图标面板 v修剪时删除对象:选择“修改”“画布”“画布大小”时永久删除选定内容的定界框之外的像素或对象v转换为选取框时删除路径v刷子大小绘图光标v精确光标v关闭“隐藏边缘”：使“隐藏边缘”命令失效v显示钢笔预览v显示实心点v鼠标滑过时高亮显示 v显示填充手柄 v拖动时预览 v选择距离v拖动时预览v9切片缩放选项 v颜色框 v显示/对齐/

7、锁定v对齐距离 v网格设置 v字顶距/基线调整v以英文显示字体名称 v字体预览大小 v最近使用过的字体数量 v默认字体 v常规v自定义文件转换设置v从外部应用程序编辑时v从外部应用程序优化时v插件参数提供了对来自外部源的其它 Photoshop 插件、纹理文件和图案文件的访问。vPhotoshop 插件出现在 Fireworks 的“滤镜”菜单中和“属性”面板的“添加效果”菜单中。以 PNG、JPEG 和 GIF 文件格式储存的纹理或图案以选项的形式出现在“属性”面板的“图案”和“纹理”弹出菜单中。对象：文本、位图、矢量图等“指针”工具：选定整个路径“选择后方对象”工具：选择后面被遮盖的对象“

8、部分选定”工具“选取框”工具“椭圆选取框”工具“套索”工具“多边形套索”工具“魔术棒”工具 用鼠标托曳对象 Shift键和alt键的作用使用方向键移动对象（精确定位）Shift键的作用使用属性面板移动对象复制对象：编辑/复制、编辑/粘贴重制对象:编辑/重制克隆对象：编辑/克隆删除对象:delete键变形：缩放、倾斜、9切片缩放、扭曲、旋转、翻转和数值变形 工具面板变形工具调节手柄、中心点工具箱“缩放”工具修改变形缩放工具箱“倾斜”工具修改变形倾斜工具箱“扭曲”工具修改变形扭曲产生不规则变形任何变形工具 Shift键保证间隔15度旋转修改变形水平翻转垂直翻转 属性面板或信息面板的高度和宽度文本框

9、 修改变形数值变形缩放矢量和位图对象不扭曲其几何形状 一幅作品有很多对象组成，这些对象需要有机地组合在一起堆叠：垂直于屏幕方向上的前后次序先创建的对象位于后创建的对象后面改变堆叠顺序：修改排列；在层面板上移动对象q修改对齐：8条命令q对齐面板 对齐 分配：类似于“均分高度”和“均分宽度”命令,只是基准分别为底边、垂直中间和顶边或左侧、水平中间和右侧。匹配大小：以所有对象中最大尺寸对象的尺寸为基准。间距：同“均分高度”和“均分宽度”命令，使间距相等。q“位置”按钮：以画布4条边为基准对象的组合是为了方便操作修改组合（ctrlg）修改取消组合（ctrlshiftg）部分选定和指针相对组合对象的区别

10、笔触：附着在路径上填充：路径内部在属性面板里设置颜色、笔尖大小、描边种类、边缘柔化、纹理名称、纹理总量路径封闭与否都存在填充区域在属性面板设置颜色、填充类别、填充边缘、羽化总量、纹理名称、纹理总量、透明纹理两种方法用位图图案填充对象除了已经提供的位图图案以外，可以在“其他”选项中添加新的位图图案使用渐变颜色填充对象三个步骤自行编辑渐变色彩填充类型设置填充边缘设置填充纹理透明填充制作月历 制作一个夸张幽默的卡通表情 位图和矢量图位图由象素构成，“马赛克”现象矢量图由点和路径（曲线或直线）构成“矢量”工具面板绘制直线：按住鼠标左键；shift键的作用矩形正方形圆角矩形椭圆正圆多边形星形L L 形形

11、：直边角形状。圆角矩形圆角矩形：带有圆角的矩形。度量工具度量工具：以像素或英寸为单位来表示关键设计元素尺寸的普通箭线。斜切矩形斜切矩形：带有切角的矩形。斜面矩形斜面矩形：带有倒角的矩形（边角在矩形内部成圆形）。星形星形：具有3到25个点的星形。智能多边形智能多边形：有 3 到 25 条边的正多边形。箭头箭头:任意比例的普通箭头，以及直线或弯曲线。箭头线箭头线：可以使用细直的箭头线快速得到常用箭头（只需单击该线的任一端即可）。螺旋形螺旋形：开口式螺旋形。连接线形连接线形：三段连接线形，例如那些用来连接流程图或组织图的元素的线条。面圈形面圈形：实心圆环。饼形饼形：饼图。窗口/自动形状就是路径构成的

12、矢量图形贝赛尔曲线（一条曲线由两组锚点及其点手柄构成）锚点点手柄：由方向点和方向线组成路径就是贝赛尔曲线的集合开放路径：起点与终点不重合封闭路径：起点与终点重合复合路径：多个路径组成锚点分类：曲线点：路径在此处不会突然变向 角点：路径在此处形状急剧改变o 曲线角点o 直线角点o 组合角点 钢笔工具 绘制直线路径 绘制曲线路径（曲线点需要鼠标左键按住再拖动；角点只要单击。完成后双击最后一个锚点结束。如果曲线封闭则最后单击起点。）在绘制的过程中，可以临时切换到“部分选定”工具以更改点的位置和曲线的形状。在使用“钢笔”工具拖动点或点手柄时，请按 Ctrl 键。曲线点转换成角点角点转换成曲线点增加锚点

13、删除锚点“部分选定”工具：选择、移动和修改矢量路径上的点或者属于组的对象。拖动锚点拖动方向线，改变角度或者长度Alt键对拖动方向线的作用q利用工具绘制复杂的矢量图形q“矢量路径”工具Shift键绘制水平或垂直线自由绘制矢量图如果需要，通过从矢量路径工具的“属性”检查器的“精度”弹出菜单中选择数字来更改路径的精度级别。选择的数字越高，出现在绘制的路径上的点数就越多。q“重绘路径”工具：重新绘制已有的某段路径q用“部分选定”或“指针”工具选取路径后再操作q“刀子”工具矢量图转换为位图矢量图转换为位图 修改平面化所选”修改将路径转换为选取框q修改组合路径q接合q拆分q联合q交集q打孔q裁切q将多个路

14、径对象合并成单个路径对象。可连接两个开口路径的端点以创建单个闭合路径，或者结合多个路径来创建一个复合路径。q将包含分散路径的复合路径拆分成多条独立的路径q若要将所选的闭合路径合并为一个封闭整个原始路径区域的路径：q得到的新路径具有位于最下面的对象的笔触和填充属性。q注意联合和接合的区别q若要创建一个包围所有选定闭合路径共有的区域的闭合路径q得到的新路径具有位于最下面的对象的笔触和填充属性。q使用选中的最前面的路径轮廓将其后面被选中的所有对象穿一个孔q打孔命令的相反操作绘制心形图案绘制别克车标 绘制甲壳虫 绘制八卦 绘制标志 绘制打印机 第四章 使用文本q拥有桌面出版软件的文本特性q将文本和图形

15、完美地结合在一起输入文本q“文本”工具q在文本框中输入文本步骤（P79底行）q退出文本编辑状态后，再次进入文本编辑状态的两种方法（指针或者文本工具）设置文本格式q在属性面板设置q注意文本选择的范围（P80）q字体、字号、粗体/斜体/下划线q文本方向 水平方向从左至右 垂直方向从右至左q对齐方式（水平或垂直方向）设置文本格式q字间距：文字之间的距离q字顶距：相邻行之间的距离q文字水平缩放：改变字的宽度设置文本格式q平滑文本边缘，消除锯齿q应用笔触、填充和滤镜 笔触颜色(针对整体)将文本附加到路径q可以使文本的排列跟随路径，富于变化q被文本附加的路径会暂时失去笔触、填充和滤镜属性。双击路径编辑的是

16、文字q附加到路径/从路径分离/方向/倒转方向q项目实例4-1将文字转换为路径q文字变成矢量路径，可以用矢量工具编辑它。q注意：文字一旦转换为路径，就不能再作为文本编辑q文本转换为路径q项目实例4-2实例制作第7章 创建网页动画 在fireworks中可以创建gif格式的动画，包括广告条、logo和卡通等。动画基础：视觉暂留、状态、连续播放状态面板的操作 制作一幅最简单的动画 层面板和状态面板的关系 添加状态新建/重制按钮右上角按钮鼠标右键弹出菜单 移动状态将一状态中的选定对象移动到另一状态（状态面板每状态后的小方块），复制用ALT 复制状态选中要复制的状态拖动到“新建/重制状态”按钮“重制状态

17、”菜单选项对象在状态间复制：“复制到状态”菜单选项 删除状态 使层跨状态共享：制作动画背景层 在状态中共享层网页层对象对所有状态都跨状态共享 洋葱皮效果查看在当前状态前后的状态项目实例71的例子 设定状态延时 在回放时显示或隐藏状态（状态延时栏“导出时包括”选项）设定动画播放次数（导出动画以后生效）制作动画的基本方法 打开文件制作动画（以动画打开/优化面板导出设置为gif动画）导入现有的gif动画来进行编辑（导入/打开）制作逐状态动画 分散到状态生成动画（先在一状态中绘制物体运动的多个对象，再分散到每一状态）元件 元件是可以重复使用的图形对象，存放在库面板中。实例是元件在文档中的具体引用。对元

18、件的修改可以导致所有引用的实例的修改。创建元件从所选对象创建元件从头开始创建元件 编辑元件 编辑元件实例：断开元件链接不断开元件链接可以修改部分实例属性：项目实例54 导入和导出元件 创建和编辑动画元件 修改项目实例7-5 在库面板元件列表栏选中要应用的元件拖动到文档窗口生成实例。利用元件和实例制作动画制作补间动画 绘画者只绘制关键状态，关键状态之间的状态由计算机完成。项目实例74使对象成为动画 通过将对象转换为动画元件来实现。礼花动画导出动画 优化面板/“gif动画”文件/导出 文件/导出向导制作动画实例 项目实例7-6 逐状态制作动画：吃豆子第8章 切片、热点和行为 切片作用：1、切割图像

19、，加快网页载入速度。2、交互性：创建响应鼠标的事件区域。3、更新网页部分内容：仅更换切片部分图片，不做无谓的全盘改动。使用切片工具：项目实例8-1 使用多边形切片工具：项目实例8-2不宜过多使用，影响网页载入速度。隐藏切片 设置切片属性：改变切片颜色 给切片设置超链接：必须写全（http:/）切片的优化和导出 优化切片：每个切片单独设置优化选项。图像的热点 热点作用：给图片区域增加超链接功能。三种热点工具：项目实例8-3 隐藏热点 设置热点属性：热点颜色和超链接使用行为 行为是Fireworks的内置JavaScript脚本，由事件和动作组成 事件：w onMouseOverw onMouse

20、Outw onClickw onLoad 动作：翻滚、轮替、下拉菜单等行为面板 行为建立在切片和热点之上。某一个切片或热点的行为可以在行为面板中显示。切片/热点和行为面板一一对应。创建简单变换图像行为 项目实例8-4 有且只有帧。第帧是默认状态图形，第帧是上滚状态图形。创建轮替效果添加交换图像行为 项目实例85 在添加交换图像行为中，热点只能作为源，不能作为目标。切片既可以作为源也可以作为目标。前面讲到的简单交换图像是简化的交换图像行为，是切片的自身翻转。设置状态栏文本 鼠标指向某个链接，浏览器状态栏显示设置的文本。第9章 导航按钮和弹出菜单 按钮是网页中常见的元素，具有强大的功能。（系统按钮

21、：编辑 库 按钮）在Fireworks中，按钮作为元件的一个种类出现。导航栏是 一组按钮 弹出菜单利用按钮制作按钮元件 三种新建按钮元件的方法 编辑按钮，按钮的4种状态 项目实例9-1编辑按钮实例 更改按钮实例的文字 更改按钮实例的链接 按钮实例与元件分离后失去按钮作用 按钮元件编辑时有4帧，元件实例在画布上只有1帧。系统按钮 公用库/按钮创建导航栏 项目实例92创建弹出菜单 项目实例9-3第10章 优化、导出和集成 优化图像：图像大小和图像质量的折衷。导出图像步骤：先优化再导出 Png和jpg/gif图像大小比较 例10-1图像的优化和导出 文件导出格式主要的两种图形格式：Gif：最高支持2

22、56色，无损压缩，色彩简单文件小。包含透明区域，可以做按钮等不遮挡背景的元素。Jpg/Jpeg：支持全彩色，有损压缩。使用优化面板 GIF图像的优化设置色版：导出图形的背景色。调色版：文件可用颜色列表。颜色：设置色阶，导出文件中颜色数目。失真：以损失质量来进一步压缩图像设置图像部分颜色透明抖动：模拟当前调色板中没有的颜色。设置透明区域：gif图形使用索引色透明，打开或关闭特定颜色值的像素。例10-2:在预览窗口看到效果JPG图像优化设置 例10-3品质：决定图像大小平滑：越大模糊增加，文件越小。选择性品质：图像不同区域设置不同品质。（修改/选择性JPEG/将所选保存为JPEG蒙版）使用预设的优

23、化设置导出图像 图像网络特性（链接和JAVA脚本等）导出图像产生副本，不会修改原图。导出向导选择导出文件类型 仅图片：导出一幅图片 网页元素（按钮）：html和图像 层到文件/状态到文件：单独保存为文件。切片的优化和导出 设置切片原则：有图像区域就要放置切片。优化切片：每个切片单独设置优化选项。切片的导出 例10-5 选项P154创建幻灯片 创建幻灯片放映 齿轮的绘画用了“自动形状”的“齿轮”。对自转的动画实例应用了“纯色阴影”滤镜。对所有元件实例进行了组合，然后添加“内侧阴影”、“投影”和“纯色阴影”滤镜，对实例的组合应用这些滤镜，看上去就有小星星从大星星里融出的感觉。第11章 制作综合网页

24、效果图 原则：先打后小，由简入繁 页面：PNG文件可以包含多个页面 页面 状态 层 的分级关系编辑页面 新建页面 复制页面 删除页面 编辑页面画布：设置每个页面的单独属性。使用主页 这里的“主页”与我们经常听到的主页的区别：可以在其它页面中共享的元素放置在其中，有点类似于背景层的概念。设置为主页/重制主页 链接到主页：在主页创建前已有的页面将继承主页的元素，以后随主页自动更新。制作综合网页效果图实例 创建页面 创建公用元素 在多个页面间共享公用元素 向各个页面添加独特的元素 使用链接模拟用户导航 导出交互式网页首页的基本框架制作网页 绘制网站编制LOGO 制作导航和弹出菜单 制作用户登录和导航 制作主要内容 制作页脚 拼装网页整体 导出网页