1.1 客户需要我们提供什么

一个成功抓住用户“眼球”并且能够带来经济效益的网站，必须以优秀的设计理念为前提，然后辅之优秀的制作来完成。好的设计是网站的核心和灵魂，是经过感性思考与理性分析相结合的产物，设计任务决定设计方向，设计的实现依赖于网页的制作。

网页设计中最重要的部分，并非体现在软件的应用上，而是通过对网页设计的理解提取出精华的部分，再运用丰富的技术体现出来，最终达到客户需求的效果。见图1-1和图1-2。

网页设计原则是设计师设计网站时必须遵循的，它可以保证网站设计的合理化、人性化、统一性和心灵共鸣，从而达到市场的需求。网页设计原则包括“设计任务”“思路实现”“色彩运用”“灵活布局”“造型组合”“设计原则”和“网页优化”7大类，符合这7种原则的网站才是好的网站。见图1-3。

1.1.1 不同网页用不同设计

设计是一种美的升级与提炼，成功的设计作品一般都极具艺术感，但艺术感并不符合普通大众的视觉审美感受，属于一种看不懂或不易理解的范畴，所以艺术感仅是设计体现的手段，并不符合大部分设计任务的需求。设计的任务是要实现设计师的意图，达到设计师的最终目的，而并非仅仅是创造美，见图1-4。

网页设计的任务是设计师根据客户要求表现出网页的主题和实现网页的功能。根据站点的性质和用户群体的差异，设计的任务也不同，网站总体类别包括“资讯类网站”“资讯和形象相结合的网站”和“形象类网站”。

资讯类网站

资讯类网站为访问群体提供大量的信息，而且访问量较大，如搜狐、新浪、网易等网站。这类网站需要注意页面的分区和结构的合理性，要快速有效地引导访问者进行浏览，同时注意页面的优化与界面的亲和等问题，为访问者提供人性化的舒适浏览感受。

举一反三

因为资讯类网站的特点就是内容繁杂，因此为了节省版面以及整理分区，我们可以使用“国字型”网页布局，以规整和扎实为主，靠内容吸引访问者，这类网站美观度通常很低。因此一些设计感很强的布局并不适合资讯类网站，设计者不要一味追求创意和美观而忽视资讯类网站的特点，否则会导致用户浏览混乱。

形象类网站

形象类网站一般较小，保持在几页的信息量，需要实现的功能也比较简单，例如一些中小型的公司或单位，网页的设计任务主要是突出企业形象。这类网站总体上对设计者的设计水平要求较高，需要根据不同的公司或企业的具体情况进行具体分析，最重要的一点就是客户需求的实现，它也属于设计的任务。

资讯和形象相结合的网站

资讯和形象相结合的网站对于设计方面要求较高，既要保证网站资讯的传达要求，同时又要突出企业或公司的形象，例如一些较大的公司网站和国内的高校网站等。

1.1.2 拓展设计思路

明确了设计的任务之后，接下来要做的就是完成这个任务。

设计的实现可以分为两部分，第1部分是需要为网站做前期的规划及效果草图的绘制，这部分可以在纸上完成，将设计者的想法以最快捷的方式呈现出来，为后期的制作提供参考；第2部分是利用相关软件进行网页的制作，这一过程是在计算机上完成的，将设计的蓝图变为现实，最终的集成一般是在Dreamweaver里完成。经过设计的作品一定要有创意，这是最基本的要求，没有创意的设计是失败的。

1.1.3 色彩的吸引力

漂亮丰富的色彩能唤起人们的心灵感知，不同的颜色搭配会产生不同的视觉感受，所引起的心灵共鸣也是不同的，例如，红色是火的颜色，充满热情与奔放，同时也是血的颜色，可以象征生命与暴力，见图1-5～图1-7。

不同色彩代表了不同的情感和不同的象征含义，这些象征含义是人们思想交流中相当复杂的部分，它因人的年龄、地域、时代、民族、阶层、经济地区、工作能力、教育水平、风俗习惯、生活环境和性别差异而有所不同。单纯的颜色并没有实际的意义，但是和不同的颜色搭配后，它所表现出来的效果就会不同。如绿色和金黄色或与淡白色搭配，可以产生优雅、舒适的气氛；蓝色和白色混合，能体现柔顺、淡雅、浪漫的气氛。设计的任务不同，配色方案也随之不同，如图1-8～图1-13所示。考虑到网页的适应性，应尽量使用网页安全色。

举一反三

所谓网页安全色是指无论在任何浏览器或计算机上都可以无损无偏差地输出色彩，我们大部分计算机可以支持256色（8位）的颜色输出，但是仅有216种颜色在网页上可以无偏差显示，因此为了保证制作效果与呈现效果统一，我们应该使用网页安全色，如图1-14所示。

众所周知，颜色是光的折射产生的，红、黄、蓝是调和其他色彩的三原色，换一种思路，我们可以用颜色的变化来表现光影效果，这无疑将使我们的作品更贴近现实。颜色的使用并没有一定的法则，如果一定要用某个法则去套，那么效果只会适得其反。首先我们可先确定一种能表现主题的主体色，然后根据具体的需要，应用当前色的近似色和对比色来完成整个页面的配色方案，这样整个页面在视觉上是一个整体，以达到和谐、悦目的视觉效果。

1.1.4 灵活的布局

符合访问者浏览顺序和视觉顺序的合理布局会为网站加分，人性化的布局首先需要一个舒适的页面尺寸，清晰明确的区域划分，然后统一页面风格，舒适清晰地文本阅读模式，最后将设计感与布局完美地结合，如图1-15～图1-18所示。

1.1.5 造型的组合

设计者主要通过视觉传达来表现主题，在视觉传达中，造型是很重要的一个元素，画面上的所有元素都可以统一作为画面的基本构成点、线、面来进行处理，在一幅成功的作品里，需要点、线、面的共同组合与搭配来构造整个页面。常用的组合手法包括秩序、比例、均衡、对称、连续、间隔、重叠、反复、交叉、节奏、韵律、归纳、变异、特写、反射等，它们都有各自的特点，设计者在设计中应根据具体情况，选择最适合表现主题的手法，提升网站的美感，同时将网页上的各种元素有机地组织起来，较好地突出企业形象，从而引导访问者的视线，如图1-19～图1-21所示。

1.1.6 灵活组合网页元素

设计不是随意胡乱的创作，而是要遵循一定原则的，无论使用何种手法对画面中的元素进行组合，都一定要遵循5个大的原则，即“统一”“连贯”“分割”“对比”及“和谐”。

统一

统一是指设计作品的整体性和一致性，如图1-22所示。在网站设计中整体效果是至关重要的，切勿将各个组成部分孤立分散，那样会使画面呈现出一种枝蔓纷杂的凌乱效果。

连贯

连贯是指页面之间的相互联系。在网站设计中可以利用每个组成区域在内容上的联系，也可以在各部分表现形式上的相互呼应来建立连贯性，在制作过程中注意整个页面设计风格的一致性，实现视觉和心理上的连贯，使整个页面设计的各个部分融洽。

分割

分割是指将页面区分为多个小块，小块之间具备视觉上的不同，使访问者对内容一目了然。在信息量过多时合理有效地分割能为访问者整理信息，如图1-23所示。因此分割不仅是表现形式的需要，换个角度来讲，分割也可以被视为对页面内容的一种分类和归纳。

对比

对比是指通过视觉矛盾和冲突，使设计更加富有生气，如图1-24所示。对比手法有很多，例如，多与少、曲与直、强与弱、长与短、粗与细、疏与密、虚与实、主与次、黑与白、动与静、美与丑、聚与散等。在使用对比的时候应慎重，对比过强容易破坏美感，影响统一。

和谐

和谐是指整个页面符合美的法则，浑然一体，如图1-25所示。设计者如果仅是将色彩、形状、线条等元素随意组合，那么作品就没有“生命感”，与访问者达不成审美共鸣。注重作品所形成的视觉效果能否与人的视觉感受形成一种沟通，产生心灵的共鸣，这是设计成功的关键。

1.1.7 优化网页

在网页设计中，网页的优化是很重要的一个环节，它的成功与否会影响页面的浏览速度和页面的适应性，影响访问者对网站的印象。优化项目包括“文字”“图片”“DIV与表格”和“网页的适应性”。

文字

文字是页面中最大的构成元素，因此字体的视觉优化显得尤为重要。通常设计者使用CSS样式表指定文字的样式为宋体，大小指定为12px，颜色要视背景色而定，这样访问者能够看清并且与整个页面搭配和谐。在白色的背景上，我们一般使用黑色的文字，这样不易产生视觉疲劳，能保证访问者较长时间地浏览网页，如图1-26和图1-27所示。

图片

图片是网页中的重要元素，也是呈现美感的媒介。图片的优化可以在保证浏览质量的前提下将其尺寸大小降至最低，以便提高网页的速度。设计者可以利用Photoshop或Fireworks将图片切成小块，再分别进行优化。输出的格式可以为GIF或JPEG，要视具体情况而定。

一般我们将颜色变化较为复杂的小块优化为JPEG，而把那种只有单纯色块的卡通画式的小块优化为GIF，这是由这两种格式的特点决定的，如图1-28和图1-29所示。

DIV与表格

DIV与表格（table）是页面中的重要元素，是页面排版的主要手段。我们可以设定DIV与表格的宽度、高度、边框、背景色和对齐方式等参数。通常我们将表格的边框设为0，以此来定位页面中的元素，或者借此确定页面中各元素的相对位置。

设计者在设计页面表格时，应该尽量避免将所有元素嵌套在一个表格里，而且表格嵌套层次尽量要少。因此可以采用DIV套表格的方式来减少嵌套，提高网页的速度。

网页的适应性

网页的适应性是很重要的，在不同的系统、分辨率、浏览器上，我们将会看到不同的结果，因此设计时要统筹考虑。一般情况下，用户在800×600规格下制作网页，最佳浏览效果也是在800×600分辨率下，在其他情况下只要保证基本一致，不出现较大问题即可。