中职《网页制作》课程教案7章.docx

1、中职网页制作课程教案7章网页制作课程教案授课教师：课题章节/名称应用DIV+CSS布局页面(一)课时2主要教学方法四步教学法教学目标知识 目标（1）了解学习DIV+CSS布局的意义。（2）理解使用通配符的意义。（3）理解DIV的含义。（4）理解层的嵌套关系。（5）理解定义ID选择器的含义。（6）掌握使用通配符设置元素的方法。（7）掌握插入DIV标签的方法。（8）定义DIV标签的CSS样式。能力 目标（1）能够使用Dreamweaver CS6中的DIV+CSS布局页面。（2）能够不断学习、触类旁通。（3）能够解决软件使用过程中遇到的问题。情感 目标（1）具有勤奋学习的态度，严谨求实的工作作风。

2、（2）具有良好的心理素质和职业道德素质。（3）具有一定的科学思维方式和判断分析问题的能力。（4）具有良好的软件应用与解决问题的能力。教学重点与难点重点（1）层的嵌套关系。（2）插入DIV标签的方法。难点（1）DIV的含义。（2）层的嵌套关系。（3）插入DIV标签的方法。媒体 教具(或主要工具材料等)课本、PPT、word、素材和Dreamweaver CS6教 学 过 程修改栏 （时间分配） 教 学 内 容师生互动1.复习上节课所学知识点。介绍本章知识点、重难点介绍。DIV+CSS布局简介、学习的意义。2.7.1.2 案例分析：最终效果、DIV的含义、层的嵌套关系。3. 7.1.3 实现步骤

3、1.定义基本样式新建2个站点：一个是最终效果站点（用来模仿），另一个是只有图片文件夹的站点。 创建名为*的标签CSS规则，将“方框”中的margin、padding和“边框”中的with都设为0px。创建名为body的标签CSS规则，在“类型”中定义字体为宋体，字号为12px、颜色#666，在“背景”中设置图片为001.jpg，横向重复。注意解释书本中错误的地方（书本P106-108）。4. 2.搭建布局结构根据层的嵌套关系来插入DIV标签，注意解释书本中错误的地方（书本P108-109）。5. 3.定义DIV标签的CSS样式创建名称为#container的ID选择器，存为外部样式表文件div

4、.css，设置“方框”中的width为100%，取消margin的“全部相同”复选框，设置right和left都为auto，top和bottom都为10px，单击“确定”。创建名称为#header的ID选择器，存为外部样式表文件div.css，设置“方框”中的width为960px，height为100px，取消margin的“全部相同”复选框，设置right和left都为auto，单击“确定”。（书本P109-110）6. 对本次课进行归纳总结1. 教师演示详细步骤。2. 教师指导学生操作。3. 学生提问，教师回答。4.教师提问，学生回答。5. 教师反馈学生学习情况。6分钟10分钟22分钟2

5、2分钟25分钟3分钟作业布置书本p106-110教 学反 思亮点：对于一些容易出错或者不太理解有什么区别的知识点进行强调和演示异同。如：DIV的含义、层的嵌套关系、插入DIV标签的方法等。以日常生活中的盒子作为比喻，用通俗的语言向学生解释DIV的含义。结合实例PPT图片和代码，反复分析、对比和强调层的嵌套关系，耐心地缓速演示插入DIV标签的方法，给学生足够的消化和练习的时间。教学过程中注重观察和询问学生是否领悟知识点，如果没有再进一步耐心讲解直至弄懂。反复的讲解难点可以加深学生的印象和理解。书本上错误的地方和步骤不够详细的地方都写到一个word文档里，方便学生修改、理解和操作。网页制作课程教案

6、课题章节/名称应用DIV+CSS布局页面(二)课时2主要教学方法四步教学法教学目标知识 目标（1）理解删除前面定义的各层的高度值和背景色的原因。 （2）理解页面头部的结构。（3）理解的含义。 （4）理解ul个li的关系。 （5）掌握插入DIV标签的方法。（6）掌握定义DIV标签的CSS样式的方法。（7）掌握在menu中插入项目列表、列表项和竖线的方法。能力 目标（1）能够使用Dreamweaver CS6中的DIV+CSS布局页面。（2）能够不断学习、触类旁通。（3）能够解决软件使用过程中遇到的问题。情感 目标（1）具有勤奋学习的态度，严谨求实的工作作风。（2）具有良好的心理素质和职业道德素质

7、。（3）具有一定的科学思维方式和判断分析问题的能力。（4）具有良好的软件应用与解决问题的能力。教学重点与难点重点（1）定义DIV标签的CSS样式。（2）页面头部的制作。难点（1）插入DIV标签的方法。（2）页面头部的制作。媒体 教具(或主要工具材料等)课本、PPT、word、素材和Dreamweaver CS6教 学 过 程修改栏 （时间分配） 教 学 内 容师生互动1. 复习之前所学的知识，引入本章内容。2. 3.定义DIV标签的CSS样式创建名称为#pagebody的ID选择器，存为外部样式表文件div.css，设置“方框”中的width为960px，height为400px，取消marg

8、in的“全部相同”复选框，设置right和left都为auto，top和bottom都为0px，单击“确定”（书本P110-111）。3. 创建名称为#sidebar的ID选择器，存为外部样式表文件div.css，设置“方框”中的width为230px，height为400px。Float选择”left”。在“背景”分类中的“background”中选择#0CC，单击“确定”（书本P111）。4. 创建名称为#mainbody的ID选择器，存为外部样式表文件div.css，设置“方框”中的width为730px，height为400px，Float选择”right”。 在“背景”分类中的“ba

9、ckground”中选择#9FC，单击“确定”（书本P111）。5. 创建名称为#footer的ID选择器，存为外部样式表文件div.css，设置“方框”中的width为960px，height为100px。clear选择”both”。 取消margin的“全部相同”复选框，设置right和left都为auto 。在“背景”分类中的“background”中选择#0FF，单击“确定”。按F12看效果（书本P111-112）。6. 删除前面定义的各层的高度值和背景色，解释原因（书本P112）。7. （1）页面头部制作 分析页面头部的结构，插入ID为”menu”和ID为”banner”的两个DIV

10、（书本P113）。8. 在menu中插入项目列表（ul）和列表项（li），在li中输入“首页”给它做个空链接，复制中的内容，粘贴5行。把“首页”分别改为“博客”、“设计”、“相册”、 “论坛”和“关于”，在每行中间加入间隔线代码。将光标定位在banner中，插入图片img05.jpg（书本P113-114）。9. 总结。1. 教师演示详细步骤。2. 教师指导学生操作。3. 学生提问，教师回答。4.教师提问，学生回答。5. 教师反馈学生学习情况。5分钟12分钟11分钟11分钟11分钟9分钟10分钟18分钟3分钟作业布置书本p110-p114教 学反 思亮点：对于一些容易出错或者不太理解有什么区别

11、的知识点进行强调和演示异同。如：层的嵌套关系、插入DIV标签的方法等。结合实例PPT图片和代码，反复分析、对比和强调层的嵌套关系，耐心地缓速演示插入DIV标签的方法，给学生足够的消化和练习的时间。教学过程中注重观察和询问学生是否领悟知识点，如果没有再进一步耐心讲解直至弄懂。反复的讲解难点可以加深学生的印象和理解。书本上错误的地方和步骤不够详细的地方都写到一个word文档里，方便学生修改、理解和操作。网页制作课程教案课题章节/名称应用DIV+CSS布局页面(三)课时2主要教学方法四步教学法教学目标知识 目标（1）理解样式设置中各选项的含义。（2）掌握设置菜单CSS样式的方法。 （3）掌握插入DI

12、V标签的方法。（4）掌握登陆栏制作方法。 能力 目标（1）能够使用Dreamweaver CS6中的DIV+CSS布局页面。（2）能够不断学习、触类旁通。（3）能够解决软件使用过程中遇到的问题。情感 目标（1）具有勤奋学习的态度，严谨求实的工作作风。（2）具有良好的心理素质和职业道德素质。（3）具有一定的科学思维方式和判断分析问题的能力。（4）具有良好的软件应用与解决问题的能力。教学重点与难点重点（1）设置菜单CSS样式。（2）登陆栏制作。难点（1）插入DIV标签的方法。（2）登陆栏制作。媒体 教具(或主要工具材料等)课本、PPT、word、素材和Dreamweaver CS6教 学 过 程修

13、改栏 （时间分配） 教 学 内 容师生互动1. 复习上一堂课的知识、介绍本章的主要内容及重难点。2. 设定菜单CSS样式设置#menu、#menu ul、#menu ul li、#menu ul li a:link、#menu ul li a:visited、#menu ul li a:hover、.menudiv。文件分发，学生对照书本和WORD进行操作练习（p114）。3. （2）页面主体制作 在侧栏sidebar内嵌入两个ID为sbar1和sbar2的div元素。4. 登录栏的制作：在sbar1中插入ID为login的表单。在表单中插入文本字段和图像域。5.总结。1. 教师演示详细步骤。

14、2. 教师指导学生操作。3. 学生提问，教师回答。4.教师提问，学生回答。5. 教师反馈学生学习情况。5分钟40分钟6分钟36分钟3分钟作业布置书本P114教 学反 思亮点：对于一些容易出错或者不太理解有什么区别的知识点进行强调和演示异同。如：层的嵌套关系、插入DIV标签的方法、插入表单、文本字段和图像域等。结合实例PPT图片和代码，反复分析、对比和强调层的嵌套关系，耐心地缓速演示插入DIV标签的方法，给学生足够的消化和练习的时间。教学过程中注重观察和询问学生是否领悟知识点，如果没有再进一步耐心讲解直至弄懂。反复的讲解难点可以加深学生的印象和理解。书本上错误的地方和步骤不够详细的地方都写到一个

15、word文档里，方便学生修改、理解和操作。网页制作课程教案课题章节/名称应用DIV+CSS布局页面(四)课时2主要教学方法四步教学法教学目标知识 目标（1）理解样式设置中各选项的含义。（2）掌握设置登陆栏CSS样式的方法。 （3）插入DIV标签的方法。（4）mainbody区的制作。 能力 目标（1）能够使用Dreamweaver CS6中的DIV+CSS布局页面。（2）能够不断学习、触类旁通。（4）能够解决软件使用过程中遇到的问题。情感 目标（1）具有勤奋学习的态度，严谨求实的工作作风。（2）具有良好的心理素质和职业道德素质。（3）具有一定的科学思维方式和判断分析问题的能力。（4）具有良好的

16、软件应用与解决问题的能力。教学重点与难点重点（1）根据CSS样式代码设置规则。难点（1）层的嵌套关系。（2）插入DIV标签的方法。（3）根据CSS样式代码设置规则。媒体 教具(或主要工具材料等)课本、PPT、word素材和Dreamweaver CS6教 学 过 程修改栏 （时间分配） 教 学 内 容师生互动1. 复习上一堂课的知识、介绍本章的主要内容及重难点。2. 建立两个站点，一个是要模仿的站点，另一个是接着上节课内容的站点。全部改成word的内容：定义#login样式。文件分发，学生对照书本和WORD进行操作练习（p115）。3. 定义#login_name,#login_pass的样式

17、。4. 定义#button、 #sbar1,#sbar2的样式。5. 在sbar2中依次插入图片003.gif、027.gif和042.gif。其中027.gif改宽为215。在mainbody中插class01,class02和class03三个DIV。6. 在class01中输入标题和空行，插入ID为dy的DIV（在标题下面），在dy中插入图片，输入文字。图片设置左对齐，ID为img。7. 总结。1. 教师演示详细步骤。2. 教师指导学生操作。3. 学生提问，教师回答。4.教师提问，学生回答。5. 教师反馈学生学习情况。5分钟20分钟17分钟17分钟14分钟14分钟3分钟作业布置书本P11

18、5教 学反 思亮点：对于一些容易出错或者不太理解有什么区别的知识点进行强调和演示异同。如：层的嵌套关系、插入DIV标签的方法、根据CSS样式代码设置规则等。结合实例PPT图片和代码，反复分析、对比和强调层的嵌套关系，耐心地缓速演示插入DIV标签的方法，CSS样式代码的英文含义一一翻译，给学生足够的消化和练习的时间。教学过程中注重观察和询问学生是否领悟知识点，如果没有再进一步耐心讲解直至弄懂。反复的讲解难点可以加深学生的印象和理解。书本上错误的地方和步骤不够详细的地方都写到一个word文档里，方便学生修改、理解和操作。网页制作课程教案课题章节/名称应用DIV+CSS布局页面(五)课时2主要教学方

19、法四步教学法教学目标知识 目标（1）理解样式设置中各选项的含义。（2）掌握设置mainbody区CSS样式的方法。 （3）掌握插入DIV标签的方法。（4）掌握footer区的制作。 能力 目标（1）能够使用Dreamweaver CS6中的DIV+CSS布局页面。（2）能够不断学习、触类旁通。（3）能够解决软件使用过程中遇到的问题。情感 目标（1）具有勤奋学习的态度，严谨求实的工作作风。（2）具有良好的心理素质和职业道德素质。（3）具有一定的科学思维方式和判断分析问题的能力。（4）具有良好的软件应用与解决问题的能力。教学重点与难点重点（1）根据CSS样式代码设置规则。难点（1）层的嵌套关系。（

20、2）插入DIV标签的方法。（3）根据CSS样式代码设置规则。媒体 教具(或主要工具材料等)课本、PPT、WORD、素材和Dreamweaver CS6教 学 过 程修改栏 （时间分配） 教 学 内 容师生互动1. 复习上一堂课的知识、介绍本章的主要内容及重难点。2. 建立两个站点，一个是要模仿的站点，另一个是接着上节课内容的站点。在class02中输入标题和空行，插入ID为xl的DIV（在标题下面），在dy中插入图片，输入文字。图片设置左对齐，ID为img。文件分发，学生对照书本和WORD进行操作练习（p115-116）。3. 在class03中输入标题和空行，插入ID为photo1和ID为p

21、hoto2的DIV（在标题下面），在photo1中插入图片，输入文字。图片设置左对齐，ID为img。在Photo2中插入图片。4. 在div.css中插入word第5页代码，解释代码含义：分别对#img、#photo1和#photo2的样式进行设置。定义h2以及class01,class02和class03三个DIV的CSS样式。5. （3）页面底部制作 在foot区中输入相关版权信息。按照word第6页的代码设置#footer和.bq的CSS样式。给版权文字应用.bq样式。最后，删除网页中不需要的文字占位符。6. 总结。1. 教师演示详细步骤。2. 教师指导学生操作。3. 学生提问，教师回答

22、。4.教师提问，学生回答。5. 教师反馈学生学习情况。5分钟20分钟18分钟22分钟22分钟3分钟作业布置书本P115-116教 学反 思亮点：对于一些容易出错或者不太理解有什么区别的知识点进行强调和演示异同。如：层的嵌套关系、插入DIV标签的方法、根据CSS样式代码设置规则等。结合实例PPT图片和代码，反复分析、对比和强调层的嵌套关系，耐心地缓速演示插入DIV标签的方法，CSS样式代码的英文含义一一翻译，给学生足够的消化和练习的时间。教学过程中注重观察和询问学生是否领悟知识点，如果没有再进一步耐心讲解直至弄懂。反复的讲解难点可以加深学生的印象和理解。书本上错误的地方和步骤不够详细的地方都写到

23、一个word文档里，方便学生修改、理解和操作。网页制作课程教案课题章节/名称DIV标签的使用课时2主要教学方法四步教学法教学目标知识 目标（1）理解防止AP DIV重叠的含义、Z轴值和层叠关系。（2）掌握插入和编辑DIV标签。 （3）掌握使用可视化助理。（4）掌握插入和编辑AP DIV元素。（5）掌握AP DIV与表格的互换。能力 目标（1）能够使用Dreamweaver CS6插入和编辑DIV标签。（2）会使用可视化助理。（3）会插入和编辑AP DIV元素。（4）会进行AP DIV与表格的互换。（5）能够解决软件使用过程中遇到的问题。情感 目标（1）具有勤奋学习的态度，严谨求实的工作作风。（

24、2）具有良好的心理素质和职业道德素质。（3）具有一定的科学思维方式和判断分析问题的能力。（4）具有良好的软件应用与解决问题的能力。教学重点与难点重点（1）插入和编辑DIV标签。（2）插入和编辑AP DIV元素。难点（1）插入和编辑DIV标签。（2）插入和编辑AP DIV元素。媒体 教具(或主要工具材料等)课本、PPT、素材和Dreamweaver CS6教 学 过 程修改栏 （时间分配） 教 学 内 容师生互动1. 复习上一堂课的知识、介绍本章的主要内容及重难点。2. 7.2.1 插入DIV标签 介绍插入、类、ID选项。7.2.2 编辑DIV标签添加、修改或删除内容。3. 7.2.3 CSS布

25、局快介绍布局外框、布局背景、布局框模型。4. 7.2.4 使用AP DIV元素1.插入APDIV：（1）插入法（2）拖放法（3）绘制法（4）创建嵌套的AP DIV。文件分发，学生对照书本和WORD进行操作练习（p117-124）。5. 2.激活和选中AP DIV 3.设置APDIV的属性CSS-P元素、做、上、宽、高、Z轴。6. 介绍属性中的可见性、溢出、剪辑。4.APDIV的编辑（1）调整AP DIV的大小（2）移动AP DIV（3）对齐AP DIV（4）删除AP DIV。7. 5.AP DIV面板的使用选定某个AP DIV更改 AP DIV名显示、隐藏AP DIV改变AP DIV的叠放次序

26、创建和取消嵌套AP DIV。禁止AP DIV重叠。6.AP DIV与表格互换。（1）表格转换为AP DIV。(2)AP DIV转换为表格。8. 总结。1. 教师演示详细步骤。2. 教师指导学生操作。3. 学生提问，教师回答。4.教师提问，学生回答。5. 教师反馈学生学习情况。5分钟7分钟2分钟14分钟24分钟18分钟17分钟3分钟作业布置书本P117-124教 学反 思亮点：对于一些容易出错或者不太理解有什么区别的知识点进行强调和演示异同。如：防止AP DIV重叠的含义、Z轴值和层叠关系、嵌套的AP DIV等，这些是比较容易出错的问题。将这些问题进行强调和比较，用通俗易懂的语言向学生讲解，通过

27、演示帮助学生理解，提高学生自主学习和解决问题的能力。不足之处：课堂气氛不够活跃。网页制作课程教案课题章节/名称CSS布局课时2主要教学方法四步教学法教学目标知识 目标（1）理解内边距和外边距的区别。（2）CSS浮动和清理浮动的含义。 （3）掌握内边距和外边距的设置方法。（4）掌握一列、两列和多列居中的设置方法。能力 目标（1）能够使用Dreamweaver CS6进行CSS布局。（2）能够不断学习、触类旁通。（3）能够解决软件使用过程中遇到的问题。情感 目标（1）具有勤奋学习的态度，严谨求实的工作作风。（2）具有良好的心理素质和职业道德素质。（3）具有一定的科学思维方式和判断分析问题的能力。（

28、4）具有良好的软件应用与解决问题的能力。教学重点与难点重点（1）CSS浮动和清理浮动的理解。（2）一列、两列和多列居中的设置方法。难点（1）CSS浮动和清理浮动的理解。媒体 教具(或主要工具材料等)课本、PPT、素材和Dreamweaver CS6教 学 过 程修改栏 （时间分配） 教 学 内 容师生互动1. 复习上一堂课的知识、介绍本章的主要内容及重难点。2. 介绍CSS盒模型.修改内边距和外边距不会影响内容区域的尺寸以本章index.html中的#photo为例。3. 介绍（1）内边距、(2)边框、（3）外边距。4. 7.3.2 CSS定位 1.CSS浮动。2.清理浮动。用CSSDW.ht

29、ml文档来演示。文件分发，学生对照书本和WORD进行操作练习（p124-128）。5. 7.3.3 CSS布局 1.一列居中显示步骤：选择“插入”|“布局对象”|“DIV标签”。“在插入点”，“ID”为“count”。单击“确定”单击“新建CSS规则”按钮，选择器类型为“ID”，选择器名称为“#count”，规则定义为“仅对该文档”，单击“确定”。设置背景颜色、margin-left和margin-right都为”auto”，单击“确定”。6. 2.两列居中显示步骤：选择“插入”|“布局对象”|“DIV标签”。“在插入点”，“ID”为“con”。单击“确定”。再次单击“插入DIV标签”按钮，在con的DIV中插入”con1”和”con2”两个标签。margin-right都为”auto” 单击“新建CSS规则”按钮，选择器类型为“复合内容”，选择器名称为“#con #con1”，规则定义为“仅对该文档”，单击“确定”。设置背景颜色、width为300px,height为2