网页布局设计技术问题探究

韦春暖

（临沂职业学院，临沂 276017）

Dreamweaver CS6作为一个所见即所得的网页编辑器深受广大网页设计者的厚爱，设计者可以利用它轻而易举的完成各类网页的设计、编码和开发。运用该软件进行开发使用的过程中，虽然很多操作步骤在相关书籍或资料中都有介绍，但很多使用者尤其是初学者常常会在学习操作过程中遇到各种类型的问题，不能实现预期的设计效果。常见的问题如 “不清楚众多网页布局方式的区别、用法”、“不能准确的运用CSS样式美化网页，实现预期的排版效果”、“布局时不能准确进行排版定位”等。本文将对这些常见的问题或者疑惑进行详细的分析解读，从而帮助大家形成一个完整清晰的网页布局设计思路。

网页设计制作中的两个既基本、又重要的环节为“网页布局”和“网页美化”，网页布局是网页设计的核心工作，所以选择好的网页布局方式至关重要。常见的网页布局包括表格布局、框架布局、流体网格布局、Div布局等多种布局方式，而作为传统布局方式的“表格布局和框架布局”与当今主流的布局方式“流体网格布局和Div布局”相比，前者使得网页的制作、修改、维护和更新复杂，代码杂乱无章，而后者是基于Web标准的网页设计的核心理念将网页内容与形式相分离，引入以Div标签为代表的区块标签，凭借CSS样式强大的设置功能，使网页布局更加规范，浏览器加载更快，深受设计者的欢迎。在网页设计过程中对于网页布局方式的选择主要还是根据网页的复杂程度、用户行为以及网页浏览所对应的设备环境来选择，如果是网页内容较少，结构简单的网页可以采取传统的布局模式，但如果是综合型的大型网站，一般应选择“Div+CSS布局”模式布局网页，如果要实现在“智能手机、平板电脑、桌面电脑”等多种设备上能够自适应浏览网页内容时，需要采用“流体网格布局”的模式来布局网页。

采用表格布局和框架布局网页时操作相对简单，当采用Div布局网页时，主要采用两种布局模式，一种是采用AP Div布局方式，另一种是采用Div布局方式。AP Div是绝对定位的Div标签，是Div的特殊形式，可以通过设置position属性是否为absolute进行相互转换。在Dreamweaver CS6环境下，Div标签由虚线框表示，而AP Div是实线框。用鼠标拖动AP Div标签可以任意移动位置，而Div标签的位置不能通过鼠标拖动移动。放在AP Div中的网页元素，可以通过控制AP Div的位置、堆叠次序等属性，实现网页的精确布局。由于使用CSS布局网页，真正实现了网页内容与形式的分离，且排版灵活，更新容易，所以，运用CSS+Div布局版式已经成为网页布局的主流技术。网页版块划分以及网页版块间的位置关系的设置需要通过设置CSS样式来实现。运用Div进行网页布局时，首先应对页面进行整体规划，划分模块，理清模块间的嵌套关系等。简单网页通常由标题、导航、内容和版权信息等几个模块构成。各模块间的有机组合，构成不同的网页版式。目前常见CSS+Div布局版式主要有三种，分别为网页内容居中布局、两列式布局、三列式布局。其中，多列式布局又可分为多列百分比布局、多列固定宽度居中布局、多列左、右列宽度自适应布局。要实现上面介绍的三种布局版式，主要是通过设置各Div板块的CSS样式中width的值来实现。例如：一网页布局为三列，如果将该网页三列设置成左（left）、右（right）板块固定宽度，中间（main）板块自适应的布局方式，需先把left、right Div的CSS样式中“float”属性值分别设置为left、right后，在把left、right Div的width属性设置成一个绝对像素值即可。如果要将网页设置成两列百分比布局布局版式，先把left和right Div的CSS样式中float属性设置其浮动属性为“left”，在把设置left、right Div的宽度分别设置为如“20%”和“80%”的比例值便可实现百分比的布局效果。对于采用Div进行两列式或者多列式布局时，最关键的是通过设置float属性来实现网页左、中、右的结构布局模式，但这里需要注意的是代码中Div块通常是按照顺序流方向进行布局的，也就是说在用Div布局设置的时候，要有先后设置的顺序，如果在布局时达不到预期效果，很多就是因为没有按照这个设计原则操作造成的。

网页结构布局完成后，需要根据网页布局模式的不同采取不同设置方案使得网页能够在浏览器中以居中或者自适应等形式显示。当采用框架布局方式布局时，不必调整框架的高度和宽度，它的宽度、高度默认方式是自适应浏览器大小的方式显示，只需调整框架之间的宽度和高度即可。如果运用表格布局网页，居中显示的设置方式是将布局表格选中后，设置它的“对齐”方式为“居中对齐”，而对于用Div或者AP Div布局网页时，需要通过建立CSS或者直接设置CSS里面width、height及margin属性值来进行网页的定位。网页的布局宽度一般分为固定宽度和自适应宽度两种模式。将Div+CSS布局的网页设置为自适应宽度时，只需要将最外层的Div标签的width值设为100%即可实现居中显示的效果，而把固定宽度布局的网页设置为居中显示时，首先需要将最外层的Div标签的width值设置为所需宽度的固定像素值，然后通过设置CSS样式表中的margin属性中left和right的值来实现，即通过设置网页与左右边距的距离宽度值或比例值来实现网页布局的居中效果。在布局网页时设置margin、border、padding的属性可以按照规定的顺序使用2个、3个或者4个属性值来表示，不同个属性值的含义分别为：用2个属性值表示时前值为上下边框的属性，后值为左右边框的属性；用3个属性值表示时，前值为上边框的属性值，中间的数值为左右边框的属性值，后值为下边框的属性值；用4个属性值表示时各值依次代表上、右、下、左边框的属性值，即按顺时方向设置属性值。