《使用HTML和CSS开发Web网站教学资料》第八章 教案.docVIP

课程名: 使用HTML和CSS开发WEB网站 章节名: 第8章 ＣＳＳ实现典型布局 编写 作者：学习 Connect. 1.生活案例 网站常见表格布局的情况，演示几种 2.演示案例 无 3.教学备注 无 本章目标 1.What: １.理解浮动与清除浮动 ２.掌握一列式布局 ３.掌握两列式布局 ４.掌握三列式布局 ５.掌握三行三列式布局 Where Why How FAQ Check Connect 1.生活案例 无 2.演示案例 无 3.教学备注 无 预习检查 普通 5分钟 1.What: 提问回答. Where Why How FAQ Q1: 层浮动是哪个属性 ? A1: float 6.Check 7.Connect 同学们,都回答得很好,那接下来,我们就来进入今天的课程内容 1.生活案例 无 2.演示案例 无 3.教学备注 3.1只给出答案,可不做讲解. 3.2 若学员回答情况很好,可适当扩展题目,激发学员的学习兴趣和热情. 浮动与清除浮动 what: 浮动就是：元素脱离正常的文档流，让出它在文档流中本来占据的位置和空间，漂浮在文档流之上。清除浮动就是禁止元素的某一侧或两侧出现浮动元素。 属性： Float：设置元素在其父级元素中如何浮动left 、right、noneClear：设置元素的哪不允许出现浮动元素left 、right、both、none 如设置second的左边不需要其它浮动元素： 5.AQ: 6.check: 7.Connect: 生活案例 上网 演示案例 无 教学备注 无 一列式布局 what: 一列式布局是最简单的布局方式，是所有布局的基础。 2.Where: 3.Why: ４.How:. 在网页中创建一个层：div id=divLayout/div 在CSS中设置该层的宽度高度和边框 #divLayout{ border:1px solid gray; width:560px;height:300px; } 演示效果如下： 5.AQ: 6.check: 7.Connect: 1.生活案例 无 2.演示案例 在网页中创建一个层，设置该层的宽度，高度，及边框 3.教学备注 无 两列式布局 what: 两列式布局适合于左侧侧导航区右侧主内容区的页面结构 2.Where: 3.Why: ４.How: 在网页中创建两个层： div id=divNav/div div id=divContent/div 设置两个层的样式： #divNav{ border:1px solid gray; width:20%;height:320px; float:left; } #divContent{ border:1px solid gray; width:75%;height:320px; float:left; }运行效果： 5.AQ: 6.check: 7.Connect: 1.生活案例 无 2.演示案例 创建两个层，设置左悬浮，演示如下效果 3.教学备注 无 三列式布局 what: 更常见的是三列式布局，具体而言就是整个页面分为左中右3栏 2.Where: 3.Why: ４.How: 在网页中创建如下结果的层： div id=divLayout div id=divNav/div div id=divContent/div div id=divSide/div /div 设置对应的样式： #divContent{ margin-left:202px; margin-right:242px; } #divLayout{ position:absolute; width:960px; border:1px dashed green; } #divNav{ width:180px; position:absolute; left:10px;top:0px; } #divSide{ width:220px; position:absolute; right:10px;top:0px; } 运行效果如下： 5.AQ: 6.check: 7.Connect: 1.生活案例 无 2.演示案例 无 3.教学备注 无 三行三列式布局 what: 2.Where: 3.Why: ４.How: 在网页中创建如下层： div id=divLayout div id=divTopdivTop/div div id=divMain div id=divNavdivNav/div