Fireworks-CS4网页图像设计与案例课件汇总完整版ppt全套课件最全教学教程整本书电子教案.ppt

《Fireworks-CS4网页图像设计与案例课件汇总完整版ppt全套课件最全教学教程整本书电子教案.ppt》由会员分享，可在线阅读，更多相关《Fireworks-CS4网页图像设计与案例课件汇总完整版ppt全套课件最全教学教程整本书电子教案.ppt（150页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

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

2、）v传统平面设计软件：专注于图像质量，没有考虑网络要求，与网页设计集成度低。Fireworks 产品家族产品家族vMacromedia Macromedia 家族三剑客：家族三剑客：vDreamweaverDreamweavervFlashFlash vFireworksFireworksFireworks CS4的安装和配置要求的安装和配置要求v完整版v简化版：去除其它组件Fireworks的工作界面的工作界面v文件窗口v工具面板v属性面板v浮动面板管理窗口和面板v隐藏或显示所有面板，按Tab或F4键v管理文件窗口 v停放和取消停放浮动面板 v移动、添加和删除面板v处理面板组 v堆叠浮动的面

3、板 v调整面板大小 v处理折叠为图标的面板 存储并切换工作区 v通过将面板的当前大小和位置存储为命名的工作区，即使移动或关闭了面板，也可以恢复该工作区。已存储的工作区的名称出现在应用程序栏上的工作区切换器中。v工作区切换器中选择“保存当前”工具面板工具面板v6个工具组v工具箱面板的拖动、关闭和打开v某些工具右下角小黑三角的作用属性面板属性面板v上下文关联的动态面板v属性面板的折叠、拖动、关闭和打开浮动面板浮动面板v优化面板：寻找颜色、压缩和品质的适当组合v层面板：组织文档结构v公用库面板：显示公用库文件夹的内容 v页面面板：当前文件中的页面且包含用于操作页面的选项 v状态面板：创建动画浮动面板

4、浮动面板v历史记录面板：快速撤销操作；重复操作，合成命令（批处理）v自动形状面板v样式面板v文档库面板：图形、按钮、动画元件库vURL面板：简化多次输入同样的超链接地址浮动面板浮动面板v混色器面板和样本面板：类同与颜色工具组v信息面板v行为面板：热点、切片对鼠标的响应v查找面板：查找和替换元素v对齐面板浮动面板浮动面板v自动形状属性面板v调色板面板v图像编辑面板v路径面板v特殊字符面板v元件属性面板文件窗口文件窗口v文件窗口选项卡 优化设置：网页外观和显示速度的平衡。v显示比例和动画控制按钮文件管理文件管理v创建文件的过程就相当于画画的时候提供一张白纸。“可以开始作画了”vPNG格式：fire

5、works默认的文件格式。新建文件新建文件v文件/新建v分辨率：输出图片时单位长度包含的象素值打开文件打开文件v文件/打开v可以打开除PNG外的其它图形格式文件v注意：尽管可以打开各种图形格式，但是在fireworks的内部操作中，只使用PNG格式编辑图像。向向Fireworks文件中插入对象文件中插入对象 v从其它应用程序复制的对象粘贴到Fireworks中时会把该对象放置在活动文件的中心 导入图像文件v在将图像文件导入到活动Fireworks文件的当前层上时，Fireworks将保持导入图像的比例不变。v“文件”“导入”保存和导出文档保存和导出文档v“保存”和“另存为”命令v“导出”命令v

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

7、辅助线v视图/辅助线v切片辅助线网格网格v视图/网格v显示网格/对齐网格智能辅助线v是临时的对齐辅助线 v视图/智能辅助线调整视图调整视图v文档缩小和放大比例66400v文档缩放的3种方法v指定区域缩放v手形工具拖动图片v符合全部v3种界面视图设置工作参数设置工作参数v定制个性化工作环境v编辑/首选参数“常规常规”参数参数v文档选项/启动选项v最大撤消次数 v插值法v颜色默认值v工作区自动折叠图标面板“编辑编辑”参数参数v修剪时删除对象:选择“修改”“画布”“画布大小”时永久删除选定内容的定界框之外的像素或对象v转换为选取框时删除路径v刷子大小绘图光标v精确光标“编辑编辑”参数参数v关闭“隐藏

8、边缘”：使“隐藏边缘”命令失效v显示钢笔预览v显示实心点v鼠标滑过时高亮显示“编辑编辑”参数参数v显示填充手柄 v拖动时预览 v选择距离v拖动时预览v9切片缩放选项“辅助线和网格辅助线和网格”参数参数 v颜色框 v显示/对齐/锁定v对齐距离 v网格设置“文字文字”参数参数v字顶距/基线调整v以英文显示字体名称 v字体预览大小 v最近使用过的字体数量 v默认字体 “photoshop导入导入/打开打开”参数参数v常规v自定义文件转换设置“启动并编辑启动并编辑”参数参数v从外部应用程序编辑时v从外部应用程序优化时“插件插件”参数参数功能扩展功能扩展v插件参数提供了对来自外部源的其它 Photosh

9、op 插件、纹理文件和图案文件的访问。vPhotoshop 插件出现在 Fireworks 的“滤镜”菜单中和“属性”面板的“添加效果”菜单中。以 PNG、JPEG 和 GIF 文件格式储存的纹理或图案以选项的形式出现在“属性”面板的“图案”和“纹理”弹出菜单中。第二章第二章 对象操作和颜色应用对象操作和颜色应用 对象：文本、位图、矢量图等选择矢量图形对象选择矢量图形对象“指针”工具：选定整个路径“选择后方对象”工具：选择后面被遮盖的对象“部分选定”工具选择位图对象选择位图对象“选取框”工具“椭圆选取框”工具“套索”工具“多边形套索”工具“魔术棒”工具 移动对象移动对象用鼠标托曳对象 Shif

10、t键和alt键的作用使用方向键移动对象（精确定位）Shift键的作用使用属性面板移动对象复制和删除对象复制和删除对象复制对象：编辑/复制、编辑/粘贴重制对象:编辑/重制克隆对象：编辑/克隆删除对象:delete键对象的变形对象的变形变形：缩放、倾斜、9切片缩放、扭曲、旋转、翻转和数值变形 工具面板变形工具调节手柄、中心点缩放对象缩放对象工具箱“缩放”工具修改变形缩放倾斜对象倾斜对象工具箱“倾斜”工具修改变形倾斜扭曲对象扭曲对象工具箱“扭曲”工具修改变形扭曲产生不规则变形旋转对象旋转对象任何变形工具 Shift键保证间隔15度旋转翻转对象翻转对象修改变形水平翻转垂直翻转其他变形方法其他变形方法属

11、性面板或信息面板的高度和宽度文本框修改变形数值变形9 9切片缩放切片缩放 缩放矢量和位图对象不扭曲其几何形状 对象的组织对象的组织一幅作品有很多对象组成，这些对象需要有机地组合在一起调整对象的次序调整对象的次序堆叠：垂直于屏幕方向上的前后次序先创建的对象位于后创建的对象后面改变堆叠顺序：修改排列；在层面板上移动对象对象的对齐对象的对齐q修改对齐：8条命令q对齐面板对齐分配：类似于“均分高度”和“均分宽度”命令,只是基准分别为底边、垂直中间和顶边或左侧、水平中间和右侧。匹配大小：以所有对象中最大尺寸对象的尺寸为基准。间距：同“均分高度”和“均分宽度”命令，使间距相等。对象的对齐对象的对齐q“位置

12、”按钮：以画布4条边为基准组合或取消组合对象组合或取消组合对象 对象的组合是为了方便操作修改组合（ctrlg）修改取消组合（ctrlshiftg）部分选定和指针相对组合对象的区别设置笔触和填充设置笔触和填充笔触：附着在路径上填充：路径内部设置笔触设置笔触在属性面板里设置颜色、笔尖大小、描边种类、边缘柔化、纹理名称、纹理总量设置填充设置填充路径封闭与否都存在填充区域在属性面板设置颜色、填充类别、填充边缘、羽化总量、纹理名称、纹理总量、透明纹理使用单色填充使用单色填充两种方法图案填充图案填充用位图图案填充对象除了已经提供的位图图案以外，可以在“其他”选项中添加新的位图图案渐变填充渐变填充使用渐变颜

13、色填充对象三个步骤自行编辑渐变色彩填充类型设置填充设置填充设置填充边缘设置填充纹理透明填充绘制图形实例绘制图形实例制作月历 制作一个夸张幽默的卡通表情 第三章第三章 绘制矢量路径绘制矢量路径位图和矢量图位图由象素构成，“马赛克”现象矢量图由点和路径（曲线或直线）构成绘制基本图形绘制基本图形“矢量”工具面板绘制直线：按住鼠标左键；shift键的作用绘制基本图形绘制基本图形矩形正方形圆角矩形椭圆正圆多边形星形绘制扩展图形绘制扩展图形L L 形形：直边角形状。圆角矩形圆角矩形：带有圆角的矩形。度量工具度量工具：以像素或英寸为单位来表示关键设计元素尺寸的普通箭线。斜切矩形斜切矩形：带有切角的矩形。斜面

14、矩形斜面矩形：带有倒角的矩形（边角在矩形内部成圆形）。星形星形：具有3到25个点的星形。绘制扩展图形绘制扩展图形智能多边形智能多边形：有 3 到 25 条边的正多边形。箭头箭头:任意比例的普通箭头，以及直线或弯曲线。箭头线箭头线：可以使用细直的箭头线快速得到常用箭头（只需单击该线的任一端即可）。螺旋形螺旋形：开口式螺旋形。连接线形连接线形：三段连接线形，例如那些用来连接流程图或组织图的元素的线条。面圈形面圈形：实心圆环。饼形饼形：饼图。使用其它扩展图形使用其它扩展图形 窗口/自动形状绘制不规则图形绘制不规则图形就是路径构成的矢量图形关于路径关于路径贝赛尔曲线（一条曲线由两组锚点及其点手柄构成）

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

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

17、转换为位图 修改平面化所选”修改将路径转换为选取框路径间的运算路径间的运算q修改组合路径q接合q拆分q联合q交集q打孔q裁切接合路径接合路径q将多个路径对象合并成单个路径对象。可连接两个开口路径的端点以创建单个闭合路径，或者结合多个路径来创建一个复合路径。拆分路径拆分路径q将包含分散路径的复合路径拆分成多条独立的路径路径的联合路径的联合q若要将所选的闭合路径合并为一个封闭整个原始路径区域的路径：q得到的新路径具有位于最下面的对象的笔触和填充属性。q注意联合和接合的区别路径的交集路径的交集q若要创建一个包围所有选定闭合路径共有的区域的闭合路径q得到的新路径具有位于最下面的对象的笔触和填充属性。路

18、径的打孔路径的打孔q使用选中的最前面的路径轮廓将其后面被选中的所有对象穿一个孔路径的裁切路径的裁切q打孔命令的相反操作绘制图形实例绘制图形实例绘制心形图案绘制别克车标 绘制甲壳虫 绘制八卦 绘制标志 绘制打印机 第四章 使用文本q拥有桌面出版软件的文本特性q将文本和图形完美地结合在一起输入文本q“文本”工具q在文本框中输入文本步骤（P79底行）q退出文本编辑状态后，再次进入文本编辑状态的两种方法（指针或者文本工具）设置文本格式q在属性面板设置q注意文本选择的范围（P80）q字体、字号、粗体/斜体/下划线q文本方向水平方向从左至右垂直方向从右至左q对齐方式（水平或垂直方向）设置文本格式q字间距：

19、文字之间的距离q字顶距：相邻行之间的距离q文字水平缩放：改变字的宽度设置文本格式q平滑文本边缘，消除锯齿q应用笔触、填充和滤镜 笔触颜色(针对整体)将文本附加到路径q可以使文本的排列跟随路径，富于变化q被文本附加的路径会暂时失去笔触、填充和滤镜属性。双击路径编辑的是文字q附加到路径/从路径分离/方向/倒转方向q项目实例4-1将文字转换为路径q文字变成矢量路径，可以用矢量工具编辑它。q注意：文字一旦转换为路径，就不能再作为文本编辑q文本转换为路径q项目实例4-2实例制作第7章 创建网页动画在fireworks中可以创建gif格式的动画，包括广告条、logo和卡通等。动画基础：视觉暂留、状态、连续

20、播放状态面板的操作制作一幅最简单的动画层面板和状态面板的关系添加状态新建/重制按钮右上角按钮鼠标右键弹出菜单移动状态将一状态中的选定对象移动到另一状态（状态面板每状态后的小方块），复制用ALT复制状态选中要复制的状态拖动到“新建/重制状态”按钮“重制状态”菜单选项对象在状态间复制：“复制到状态”菜单选项删除状态使层跨状态共享：制作动画背景层 在状态中共享层网页层对象对所有状态都跨状态共享洋葱皮效果查看在当前状态前后的状态项目实例71的例子设定状态延时在回放时显示或隐藏状态（状态延时栏“导出时包括”选项）设定动画播放次数（导出动画以后生效）制作动画的基本方法打开文件制作动画（以动画打开/优化面板

21、导出设置为gif动画）导入现有的gif动画来进行编辑（导入/打开）制作逐状态动画分散到状态生成动画（先在一状态中绘制物体运动的多个对象，再分散到每一状态）元件元件是可以重复使用的图形对象，存放在库面板中。实例是元件在文档中的具体引用。对元件的修改可以导致所有引用的实例的修改。创建元件从所选对象创建元件从头开始创建元件编辑元件编辑元件实例：断开元件链接不断开元件链接可以修改部分实例属性：项目实例54导入和导出元件利用元件和实例制作动画创建和编辑动画元件 修改项目实例7-5在库面板元件列表栏选中要应用的元件拖动到文档窗口生成实例。制作补间动画绘画者只绘制关键状态，关键状态之间的状态由计算机完成。项

22、目实例74使对象成为动画通过将对象转换为动画元件来实现。礼花动画导出动画优化面板/“gif动画”文件/导出文件/导出向导制作动画实例项目实例7-6逐状态制作动画：吃豆子第8章 切片、热点和行为切片作用：1、切割图像，加快网页载入速度。2、交互性：创建响应鼠标的事件区域。3、更新网页部分内容：仅更换切片部分图片，不做无谓的全盘改动。使用切片工具：项目实例8-1使用多边形切片工具：项目实例8-2不宜过多使用，影响网页载入速度。隐藏切片设置切片属性：改变切片颜色 给切片设置超链接：必须写全（http:/）切片的优化和导出优化切片：每个切片单独设置优化选项。图像的热点热点作用：给图片区域增加超链接功能

23、。三种热点工具：项目实例8-3隐藏热点设置热点属性：热点颜色和超链接使用行为行为是Fireworks的内置JavaScript脚本，由事件和动作组成事件：wonMouseOverwonMouseOutwonClickwonLoad动作：翻滚、轮替、下拉菜单等行为面板行为建立在切片和热点之上。某一个切片或热点的行为可以在行为面板中显示。切片/热点和行为面板一一对应。创建简单变换图像行为项目实例8-4有且只有帧。第帧是默认状态图形，第帧是上滚状态图形。创建轮替效果添加交换图像行为项目实例85在添加交换图像行为中，热点只能作为源，不能作为目标。切片既可以作为源也可以作为目标。前面讲到的简单交换图像是

24、简化的交换图像行为，是切片的自身翻转。设置状态栏文本鼠标指向某个链接，浏览器状态栏显示设置的文本。第9章 导航按钮和弹出菜单按钮是网页中常见的元素，具有强大的功能。（系统按钮：编辑 库 按钮）在Fireworks中，按钮作为元件的一个种类出现。导航栏是 一组按钮弹出菜单利用按钮制作按钮元件三种新建按钮元件的方法编辑按钮，按钮的4种状态项目实例9-1编辑按钮实例更改按钮实例的文字更改按钮实例的链接按钮实例与元件分离后失去按钮作用按钮元件编辑时有4帧，元件实例在画布上只有1帧。系统按钮公用库/按钮创建导航栏项目实例92创建弹出菜单项目实例9-3第10章 优化、导出和集成优化图像：图像大小和图像质量

25、的折衷。导出图像步骤：先优化再导出Png和jpg/gif图像大小比较 例10-1图像的优化和导出文件导出格式主要的两种图形格式：Gif：最高支持256色，无损压缩，色彩简单文件小。包含透明区域，可以做按钮等不遮挡背景的元素。Jpg/Jpeg：支持全彩色，有损压缩。使用优化面板GIF图像的优化设置色版：导出图形的背景色。调色版：文件可用颜色列表。颜色：设置色阶，导出文件中颜色数目。失真：以损失质量来进一步压缩图像设置图像部分颜色透明抖动：模拟当前调色板中没有的颜色。设置透明区域：gif图形使用索引色透明，打开或关闭特定颜色值的像素。例10-2:在预览窗口看到效果JPG图像优化设置例10-3品质：

26、决定图像大小平滑：越大模糊增加，文件越小。选择性品质：图像不同区域设置不同品质。（修改/选择性JPEG/将所选保存为JPEG蒙版）使用预设的优化设置导出图像图像网络特性（链接和JAVA脚本等）导出图像产生副本，不会修改原图。导出向导选择导出文件类型仅图片：导出一幅图片网页元素（按钮）：html和图像层到文件/状态到文件：单独保存为文件。切片的优化和导出设置切片原则：有图像区域就要放置切片。优化切片：每个切片单独设置优化选项。切片的导出 例10-5选项P154创建幻灯片创建幻灯片放映齿轮的绘画用了“自动形状”的“齿轮”。对自转的动画实例应用了“纯色阴影”滤镜。对所有元件实例进行了组合，然后添加“

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