网页设计与制作第10章 使用Fireworks编辑网页图像
fireworks网站制作
第一步：首先利用fireworks新建一个导航条，导入一张素材图片，调整其位置大小，颜色。
用矩形工具绘制六个矩形并调整其位置，大小，颜色，加图片，文字。
第二步：继续制作网站的banner然后在网站logo下面绘制矩形条，导入素材作为网站的banner
第三步：绘制网站功能区域，绘制矩形框调整其颜色，大小，位置并导入图片，添加文字标明区域功能名称
并使用切片工具分割图像，保存分割后的切片
第四步：使用dreamwearver创建网站，首先创建一个新站点，用刚才制作的页面作为网站的首页，设置页面属性。
删除页面左右空白切片并剪切其原文件地址等。
然后绘制网站的功
能区域如登录区域，购物车等
最后用firework工具创建网站局部区域，然后需进行切片工作。
将图片导出为网页文件
作。
将图片导出为网页文件最后完成局部框架内容，加图，填字等
商品息
然后使用图像地图功能为导航条添加各个连接
最后添加动态banner 完成网站制作。
Fireworks Web图形制作初步
1.1 矢量和位图对象
在Fireworks的“工具”面板中，绘制和编辑矢量 图与位图的工具分别位于不同的部分，对工具的选 择决定了创建的对象是矢量图还是位图。例如，从 “工具”面板的“矢量”部分选择“钢笔”工具， 就可以通过绘制点来绘制矢量路径；选择“刷子” 工具，则可以拖动以绘制位图对象；选择“文本” 工具，可以键入文字等等。
1.1 矢量和位图对象
也可以使用Fireworks工具编辑导入的图形。可以 导入和编辑JPEG、GIF、PNG、PSD 和其他许多 文件格式的文件。导入图形图像之后，不但可以对 其进行裁切、润饰和蒙版处理，还可以调整颜色和 色调。
1.2 交互式图形
切片和热点是指定网页图形中交互区域的网页对象。 切片将图像切成不同的部分，可以将变换图像行为、 动画和统一资源定位器 (URL) 链接应用到这些部分 上。另外，可以使用不同的设置导出各个部分。在 网页上，每个切片都出现在一个表格单元格中。使 用热点可将URL链接和行为指定给整个图形或图形 的某个部分。
Fireworks Web图形制作初步
Macromedia Fireworks是一个专业化的创建、编辑 和优化网页图形的设计工具和制作环境，使用 Fireworks，可以进行动画处理、添加高级交互功 能以及优化图像等。在Fireworks中，可以在单个 应用程序中创建、编辑位图和矢量两种图形，可以 随时进行编辑，工作流可以实现自动化，从而满足 耗费时间的更新和更改要求。
1.3 优化和导出图形
图像可以切成若干个更小的部分，然后以最适合于 每部分内容的格式优化它们。对于所增加的优化灵 活性，可以使用选择性JPEG压缩，将重点放在 JPEG的最重要部分，但此时会降低背景的品质。
优化图形后，下一步是将它们导出以便在网页上使 用。从Fireworks源PNG文档中，可以导出许多种 类型的文件，其中包括JPEG、GIF、GIF动画和包 含多种文件类型的切片图像的HTML表格。
网页设计基础教程与上机指导利用fireworks制作动画
|
按钮 , 弹出Fireworks提示框。■ (3)单击
】对话框。■ (2)在对话框中选择要导入的GIF动画 , 单击
■ 导入现有GIF动画的具体操作步骤如下。■ (1)选择
25.3.2
】面板中添加新的帧。
】按钮 , 自动在
】命令 , 弹出
【文件
【确定
【打开
】检查器来更改动画元件的属性 。还可以在元件编辑器中编辑元件的图片 。元件编辑器可以在不影响文档其他部分的情况下编辑元件 。也可以通过移动元 件的运动路径来更改元件的运动。■ 因为动画元件被自动放到
】面板中 , 所以可以重新使用它们
来创建其他动画。
】对话框或
【动画
【属性
第7页/共12页
可以处理动画元件的属性 , 使网站富有生气 。可以更改元件动画的速度 、不透明度和旋 转的各种属性 。通过处理各种属性 , 可以使元件显示为旋转 、加速 、淡入淡出或者是这些动作的任意组合。可以通过
】对话框。■ (3)
】面板中选择需要设置帧延时的帧 , 按住Shift键可以同时选择多
】面板右上角的按钮 , 在弹出的菜单中选择
■ (2)单击
【 帧属性
【 帧延时
】命令,
【属性
第5页/共12页
弹出
■ 动画元件可以是创建或导入的任何对象, 并且在一个文件中可以有许多元件 。每个 元件都有它自己的属性并可独立运动。■
】 按钮 , Fireworks就会在单个文件中打开所需要的文件。
】文本框中。■ (3)在对话框中选中
】面板中可以看到每个文件都按选定的顺序放置
■ 在Fireworks
】复选框 , 单击
【 以动画打开
】命令 , 弹出
图像处理软件Fireworks
像中每一个位置的坐标以及这些坐标之间的相互关系.
一般而言，对矢量图进行任意尺度的放大时都不会有
失真现象。
网页设计与制作
12
创建位图对象
创建新位图对象
–使用Fireworks MX的位图绘制和绘画工具,即可创建 位图图形对象.
创建空位图对象
–单击层面板中的“新建位图图象”按钮，或者选择 “编辑/插入/空位图”菜单命令
图像处理软件FireMX简介 4.2 Fireworks MX文档的基本操作 4.3 矢量图和位图 4.4 选择和编辑对象 4.5 颜色和填充 4.6 使用文本 4.7 特殊效果 4.8 GIF动画 4.9 图像的切片与导出
网页设计与制作
47
导出图像
网页设计与制作
48
网页设计与制作
49
快速导出
网页设计与制作
50
用剪切或复制的方法
矢量对象转换成位图
–选中矢量对象后，使用“修改/平面化所选”菜单命 令即可转化成位图图像
网页设计与制作
13
绘制矢量对象
工具面板的“矢量”部分的工具即是 对矢量进行编辑操作的工具,默认情况下有 “线条”、“钢笔”、“矩形”、“文 本”、“自由变形”、“刀子”工具等.
网页设计与制作
–羽化象素选区
–创建和移动浮动象素选区
网页设计与制作
19
变形和扭曲
缩放对象 旋转对象 翻转对象 倾斜对象 扭曲对象
网页设计与制作
20
网页设计与制作
21
网页设计与制作
22
组织对象
网页设计与制作
23
修饰位图
克隆象素 模糊和锐化象素 减淡和加深象素 调整位图亮度和对比度 调整色相和饱和度 裁剪所选位图
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提供了丰富的对象创建和编辑工具，如矩形、椭圆、多边形等。
通过编辑工具，可以对对象进行形状、大小、角度、位置等方面的调整。
fireworks教程
fireworks教程Fireworks是一款由Adobe公司开发的图形编辑软件，主要用于创建和编辑Web图像，特别适用于设计师和开发人员在制作网站时进行图像处理和优化。
本教程将介绍Fireworks 的基本功能和使用方法，帮助读者快速上手并提升其设计能力。
简介Fireworks是一款在Adobe Creative Suite软件套件中独立存在的软件，最早被设计用于处理和优化Web图像。
它的特点是集成了矢量图形编辑器和位图编辑器的功能，能够同时处理SVG、PNG、GIF、JPEG等多种图像格式。
Fireworks的设计理念是帮助用户快速创建和编辑Web图像，提供丰富的工具和特效，支持切片和优化，以及生成HTML和CSS代码。
下载和安装Fireworks可以通过Adobe官方网站下载安装程序。
安装过程与大多数软件相似，跟随提示完成即可。
安装后，启动软件并进入主界面。
界面概览Fireworks的主界面分为几个主要区域：1.菜单栏：包含各种工具和功能的菜单。
2.工具栏：包含常用工具的按钮，用于选择和应用工具。
3.画布：用于显示和编辑图像的区域。
4.图层面板：显示和管理图像的各个图层。
5.属性面板：用于调整和修改工具和图层的属性。
基本操作创建新文档要创建新的Fireworks文档，请执行以下操作：1.单击菜单栏中的“文件”>“新建”。
2.在弹出的对话框中，设置文档的尺寸、分辨率和背景颜色等选项。
3.单击“确定”创建新文档。
绘制基本图形Fireworks提供了多种绘图工具，可以帮助用户创建各种基本图形。
以下是创建基本图形的一般步骤：1.选择合适的绘图工具，例如矩形工具或椭圆工具。
2.在画布上单击并拖动，绘制出所需大小的图形。
3.在属性面板中设置图形的颜色、边框大小和样式等属性。
编辑图像Fireworks提供了丰富的编辑工具和功能，可以对图像进行调整和修改。
以下是一些常用的图像编辑操作：1.裁剪图像：选择裁剪工具，拖动鼠标选择要保留的区域，点击“裁剪”按钮完成裁剪操作。
Fireworks网页制作.
“帧”面板
“历史记录”面板
第 7页
“对齐”和“信息”面板
“对齐”面板
“信息”面板
第 8页
颜色面板和属性面板
颜色面板
混色器选项卡 样本选项卡
属性面板
第 9页
层面板
图层的缩略图
选中图层 图层的可视性 图层的锁定 不透明度的选择 图层的模式
第10页
行为面板
Fireworks网页制作
第14章
回顾
Fireworks的界面
Fireworks中图像和界面调整命令的应用 使用各种绘制工具 使用各种编辑工具
第 2页
本章目的
学习Fireworks中各种面板的使用方法及技巧
掌握导入文件的方法 掌握导出文件的方法 应用批处理操作大量的文件
第 3页
本章重点
在网页设计中，软件之间的相互交流是不可 缺少的，Fireworks的导入和导出功能可以在 各软件之间起到桥梁的作用，本章的重点就 是掌握导入和导出的方法。
第 4页
Fireworks面板应用
Fireworks面板特性
第 5页
优化面板
优化图形
优化文档
第 6页
帧和历史记录面板
特点
设置
第11页
资面板
样式面板
URL面板 库面板
第12页
导入
导入是将使用其他应用程序创建的图形文件 放置到当前文档中
导入的方法
直接导入 打开文件
拖放操作
复制粘贴
第13页
其他导入方法
导入文本
网页设计与制作应用第10章
10.2 Fireworks 基本操作
Fireworks文档操作
在 Fireworks 中，可以很容易地打开、导入和编辑在其 他图形程序中创建的矢量和位图图像。还可以从数码相 机或扫描仪中导入图像。 打开文档：执行主菜单【文件】/【打开】命令，弹出 “打开”对话框。选择文件并单击“打开”按钮即可打 开已保存过的文件。
第10章 Adobe Fireworks CS5 入门知识
10.1 Fireworks CS5 简介 10.2 Fireworks 基本操作 10.3 对象的基本操作 10.4 对象的高级操作 10.5 选区的基本操作 10.6 边学边做（掌握对象操作流程）
10.1 Fireworks CS5 简介
• 3) 在“锚定”区域提供各种不同的修改方式，每 个按钮上用图示表示了画布扩展或收缩的方向，默 认状态下是中间的按钮被按下，表明画布向四周均 匀扩展或收缩，可以根据需要，单击相应的方向按 钮。
10.2 Fireworks 基本操作
改变文档属性
改画布颜色：执行主菜单【修改】/【画布】/【画布颜 色】命令，弹出 “画布颜色”对话框。在对话框中可 以根据需要选择新的画布颜色。
10.2 Fireworks 基本操作
改变文档属性
改变图像大小：选择选主菜单【修改】/【画布】/【图 像大小】命令（或者在“属性”面板中显示文档属性， 然后单击“图像大小”按钮），“图像大小”对话框。
10.2 Fireworks 基本操作
改变文档属性
旋转画布：在Fireworks中，用户可以把画布旋转180度、 顺时针90度、或者逆时针90度。
10.2 Fireworks 基本操作
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.下面我们来画哪个类似徽章的东西其实也很简单，创意是类似奖状上贴的哪个获奖标志一样，会让网站生动一点，嘿嘿.我们选择多边形，如图:设置如下，继续贴图，大家要注意一下图层顺序，拖动到下层就好了。
Fireworks制作简单的网站页面
Fireworks制作简单的网站页面网站页面布局作为一种平面设计,对于网站的整体运营,受众的接受程度都有直接的影响。
在Fireworks中怎样制作简单的网站页面呢?下面店铺给大家整理了更多关于Fireworks制作简单的网站页面，希望大家喜欢。
Fireworks制作简单的网站页面的方法步骤：1. 启动Fireworks，新建一个大小为180*200像素的画布，设置画布颜色为 #EFEFEF。
2. 在工具栏中选择矩形工具，绘制一个154* 183的矩形，在属性面板中设置这个矩形的填充色为#A9B1BE，描边设置为1像素的柔化，颜色为#677387，如图所示。
3. 利用矩形工具绘制一个宽 152，高 19 的矩形，在属性检查器中设置描边为无，填充类别改为线性，修改线性填充的颜色样本，第一个颜色样本的颜色为#E6FFFF，然后单击渐变色阶下面的区域，新增一个新的颜色样本，颜色为 #A4BECF，最后一个颜色样本为 #FFFFFF，具体设置如图所示：回到画布上，调整一下渐变方向，现在你的图看起来应该像是下图那样。
4. 以步骤 3 同样的方式制作下面的矩形。
选中下边的矩形，在属性检查器的效果菜单中，选择“阴影和光晕”>“投影”，为矩形添加一个阴影效果，具体参数如图所示。
5.使用直线工具画出两条长为153的线段，颜色为#677387，描边种类为1 像素柔化，分别放在上方矩形的下边及下方矩形的上边。
6. 加入标题列的文字，字体为elektr_02_5，大小为10，不消除锯齿，加入内容区的文字，字体为 04b03b，大小为 8，不消除锯齿，7. 在帧面板，单击“新建/重制帧”按纽，新增一帧。
返回到第一帧，按“Ctrl”+“A”全选中画布上的所有对象，按“Ctrl” +“C” 复制，然后到第二帧，按“Ctrl” +“V” 粘贴，然后按住SHIFT键不放，选择将帧二上的HOME、FIREWORKS、DREAMWEAVER 文字，往上及往左各偏移1 个像素，这是要制造当鼠标移到文字上时，使其产生偏移的效果。
《网页设计与制作》教案
《网页设计与制作》教案第一章：网页设计基础1.1 网页设计概述介绍网页设计的概念、目的和重要性讨论网页设计的标准和原则1.2 网页设计流程讲解网页设计的基本流程，包括需求分析、设计稿、切片、编码和测试等步骤1.3 网页设计工具介绍常用的网页设计工具，如Photoshop、Dreamweaver、Fireworks等第二章：HTML与CSS基础2.1 HTML概述介绍HTML的概念、作用和基本结构2.2 HTML标签讲解常用的HTML标签，如、段落、图像、、列表等2.3 CSS概述介绍CSS的概念、作用和基本语法2.4 CSS选择器讲解常用的CSS选择器，如类选择器、ID选择器、属性选择器等第三章：网页布局与排版3.1 网页布局概述介绍网页布局的概念和重要性3.2 常用的网页布局方法讲解常用的网页布局方法，如固定布局、百分比布局、弹性布局等3.3 排版与字体介绍排版和字体的概念、作用和常用属性3.4 响应式网页设计讲解响应式网页设计的概念、方法和实现方式第四章：网页特效与交互4.1 网页特效概述介绍网页特效的概念和作用4.2 JavaScript基础讲解JavaScript的概念、作用和基本语法4.3 常用的网页特效与实例讲解常用的网页特效，如鼠标悬停效果、下拉菜单、滚动动画等，并提供实例进行演示4.4 交互式网页设计讲解交互式网页设计的概念、方法和实现方式第五章：网页设计与制作实践5.1 实践项目概述介绍实践项目的需求和目标5.2 网页设计稿制作根据实践项目需求，使用设计工具制作网页设计稿5.3 网页编码与测试使用HTML和CSS编写网页代码，并进行测试和调试讲解网页发布的步骤和注意事项，以及常用的网页推广方法第六章：网页图像与多媒体6.1 图像格式与优化介绍常见的网页图像格式，如JPG、PNG、GIF等，以及图像优化方法6.2 音频与视频讲解如何在网页中嵌入音频和视频，以及常用的媒体格式6.3 Flash动画介绍Flash动画的概念、制作方法和在网页中的应用6.4 动态效果与动画讲解如何在网页中实现动态效果和动画，包括使用CSS动画和JavaScript实现第七章：网页服务器与数据库7.1 服务器概述介绍网页服务器的概念、作用和常用服务器软件7.2 数据库概述介绍数据库的概念、作用和常用数据库管理系统7.3 动态网页制作基础讲解动态网页制作的基本原理，如服务器端编程和数据库连接7.4 实践项目：搭建简易的个人博客系统讲解如何使用服务器和数据库搭建一个简易的个人博客系统，包括前端设计和后端编程第八章：网页安全与SEO介绍网页安全的概念和重要性，以及常见的网络安全威胁8.2 网页安全措施讲解如何防范网络攻击和提高网页安全性，如使用SSL证书、X-Frame-Options 等8.3 SEO概述介绍搜索引擎优化（SEO）的概念、作用和方法8.4 SEO实践技巧讲解如何优化网页内容、结构和，以提高搜索引擎排名第九章：网页设计与制作的进阶技巧9.1 响应式网页设计深入讲解响应式网页设计的原理和实践方法，包括媒体查询和弹性布局9.2 前端框架与库介绍常用的前端框架和库，如Bootstrap、jQuery、React等，以及如何使用它们提高网页制作效率9.3 网页性能优化讲解如何提高网页加载速度和性能，包括图片优化、代码压缩和缓存策略9.4 实践项目：制作一个响应式商务网站讲解如何使用响应式设计和前端框架制作一个商务网站，包括布局、样式和交互设计第十章：网页设计与制作的拓展与趋势10.1 网页设计与制作的未来趋势探讨网页设计与制作的发展方向，如虚拟现实（VR）、增强现实（AR）等技术的应用10.2 网页设计规范与最佳实践介绍网页设计规范和最佳实践，以提高网页质量和用户体验10.3 跨平台网页设计与制作讲解如何使用跨平台技术，如PWA（Progressive Web Apps）、Node.js等，实现网页在不同平台和设备的兼容性和性能10.4 实践项目：制作一个跨平台的网页应用重点和难点解析重点环节1：网页设计基础和流程网页设计的标准和原则是设计的基石，需要重点掌握。
网页制作Fireworks
图10-1绿色环保协会徽标 绿色环保协会徽标
第十项目 理
第10项 10项 矢量绘制文本编辑与位图处 目
项目任务分解： 项目任务分解： 任务１ 绘制“月牙形” 任务１：绘制“月牙形” 任务２ 创建元件“树木” 任务２：创建元件“树木” 任务３ 编辑文字“绿色环保协会” 任务３：编辑文字“绿色环保协会”
第11项目 11项目
任务２：截取“海螺”图像并输入文本
知识点： 知识点： 魔术棒” “魔术棒”工具 选区的添加与删减 任务的实现： 任务的实现： 截取“海螺” １、截取“海螺”图像 选择位图工具中的“魔术棒” 选择位图工具中的“魔术棒”工具 ，选中整个 执行菜单命令【选择】 反选】 背景 ，执行菜单命令【选择】/【反选】，将海螺 图像复制到“风景.jpg” .jpg”中 对其大小、 图像复制到“风景.jpg”中，对其大小、形状进行 调整，在属性面板中将其透明度设置为60 60。 调整，在属性面板中将其透明度设置为60。 ２、输入文本 选择广本工具，设置相应字体，输入文字“ 选择广本工具，设置相应字体，输入文字“椰 岛自驶游” 岛自驶游”
上机操作练习题
第10项 10项 目
1、齿轮 操作提示：应用路径的联合来产生齿状。 操作提示：应用路径的联合来产生齿状。 2、扇子 操作提示：应用历史面板中的“重放” 操作提示：应用历史面板中的“重放”来复制各个 扇叶。 扇叶。 3、贺年卡设计 操作提示： 操作提示： 绘制矩形，文字附加到矩形路径上; 绘制矩形，文字附加到矩形路径上;文字转化为 路径，拖动路径上的节点来改变文字的形状； 路径，拖动路径上的节点来改变文字的形状；
任务2 任务
创建元件“树木” 创建元件“树木”
知识点： 知识点： 元件的创建 元件的应用 任务的实现： 任务的实现： 创建图形元件“树木” 1、创建图形元件“树木” 选择【编辑】 插入】 新建元件】 选择【编辑】/【插入】/【新建元件】，创 建图形元件“树木” 建图形元件“树木”。 2、编辑元件 应用矢量工具中的智能多边形工具， 应用矢量工具中的智能多边形工具，绘制一 个三角形，按住Alt键拖动，复制三角形， Alt键拖动 个三角形，按住Alt键拖动，复制三角形，配合直 线工具，绘制出树木图形元件。 线工具，绘制出树木图形元件。
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、页面结构：整个网站采用统一的结构，分为上下两个部分，上面为网站的导航条，下面左边以不同的男式服饰图片及文字标题表示各页主题。
右边为内容区，以深色带条纹的图片作为背景。
第2讲 利用Fireworks处理网站中的图片
子项目二 第2讲 利用Fireworks处理网站中的图片
在子项目一中我们已经撰写好了网站建设策划书， 也收集了很多相关素材。其中有很大一部分就是图片。以 文字为主的网页文档看起来枯燥而空洞，利用图片可以制 作出更具有魅力的网页。但是通过各种渠道收集来的图片 大小、色彩各异，怎样将它们与网页和谐的融为一体，为 网页增添魅力呢？
http://10.10.152.156
★ 拓展练习
★ 操作演示
任务： 1．使用Fireworks将 book4.jpg～book8.jpg的大小统一裁减
为同一大小。 2．使用Fireworks对图片的色彩进行调整。 3．灵活应用Fireworks的相关操作对图片进行装饰。 4．灵活应用Fireworks的相关操作对文字进行装饰。 5．将所学到的技能使用到所承接项目的素材整理和加工中去。
——这就需要对这些图片进行处理了！ 图形图像处理是进行网页设计必不可少的一个重要环 节,图形图像处理主要包括:颜色调整、图像合成、图片装 饰、数码照片处理等。
★ 项目分析
1．进一步理解Web图像格式（GIF、JPEG、PNG ）。
2．会批量裁剪统一规格的图像。 3．会对Web图像调整颜色（亮度/对比度、反转、
曲线、自动色阶、色相/饱和度、色阶）。 4．会对图像进行模糊处理。 5．会使用“查找边缘”效果。 6．会对图像进行锐化处理。 7．会使用Fireworks样式。 8．会运用图像创意，实现图像特效。
★ 技能要求
★ 项目展示
1．批量裁剪统一规格的图ቤተ መጻሕፍቲ ባይዱ 裁剪工具，保存命令，文件-批处理 2．对Web图像进行颜色调整 滤镜-调整颜色 3．对图像进行模糊处理 滤镜-模糊 4．使用“查找边缘”效果 滤镜-其他-查找边缘 5．对图像进行锐化处理 滤镜-锐化 6. 使用Fireworks样式 7. 运用图像创意，实现图像特效 命令-创意
网页设计与制作-第10章：Fireworks基础及基本操作PPT课件
.
6
10.2.2 网络 网格可以精确放置对象。选择【视图】|【网格】|【显示网格】命令， 可以显示网格。
.
7
10.2.3 辅助线 辅助线可以在文档中创建用于定位的辅助线，使对象对准某个位置。
在水平标尺或者垂直标尺上按下鼠标左键向文档内拖动，即产生一条水平 方向或垂直方向的辅助线，到合适位置时松开鼠标，完成辅助线的创建。
.
24
5．反相 反相是照片的底片效果。选择【滤镜】|【调整颜色】|【反相】，将使照片 转为底片效果。
.
25
二、查找边缘
查找边缘可以勾勒出图像的线条，带有鲜明颜色对比的图像比较适合 使用这一操作。
选择【滤镜】|【其他】|【查找边缘】，对图像应用滤镜，
.
26
三、模糊
模糊滤镜用于柔化、修饰一副影像或一个选择区域，通过转化像素的 方法平滑处理影像中生硬的部分，使图像中对比强烈的像素间柔和过渡 ，或者在图像中必要的像素区域添加适当的阴影，使整个图像看起来更 柔和。
.
21
2．调整曲线
曲线用于调整图像的整个色调范围，相比于色阶调整，曲线调整的效 果更精确。选择【滤镜】|【调整颜色】|【曲线】，然后在图所示的对话 框中进行设定。其中X轴代表颜色的原始亮度，其数值在input（输入）文 本框中显示。Y 轴代表调整后的新的亮度值，其数值在output（输出）文 本框中显示。可以在文本框中直接输入值，范围是0~255。
“模糊”柔化所选像素的焦点。“进一步模糊”的处理效果大约是模 糊的三倍。“高斯模糊”对每个像素应用加权平均模糊处理以产生朦胧 效果。
选择【滤镜】|【模糊】|【高斯模糊】，拖动“模糊范围”滑块设置 模糊效果的强度，增大范围会产生更强的模糊效果。
第10章节 网页图形处理工具Fireworks 8
图10-3 Fireworks 8的工作界面
4
10.1 Fireworks 8的基本概念
1．工作区 在工作区中不仅可以绘制矢量图，也可以直接处理位图。工 作区上有4个选项卡，当前为“原始”选项卡，也就是工作区， 只有在此窗口中才能编辑图像文件；而在“预览”选项卡中可 以模拟浏览器预览制作好的图像；“ 2幅”和“ 4幅”选项卡则 分别是在2个和4个窗口中显示图像的制作内容。 2．工具箱 Fireworks 8中的工具种类齐全，使用这些工具，用户可以在 单个文件中创建和编辑矢量或位图图形。
网站规划与网页设计
王建平
fysfwjp@
2018年12月9日
吕梁高等专科学校汾阳师范分校
1
第10章 网页图形处理工具Fireworks 8
10.1 10.2 10.3 10.4 10.5 10.6 Fireworks 8的基本概念 图形的优化 图像的切片 图像的导出 制作动态按钮 制作下拉菜单
【例10-3】使用Fireworks制作一个下拉菜单，当鼠标指针移 到“电影世界”文字上的时候，会出现一个包含下级子菜单的 下拉菜单，单击其中的某个菜单项时，会打开相应的网页，如 图10-48所示。
图10-6 画布属性面板
图10-7 设置画布颜色
9
10.1 Fireworks 8的基本概念
单击“画布大小”按钮将弹出“画布大小”设置对话框，如 图 10-8 所示。在“新尺寸”区内可以输入新的宽度、高度，并 在“锚定”栏中设置画布的固定点，当画布的大小被改变时会 以选中的固定点为基准来更改画布的大小。 单击画布属性面板中的“图像大小”按钮，将弹出“图像大 小”对话框，如图 10-9 所示。在“像素尺寸”区中可以设置工 作区的宽度和高度数值。若选中“约束比例”项，当宽度或高 度二者之中某一数值被改变后，另一个数值也会等比例地随之 改变。
最新整理Fireworks制作网页的方法
F i r e w o r k s制作网页的方法F i r e w o r k s是制作网页的神器，那么如何利用F i r e w o r k s制作一个简单的网页呢?下面是学习啦小编为大家整理的F i r e w o r k s制作网页的方法，希望大家喜欢~F i r e w o r k s制作网页的效果图:下面开始讲解F i r e w o r k s制作网页的方法:1.布局先来说一下我们制作网页一般的大小高度：没有一个固定值，因为每个人的浏览器的工具栏不同，我见过有的浏览器工具栏被插件占了半个屏幕，所以高度没有确切值。
宽度：1、在I E6.0下，宽度为显示器分辨率减21，比如1024的宽度-21就变成1003。
但值得注意的是I E6.0(或更低)无论你的网页多高都会有右侧的滚动条框。
2、在F i r e f o x下，宽度的分率辨减19。
比如1024的宽度-19就变成10053、在O p e a r下，宽度的分率辨减23。
比如1024的宽度-23就变成1001注：F i r e f o x或O p e a r在内容少于浏览器高度时不显示右侧滚动条。
所以如果是1024的分辨率，你的网页不如设成1000安全一点。
如果是800的分辨率一般都设成770。
这些需要明白并且牢记，不然很可能做出来不符合浏览器要求，不过一般我们都回设定的再稍微小一点，应为有些浏览器加了插件或者其他的东西宽度会有变化所以 800的分辨率一般设定760左右，1024的设定990左右.我这样用辅助线和标尺把大概范围划分出来，注意我的划分，正好是770，和1000的地方，应为我要做的网站是1024分辨率下的，但是考虑到依然可能存在800分辨率的用户，所以我回把主要的内容和菜单都放置在770以内，770-1000的地方放一些辅助的东西，这个习惯特别是在做一些门户网站设计的时候更要考虑以下，毕竟改善用户体验也是我们要考虑的问题.2.开始工作我们继续讲解，现在我们来画上部菜单部分的内容，其实很简单拉，就是画一个方框，一个圆，然后组合，加上渐变就可以了，如下图设置3.下面我们来画哪个类似徽章的东西其实也很简单，创意是类似奖状上贴的哪个获奖标志一样，会让网站生动一点，嘿嘿.我们选择多边形，如图:设置如下，继续贴图，大家要注意一下图层顺序，拖动到下层就好了恩要注意，这个图层我们固定了以后通常就不动了，所以要锁定，不然鼠标晃来晃去很容易把图移位，注意图层那里点一下就多了一个小锁子，方便吧，这下他就彻底不干扰我们了!好的我们继续，其实其他的东西都大同小异我们来研究一下细节.我最喜欢的就是f i r e w r o k s超级多的纹理，在p s里面有些纹理要自己做真的好麻烦啊!我最喜欢的对角线，恩看页面左边的渐变部分，其实就是拉出来了一个矩形，然后加上线性的渐变，然后加上对角线的纹理，稍微调整一下透明度，就这么简单，效果却很好看，嘿嘿下一个小地方，就是产品资讯的背景框，其实也很简单就是一个矩形，然后外框为红色，矩形加一个内部发光，发浅灰色的光，就这样就成了下一个地方就是右上角大家可以看到一个类似网格的底纹其实就是一个矩形，再加上一个蒙版，一个渐变，就o k了，现在看起来是不是生动很多，嘿嘿O K，看图。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
使用Fireworks编辑网页图像 第十章 使用 编辑网页图像
五、制作与优化动画 • 在 Fireworks 中制作动画的一种方法是通过创 Fireworks中制作动画的一种方法是通过创 建元件并不停地改变它们的属性来造成运动的 错觉。一个元件就像是一个演员， 错觉 。一个元件就像是一个演员， 其动作是由 用户设计的。 用户设计的 。 每个元件的动作储存在一个帧中 当按顺序播放所有帧时，就成了动画。 。当按顺序播放所有帧时，就成了动画。 1、制作GIF动画 制作GIF动画 GIF • GIF 动画是网页中常用的一种动画文件格式 。 GIF动画是网页中常用的一种动画文件格式 动画是网页中常用的一种动画文件格式。 它的体积小，利于网络传输。 它的体积小，利于网络传输。 • GIF 动画能够输出透明背景的图片 ， 可以应用 GIF动画能够输出透明背景的图片 动画能够输出透明背景的图片， 于各种颜色背景的网页。 于各种颜色背景的网页。 2、优化与导出动画 • 文件/导出向导 文件/ • 示例：制作字体遮罩动画（P384） 示例：制作字体遮罩动画（ 384）
使用Fireworks编辑网页图像 第十章 使用 编辑网页图像
4）4幅视图 • 除了左上角的原图像外，可以单击选择任意一幅图 除了左上角的原图像外， 在优化面板中设置不同的优化参数， 像，在优化面板中设置不同的优化参数，然后从中 选择一种显示效果好而文件大小又适宜网络传输的 优化方案。 优化方案。 3、面板组 二、绘制图形 1、绘图工具 2、选择对象和像素（P364） 选择对象和像素（ 364） 三、编辑图像 • Fireworks 可以进行两种图像模式的编辑操作 ， 一 Fireworks可以进行两种图像模式的编辑操作 可以进行两种图像模式的编辑操作， 种是对基于路径的矢量对象（简称对象模式） 种是对基于路径的矢量对象（简称对象模式）的操 另一种是对基于像素的图形对象（ 作，另一种是对基于像素的图形对象（简称图像模 的操作。 式）的操作。
ቤተ መጻሕፍቲ ባይዱ
使用Fireworks编辑网页图像 第十章 使用 编辑网页图像
1、修饰图像（P365） 修饰图像（ 365） 2、填充图像 • 通过属性窗口进行填充修饰 3、应用样式 • 样式主要用于图形及文字对样式的直接套用。 样式主要用于图形及文字对样式的直接套用。 • 窗口/样式 窗口/
使用Fireworks编辑网页图像 第十章 使用 编辑网页图像
使用Fireworks编辑网页图像 第十章 使用 编辑网页图像
四、层与蒙版 1、层的基本操作 • 层把一个 Fireworks 文档分成不连续的平面 ， 层把一个Fireworks 文档分成不连续的平面， Fireworks文档分成不连续的平面 一个文档可以包含很多层， 一个文档可以包含很多层， 而每一个层又可以 包含很多对象。 Fireworks中 包含很多对象 。 在 Fireworks 中 ， 层面板列出 层以及每一层包含的对象。 层以及每一层包含的对象。 利用层面板不仅可 以合并位图以及合并位图蒙版，还可以命名、 以合并位图以及合并位图蒙版，还可以命名 、 隐藏、显示和改变层及对象的层叠顺序，利用 隐藏、 显示和改变层及对象的层叠顺序， 层面板还可以添加和删除层。 层面板还可以添加和删除层。 • 示例：制作网页文字动画效果（P377） 示例：制作网页文字动画效果（ 377） 2、蒙版的基本操作 • 蒙版能够隐藏或显示对象的某些部分 ， 可以使 蒙版能够隐藏或显示对象的某些部分， 用任何一种蒙版技术使对象具有创造性效果。 用任何一种蒙版技术使对象具有创造性效果。 • 示例：制作蒙版遮罩效果（P379） 示例：制作蒙版遮罩效果（ 379）
网页设计与制作
第一章 第二章 第三章 第四章 第五章 第六章 第七章 第八章 第九章 第十章 HTML语言基础 语言基础 初识Dreamweaver 初识 创建与应用表格 使用层和框架布局页面 CSS样式与模板的使用 样式与模板的使用 行为、 行为、库和资源管理 建立动态网站 Flash动画基础知识 动画基础知识 创建动画 使用Fireworks编辑网页图像 使用 编辑网页图像 2 4 3 3 3 3 3 3 3 3
1
使用Fireworks编辑网页图像 第十章 使用 编辑网页图像
Fireworks工作环境 一、 Fireworks工作环境 • Fireworks MX 2004 的工作界面由 4 部分组成 ： 2004的工作界面由 部分组成： 的工作界面由4 文件视图、功能面板、工具箱和属性面板。 文件视图、功能面板、工具箱和属性面板。 1、工具栏 2、视图方式 1）原始视图 • 创建图形或对图像进行编辑操作 2）预览视图 • 可通过优化面板对图像进行优化操作 3）2幅视图 • 可以预览原图像与优化图像后的对比效果
4、创建热点区域 1）使用热点工具 • 矩形热点 • 椭圆形热点 • 多边形热点 2）热点区域的创建和编辑 • 通过属性面板修改热点区域的参数 5、应用切片 • 切片就是将图形分割成一个个的小区域 ， 在 切片就是将图形分割成一个个的小区域， Internet上浏览信息时 上浏览信息时， Internet 上浏览信息时 ， 将要加载的较大图片 分割成小图片后，可实现图片的快速加载。 分割成小图片后，可实现图片的快速加载。 • 使用切片工具