下载掌阅APP，畅读海量书库
立即打开
2-3 页面布局
页面布局是网页设计的重要工作之一，它决定了页面中各板块的显示位置和显示方式。传统的页面布局通常采用表格布局技术，适合一些页面结构不太复杂的小型网站，其优点是布局方便、直观，缺点是显示速度较慢，需要将整个表格下载完毕才开始显示页面内容。表格布局方式也不利于“结构和表现分离”的设计理念。 目前流行的页面布局方法是采用CSS+DIV的布局技术，这是Web标准推荐的布局方法。
早期一般都采用表格进行页面布局，这种方法将整个页面规划到一个或多个表格中，在需要时也可以使用表格嵌套（在一个表格中包含另一个或多个表格）的方法实现页面布局。
目前虽然CSS+DIV布局技术占据了主导地位，但在一些小型环境、页面局部设计或页面元素定位中，表格布局仍有自己的一席之地。
图2-13所示就是一种在Web窗体页（.aspx）中常用的表格布局方式。该布局使用了两个嵌套的表格，外部是一个3行3列的表格，分为标题（3列合并）、左边栏、中部、右边栏和页脚区域（3列合并）。中部区域嵌套了一个5行2列的表格，将区域划分为“栏目1”和“栏目2”两部分。
Visual Studio为开发人员提供了可视化的表格设计工具，选择“表”→“插入表”命令，将弹出图2-14所示的对话框，使用该对话框提供的属性设置功能可以帮助开发人员方便、快速地完成表格外观的设置操作。对对话框的各种设置都会以HTML代码的形式添加到页面中，切换到.aspx文件的源视图就可以看到这些代码。
当把一个标准表格插入到页面后，除了可以在源视图中通过HTML代码对其进行编辑和修改外，还可以在设计视图中使用可视化的方法对表格进行外观调整（如合并单元格、拆分单元格、添加行或列，以及删除行或列等）。
图2-13 使用表格布局页面
图2-14 “插入表格”对话框
例如，需要对单元格执行合并操作时，可按照如图2-15所示在选择了需要合并的所有单元格后右击，在弹出的快捷菜单中选择“修改”→“合并单元格”命令即可。调整行高或列宽与在Word中操作表格相似，直接拖动相应的边框线即可。
图2-15 使用可视化方法调整表格
使用CSS+DIV进行页面布局最大的优点是体现了结构和表现分离的网页设计思想，此外，浏览器对CSS+DIV定义的页面是边解析边显示的，较表格布局的页面显示速度更快。
使用CSS+DIV进行页面布局设计时一般需要通过页面结构分析、页面布局和样式设置3个环节。
所谓页面结构分析，是指根据页面所表现的内容构思和规划页面组成的过程。也就是说，在设计一个网页时首先应考虑页面应包含哪些板块，这些板块应放置在页面的什么位置等。必要时可画出页面结构的设计草图。
所谓页面布局，是指在页面结构确定后使用<div>标记创建需要的各板块区域。
所谓样式设置，是指对所有<div>及其他页面元素的表现所进行的设置。如，表示各板块的<div>应如何排列，字体、字号和颜色应如何设置，以及在什么位置使用什么图片等。原则上，页面中所有的样式设置应包含在CSS样式表中。
1.CSS+DIV页面布局示例
这里将通过一个实例介绍CSS+DIV页面布局的使用方法。
【 演练2-3 】使用CSS+DIV技术设计如图2-16所示的页面布局效果。
（1）页面结构分析
可以认为页面由6个板块组成，其中“左边”“中间”和“右边”3个板块需要横向排列成一行。设计时可以将6个板块分别放置在6个不同的层结构中，通过对各层属性进行设置实现页面布局效果。
图2-16 页面布局效果
（2）创建DIV层
新建一个ASP.NET空网站，向网站中添加一个Web窗体并将其命名为Default。在该页面的源视图中找到由系统自动添加的<div>和</div>标记，在其中再添加6对<div>标记。
（3）创建CSS样式表
在解决方案资源管理器中右击网站名称，在弹出的快捷菜单中选择“添加”→“添加新项”命令。在弹出的对话框中选择“样式表”模板，单击“添加”按钮。考虑到各层样式要求有完全相同的地方，为避免重复设置，可对层同时应用元素ID选择器和类选择器。
使用样式生成器或直接在样式表文件代码窗口中编写StyleSheet.css的代码如下。
说明：CSS+DIV布局技术中经常用到<div>元素的float属性和clear属性。
1）float属性用于确定是否允许元素在页面中浮动及浮动的方向，取值有以下几个。
float:none：表示不允许元素浮动。
float:left：表示元素可以向左浮动。
float:right：表示元素可以向右浮动。
2）clear属性用于设置元素的左右是否允许出现其他浮动元素，取值有以下几个。
clear:left：表示元素左边不允许有其他浮动元素。
clear:right：表示元素右边不允许有其他浮动元素。
clear:both：表示元素左右两边都不允许有其他浮动元素。
clear:none：表示元素两边都允许有其他浮动元素。
StyleSheet.css编写完毕后，可在解决方案资源管理器中将其拖动到Default.aspx的设计视图窗口，系统将自动生成对StyleSheet.css文件的引用代码。
（4）编写Default.aspx的HTML代码
2.CSS+DIV布局的常用技巧
（1）布局效果1
要求实现的布局效果1如图2-17所示。
图2-17 布局效果1
CSS定义代码如下。
HTML代码如下。
（2）布局效果2
要求实现的布局效果2如图2-18所示。
图2-18 布局效果2
CSS定义代码如下。
HTML代码如下。
（3）布局效果3
要求实现的布局效果3如图2-19所示。
CSS定义代码如下。
图2-19 布局效果3
HTML代码如下。
（4）布局效果4
要求实现的布局效果如图2-20所示。
CSS定义代码如下。
图2-20 布局效果4
HTML代码如下。
（5）布局效果5
要求实现的布局效果如图2-21所示。
CSS定义代码如下。
图2-21 布局效果5
HTML代码如下。
网页中元素的显示位置，在浏览器窗口大小发生变化时可能出现一些变化。为了避免元素位置变化而导致页面布局错乱，需要使用元素定位属性进行设置。页面元素定位分为流布局定位（static）、坐标绝对定位（absolute）和坐标相对定位（relative）3种形式。
1.流布局定位（static）
static定位方式使页面中的所有元素按照从左到右、从上到下的顺序显示，各元素之间不重叠，这种定位方式是HTML默认的定位方式。进行页面布局时需要配合float属性和clear属性使用，前面介绍的例题都是使用这种方法进行页面布局的。
2.坐标绝对定位（absolute）
absolute定位方式使元素显示在页面中的位置由style样式中的left、right、top、bottom及z-index属性值决定。具有相同z-index属性值的元素可以重叠，其效果就像多张透明纸按顺序叠放在一起一样，z-index属性值大的显示在上层。
left、right、top、bottom分别表示元素距左、右、上、下边的距离。
需要说明的是，虽然这种定位方式的名称为“绝对定位”，但实际上元素的坐标位置是以距元素最近的具有定位属性（position）的父容器作为参照物的。如果不存在具有position属性的父容器，则元素将以浏览器窗口为参照物。
3.坐标相对定位（relative）
relative定位方式使页面元素显示在页面中的位置由style样式中left、top和z-index属性值决定。与绝对定位不同，具有相同z-index属性值的元素不会重叠。
【 演练2-4 】新建一个ASP.NET空网站并添加一个Web窗体页面Default.aspx。在页面的源视图中，参照下列所示的代码修改页面。按〈F5〉键，在浏览器中打开网页并改变浏览器窗口的宽度，观察各层位置的变化情况。
当浏览器窗口宽度较小时，各层位置显示为如图2-22所示的效果，加宽浏览器窗口时各层位置显示为如图2-23所示的效果。
图2-22 各层相对位置效果1
图2-23 各层相对位置效果2
页面的HTML代码如下。
在上述代码中，层div1相对其父容器body水平居中显示，而且div1又未设置position属性，故div1相对浏览器窗口也将居中显示，这就导致浏览器窗口宽度变化时div1的显示位置也随之变化（无论浏览器窗口宽度是多少，div1都要居中显示）。
div2的父容器是div1，也就是说，div2是div1的一个元素，故其显示方式要相对父容器左对齐。
表面上看，div3的父容器是div2，但由于div2和div1都没有设置position属性，故div3实际的参照元素为浏览器窗口。代码中将div3的position属性设置为absolute，并设置了top、left和z-index属性值，导致div3的显示位置相对浏览器窗口固定不变。
div4的父容器是设置了position属性的div3，故其所有位置设置都是相对div3而言的。div4的显示位置无论浏览器窗口如何变化，始终相对div3顶端20px，相对div3左边框30px。这就导致div3相对浏览器窗口位置变化时，div4的位置也随之变化。
思考：如果将div4的position属性值改为absolute，其显示效果会发生变化吗？为什么？