摘要：本文主要介绍网络设计人员对网站进行排版和布局时，所用到的div+css技术及相关应用案例，还有网页的色彩搭配、版面布局等平面设计元素的相关理论和内容。
关键词：Div+CSS;网页设计；版面布局
纵观国内外众多大型商业门户网站、个人网站、行业网站、企业网站等，其不仅设计风格迥异，颜色布局多变，给人以完全不同的视觉冲击和美观享受，而且网站的开发与设计呈现出日新月异的发展趋势出来。伴随着互联网的发展与崛起，信息技术的不断成熟与革新，如今网页设计已经不再从前那般简洁朴素，界面丑陋，反而愈加注重网页的编排，平面元素的应用，与用户的交互等等。因而，本文试图探讨并介绍网页设计中利用CSS+DIV的布局方法，网页制作的色彩搭配，文字的编排搭配，以及在网页设计中经常用到的经典版面布局风格，来重点论述网页设计人员是如何将平面视觉元素运用到各大网站中的网页设计里来的。
1Div+CSS的布局技术
1）Div技术从其本质上而言，是将网页HTML文件当中混乱臃肿的文字、图片等内容通过Div元素将其分割成每一个单独的区域，以此来形成一种逻辑清晰，结构明确的模块组合体。Div元素，凭借其拥有众多具有独特作用的属性，经常被开发人员用来赋予特殊的值，并将网页内容的开头和结尾处放置DIV标签，以此来构成完成的一个模块。2）CSS是一种具有标记行的特殊语言，通过CSS，设计人员可以把对网页层级结构的设计样式和网页内容两者之间完全分离开来，独立存在，这样一来，不仅有利于对网站中各网页以统一设计风格的样式进行布局，而且还有利于提升网页的加载速度，缩短其响应时间。从当前CSS与Div在网页设计中的运用案例中来看，这种布局技术不仅可以使得网页设计人员通过属性值的设定精准的将各类网页内容精准的进行编排和定位，而且还能够使得文字和图片之间以精美的排版样式为网页的整体浏览效果增色不少。另一方面，由于网页内容同其设计样式两者之间互相分离，因而当网页设计人员需要对其网页样式重新编排，或者在CSS样式中的某几项属性值修改时，只需要在单独存在的CSS文件中对布局元素加以重新设计即可达到目的，从而使得页面的布局与后期迭代工作变得更加轻松简单。此外，由于内容样式的分离，使得网页本身不仅在代码内容上大为减少，而且极大程度上减少了网页重新改变版面布局的时间，使得网站部署的带宽成本节省不少。
2网页设计的色彩搭配
网页设计这项工作，从其技术角度来看，不仅要包含各种平面设计元素，而且还需要严格遵循其固有的设计原则。而且网页设计本身所体现出来的艺术高度通常决定着网页的浏览量和点击量，同时也是网站开发人员同互联网用户之间进行互动和交流的重要媒介。一个网站在色彩上的搭配和选用不仅有利于传递网页设计人员所要表达的主题及内容，而且可以为用户带来极为强烈的视觉冲击，增强其网站本身的观赏性。
2.1划分网页层次
从人欣赏事物的角度而言，色彩能够为人类感知事物提供极大的视觉刺激，使其从情感上产生共鸣。因而，如果通过将带有不同色调的色彩进行均衡组合，会形成风格非常鲜明，内容极为出彩的页面。由于网页中通常有不同的层次和不同作用的文字内容，根据文字内容的重点、情感、风格，选用比例均匀，搭配得当的几种色彩，会使得网页内容随色彩的分布而显得更加错落有致，主次分明，从而将网页的层次感划分得一目了然，以便于网民在网页的阅读浏览过程中抓住重点来获取信息量。这样一来，不但网页的导向性得以凸现出来，而且其视觉表达效果也十分出彩。下图是国外一家社交网站的网页设计作品，从该图中可以看出其在好友动态上色彩选用上用白色和蓝色交替组合的形式进行搭配，而在个人资料及其社交功能上选用的黑色作为背景，黑色和蓝白色形成强烈的视觉区域和对比，因而使得当用户在浏览该社交网站时将焦点更多的关注于内容本身上面。
作者：薛稳 单位：河南省漯河市第五高级中学高二（4）班