网页制作的方法与技巧研究

谢 宜

（昆明艺术职业学院 传媒学院，云南 昆明 650228）

1 网页制作流程

（1）制作步骤。对于网站来说，内容和图片缺一不可，而进行网页设计就是让整个网站的页面风格以及色彩、整体布局和网站内容进行全面创作。对于网页设计来说，在设计时需要考虑的因素很多，如排版变化、文字安排、图片格式等，同时还要关注网站的主体选择，浏览者划分以及对网站的促销等等。①草稿。在进行网页草稿设计时，可以打开思路，天马行空。在这个阶段，一切都可以按照自己的设想来进行设计，进行网页草稿创造可以借助工具PHOTOSHOP来完成。②布局。完成草稿后，再把需要的功能模块放到页面上。此时的设计就需要按照一定的原则来进行。网站标志、导航条和广告条的设计都是有要求和规范的，对模块内容的安置也是要规定执行的。③定稿。在网页设计完成时，要把简略化的东西细致化，这样，才算完成了全部设计工作。网页制作需要看设计的网页是否表达了客户的意思。当得到客户同意后，再进行后面的设计。整个网页设计完成后，需要经过客户的首肯之后才能由程序员完成最后的程序设计。

（2）常用参数、图片质量与下载速度。网络传播是因为各种限制而使得速度快慢不一，所以在进行网页设计时，要充分考虑网速和图片大小之间的关系，太大的网页在低网速计算机前的速度是惊人地慢，这样会使浏览者没有观赏的耐心。①分辨率。图片的分辨率对文件大小和下载速度有很大的关系，目前。大多数显示器使用的是1024×768的分辨率，因此在设计网页时1024×768就是一道不可逾越的红线，如果分辨率过高，不但影响网页图片观赏质量，还会影响下载的速度。②位图。位图也就是图像，在设计图像时，要考虑亮度和色彩会因为分辨率的关系而出现失真，有时还会出现大面积的模糊。③矢量。矢量图是面向对像的图像或绘图图像，在描述图像时，常用粗线段来表示，表现图形特征简单明了，而且在对图形进行放大处理时不会失真。④图片格式。电脑图片的格式有GIF、JPEG、PNG三种格式。其中，GIF是图形交换格式，在颜色限定上是256色，因此，在设计对颜色配置要求高的图片来说，GIF格式就不够用了。JPEG格式突破了颜色的限制，但其缺点是有时会存在明显的压缩痕迹；而选择PNG格式的图片则避免了GIF和JPEG的缺点。

2 网页布局

（1）两栏式结构。这种结构是最简单的设计，首先在醒目的位置设计网站标识，然后再放置广告条；再就是在下面风味左右两栏，一边是导航或者栏目信息，一边是具体的栏目内容。

（2）三栏式结构。这是最普遍的设计结构，广告条在最显眼的顶端位置，网页的内容两旁也是放置广告的地方。这样的设计不需要过多的数据构建，是很多网站喜欢采用的。

（3）“三”型结构。这种结构基本在国外网站都很普遍，好处在于简单清晰，导航部分在左边，相对的就是内容显示。这种网页设计结构就是清晰，一目了然。而且在设计上采用Flash技术，让人过目不忘，视觉效果明显。

3 网页色彩的要求

不同的色彩给人的感觉是不一样的，所以，设计者在设计网页时，要巧用色彩对观赏者造成的影响，使他们对网站有兴趣。一般来说，设计游戏网页时要用红色来刺激视觉；设计新闻网站时，适用黑色和深蓝色较好；在为网购网站设计网页时，色彩不能过于艳丽；因此，在色彩选择上要偏重于柔和。在进行网页色彩搭配时，要尽量避免产生单调的感觉。

4 网页设计的细节把握

（1）颜色。在进行网页设计时，颜色的使用是最关键的。一般来说，网页都会选用一种主色调，然后围绕着主色调再挑选配色。这样，网页层次就会分明，不会杂乱无序，给人以清爽和舒服的感觉。

（2）线条的运用。在进行网页设计时，要注意巧妙使用线条进行过渡，这样观赏者在观看网页时，就会感觉自然流畅。

（3）图标。为了让网页的效果更加突出，在网页的各个标题前面最好加一些图标进行点缀。这样，浏览者在观赏时会觉得网页的效果非常出彩。不过也不能靠许多图标出奇取胜，要防止图标过多也会造成颜色混乱。

（4）文字。网站的内容是用文字来显示的，因此文字处理第一要素是要把文字的颜色和背景区分开来，防止浏览网页的人看不清楚。其次，字体的使用要统一，不要胡乱用不常用的字体。因为浏览者使用的计算机或许在配置上达不到要求，如果文字使用过于混乱，配置低的计算机就打不开网页了。第三，文字与文字之间的间隔要适当，便于观看。

（5）主题要鲜明。在进行网页设计时，主体明确是基本要求。每个浏览者在浏览网页是都是寻找自己最需要的内容，如果主题庞杂，浏览者就会选择离开；在设计网页时，要让网页一打开就能给人以强烈的印象。

5 常用工具介绍

网页设计所需要的制图软件已经开发了许多，所以，在进行网页设计时，只要善于使用制图软件，就会轻松许多。现在通常使用的软件是photoshoop和fire works。在制作效果图时，设计者要节省时间最好使用自己最熟悉和运用最熟练的制图软件。

photoshoop是一款非常好用的平面设计软件。由Adobe公司开发设计，其用户界面简单明了，所有功能都具备，对于设计者来说，是一个很好的帮手。所以很多网页设计者都会选择Photo shop来进行网页设计。Photo shop最大的好处就是设计了很多快捷键，H键、TABLE键、D键、X键可都可以实现一键完成任务。快捷键地设置，简化了设计步骤，提高了设计速度。

fire works是网页开发图形处理工具，需要矢量图形的设计者可以采用，而且它简单易学，只需要操作两、三遍就可以轻松使用了。所以，很多网页设计者都喜欢用它。

[1]邓文渊.网页制作高手[M].北京：人民邮电大学出版，2007.

[2]李宪广.网页制作边学边用[M].北京：清华大学出版社，2009.

[3]许凌云，柳勇良.网页设计全方位学习[M].北京：清华大学出版社，2008.

[4]焦慧.网页制作基础与典型范例[M].北京：电子工业出版社，2008.

[5]戎马工作室.Dreamweaver 8与asp动态网站开发[M].北京：机械工业出版社，2006.

[6]戴一波.Dreamweaver CS3网站制作炫例精讲[M].北京：电子工业出版社，2008.

[7]何秀芳.网页制作与网站建设课堂实录[M].北京：人民邮电出版社，2009.

[8]孙连三.新编网页制作与网站建设入门与提高[M].北京：人民邮电出版社，2008.