第3章利用fireworkscs5设计网页界面
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
位图图像是用像素点描述图像的。在位图中，图像的细 节由每一个像素点的位置和色彩来决定。位图图像的品质 与图像生成时采用的分辨率有关，即在一定面积的图像上 包含有固定数量的像素。当图像放大显示时，图像变成马 赛克状，因此放大图像的尺寸，会降低图像的显示品质， 如图所示。制作位图图像的软件常有Photoshop、 Fireworks、ImageReady等。
2.2 Fireworks CS5工作界面
Fireworks CS5是一个强大的网页图形设计工具，使用 它可以创建和编辑位图、矢量图形，还可非常轻松地做出 各种网页设计中常见的效果，例如动画、翻转图像、导航 条、下拉菜单等。设计完成以后，如果要在网页设计中使 用，可将它输出为HTML文件，还能输出在Photoshop， Illustrator和Flash等软件中编辑的格式。
本实例主要涉及的知识点：渐变效果的设置、文本输入、素材导入、 图层混合模式的使用、图层不透明度的设置、以及图层位置的设置等。
操作步骤如下：
（1）新建文档：1000*222像素
（2）背景颜色设置：绘制一个与画布大小一致的矩形，填充为 线性渐变，由#003C58到#0176AB再到#00C4EC。
（3）输入文本：十年品质 创造一流服务理念。
3.2.1 Fireworks中图像处理的流程
Fireworks可创建和编辑矢量图像与位图图像，并可导 入和编辑Photoshop 和 Illustrator 文件。fireworks源 文件格式为png，可以保存图层、图像特效、图像切片等 相应的信息。
在图像插入到网页之前，一般需要将图像进行处理。在 Fireworks中处理网页图像一般遵循以下步骤：创建图形 和图像→创建Web对象→优化图像→导出图像。
切片区域的创建有两种不同的方法，第一种是单击工具栏的“切 片”工具 ，进行指定区域大小的切割；第二种是直接选中某个对象 ，在右键弹出菜单上选择“插入矩形切片”或“插入多边形切片”， 为添加切片后的网页文件效果。
在完成切片分割后，单击“文件”→“导出”，选择导出类型为 “HTML和图像”，切片类型为“导出切片”，选择导出路径后，便可 以完成切片区域的导出，得到众多小的网页分割图和网页，用于网站 建设。
分辨率的大小直接影响图像的品质。分辨率越高， 图像越清晰，文件也就越大，计算机运行就越慢。
所以在制作图像时，不同品质的图像设置适当的分辨 率即可。例如打印输出的图像分辨率就需要高一些，一般 设置为300dpi，如果只是网页图像72dpi就足够了。
3.1.3 图像文件格式
在计算机绘图中，有较多的图形和图像处理软件，而不同的 软件所保存的图像格式则是不相同的。
上机实验
1．背景知识 根据前面所学的色彩应用的知识，再结合本章所学的Fireworks软件
操作的知识，制作静态图像及动态图像的效果图，能够独立设计 出网页平面图。 2．实验准备工作 将实验的样图及相应的图像及文本素材发送到学生主机，供学生参考 使用。 3．实验要求 （1）制作LOGO。要求： 1）使用钢笔工具，绘制一个盾形路径的一半，并拷贝翻转合成一个 完整的盾形，盾形是对称的； 2）合成盾形后填充色彩，并添加文本，生成企业LOGO。
3.1.2 图像分辨率
分辨率确定了一幅图像的品质和能够打印或显示的细 节含量。分辨率的单位为像素/英寸（英文缩写为dpi）， 表示图像上每一线性英寸的像素数。线性是指在直线上计 算像素数，如果图像的分辨率是72dpi，即每英寸72个像 素，则每平方英寸上有5184个像素。假设图像中的像素数 是固定的，增加图像的尺寸将降低其分辨率，反之亦然。
（4）单击“文件”菜单→“导入”命令，将素材文件夹中的素 材导入到画布中，设置图层的混合模式，图层的不透明度 ，并调整图像的位置和图层的上下顺序。
3.6 网站首页的界面设计
一般而言，首页设计 几乎等同于整个网站设计 ，因此网站首页设计非常 重要。首页设计要考虑的 问题涉及配色方案的确定 、版面布局、网站内容的 填充等。
要制作首页，首先要 对主页有一个规划，即首 页的版面布局，这样才能 合理安排网页的内容。
在3.3至3.5节中已经把公司的logo、导航栏、banner 设计完成。本节延续前面的内容。
新建一个文档，画布大小为1024*1070，然后根据页 面的版面布局，导入公司的logo、导航栏、banner等。
继续网页界面中主体内容的设计。用线段将页面分成 三栏，左栏：产品分类树和联系方式，右栏是广告区域， 中间栏内容较多，为公司新闻、产品展示以及公司简介等 ，分别填充相应的图像和文本。
（6）单击“直线”工具，设置颜色为灰色#A1ACB2，绘制多段垂直线段 作为按钮的分割线。利用对齐面板将分割线对齐。
3.5 制作精美Banner
Banner可以是网站页面的横幅广告，也可以是游行活动时用的旗帜， 还可以是报纸杂志上的大标题。Banner主要体现中心意旨，形象鲜明 表达最主要的情感思想或宣传中心。放置在广告商的页面上，是互 联网广告中最基本的广告形式。
Fireworks CS5的工作界面由5个部分组成：“菜单”栏 、“文档”窗口、“工具箱”面板、“属性”面板、集成 工作面板，如图所示。
3.3 logo的设计
在市场竞争日逾激烈的今天，严格管理和正确使用统一标准的公司的徽标，将为我们 提供一个更有效、更清晰和更亲切的市场形象。LOGO是人们在长期的生活和实践中形 成的一种视觉化的信息表达方式，具有一定含义并能够使人理解的视觉图形，具有简 洁、明确、一目了然的视觉传递效果。本节讲述天星电子元件公司网站的LOGO设计。
本章小结
本章主要介绍了Fireworks使用方法和技巧，创建图形图像 。
1. 利用Fireworks 设计LOGO 2. 利用Fireworks设计导航条 3. 利用Fireworks设计banner 4. 利用Fireworks设计整幅Web页面
本章练习题
（1）简述位图和矢量图的区别。 （2）对待文本可以像对待矢量对象一样处理吗？ （3）将大图分隔成小图有什么优点？如何使用切片工具？ （4）按钮有几种状态，哪种状态可不用编辑？
3.4 设计网站按钮和导航栏
导航栏是指位于页眉区域的横幅图片上方或下方的水平或垂直的导 航按钮，它起着链接网站各个页面的作用。网站使用导航栏是为了 让访问者方便地找到所需要的资源。
本实例主要涉及的知识点：渐变效果的设置、文本输入、按钮的制作、 对齐工具的使用、导航栏设计等。
操作步骤如下：
（1）新建文档：1000*50像素
案例导入：
本章将带你亲身体验Fireworks在网页创作中的强大功能，通过一个网站界面的设计 过程，详细介绍Fireworks在网页设计的不同阶段是如何处理各种不同任务的。
天星电子元件公司网站
3.1 图像基础知识
3.1 图像类型 （1）矢量图
矢量图形是用线条和填充色等数学信息来描述图形的， 一般矢量格式的文件通常比较小，对矢量图进行操作，改 变图形尺寸、形状等，不会改变图形的显示品质。制作矢 量格式图形的软件有Freehand、CorelDraw、AutoCAD等。 （2）位图
《网页设计与网站建设》
主讲人：杜永红
第3章 利用fireworks CS5设计网页界面
3.1 图像基础知识 3.2 fireworks CS5简介 3.3 LOGO的设计 3.4 设计网站按钮和导航栏
3.5 制作精美Banner 33.4.6 网站首页的界面设计 3.7 网页图像的切片和导出
本章详细介绍了如何利用Fireworks软件进行图像处理 和网页界面的设计。 [本章学习目的] 通过学习，读者能够： 1.掌握Fireworks软件基本操作 2.掌握使用fireworks软件设计logo、导航栏、banner 、网站平面效果图 3.掌握将图像切割、导出为网页的方法
（2）背景颜色设置：绘制和画布大小一致的矩形，填充为轮廓渐变： 由#293036到#181D21
（3）输入文本：首页
（4）按钮的制作：选中文本，单击F8快捷键，将文本转换为按钮元件 ，命名为首页，双击“首页”按钮元件，进入到按钮的编辑中，编辑 弹起、滑过、按下三个状态。
（5）多次复制“首页”按钮，并分别修改“首页”按钮文本为“公司 简介”、“新闻动态”等。
本实例主要涉及的知识点：文本输入、滤镜效果的应用、渐变效果的设置以 及矢量工具的使用等。操作步骤如下：
（1）新建文档：400*140像素 （2）输入文本：“天星” （3）“滤镜效果”使用：阴影和光晕中的光晕 （4）“渐变”工具的使用：浅绿色到鹅黄色再到白色 （5）克隆图像：克隆文本后，修改文字为“电子元件”，修改字体大小。 （6）“矢量”工具的使用：绘制五角星，并复制多个。
（2）制作Banner。要求： 1）导入图片作为背景； 2）输入企业文本，并适当调整文本大小，完成企业Banner。 （3）制作按钮和导航栏。要求： 1）绘制一个矩形，渐变填充，添加文本，转换为按钮元件。 2）按钮克隆后，修改文本和样式显示效果，水平排列，添加不同的链
接路径，即为导航栏。 （4）设计Web页面。要求： 1）布局页面，规划网页内容。 2）绘制页面分区，填充网页内容，切割图片，导出网页。 4．课时安排 上机实验安排4课时，前两项实验要求为2课时，后两项要求为2课时。
作为设计者来说，一般采用Fireworks或Photoshop之 类的设计软件来设计网页界面的效果图，图像切片后，导 出到网页编辑软件，如Dreamweaver中进行编辑，这种方 法可以使页面控制更加得心应手。
3.7 网页图像的切片和导出
使用Fireworks进行网页界面设计的过程中，经常会使用“切片” 工具将一幅大图像分割为一些小的图像切片，然后在网页中通过没有 间距和填充的表格重新将这些小的图像无缝地拼接起来，成为一幅完 整的图像。这样做可以降低图像的大小，减少网页的下载时间，并且 能创造交互的效果，如翻转图像等，还能将图像的一些区域用html来 代替。Fireworks在网页切片制作方面有很强的优势。
例如：Photoshop软件所支持位图文件格式有：PSD、TIF、 BMP、JPG、GIF和PNG等20余种格式的文件。PSD是 Photoshop软件的源文件格式，可保留图层等图像文件的 全部信息。
3.2 fireworks CS5简介
Fireworks是一款专为网络图形设计的图形编辑软件， 这就大大简化了网络图形设计的工作难度。使用 Fireworks即可以设计静态图像，也可以轻松地制作出十 分动感的GIF动画，还可以轻易地完成大图切割、动态按 钮、动态翻转图等。借助于Fireworks CS5，您可以在直 观、可定制的环境中创建和优化用于网页的图像并进行精 确控制。Fireworks的优化工具可帮助您在最佳图像品质 和最小压缩大小之间达到平衡。它与 Dreamweaver 和 Flash 共同构成的集成工作流程可以让您创建并优化图像 。利用可视化工具，无需学习代码即可创建具有专业品质 的网页图形和动画，如变换图像和弹出菜单等。
2.2 Fireworks CS5工作界面
Fireworks CS5是一个强大的网页图形设计工具，使用 它可以创建和编辑位图、矢量图形，还可非常轻松地做出 各种网页设计中常见的效果，例如动画、翻转图像、导航 条、下拉菜单等。设计完成以后，如果要在网页设计中使 用，可将它输出为HTML文件，还能输出在Photoshop， Illustrator和Flash等软件中编辑的格式。
本实例主要涉及的知识点：渐变效果的设置、文本输入、素材导入、 图层混合模式的使用、图层不透明度的设置、以及图层位置的设置等。
操作步骤如下：
（1）新建文档：1000*222像素
（2）背景颜色设置：绘制一个与画布大小一致的矩形，填充为 线性渐变，由#003C58到#0176AB再到#00C4EC。
（3）输入文本：十年品质 创造一流服务理念。
3.2.1 Fireworks中图像处理的流程
Fireworks可创建和编辑矢量图像与位图图像，并可导 入和编辑Photoshop 和 Illustrator 文件。fireworks源 文件格式为png，可以保存图层、图像特效、图像切片等 相应的信息。
在图像插入到网页之前，一般需要将图像进行处理。在 Fireworks中处理网页图像一般遵循以下步骤：创建图形 和图像→创建Web对象→优化图像→导出图像。
切片区域的创建有两种不同的方法，第一种是单击工具栏的“切 片”工具 ，进行指定区域大小的切割；第二种是直接选中某个对象 ，在右键弹出菜单上选择“插入矩形切片”或“插入多边形切片”， 为添加切片后的网页文件效果。
在完成切片分割后，单击“文件”→“导出”，选择导出类型为 “HTML和图像”，切片类型为“导出切片”，选择导出路径后，便可 以完成切片区域的导出，得到众多小的网页分割图和网页，用于网站 建设。
分辨率的大小直接影响图像的品质。分辨率越高， 图像越清晰，文件也就越大，计算机运行就越慢。
所以在制作图像时，不同品质的图像设置适当的分辨 率即可。例如打印输出的图像分辨率就需要高一些，一般 设置为300dpi，如果只是网页图像72dpi就足够了。
3.1.3 图像文件格式
在计算机绘图中，有较多的图形和图像处理软件，而不同的 软件所保存的图像格式则是不相同的。
上机实验
1．背景知识 根据前面所学的色彩应用的知识，再结合本章所学的Fireworks软件
操作的知识，制作静态图像及动态图像的效果图，能够独立设计 出网页平面图。 2．实验准备工作 将实验的样图及相应的图像及文本素材发送到学生主机，供学生参考 使用。 3．实验要求 （1）制作LOGO。要求： 1）使用钢笔工具，绘制一个盾形路径的一半，并拷贝翻转合成一个 完整的盾形，盾形是对称的； 2）合成盾形后填充色彩，并添加文本，生成企业LOGO。
3.1.2 图像分辨率
分辨率确定了一幅图像的品质和能够打印或显示的细 节含量。分辨率的单位为像素/英寸（英文缩写为dpi）， 表示图像上每一线性英寸的像素数。线性是指在直线上计 算像素数，如果图像的分辨率是72dpi，即每英寸72个像 素，则每平方英寸上有5184个像素。假设图像中的像素数 是固定的，增加图像的尺寸将降低其分辨率，反之亦然。
（4）单击“文件”菜单→“导入”命令，将素材文件夹中的素 材导入到画布中，设置图层的混合模式，图层的不透明度 ，并调整图像的位置和图层的上下顺序。
3.6 网站首页的界面设计
一般而言，首页设计 几乎等同于整个网站设计 ，因此网站首页设计非常 重要。首页设计要考虑的 问题涉及配色方案的确定 、版面布局、网站内容的 填充等。
要制作首页，首先要 对主页有一个规划，即首 页的版面布局，这样才能 合理安排网页的内容。
在3.3至3.5节中已经把公司的logo、导航栏、banner 设计完成。本节延续前面的内容。
新建一个文档，画布大小为1024*1070，然后根据页 面的版面布局，导入公司的logo、导航栏、banner等。
继续网页界面中主体内容的设计。用线段将页面分成 三栏，左栏：产品分类树和联系方式，右栏是广告区域， 中间栏内容较多，为公司新闻、产品展示以及公司简介等 ，分别填充相应的图像和文本。
（6）单击“直线”工具，设置颜色为灰色#A1ACB2，绘制多段垂直线段 作为按钮的分割线。利用对齐面板将分割线对齐。
3.5 制作精美Banner
Banner可以是网站页面的横幅广告，也可以是游行活动时用的旗帜， 还可以是报纸杂志上的大标题。Banner主要体现中心意旨，形象鲜明 表达最主要的情感思想或宣传中心。放置在广告商的页面上，是互 联网广告中最基本的广告形式。
Fireworks CS5的工作界面由5个部分组成：“菜单”栏 、“文档”窗口、“工具箱”面板、“属性”面板、集成 工作面板，如图所示。
3.3 logo的设计
在市场竞争日逾激烈的今天，严格管理和正确使用统一标准的公司的徽标，将为我们 提供一个更有效、更清晰和更亲切的市场形象。LOGO是人们在长期的生活和实践中形 成的一种视觉化的信息表达方式，具有一定含义并能够使人理解的视觉图形，具有简 洁、明确、一目了然的视觉传递效果。本节讲述天星电子元件公司网站的LOGO设计。
本章小结
本章主要介绍了Fireworks使用方法和技巧，创建图形图像 。
1. 利用Fireworks 设计LOGO 2. 利用Fireworks设计导航条 3. 利用Fireworks设计banner 4. 利用Fireworks设计整幅Web页面
本章练习题
（1）简述位图和矢量图的区别。 （2）对待文本可以像对待矢量对象一样处理吗？ （3）将大图分隔成小图有什么优点？如何使用切片工具？ （4）按钮有几种状态，哪种状态可不用编辑？
3.4 设计网站按钮和导航栏
导航栏是指位于页眉区域的横幅图片上方或下方的水平或垂直的导 航按钮，它起着链接网站各个页面的作用。网站使用导航栏是为了 让访问者方便地找到所需要的资源。
本实例主要涉及的知识点：渐变效果的设置、文本输入、按钮的制作、 对齐工具的使用、导航栏设计等。
操作步骤如下：
（1）新建文档：1000*50像素
案例导入：
本章将带你亲身体验Fireworks在网页创作中的强大功能，通过一个网站界面的设计 过程，详细介绍Fireworks在网页设计的不同阶段是如何处理各种不同任务的。
天星电子元件公司网站
3.1 图像基础知识
3.1 图像类型 （1）矢量图
矢量图形是用线条和填充色等数学信息来描述图形的， 一般矢量格式的文件通常比较小，对矢量图进行操作，改 变图形尺寸、形状等，不会改变图形的显示品质。制作矢 量格式图形的软件有Freehand、CorelDraw、AutoCAD等。 （2）位图
《网页设计与网站建设》
主讲人：杜永红
第3章 利用fireworks CS5设计网页界面
3.1 图像基础知识 3.2 fireworks CS5简介 3.3 LOGO的设计 3.4 设计网站按钮和导航栏
3.5 制作精美Banner 33.4.6 网站首页的界面设计 3.7 网页图像的切片和导出
本章详细介绍了如何利用Fireworks软件进行图像处理 和网页界面的设计。 [本章学习目的] 通过学习，读者能够： 1.掌握Fireworks软件基本操作 2.掌握使用fireworks软件设计logo、导航栏、banner 、网站平面效果图 3.掌握将图像切割、导出为网页的方法
（2）背景颜色设置：绘制和画布大小一致的矩形，填充为轮廓渐变： 由#293036到#181D21
（3）输入文本：首页
（4）按钮的制作：选中文本，单击F8快捷键，将文本转换为按钮元件 ，命名为首页，双击“首页”按钮元件，进入到按钮的编辑中，编辑 弹起、滑过、按下三个状态。
（5）多次复制“首页”按钮，并分别修改“首页”按钮文本为“公司 简介”、“新闻动态”等。
本实例主要涉及的知识点：文本输入、滤镜效果的应用、渐变效果的设置以 及矢量工具的使用等。操作步骤如下：
（1）新建文档：400*140像素 （2）输入文本：“天星” （3）“滤镜效果”使用：阴影和光晕中的光晕 （4）“渐变”工具的使用：浅绿色到鹅黄色再到白色 （5）克隆图像：克隆文本后，修改文字为“电子元件”，修改字体大小。 （6）“矢量”工具的使用：绘制五角星，并复制多个。
（2）制作Banner。要求： 1）导入图片作为背景； 2）输入企业文本，并适当调整文本大小，完成企业Banner。 （3）制作按钮和导航栏。要求： 1）绘制一个矩形，渐变填充，添加文本，转换为按钮元件。 2）按钮克隆后，修改文本和样式显示效果，水平排列，添加不同的链
接路径，即为导航栏。 （4）设计Web页面。要求： 1）布局页面，规划网页内容。 2）绘制页面分区，填充网页内容，切割图片，导出网页。 4．课时安排 上机实验安排4课时，前两项实验要求为2课时，后两项要求为2课时。
作为设计者来说，一般采用Fireworks或Photoshop之 类的设计软件来设计网页界面的效果图，图像切片后，导 出到网页编辑软件，如Dreamweaver中进行编辑，这种方 法可以使页面控制更加得心应手。
3.7 网页图像的切片和导出
使用Fireworks进行网页界面设计的过程中，经常会使用“切片” 工具将一幅大图像分割为一些小的图像切片，然后在网页中通过没有 间距和填充的表格重新将这些小的图像无缝地拼接起来，成为一幅完 整的图像。这样做可以降低图像的大小，减少网页的下载时间，并且 能创造交互的效果，如翻转图像等，还能将图像的一些区域用html来 代替。Fireworks在网页切片制作方面有很强的优势。
例如：Photoshop软件所支持位图文件格式有：PSD、TIF、 BMP、JPG、GIF和PNG等20余种格式的文件。PSD是 Photoshop软件的源文件格式，可保留图层等图像文件的 全部信息。
3.2 fireworks CS5简介
Fireworks是一款专为网络图形设计的图形编辑软件， 这就大大简化了网络图形设计的工作难度。使用 Fireworks即可以设计静态图像，也可以轻松地制作出十 分动感的GIF动画，还可以轻易地完成大图切割、动态按 钮、动态翻转图等。借助于Fireworks CS5，您可以在直 观、可定制的环境中创建和优化用于网页的图像并进行精 确控制。Fireworks的优化工具可帮助您在最佳图像品质 和最小压缩大小之间达到平衡。它与 Dreamweaver 和 Flash 共同构成的集成工作流程可以让您创建并优化图像 。利用可视化工具，无需学习代码即可创建具有专业品质 的网页图形和动画，如变换图像和弹出菜单等。