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

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

《中职《网页制作》课程教案7章.docx》由会员分享，可在线阅读，更多相关《中职《网页制作》课程教案7章.docx（20页珍藏版）》请在冰点文库上搜索。

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

《网页制作》课程教案

授课教师：

课题章节/名称

应用DIV+CSS布局页面

（一）

课时

2

主要教学方法

四步教学法

教

学

目

标

知识目标

（1）了解学习DIV+CSS布局的意义。

（2）理解使用通配符的意义。

（3）理解DIV的含义。

（4）理解层的嵌套关系。

（5）理解定义ID选择器的含义。

（6）掌握使用通配符设置元素的方法。

（7）掌握插入DIV标签的方法。

（8）定义DIV标签的CSS样式。

能力目标

（1）能够使用DreamweaverCS6中的DIV+CSS布局页面。

（2）能够不断学习、触类旁通。

（3）能够解决软件使用过程中遇到的问题。

情感目标

（1）具有勤奋学习的态度，严谨求实的工作作风。

（2）具有良好的心理素质和职业道德素质。

（3）具有一定的科学思维方式和判断分析问题的能力。

（4）具有良好的软件应用与解决问题的能力。

教学

重点

与难点

重点

（1）层的嵌套关系。

（2）插入DIV标签的方法。

难点

（1）DIV的含义。

（2）层的嵌套关系。

（3）插入DIV标签的方法。

媒体教具（或主要工具材料等）

课本、PPT、word、素材和DreamweaverCS6

教学过程

修改栏（时间分配）

教学内容

师生互动

1.复习上节课所学知识点。

介绍本章知识点、重难点介绍。

DIV+CSS布局简介、学习的意义。

2.7.1.2案例分析：

最终效果、DIV的含义、层的嵌套关系。

3.7.1.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.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分钟

22分钟

25分钟

3分钟

作业布置

书本p106-110

教学反思

亮点：

①对于一些容易出错或者不太理解有什么区别的知识点进行强调和演示异同。

如：

DIV的含义、层的嵌套关系、插入DIV标签的方法等。

以日常生活中的盒子作为比喻，用通俗的语言向学生解释DIV的含义。

结合实例PPT图片和代码，反复分析、对比和强调层的嵌套关系，耐心地缓速演示插入DIV标签的方法，给学生足够的消化和练习的时间。

教学过程中注重观察和询问学生是否领悟知识点，如果没有再进一步耐心讲解直至弄懂。

反复的讲解难点可以加深学生的印象和理解。

②书本上错误的地方和步骤不够详细的地方都写到一个word文档里，方便学生修改、理解和操作。

《网页制作》课程教案

课题章节/名称

应用DIV+CSS布局页面

（二）

课时

2

主要教学方法

四步教学法

教

学

目

标

知识目标

（1）理解删除前面定义的各层的高度值和背景色的原因。

（2）理解页面头部的结构。

（3）理解的含义。

（4）理解ul个li的关系。

（5）掌握插入DIV标签的方法。

（6）掌握定义DIV标签的CSS样式的方法。

（7）掌握在menu中插入项目列表、列表项和竖线的方法。

能力目标

（1）能够使用DreamweaverCS6中的DIV+CSS布局页面。

（2）能够不断学习、触类旁通。

（3）能够解决软件使用过程中遇到的问题。

情感目标

（1）具有勤奋学习的态度，严谨求实的工作作风。

（2）具有良好的心理素质和职业道德素质。

（3）具有一定的科学思维方式和判断分析问题的能力。

（4）具有良好的软件应用与解决问题的能力。

教学

重点

与

难点

重点

（1）定义DIV标签的CSS样式。

（2）页面头部的制作。

难点

（1）插入DIV标签的方法。

（2）页面头部的制作。

媒体教具（或主要工具材料等）

课本、PPT、word、素材和DreamweaverCS6

教学过程

修改栏（时间分配）

教学内容

师生互动

1.复习之前所学的知识，引入本章内容。

2.3.定义DIV标签的CSS样式④创建名称为#pagebody的ID选择器，存为外部样式表文件div.css，设置“方框”中的width为960px，height为400px，取消margin的“全部相同”复选框，设置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”。

在“背景”分类中的“background”中选择#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（书本P113）。

8.①在menu中插入项目列表（ul）和列表项（li），在li中输入“首页”给它做个空链接，复制

把“首页”分别改为“博客”、“设计”、“相册”、“论坛”和“关于”，在每行中间加入间隔线代码。

②将光标定位在banner中，插入图片img05.jpg（书本P113-114）。

9.总结。

1.教师演示详细步骤。

2.教师指导学生操作。

3.学生提问，教师回答。

4.教师提问，学生回答。

5.教师反馈学生学习情况。

5分钟

12分钟

11分钟

11分钟

11分钟

9分钟

10分钟

18分钟

3分钟

作业布置

书本p110-p114

教学反思

亮点：

①对于一些容易出错或者不太理解有什么区别的知识点进行强调和演示异同。

如：

层的嵌套关系、插入DIV标签的方法等。

结合实例PPT图片和代码，反复分析、对比和强调层的嵌套关系，耐心地缓速演示插入DIV标签的方法，给学生足够的消化和练习的时间。

教学过程中注重观察和询问学生是否领悟知识点，如果没有再进一步耐心讲解直至弄懂。

反复的讲解难点可以加深学生的印象和理解。

②书本上错误的地方和步骤不够详细的地方都写到一个word文档里，方便学生修改、理解和操作。

《网页制作》课程教案

课题章节/名称

应用DIV+CSS布局页面（三）

课时

2

主要教学方法

四步教学法

教

学

目

标

知识目标

（1）理解样式设置中各选项的含义。

（2）掌握设置菜单CSS样式的方法。

（3）掌握插入DIV标签的方法。

（4）掌握登陆栏制作方法。

能力目标

（1）能够使用DreamweaverCS6中的DIV+CSS布局页面。

（2）能够不断学习、触类旁通。

（3）能够解决软件使用过程中遇到的问题。

情感目标

（1）具有勤奋学习的态度，严谨求实的工作作风。

（2）具有良好的心理素质和职业道德素质。

（3）具有一定的科学思维方式和判断分析问题的能力。

（4）具有良好的软件应用与解决问题的能力。

教学

重点

与

难点

重点

（1）设置菜单CSS样式。

（2）登陆栏制作。

难点

（1）插入DIV标签的方法。

（2）登陆栏制作。

媒体教具（或主要工具材料等）

课本、PPT、word、素材和DreamweaverCS6

教学过程

修改栏（时间分配）

教学内容

师生互动

1.复习上一堂课的知识、介绍本章的主要内容及重难点。

2.③设定菜单CSS样式——设置#menu、#menuul、#menuulli、#menuullia:

link、#menuullia:

visited、#menuullia:

hover、.menudiv。

文件分发，学生对照书本和WORD进行操作练习（p114）。

3.

（2）页面主体制作①在侧栏sidebar内嵌入两个ID为sbar1和sbar2的div元素。

4.②登录栏的制作：

在sbar1中插入ID为login的表单。

在表单中插入文本字段和图像域。

5.总结。

1.教师演示详细步骤。

2.教师指导学生操作。

3.学生提问，教师回答。

4.教师提问，学生回答。

5.教师反馈学生学习情况。

5分钟

40分钟

6分钟

36分钟

3分钟

作业布置

书本P114

教学反思

亮点：

①对于一些容易出错或者不太理解有什么区别的知识点进行强调和演示异同。

如：

层的嵌套关系、插入DIV标签的方法、插入表单、文本字段和图像域等。

结合实例PPT图片和代码，反复分析、对比和强调层的嵌套关系，耐心地缓速演示插入DIV标签的方法，给学生足够的消化和练习的时间。

教学过程中注重观察和询问学生是否领悟知识点，如果没有再进一步耐心讲解直至弄懂。

反复的讲解难点可以加深学生的印象和理解。

②书本上错误的地方和步骤不够详细的地方都写到一个word文档里，方便学生修改、理解和操作。

《网页制作》课程教案

课题章节/名称

应用DIV+CSS布局页面（四）

课时

2

主要教学方法

四步教学法

教

学

目

标

知识目标

（1）理解样式设置中各选项的含义。

（2）掌握设置登陆栏CSS样式的方法。

（3）插入DIV标签的方法。

（4）mainbody区的制作。

能力目标

（1）能够使用DreamweaverCS6中的DIV+CSS布局页面。

（2）能够不断学习、触类旁通。

（4）能够解决软件使用过程中遇到的问题。

情感目标

（1）具有勤奋学习的态度，严谨求实的工作作风。

（2）具有良好的心理素质和职业道德素质。

（3）具有一定的科学思维方式和判断分析问题的能力。

（4）具有良好的软件应用与解决问题的能力。

教学

重点

与

难点

重点

（1）根据CSS样式代码设置规则。

难点

（1）层的嵌套关系。

（2）插入DIV标签的方法。

（3）根据CSS样式代码设置规则。

媒体教具（或主要工具材料等）

课本、PPT、word素材和DreamweaverCS6

教学过程

修改栏（时间分配）

教学内容

师生互动

1.复习上一堂课的知识、介绍本章的主要内容及重难点。

2.建立两个站点，一个是要模仿的站点，另一个是接着上节课内容的站点。

③④全部改成word的内容：

定义#login样式。

文件分发，学生对照书本和WORD进行操作练习（p115）。

3.定义#login_name,#login_pass的样式。

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分钟

作业布置

书本P115

教学反思

亮点：

①对于一些容易出错或者不太理解有什么区别的知识点进行强调和演示异同。

如：

层的嵌套关系、插入DIV标签的方法、根据CSS样式代码设置规则等。

结合实例PPT图片和代码，反复分析、对比和强调层的嵌套关系，耐心地缓速演示插入DIV标签的方法，CSS样式代码的英文含义一一翻译，给学生足够的消化和练习的时间。

教学过程中注重观察和询问学生是否领悟知识点，如果没有再进一步耐心讲解直至弄懂。

反复的讲解难点可以加深学生的印象和理解。

②书本上错误的地方和步骤不够详细的地方都写到一个word文档里，方便学生修改、理解和操作。

《网页制作》课程教案

课题章节/名称

应用DIV+CSS布局页面（五）

课时

2

主要教学方法

四步教学法

教

学

目

标

知识目标

（1）理解样式设置中各选项的含义。

（2）掌握设置mainbody区CSS样式的方法。

（3）掌握插入DIV标签的方法。

（4）掌握footer区的制作。

能力目标

（1）能够使用DreamweaverCS6中的DIV+CSS布局页面。

（2）能够不断学习、触类旁通。

（3）能够解决软件使用过程中遇到的问题。

情感目标

（1）具有勤奋学习的态度，严谨求实的工作作风。

（2）具有良好的心理素质和职业道德素质。

（3）具有一定的科学思维方式和判断分析问题的能力。

（4）具有良好的软件应用与解决问题的能力。

教学

重点

与

难点

重点

（1）根据CSS样式代码设置规则。

难点

（1）层的嵌套关系。

（2）插入DIV标签的方法。

（3）根据CSS样式代码设置规则。

媒体教具（或主要工具材料等）

课本、PPT、WORD、素材和DreamweaverCS6

教学过程

修改栏（时间分配）

教学内容

师生互动

1.复习上一堂课的知识、介绍本章的主要内容及重难点。

2.建立两个站点，一个是要模仿的站点，另一个是接着上节课内容的站点。

在class02中输入标题和空行，插入ID为xl的DIV（在标题下面），在dy中插入图片，输入文字。

图片设置左对齐，ID为img。

文件分发，学生对照书本和WORD进行操作练习（p115-116）。

3.在class03中输入标题和空行，插入ID为photo1和ID为photo2的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.学生提问，教师回答。

4.教师提问，学生回答。

5.教师反馈学生学习情况。

5分钟

20分钟

18分钟

22分钟

22分钟

3分钟

作业布置

书本P115-116

教学反思

亮点：

①对于一些容易出错或者不太理解有什么区别的知识点进行强调和演示异同。

如：

层的嵌套关系、插入DIV标签的方法、根据CSS样式代码设置规则等。

结合实例PPT图片和代码，反复分析、对比和强调层的嵌套关系，耐心地缓速演示插入DIV标签的方法，CSS样式代码的英文含义一一翻译，给学生足够的消化和练习的时间。

教学过程中注重观察和询问学生是否领悟知识点，如果没有再进一步耐心讲解直至弄懂。

反复的讲解难点可以加深学生的印象和理解。

②书本上错误的地方和步骤不够详细的地方都写到一个word文档里，方便学生修改、理解和操作。

《网页制作》课程教案

课题章节/名称

DIV标签的使用

课时

2

主要教学方法

四步教学法

教

学

目

标

知识目标

（1）理解防止APDIV重叠的含义、Z轴值和层叠关系。

（2）掌握插入和编辑DIV标签。

（3）掌握使用可视化助理。

（4）掌握插入和编辑APDIV元素。

（5）掌握APDIV与表格的互换。

能力目标

（1）能够使用DreamweaverCS6插入和编辑DIV标签。

（2）会使用可视化助理。

（3）会插入和编辑APDIV元素。

（4）会进行APDIV与表格的互换。

（5）能够解决软件使用过程中遇到的问题。

情感目标

（1）具有勤奋学习的态度，严谨求实的工作作风。

（2）具有良好的心理素质和职业道德素质。

（3）具有一定的科学思维方式和判断分析问题的能力。

（4）具有良好的软件应用与解决问题的能力。

教学

重点

与

难点

重点

（1）插入和编辑DIV标签。

（2）插入和编辑APDIV元素。

难点

（1）插入和编辑DIV标签。

（2）插入和编辑APDIV元素。

媒体教具（或主要工具材料等）

课本、PPT、素材和DreamweaverCS6

教学过程

修改栏（时间分配）

教学内容

师生互动

1.复习上一堂课的知识、介绍本章的主要内容及重难点。

2.7.2.1插入DIV标签——介绍插入、类、ID选项。

7.2.2编辑DIV标签——添加、修改或删除内容。

3.7.2.3CSS布局快——介绍布局外框、布局背景、布局框模型。

4.7.2.4使用APDIV元素1.插入APDIV：

（1）插入法

（2）拖放法（3）绘制法（4）创建嵌套的APDIV。

文件分发，学生对照书本和WORD进行操作练习（p117-124）。

5.2.激活和选中APDIV3.设置APDIV的属性——CSS-P元素、做、上、宽、高、Z轴。

6.介绍属性中的可见性、溢出、剪辑。

4.APDIV的编辑

（1）调整APDIV的大小

（2）移动APDIV（3）对齐APDIV（4）删除APDIV。

7.5.APDIV面板的使用①选定某个APDIV②更改APDIV名③显示、隐藏APDIV④改变APDIV的叠放次序⑤创建和取消嵌套APDIV。

⑥禁止APDIV重叠。

6.APDIV与表格互换。

（1）表格转换为APDIV。

（2）APDIV转换为表格。

8.总结。

1.教师演示详细步骤。

2.教师指导学生操作。

3.学生提问，教师回答。

4.教师提问，学生回答。

5.教师反馈学生学习情况。

5分钟

7分钟

2分钟

14分钟

24分钟

18分钟

17分钟

3分钟

作业布置

书本P117-124

教学反思

亮点：

对于一些容易出错或者不太理解有什么区别的知识点进行强调和演示异同。

如：

防止APDIV重叠的含义、Z轴值和层叠关系、嵌套的APDIV等，这些是比较容易出错的问题。

将这些问题进行强调和比较，用通俗易懂的语言向学生讲解，通过演示帮助学生理解，提高学生自主学习和解决问题的能力。

不足之处：

课堂气氛不够活跃。

《网页制作》课程教案

课题章节/名称

CSS布局

课时

2

主要教学方法

四步教学法

教

学

目

标

知识目标

（1）理解内边距和外边距的区别。

（2）CSS浮动和清理浮动的含义。

（3）掌握内边距和外边距的设置方法。

（4）掌握一列、两列和多列居中的设置方法。

能力目标

（1）能够使用DreamweaverCS6进行CSS布局。

（2）能够不断学习、触类旁通。

（3）能够解决软件使用过程中遇到的问题。

情感目标

（1）具有勤奋学习的态度，严谨求实的工作作风。

（2）具有良好的心理素质和职业道德素质。

（3）具有一定的科学思维方式和判断分析问题的能力。

（4）具有良好的软件应用与解决问题的能力。

教学

重点

与

难点

重点

（1）CSS浮动和清理浮动的理解。

（2）一列、两列和多列居中的设置方法。

难点

（1）CSS浮动和清理浮动的理解。

媒体教具（或主要工具材料等）

课本、PPT、素材和DreamweaverCS6

教学过程

修改栏（时间分配）

教学内容

师生互动

1.复习上一堂课的知识、介绍本章的主要内容及重难点。

2.介绍CSS盒模型.修改内边距和外边距不会影响内容区域的尺寸——以本章index.html中的#photo为例。

3.介绍

（1）内边距、

（2）边框、（3）外边距。

4.7.3.2CSS定位1.CSS浮动。

2.清理浮动。

用CSSDW.html文档来演示。

文件分发，学生对照书本和WORD进行操作练习（p124-128）。

5.7.3.3CSS布局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