发布时间 : 星期三 文章Fireworks网页首页设计书更新完毕开始阅读d7f83404de80d4d8d15a4fab
基于FIREWORKS的综合网页效果图设计说明书
作者：******** XXX
一、 引言
在课程实训之前的学习阶段，我们学习了Fireworks软件的各种使用方法，简单
的有图片的裁剪、选取、矢量图人绘制等等，加深的有给图片添加滤镜，增强效果，使图片更加的形象，接着有动画的制作，给网页更有动态感，另外我们还给图片添加切片热点和行为，让网页有连接区域。在实训课程中我们使用Fireworks制作简单的综合网页首页，进行综合使用。在这次的综合作业中我们将系统地运用所学的专业知识和技能融会贯通在其中，这不仅可以提高我们的综合应用能力，而且能够更好的掌握其运用方法，并且发现以及发挥其它使用方法。进一步提高各项专业技能，为将来独立完成工作打好基础。
二、 设计任务分析
本次Fireworks实训网页首页制作，初步设计的主题为“绚丽旅游网”。确定主题后，划分模块。最后上网收集关于旅游的知识以及图片，并且把其一一分类，
1. 介绍制作网页的内容
以便易于制作时使用方便。打好初稿。 2. 网页制作所用到的技术分析
在此次网页制作中，涉及我们各种学习到的Fireworks使用方法，其中除了
Fireworks的基本操作，例如：文件的创建；图像文件的导入；图像的裁剪旋转；参数的设置；对图像的修改变形调整等。还有主要操作，有：绘制矢量路径；使用文本；层和元件创建与使用；动态滤镜的使用；创建网页动画；切片、热点的行为的创建；导航按钮和弹出菜单的设计；网页的优化、导出和集成等等方法。
三、 方案初选
从以往学习过程中，已知，一般网页有：Logo、Banner、导航和弹出菜单、用户登录和页脚等元素。确定好后这些后，把事先打好的初稿排版，确定其位置。确定颜色基调。因为主题为“炫丽旅游网”，所以打算把颜色基调设计成跳跃型的，即着色会很鲜明，例如，导航的五个按钮打算设计成五种着色，并且它的弹出菜单也相应的设计成这五种着色。而网页的排版，初步设定成记事本的样式，左、中、右
1. 网页制作的整体安排
的构架。其中可能会省略Banner的设计，并且把页脚设计成不同的样式。 2. 网页制作所用到的软件
在网页制作中，用到了Fireworks CS4软件。
软件介绍：Fireworks是一款介于平面设计和网页设计之间的网页图形图像处理软件。相比于Photoshop，尽管它的位图处理功能没有那么强大，但足以应付日常工作的需要。利用可设置的输出和优化图像功能，Fireworks可以优化大容量位图、减小图像尺寸，从而在保持图像可视性的同时允许网络快速传播。矢量工具的引入使得Fireworks亦能够制作简单的GIF格式的动画，是Flash动画的有益补充。从CS3版本开始，Fireworks不再局限于制作单一的网页，与网站建设有关软件结合更趋紧密。通过组合“页面”面板及其他强大的Fireworks功能，读者可以快速创建交互Web和软件原型。相比早期版本，CS4版本处理综合网页的能力有很大的提高。
四、 方案的详细设计
1. 网站logo的制作
Logo的作用：1.识别性 识别性是企业标志重要功能之一。2.领导性 标志是企业视觉传达要素的核心，也是企业开展信息传播的主导力量，在视觉识别系统中，标志的造型、色彩、应用方式，直接决定了其他识别要素的形式，其他要素的建立，都是围绕着标志为中心而展开的。3.同一性4.涵概性5。革新性
因为网页的主题是“炫丽旅游网”所以Logo要把自己的网页主题，即网页的主体给直接表达出来。给阅览者一个清晰的概念。而且Logo的着色要与网页整体相一致。在设计Logo时，想到旅游是可大可小的一件事，小到就是一个城市里旅游，大到整个世界，为了突显我们网站的庞大性，把Logo设计成一个类似于地球的圆形图标。在其中画两个彩色波浪，代表着美丽的风景，让旅途变得色彩斑斓。而在标志右侧使用文本工具，输入了网站名称和网站的网址，让网页主题更加突出。其中要注意，字体颜色的渐变在属性面板中可能找不到，这个时候可以去工具面板中的“颜色”模块中的油漆桶工具，点击弹出颜色选项，在底下点出“填充颜色”会出现另外一个对话框，在这里可以选择渐变，并且调整颜色。
Logo的效果图：
2. 导航和弹出菜单设计
为了符合网页的整体效果，把导航栏设计成竖型的，并为了每个按钮的颜色的
不同分别创建了五个按钮，五个按钮分别是：首页、世界旅游、水乡旅游、红色旅游、网上报名。而每个按钮都有四个状态，下面举其中一个例子来说明所有按钮的状态形式。
1） 在“页面”面板中新建一个页面，并将其重命名为导航和弹出菜单。
2） 单击“编辑”菜单，在弹出的下拉菜单中选择“插入”→“新建按钮”命令，
进入“按钮”的编辑模式。 3） 在按钮的编辑模式中编辑按钮弹起时的状态。使用“圆角矩形”工具在工作区
内绘制一个30×110的矩形，设置填充色为#33FF00。 使用“文本”工具输入文本“首 页”，并设置字体为隶书，颜色为黑色，大小为20。
效果如图：
4） 编辑完按钮的“弹起”状态后，在“属性”面板的“状态”列表框中选择“滑
过”的状态进行编辑。单击“属性”面板中的“复制弹起时的图形”按钮，将“弹起” 状态的按钮复制过来。用“指针”工具选中圆角矩形，单击“属性”面板的添加“动态滤镜和选择预设”按钮，在弹出的菜单中选择“斜角和浮雕” →“内斜角”命令，在弹出的对话框中进行相应的设置，设置参数如下图：
效果图如图：
5） 在“属性”面板的“状态”列表框中选择“按下”的状态进行编辑。单击“属
性”面板中的“复制滑过时的图形”按钮，将“滑过” 状态的按钮复制过来。
用“指针”工具选中圆角矩形，把其宽长修改34×110，并调整其坐标，使其按下时是向左侧增加4，保持原有的动态滤镜效果，而且改变字体颜色为“#0000FF”，并再在“属性”面板中的添加“动态滤镜和选择预设”按钮单击，在弹出的菜单中选择“投影和光晕” →“投影”命令，在弹出的对话框中进行相应的设置，设置参数如下图：
效果图如图：
6） 在“属性”面板的“状态”列表框中选择“按下时滑过”的状态进行编辑。单
击“属性”面板中的“复制按下时的图形”按钮，将“按下” 状态的按钮复
制过来。用“指针”工具选中圆角矩形，把其宽长修改30×110，并调整其坐标，使其按下时是向右侧缩小4，保持原有的动态滤镜效果，而且改变字体颜色为“#FF0000”。
效果图如图：
7） 用同样的方式为其余4个按钮设置状态。
8） 导航栏效果图：
9） 弹出菜单的设计。（以下也举其中一个例子进行讲述。）选择“首页”按钮上的切片，单击中心控制点，在弹出的菜单中选择“添加弹出菜单”命令，打开“弹出菜单编辑器”对话框。 10） 在“弹出菜单编辑器”对话框中，切换到“内容”选项卡，依次输入公司简介、企业文化、组织机构和公司领导，并且设置为一级菜单。 11） 单击“继续”按钮进入“外观”选项卡，设置菜单的外观。在“弹起状态”选项组中设置“文本”颜色为#FFFFFF，“单元格”颜色为#00FF00，（注：单
元格的颜色根据不同的导航按钮的颜色而改变。）在“滑过状态”选项组中高“单元格”颜色为#000084。 12） 单击“继续”按钮切换到“高级”选项卡，保持默认设置。 13） 单击“继续”按钮切换到“位置”选项卡，在“菜单位置”选项组中单击
“将菜单位置讲师团到切片的右上部”按钮。 14）
最后单击“完成”按钮，结束弹出菜单的设置。
15）
16）
效果图如图:
用同样的方式为其余4个按钮添加弹出菜单。
3. 动画的设计
在本次的网页制作中，制作了两个动画。其中一个动画设计成若干张图片以若
隐若现的形势出现在一定的矩形框里。动画制作时，一定要把图片的位置固定不变，以防动画时有上下左右的移动，而影响动画的效果。这个动画的名字为“世界景点”，并在导出前，使用“切片”工具在“世界景点”的动画上绘制一个矩形切片，切片一定要覆盖住整个动画，否则在预览导出后不能正常播放。选中这个切片，在“优化”面板中的“导出文件格式”中选择“GIF动画”。