21世纪我国科学技术水平大幅提高，计算机网络技术成为了推动各行各业事业发展的助推器，可以利用计算机网络快速发布和获取信息，同样在人们的政治生活、经济生活等多个方面发挥着无可比拟的作用。网页设计与计算机网络技术同步发展，也是应用计算机上网的主要依托。而当前计算机网络的受众群体不断壮大，人们依赖对计算机网络的使用使得网页设计的重要性更为突出。因此，做好网页设计是利民的事业，而仅以对CSS技术在网页设计中的应用进行论述。

1、网页设计要素

任何网站中，网页界面的视觉效果和操作便利性十分关键。以主页举例说明网页版面设计的相关问题。设计别具特色主页，需包括4个设计要素，即文字、图片、排列方式和主色调。以上4要素相辅相成、缺一不可。

(1)文字及图片要素

文字要素是网页必备，提示说明的作用在此不用多说。而图片要素在网页设计中主要是为凸显版面的美观性，实际上对于图片要素的要求和页面的内容并无多大关联，比如部分股票或医疗网站，进入网站的人们应该主要是为了解信息，即便是设计版面十分花哨，也未必会有几个人去认真观看，很多时候过多的图片内容反倒会影响到浏览网页的速度。

相反地，比如一些游戏网站、影视网站或旅游网站等，大量图片元素设计无疑会增添对上网者眼球的诱惑力，而缺少合适的图片元素则导致网页板面黯然失光。这就要求设计人员要图像处理能力的技能，从美术角度设计更具创意的网页。

(2)排列方式要素

排列方式也叫网页布局，是网页设计中又一个关键要素。网页的版面充斥的内容很多，既要有文字，也要有图片。而文字字体和大小的格式之分，文字于整篇文章中又有标题和正分之分。图片则同样有大小和横竖的差别。不管是文字还是图片都是为了给浏览网站的人展示网站的特色和内容，不能将其一股脑罗列于网页版面上，无条理即会显得杂乱。有关网页排列方式，常用的型式有“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型和变化型等，这些型式可利用上网浏览各种网页直接观看，不再详细介绍。

(3)色彩要素

色彩要素于网页设计中占有的比例比较大。通过合理的色彩搭配，可使网页在浏览者眼前一亮，一定程度上弥补主页设计吸引力的不足。网页的色彩搭配和相应网站所呈现的主题紧密联系。一般来说，一个网站的主题色可有一种或两种组成，这样做简单明了，不至于使浏览者迷失方向或枯燥乏味。为使浏览者更方便于快速浏览文字内容，可将主体文字的颜色设计为深色，相应的网页背景、按钮或条框等则设计为彩色。

2、基于CSS技术的网页设计实例

CSS技术是级联样式表(Cascading Style Sheets)的简称，也可称之为风格样式表单。CSS技术在很多网页设计中受用率极高，应用CSS技术可使设计工作量减少，同时也能有效对网页整体布局、色彩搭配、字体设计、链接组成和背景分布等进行更为精确的设计控制。作为一项可快速设计网页的应用技术，CSS技术更易于控制网页布局、提升编程代码的重用率、简化HTML语言的标记频率、提高网页加载速度和系统维护与更新等。

以DIV+CSS网页设计为例，共包括10个关键步骤。

第一步：规划网站。

第二步：创建html模板及文件目录等。

第三步：划分网站为5个div和网页基本布局的基础。

第四步：网页布局与div浮动等。

第五步：网页主要框架之外的附加结构的布局与表现。

第六步：页面内的基本文本的样式(css)设置。

第七步：网站头部图标与logo部分的设计。

第八步：页脚信息(版权等)的表现设置。

第九步：导航条的制作(较难)。

第十步：解决IE浏览器的显示BUG。

因篇幅所限，仅详解其中的“第二步：创建html模板及文件目录等”和“第七步：网站头部图标与logo部分的设计”予以说明。

(1)第二步：创建html模板及文件目录等

编程代码如下：

Company Name-Page Name @import"css/master.css";写入完毕，即可保存为index.html,然后创建文件夹css，images。

设计版面的大框，需在html文件中写入Helloworld，然后创建css文件，并命名为master.css,保存在/css/文件夹下。

同时写入：

#page-container{width:760px;background:red;}

控制html的ID是page-container的盒子，且宽度为760px，且背景色彩设计为红色。为使得盒子设计居中，可写入margin:auto;保存css文件为：

#page-container{width:760px;margin:auto;background:red;}

这样一来，盒子与浏览器顶部具有8px的间隙，若需消除间隙可在css文件中写入：

html,body{margin:0;padding:0;}

(2)第七步：网站头部图标与logo部分的设计

为了增加网页的整体效果，可专门制作网页头部。首先，本例需要采用两张网络图片(如图1和图2)。

#header层设计背景图案，可通过添加方式引用图1。写入：

#header{height:150px;background:#db6d16url(../images/head－ers/about.jpg);}

通常，使用背景的属性可以是简写属性名，这样可以规定好背景的颜色、图案、定位、能否重复使用和如何重复使用等多方面问题。另外，需要注意的是图片的保存路径是相对css存放路径来定位的，而不是很多人误解的html文件。替换标签中的“spider-man”，设计该图片(如图2)浮于顶部左上方，写入属性值为：

h1{margin:0;padding:0;float:right;margin-top:57px;padding-right:31px;}

这样一来，该图片可向右自由浮动，且上边距为57px，右间隙为31px。另外，由于IE浏览者自身的原因，进行css编程需尽量采用padding属性，可有效避免IE浏览器的附加调试。

以上浅略分析结合工作中总结的网页设计经验，在网页设计中应用CSS技术可将网页整体布局、色彩搭配、字体设计、链接组成、背景分布以及其他效果的实现简化，设计控制过程更为便捷，只要通过对CSS代码进行局部修改便可实现基于同一版面而衍生出来页数不同、外观不同和格式不同的多个版面。CSS技术的应用范围宽泛且于网页设计的作用显著，还体现在所有浏览器均可适用、可轻松实现图片转换功能和快速下载页面、网页内字体设计美观性更强且更便于页面的文字排版工作和网页页面的布局设计更容易得到掌控等。

此外，基于第一次设计网页版面的编程内容可随时更改部分CSS代码来调整所有版面的风格，不再需要依次对每个不同网页进行修改。究其原因则在于所有网页版面包括文字、图片、排列方式和色彩等元素都采取一个CSS文件进行牵头控制，只要改动这个CSS文件，其他版面相应指令随之发生改变。

如果网页设计仍然没有应用到CCS技术将如何轻松控制网页整体布局、色彩搭配、字体设计、链接组成、背景分布以及其他效果呢？以前主要依靠HTML标签的方式来实现，编码过程十分繁琐，一个网页版面所需写入的代码就会显得极为臃肿。而CSS技术的引入则有效地解决了这一棘手问题，当然所呈现出来的CSS应用技术也仅仅是其九牛之一毛，实际应用中也绝非如想象中那么容易。

3、结语

阐述了网页设计中所涉及主要的文字元素、图片元素、色彩元素和排列方式元素，同时稍有归纳有关网页设计方面的一些技巧。第二节内容中重点讨论基于CSS技术的网页设计实例探究。以DIV+CSS网页设计举例说明，展开该设计所包括的10个关键步骤，并以其中“第二步：创建html模板及文件目录等”和“第七步：网站头部图标与logo部分的设计”

重点剖析和论述。实际上，一个好的网站在其网页设计工作当中不仅仅只是拥有几个漂亮的版面就能称得上好，网页设计所涉及的内容还有很多，如视、音频链接等，这也是共同关注的问题。

参考文献：

[1]魏颖颖，熊淑华，李冲.基于CSS的网页下拉菜单设计与实现[J].计算机技术与发展，2011，(04).

[2]丁海燕，邹疆，邱莎.用层叠样式表CSS技术实现网页特效[J].昆明冶金高等专科学校学报，2010，(03).

[3]杜涛.CSS技术在网页设计中的应用与优化[J].长治学院学报，2007，(05).

[4]刘宏.用CSS实现图片特效滤镜[J].辽宁师范大学学报(自然科学版)，2002，(04).

[5]罗媛.利用HTML设计动态网页[J].芜湖职业技术学院学报，2001，(03).