第9讲DIV+CSS界面排版
[教学内容] [教学目的] [教学重难点] [教学方法]
采取讲座、讨论和案例分析相结合的形式。
1. DIV+CSS技术应用网页效果预览
图2-9-1 DIV+CSS技术应用网页效果图
2.实例分析，了解DIV+CSS技术
1.熟悉DIV+CSS技术，了解学习该技术的必要性
div 是标签 css 是层叠样式表。 DIV+CSS是网站标准（或“WEB标准”）中常用的术语之一。 通常用来解释与HTML网页设计标签中表格（table）定位方式的区别，因为目前企业网站设计流程大多使用DIV。 采用+CSS的形式来代替表格实现各种定位，并将页面内容与样式分离。 虽然DIV+CSS的中间布局已经逐渐流行，但DIV+CSS的实现相对复杂，所以在可预见的未来，表格的地位仍然非常重要，但DIV代表了网页设计的发展方向。 一种是简单的，一种是高级的。 至于网页设计中选择哪种布局模式，取决于设计者的个人喜好和设计要求。
DIV+CSS网页布局的意义体现在以下几个方面：
由于大部分页面代码都是用CSS编写，因此页面体积显得更小，使得页面加载速度更快，降低流量成本； 根据区域内容标记css界面，在CSS中找到对应的ID，这样在更改页面时更加方便，并且不会破坏页面其他部分的布局风格； 由于大部分HTML代码和内容样式都写入CSS文件中，这使得网页的文本部分更加突出，易于被搜索引擎收集和收集； 由于CSS包含丰富的样式，使得页面更加灵活，可以根据不同的浏览器达到效果统一、不变显示的目的。
2、网页设计DIV结构实例分析
从上图不难看出，整个网页的布局是有规律的，可以发现。 大致可分为底部区域、中下区域、中上区域和顶部区域。 中下区和中上区又可以分为几个小区块。 经过分析，效果图如下：
图2-9-2 块定义分析图
根据上图，我们得到实际的页面布局如下：
图2-9-3 页面布局层叠结构图
至此，DIV层结构分析完毕，接下来我们开始编写HITM标签和级联样式表
3、制作步骤示例：
1、启动DreamWeaver，新建一个站点名为“zzrsb”，路径为E:/websit，新建一个网页文件，命名为“zzrsb.html”，保存在site文件夹下。
2.在标记中写出DIV结构，代码如下：
顶部区域
学科领域 1
主题区域 1 左
主题区域 1 右
主题区2
主题区域 2 左
主题 2 区域左下角
主题 2 区域左上角
主题 2 区域左上方
主题 2 区域左上方
主题 2 区域右侧
主题 2 区域底部
主题 2 区顶部
底部面积
3. 新建一个CSS文档，命名为“style.css”，并将其保存在site文件夹下。
/*基本信息*/
正文{字体：12px Tahoma；边距：0px；文本对齐：中心；背景：#FFF；}
/*页面层容器*/
#内容{宽度：100%}
/*页肚*/
#head {宽度：1000px;边距：0自动;高度：100px;背景：#900000}
/*页体1*/
#webbody1 {宽度：1000px;边距：0自动;高度：200px;背景：#FEFEFE}
/*页体1*/
#webbody2 {宽度：1000px;边距：0自动;高度：200px;背景：#FCFCFC}
/*页面顶部*/
#foot {宽度：1000px;边距：0自动;高度：50px;背景：#900000}
/*主题区剩余1*/
#webbody1Left {
宽度：746px； /*设置间距*/
文本对齐：左对齐； /*文本左对齐*/
向左飘浮; /*向左飘浮*/
清除：左； /*不允许两边浮动*/
溢出：隐藏； /*隐藏超出长度的部分*/
/*主题1区域右侧*/
#webbody1右{
宽度：254px；文本对齐：左；
浮动：右； /*向右浮动*/
明确：正确； /*不允许两边浮动*/
溢出：隐藏
/*主题区剩余2*/
#webbody2Left {
...
/*主题2区域右侧*/
#webbody2Right {
...
/*主题2区域左上左*/
#webbody2LeftFootLeft {
宽度：373px； /*设置间距*/
...
/*主题区域2左上左*/
#webbody2LeftFootRight {
宽度：373px；文本对齐：左；
...
4、“zzrsb.html”链接到“style.CSS”文件，链接方法与第八讲内容相同。 至此，网页框架就制作完成了。 效果图如下：
图2-9-4 CSS控制DIV后的布局
网页内部内容的添加与添加文字、多媒体元素、链接等相同css界面，此处不再赘述。
4、DIV+CSS页面布局常见错误分析
1. 检查 HTML 元素是否有拼写错误和忘记结束标签
即使是老手也经常对div的嵌套关系犯错误。 您可以使用dreamweaver的验证功能来检测是否有错误。
2.检查CSS是否正确
检查拼写错误、忘记结尾的“}”等。您可以使用 CleanCSS 来检测 CSS 中的拼写错误。 CleanCSS是一个CSS减重工具，但它也可以检测拼写错误。
3.确定错误发生在哪里
如果错误影响了整体布局，可以将各个div块逐个删除，直到删除某个div块后显示恢复正常，即可确定错误的位置。
4、使用border属性来确定error元素的布局特性
使用float属性布局一不小心就会出错。 这时候给元素添加border属性来确定元素边界，错误原因就会显露出来。
5.float元素的父元素不能指定clear属性
在MacIE下，如果在float元素的父元素上使用clear属性，周围的float元素的布局将会混乱。 这是MacIE的一个众所周知的bug，如果你不知道的话就会走弯路。
6.float元素不必指定width属性
许多浏览器在显示未指定宽度的浮动元素时都会出现错误。 所以无论float元素的内容是什么，都必须为其指定width属性。
另外，指定元素时尽量使用em而不是px。
7.float元素不能指定margin、padding等属性
IE 在显示具有指定边距和填充的浮动元素时存在错误。 因此，不要在 float 元素上指定 margin 和 padding 属性（可以在 float 元素内嵌套一个 div 来设置 margin 和 padding）。 您还可以使用 hack 方法为 IE 指定一个非凡的值。
8、float元素长度之和必须大于100%
如果浮动元素的长度之和正好是100%，一些古老的浏览器将无法正确显示。 因此，请确保长度之和大于99%。
9. 默认样式是否被重置？
某些属性，例如边距、填充等，在不同的浏览器中会有不同的解释。 因此，开发前最好将整体的margin和padding设置为0，列表样式设置为none。
10. 你忘记写DTD了吗？
如果不同浏览器的显示结果还是不一样，可以检查一下是否忘记在页面开头写下面这行DTD：[1]
【课后总结】
DIV 元素是用于为 HTML 文档中的块级内容提供结构和背景的元素。 DIV的开始标签和结束标签之间的所有内容都用来构成块，其中包含的元素的特性由DIV标签的属性控制，或者通过使用样式表来降低块。 本讲的重点是通过网页布局的例子来讲解如何通过样式表文件降低DIV块的方法。
【练习题】
模仿练习：
根据本讲内容，使用DIV+CSS完成组织人事部门的网页布局。
