第十八章 简单风格的小型网站设计 本章主要介绍如何制作简单并且漂亮的小型网站设计， 这种类型的网站能够完美地配合一 些专业及小型企业的宣传。其特点就是简单，没有复杂的特效，没有过多的文字和图像，但是 对于小型公司或者一个小的分支机构来说，这种网站设计是非常适合的。 本例的设计主题是“帆布鞋” ，页面效果清新、开阔，搭配简短的文字介绍，可以很好地 配合产品图像及产品的展示。 这种设计属于一种小而精的设计， 不是简单地将一个大版面减去 一半。在设计这种版面时难度并不大，而且容易维护及方便阅读，完成效果如图 18-1 所示。 图 18-1 简单风格的小型网站设计 漂亮的字体标题放置在一个白色的版面中， 传达了一种安静及自信的气息， 整个版面显得 简约、精致。 18.1 案例分析 很多综合性网站都在网页上挤满了海量的信息， 但对于很多小型企业来说， 他们只希望自 己的网页显得精致、优雅及专业，而且个性十足。小版面能够轻松地做到这一点，而设计一个 这样的版面关键是要分配好各个区域。 18.1.1 页面布局形式 初看上面的网页效果图，好象只有两个区域，一个是白色区域，一个是着色区域，但其实 是由四个区域组成，如图 18-2 所示。标志区域及白色的主要信息区域形成了强烈的对比。 第第 1 10 0 章章 使使用用行行为为 图 18-2 页面的布局 在开始设计这个布局时， 首先要确定一些位置关系。 读者可以利用在文章后面所提供的模 板尺寸来设计。当然，如果希望自己能够设计布局，也可以了解这里是如何创建一个这样的布 局的。 首先，页面的整体的尺寸为为“720”像素“480”像素，即宽高比为 5：3。然后将页 面的宽度和高度同时三等分，如图 18-3 所示。 图 18-3 划分页面的区域 可以将底部占三分之一的标志区域加上一种较深的颜色。 同时， 导航区域的颜色与标志区 域的颜色略有不同， 最简单的方法是在图像软件中， 把导航区域的颜色调整为标志区域颜色透 明度的 80%，这样使人看起来仍然浑为一体，如图 18-4 所示。 115 书名 图 18-4 在页面底部添加颜色 如果底部区域的颜色反差较大，则形成一种分离感，应该避免，如图 18-5 所示。 图 18-5 应避免颜色差别过大 接下来需要确定页面中内容信息距离页面的边距，首先来确定左侧距、顶部距和底边距。 将上面三分之一的区域的宽与高再次三等分， 即可得到一个矩形范围， 注意看左上角的深 色区域，如图 18-6 所示。 116 第第 1 10 0 章章 使使用用行行为为 图 18-6 继续三等分 使左侧距和这个深色矩形的宽度相等， 使顶部距和这个深色矩形的高度相等。 到左侧距与 上边距设为该区域的三分之一的距离。在内容区域中，顶部距和底边距比左侧距要窄一些，如 图 18-7 所示。 图 18-7 确定左侧距、顶部距和底边距 将左侧距加宽 150%来作为右侧距，这也就意味着，右侧距与左侧距比例仍为 3：2。这些 数值并不需要精确到像素，这样做的目的，只是为了尽可能让各种比例统一，从而使页面效果 更加和谐一致。通过这样的划分，就形成一个放置内容的区域，如图 18-8 所示。 117 书名 图 18-8 确定右侧距 18.1.2 添加文字和图像 页面中元素的排列应该以底线为基准， 这与设计一般的网页刚好相反， 因为一般的网页中， 标志及导航都是放在上面，而在本例中，它们都在底部，所以我们安排元素应该从下到上来配 合这种转变。 如图 18-9 所示，无论是文字还是图片，都需要与页面中的圆点为准。也就意味着，所有 的文字与图片都要接触到这个基线，这样文字与图片的交接处才显得整洁。 图 18-9 对齐页面中的所有内容 每一个页面可以放置少量的文字或少量的图片，当然，也可以同时放置文字与图片。主要 信息放在右侧，次要的信息放在左侧。 如图 18-10 所示， 在右侧所放置的主要文字， 都是同一字号， 同一种字体； 但标题是粗体，118 第第 1 10 0 章章 使使用用行行为为 颜色也是采用底部区域的颜色， 这样可以与底部区域形成协调感， 通过加大段落之间的空间而 不是采用首行缩进的形式来区分各个段落。 图 18-10 主要信息放置在页面右侧 文字的底部应该到达内容区域的底部， 并且不应该过于拥挤。 如果内容太多， 一页放不下， 那就加多一页，不要硬塞进去。同时，在下面加上各个页面的链接。 将一张小图像放置在左侧的区域中， 图片的底部与内容区域的底部对齐， 最后出来的效果 就是一个呈拱形的开阔空间包围着信息元素。漂亮而且容易阅读，如图 18-11 所示。 图 18-11 放置小图像 【提示】上图中，无论是图片还是文字，都没有将信息区域完全填满。 这种布局无论是在放置一张图像或者多张图像时都非常适用，这些图像可以是你的产品 图，说明图及其它宣传图片等。 （关于图像素材选择的技巧，请参看第 14 章中的内容。 ） 119 书名 善于利用白色空间，一张小图片放在一个大空间时可以产生一种力量感，也会更清晰。效 果比放上一张大图片要好得多，更容易吸引读者的眼光，如图 18-12 所示。 图 18-12 小图像产生大的冲击力 标志同样具有这样的力量， 蓝色的空间引导你的眼睛去到上方的标志中， 提醒标志的存在。 每一个网页可以同时放置两张，三张、四张甚至更多的图片。将整体的图片安排成矩形的 形状，如图 18-13 所示。 图 18-13 放置多张图像 所有的图片都是同一尺寸或同一形状效果最好， 如果希望图片尺寸不一样， 那就让它们的 尺寸反差大一点。图片与图片之间要有间隔，不要连在一起。 应避免文字环绕图像的形式，图像与文字应该径渭分明，图像在一边，文字在另一边，这 样才不会显得过于拥挤复杂，如图 18-14 所示。 120 第第 1 10 0 章章 使使用用行行为为 图 18-14 文字和图像的环绕形式 同时在导航的下方制作下拉形式的二级菜单， 二级菜单可以让浏览者更深入了解网站中的 内容，二级菜单的文字要适当小于导航的文字，这样才能够与导航的文字形成对比。在鼠标移 动到的二级菜单上， 可以在其左侧显示一个小三角形。 同时， 选中的二级菜单应变为粗体显示， 如图 18-15 所示。 图 18-15 制作二级菜单 在导航的上方可以制作三级链接，三级链接让浏览者观看更多的页面，水平摆放，间隔较开。 激活的链接以粗体显示，而且颜色与底部区域颜色搭配，如图 18-16 所示。 图 18-16 制作三级链接 121 书名 本章所用的尺寸如图 18-17 所示，读者可以对照这个模板进行参考。 图 18-17 本章案例尺寸模板 18.2 案例实现 通过上面的讲解，读者已经了解这种小型网站的设计要点，下面在使用 Fireworks 把这个 网站的页面设计出来，并且在 Dreamweaver 中进行布局，具体操作如下： 18.2.1 制作效果图 1、 新建一个 Fireworks 文件， 在弹出的 【新建文档】 对话框中设置画布的宽度为 “720”像素、高度为“480”像素，背景颜色为白色。如图 18-18 所示。 图 18-18【新建文档】对话框 2、选择【视图】【标尺】 （快捷键为： 【Ctrl+Shift+R】 ）命令，打开 Fireworks 的标122 第第 1 10 0 章章 使使用用行行为为 尺， 然后按照上面介绍的布局形式， 使用标尺来构建页面布局， 如图 18-19 所示。 图 18-19 使用辅助线构建页面布局 【提示】对辅助线进行定位可以使用【指针】工具在辅助线上双击鼠标，在弹出的【移动引导线】对话框中输入具体数值即可。关于辅助线的具体参数可以参考上面的模板来制作。 3、使用【矩形】工具，在画布左下角三分之一处绘制一个矩形，并且填充蓝色，颜色值为“#2F6DBB” ，如图 18-20 所示。 图 18-20 在画布下方绘制矩形 4、继续使用【矩形】工具，在画布右下角三分之一处绘制一个矩形，并且在【属性】面板中更改这个矩形的透明度为原来的“80” ，如图 18-21 所示。 123 书名 图 18-21 绘制另外一个矩形，并且调整透明度 5、使用【文本】工具，在画布左下角的蓝色矩形上输入文字“帆布其实代表了一种理念” ，在【属性】面板中设置【字体】为“方正准圆简体” 、 【字号】为“18” 、 【消除锯齿级别】为“强力消除锯齿” 、填充白色，如图 18-22 所示。 图 18-22 设置文字属性 6、继续输入文本“newlife newthought” ，对齐到上面文本的右下方，在【属性】面板中设置【字体】为“Verdana” 、 【字号】为“12” 、 【消除锯齿级别】为“不消除 锯齿” 、 【字距】为“10” 、填充白色，如图 18-23 所示。 图 18-23 设置文字属性 7、在画布右上方的内容区域中输入信息文字，在【属性】面板中设置【字体】为“宋体” 、 【字号】为“12” 、 【消除锯齿级别】为“不消除锯齿” 、 【字顶距】为“190” 、 填充颜色值为“#999999” ，如图 18-24 所示。 124 第第 1 10 0 章章 使使用用行行为为 图 18-24 设置文字属性 8、复制画布左下角的文字“帆布其实代表了一种理念”和“newlife newthought” ，移动到画布上方的内容区域，分别更改【字号】为“30”和“18” 。颜色填充同样 的灰色，如图 18-25 所示。 图 18-25 复制文字，更改字号和颜色 9、使用【文本】工具，在画布的下方制作导航，在【属性】面板中设置【字体】为“微软雅黑” 、 【字号】为“14” 、 【消除锯齿级别】为“强力除锯齿” 、填充白色， 然后调整每个导航之间的距离为“30”像素，如图 18-26 所示。 图 18-26 制作导航 10、使用【文本】工具，在导航的下方制作二级菜单，其字体设置和内容信息完全一样。为了突出被选中的状态，在第二行的文字左侧添加箭头素材图像，并且把文 字加粗，如图 18-27 所示。 125 书名 图 18-27 制作二级菜单 11、使用【矩形】工具，在画布内容区域的下方，制作三级链接，其文字属性设置和文字“newlife newthought”完全一样，只是在没有访问的链接文字上增加了下划 线效果，而正在访问的链接更改颜色为和底部同样的蓝色，如图 18-16 所示。 12、最终完成的效果如图 18-1 所示，需要注意的是内容和辅助线的对齐方式，这点非常重要，如图 18-28 所示。 图 18-28 制作三级链接 这样，整个网站的首页就制作完毕了，接下来可以制作其内容页面，内容页面和首页的布 局基本相同，所不同的就是内容区域的信息。 13、选择【文件】【另存为】命令，把这个制作好的页面保存成另外一个文档，并且删除掉内容区域的文字，如图 18-29 所示。 126 第第 1 10 0 章章 使使用用行行为为 图 18-29 删除内容区域的文字信息 14、按照前面介绍的方法，通过更改内容区域的信息，就可以轻松制作出这个网站的内容页面，如图 18-30 所示。 图 18-30 制作内容页面 18.2.2 切片、优化和导出 效果图制作完毕后，就应该对效果图进行切片、优化和导出，这样才能够使用生成的素材 进行布局。 15、在 Fireworks 中打开制作好的网站首页，进行切片，对于可以直接选择的对象，如这里的文字，可以在选中后单击鼠标右键，在弹出的选项菜单中选择【插入矩 形切片】 （快捷键为： 【Alt+Shift+U】 ）命令，最终的切片效果如图 18-31 所示。 127 书名 图 18-31 给页面添加切片 【说明】之所以