第九讲 DIV+CSS界面排版
【教学内容】
DIV+CSS技术概念常识 DIV+CSS页面布局的分析方法 DIV+CSS页面布局的编辑方法 DIV+CSS页面布局常见错误分析。
【教学目的】
了解DIV+CSS页面布局基本概念及布局优势 理解掌握DIV+CSS页面布局基本方法 掌握DIV+CSS页面布局常见错误解决方案。
【教学重、难点】
重点：DIV+CSS页面布局编辑方法
难点：CSS对DIV的控制
【教学方式】
采取讲授、讨论和案例分析相结合的方式。
一、DIV+CSS技术应用网页效果预览
图2-9-1 DIV+CSS技术应用网页效果图
二、实例分析，认识DIV+CSS技术
1.认识DIV+CSS技术，了解学习该技术的必要性
div 是标签 css是层叠样式表。DIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，通常为了说明与HTML网页设计标记中的表格（table）定位方式的区别，因为现行企业网站设计过程中大多是采用DIV+CSS的方式来代替表格实现各种定位，将页面内容与样式分离。虽然DIV+CSS高级布局已逐渐流行，但是DIV+CSS实现起来要相对复杂一些，所以在可以预计的将来，表格的地位依然十分重要，但是DIV代表的是网页设计的发展方向发展的方向。它们一个简单，一个先进，至于网页设计中选择哪种布局模式，就看设计者个人的偏好和设计要求了。
DIV+CSS网页布局的意义体现在如下方面：
由于将大部分页面代码写在了CSS当中，使得页面体积容量变得更小,使得页面载入得更快、降低流量费用；跟据区域内容标记，到CSS里找到相应的ID，使得修改页面的时候更加方便，也不会破坏页面其他部分的布局样式；由于将大部分的HTML代码和内容样式写入了CSS文件中，这就使得网页中正文部分更为突出明显，便于被搜索引擎采集收录；由于CSS富含丰富的样式，使页面更加灵活性，它可以根据不同的浏览器，而达到显示效果的统一和不变形的目的。
2.实例分析网页设计DIV结构
通过上图不难看出，整个网页的布局是有规律可寻得，它大致可以分为顶部区域，中上部区域、中下部区域和底部区域。而中上部区域和中下部区域又可以分成若干小的区块，分析后效果图如下：
图2-9-2 区块划分分析图
根据上图，我们得出实际页面布局图如下：
图2-9-3 页面布局层叠结构图
到此为止DIV层结构分析完毕，接下来我们开始写HITM标记和层叠样式表
三、实例制作步骤：
1.启动DreamWeaver，新建站点为“zzrsb”，路径为E:/websit，新建一个网页文件，命名为“zzrsb.html”，并保存在站点文件夹下。
2.在<body>标记中写出DIV结构，代码如下：
<div id="content">
<div id="head">顶部区域</div>
<div id="webbody1">主题1区
<div id="webbody1Left">主题1区左</div>
<div id="webbody1Right">主题1区右</div>
</div>
<div id="webbody2">主题2区
<div id="webbody2Left">主题2区左
<div id="webbody2LeftTop">主题2区左顶部</div>
<div id="webbody2LeftFoot">主题2区左底部
<div id="webbody2LeftFootLeft">主题2区左底部左边</div>
<div id="webbody2LeftFootRight">主题2区左底部右边</div>
</div>
</div>
<div id="webbody2Right">主题2区右
<div id="webbody2RightTop">主题2区顶部</div>
<div id="webbody2RightFoot">主题2区底部</div>
</div>
</div>
<div id="foot">底部区域</div>
</div>
3.新建一个CSS文档，命名为“style.css”,并保存在站点文件夹下。
/*基本信息*/
body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}
/*页面层容器*/
#content {width:100%}
/*页面头部*/
#head {width:1000px;margin:0 auto;height:100px;background:#900000}
/*页面主体1*/
#webbody1 {width:1000px;margin:0 auto;height:200px;background:#FEFEFE}
/*页面主体1*/
#webbody2 {width:1000px;margin:0 auto;height:200px;background:#FCFCFC}
/*页面底部*/
#foot {width:1000px;margin:0 auto;height:50px;background:#900000}
/*主题1区左*/
#webbody1Left {
width:746px; /*设定宽度*/
text-align:left; /*文字左对齐*/
float:left; /*浮动居左*/
clear:left; /*不允许左侧存在浮动*/
overflow:hidden; /*超出宽度部分隐藏*/
}
/*主题1区右*/
#webbody1Right {
width:254px;text-align:left;
float:right; /*浮动居右*/
clear:right; /*不允许右侧存在浮动*/
overflow:hidden
}
/*主题2区左*/
#webbody2Left {
……
}
/*主题2区右*/
#webbody2Right {
……
}
/*主题2区左底部左边*/
#webbody2LeftFootLeft {
width:373px; /*设定宽度*/
……
}
/*主题2区左底部右边*/
#webbody2LeftFootRight {
width:373px;text-align:left;
……
}
4.“zzrsb.html”链接“style.CSS”文件，链接方法同第八讲中内容，到此为止，网页框架制作完毕。效果图如下：
图2-9-4 CSS控制DIV后布局图
网页内部内容的添加和前面文字、多媒体元素、链接等内容添加相同，这里不再累述。
四、DIV+CSS页面布局常见错误分析
1. 检查HTML元素是否有拼写错误、是否忘记结束标记
即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。
2. 检查CSS是否正确
检查一下有无拼写错误、是否忘记结尾的 “}” 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具，但也能检查出拼写错误。
3. 确定错误发生的位置
如果错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。
4. 利用border属性确定出错元素的布局特性
使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界，错误原因即水落石出。
5. float元素的父元素不能指定clear属性
MacIE下如果对float的元素的父元素使用clear属性，周围的float元素布局就会混乱。这是MacIE的著名的bug，倘若不知道就会走弯路。
6. float元素务必指定width属性
很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何，一定要为其指定width属性。
另外指定元素时尽量使用em而不是px做单位。
7. float元素不能指定margin和padding等属性
IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性(可以在float元素内部嵌套一个div来设置margin和padding)。也可以使用hack方法为IE指定特别的值。
8. float元素的宽度之和要小于100%
如果float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。
9. 是否重设了默认的样式?
某些属性如margin、padding等，不同浏览器会有不同的解释。因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等。
10. 是否忘记了写DTD?
如果无论怎样调整不同浏览器显示结果还是不一样，那么可以检查一下页面开头是不是忘了写下面这行DTD：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">[1]
【课后小结】
DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。本讲重点是以一个网页布局实例讲解了通过样式表文件格式化DIV区块的方法。
【练习题】
模仿练习题：
根据本讲所讲内容，用DIV+CSS的方法完成组织人事部网页布局。
