网页设计教程14fireworks cs3在网页设计中的应用
adobe fireworks cs3 迅速建立网站初步架构并完成相关设计工作
資料表輕鬆完成設計及最佳化工作專注於設計工作，不必擔心格式問題。
Fireworks CS3 能讓您輕鬆建立及編輯向量和點陣圖影像，並套用各式各樣的效果和混合模式，以捕捉獨特的外觀與感覺。
批次處理影像，在最短的時間內獲得一致的尺寸、格式及品質。
利用最佳化工具，在品質及影像大小之間取得平衡。
從想像到初步架構使用一系列完整的網站初步架構輔助工具以節省時間，並將您的想像精確地傳達給您的同事及客戶。
您可以利用內容豐富的通用元件庫開始著手設計，也可以輕鬆建立自己的元件庫。
您可以跨頁共用圖層，並在一瞬間完成跨頁的全域變更。
使用有效的超連結建立互動式初步架構。
FireworksCS3 能與其他 Adobe 軟體充分整合，讓您從最初的構思到最後的發表階段均能輕鬆沿用自己先前的作品。
享受智慧型整合功能所帶來的好處從現在起，您的所有工具將能相輔相成。
您將能享受到與其他 Adobe 創意軟體 (包括 Photoshop CS3、Illustrator CS3、Dreamweaver CS3、Flash CS3、Flex 以及Adobe Bridge 和 Adobe Device Central CS3)充分整合所帶來的好處。
精確一致地在不同的應用程式之間交換設計、資源、甚至是程式碼。
請考慮選擇 Adobe Creative Suite 3Web Premium購買升級版 Creative Suite 3 WebPremium 將能為您帶來從事網站、網站應用程式及行動內容之初步架構、設計、開發和維護工作所需具備的一切工具。
Adobe Creative Suite 3 Web Premium包括 Adobe Bridge CS3、AdobeVersion Cue® CS3、Adobe DeviceCentral CS3、Adobe Stock Photos 和Adobe Acrobat® Connect™以及：• Adobe Dreamweaver® CS3• Adobe Flash CS3 Professional• Adobe Photoshop CS3 Extended• Adobe Illustrator CS3• Adobe Fireworks® CS3• Adobe Acrobat 8 Professional• Adobe Contribute® CS3ADOBE® FIREWORKS® CS3迅速建立網站初步架構，並完成相關設計工作想要加快您的網站設計及開發速度嗎？請使用 AdobeFireworks CS3 軟體，這是建立及最佳化網站專用影像，並迅速建立網站初步架構及應用程式的理想工具。
Fireworks在网页中的应用
Fireworks在网页中的应用1 用fireworks布局页面布局是一个网页内容组织的必然结果，它往往是由自身逐渐形成的。
在网页设计中，设计者要注意到网页排版的“ 最佳视域” ，这一细节会引导用户去观看整个页面，并且能够创造出一种“ Diagonal Balance（对角线平衡）” 的和谐状态。
人们在浏览页面或布局的时候，视线往往趋向从左上角移动到右下角，因为人们通常都是从左至右、由上往下地阅读，久而久之，视线自然会沿着这一路径移动。
设计者在页面的设计中要注重网页的“ 导向视觉流程” ，通过诱导元素主动引导读者视线向一定方向、由主到次地移动。
一个好的网页设计应尽量以最高效率，将用户所要的信息凸显出来，因此就要去掉所有冗余的东西，对内容进行很好的分类与优化，做到信息查看的主次分明。
在网站规划建设中，网页布局设计是其至关重要的一环，它关系到网站能否吸引更多人的眼球，直接关系到网站的点击率。
所以网页布局设计是否美观、规范、合理越来越受到网页设计师的重视。
1、布局规划在设计网站的过程中，事先进行布局规划也是提高网站开发效率的有效方法。
设计者在设计网站的过程中需要反复与客户进行交流、沟通、修改，而客户更看重就是布局的效果与使用的便捷性。
当布局确定后，内容的组织、程序的设计就由程序设计者完成了。
避免了程序设计好后反复修改界面的复杂性。
Fireworks在设计布局中还有如下优势：Fireworks的灵魂是图层，每层可以放置不同的元素，图层之间可以相互链接，也可单独存放，每个图层上的图像位置可以随意挪动，每个图层上的图像大小、色阶、亮度、饱和度透明度等可单独设置。
如此灵活的功能，完全可以让设计者随心所欲设计而不受任何约束。
一个打开、下载速度慢的网站是没有价值的，心理学研究表明一个网站的下载时间超过10秒，人们会自动转向其它网站。
决定下载速度的因素很多，其中网页大小、网页元素的优化和网络配置是重要的因素。
其中网页大小与网页元素的优化是设计者需要解决的，使用Fireworks设计的网页经过裁切、整合处理后体积会小得多。
第二章 Fireworks CS3入门及制作实例(网页设计与Web编程)
位图工具
➢位图工具主要用于绘制位图和对位图进行处 理。
“选取框”工具 ：用于创建矩形选区。 “椭圆选取框”工具 ：用于创建椭圆或圆形选
区。 “套索”工具 ：通过拖动鼠标的方式建立任意
形状的选区。 “多边形套索”工具 ：用于创建多边形选区。 “魔术棒”工具 ：将颜色相近的区域创建为选
区。 “刷子”工具 ：用于创建具有填充效果的粗线
“圆形热点”工具 ：可以在图像的目标区域周 围绘制圆形热点。
“多边形热点”工具 ：可以在图像的目标区域 周围绘制多边形热点。
“切片”工具 ：实现图像的矩形切片切割。
Web工具
“多边形切片”工具 ：可以实现图像的多边形 形状的切片切割。
“隐藏切片和热点”工具 ：实现切片热点视图 的隐藏。
“显示切片和热点”工具 ：实现切片热点视图 的显示。
颜色工具பைடு நூலகம்
➢ 颜色工具主要用于设置填充颜色和描边颜色。 “笔触颜色” ：用于设置描边的颜色。 “填充颜色” ：用于设置填充的颜色。 “设置默认笔触/填充色” ：将笔触颜色和填充颜 色设置为默认值，即笔触颜色为黑色，填充颜色为白 色。 “没有描边或填充” ：设置没有描边或填充。 “交换笔触/填充色” ：将笔触颜色和填充颜色进 行交换。
绘图区域
单击 按钮将弹出快速导出的菜单，可以将Fireworks 中 编辑的图像快速导出为Macromedia公司的其他产品或者 是其他图像处理软件的格式。
在绘画区域的下方是所编辑图像文档的状态栏，分别用于 控制Gif动画的播放、退出位图编辑模式、显示图像的尺 寸和控制图像缩放比例。
4）快捷工具栏
到另一个区域中。 “替换颜色”工具 ：用一种颜色替换另外的一种颜色。 “红眼消除”工具 ：用于除去照片中出现的红眼。
浅析Fireworks在网页制作中的应用
Ｆｒ ｏ ｓ ｉ Ｗ ｒ 软件 是 目前 比较 杰 出 的 网页 图形 制作 软 件 它集 ｅ ｋ 像 处理 软 件 ． 以用 最 少 的 步骤 生 成 最 小 但 是 质 量 很 高 的 Ｊ Ｅ 可 ＰＧ
和 Ｇ Ｆ图 像 ． 些 图像 可 以直 接 用 于 网 页上 ． 化 了 制 作 网 页 的 Ｉ 这 简
可 以将 制 作 的 图像 放 到导 出预览 界 面 中 ．通 过 更 改 导 出设 置来 Ｇ Ｆ格 式 的设 置 方 法 相 同 ： 择 Ｐ Ｇ ４和 Ｐ Ｇ ２时 ． 于包 含 Ｉ 选 Ｎ ２ Ｎ３ 由 优 化 图像 格式 ． 使之 适 合 于 网上 传输 。 因此 ．ｉ ｗ ｒｓ 以在 不 了 图像 的所 有 颜 色 ， 此 不需 要 进 行 压缩 设 置 。 Ｆｒ ｏｋ 可 ｅ 因 降 低 图像 品 质 的前 提下 缩 小 文件 体 积 ． 高 网 站速 度 ． 便更 好 提 以 地满 足 广 大浏 览 者 的要 求 。 ｉ ｗ ｒｓ 网络 图像 的 创建 处 理 ． Ｆｒ ｏｋ 为 ｅ 以 Ｆｒｗ ｒｓ 实 现 网 页的 视觉 设 计 制 作方 面 的应 用 实 例 ｉ ｏｋ 在 ｅ
等 ， 能 将 图 像 的一 些 区域 用 Ｈ ＭＬ代 码来 代 替 。 另外 。 割 图 还 Ｔ 切
像 还 可 以用 于 链 接设 置 。
、
用 Ｆｒｗ ｒ ｓ 化 网 页 图像 ｉ ｏｋ 优 ｅ
网 页图 形设 计 的最 终 目标是 创 建 能 够 尽 可 能快 地下 载 的精 二 、 片 在 网 页制 作 中 的作 用 切 美 图像 。 为此 ， 必须 在最 大 限 度 地 保证 图像 品质 的 同时 ， 择 压 选 在 网 页上 的图 片较 大 的 时 候 ．浏 览 器 下 载整 个 图 片 的话 需 缩 质 量 最 高 的 文 件 格 式 ， 种 平 衡 就 是 优 化 ． 寻 找 颜 色 、 缩 要 花 很 长的时 间 ．切 片 的 使用 使 得 整 个 图 片 分为 多 个 不 同 的小 这 即 压 和 品质 的最 佳 组 合 。 ｉ ｗ ｒｓ 有 强大 的优 化 功 能 ． 帮 助设 计 图片 分 开下 载 ． 样 下 载 的时 问 就 大大 地 缩 短 了 ． 够 节约 很 多 Ｆｒ ｏｋ 具 ｅ 可 这 能 人 员 在 准备 导 出图形 时 在 文件 大 小 和 可 接 受 的 视 图 品质 之 间取 时 问 。 目前 互 联 网带 宽 还受 到 条 件 限制 的 情 况下 。 用 切 片来 在 运 得平衡。 （ ） 像优 化 一 图 由于 Ｆｒｗ ｒｓ 作 的 图 片大 多 数 应 用 在 网 络 上 。 此 要 求 ｉ ｏｋ 制 ｅ 因 图像 文 件尽 可 能 的 小 ． 同时 又 希 望 图像 效 果 相对 较 好 。 图像 优 化 减 少 网 页下 载 时 问而 又 不 影 响 图片 的 效 果 ．这 不 能 不 说是 一 个 两 全 其美 的办 法 了 。 （ ） 建 切 片 一 创 使 用 Ｆｒｗ ｒｓ工 具 箱 上 的 切 片 工 具 可 以 为 已 经 制 作 好 的 ｉ ０ｋ ｅ
Fireworks网页图像设计教程
Fireworks网页图像设计教程第一章：Fireworks软件简介Fireworks是一款专业的网页图像设计软件，由Adobe公司开发。
它的特点是易学易用，能够快速创建、编辑和优化各种网页元素，并提供了丰富的工具和功能来提高设计效率。
本章将对Fireworks软件进行详细介绍。
1.1 Fireworks软件的特点Fireworks软件具有以下几个特点：1) 矢量图形编辑功能：能够创建和编辑矢量图形，保证图像的清晰度和可伸缩性。
2) 位图图像编辑功能：可以对位图图像进行调整、优化和修饰，使其适应网页设计的要求。
3) 视觉效果的应用：提供了各种效果和滤镜，能够为图像添加阴影、渐变、透明等视觉效果。
4) 交互设计功能：支持网页的交互设计，包括按钮、导航菜单等元素的创建和动画效果的应用。
5) 切片与导出：可以对设计好的页面进行切片，方便导出为HTML、CSS等格式，方便网页制作。
1.2 Fireworks软件的界面与工具Fireworks软件的界面包含菜单栏、工具栏、面板区以及画布等区域。
在工具栏中，包含了常见的绘图工具、修饰工具、编辑工具等。
面板区包含了图层、属性、颜色、样式等面板，便于用户对图像进行编辑和管理。
第二章：Fireworks图像设计的基础知识在进行Fireworks图像设计之前，有一些基础知识是需要了解和掌握的。
2.1 色彩模式与调整Fireworks支持RGB、CMYK、灰度等色彩模式，并提供了色彩调整工具，如色相/饱和度调整、曲线调整等，能够对图像的色彩进行精确调整。
2.2 图层管理图层是Fireworks中非常重要的概念，可以将不同的元素放置在不同的图层上进行管理。
图层的叠加次序决定了元素的显示顺序，而透明度设置则可以调整元素的透明程度。
2.3 对象的创建和编辑Fireworks提供了丰富的对象创建和编辑工具，如矩形、椭圆、多边形等。
通过编辑工具，可以对对象进行形状、大小、角度、位置等方面的调整。
Dreamweaver_CS3,Flash_CS3应用基础案例教程
项目1 建站及创建基本网页
Dreamweaver CS3、Flash CS3应用基础案例教程
任务一：创建和管理站点
活动1 活动2 活动3 创建本地站点 管理站点文件 使用站点地图
知识延伸
Dreamweaver CS3、Flash CS3应用基础案例教程
1.合理规划站点：
合理的站点结构，能够加快对站点的设计，提高工作效率， 节省您的时间。如果您将一切网页都存储在一个目录下，当站 点的规模越来越大时，管理起来就会变得很不容易。因此，一 般来说，应该利用文件夹来管理文档。在规划站点结构时，一 般应该遵循如下一些规则： （1）用文件夹来保存文档 一般来说，应该用文件夹来合理构建文档的结构。首先为 站点创建一个根文件夹（根目录），然后在其中创建多个子文 件夹，再将文档分门别类存储到相应的文件夹下，必要时，可 以创建多级子文件夹。
知识延伸
Dreamweaver CS3、Flash CS3应用基础案例教程
2.使用站点地图 ：
Dreamweaver站点地图是理想的站点结构布局工具，使用它 可以将新文件添加到Dreamweaver站点，或者添加、修改或删 除链接。
小试身手
Dreamweaver CS3、Flaver CS3、Flash CS3应用基础案例教程
1. embed的使用方法：
controls 面板外观 否 console（正常面板，默认）smallconsole（小面板） playbutton（仅显示播放按钮）pausebutton（仅显示暂 停按钮）stopbutton（仅显示停止按钮）volumelever（ 仅显示音量调节） 随意（不与同一页面其它对象重复） 随意 color|color（中间用 | 分隔，颜色可取类似red的颜色名或 RGB颜色，或透明色transparent） center（控制面板居中）left（控制面板居左） right（控制面板居右）top（控制面板的顶部与当前行的 最高对象顶部对齐）bottom（控制面板的底部与当前行 中的对象的基线对齐）baseline（控制面板的底部与文本 的基线对齐）texttop（控制面板的顶部与当前行中的最高 的文字的顶部对齐）middle（控制面板的中间与当前行的 基线对齐）adbmiddle（控制面板的中间与当前文本或对 象的中间对齐）absbottom（控制面板的底部与文字的低 部对齐）
Dreamweaver_CS3实用教程完整版
1.1.1 网页和网站的概念
网页(web)，也就是网站上的某一个页面，它是一个纯文本文件，是向浏览 者传递信息的载体，以超文本和超媒体为技术，采用HTML、CSS、XML等语 言来描述组成页面的各种元素，包括文字、图像、音乐等，并通过客户端浏览 器进行解析，从而向浏览者呈现网页的各种内容。 网站(Website)，它是指在互联网上，根据一定的规则，使用HTML等工具 制作的用于展示特定内容的相关网页集合，它建立在网络基础之上，以计算机、 网络和通信技术为依托，通过一台或多台计算机向访问者提供服务。平时所说 的访问某格站点，实际上访问的是提供这种服务的一台或多台计算机。
第1章 网站的设计与制作简述
Dreamweaver CS3是一款专业的网页制作软件，它具有简单易学、操作 方便以及适用于网络等优点。通过对Dreamweaver CS3的学习，即使没有任 何网页制作经验的用户，也能很容易上手，制作出精美的网页。本章主要介绍 了网页的基本概念、网页设计的构思和设计流程，以及Dreamweaver CS3的 新增特色功能和工作环境等。
1.2.2 网页的设计构思
在制作网页之前，首先要进行网页的设计与构思，主要包括网页的主题、 网页的命名、网站标志、色彩搭配和字体等要素。
1.2.3 网页的布局
网页布局的好坏是决定网页美观与否的一个重要方面。通过合理的布局， 可以将页面中的文字、图像等内容完美、直观地展现给访问者，同时合理安排 网页空间，优化网页的页面效果和下载速度。反之，如果页面布局不合理，网 页在浏览器中的显示将十分糟糕，页面中的各个元素显示效果可能会重叠或丢 失。因此，在对网页进行布局设计时，应遵循对称平衡、异常平衡、对比、凝 视和空白等原则。常见的网页布局形式包括：型布局、T型布局、“三”型布 局、对比布局和POP布局等。
浅析Fireworks在网页制作中的应用
网页图像以其直观、形象的表现特点在网页中占有重要地 位。但图像文件的大数据量又成为网页的负担。影响了网页的下 载速度。因此。对网页中图像进行优化即在不影响其质量的前提 下尽量减少其体积是解决上述矛盾的有效途径。
当创建一个新元素来包装非空白的文本内容（第１“２４行） 时，ＤＯＭ接口开始有点杂乱。用来创建元素的方法与文档关联 并成为一个整体．所以需要在所有者文档中检索当前正在处理 的元素（第１７行）。假设将这个新元素放置在与现有的父元素相 同的名称空问中．并且在ＤＯＭ中．这意味着需要构造元素的限 定名称。根据是否有名称空间的前缀，这个操作会有所不同（第 １８一１９行）。利用新元素的限定名称，以及现有元素中的名称空 问Ｕ砌，就能创建新元素（第２０—２１行）。
用于设置相应的行为触发区域的。ห้องสมุดไป่ตู้果切片对象放设置了链接，
万方数据
２００８年第１２期
福建 电脑
１４７
那么在浏览器中显示的时侯．只有点击到多边形区域时才会实 现链接跳转．而在这个切片的其他区域则不会出现链接跳转。
图４
（－－）编辑切片 和热点的编辑非常类似，如果要选取切片。可以利用指针工 具、部分选定工具来选中它。也可以使用层面板来进行；选中切 片之后。若要移动切片可以利用鼠标、方向键或者属性面板的位 置值。 可以利用工具箱上的隐藏切片和热点工具来将选中的切片 隐藏起来．需要显示切片的时候单击显示切片和热点工具即可 将切片显示出来。如同热区的显示和隐藏一样．我们同样还可以 利用层面板上的眼睛图标显示和隐藏该切片。 （三）添加链接 为切片添加链接同样有两种方法。一是利用属性面板。二是 利用ＵＲＬ面板。当我们选定某个切片之后。我们可以在这两个 面板中为该热区设置链接地址和链接属性。方法和热区的链接 方法类似。 三、用Ｆｉｒｅｗｏｒｋｓ制作动画 动画可以为网站增加一种生动活泼、复杂多变的视觉效果。 在Ｆｉｒｅｗｏｒｋｓ中。也可以创建横幅广告、徽标和卡通等动画。动画 实际上是由具有相关性的静止图片快速连续显示．因人眼的视 觉暂留现象而造成的动态效果。组成动画的每一幅图片称之为” 帧”。有两种形式的动画：渐变动画和逐帧动画。在渐变动画中创 作人员设计制作起始帧和结束帧。由计算机根据起始帧、结束
新编Dreamweaver CS3动态网页设计与制作教程图文 (14)
第14章 表单和动态网站 图14.23 【表格】对话框
第14章 表单和动态网站
(10) 单击【确定】按钮，创建一个表格，在【属性】面 板中将【对齐】设置为“居中对齐”，【填充】设置为 “5”，标题(caption)字体设置为“粗体”，【背景颜色】设 置为“#99FFCC”，如图14.24所示。
(11) 在表格第1行第1列单元格中输入文本“用户名：”， 在第1行第2列单元格中执行【插入】→【表单】→【文本字 段】命令，在【属性】面板中将【文本域】名称设置为 “name”，【最多字符数】设置为“20”，如图14.25所示。
(7) IIS服务器安装成功后，需要对其进行相关配置后才 可以应用。首先我们建立一个文件名为“zhuce”的文件夹， 后面所讲的“制作动态用户注册系统”的所有文件均放在该 文件中。
(8) 打开【控制面板】窗口，双击源自中的【管理工具】， 在出现的【管理工具】窗口中选中【Internet信息服务快捷方 式】，如图14.7所示。
14.2 制作用户注册表单
IIS服务器配置好之后，还必须建立一个包含ASP脚本的 动态站点。建立好站点后，动态网页的所有文件都放在该站 点下，这样方便编辑和调试。
1. 操作步骤 制作用户注册表单的具体操作步骤如下： (1) 启动Dreamweaver CS，执行【站点】→【管理站点】 命令，打开【管理站点】窗口，如图14.16所示。 (2) 单击【新建】→【站点】命令，打开【站点定义】 窗口，给站点起名为“zhuce”，如图14.17所示。
第14章 表单和动态网站 图14.18 服务器技术类型设置
第14章 表单和动态网站 图14.19 站点存储位置设置
第14章 表单和动态网站
(5) 单击【下一步】按钮，设置测试URL，由于在本机 测试，故保持默认设置，如图14.20所示。
零起点Dreamweaver CS3,Flash CS3,Fireworks CS3网页制作培训教程电子教案第8课
操作步骤请老师参照软件讲解
Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程
8.2.2 典型案例 典型案例——设置“主页” 设置“主页” 设置 文档环境
案例小结 通过本例的学习， 通过本例的学习，希望读者能够快速掌握 文档的新建、设置、 文档的新建、设置、外部文件的导入以及 画布的修改等知识。这些知识都是很简单、 画布的修改等知识。这些知识都是很简单、 很基础的，一定要熟练掌握， 很基础的，一定要熟练掌握，因为一切的 操作都由此开始。 操作都由此开始。
新建文件的具体操作如下： 新建文件的具体操作如下：
（1）选择【文件】→【新建】命令，或按【Ctrl+N】 ）选择【文件】 【新建】命令，或按【 】 组合键，打开【新建文档】对话框。 组合键，打开【新建文档】对话框。 画布大小】栏中设置要制作的图像的宽、 （2）在【画布大小】栏中设置要制作的图像的宽、 ） 高与分辨率大小。 高与分辨率大小。 画布颜色】栏中指定画布颜色。 （3）在【画布颜色】栏中指定画布颜色。默认状态 ） 为白色，如果需要其他颜色，可选中【自定义】 为白色，如果需要其他颜色，可选中【自定义】单 选按钮，再单击 图标，从弹出的颜色选择器中选 选按钮， 图标， 择需要的颜色。 择需要的颜色。 （4）设置完成后单击【确定】按钮，完成 ）设置完成后单击【确定】按钮，完成Fireworks 文档的创建。 文档的创建。
Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程
1. 认识 认识Fireworks工作界面 工作界面
从【开始】菜单中启动Fireworks后，进入 开始】菜单中启动 后 Fireworks启动界面，如下图所示。 启动界面， 启动界面 如下图所示。
第11章网页图形处理工具FireworksCS3-精品文档
11.1 Fireworks CS3的基本概念
11.1.3 打开和导入文件 1．打开文件 打开文件用于重新加载一幅新的图像。执行“文件”→“打 开”命令，或者单击工具栏上的“打开”按钮，即可启动“打 开”文件对话框，1 Fireworks CS3的基本概念
11.1.3 打开和导入文件 2．导入文件 导入文件和打开文件的区别是，前者是将图像文件插入到目 前正在编辑的文档中，而不是重新加载一幅图像。执行“文 件”→“导入”命令，启动“导入”对话框，如图所示。
网站规划与网页设计
电子工业出版社同名教材 配套电子教案 2009.9
第11章 网页图形处理工具Fireworks CS3
11.1 11.2 11.3 11.4 Fireworks CS3的基本概念 图形的优化 用Fireworks CS3创建网页模型 创建网站相册
11.1 Fireworks CS3的基本概念
11.3 用Fireworks CS3创建网页模型
网页模型一般用于向用户显示建议的页面设计，一旦设计 获得认可，网页设计人员便会将模型用作创建页面的蓝图。下 面的实例讲述了一个诗词主题网站页面模型的建立过程，使读 者能够了解Fireworks的基本操作、网页模型的规划和设计过程。 11.3.1 建立网站页面模型 页面模型通常显示设计布局、技术组件、主题和颜色、图 形图像以及其他媒体元素。. 11.3.2 网页模型的切片与导出 切片是Fireworks CS3中用于创建交互的基本构造块。切片 将Fireworks文档分割成多个较小的部分并将每部分导出为单独 的文件。导出时，Fireworks还创建一个包含表格代码的HTML 文件，以便在浏览器中重新装配图形。
图 设置画布大小
图 设置图像大小
fireworks网页设计的使用方法
fireworks网页设计的使用方法Macromedia Fireworks是一个制作和处理网页图形图像的工具软件,由Macromedia公司开发，那么在fireworks中怎样设计网页及如何使用呢?下面店铺给大家整理了关于fireworks 网页设计的使用方法，希望大家喜欢。
fireworks 网页设计的使用方法我们将根据这一个典型网站其中一个页面设计流程，使您逐步学习到以下内容：1、导入并编辑位图图像。
2、自动任务处理3、创造矢量图形4、创建文字5、创建按钮6、创建导航条7、设定按钮属性8、建立切片9、创建拖拽翻转效果10、创建弹出菜单11、创建变形动画12、优化图像13、输出HTML文件到Dreamweaver14、在Dreamweaver中进行往返表格编辑一、设计前准备1、网站介绍：在教程介绍之前首先让我们来看一下我们将要完成的主要任务。
这是一个服饰公司的企业网站设计，公司主要以男式服饰为主，同时也兼顾部分女士服饰。
网站的主要任务是帮助浏览者了解公司的基本概况和产品信息，并作为公司的一个展示窗口，向参观者展示企业的形象及产品系列。
根据业主的要求，网站包含了企业概况、企业人才、产品展示、公司荣誉以及联系方式。
我们将以此得到网站的导航结构。
2、设计指导思想：本网站设计的指导思想是在网络上营造一个优雅、高贵、宁静的氛围，为了体现这一主题，设计者将纹理、景深、光影、基调与有形的模特照片和静态的文字结合起来，更多的使用直线、坚硬的边缘、暗的色调来组成网站界面。
页面中以较大面积的男性模特图片突出男式服饰这一主题，以穿插的直线段体现一种服装纹理的感觉。
公司的名称则以一种柔软光滑的粗倩体来表现，以打破整个页面的坚硬感，同时以白色突出企业名称，达到非常亮眼的感觉。
3、页面结构：整个网站采用统一的结构，分为上下两个部分，上面为网站的导航条，下面左边以不同的男式服饰图片及文字标题表示各页主题。
右边为内容区，以深色带条纹的图片作为背景。
网页设计基础教程与上机指导利用fireworks制作动画
|
按钮 , 弹出Fireworks提示框。■ (3)单击
】对话框。■ (2)在对话框中选择要导入的GIF动画 , 单击
■ 导入现有GIF动画的具体操作步骤如下。■ (1)选择
25.3.2
】面板中添加新的帧。
】按钮 , 自动在
】命令 , 弹出
【文件
【确定
【打开
】检查器来更改动画元件的属性 。还可以在元件编辑器中编辑元件的图片 。元件编辑器可以在不影响文档其他部分的情况下编辑元件 。也可以通过移动元 件的运动路径来更改元件的运动。■ 因为动画元件被自动放到
】面板中 , 所以可以重新使用它们
来创建其他动画。
】对话框或
【动画
【属性
第7页/共12页
可以处理动画元件的属性 , 使网站富有生气 。可以更改元件动画的速度 、不透明度和旋 转的各种属性 。通过处理各种属性 , 可以使元件显示为旋转 、加速 、淡入淡出或者是这些动作的任意组合。可以通过
】对话框。■ (3)
】面板中选择需要设置帧延时的帧 , 按住Shift键可以同时选择多
】面板右上角的按钮 , 在弹出的菜单中选择
■ (2)单击
【 帧属性
【 帧延时
】命令,
【属性
第5页/共12页
弹出
■ 动画元件可以是创建或导入的任何对象, 并且在一个文件中可以有许多元件 。每个 元件都有它自己的属性并可独立运动。■
】 按钮 , Fireworks就会在单个文件中打开所需要的文件。
】文本框中。■ (3)在对话框中选中
】面板中可以看到每个文件都按选定的顺序放置
■ 在Fireworks
】复选框 , 单击
【 以动画打开
】命令 , 弹出
fireworks怎么制作网页
fireworks怎么制作网页fireworks怎么制作网页欢迎大家在这里学习fireworks制作网页!下面是我们给大家整理出来的精彩内容。
希望大家在这里学习!先看最终效果图:下面开始讲解:1.布局先来说一下我们制作网页一般的大小高度：没有一个固定值，因为每个人的浏览器的工具栏不同，我见过有的浏览器工具栏被各种插件占了半个屏幕，所以高度没有确切值。
宽度：1、在IE6.0下，宽度为显示器分辨率减21，比如1024的宽度-21就变成1003。
但值得注意的是IE6.0(或更低)无论你的网页多高都会有右侧的滚动条框。
2、在Firefox下，宽度的分率辨减19。
比如1024的宽度-19就变成10053、在Opear下，宽度的分率辨减23。
比如1024的宽度-23就变成1001注：Firefox或Opear在内容少于浏览器高度时不显示右侧滚动条。
所以如果是1024的分辨率，你的网页不如设成1000安全一点。
如果是800的'分辨率一般都设成770。
这些需要明白并且牢记，不然很可能做出来不符合浏览器要求，不过一般我们都回设定的再稍微小一点，应为有些浏览器加了插件或者其他的东西宽度会有变化所以800的分辨率一般设定760左右，1024的设定990左右.我这样用辅助线和标尺把大概范围划分出来，注意我的划分，正好是770，和1000的地方，应为我要做的网站是1024分辨率下的，但是考虑到依然可能存在800分辨率的用户，所以我回把主要的内容和菜单都放置在770以内，770-1000的地方放一些辅助的东西，这个习惯特别是在做一些门户网站设计的时候更要考虑以下，毕竟改善用户体验也是我们要考虑的问题.2.开始工作我们继续讲解，现在我们来画上部菜单部分的内容，其实很简单拉，就是画一个方框，一个圆，然后组合，加上渐变就可以了，如下图设置3.下面我们来画哪个类似徽章的东西其实也很简单，创意是类似奖状上贴的哪个获奖标志一样，会让网站生动一点，嘿嘿.我们选择多边形，如图:设置如下，继续贴图，大家要注意一下图层顺序，拖动到下层就好了。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
• 本章第1节主要介绍了Fireworks CS3的基本功能特点，针 对该版本介绍了其新增功能。此外，还介绍了Fireworks CS3的工作界面及文档操作。
• 第2节介绍了位图相关概念，结合Fireworks CS3介绍位图 工具的使用。 • 第3节介绍了矢量图的概念，结合Fireworks CS3介绍了矢 量图工具的使用。 • 第4节介绍了网页图像的切片、热区的建立及优化图像的处 理。第5节介绍了Fireworks CS3中图层的相关概念及动画 制作的基本知识。
2016/7/6 19
• GIF图片的优化设置
2016/7/6
20
• JPG图片的优化设置
2016/7/6
返回 主菜单
21
五、图层、帧与动画制作
• 1、层 层就像是在一叠摞在一起的透明纸上 分别绘制不同的图形。每个层可以看做 是一张完全透明的胶片，文档中的对象 都存在层上。在绘制对象时，可以先创 建层或者根据需要添加层。
第14章 Fireworks CS3网 页图像设计
2016/7/6
1
本章内容
一．Fireworks cs3简介 二．位图图像的创建与编辑 三．矢量图像的创建与编辑 四．网页图像的切片、热区与优化 五．图层、帧与动画制作
2016/7/6
2
一、 Fireworks cs3简介
•1、新增功能
创建丰富元件 元件的智能缩放 向单个文档添加多个页面 创建基于 Flash 的幻灯片放映 具有层次结构的层 使用 Photoshop 文件 将Fireworks文件导入Adobe Flash Adobe Bridge
17
• 矩形热点工具 • 圆形热点工具 • 多边形热点工具
2016/7/6
18
• 3、图像的优化 网页图像设计的最终目的是创建 优美的图像，同时能尽快下载。为了达 到这样的目的，就必须在最大限度地保 持图像品质的同时，选择压缩质量高的 文件格式。这种平衡的建立就是优化， 也即是选择颜色、压缩和品质的合适组 合。
2016/7/6 25
2016/7/6
3
• 2、Fireworks CS3的启动与退出
Fireworks CS3的启动（两种方式）
Fireworks CS3的退出（三种方式）
2016/7/6
菜单栏
• 3、Fireworks CS3 工作界面
工具箱
绘图编辑区
浮动面板
2016/7/6
5
• 4、Fireworks CS3 文档操作 新建文档 保存文档 打开文档 文档的修改
2016/7/6
返回 主菜单
6
二、位图图像的创建与编辑
• 1、位图的概念 位图图像(bitmap)：亦称为点阵图像 或绘制图像，由“像素（图片元素）” 组成的。计算机屏幕就像是一个大的像 素网格。这些点可以进行不同的排列和 染色以构成图样。
2016/7/6
7
位图原图及放大后的效果
2016/7/6
2016/7/6
22
• 2、帧 动画是依靠多幅静止图片连续播放而 形成，一幅静止的图片就是一帧。以一 定的速率播放多帧图片就形成了动画。
2016/7/6
23
• 3、动画 打开文件成为动画 导入现有的GIF动画 通过帧面板制作动画 利用元件和实例制作动画 补间动画
2016/7/6
返回 主菜单
24
本章小结
8
• 2、位图工具的使用
2016/7/6
9
• • • • • • • •
选取框工具 套索工具 魔术棒工具 铅笔工具 刷子工具 橡皮擦工具 橡皮图章工具 模糊工具
返回 主菜单
2016/7/6 10
三、矢量图像的创建与编辑
• 1、矢量图的概念 矢量图使用直线和曲线来描述图形，这 些图形的元素是一些点、线、矩形、多边形、 圆和弧线等，它们都是通过数学公式计算获得 的。矢量图形通过公式计算获得，所以矢量图 形文件体积一般较小，因为这种类型的图像文 件包含独立的分离图像，可以自由无限制的重 新组合。
2016/7/6
11
矢量原图及放大后的效果
2016/7/6
12
• 2、矢量工具
2016/7/6
13
• • • • •
直线工具 钢笔工具 矩形工具 文本工具 矢量对象
返回 主菜单
2016/7/6 14
四、网页图像的切片、热 区与优化
• 1、切片 切片是网页对象，它们不是以图像的 形式存在，而是以HTML代码的形式出 现。可以通过“层”面板中的“网页层” 查看、选择和重命名它们。
2016/7/6
15
• 基于所选对象插入切片 • 使用切片工具
2016/7/6
16
• 2、网页图像的热点区域 在网页中的，要求图片上的一部 分区域具有超链接功能，或者图片上不 同的部分有不同的链接。此时就需要在 图片上建立热点区。当建立热点区域后， 鼠标放在图片上方时，由光标变为手形。
2016/7/6