使用DIV+CSS布局网页

 

 

1.  掌握DIV(层)的概念。

2.  了解DIV+CSS的布局优势。

3.  掌握使用DIV+CSS进行常见的页面布局方法。

 

 

DIV+CSS是网站标准中常用术语之一,是一种网页的布局方法。这种网页布局方法有别于传统的HTML网页设计语言中的表格定位方式,真正地达到了信息结构清晰、内容与表现相分离。

DIV+CSS技术具有以下几点优势:表现和内容相分离、提高搜索引擎对网页的索引效率、提高页面浏览速度、易于维护和改版。



※任务分析

7-1所示的“食客微博”网页是利用DIV+CSS技术制作的。从表面上看DIV+CSS布局与表格布局的网页没什么差别,但制作方法却截然不同。DIV+CSS技术顺应网页设计技术的发展趋势,熟练掌握它有助于提高我们的网页制作水平。

本任务中使用了“一列固定宽度居中”、“三列固定宽度”等布局方式。

◆图7-1  DIV+CSS布局的网页

※相关知识

1DIVCSS

DIV是网页中的“层”(或称为“块”),相当于一个容器。网页中的元素均可以划分到相应的层中进行显示输出。

DIV的起始标签是<div>,结束标签是</div>。介于<div></div>之间的所有内容都属于这个层,其中所包含元素的特性由DIV标签的属性来控制,或者是通过使用CSS样式表来进行控制。

网页布局以层为单位,层的属性及层中所包含元素的属性都是通过CSS进行控制的,以实现页面的协调统一布局。

与表格布局相比,使用DIV+CSS布局的网页,代码简洁,结构清晰,面向搜索引擎更加友好。当网站中多个网页使用相同的布局时,通过修改CSS就能完成批量页面的变化,修改十分方便,降低了网站的维护成本。

2.插入DIV与建立CSS控制

Dreamweaver中,在“插入”栏的“常用”选项卡中单击“插入DIV标签”按钮,就可以在网页中插入DIV,在弹出的“插入DIV标签”对话框中输入ID值(如top),即可。如图7-2所示。

单击此对话框中的“新建样式”按钮,则可对当前DIV设置CSS样式。如图7-3所示,设置“选择器类型”为“高级”,“选择器”为“#top”(与DIVID值一致)。

 

◆图7-2  “插入Div标签”对话框             ◆图7-3  DIV新建CSS规则对话框

注:ID值是DIV在网页中的唯一标识,不同的DIVID值应有所不同,以便识别。

3CSS盒子模型

CSS的盒子模型是学习DIV+CSS布局的关键。我们在网页设计中常常使用一些属性:内容(content)、填充(padding)、边框(border)、边界(margin)。这些属性类似于我们日常生活中盒子的属性。

CSS盒子模式就具备这些属性,盒子模型的结构如图7-4所示。

内容,就是盒子里装的东西。常指文字、图片等元素,但是也可以是小盒子(DIV嵌套)。CSS盒子是具有弹性的,里面的内容大过盒子本身时会把盒子撑大,而不会损坏盒。

填充,就是为了防止盒子里装的东西损坏而添加的泡沫或者其它抗震的辅料。填充只有宽度属性,可以理解为盒子里辅料的厚度。

边框,就是盒子本身。有大小和颜色之分,我们可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的。

边界,则说明盒子摆放的时候的不能全部堆在一起,要留一定空隙,也就是说该盒子与其它物件要保留多大距离。

整个盒子最终的宽度(高度)= 内容的宽度(高度)+填充+边框+边界

4.常用的DIV布局方式

⑴一列固定宽度居中

显示在浏览器中一个居中的、有固定宽度的层,就是“一列固定宽度居中”布局方式。如图7-5所示。

传统的布局中,使用表格可以轻松地实现内容居中,在DIV+CSS布局中是通过“方框”中的“边界”属性,控制层左、右两个方向的外边距来实现的。“边界”属性可以直接使用数值,也可以设定为“自动”,即浏览器自动判断边距,当层的左、右边界设置为“自动”时,浏览器就会将层的左、右边距设为相等的值,从而实现居中效果。

⑵两列固定宽度

“两列固定宽度”的布局方式是网页中常见的布局结构,两个层呈水平方向排列。如图7-6所示。

要实现层的水平方向排列,必须使用到层的“浮动”属性,“浮动”属性是DIV+CSS布局中非常强大的功能。在CSS中,任何元素都能以浮动的方式显示,它可以使排版更加简单,易控制。

在网页中顺序插入的两个层,即使设置了合适的宽度,仍然还要保持在垂直方向上的线性排列。如果需要在水平方向进行排列,就需要设置两者的浮动方式。所以,在设计时对左层left和右层right的样式定义除了宽和高之外,还需定义“浮动”属性为“左对齐”。如图7-7所示。这样,left层在浏览器中居左对齐,right层也居左。但是因为左层已经在左侧了,所以右层与左层的右侧对齐,即使左层的宽度发生变化,右层仍然会与左层靠在一起的。

⑶多列并排

使用浮动定位方式,可以实现从一列到多列的固定宽度。如果需要几个层水平方向排列且居中显示,可以使用层的嵌套形式设计。先用一个居中的层作为容器,再将几个层水平排列放置在容器中,从而实现几列固定宽度并居中显示。

 

          ◆图7-6  两列固定宽度                   ◆图7-7  设置“浮动”属性为“左对齐”

5DIV与项目列表

HTML提供了项目列表的基本功能。引入CSS后,项目列表被赋予了很多新的功能,超越了最初设计它时的预计功能。项目列表主要采用<ul><ol>标记,还可使用<li>标记来定义列表中的各项。在DIV+CSS布局中,通常使用项目列表进行导航栏的设计。通过控制<ul><li><a>等标记的属性,来实现多变的导航效果。

※任务实施

1.在Windows环境下,将本教材“项目素材”文件夹中的“project07/task01/images”中的图片文件全部复制到mwmw中的images文件夹中。

2.运行Dreamweaver CS3,打开站点example。右击站点文件夹名称,在快捷菜单中选择“新建文件夹”,输入文件夹名称为“blog”。

3.右击blog文件夹,在快捷菜单中选择“新建文件”,输入文件名为“blog.html”,创建一个“微博”网页。如图7-8所示。双击该文件,对其进行编辑。

一.插入一行一列固定宽度居中的DIV

1.为了与前面已经制作的网页在页面设置上保持一致,在“属性”面板中单击“页面属性”按钮,打开“页面属性”对话框,设置当前网页的相关属性值,如图7-9所示。

2.在“插入”栏的“常用”选项卡中单击“插入DIV标签”按钮,弹出“插入DIV标签”对话框,输入ID值为“page”,如图7-10所示。

3.在“插入DIV标签”对话框中单击“新建CSS样式”,弹出“新建CSS规则”对话框。Dreamweaver会自动为我们设置“选择器类型”为“高级”,“选择器”为“#page”,设置“定义在”为“仅对该文档”。如图7-11所示。单击“确定”。

   

◆图7-8  新建blog文件夹       ◆图7-9  设置blog.html的“页面属性”的值

 

◆图7-10  插入一个ID为“page”的Div标签                ◆图7-11  为“page”新建CSS规则

4.在打开的“#pageCSS规则”对话框中,选择“方框”选页卡,设置宽为“1000像素”,高为“640像素”,“边界”的左、右均设置为“自动”。如图7-12所示。单击“确定”,当前网页就插入了“page”层。如图7-13所示。

 

◆图7-12  为“page”定义CSS规则               ◆图7-13  当前网页就插入了“page”层

二.插入一行三列固定宽度的DIV

1.删除“page”层中的“此处显示 id "page" 的内容”,保持光标在此DIV中,使用“插入”栏的“常用”选项卡中的“插入DIV标签”按钮,插入一个ID值为“top”的DIV

2.单击“插入DIV标签”对话框中“新建CSS样式”,为top层建立CSS样式,在“边框”选项卡中设置宽为“1000像素”,高为“70像素”。

3.将光标定位到top层的下方,插入一个left层。其CSS样式如图7-14、图7-15所示。注意其对齐方式为“左对齐”。

 

◆图7-14  left”层背景样式                 ◆图7-15  left”层方框样式

4.将光标定位到left层的右侧,插入一个middle层。其CSS样式如图7-16、图7-17所示。注意其对齐方式也为“左对齐”。

 

◆图7-16  middle”层背景样式                 ◆图7-17  middle”层方框样式

5.将光标定位到middle层的右侧,插入一个right层。其CSS样式如图7-18、图7-19所示。注意其对齐方式仍然为“左对齐”。

 

◆图7-18  right”层背景样式                 ◆图7-19  right”层方框样式

以上三个DIVCSS样式对话框的“类型”选项卡中行高均设为1.5倍。

注:如果在“设计”视图中不能准确定位光标到相应的DIV中,可以切换到“拆分”视图中定位光标到相应的<div></div>之间,再换回“设计”视图即可。

三.完整的页面布局

1.将光标定位到middle层的下方,插入一个bottom层。其CSS样式如图7-20、图7-21所示。注意其“清除属性为“两者”。

 

◆图7-20  bottom”层背景样式                 ◆图7-21  bottom”层方框样式

设置“类型”选项卡中的行高为“60像素”,颜色为“#FFFFFF”。

2.使用DIV+CSS布局的页面效果如图7-22所示。

◆图7-22  使用DIV+CSS布局的页面效果

3.切换到“代码”视图可以看到我们添加的6DIV代码如下所示:

<div id="page">

  <div id="top">此处显示  id "top" 的内容</div>

  <div id="left">此处显示  id "left" 的内容</div>

  <div id="middle">此处显示  id "middle" 的内容</div>

  <div id="right">此处显示  id "right" 的内容</div>

  <div id="bottom">此处显示  id "bottom" 的内容</div>

</div>

四.完成的页面内容

1.删除各DIV中的文本。

2.在top中插入图片“../images/sk_blog.jpg”。

3.在left中插入图片“../images/photo_01.jpg”,并设置对齐方式为“居中”。

4.参照图7-1所示,在此图片下输入文本。选中这些文本行,设置其对齐方式为默认,再单击“文本”菜单→“列表”→“项目列表”。

5.单击“CSS”面板中的“新建CSS规则”按钮,新建一个“.b_ul”样式(选择器类型为“类”,选择器为“.b_ul”,定义在为“仅对该文档”)。

6.在“.b_ulCSS规则定义”面板中设置行高为“2倍行高”,列表的项目符号图像为“../images/photo_01.jpg”。

7.将“.b_ul”样式应用于“left”层中的6行列表(<ul>中)。

8.参照图7-1所示,在“middle”层中输入相应文本及三条水平线。

9.在“right”层中建立“热门日志”栏目,栏目中的列表项使用“.b_ul”样式。

10.在“right”层中建立“最新菜谱”栏目,栏中的图片分别为“../images/xhlrg.jpg”、“../images/sszd.jpg”、“../images/lrclrt.jpg”、“../images/yzjzyp.jpg”。

11.参照图7-1所示,在“bottom”层中输入相应文本。

 

 



※任务分析

7-23所示的是当前网站中用以显示文章内容的网页,利用DIV+CSS技术制作的。使用了“一列固定宽居中,两列固定宽度”等布局方式。

◆图7-23  DIV+CSS布局的网页

※任务实施

一.插入一行一列固定宽度居中的DIV

1.运行Dreamweaver CS3,打开站点example

2.在“文件”面板中鼠标右击“article”文件夹,在快捷菜单中选择“新建文件”,建立一个空白网页文件read1.html

3.在“插入”栏的“常用”选项卡中单击“插入DIV标签”按钮,弹出“插入DIV标签”对话框,输入ID值为“page”,如图7-24所示。

4.在“插入DIV标签”对话框中单击“新建CSS样式”,弹出“新建CSS规则”对话框。如图7-25所示。单击“确定”。

5.在打开的“#pageCSS规则”对话框中,选择“方框”选项卡,设置宽为“1000像素”,高为“70像素”,“边界”的左、右均设置为“自动”。如图7-26所示。单击“确定”,当前网页就插入了“page”层。

6.定位光标到层内行尾,按回车,继续插入一个层,ID为“logo”,CSS样式如图7-27所示。

 

◆图7-24  插入一个ID为“page”的Div标签              ◆图7-25  为“page”新建CSS规则

 

◆图7-26  为“#page”定义CSS规则                ◆图7-27  为“#logo”定义CSS规则

7.定位光标到“logo”层下方,插入一个层,ID为“main”。

CSS样式为:选择“背景”选项卡,设置背景颜色为“黄色(#FFFF00)”。再设置“方框”选项卡的CSS样式,如图7-28所示。

8.定位光标到层内行尾,按回车,继续插入一个层,ID为“top”,CSS样式如图7-29所示。

 

◆图7-28  为“#main”定义CSS规则               ◆图7-29  为“#top”定义CSS规则

二.较为复杂的DIV嵌套

1.定位光标到“top”层下方,插入一个层,ID为“container”。

CSS样式为:选择“方框”选项卡,设置宽度为“992像素”,边界中的上为“4像素”,左、右均为“自动”。

2.定位光标到层内行尾,按回车,插入一个层,ID为“left”CSS样式为:背景颜色为“#CCCC00,“方框”属性值如图7-30所示。

3.定位光标到left层右侧,插入一个层,ID为“right”CSS样式为:背景颜色为“#CCCC00,“方框”属性值设置如图7-31所示。

 

◆图7-30  为“#left”定义方框属性值               ◆图7-31  为“#right”定义方框属性值

4.定位光标到left层内的文本行尾,按回车,插入一个层,ID为“navigation”CSS样式中字体大小为“12像素”,“方框”属性中宽为“242像素”,高为“210像素”。

5.定位光标到left层的下方,插入一个层,ID为“contact”CSS样式中字体大小为“12像素”,“方框”属性中宽为“242像素”,高为“180像素”。

6.将光标定位于main层的下方,插入一个层,ID为“bottom”

CSS样式设置为:选择“背景”选项卡,设置背景颜色为“黄色(#333300)”。“类型”及“方框”属性设置如图7-32和图7-33所示。

 

◆图7-32  为“#bottom”定义类型属性值         ◆图7-33  为“#bottom”定义方框属性值

7.插入DIV后效果如图7-34所示。

8.删除各层中的文本。由于文本行中常含有段落标记符<p></p>,删除时注意使用“拆分”视图来选中这些段落标记符后,如图7-35所示。再按[Del]键删除。这样就能将层中不必要的段落标记和文本清除干净,使得各层的组合紧凑、协调。

 

    ◆图7-34  插入DIV后的效果                    ◆图7-35  选中层中不必要的文本

9.参照图7-23所示,分别在logo层中插入“images/logo.jpg”文件,在top层中插入“swf/top.swf”文件。

10.在navigation层中插入一个层,ID为“nv_title”。

CSS样式为:“类型”选项卡中,设置大小为“12像素”,行高为“30像素”,粗细为“粗体”,颜色为“白色(#FFFFFF)”。“背景”选项卡中,设置背景图像为“../images/title01.jpg”。“方框”选项卡,设置宽为“242像素”,高为“30像素”。

11.在nv_title层中插入图像“../images/dot1.jpg”文件,并输入文本“栏目导航”。

12.参照图7-23所示的导航文本,在nv_title层下方输入“网站首页”等七行文本。

13.选中这七行文本,单击“文本”菜单→“列表”→“项目列表”。

14.在“标签选择器”中选中当前列表的标记<ul>,单击“CSS样式”面板中的“新建CSS规则”按钮,为这个列表新建一个CSS样式。如图7-36所示。

CSS样式为:在“类型”选项卡中,设置大小为“12像素”,行高为“2倍”,粗细为“粗体”。在“区块”选项卡中,设置文本对齐为“居中”。在“方框”选项卡中,设置填充为“全部相同(0像素)”,边界为“全部相同(0像素)”。在“列表”选项卡中设置项目符号为“../images/dot.gif”。

15.再选中列表中的列表项<li>,单击“CSS样式”面板中的“新建CSS规则”按钮,为这个列表的列表项新建一个CSS样式。如图7-37所示。该样式的属性值设置如图7-38所示。

 

  ◆图7-36  为列表<ul>新建CSS规则              ◆图7-37  为列表项<li>新建CSS规则

16.在contact层中创建一个与nv_title层相同的层,ID为“cn_title”。

17.参照图7-23,在cn_title层的下方输入联系方式文本。

18.在“CSS样式”样式面板中单击“新建CSS规则”按钮,新建一个“text”样式。如图7-39所示。

 

  ◆图7-38  为列表<li>创建CSS规则              ◆图7-39  新建一个“textCSS规则

19.设置.textCSS规则为:在“类型”选项卡中,设置行高为“16像素”。在“方框”选项卡中,设置“边界”属性的上、下均为4像素,左、右均为8像素。

20.选中“联系方式”中的七行文本,在“属性”面板中,设置样式为“text”,即可将该样式应用于这七行文本。

21.参照图7-23,在right层中输入阅读文本。本文标题的CSS样式设置为字符大小为“24像素”,行高为“40像素”。正文应用text样式。文中的两根水平线宽度为98%,高为2,同样应用text样式。

22.参照图7-23,在bottom层中,输入版权信息字符串。

23.设置网页标题为“文本阅读”。

24.按F12,保存并浏览网页。

 



 

利用DIV+CSS技术,自行规划设计如图7-40所示的网页。网页使用了DIV的多层嵌套,文本及图片的布局中使用了多种CSS样式。具体可参照练习文件夹exerciseblog子文件夹中的blog.html文件。练习素材在blog文件夹中的images子文件夹中。

◆图7-40  利用DIV+CSS技术制作网页



一.填空题

1.在网页中使用DIV,代码要放在___________________标记之间。

2DIV+CSS布局中,DIV的属性及DIV中所包含元素的属性都是通过__________进行控制的,以实现页面的协调统一布局。

3.一个DIV中的内容占100px,填充为10px,边框为5px,边界为1px,那么这个DIV的宽度为_________________________

4.常用的DIV布局方式有_________________________________________________

5.使用“一列固定宽度居中”布局方式时通过_____________选项卡中的______________属性来实现内容居中。

6.设置CSS属性清除的值为____________时可清除左右两边浮动。

7____________标签可以嵌套于<ul><ol>中,用来定义列表中的各项。

8.如果在“设计”视图中不能准确定位光标到相应的DIV中,可以在_____________视图中将光标到定位至相应的<div></div>之间。

二.选择题

1.垂直方向排列的两个块,要实现水平方向的排列,并且左对齐,需要将两者的哪个属性定义为left(    )

A)浮动          B)文本对齐         C)垂直对齐         D)其他

2.如果要取消先插入的块对后插入的块的影响,需要将后者样式表中的“清除”选项定义为(    )

A)左对齐        B)右对齐           C)两者             D)无

3.导航菜单的制作通常需要借助HTML标记中的哪些标记来实现(    )

A<ul>          B<l>              C<a>              D<p>

4.新建样式时,“选择器”项的内容为“#box #navigation”,下列说法中正确的是(    )

Anavigation块是box块的子块            Bbox块是navigation块的子块

Cbox块与navigation块是并列的两个块    D)也可以直接写成#navigation

三.简答

1.什么是DIV

2.简述DIV+CSS布局的优点。