基于DIV+CSS布局技术的网页设计实现与优化

程 序

（贵州交通职业技术学院 贵州 贵阳 550008）

1 DIV+CSS布局技术

DIV+CSS作为一种新型的Web设计标准、网页布局方法，它基于传统网页布局方式表格、图层、框架等实现了网页内容与表现的分离。其中，DIV（DIVision，划分），是一个区块容器，用于封闭数据区域，其所包含的标题、段落、表格、图片等元素由＜div＞标记套用CSS来定义；CSS（Cascading Style Sheets，层叠样式表），是由国际W3C标准化组织所制定的的扩展样式标准，是定义HTML的显示形式，用于补充HTML的样式编排功能，可在同一文档内实现外部样式表、内部样式表、内联样式表的使用，以更好地完成网页设计。

2 基于DIV+CSS布局技术的网页设计实现

基于DIV+CSS布局技术的网页设计，其布局思想是用DIV来划分网页空间，用CSS来定位各个区块，以实现网页内容与表现的分离。也就是说，利用DIV+CSS实现网页设计，首先要将整个页面利用＜div＞标记进行分块，其次对各区块进行CSS定位，最后对各区块进行内容填充。

2.1 利用DIV划分网页空间

在网页制作之前，需分析网页的结构组成，进行整体规划，划分网页空间布局，明确其DIV层的嵌套关系。一般而言，网页空间结构包含以下几部分：

（1）标题区，位于网页顶部，用来显示网站名称、Logo等。

（2）导航区，位于标题区下方，用来显示网站的索引关系，如站点主菜单、工具栏等。

（3）主功能区，位于网页中间，用来显示网站的主体内容，如商品展示等。

（4）页脚，位于网页底部，用来显示网站的版权信息、法律声明等。

利用＜div＞标记将定义上述结构，可表示如下：

这样，就构成了一个网页的基本结构，此时尚未对各标签进行定位，因此这些标签仅按语句的先后顺序排放，宽度也为整个页面的宽度，这就需要CSS对各标签进行定位，并最终填充内容。

2.2 利用CSS定位各个区块

对网页空间完成划分后，就可以利用CSS对各个区块进行定位（确定各DIV层的位置、大小等），完成对页面的整体布局，为在各个区块中填充内容打下基础。

例如，对header的定位：位置居中，宽度为800px，上边距0px，下边距10px，左右边距为auto，可表示如下：

将页面的各个部分都定位完成后，就可按照网页设计的具体要求，在各个区块中添加相应的内容。对于如何对各区块进行填充，并将其以最佳状态显示，这涉及网页设计的实际实现细节，内容细致、繁多，这里鉴于篇幅，不再进行一一介绍。

3 基于DIV+CSS布局技术的网页设计优化

虽然使用DIV+CSS布局技术进行网页设计有极大的优势，但在实际使用过程中，仍存在一些不足，如实际操作中存有一定程度的误差、浏览器兼容问题比较突出、技术实现复杂程度较高以及使用难度较大等。因此，在实际的网页设计中，要在重视DIV+CSS布局技术优势的基础上，充分考虑其现存问题，尽可能地对其进行优化，以最大限度地发挥DIV+CSS布局技术在网页设计中的作用。

基于DIV+CSS布局技术的网页设计优化方法有很多，下面简单介绍几种。

3.1 重视网页风格的美化

基于DIV+CSS布局技术的网页设计优化，要重视网页风格的美化，因此网页设计人员应做到以下几点：

（1）应尽可能减少或避免代码视图臃肿现象的出现，以降低设计难度，保障网页质量，提升网页美观；

（2）应尽可能简化嵌套布局，确保网页外部的整齐简洁；

（3）应尽可能使用外部样式表，以降低实现难度，减少操作步骤；

（4）应保证美化的目的在于服务网页设计，不能以牺牲代码间接性、结构性为代价，片面追求美化，因此要把握好美化度的问题。

3.2 适当地编写独立代码

基于DIV+CSS布局技术的网页设计优化，对网页设计人员要求更高，因此网页设计人员在网页设计过程中能适当地编写独立代码，具体来说应做到以下几点：

（1）应合理利用TGc_9HH布局技术解决传统表格布局中存在的常见问题；

（2）应尽可能将网页内容与表现分离放置，将设计部分剥离出来，并将其放置在一个独立的样式文件夹中，以最大限度地减少网页无效的可能性。

（3）应合理缩减页面代码，以保障网页的浏览速度，进而缩减宽带成本，提高设计的最终效果。

3.3 合理利用CSS选择器

基于DIV+CSS布局技术的网页设计优化，其关键在于合理地利用CSS选择器，因此网页设计人员应做到以下几点：

（1）要理解CSS选择器的用途与优缺点，明白CSS选择器比其他选择器要更加灵活，应用更广泛，但CSS选择其也有其自身的局限，如具有强制性、唯一性等特征，因此为保证使用者能更加快速地通过选择器进行检索，务必要使网页结构更加灵活。

（2）要搭配好DIV与CSS，即将DIV合理运用到网页的布局设计中，以更好地帮助使用者进行检索、翻阅，而将CSS灵活运用到网页的内容编排中，以确保网页的简洁性，提高网页的设计效果。

随着Web 2.0标准化设计理念的普及，DIV+CSS布局技术在网页设计中将有更大的应用空间，也将在未来的应用过程中开发出更多的优化方法，得到更好的优化，从而更好地推动网页设计的发展。

4 结语

综上所述，DIV+CSS布局技术在网页设计中大有可为，设计人员在实际应用中要极力发挥其优势，规避其不足，通过科学、合理地布局网页空间，使其功能性更强、灵活性更高，在最大程度地提高网页设计的最终效果。

[1]张伟娜，王海波.DIV+CSS网页设计初探[J].电脑知识与技术，2013（1）.

[2]王国庆.探究基于DIV+CSS技术的网页设计优化方法[J].信息与电脑（理论版），2016（2）.

[3]刘小艮.网页设计中DIV+CSS布局技术的应用实践探讨[J].无线互联科技，2015（12）.