网页设计与制作 Dreamweaver CS6 标准教程 第8章 CSS+Div布局 网页设计与制作 Dreamweaver CS6 标准教程
本章学习的主要内容： 1. 盒子模型 2. 布局技术 3. “上中下”布局 4. “左中右”布局
8.1盒子模型 盒子模型是CSS样式布局的重要概念。 网页中元素都占据一定的空间，除了元素内 容之外还包括元素周围的空间，一般地把元 素和它周围空间所形成的矩形区域称为盒子 （box）。 从布局的角度看，网页是由很多盒子组成， 根据需要将诸多盒子在网页中进行排列和分 布，就形成了网页布局。
8.1盒子模型 8.1.1盒子结构 8.1.2盒子属性
8.1.1盒子结构 盒子模型通过定义模型结构，描述网页元 素的显示方式和元素之间的相互关系，确 定网页元素在网页布局中的空间和位置。
8.1.1盒子结构 盒子模型的结构 由四个部分组成： content（内 容）、padding （内边距或填 充）、border （边框）和 margin（外边 距），如图8-1 所示。
8.1.2盒子属性 在CSS样式中， 将盒子模型的 内边距、边框 和外边距，按 top、bottom、 left、right的 四个方向，分 别进行定义和 设置，描述盒 子属性。
8.1.2盒子属性 例如，在网页中创建一个apDiv，ID标识为 apDiv1，并在其中插入一个图像，代码如下： #apDiv1 { position:absolute; left:638px; top:76px; width:300px; height:181px; padding-top: 15px; padding-right: 18px; padding-bottom: 15px; padding-left: 18px; border: 30px solid #333; }
8.1.2盒子属性
8.2布局技术 在CSS+Div布局中，<div>标签是盒子模型的 主要载体，具有分割网页的功能。 CSS样式中的position属性和float属性决定这 些<div>标签的相互关系和分布排列的位置。
8.2布局技术 8.2.1 <div>标签 8.2.2 position定位属性 8.2.3 浮动方式
8.2.1 <div>标签 <div>一个块状容器类标签，即在<div>和 </div>之间可以容纳各种HTML元素，同时也构成 一个独立的矩形区域。 无论在页面中使用多少个标签，<div>标签之间仅 存在并列关系和内嵌关系。
8.2.1 <div>标签
8.2.1 <div>标签 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content= "text/html; charset=utf-8" /> <title>使用div</title> <style type="text/css"> #box1 { height: 80px; width: 200px; background-color: #C93; margin: 10px; padding: 10px; } #box2 { height: 60px; width: 100px; background-color: #F63; #box3 { height: 100px; width: 300px; background-color: #6CF; </style> </head> <body> <div id="box1">box1 <div id="box2">box2</div> </div> <div id="box3">box3</div> </body> </html>
8.2.2 position定位属性 position（定位）属性包括了四种属性值：static， relative，absolute和fixed. Static静态定位为默认值，网页元素遵循HTML的标 准定位规则，即网页各种元素按照“前后相继”的 顺序进行排列和分布。 Relative相对定位，网页元素也遵循HTML的标准定 位规则，但需要为网页元素相对于原始的标准位置 设置一定的偏移距离。 CSS+Div的布局方式采用了标准定位规则的布局方 式，这也是系统的默认方式。
8.2.2 position定位属性 Absolute绝对定位方式，网页元素不再遵循 HTML的标准定位规则，脱离了“前后相继” 的定位关系，以该元素的上级元素为基准设置 偏移量进行定位。 Fixed固定定位与绝对定位类似，也脱离了“前 后相继”的定位规则，但元素的定位是以浏览 器窗口为基准进行。 apDiv也称AP元素采用了绝对定位方式。
8.2.3 浮动方式 Float属性包含三个属性值：Left控制网页元素 向左浮动，Right控制网页元素向浮右动， None没有浮动。 Clear属性包括三个属性值：left清除向左浮动， right清除向浮右动，none没有清除。 Clear属性与Float属性配合使用，清除各种浮 动。
8.2.3 浮动方式 无浮动
8.2.3 浮动方式 #box1 { height: 100px; width: 150px; background-color: #F90; } #box2 { width: 200px; background-color: #C30; #box3 { width: 250px; background-color: #3FF;
8.2.3 浮动方式 左右浮动
8.2.3 浮动方式 #box1 { height: 100px; width: 150px; background-color: #F90; float: left; } #box2 { width: 200px; background-color: #C30; #box3 { width: 250px; background-color: #3FF; float: right;
8.2.3 浮动方式 全部左浮动
8.2.3 浮动方式 #box1 { height: 100px; width: 150px; background-color: #F90; float: left; } #box2 { width: 200px; background-color: #C30; #box3 { width: 250px; background-color: #3FF;
8.2.3 浮动方式 使用左清除
8.2.3 浮动方式 #box1 { height: 100px; width: 150px; background-color: #F90; float: left; } #box2 { width: 200px; background-color: #C30; #box3 { width: 250px; background-color: #3FF; clear: left;
8.3“上中下”布局 在“上中下”布局中，<div>标签按照前后 相继的顺序排列，分割网页空间，不需要使 <div>标签浮动，其大小和外观由CSS样式 控制。
8.3“上中下”布局 8.3.1课堂案例-网页设计大赛 8.3.2 在Dreamweaver中插入<div>标签
8.3.1课堂案例-网页设计大赛 案例学习目标：学习“上中下”布局的方法。 案例知识要点：在【插入】面板【布局】选项卡 中，使用【插入Div标签】按钮创建网页布局结构； 在【CSS样式】面板中，使用【新建CSS规则】按 钮创建<div>标签的ID样式，并采用缺省的 【position】和【float】属性，完成“上中下” 的布局。 素材所在位置：光盘/案例素材/ch08/课堂案例- 网页设计大赛。 案例布局要求如图8-9所示，案例效果如图8-10 所示。
8.3.2 在Dreamweaver中插入<div>标签 【ID】：可以在下拉框中直接输入或选择一个名 称，为<div>标签设置网页中的唯一标识。 【类】：可以在下拉框中直接输入或选择一个名 称，为<div>标签设置一个类样式，设置网页布 局和外观。 【新建CSS规则】：为<div>标签新建一个ID样 式或类样式。 【插入】：其各种选项决定了<div>标签之间是 并列关系还是嵌入关系，其选项包括：
8.3.2 在Dreamweaver中插入<div>标签 “在插入点”表示在插入点插入一个<div>标签， 嵌入已经存在的<div>标签中，如果插入点前有 内容，那么换行插入。 “在选定内容旁换行”表示在该文字所在行插入 一个<div>标签，嵌入已经存在的<div>标签中， 保留原内容。 “在标签之前”表示插入一个<div>标签，与指 定的<div>标签形成并列关系。 “在标签之后”表示插入一个<div>标签，与指 定的<div>标签形成并列关系。
8.3.2 在Dreamweaver中插入<div>标签 “在开始标签之前”表示在</body>标签之 前，插入一个<div>标签。 “在开始标签之后”表示在<body>标签之后， 插入一个<div>标签。
8.4“左中右”布局 在“左中右”布局中，首先插入若干个<div>标 签，并按照前后相继顺序排列；然后，设置CSS 样式的【float】和【clear】属性，使<div>标签 浮动，实现“左中右”的布局；最后，设置CSS 样式其他属性控制<div>标签的外观。
8.4“左中右”布局 8.4.1课堂案例-连锁餐厅 8.4.2使用CSS样式布局
8.4.1课堂案例-连锁餐厅 案例学习目标：学习“左中右”布局的方法。 案例知识要点：在【插入】面板【布局】选项卡 中，使用【插入Div标签】按钮，插入<div>标签； 在【插入Div标签】对话框中，使用【新建CSS规 则】按钮，创建<div>标签的ID样式，设置 【position】、【float】和【clear】属性，完成 “左中右”的网页布局。 素材所在位置：光盘/案例素材/ch08/课堂案例- 连锁餐厅。 案例布局要求如图8-38所示，案例效果如图8- 39所示。
8.4.2使用CSS样式布局 1. 在Dreamweaver中<div>标签的浮动设置 2. 常用布局形式 在CSS+Div布局中，将网页版面分割成左侧，中 部和右侧三个部分的形式. 将网页分割成左右两个部分.
8.4.2使用CSS样式布局
8.4.2使用CSS样式布局
8.4.2使用CSS样式布局
8.5练习案例 8.5.1练习案例-电子产品 8.5.2练习案例-装修公司
8.5.1练习案例-电子产品 案例练习目标：练习“上中下”布局的方法。 案例操作要点： 1．创建文件名称为index.html的新文档，并将所有样式 存放在product样式文档中。插入ID名称为container的 <div>标签，宽度为1000px，并居中对齐。 2．在container的<div>标签中，插入ID名称为header， menu，banner，info和footer的5个<div>标签，宽度 均为1000px，高度分别为38px，34px，468px， 165px和64px。 3．在menu的<div>标签中，插入名称为navi的<div> 标签，宽度450px，高度34px，左外边距550px。
8.5.1练习案例-电子产品 4．利用#menu样式为menu的<div>标签添加图像 背景。在#navi标签中，输入文字“公司介绍 产品展 示 客户服务 人员招募 互动社区”，并设置#navi样 式，字体大小为16px，行高度为30px，颜色为#FFF。 5．设置#navi a:link，#navi a:visited样式属性，颜 色为#FFF，文字装饰为无，设置#navi a:hover样式 属性，文字装饰为下划线，完成导航条的制作。 6．在ID名称为info的<div>标签中，插入1*3表格， 宽度为100%，将三个图像分别插入到单元格中，设 置#info样式背景为黑色。 素材所在位置：光盘/案例素材/ch08/练习案例-电 子产品。 案例布局要求如图8-67所示，案例效果如图8-68所 示。
8.5.2练习案例-装修公司 案例练习目标：练习“左中右”布局的方法。 案例操作要点： 1．创建文件名称为index.html的新文档，并将所有样 式存放在decoration演示文档中。插入ID名称为 container的<div>标签，宽度为1000px，并居中对齐。 2．在container的<div>标签中，插入ID名称为menu， info1，info2，info3和footer的5个<div>标签，宽度 和高度分别为1000px和107px，330px和670px， 340px和670px，330px和670px，1000px和83px。 其中ID名称为info1，info2，info3的<div>标签为左 浮动，ID名称为footer的<div>标签取消左浮动。
8.5.2练习案例-装修公司 3．在footer标签中，插入两个<div>标签，其类样式 名称为.f1和.f2，其宽度分别为580px和280px，并设 置它们为左浮动。 4．设置页面属性的背景为#CCC，边距为为0，字体 大小为12px，文字颜色为#999。设置#container样 式的背景为白色。 5．标题样式.text1，文本大小为30px，颜色为 #451B08，居中；副标题样式.text2，文本大小为 18px；职位标题文本样式.text3，文本大小14px，下 部内边距5px，下部边框为实线，宽度为1px，颜色为 #999。
8.5.2练习案例-装修公司 6．设置#info1样式的左右内边距分别为85px； #info2样式的左右内边距为10px；#info3样式的左右 内边距分别为10px，上部内边距为10px；.f1样式的 上部和左侧外边距分别为20px和60px；.f2样式的上 部和左侧外边距分别为30px和60px，字体为黑体， 大小为20px，颜色为#66250F。 素材所在位置：光盘/案例素材/ch08/练习案例-装修 公司。 案例布局要求如图8-69所示，案例效果如图8-70所示。