教案模板
- 格式：doc
- 大小：1.09 MB
- 文档页数：6
3.在对话框中，输入ID名为“top”，然后单击“新建CSS样式”按钮。
4.选择器类型默认为“高级”，选择器名为“#top”。
5.保存样式表，文件名为s1。
6.根据要求，设置网页上部CSS样式属性
7.依次插入main_01、02、03、04图像
2.2、制作网页中部
2.2.1制作网页中部左部分的内容，如图所示：
使用Div+CSS技术制作网页的步骤
任务实施：使用Div+CSS技术制作网站首页
教学难点
确定Div标签插入点的位置
运用CSS面板创建样式
网站首页上中下部分的具体步骤
辅助资源
多媒体教学系统、电脑机房、《Dreamweaver网页设计与制作》、课件
教学方法
多媒体教学、任务驱动、现场操作示范、内容总结
教学环节
由图可知，网页中部左部分多次内嵌Div标签。
制作网页中部左部分说明：(红色字体为样式表属性)
制作网页中部左部分步骤：
1.将插入点置于top标签后，之后点击“布局”插入栏里的“插入Div标签”按钮。
2.在“ID”编辑框中输入ID名为“content”，单击“新建CSS样式”按钮。
3.定义CSS样式。
4.将插入点置于“content”标签内，嵌套一个ID为“news”的Div，参照前面的方法，定义样式表。
网页制作教案
授课教师
叶苑香
授课班级
15秋电子商务(1)班
授课日期
2016.5.30
教学课题
项目八制作茶文化网站
—使用Div+CSS技术制作网站首页
课时安排
8课时
教学目标
认识什么是Div标签
Div标签的创建
应用Div+CSS技术布局网页
教学重点
Div标签+CSS样式表的使用方法
插入Div标签注意的事项
教学小结
做此次项目，我们可以清晰明了地规划网页设计的布局，灵活运用Div+CSS技术，能实现各种个样的效果，难点在于，Div插入点的位置要明确，布局合理，有条理的规划和设计网页，同时也方便我们查看源代码。希望同学们可以熟悉并充分运用Div+CSS技术来设计网站。
(第8课时3分钟)
拓展思考
使用Div+CSS技术插入表格
4.在“right”标签里插入图像main_09，至此，网页中部的内容已全部完成。
2.3制作网页下部
网页下部的效果如图所示：
制作网页下部的说明：（红色字体为样式表属性）
制作网页下部的步骤：
1.将插入点置于ID为“content”的Div后，插入ID为“bottom”的Div，并定义样式表。
2.在ID“bottom”的Div中，重新输入新的文本。
二、制作网站首页
2.1、制作网页上部
网页上部效果如图所示：
Div标签的创建： 选择红色的区域的标志，单击鼠标即可添加Div标签。
制作网页上部的说明：(红色字体为样式表属性)
制作网页上部的步骤：
1.新建html文档，命名为“index.html”。
2.在文档编辑窗口定位插入点，之后将“插入”栏切换至“布局”栏，单击“插入Div标签”按钮。
(第8课时3分钟)
作业布置
任务实施：制作茶文化)
指导练习：老师下去查看同学完成进度，并对有疑问的同学进行指导，完成网页中部右部分的内容，并提交作业。(第6课时)
选择一个同学对上节课的内容进行演示操作，检验学习效果。（第7课时7分钟）
控制电脑，现场操作示范做网页下部分的内容，参考课本P219-221
(第7课时)
指导练习：老师下去查看同学完成进度，并对有疑问的同学进行指导，完成网页下部分的内容，并提交作业。(第8课时)
3.分别保存网页文档和样式文件，在浏览器中预览文档，查看效果。
三、网站首页的总结说明
由上图可规划网站首页各部分的内容以及定义样式表。
参考：课本P202
(第1课时3分钟)
控制电脑，现场操作示范做网页上部分内容。
参考：课本
P207-210
(第1课时)
指导练习：老师下去查看同学完成进度，并对有疑问的同学进行指导，完成网页上部的内容，并提交作业。(第2课时)
控制电脑，现场操作示范做网页中部左部分的内容，参考课本P211-217
(第3课时)
指导练习：老师下去查看同学完成进度，并对有疑问的同学进行指导，完成网页中部左部分的内容，并提交作业。(第4课时)
选择一个同学对上节课的内容进行演示操作，检验学习效果。（第5课时7分钟）
控制电脑，现场操作示范做网页中部右部分的内容，参考课本P217-218
制作网页中部右部分说明：(红色字体为样式表属性)
制作网页中部右部分步骤：
1.将插入点置于ID为“news”后，继续在ID为“content”的Div嵌套一个ID为“center”的Div，并定义样式表。
2.在“center”的Div中插入main_06图像。
3.将插入点置于ID为“center”后，继续在ID为“content”里嵌套一个ID为“right”的Div，并定义样式表。
提问：
Div+CSS布局的优缺点
参考课本：
P202-203
(第1课时8分钟)
讲授新课
一、认识Div标签
Div标签式用来XHTML文档的块内容设置结构和背景属性的元素。它相当于一个容器，由起始标签〈Div〉和结束标签〈/Div〉之间的所有内容来构成这个块。重点是Div标签不带任何属性。同时在标签里可以内嵌表格(table)、文本(text)等其它XHTML代码。
5.在“news”的Div插入图像main_05。
6.将插入点置于图片后方，在ID为“news”的Div嵌套一个ID为“newscontent”的Div，并定义样式表。
7.在“newscontent”中输入新的文本，选中文本，单击“属性”面板上的“项目列表”按钮。
2.2.2制作网页中部右部分的内容，如图所示：
师生互动设计与时间
复习
引入新课
近几年，我们流行使用“Div+CSS”技术来布局网页，而且在网页设计领域，Web标准的呼声越来越高，我们想要使网站符合Web标准，就必须学会用“Div+CSS”技术构建网站。
这几节课里我将带大家用“Div+CSS”来制作茶文化网站，效果如下图所示：
课本素材茶文化网站是采用了新的网页布局技术，说明“Div+CSS”技术对网页布局和美化方面尤为重要，最后引出今天要学的Div标签。
4.选择器类型默认为“高级”，选择器名为“#top”。
5.保存样式表，文件名为s1。
6.根据要求，设置网页上部CSS样式属性
7.依次插入main_01、02、03、04图像
2.2、制作网页中部
2.2.1制作网页中部左部分的内容，如图所示：
使用Div+CSS技术制作网页的步骤
任务实施：使用Div+CSS技术制作网站首页
教学难点
确定Div标签插入点的位置
运用CSS面板创建样式
网站首页上中下部分的具体步骤
辅助资源
多媒体教学系统、电脑机房、《Dreamweaver网页设计与制作》、课件
教学方法
多媒体教学、任务驱动、现场操作示范、内容总结
教学环节
由图可知，网页中部左部分多次内嵌Div标签。
制作网页中部左部分说明：(红色字体为样式表属性)
制作网页中部左部分步骤：
1.将插入点置于top标签后，之后点击“布局”插入栏里的“插入Div标签”按钮。
2.在“ID”编辑框中输入ID名为“content”，单击“新建CSS样式”按钮。
3.定义CSS样式。
4.将插入点置于“content”标签内，嵌套一个ID为“news”的Div，参照前面的方法，定义样式表。
网页制作教案
授课教师
叶苑香
授课班级
15秋电子商务(1)班
授课日期
2016.5.30
教学课题
项目八制作茶文化网站
—使用Div+CSS技术制作网站首页
课时安排
8课时
教学目标
认识什么是Div标签
Div标签的创建
应用Div+CSS技术布局网页
教学重点
Div标签+CSS样式表的使用方法
插入Div标签注意的事项
教学小结
做此次项目，我们可以清晰明了地规划网页设计的布局，灵活运用Div+CSS技术，能实现各种个样的效果，难点在于，Div插入点的位置要明确，布局合理，有条理的规划和设计网页，同时也方便我们查看源代码。希望同学们可以熟悉并充分运用Div+CSS技术来设计网站。
(第8课时3分钟)
拓展思考
使用Div+CSS技术插入表格
4.在“right”标签里插入图像main_09，至此，网页中部的内容已全部完成。
2.3制作网页下部
网页下部的效果如图所示：
制作网页下部的说明：（红色字体为样式表属性）
制作网页下部的步骤：
1.将插入点置于ID为“content”的Div后，插入ID为“bottom”的Div，并定义样式表。
2.在ID“bottom”的Div中，重新输入新的文本。
二、制作网站首页
2.1、制作网页上部
网页上部效果如图所示：
Div标签的创建： 选择红色的区域的标志，单击鼠标即可添加Div标签。
制作网页上部的说明：(红色字体为样式表属性)
制作网页上部的步骤：
1.新建html文档，命名为“index.html”。
2.在文档编辑窗口定位插入点，之后将“插入”栏切换至“布局”栏，单击“插入Div标签”按钮。
(第8课时3分钟)
作业布置
任务实施：制作茶文化)
指导练习：老师下去查看同学完成进度，并对有疑问的同学进行指导，完成网页中部右部分的内容，并提交作业。(第6课时)
选择一个同学对上节课的内容进行演示操作，检验学习效果。（第7课时7分钟）
控制电脑，现场操作示范做网页下部分的内容，参考课本P219-221
(第7课时)
指导练习：老师下去查看同学完成进度，并对有疑问的同学进行指导，完成网页下部分的内容，并提交作业。(第8课时)
3.分别保存网页文档和样式文件，在浏览器中预览文档，查看效果。
三、网站首页的总结说明
由上图可规划网站首页各部分的内容以及定义样式表。
参考：课本P202
(第1课时3分钟)
控制电脑，现场操作示范做网页上部分内容。
参考：课本
P207-210
(第1课时)
指导练习：老师下去查看同学完成进度，并对有疑问的同学进行指导，完成网页上部的内容，并提交作业。(第2课时)
控制电脑，现场操作示范做网页中部左部分的内容，参考课本P211-217
(第3课时)
指导练习：老师下去查看同学完成进度，并对有疑问的同学进行指导，完成网页中部左部分的内容，并提交作业。(第4课时)
选择一个同学对上节课的内容进行演示操作，检验学习效果。（第5课时7分钟）
控制电脑，现场操作示范做网页中部右部分的内容，参考课本P217-218
制作网页中部右部分说明：(红色字体为样式表属性)
制作网页中部右部分步骤：
1.将插入点置于ID为“news”后，继续在ID为“content”的Div嵌套一个ID为“center”的Div，并定义样式表。
2.在“center”的Div中插入main_06图像。
3.将插入点置于ID为“center”后，继续在ID为“content”里嵌套一个ID为“right”的Div，并定义样式表。
提问：
Div+CSS布局的优缺点
参考课本：
P202-203
(第1课时8分钟)
讲授新课
一、认识Div标签
Div标签式用来XHTML文档的块内容设置结构和背景属性的元素。它相当于一个容器，由起始标签〈Div〉和结束标签〈/Div〉之间的所有内容来构成这个块。重点是Div标签不带任何属性。同时在标签里可以内嵌表格(table)、文本(text)等其它XHTML代码。
5.在“news”的Div插入图像main_05。
6.将插入点置于图片后方，在ID为“news”的Div嵌套一个ID为“newscontent”的Div，并定义样式表。
7.在“newscontent”中输入新的文本，选中文本，单击“属性”面板上的“项目列表”按钮。
2.2.2制作网页中部右部分的内容，如图所示：
师生互动设计与时间
复习
引入新课
近几年，我们流行使用“Div+CSS”技术来布局网页，而且在网页设计领域，Web标准的呼声越来越高，我们想要使网站符合Web标准，就必须学会用“Div+CSS”技术构建网站。
这几节课里我将带大家用“Div+CSS”来制作茶文化网站，效果如下图所示：
课本素材茶文化网站是采用了新的网页布局技术，说明“Div+CSS”技术对网页布局和美化方面尤为重要，最后引出今天要学的Div标签。
