购买
下载掌阅APP,畅读海量书库
立即打开
畅读海量书库
扫码下载掌阅APP

2.3 页面布局

2-3 页面布局

页面布局是网页设计的重要工作之一,它决定了页面中各板块的显示位置和显示方式。传统的页面布局通常采用表格布局技术,适合一些页面结构不太复杂的小型网站,其优点是布局方便、直观,缺点是显示速度较慢,需要将整个表格下载完毕才开始显示页面内容。表格布局方式也不利于“结构和表现分离”的设计理念。 目前流行的页面布局方法是采用CSS+DIV的布局技术,这是Web标准推荐的布局方法。

2.3.1 使用表格布局页面

早期一般都采用表格进行页面布局,这种方法将整个页面规划到一个或多个表格中,在需要时也可以使用表格嵌套(在一个表格中包含另一个或多个表格)的方法实现页面布局。

目前虽然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 使用可视化方法调整表格

2.3.2 使用DIV和CSS布局页面

使用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代码如下。

2.3.3 页面元素的定位

网页中元素的显示位置,在浏览器窗口大小发生变化时可能出现一些变化。为了避免元素位置变化而导致页面布局错乱,需要使用元素定位属性进行设置。页面元素定位分为流布局定位(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,其显示效果会发生变化吗?为什么? JkYymuOnd/vdfLwuOr9F+MUVzsNC1hoj7eK0VE0TNZVB9wOuYAc+XrUMJGIepfaD

点击中间区域
呼出菜单
上一章
目录
下一章
×