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

《网页设计与网站建设》;第3章 利用fireworks CS5设计网页界面;　本章详细介绍了如何利用Fireworks软件进行图像处理和网页界面的设计。 [本章学习目的] 通过学习，读者能够： 1.掌握Fireworks软件基本操作 2.掌握使用fireworks软件设计logo、导航栏、banner、网站平面效果图 3.掌握将图像切割、导出为网页的方法;案例导入：本章将带你亲身体验Fireworks在网页创作中的强大功能，通过一个网站界面的设计过程，详细介绍Fireworks在网页设计的不同阶段是如何处理各种不同任务的。;　　3.1 图像类型;　　3.1.2 图像分辨率;　　3.1.3 图像文件格式; 3.2 fireworks CS5简介;　　Fireworks可创建和编辑矢量图像与位图图像，并可导入和编辑Photoshop 和 Illustrator 文件。fireworks源文件格式为png，可以保存图层、图像特效、图像切片等相应的信息。 　　在图像插入到网页之前，一般需要将图像进行处理。在Fireworks中处理网页图像一般遵循以下步骤：创建图形和图像→创建Web对象→优化图像→导出图像。;　　Fireworks CS5是一个强大的网页图形设计工具，使用它可以创建和编辑位图、矢量图形，还可非常轻松地做出各种网页设计中常见的效果，例如动画、翻转图像、导航条、下拉菜单等。设计完成以后，如果要在网页设计中使用，可将它输出为HTML文件，还能输出在Photoshop，Illustrator和Flash等软件中编辑的格式。 　　Fireworks CS5的工作界面由5个部分组成：“菜单”栏、“文档”窗口、“工具箱”面板、“属性”面板、集成工作面板，如图所示。;3.3 logo的设计;3.4 设计网站按钮和导航栏;;3.5 制作精美Banner; 操作步骤如下： （1）新建文档：1000*222像素 （2）背景颜色设置：绘制一个与画布大小一致的矩形，填充为线性渐变，由#003C58到#0176AB再到#00C4EC。 （3）输入文本：十年品质 创造一流服务理念。 （4）单击“文件”菜单→“导入”命令，将素材文件夹中的素材导入到画布中，设置图层的混合模式，图层的不透明度，并调整图像的位置和图层的上下顺序。;3.6 网站首页的界面设计; 在3.3至3.5节中已经把公司的logo、导航栏、banner设计完成。本节延续前面的内容。 新建一个文档，画布大小为1024*1070，然后根据页面的版面布局，导入公司的logo、导航栏、banner等。 继续网页界面中主体内容的设计。用线段将页面分成三栏，左栏：产品分类树和联系方式，右栏是广告区域，中间栏内容较多，为公司新闻、产品展示以及公司简介等，分别填充相应的图像和文本。 作为设计者来说，一般采用Fireworks或Photoshop之类的设计软件来设计网页界面的效果图，图像切片后，导出到网页编辑软件，如Dreamweaver中进行编辑，这种方法可以使页面控制更加得心应手。;3.7 网页图像的切片和导出;本章小结;本章练习题;上机实验;（2）制作Banner。要求： 1）导入图片作为背景； 2）输入企业文本，并适当调整文本大小，完成企业Banner。 （3）制作按钮和导航栏。要求： 1）绘制一个矩形，渐变填充，添加文本，转换为按钮元件。 2）按钮克隆后，修改文本和样式显示效果，水平排列，添加不同的链接路径，即为导航栏。 （4）设计Web页面。要求： 1）布局页面，规划网页内容。 2）绘制页面分区，填充网页内容，切割图片，导出网页。 4．课时安排 上机实验安排4课时，前两项实验要求为2课时，后两项要求为2课时。