利用fireworkscs5设计网页界面课件.pptx

1、网页设计与网站建设网页设计与网站建设主讲人：杜永红主讲人：杜永红第第3 3章章 利用利用fireworks CS5fireworks CS5设计网页界面设计网页界面 3.1 3.23.3 3.43.5网站首页的界面设计网站首页的界面设计制作精美制作精美Banner3.43.63.7网页图像的切片和导出网页图像的切片和导出图像基础知识图像基础知识fireworks CS5简介简介LOGO的设计的设计设计网站按钮和导航栏设计网站按钮和导航栏本章详细介绍了如何利用Fireworks软件进行图像处理和网页界面的设计。本章学习目的通过学习，读者能够：1.掌握Fireworks软件基本操作2.掌握使用fi

2、reworks软件设计logo、导航栏、banner、网站平面效果图3.掌握将图像切割、导出为网页的方法案例导入：本章将带你亲身体验本章将带你亲身体验FireworksFireworks在网页创作中的强大功能，通过一个网站界面的设在网页创作中的强大功能，通过一个网站界面的设计过程，详细介绍计过程，详细介绍FireworksFireworks在网页设计的不同阶段是如何处理各种不同任务的。在网页设计的不同阶段是如何处理各种不同任务的。天星电子元件公司网站天星电子元件公司网站3.1 图像类型（1 1）矢量图）矢量图矢量图形是用线条和填充色等数学信息来描述图形的，矢量图形是用线条和填充色等数学信息来描

3、述图形的，一般矢量格式的文件通常比较小，对矢量图进行操作，改一般矢量格式的文件通常比较小，对矢量图进行操作，改变图形尺寸、形状等，不会改变图形的显示品质。制作矢变图形尺寸、形状等，不会改变图形的显示品质。制作矢量格式图形的软件有量格式图形的软件有FreehandFreehand、CorelDrawCorelDraw、AutoCADAutoCAD等。等。（2 2）位图）位图位图图像是用像素点描述图像的。在位图中，图像的细位图图像是用像素点描述图像的。在位图中，图像的细节由每一个像素点的位置和色彩来决定。位图图像的品质节由每一个像素点的位置和色彩来决定。位图图像的品质与图像生成时采用的分辨率有关，

4、即在一定面积的图像上与图像生成时采用的分辨率有关，即在一定面积的图像上包含有固定数量的像素。当图像放大显示时，图像变成马包含有固定数量的像素。当图像放大显示时，图像变成马赛克状，因此放大图像的尺寸，会降低图像的显示品质，赛克状，因此放大图像的尺寸，会降低图像的显示品质，如图所示。制作位图图像的软件常有如图所示。制作位图图像的软件常有PhotoshopPhotoshop、FireworksFireworks、ImageReadyImageReady等。等。 3.1 图像基础知识3.1.2 图像分辨率 分辨率确定了一幅图像的品质和能够打印或显示的细分辨率确定了一幅图像的品质和能够打印或显示的细节含

5、量。分辨率的单位为像素节含量。分辨率的单位为像素/ /英寸（英文缩写为英寸（英文缩写为dpidpi），），表示图像上每一线性英寸的像素数。线性是指在直线上计表示图像上每一线性英寸的像素数。线性是指在直线上计算像素数，如果图像的分辨率是算像素数，如果图像的分辨率是72dpi72dpi，即每英寸，即每英寸7272个像个像素，则每平方英寸上有素，则每平方英寸上有51845184个像素。假设图像中的像素数个像素。假设图像中的像素数是固定的，增加图像的尺寸将降低其分辨率，反之亦然。是固定的，增加图像的尺寸将降低其分辨率，反之亦然。 分辨率的大小直接影响图像的品质。分辨率越高，分辨率的大小直接影响图像的品

6、质。分辨率越高，图像越清晰，文件也就越大，计算机运行就越慢。图像越清晰，文件也就越大，计算机运行就越慢。 所以在制作图像时，不同品质的图像设置适当的分辨所以在制作图像时，不同品质的图像设置适当的分辨率即可。例如打印输出的图像分辨率就需要高一些，一般率即可。例如打印输出的图像分辨率就需要高一些，一般设置为设置为300dpi300dpi，如果只是网页图像，如果只是网页图像72dpi72dpi就足够了。就足够了。3.1.3 图像文件格式在计算机绘图中，有较多的图形和图像处理软件，而不同的在计算机绘图中，有较多的图形和图像处理软件，而不同的软件所保存的图像格式则是不相同的。软件所保存的图像格式则是不相

7、同的。例如：例如：PhotoshopPhotoshop软件所支持位图文件格式有：软件所支持位图文件格式有：PSDPSD、TIFTIF、BMPBMP、JPGJPG、GIFGIF和和PNGPNG等等2020余种格式的文件。余种格式的文件。PSDPSD是是PhotoshopPhotoshop软件的源文件格式，可保留图层等图像文件的软件的源文件格式，可保留图层等图像文件的全部信息。全部信息。 3.2 fireworks CS5简介FireworksFireworks是一款专为网络图形设计的图形编辑软件，是一款专为网络图形设计的图形编辑软件，这就大大简化了网络图形设计的工作难度。使用这就大大简化了网络图

8、形设计的工作难度。使用FireworksFireworks即可以设计静态图像，也可以轻松地制作出十即可以设计静态图像，也可以轻松地制作出十分动感的分动感的GIFGIF动画，还可以轻易地完成大图切割、动态按动画，还可以轻易地完成大图切割、动态按钮、动态翻转图等。借助于钮、动态翻转图等。借助于Fireworks CS5Fireworks CS5，您可以在直，您可以在直观、可定制的环境中创建和优化用于网页的图像并进行精观、可定制的环境中创建和优化用于网页的图像并进行精确控制。确控制。FireworksFireworks的优化工具可帮助您在最佳图像品质的优化工具可帮助您在最佳图像品质和最小压缩大小之间

9、达到平衡。它与和最小压缩大小之间达到平衡。它与 Dreamweaver Dreamweaver 和和Flash Flash 共同构成的集成工作流程可以让您创建并优化图像共同构成的集成工作流程可以让您创建并优化图像。利用可视化工具，无需学习代码即可创建具有专业品质。利用可视化工具，无需学习代码即可创建具有专业品质的网页图形和动画，如变换图像和弹出菜单等。的网页图形和动画，如变换图像和弹出菜单等。FireworksFireworks可创建和编辑矢量图像与位图图像，并可导可创建和编辑矢量图像与位图图像，并可导入和编辑入和编辑Photoshop Photoshop 和和 Illustrator Ill

10、ustrator 文件。文件。fireworksfireworks源源文件格式为文件格式为pngpng，可以保存图层、图像特效、图像切片等，可以保存图层、图像特效、图像切片等相应的信息。相应的信息。在图像插入到网页之前，一般需要将图像进行处理。在在图像插入到网页之前，一般需要将图像进行处理。在FireworksFireworks中处理网页图像一般遵循以下步骤：创建图形中处理网页图像一般遵循以下步骤：创建图形和图像和图像创建创建WebWeb对象对象优化图像优化图像导出图像。导出图像。3.2.1 Fireworks3.2.1 Fireworks中图像处理的流程中图像处理的流程Fireworks C

11、S5Fireworks CS5是一个强大的网页图形设计工具，使用是一个强大的网页图形设计工具，使用它可以创建和编辑位图、矢量图形，还可非常轻松地做出它可以创建和编辑位图、矢量图形，还可非常轻松地做出各种网页设计中常见的效果，例如动画、翻转图像、导航各种网页设计中常见的效果，例如动画、翻转图像、导航条、下拉菜单等。设计完成以后，如果要在网页设计中使条、下拉菜单等。设计完成以后，如果要在网页设计中使用，可将它输出为用，可将它输出为HTMLHTML文件，还能输出在文件，还能输出在PhotoshopPhotoshop，IllustratorIllustrator和和FlashFlash等软件中编辑的格

12、式。等软件中编辑的格式。Fireworks CS5Fireworks CS5的工作界面由的工作界面由5 5个部分组成：个部分组成：“菜单菜单”栏栏、“文档文档”窗口、窗口、“工具箱工具箱”面板、面板、“属性属性”面板、集成面板、集成工作面板，如图所示。工作面板，如图所示。3.2.2 Fireworks CS53.2.2 Fireworks CS5工作界面工作界面3.3 logo的设计本实例主要涉及的知识点：文本输入、滤镜效果的应用、渐变效果的设置以本实例主要涉及的知识点：文本输入、滤镜效果的应用、渐变效果的设置以及矢量工具的使用等。操作步骤如下：及矢量工具的使用等。操作步骤如下：（1 1）新建

13、文档：）新建文档：400400* *140140像素像素（2 2）输入文本：）输入文本：“天星天星”（3 3）“滤镜效果滤镜效果”使用：阴影和光晕中的光晕使用：阴影和光晕中的光晕（4 4）“渐变渐变”工具的使用：浅绿色到鹅黄色再到白色工具的使用：浅绿色到鹅黄色再到白色（5 5）克隆图像：克隆文本后，修改文字为）克隆图像：克隆文本后，修改文字为“电子元件电子元件”，修改字体大小。，修改字体大小。（6 6）“矢量矢量”工具的使用：绘制五角星，并复制多个。工具的使用：绘制五角星，并复制多个。在市场竞争日逾激烈的今天，严格管理和正确使用统一标准的公司的徽标，将为我们提供一个更有效、更清晰和更亲切的市场

14、形象。LOGO是人们在长期的生活和实践中形成的一种视觉化的信息表达方式，具有一定含义并能够使人理解的视觉图形，具有简洁、明确、一目了然的视觉传递效果。本节讲述天星电子元件公司网站的LOGO设计。3.4 设计网站按钮和导航栏 导航栏是指位于页眉区域的横幅图片上方或下方的水平或垂直的导航按钮，它起着链接网站各个页面的作用。网站使用导航栏是为了让访问者方便地找到所需要的资源。本实例主要涉及的知识点：渐变效果的设置、文本输入、按钮的制作、本实例主要涉及的知识点：渐变效果的设置、文本输入、按钮的制作、对齐工具的使用、导航栏设计等。对齐工具的使用、导航栏设计等。操作步骤如下：操作步骤如下：（1 1）新建文

15、档：）新建文档：10001000* *5050像素像素（2 2）背景颜色设置：绘制和画布大小一致的矩形，填充为轮廓渐变：由）背景颜色设置：绘制和画布大小一致的矩形，填充为轮廓渐变：由#293036#293036到到#181D21#181D21（3 3）输入文本：首页）输入文本：首页（4 4）按钮的制作：选中文本，单击）按钮的制作：选中文本，单击F8F8快捷键，将文本转换为按钮元件，快捷键，将文本转换为按钮元件，命名为首页，双击命名为首页，双击“首页首页”按钮元件，进入到按钮的编辑中，编辑弹按钮元件，进入到按钮的编辑中，编辑弹起、滑过、按下三个状态。起、滑过、按下三个状态。（5 5）多次复制）多

16、次复制“首页首页”按钮，并分别修改按钮，并分别修改“首页首页”按钮文本为按钮文本为“公司简公司简介介”、“新闻动态新闻动态”等。等。（6 6）单击）单击“直线直线”工具，设置颜色为灰色工具，设置颜色为灰色#A1ACB2#A1ACB2，绘制多段垂直线段，绘制多段垂直线段作为按钮的分割线。利用对齐面板将分割线对齐。作为按钮的分割线。利用对齐面板将分割线对齐。3.5 制作精美Banner Banner可以是网站页面的横幅广告，也可以是游行活动时用的旗帜，还可以是报纸杂志上的大标题。Banner主要体现中心意旨，形象鲜明表达最主要的情感思想或宣传中心。放置在广告商的页面上，是互联网广告中最基本的广告形

17、式。本实例主要涉及的知识点：渐变效果的设置、文本输入、素材导入、本实例主要涉及的知识点：渐变效果的设置、文本输入、素材导入、图层混合模式的使用、图层不透明度的设置、以及图层位置的设置等。图层混合模式的使用、图层不透明度的设置、以及图层位置的设置等。 操作步骤如下：操作步骤如下： （1 1）新建文档：）新建文档：10001000* *222222像素像素（2 2）背景颜色设置：绘制一个与画布大小一致的矩形，填充为）背景颜色设置：绘制一个与画布大小一致的矩形，填充为线性渐变，由线性渐变，由#003C58#003C58到到#0176AB#0176AB再到再到#00C4EC#00C4EC。（3 3）输

18、入文本：十年品质）输入文本：十年品质 创造一流服务理念。创造一流服务理念。（4 4）单击）单击“文件文件”菜单菜单“导入导入”命令，将素材文件夹中的素命令，将素材文件夹中的素材导入到画布中，设置图层的混合模式，图层的不透明度材导入到画布中，设置图层的混合模式，图层的不透明度，并调整图像的位置和图层的上下顺序。，并调整图像的位置和图层的上下顺序。3.6 3.6 网站首页的界面设计网站首页的界面设计 一般而言，首页设计一般而言，首页设计几乎等同于整个网站设计几乎等同于整个网站设计，因此网站首页设计非常，因此网站首页设计非常重要。首页设计要考虑的重要。首页设计要考虑的问题涉及配色方案的确定问题涉及配

19、色方案的确定、版面布局、网站内容的、版面布局、网站内容的填充等。填充等。 要制作首页，首先要要制作首页，首先要对主页有一个规划，即首对主页有一个规划，即首页的版面布局，这样才能页的版面布局，这样才能合理安排网页的内容。合理安排网页的内容。 在在3.33.3至至3.53.5节中已经把公司的节中已经把公司的logologo、导航栏、导航栏、bannerbanner设计完成。本节延续前面的内容。设计完成。本节延续前面的内容。 新建一个文档，画布大小为新建一个文档，画布大小为10241024* *10701070，然后根据页，然后根据页面的版面布局，导入公司的面的版面布局，导入公司的logologo、

20、导航栏、导航栏、bannerbanner等。等。 继续网页界面中主体内容的设计。用线段将页面分成继续网页界面中主体内容的设计。用线段将页面分成三栏，左栏：产品分类树和联系方式，右栏是广告区域，三栏，左栏：产品分类树和联系方式，右栏是广告区域，中间栏内容较多，为公司新闻、产品展示以及公司简介等中间栏内容较多，为公司新闻、产品展示以及公司简介等，分别填充相应的图像和文本。，分别填充相应的图像和文本。 作为设计者来说，一般采用作为设计者来说，一般采用FireworksFireworks或或PhotoshopPhotoshop之之类的设计软件来设计网页界面的效果图，图像切片后，导类的设计软件来设计网页

21、界面的效果图，图像切片后，导出到网页编辑软件，如出到网页编辑软件，如DreamweaverDreamweaver中进行编辑，这种方中进行编辑，这种方法可以使页面控制更加得心应手。法可以使页面控制更加得心应手。3.7 3.7 网页图像的切片和导出网页图像的切片和导出 使用使用FireworksFireworks进行网页界面设计的过程中，经常会使用进行网页界面设计的过程中，经常会使用“切片切片”工具将一幅大图像分割为一些小的图像切片，然后在网页中通过没有工具将一幅大图像分割为一些小的图像切片，然后在网页中通过没有间距和填充的表格重新将这些小的图像无缝地拼接起来，成为一幅完间距和填充的表格重新将这些

22、小的图像无缝地拼接起来，成为一幅完整的图像。这样做可以降低图像的大小，减少网页的下载时间，并且整的图像。这样做可以降低图像的大小，减少网页的下载时间，并且能创造交互的效果，如翻转图像等，还能将图像的一些区域用能创造交互的效果，如翻转图像等，还能将图像的一些区域用htmlhtml来来代替。代替。FireworksFireworks在网页切片制作方面有很强的优势。在网页切片制作方面有很强的优势。 切片区域的创建有两种不同的方法，第一种是单击工具栏的切片区域的创建有两种不同的方法，第一种是单击工具栏的“切切片片”工具工具 ，进行指定区域大小的切割；第二种是直接选中某个对象，进行指定区域大小的切割；第

23、二种是直接选中某个对象，在右键弹出菜单上选择，在右键弹出菜单上选择“插入矩形切片插入矩形切片”或或“插入多边形切片插入多边形切片”，为添加切片后的网页文件效果。为添加切片后的网页文件效果。 在完成切片分割后，单击在完成切片分割后，单击“文件文件”“”“导出导出”，选择导出类型为，选择导出类型为“HTML“HTML和图像和图像”，切片类型为，切片类型为“导出切片导出切片”，选择导出路径后，便可，选择导出路径后，便可以完成切片区域的导出，得到众多小的网页分割图和网页，用于网站以完成切片区域的导出，得到众多小的网页分割图和网页，用于网站建设。建设。本章小结本章小结本章主要介绍了本章主要介绍了Fire

24、worksFireworks使用方法和技巧，创建图形图像使用方法和技巧，创建图形图像。1.1.利用利用Fireworks Fireworks 设计设计LOGOLOGO2.2.利用利用FireworksFireworks设计导航条设计导航条3.3.利用利用FireworksFireworks设计设计bannerbanner4.4.利用利用FireworksFireworks设计整幅设计整幅WebWeb页面页面本章练习题本章练习题（1 1）简述位图和矢量图的区别。）简述位图和矢量图的区别。（2 2）对待文本可以像对待矢量对象一样处理吗？）对待文本可以像对待矢量对象一样处理吗？（3 3）将大图分隔成

25、小图有什么优点？如何使用切片工具？）将大图分隔成小图有什么优点？如何使用切片工具？（4 4）按钮有几种状态，哪种状态可不用编辑？）按钮有几种状态，哪种状态可不用编辑？上机实验上机实验1 1背景知识背景知识根据前面所学的色彩应用的知识，再结合本章所学的根据前面所学的色彩应用的知识，再结合本章所学的FireworksFireworks软件软件操作的知识，制作静态图像及动态图像的效果图，能够独立设计操作的知识，制作静态图像及动态图像的效果图，能够独立设计出网页平面图。出网页平面图。2 2实验准备工作实验准备工作将实验的样图及相应的图像及文本素材发送到学生主机，供学生参考将实验的样图及相应的图像及文本

26、素材发送到学生主机，供学生参考使用。使用。3 3实验要求实验要求（1 1）制作）制作LOGOLOGO。要求：。要求：1 1）使用钢笔工具，绘制一个盾形路径的一半，并拷贝翻转合成一个）使用钢笔工具，绘制一个盾形路径的一半，并拷贝翻转合成一个完整的盾形，盾形是对称的；完整的盾形，盾形是对称的；2 2）合成盾形后填充色彩，并添加文本，生成企业）合成盾形后填充色彩，并添加文本，生成企业LOGOLOGO。（2 2）制作）制作BannerBanner。要求：。要求：1 1）导入图片作为背景；）导入图片作为背景；2 2）输入企业文本，并适当调整文本大小，完成企业）输入企业文本，并适当调整文本大小，完成企业B

27、annerBanner。（3 3）制作按钮和导航栏。要求：）制作按钮和导航栏。要求：1 1）绘制一个矩形，渐变填充，添加文本，转换为按钮元件。）绘制一个矩形，渐变填充，添加文本，转换为按钮元件。2 2）按钮克隆后，修改文本和样式显示效果，水平排列，添加不同的链接）按钮克隆后，修改文本和样式显示效果，水平排列，添加不同的链接路径，即为导航栏。路径，即为导航栏。 （4 4）设计）设计WebWeb页面。要求：页面。要求：1 1）布局页面，规划网页内容。）布局页面，规划网页内容。2 2）绘制页面分区，填充网页内容，切割图片，导出网页。）绘制页面分区，填充网页内容，切割图片，导出网页。4 4课时安排课时安排上机实验安排上机实验安排4 4课时，前两项实验要求为课时，前两项实验要求为2 2课时，后两项要求为课时，后两项要求为2 2课时。课时。