1.3　网页制作中的技巧

在制作网页的过程中，需遵循一定的原则和技巧，以提高网页的质量，使网页在一定程度上有更好的视觉和体验效果，这也是一位网页设计师所必须具备的相关知识和技能。

1.3.1　网页基本元素的标准及使用技巧

大部分的网页都有Logo、导航栏、Banner、按钮、文本和图像等网页元素，这些元素又称为网页的基本元素。下面对其中几个主要元素的相关标准及使用技巧分别进行介绍。

1．Logo

Logo（网站标识）一般由图案和文字组合而成，用于宣传和各站点间交换链接。它是整个网站的商标，传达着网站的理念和内涵。Logo的创意通常来源于网站的名称，当然有的企业原本就有自己的Logo，只要照搬就可以了。Logo有多种表现形式：简洁的字符、图形，复杂的文样图案，又或是卡通形象，不拘一格。如图1-17、图1-18所示。

2．导航栏

导航栏从本质上讲是一组超级链接， 目的是帮助访问者快速、准确地浏览网站，因此在设计时务必要使导航栏简洁、容易上手。在通常情况下，导航栏都会放置在网页的顶部或者是左侧，对于信息量较大的网站，还可以添加一个扩展导航栏。导航栏的形式也是多样的，当然出现的方式可以由设计师来决定，可以是光标悬停式导航栏，也可以是动态的，如用脚本编写的导航栏或Flash导航栏。图1-19所示为横向导航网页，图1-20所示为纵向导航网页。

图　1-19

　图　1-20

3．Banner

广告Banner是指网站中的横幅广告，Banner的文字应该简洁明了，用来搭配文字的图片不能太复杂，这样才能够突出主题。尽量使用笔画粗壮的文字，以避免造成凌乱的感觉。较少的颜色可以减少图片所占的空间，同时注意要将静态图片都存为JPG格式的。现在的广告Banner大部分是由Flash制作的，这样不仅增强了视觉效果，同时也节省了大量的存储空间。

（1）全尺寸带导航栏Banner。在最早（1997年）公布的标准中，这种类型Banner的尺寸是392×72像素。现在它已经随着页面的变化出现了更多的尺寸，比如734×305像素、1002×266像素等。但无论尺寸如何改变，只要是在网页中横向所占位置和整个页面宽度相同，就被称为全尺寸。如图1-21所示。

（2）全尺寸的Banner。全尺寸Banner是最为常见的一类Banner，通常出现在网站的中间部分。这一类Banner可以用来分割大面积的文字，有调整、修饰页面的作用，它的标准尺寸为468×60像素。当然这一尺寸也可以由设计师进行改变。如图1-22所示。

（3）半尺寸Banner。半尺寸Banner又叫做半栏广告，标准尺寸为234×60像素。它们的长度一般情况下相当于页面宽度的一半左右，弹出广告也多采用这种尺寸。如图1-23所示。

1.3.2　页面风格技巧

任何一个网站都应该具有自己的特色，都要根据主题和内容决定其风格与形式，因为只有形式与内容的完美统一，才能达到理想的宣传效果。网站的风格主要是从版式设计、色调处理、图片与文字的组合形式等方面体现出来的。要学会根据不同的主题，设计出不同的风格。

1．平面风格

这是网页设计中最常见的一种风格，大多数的网页都采用这种样式。它以二维设计为范本，侧重于构图和色彩。如图1-24所示。

　

图　1-24

2．矢量风格

矢量图片通常体积较小，而且无论是放大还是缩小，图像都不会失真，因此用这种图片制作出来的页面浏览和刷新的速度都比较快。但是矢最图片也有缺点，就是不能逼真地表现事物的真实效果。如图1-25所示。

3．像素风格

这一类的网站比较少见，国内的网站中很少有应用这一技术的。 目前像素画制作技术以日本和韩国较为成熟，它的特点是轮廓清晰、色彩明快。应该说像素风格的网站为互联网增添了一道靓丽的风景线。

4．三维风格

利用折叠、凹凸的处理手法，使页面产生浮雕等三维效果，可以使页面显得更丰富、更有深度，多层次、全方位地将整个页面的内容展现给访问者，给人以强烈的视觉冲击。这种设计风格通常用于游戏、音乐、影视，以及部分个人网站的页面。如图1-26所示。

5．大胆留白

版面留白，是为版面注入生机的一种有效手段。大胆地留出大片空自，是良好网页版式设计意识的体现。恰当、合理地留出空白，能传达出设计者高雅的审美趣味，打破死板呆滞的常规惯例，使版面通透、开朗、跳跃、清新，给访问者在视觉上造成轻快、愉悦的刺激，也因此得到松弛、小憩。当然，大片空白不可乱用，一旦出现空白，必须有呼应、有过渡，以免造成版面空泛。如图1-27所示。

6．页面缺损

页面缺损同页面留白的原理是相同的，也是力求在不平衡中展现视觉平衡。它们的不同点在于，缺损并不是为了引起人的遐想，它只是一种表现手法，通过这种手法可以在过于丰满的页面中留出空隙，给页面一个喘息的空间。

1.3.3　网页构图技巧

1．点构图

点具有可以使视觉集中的特性，具有强烈的视觉吸引力。它经常以各种形象出现在我们的视线中。它的位置、聚集、发散、重叠、交错……能够给人带来不同的感受。通常没有单独的点构图，它总是和面密不可分的。如图1-28所示。

图1-28的构图方式是一个散点构图。几个点看似无序而实则有序的排列，给人一种随意的顺序感。点的不同形态会给人造成不同的视觉感受，位于页面正中的点集中了浏览者的全部视线，几乎没有偏转的余地。

2．线构图

线在空间中具有方向性和运动性。直线给人的感觉工整、坚定、直爽；曲线给人的感觉则柔和、流畅、温婉。将不同形式的线应用到页面中时，要注意它们之间的关系。另外，线也很少单独构图，因为线粗到一定程度也会形成面。如图1-29、图1-30所示。

　

图　1-29

3．面构图

面是点的放大、集合，或是由线的运动产生的。与点和线相比，面具有更强的视觉效果和表现力。面无处不在，无论它是以何种形状出现的，而且面也是所有网页中使用最多的一种表达方式。无论是直面，还是曲面，在视觉冲击力方面，它们都强于点和线。如图1-31所示。

　

图　1-31

4．综合构图

点、线、面是视觉的最基本元素，三者具有不同艺术特征。单独运用其中之一都会显得比较单调、乏味，因此在页面中它们通常是共同出现的。上面的例子并不是单独使用这三种元素中的一种，只是某一种元素更为明显。但在设计时要注意，千万不能将这些元素随意摆放，否则会让访问者感觉一团糟。如图1-32所示为综合构图网页。

1.3.4　色彩使用技巧

色彩能够直接给人强烈的视觉冲击，要很好地表现一个网页，色彩搭配非常重要。色彩应用原则是：总体协调，局部对比，在同一页面中可以使用相近色来设置页面中的各种元素。制作网页时可使用如下用色技巧。

① 在制作网页时，应首先确定整个站点的主色调。确定主色调需从网站的类型以及网站所服务的对象出发。如创建校园类站点可以选用绿色；政府类站点可以选用红色。

② 在同一页面中，要在两种截然不同的色调之间过渡时，需在它们中间搭配灰色、白色、黑色，使其能够自然过渡。

③ 网页中的文字与背景要求较高的对比度，通常用白底黑字，淡色背景、深色字体。

④ 如果有一些需要突出显示的内容，则可以采用一些鲜艳的颜色来吸引浏览者的视线。