Download presentation
Presentation is loading. Please wait.
1
网页设计与制作 Dreamweaver CS6 标准教程
第8章 CSS+Div布局 网页设计与制作 Dreamweaver CS6 标准教程
2
本章学习的主要内容： 1. 盒子模型 2. 布局技术 3. “上中下”布局 4. “左中右”布局
3
8.1盒子模型 盒子模型是CSS样式布局的重要概念。
网页中元素都占据一定的空间，除了元素内 容之外还包括元素周围的空间，一般地把元 素和它周围空间所形成的矩形区域称为盒子 （box）。 从布局的角度看，网页是由很多盒子组成， 根据需要将诸多盒子在网页中进行排列和分 布，就形成了网页布局。
4
8.1盒子模型 8.1.1盒子结构 8.1.2盒子属性
5
8.1.1盒子结构 盒子模型通过定义模型结构，描述网页元 素的显示方式和元素之间的相互关系，确 定网页元素在网页布局中的空间和位置。
6
8.1.1盒子结构 盒子模型的结构 由四个部分组成： content（内 容）、padding （内边距或填 充）、border （边框）和 margin（外边 距），如图8-1 所示。
7
8.1.2盒子属性 在CSS样式中， 将盒子模型的 内边距、边框 和外边距，按 top、bottom、 left、right的 四个方向，分 别进行定义和 设置，描述盒 子属性。
8
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; }
9
8.1.2盒子属性
10
8.2布局技术 在CSS+Div布局中，<div>标签是盒子模型的 主要载体，具有分割网页的功能。
CSS样式中的position属性和float属性决定这 些<div>标签的相互关系和分布排列的位置。
11
8.2布局技术 8.2.1 <div>标签 8.2.2 position定位属性 8.2.3 浮动方式
12
8.2.1 <div>标签 <div>一个块状容器类标签，即在<div>和 </div>之间可以容纳各种HTML元素，同时也构成 一个独立的矩形区域。 无论在页面中使用多少个标签，<div>标签之间仅 存在并列关系和内嵌关系。
13
8.2.1 <div>标签
14
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>
15
8.2.2 position定位属性 position（定位）属性包括了四种属性值：static， relative，absolute和fixed. Static静态定位为默认值，网页元素遵循HTML的标 准定位规则，即网页各种元素按照“前后相继”的 顺序进行排列和分布。 Relative相对定位，网页元素也遵循HTML的标准定 位规则，但需要为网页元素相对于原始的标准位置 设置一定的偏移距离。 CSS+Div的布局方式采用了标准定位规则的布局方 式，这也是系统的默认方式。
16
8.2.2 position定位属性 Absolute绝对定位方式，网页元素不再遵循 HTML的标准定位规则，脱离了“前后相继” 的定位关系，以该元素的上级元素为基准设置 偏移量进行定位。 Fixed固定定位与绝对定位类似，也脱离了“前 后相继”的定位规则，但元素的定位是以浏览 器窗口为基准进行。 apDiv也称AP元素采用了绝对定位方式。
17
8.2.3 浮动方式 Float属性包含三个属性值：Left控制网页元素 向左浮动，Right控制网页元素向浮右动， None没有浮动。
Clear属性包括三个属性值：left清除向左浮动， right清除向浮右动，none没有清除。 Clear属性与Float属性配合使用，清除各种浮 动。
18
8.2.3 浮动方式 无浮动
19
8.2.3 浮动方式 #box1 { height: 100px; width: 150px;
background-color: #F90; } #box2 { width: 200px; background-color: #C30; #box3 { width: 250px; background-color: #3FF;
20
8.2.3 浮动方式 左右浮动
21
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;
22
8.2.3 浮动方式 全部左浮动
23
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;
24
8.2.3 浮动方式 使用左清除
25
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;
26
8.3“上中下”布局 在“上中下”布局中，<div>标签按照前后 相继的顺序排列，分割网页空间，不需要使 <div>标签浮动，其大小和外观由CSS样式 控制。
27
8.3“上中下”布局 8.3.1课堂案例-网页设计大赛 8.3.2 在Dreamweaver中插入<div>标签
28
8.3.1课堂案例-网页设计大赛 案例学习目标：学习“上中下”布局的方法。
案例知识要点：在【插入】面板【布局】选项卡 中，使用【插入Div标签】按钮创建网页布局结构； 在【CSS样式】面板中，使用【新建CSS规则】按 钮创建<div>标签的ID样式，并采用缺省的 【position】和【float】属性，完成“上中下” 的布局。 素材所在位置：光盘/案例素材/ch08/课堂案例- 网页设计大赛。 案例布局要求如图8-9所示，案例效果如图8-10 所示。
31
8.3.2 在Dreamweaver中插入<div>标签
【ID】：可以在下拉框中直接输入或选择一个名 称，为<div>标签设置网页中的唯一标识。 【类】：可以在下拉框中直接输入或选择一个名 称，为<div>标签设置一个类样式，设置网页布 局和外观。 【新建CSS规则】：为<div>标签新建一个ID样 式或类样式。 【插入】：其各种选项决定了<div>标签之间是 并列关系还是嵌入关系，其选项包括：
32
8.3.2 在Dreamweaver中插入<div>标签
“在插入点”表示在插入点插入一个<div>标签， 嵌入已经存在的<div>标签中，如果插入点前有 内容，那么换行插入。 “在选定内容旁换行”表示在该文字所在行插入 一个<div>标签，嵌入已经存在的<div>标签中， 保留原内容。 “在标签之前”表示插入一个<div>标签，与指 定的<div>标签形成并列关系。 “在标签之后”表示插入一个<div>标签，与指 定的<div>标签形成并列关系。
33
8.3.2 在Dreamweaver中插入<div>标签
“在开始标签之前”表示在</body>标签之 前，插入一个<div>标签。 “在开始标签之后”表示在<body>标签之后， 插入一个<div>标签。
34
8.4“左中右”布局 在“左中右”布局中，首先插入若干个<div>标 签，并按照前后相继顺序排列；然后，设置CSS 样式的【float】和【clear】属性，使<div>标签 浮动，实现“左中右”的布局；最后，设置CSS 样式其他属性控制<div>标签的外观。
35
8.4“左中右”布局 8.4.1课堂案例-连锁餐厅 8.4.2使用CSS样式布局
36
8.4.1课堂案例-连锁餐厅 案例学习目标：学习“左中右”布局的方法。
案例知识要点：在【插入】面板【布局】选项卡 中，使用【插入Div标签】按钮，插入<div>标签； 在【插入Div标签】对话框中，使用【新建CSS规 则】按钮，创建<div>标签的ID样式，设置 【position】、【float】和【clear】属性，完成 “左中右”的网页布局。 素材所在位置：光盘/案例素材/ch08/课堂案例- 连锁餐厅。 案例布局要求如图8-38所示，案例效果如图8- 39所示。
39
8.4.2使用CSS样式布局 1. 在Dreamweaver中<div>标签的浮动设置 2. 常用布局形式
在CSS+Div布局中，将网页版面分割成左侧，中 部和右侧三个部分的形式. 将网页分割成左右两个部分.
40
8.4.2使用CSS样式布局
41
8.4.2使用CSS样式布局
42
8.4.2使用CSS样式布局
43
8.5练习案例 8.5.1练习案例-电子产品 8.5.2练习案例-装修公司
44
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。
45
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所 示。
48
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>标签取消左浮动。
49
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。
50
8.5.2练习案例-装修公司 6．设置#info1样式的左右内边距分别为85px； #info2样式的左右内边距为10px；#info3样式的左右 内边距分别为10px，上部内边距为10px；.f1样式的 上部和左侧外边距分别为20px和60px；.f2样式的上 部和左侧外边距分别为30px和60px，字体为黑体， 大小为20px，颜色为#66250F。 素材所在位置：光盘/案例素材/ch08/练习案例-装修 公司。 案例布局要求如图8-69所示，案例效果如图8-70所示。
Similar presentations
