网页设计原则与制作技巧

黄晓乾 陈超 湖南交通工程职业技术学院 421001

一、设计原则

1、 表格的定位功能

表格在网页制作中除了可以起到表格本身的作用外, 它最主要的作用是定位页面中的元素。运用表格可以自由控制文本和图像在网页上出现的具体位置, 而不用担心不同的对象之间的影响, 从而使整个网页看上去紧凑统一。使用表格定位页面元素时要注意以下两点：

（1）一个网页要尽避免用整个一张大表格, 所有的内容都嵌套在这个大表格之内。因为浏览器解释HTML页面的顺序是自上而下依次逐行解释和显示出来, 但当碰到表格时, 浏览器会读取表格中所有的元素后才将结果在页面中显示出来, 在页面内容较多而浏览者浏览的速度又较慢的情况下, 浏览器的这种解释次序将明显表露出来, 只有等到浏览器解释到了页面的最后, 才会将整个页面的内容在浏览者眼前显示出来, 而在浏览器解释过程中浏览者将看到一片空白。我们在采用表格进行定位时, 可以一行使用一个表格, 并且尽量不使用表格的嵌套。

（2）有的学生在使用表格定位时, 在页面视图下显示没有一点问题,可在浏览器中预览的时候会出现页面元素错位的现象, 这个问题就在于表格宽度的设置上, 表格宽度的设置有两种,一种是百分比, 一种是像素, 如采用百分比就会出现在不同分辨率下显示效果不同的现象, 而将表格的宽度都更换成像素, 就可以解决这个问题了。

2、文件的命名

在制作网页的过程中, 学生经常会遇到这样一些问题：网页中插入的图片在浏览时无法显示、做好的链接不能正常应用等。分析原因, 我们常常发现, 是因为文件使用了中文名称。学生为了便于记忆和查看明了, 总是喜欢给自己网站中的文件起一个中文名称, 正是这些中文名称导致了网页浏览中的一些问题, 解决的方法就是将文件名改为英文。为了便于记忆可以使用汉语拼音或是中文的英译, 如背景图片文件可命名为background.gif或bg.gif

3、图像的无缝拼接

图像是网页中必不可少的元素, 它起到美化页面的作用。图像的格式有很多种, 但在网页中常用的只有三种格式GIF、JPG、PNG。图像的大小在很大程度上影响网页的下载速度, 所以在使用图片之前要先用图形处理软件（如PhotoShop）对图片进行优化处理, 在不影响显示效果的情况下尽量使用小尺寸的图片。如需使用大图片,我们可以采用图像的无缝拼接技术, 所谓图像的无缝拼接就是在图形处理软件中将一个大的图片分割成几个小的图片, 然后在网页制作软件中再把几个小图片拼合成一个大的图片, 拼合后的图像跟原来的图像显示效果一样, 看不出拼接的痕迹。完成拼接主要利用了表格的定位功能, 把几个小的图片分别放在表格的各个单元格中, 设置表格的边框、单元格的间距和边距均为零, 然后再手动调整一下, 就可以完成图像的无缝拼接了, 这样处理虽然比较麻烦,但却既能使用效果好的大图片又解决了图片下载速度的问题。

4、个人站点中导航按钮的设计

（1）使用现成的大图片。根据站点的主题选用一个与主题相关的图片,利用图片的各部分做成导航, 如制作一个文学网站, 可以选用一本书作为导航, 书的目录就是站点的栏目。

（2）使用Photoshop或Flash来制作自己的导航按钮。采用这种方法,要求学生熟练掌握图形处理软件及动画制作软件的使用, 并具有创新性, 自己动手设计并使用相关软件完成这样创作出的导航系统就会具有新意, 会吸引更多的浏览者。

二、制作技巧

网站一般包括首页（网站的门面）、框架页（网站的主要结构页面）、普通页（网站主要的承载信息的页面）、弹出页（一般用于广告、新闻、消息、到其他网站的链接等等）。

1、首页设计技巧

网站首页的形式有两种，一种是形象展示型，通过艺术造型和设计布局，利用一系列与公司形象和产品、服务有关的图像（较多）、文字信息（较少），组成一幅生动的画面，向浏览者展示一种形象、一个氛围， 从而吸引浏览者进入浏览。另一种是信息罗列型，这是一般大、中型企业网站和门户网站常用的方式，即在首页中就罗列出网站的主要内容分类、重点信息、网站导航、公司信息等等。

2、风格保持一致

（1）结构的一致性：网站的统一性在网站营销中占重要地位，而网站结构是网站风格统一的重要手段，包括网站布局、文字排版、装饰性元素出现的位置、导航的统一、图片的位置等等，在结构的一致性中，我们要强调网站标志性元素的一致性，即网站或公司名称、网站或企业标志、导航及辅助导航的形式及位置、公司联系信息等，这种方式是目前网站普遍采用的结构，一方面减少设计、开发的工作量，同时更有利于以后的网站维护与更新。

（2）色彩的一致性：方式是保持站点主体色彩的一致，只改变局部色块，优点是一个独特色彩的网站会给人留下很深刻的印象。

（3）导航栏的一致性：导航是网站的一项重要组成部分，一个出色的富有企业特性的导航将会给人留下深刻的印象。利用背景取得统一：有效利用背景取得网站统一和专业化，将公司的标志、象征性的简单图片作为背景，并将其淡化，使浏览者在阅读网站内容的同时不经意记下公司的标志。在整个页面中形成特有元素在大小、明暗及位置的呼应， 很好地塑造了网站的特有形象。

3、色彩搭配

页面的色彩搭配是与网站的主题分不开的，在色彩搭配上，一般来说，页面的主体文字应尽量使用黑色)与背景对比明显，按钮、边框、背景等使用彩色。色彩的应用最好根据网站主题风格选定一种基调，再根据这个基调来搭配其他颜色。一般来讲，绿色配以金黄、淡白，可以产生优雅、舒适的气氛；蓝色与白色混合，能给人柔顺、淡雅、浪漫的感觉；红色和黄色、金色搭配能渲染喜庆的气氛；而金色和咖啡色搭配则会给人带来暖意。整个页面在视觉上应是一个整体，以达到和谐、悦目的最佳视觉效果。

4、版面布局

网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、变化型，下面重点论述以下几种布局：

（1）“国”字型：

也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型。

（2）拐角型：

这种结构与上一种其实只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接。

（3）标题正文型：

这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类型。

（4）左右框架型：

这是一种左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标致，右面是正文。我们见到的大部分的大型论坛都是这种结构的，有一些企业网站也喜欢采用。这种类型结构非常清晰，一目了然。

三、结束语

网页制作中有很多的技巧, 只有在不断的实践中才会总结出更多更好的制作网页的方法,在知道了一些技巧之后一定要付诸实践, 这样才能更好地掌握, 把别人的知识变成自己的知识。

[1]王为正,何小翠,应红.计算机网页制作中几个疑难问题研究.金华市金华职业技术学院学报

[2]张鸣.关于网页设计与制作方法的探讨.长春市长春大学学报

[3]陈欣.Dreamweaver Mx教程.清华大学出版社