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

2018-03-09程序

信息记录材料 2018年5期

程序

（贵州交通职业技术学院贵州贵阳 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布局技术的网页设计优化方法有很多，下面简单介绍几种。