第3章利用fireworks-cs5设计网页界面

1、网页设计与网站建设,主讲人：杜永红,第3章利用fireworksCS5设计网页界面,本章详细介绍了如何利用Fireworks软件进行图像处理和网页界面的设计。本章学习目的通过学习，读者能够：1.掌握Fireworks软件基本操作2.掌握使用fireworks软件设计logo、导航栏、banner、网站平面效果图3.掌握将图像切割、导出为网页的方法,案例导入：本章将带你亲身体验Fireworks在网页创作中的强大功能，通过一个网站界面的设计过程，详细介绍Fireworks在网页设计的不同阶段是如何处理各种不同任务的。,天星电子元件公司网站,3.1图像类型,（1）矢量图矢量图形是用线条和填充色等数

2、学信息来描述图形的，一般矢量格式的文件通常比较小，对矢量图进行操作，改变图形尺寸、形状等，不会改变图形的显示品质。制作矢量格式图形的软件有Freehand、CorelDraw、AutoCAD等。（2）位图位图图像是用像素点描述图像的。在位图中，图像的细节由每一个像素点的位置和色彩来决定。位图图像的品质与图像生成时采用的分辨率有关，即在一定面积的图像上包含有固定数量的像素。当图像放大显示时，图像变成马赛克状，因此放大图像的尺寸，会降低图像的显示品质，如图所示。制作位图图像的软件常有Photoshop、Fireworks、ImageReady等。,3.1图像基础知识,3.1.2图像分辨率,分辨率确

3、定了一幅图像的品质和能够打印或显示的细节含量。分辨率的单位为像素/英寸（英文缩写为dpi），表示图像上每一线性英寸的像素数。线性是指在直线上计算像素数，如果图像的分辨率是72dpi，即每英寸72个像素，则每平方英寸上有5184个像素。假设图像中的像素数是固定的，增加图像的尺寸将降低其分辨率，反之亦然。分辨率的大小直接影响图像的品质。分辨率越高，图像越清晰，文件也就越大，计算机运行就越慢。所以在制作图像时，不同品质的图像设置适当的分辨率即可。例如打印输出的图像分辨率就需要高一些，一般设置为300dpi，如果只是网页图像72dpi就足够了。,3.1.3图像文件格式,在计算机绘图中，有较多的图形和图

4、像处理软件，而不同的软件所保存的图像格式则是不相同的。例如：Photoshop软件所支持位图文件格式有：PSD、TIF、BMP、JPG、GIF和PNG等20余种格式的文件。PSD是Photoshop软件的源文件格式，可保留图层等图像文件的全部信息。,3.2fireworksCS5简介,Fireworks是一款专为网络图形设计的图形编辑软件，这就大大简化了网络图形设计的工作难度。使用Fireworks即可以设计静态图像，也可以轻松地制作出十分动感的GIF动画，还可以轻易地完成大图切割、动态按钮、动态翻转图等。借助于FireworksCS5，您可以在直观、可定制的环境中创建和优化用于网页的图像并进

5、行精确控制。Fireworks的优化工具可帮助您在最佳图像品质和最小压缩大小之间达到平衡。它与Dreamweaver和Flash共同构成的集成工作流程可以让您创建并优化图像。利用可视化工具，无需学习代码即可创建具有专业品质的网页图形和动画，如变换图像和弹出菜单等。,Fireworks可创建和编辑矢量图像与位图图像，并可导入和编辑Photoshop和Illustrator文件。fireworks源文件格式为png，可以保存图层、图像特效、图像切片等相应的信息。在图像插入到网页之前，一般需要将图像进行处理。在Fireworks中处理网页图像一般遵循以下步骤：创建图形和图像创建Web对象优化图像导出

6、图像。,3.2.1Fireworks中图像处理的流程,FireworksCS5是一个强大的网页图形设计工具，使用它可以创建和编辑位图、矢量图形，还可非常轻松地做出各种网页设计中常见的效果，例如动画、翻转图像、导航条、下拉菜单等。设计完成以后，如果要在网页设计中使用，可将它输出为HTML文件，还能输出在Photoshop，Illustrator和Flash等软件中编辑的格式。FireworksCS5的工作界面由5个部分组成：“菜单”栏、“文档”窗口、“工具箱”面板、“属性”面板、集成工作面板，如图所示。,3.2.2FireworksCS5工作界面,3.3logo的设计,本实例主要涉及的知识点：文

7、本输入、滤镜效果的应用、渐变效果的设置以及矢量工具的使用等。操作步骤如下：（1）新建文档：400*140像素（2）输入文本：“天星”（3）“滤镜效果”使用：阴影和光晕中的光晕（4）“渐变”工具的使用：浅绿色到鹅黄色再到白色（5）克隆图像：克隆文本后，修改文字为“电子元件”，修改字体大小。（6）“矢量”工具的使用：绘制五角星，并复制多个。,在市场竞争日逾激烈的今天，严格管理和正确使用统一标准的公司的徽标，将为我们提供一个更有效、更清晰和更亲切的市场形象。LOGO是人们在长期的生活和实践中形成的一种视觉化的信息表达方式，具有一定含义并能够使人理解的视觉图形，具有简洁、明确、一目了然的视觉传递效果。

8、本节讲述天星电子元件公司网站的LOGO设计。,3.4设计网站按钮和导航栏,导航栏是指位于页眉区域的横幅图片上方或下方的水平或垂直的导航按钮，它起着链接网站各个页面的作用。网站使用导航栏是为了让访问者方便地找到所需要的资源。,本实例主要涉及的知识点：渐变效果的设置、文本输入、按钮的制作、对齐工具的使用、导航栏设计等。操作步骤如下：（1）新建文档：1000*50像素（2）背景颜色设置：绘制和画布大小一致的矩形，填充为轮廓渐变：由#293036到#181D21（3）输入文本：首页（4）按钮的制作：选中文本，单击F8快捷键，将文本转换为按钮元件，命名为首页，双击“首页”按钮元件，进入到按钮的编辑中，编

9、辑弹起、滑过、按下三个状态。（5）多次复制“首页”按钮，并分别修改“首页”按钮文本为“公司简介”、“新闻动态”等。（6）单击“直线”工具，设置颜色为灰色#A1ACB2，绘制多段垂直线段作为按钮的分割线。利用对齐面板将分割线对齐。,3.5制作精美Banner,Banner可以是网站页面的横幅广告，也可以是游行活动时用的旗帜，还可以是报纸杂志上的大标题。Banner主要体现中心意旨，形象鲜明表达最主要的情感思想或宣传中心。放置在广告商的页面上，是互联网广告中最基本的广告形式。,本实例主要涉及的知识点：渐变效果的设置、文本输入、素材导入、图层混合模式的使用、图层不透明度的设置、以及图层位置的设置等。

10、,操作步骤如下：（1）新建文档：1000*222像素（2）背景颜色设置：绘制一个与画布大小一致的矩形，填充为线性渐变，由#003C58到#0176AB再到#00C4EC。（3）输入文本：十年品质创造一流服务理念。（4）单击“文件”菜单“导入”命令，将素材文件夹中的素材导入到画布中，设置图层的混合模式，图层的不透明度，并调整图像的位置和图层的上下顺序。,3.6网站首页的界面设计,一般而言，首页设计几乎等同于整个网站设计，因此网站首页设计非常重要。首页设计要考虑的问题涉及配色方案的确定、版面布局、网站内容的填充等。要制作首页，首先要对主页有一个规划，即首页的版面布局，这样才能合理安排网页的内容。,

11、在3.3至3.5节中已经把公司的logo、导航栏、banner设计完成。本节延续前面的内容。新建一个文档，画布大小为1024*1070，然后根据页面的版面布局，导入公司的logo、导航栏、banner等。继续网页界面中主体内容的设计。用线段将页面分成三栏，左栏：产品分类树和联系方式，右栏是广告区域，中间栏内容较多，为公司新闻、产品展示以及公司简介等，分别填充相应的图像和文本。作为设计者来说，一般采用Fireworks或Photoshop之类的设计软件来设计网页界面的效果图，图像切片后，导出到网页编辑软件，如Dreamweaver中进行编辑，这种方法可以使页面控制更加得心应手。,3.7网页图像的

12、切片和导出,使用Fireworks进行网页界面设计的过程中，经常会使用“切片”工具将一幅大图像分割为一些小的图像切片，然后在网页中通过没有间距和填充的表格重新将这些小的图像无缝地拼接起来，成为一幅完整的图像。这样做可以降低图像的大小，减少网页的下载时间，并且能创造交互的效果，如翻转图像等，还能将图像的一些区域用html来代替。Fireworks在网页切片制作方面有很强的优势。切片区域的创建有两种不同的方法，第一种是单击工具栏的“切片”工具，进行指定区域大小的切割；第二种是直接选中某个对象，在右键弹出菜单上选择“插入矩形切片”或“插入多边形切片”，为添加切片后的网页文件效果。在完成切片分割后，单

13、击“文件”“导出”，选择导出类型为“HTML和图像”，切片类型为“导出切片”，选择导出路径后，便可以完成切片区域的导出，得到众多小的网页分割图和网页，用于网站建设。,本章小结,本章主要介绍了Fireworks使用方法和技巧，创建图形图像。1.利用Fireworks设计LOGO2.利用Fireworks设计导航条3.利用Fireworks设计banner4.利用Fireworks设计整幅Web页面,本章练习题,（1）简述位图和矢量图的区别。（2）对待文本可以像对待矢量对象一样处理吗？（3）将大图分隔成小图有什么优点？如何使用切片工具？（4）按钮有几种状态，哪种状态可不用编辑？,上机实验,1背景知识根据前面所学的色彩应用的知识，再结合本章所学的Fireworks软件操作的知识，制作静态图像及动态图像的效果图，能够独立设计出网页平面图。2实验准备工作将实验的样图及相应的图像及文本素材发送到学生主机，供学生参考使用。3实验要求（1）制作LOGO。要求：1）使用钢笔工具，绘制一个盾形路径的一半，并拷贝翻转合成一个完整的盾形，盾形是对称的；2）合成盾形后填充色彩，并添加文本，生成企业LOGO。,（2）制作Banner。要求：