1.1 网页设计的前期准备

通过前面章节的介绍，大家已经对网页设计的整个流程有所了解。在设计中国巩义网页效果图之前，首先进行了如下的准备工作：

1.1.1 对将要制作的网站内容进行详细的了解

由于设计的是巩义市政府的网页，所以首先要对巩义这个地方进行详细的了解，了解它的地理位置、风土人情和城市风貌。这些信息的来源主要是通过搜索引擎，如百度和google。

1.1.2 对巩义现有网站页面的分析

由于此次是对巩义市政府网页进行改版设计，所以首先需要对原先的巩义市政府网页进行分析。分析从四个角度来进行，包括颜色、版式布局、页面功能和内容。目的是取其精华去其糟粕，力求更进一步。巩义市政府网页效果图如图1.2所示。
 
图1.2 原中国巩义政府网页效果图

1.1.3 收集制作内容

根据现有页面中的内容，确定简要设计的页面中的内容。如栏目设置、页面中的各个模块等。如果没有可以参考的页面，应该和客户进行商议后得出。

1.1.4 收集资料

资料包括文字性资料和图片类资料，一般都由客户提供，在这里文字素材可以从现有网页中复制下来，图片素材除了由客户提供一部分以外，对于一些修饰性的素材图片一般都是自己来提供的，来源可以是网络，也可以是素材光盘。

1.1.5 页面参考

在设计中国巩义政府网页之前，可以参考现有的一些政府和企业的网站，从中吸取一些灵感或者是一些可借鉴的东西。在很多的导航网站上，都有专门的政府机构的分类，可以很方便的查找到一些大的政府部门的网站。如图1.3所示，是加加上网导航的政府机构分类。
 
图1.3 加加上网导航的政府机构分类

1.1.6 总结

通过以上的准备，大致可以得到以下一些结果：
1.政府网页一般采用门户页面的形式，在设计时要体现一种大气的感觉。
2.政府网页在颜色搭配上多以红色和黄色为主，也有一些网页使用了蓝色，是为了能够突出科技的感觉。
3.政府网页在页面功能上要体现“人性化”，例如天气预报、当前日期等功能。
4.政府网页在功能上以信息发布为主，所以在页面设计时应把新闻版块放置到页面的醒目位置。
5.政府网页同时提供网络办公的功能，应该在页面的相应位置明显的标记出来，便于浏览者查找。
6.对于政府网站的特殊性，强调政府门户网站“以服务为中心，以社会公众和企业为主要服务对象”的特点。在设计时应该围绕“政府网站评估指标体系”来进行。体系包括五个方面：
$$ 强调网站应用。本体系强调政府网站应用绩效，指标中弱化网站技术性指标，强化网站功能性指标，功能性指标权重占90％以上。
$$ 突出公共服务。服务是本体系的重中之重，尤其对于省、市、县政府门户网站，服务相关指标在权重上占了绝对的比重。
$$ 注重以人为本。体系突出“以人为本”意识，围绕“用户知情权、公众参与权、弱势群体服务公平权、个人信息隐私权”等设置一系列指标。
$$ 增强透明程度。增强评估过程的透明性和评估结果的公开性，加强评估单位与被评估单位之间的交流，保证评估工作的科学性与公正性。
$$ 重视深度研究。重视对评估结果的深度研究分析，在评估工作基础上编制政府网站建设指南，进一步强化对政府网站建设的指导作用。
7.通过多方面的选择，在页面布局和设计上选择了两个网站页面进行对比参考，分别是首都之窗和北京银行，如图1.4所示。在下来自己进行设计的时候，多参考一些好的页面是非常必要的。
  
图1.4 参考的网页效果图

1.2 网页效果图的设计

通过前期的准备，对即将设计的网页有了一个整体上的认识，接下来就应该把大脑中的思路付诸于视觉效果了。设计网页效果图有两个部分，首先是绘制草图，绘制草图是为了能够得到整体的页面结构，然后才是使用软件制作实际的效果图。

1.2.1 绘制草图

在前面的章节也介绍过草图的绘制流程，在这里就不再复述，绘制出的完整草图如图1.5所示。
 
图1.5 网页草图
绘制草图的目的有以下几点内容：
1.设计整体布局结构，在中国巩义的页面设计中，采用了首都之窗的整体左右分栏的布局形式，在左侧的内容区域，借鉴了北京银行的内容布局方式，可以说是把两者的优点合二为一。
2.确定页面中各个区域的内容
在什么位置添加什么内容，这个也是在绘制草图的时候就可以确定下来的。可以在草图中标明，如图1.5所示。
4.颜色搭配
颜色搭配可以从现在就开始构思，由于政府网站多是以红色和黄色为主，所以中国巩义政府网页设计中也使用红色为主色调，结合适当的黄色。在这个基础上又添加了一定的绿色作为补充，起到一种对比的效果。在颜色的选择上，不仅仅要考虑颜色是否能够体现出主题的含义，还要充分考虑到颜色在网页中所占的面积。

1.2.2 使用Fireworks 8制作网页效果图

有了网页草图后，就可以使用软件来制作网页效果图了。在这里主要通过Fireworks 8软件来给大家进行介绍，使用PhotoShop CS2来进行制作也是可以的，制作方法类似。具体操作步骤如下：
1.启动Fireworks 8软件，新建一个Fireworks文件。
2.在弹出的【新建文档】对话框中设置画布的宽度为984像素，高度为1400像素，背景颜色为白色。如图1.6所示。
 
图1.6 【新建文档】对话框
【说明】这里的页面宽度984像素是使用1024像素减去20像素得到的。所以这个页面的最佳显示分辨率为1024X768像素。而页面的高度是可以根据实际的页面高度来进行伸缩的，可以随时进行调整。
3.首先根据页面草图得到的布局结构，在Fireworks 8的画布中添加辅助线。添加辅助线的目的是为了划分出页面的结构，给出每个区域的尺寸和位置。可以选择【视图】@@【标尺】命令（快捷键为【Ctrl+Alt+R】）打开Fireworks 8的标尺，然后从标尺中拖拽出辅助线。如图1.7所示，空白页面和制作完毕页面中的辅助线对比效果。
   
图1.7 画布中的辅助线
【说明】辅助线的整体结构是按草图来添加，但是具体每条辅助线的坐标位置则需要设计人员根据实际的需要自行确定，所以设计的效果图不同，辅助线也就不同。
4.有了辅助线，接下来就可以开始制作效果图中间的内容了，一般的制作顺序是从上到下，从左到右。使用Fireworks 8的【文本】工具，在画布的顶端输入文本“市委 | 市人大 | 市政府 | 市政协”和“简体  繁体  English”，如图1.8所示。
 
图1.8 输入文本
5.选择【矩形】工具，在文本的下方绘制两个宽度都为780像素的矩形块，第一个矩形的高度为2像素，填充浅灰色。第二个矩形在第一个矩形的下方，高度为1像素，填充深灰色，如图1.9所示，这样制作出来的是一个凸起的线条效果。
 
图1.9 制作凸起线条效果
6.继续使用【矩形】工具，在线条的下方绘制一个780X127像素的矩形，填充线性渐变色，渐变色的方向为从上到下，颜色为深红到大红色，如图1.10所示。
 
图1.10 绘制矩形
7.把巩义城建图的素材图片复制到当前画布中，缩放到适当的比例，然后使用【选取框】工具删除掉多余的部分。放置到渐变矩形的左侧。
8.选择图片素材，在【图层】面板的混合模式选项中选择“红”，如图1.11所示。这样可以让图像素材显示底色的红色中。
 
图1.11 设置图像的混合模式
9.继续复制巩义市行政中心的图像素材到当前画布中，同样缩放到合适的比例并删除多余的部分，放置到渐变矩形的右侧。
10.选择图片素材，在【属性】面板中添加【色相/饱和度/亮度】滤镜，把图片调整为红色，如图1.12所示。
 
图1.12 使用滤镜调整图像色彩
11.打开杜甫像的图像素材，使用【多边形套索】工具选择杜甫像，并且复制到渐变矩形的右侧，调整好大小尺寸，颜色同样使用【色相/饱和度/亮度】滤镜来调整为红色，如图1.13所示。
 
图1.13 调整杜甫像素材的位置和颜色
12.复制国徽的素材到渐变矩形的左侧，并且添加发光滤镜，设置发光的颜色为白色。
13.使用【文本】工具在渐变矩形上输入文本“中国.巩义”，给文本添加渐变色，并且添加【内斜角】滤镜，来实现文本的立体效果，如图1.14所示。
 
图1.14 输入文本
14.使用【矩形】工具绘制一个780X30像素的矩形，填充线性渐变色，方向为从上到下，渐变颜色为浅灰到深灰色，并且在【属性】面板中设置填充纹理为【对角线1】，【纹理总量】为40％，如图1.15所示。
 
图1.15 制作导航背景图像
15.在渐变的灰色矩形上输入栏目文本，效果如图1.16所示。
 
图1.16 输入栏目文本
16.使用【矩形】工具绘制一个780X10像素的矩形，放置在渐变灰色的按钮之上，在【图层】面板中设置透明度为20，如图1.17所示。
 
图1.17 制作透明矩形
17.使用【矩形】工具绘制一个780X10像素的矩形，填充线性渐变色，方向为从上到下，渐变颜色为浅灰到白色，放置在渐变灰色的按钮之下，如图1.18所示。目的是为了能够让顶部的导航看上去有阴影的效果。
 
图1.18 制作渐变矩形
18.使用【矩形】工具绘制一个175X1175像素的矩形，填充浅灰色，放置在页面的左侧。并且在【属性】面板中设置填充纹理为【对角线1】，【纹理总量】为100％，如图1.19所示。
 
图1.19 绘制矩形，放置在页面的左侧
19.接下来制作页面左侧的电子邮件登录界面，这里借用了北京银行的印章字效果，如图1.20所示。
 
图1.20 制作邮件登录界面
20.印章字的效果制作起来比较简单，使用【圆角矩形】工具绘制一个小的圆角正方形，填充线性渐变色，渐变色的方向为从上到下，渐变颜色为深红到大红色，然后使用【文本】工具在圆角矩形上输入文本即可，这里文本使用的字体是“文鼎中行书”。如图1.21所示。
 
图1.21 输入文本
21.整个页面左侧，邮件登录下方的内容也按同样的方法来进行制作，效果如图1.22所示。每一个区域之间间隔10像素，依次往下排列。
 
图1.22 制作页面左侧的内容
22.页面左侧的内容制作完毕后，开始制作页面中间部分的内容，首先从顶部的广告开始，把图像素材巩义俯瞰图和小孩组合在一起，构成了中间部分的广告栏，如图1.23所示。
 
图1.23 页面中间的广告栏
23.接下来制作“政府文件”部分，使用【矩形】工具绘制一个290X170像素的矩形，填充为透明，边框为1像素，灰色。
24.继续用【矩形】工具绘制一个290X25像素的矩形，填充从上到下的线性渐变色，并且在【属性】面板中设置填充纹理为【对角线1】，【纹理总量】为20％。
25. 使用【矩形】工具绘制一个287X1像素的矩形，填充黄色，放置在上面绘制出来的矩形的下方，如图1.24所示。
 
图1.24 绘制边框轮廓
26.接下来在上方的渐变色矩形中添加人物图标素材、more按钮素材和输入“政府文件”文本，如图1.25所示。
 
图1.25 制作新闻栏标题部分
27.在下方的空白区域中输入文本，所有文本为了能够清晰显示，字体选择宋体，字号为12，边缘为不消除锯齿。并且添加“new”标识，如图1.26所示。同样的内容可以复制。
 
图1.26 添加内容
【说明】由于只是网页的效果图，所以有些内容可以随意输入一些文本来替代，只要能显示出效果即可，不用那么精确。
28.为了能够让文本内容显示得更加清晰、有条理，可以在文本下方添加虚线，虽然Fireworks 8中提供了虚线的样式效果，但是确不够精细，这里的虚线需要自己来制作。使用【直线】工具在文本下方绘制一条水平直线，填充灰色，粗细为1像素。如图1.27所示。
 
图1.27 绘制水平直线
29.在【属性】面板中设置路径的纹理为【阴影线4】，【纹理总量】为100％，虚线效果制作完成，如果需要不同的虚线效果，可以选择不同的阴影线效果。如图1.28所示。其它文字下方的虚线复制即可。
 
图1.28 制作虚线效果
30.接下来的“专题报道”、“民意征集”、“工作动态”部分，由于效果基本类似，可以复制刚刚做好的“政府文件”区域，适当加以修改即可，如图1.29所示。
 
图1.29 其它部分的制作效果
31.在新闻发布版块的下方，制作一个590X100像素的广告图像，效果如图1.30所示。
 
图1.30 页面中间的广告图像
32.在广告图像的下方10像素的位置，制作四个服务版块，每个版块之间间隔为2像素，使用的还是印章效果，只不过尺寸比前面用来制作栏目标题的尺寸要大一些，背景仍就给出灰色带有【对角线1】纹理的矩形，效果如图1.31所示。
 
图1.31 制作四个服务区域
33.在服务区域的下方10像素的位置，制作组织机构，制作方法和上面的“政府文件”区域一样，可以直接复制过来进行修改，效果如图1.32所示。
 
图1.32 制作组织机构版块
34.页面中间内容制作完毕后，在页面右侧，距离中间内容10像素的位置，绘制一个大的绿色的矩形，如图1.33所示。
 
图1.33 页面中间的广告栏
35.在绿色矩形区域的顶部输入文本，制作当前时间效果，然后在文本的下方制作四个图像按钮，效果如图1.34所示。
 
图1.34 输入文本，制作图像按钮
36.在图像按钮下面10像素的位置，制作“市政服务”区域，绘制两个高度为30像素的矩形，分别填充红色和绿色，并且添加文本和按钮素材，如图1.35所示。
 
图1.35 市政服务区域
37.在市政服务的绿色矩形上方，矩形绘制一个高度为15像素的矩形，填充线性渐变，方向为从上到下，颜色为白色到透明，这样可以使标题区域有立体的效果，如图1.36所示。
 
图1.36 制作立体的标题按钮
38.下方的“部门网站排行榜”和“网站链接”区域采用相同的方式来进行制作即可，最终效果如图1.37所示。
 
图1.37 制作其它的区域
39.最后，在页面底端绘制两个高度分别为3像素和7像素的矩形，填充黄色和红色，并且在页面最下方的白色区域输入版权信息，整个页面效果图就制作完毕了，如图1.38所示。
 
图1.38 页面底部的版权信息

1.3 把效果图导出

效果图制作完毕后，需要把效果图导出，导出的主要目的是为了获得页面布局是的素材图像，这也是非常重要的一个步骤。把效果图导出的流程如下：
1.使用Dreamweaver 8建立站点。
2.使用Fireworks 8对效果图进行切片。
3.使用Fireworks 8对切片进行优化并输出。
在这里Fireworks 8切片和优化输出的操作和PhotoShop CS2是基本一致的，不太会使用Fireworks 8的用户也可以使用PhotoShop CS2来完成这些操作。