第3章利用fireworkscs5设计网页界面.ppt

《网页设计与网站建设》 主讲人：杜永红 第3章 利用fireworks CS5设计网页界面 　本章详细介绍了如何利用Fireworks软件进行图像处理和网页界面的设计。 [本章学习目的] 通过学习，读者能够： 1.掌握Fireworks软件基本操作 2.掌握使用fireworks软件设计logo、导航栏、banner、网站平面效果图 3.掌握将图像切割、导出为网页的方法 案例导入：本章将带你亲身体验Fireworks在网页创作中的强大功能，通过一个网站界面的设计过程，详细介绍Fireworks在网页设计的不同阶段是如何处理各种不同任务的。 　　3.1 图像类型 （1）矢量图 　　矢量图形是用线条和填充色等数学信息来描述图形的，一般矢量格式的文件通常比较小，对矢量图进行操作，改变图形尺寸、形状等，不会改变图形的显示品质。制作矢量格式图形的软件有Freehand、CorelDraw、AutoCAD等。 （2）位图 　　位图图像是用像素点描述图像的。在位图中，图像的细节由每一个像素点的位置和色彩来决定。位图图像的品质与图像生成时采用的分辨率有关，即在一定面积的图像上包含有固定数量的像素。当图像放大显示时，图像变成马赛克状，因此放大图像的尺寸，会降低图像的显示品质，如图所示。制作位图图像的软件常有Photoshop、Fireworks、ImageReady等。 　　3.1.2 图像分辨率 分辨率确定了一幅图像的品质和能够打印或显示的细节含量。分辨率的单位为像素/英寸（英文缩写为dpi），表示图像上每一线性英寸的像素数。线性是指在直线上计算像素数，如果图像的分辨率是72dpi，即每英寸72个像素，则每平方英寸上有5184个像素。假设图像中的像素数是固定的，增加图像的尺寸将降低其分辨率，反之亦然。 分辨率的大小直接影响图像的品质。分辨率越高，图像越清晰，文件也就越大，计算机运行就越慢。 所以在制作图像时，不同品质的图像设置适当的分辨率即可。例如打印输出的图像分辨率就需要高一些，一般设置为300dpi，如果只是网页图像72dpi就足够了。 　　3.1.3 图像文件格式 在计算机绘图中，有较多的图形和图像处理软件，而不同的软件所保存的图像格式则是不相同的。 例如：Photoshop软件所支持位图文件格式有：PSD、TIF、BMP、JPG、GIF和PNG等20余种格式的文件。PSD是Photoshop软件的源文件格式，可保留图层等图像文件的全部信息。 3.2 fireworks CS5简介 　　Fireworks是一款专为网络图形设计的图形编辑软件，这就大大简化了网络图形设计的工作难度。使用Fireworks即可以设计静态图像，也可以轻松地制作出十分动感的GIF动画，还可以轻易地完成大图切割、动态按钮、动态翻转图等。借助于Fireworks CS5，您可以在直观、可定制的环境中创建和优化用于网页的图像并进行精确控制。Fireworks的优化工具可帮助您在最佳图像品质和最小压缩大小之间达到平衡。它与 Dreamweaver 和Flash 共同构成的集成工作流程可以让您创建并优化图像。利用可视化工具，无需学习代码即可创建具有专业品质的网页图形和动画，如变换图像和弹出菜单等。 　　Fireworks可创建和编辑矢量图像与位图图像，并可导入和编辑Photoshop 和 Illustrator 文件。fireworks源文件格式为png，可以保存图层、图像特效、图像切片等相应的信息。 　　在图像插入到网页之前，一般需要将图像进行处理。在Fireworks中处理网页图像一般遵循以下步骤：创建图形和图像→创建Web对象→优化图像→导出图像。 　　Fireworks CS5是一个强大的网页图形设计工具，使用它可以创建和编辑位图、矢量图形，还可非常轻松地做出各种网页设计中常见的效果，例如动画、翻转图像、导航条、下拉菜单等。设计完成以后，如果要在网页设计中使用，可将它输出为HTML文件，还能输出在Photoshop，Illustrator和Flash等软件中编辑的格式。 　　Fireworks CS5的工作界面由5个部分组成：“菜单”栏、“文档”窗口、“工具箱”面板、“属性”面板、集成工作面板，如图所示。 3.3 logo的设计 3.4 设计网站按钮和导航栏 导航栏是指位于页眉区域的横幅图片上方或下方的水平或垂直的导航按钮，它起着链接网站各个页面的作用。网站使用导航栏是为了让访问者方便地找到所需要的资源。 本实例主要涉及的知识点：渐变效果的设置、文本输入、按钮的制作、对齐工具的使用、导航栏设计等。 操作步骤如下： （1）新建文档：1000*50像素 （2）背景颜色设置：绘制和画布大小一致的矩形，填