第七单元 制作“专业教程”网页
任务二  使用Div进行页面布局
一、提出任务
1．任务目标
根据任务一画出的页面布局结构图，实现“专业教程”页面布局。
2．解决的问题
本任务通过完成任务一中设计好的页面布局，学习添加Div标签、设置Div样式以及用Div进行页面布局的方法。
3．本任务所涉及原有知识要点
完成本任务所涉及原有知识要点有：AP元素、CSS规则。
二、教学目标
1. 知识目标
⑴ 十天学会divcss教程在线教程掌握添加Div标签。
⑵ 掌握设置Div样式。
⑶ 掌握盒子模型。
⑷ 掌握使用Div进行页面布局的方法。
2. 能力目标
能够熟练地根据页面布局结构图，使用Div+CSS技术进行页面布局。
3. 情感目标
正确看待自己在团队中的作用，提高团队协作能力。
三、教学分析与准备
1. 教学重点
⑴ 掌握设置Div样式。
⑵ 掌握使用Div进行页面布局的方法。
2．教学难点
设置Div样式。
3. 教学方法
提出任务并带领学生进行分析，通过分析形成解决问题的思路，通过提醒化解解决问题过程中遇到的问题，通过举一反三拓展对知识点的认识与理解。
4. 课时安排
2课时。
5. 教学环境
多媒体网络教室。
四、教学过程（组织课堂、复习知识、教师引领完成任务占1学时；举一反三占1学时。）
教学环节及手段
教学内容
备注
组织课堂
复习知识
任务流程
导入任务
分析任务
完成任务
知识总结
举一反三
任务目标
启发思路
分组完成任务
学生自评或互评
教师点评总结
布置作业
集中学生注意力，准备上课。
通过提问学生，复习根据页面效果图分析页面布局。
1．展示一张页面效果图，分析页面布局。
页面规划好以后，就可以使用Div+CSS来进行页面布局了。Div+CSS具有布局灵活、效果丰富、页面加载速度快、便于修改等优点，所以很多网站都采用这种布局方式。
提出任务：根据页面布局结构图，使用Div+CSS实现“专业教程”页面布局。
根据页面层结构设计图，在页面中添加一级父层container，设置层样式，在container层内添加二级父层header，设置层样式，在header层内添加子层headerleft和headerright，设置层样式；在header层下添加main层，设置层样式，依次类推，最后完成页面布局。
1．建立本栏目目录结构
“专业教程”栏目建立在“knowlage”文件夹中。在“knowlage”文件夹中，新建一个网页文件“professionalcourse.html”，然后将本单元素材文件夹中的“images”文件夹复制到“D:\mysite\knowlage”文件夹中。
2．添加Div标签header
运行Dreamweaver CS5，打开“professionalcourse.html”文件，修改网页标题为“专业教程”。在页面属性中将“外观（HTML）”中上边距和左边距设置为0。插入Div标签container。设置CSS规则：宽为778像素，高为500像素 ，边界上、下为0像素，左、右为自动。
在ID为container的Div中，插入一个新的Div标签header。设置CSS规则：“方框”宽770像素，高33像素 ，边界上为5像素、左右为自动。
在ID为header的Div中，插入一个新的Div标签headerleft。设置CSS规则：宽为140像素，高为33像素，浮动为左对齐。
在ID为header的Div中，插入一个新的Div标签headerright。设置CSS规则：方框属性宽为200像素，高33像素，浮动为右对齐；区块属性中的文本对齐为右对齐。
3．添加ID为“main”的Div标签
在ID为header的Div下，插入一个新的Div标签main。设置CSS规则：宽770像素，高403像素 ，边界的上为3像素、下为0像素，左、右各为4像素，浮动为“左对齐”。
在ID为main的Div中，插入一个新的Div标签mainleft。设置CSS规则：宽274像素，高400像素，浮动为“左对齐”，边界全部为0像素，在边框属性中“边框”设置为实线、宽度为1像素、颜为#d4d0c8。
在ID为mainleft的Div后，插入一个新的Div标签maincenter。设置CSS规则：宽274像素，高400像素，浮动为“左对齐”，边界属性的左、右各为3像素，上、下各为0像素，边框属性中样式为实线、宽度为1像素、颜为#d4d0c8。
在ID为maincenter的Div后，插入一个新的Div标签mainright。设置CSS规则：宽为210像素，高为400像素，浮动为左对齐，边界属性全部为0像素，边框属性中的样式为实线、宽度为1像素、颜为#d4d0c8。
在ID为“mainleft”的Div中，插入ID为“maintop”的Div标签。设置CSS规则：宽为274像素，高为200像素，边界全部为0像素。
在ID为“maintop”的Div后，插入ID为“maindown”的Div标签，设置CSS规则：宽为274像素，高为199像素，边界全部为0像素；边框属性中将样式中的上设置为实线，宽度为1像素，颜为#d4d0c8。
在ID为“maincenter”的Div中插入ID同样为“maintop”、“maindown”的Div标签，不再新建CSS规则。
4．添加ID为“footer”的Div标签
在ID为“main”的Div标签之后插入ID为“footer” 的Div标签。设置CSS规则：宽为768像素，高为100像素，边界上为3像素、下为0像素，左、右为4像素、浮动为“左对齐”，边框属性中的样式设置为实线、宽度为1像素、颜为#d4d0c8。
5．知识讲解：
⑴ 插入Div标签的位置，有以下几种选择：
a.“在插入点”：表示在光标所在位置插入Div标签。
b.“在标签之前”：表示在后面选项组中选中标签的前面插入Div标签。
c.“在开始标签之后”：表示在后面选项组中选中标签的开始标签<Div>后面插入Div标签 。
d.“在结束标签之前”：表示在后面选项组中选中标签的结束标签</Div>前面插入Div标签。
e.“在标签之后”：表示在后面选项组中选中标签的后面插入Div标签。
“类”：选择设置修饰Div标签的CSS规则。
“ID”:为Div标签命名。
“新建CSS规则”：打开“新建CSS规则”对话框为Div标签新建CSS规则。
⑵ 盒子模型
盒子组成：一个盒子由内容（Content）、边框（Border）、填充（Padding）和边界（Margin）这四部分组成。
盒子模型标准：盒子模型有标准 w3c 盒子和IE盒子两种。标准 w3c 盒子模型的宽度和高度只包括内容，不包括边框、填充和边界。而IE盒子模型的宽度和高度包括内容、填充和边框的宽度和高度。所以IE盒子模型的实际宽度或高度是内容、边框、填充和边界的宽度总和或高度总和。
边界叠加
第一个元素的底边界与第二个元素的顶边界相遇时会发生边界叠加，它们将形成一个边界，这个边界的高度等于两个发生叠加的边界中高度较大者，
通过完成本任务学习了添加Div标签、设置Div样式，盒子模型以及用Div进行页面布局的方法。
创建网页practice7-2.html，，实现如下图所示的页面布局，层宽度、高度、边框样式自己设置。要求：使用Div+CSS布局页面，为每个Div命名ID，并设置相应Div的CSS规则，保存在对应网页中。
整个页面分为上中下三部分，用三个Div来实现，中间部分又包含两部分，在中间的Div中在插入两个Div。
每组4名同学，把整个任务分成四步，组长安排每位成员完成一步。
组织不同组的同学互相评论对方完成任务的优缺点。
对正确完成的小组提出表扬，不正确的进行指正，或请其他组同学更正错误。
1、创建网页practice7-1.html、practice7-3.html分别实现如下图所示的页面布局，层宽度、高度、边框样式自己设置。要求：使用Div+CSS布局页面，为每个Div命名ID，并设置相应Div的CSS规则，保存在对应网页中。
教师提出问题，学生一起回答，教师总结。
力求通过任务导入，吸引学生学习欲望。
学生分组讨论并尝试操作。
学生分组讨论实现方法，并比较与表格布局的不同。
教师作为引导者和组织者，学生分组上机操作，完成相应任务并进行评价。
学生分组讨论并通过尝试操作得出结论。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。