Web前端开发之网页设计 教案 单元2 HTML基础.docx

《Web前端开发之网页设计 教案 单元2 HTML基础.docx》由会员分享，可在线阅读，更多相关《Web前端开发之网页设计 教案 单元2 HTML基础.docx（7页珍藏版）》请在第一文库网上搜索。

1、Web前端开发之网页设计课程教学单元设计教学单元2HTM1基础授课教师：授课班级：学时：12教学条件预装Web前端开发工具HBUikIer等的计算机；局域网环境；教学广播软件教学索材教材、教学文档、教学课件、案例项目库、教学平台等教学目标设计知识目标：(1) HTM1基本概念(2) HTM1文档的基本结构(3) HTM1标签与元素(4)文本类标签的使用(5)图片及路径的使用(6)超链接的使用(7)列表的使用(8)表格的使用(9)表单的使用(10)容器与框架的使用能力目标：(1)了解HTM1的基本概念。(2)掌握HTM1常用标签的用法。能够使用文本类标签对HTM1文档中的文字排版设计。(4)能够

2、使用img标签加载图片。能够使用超链接标签实现跳转。(6)能够使用列表标签定义列表。能够使用表格展示数据。(8)能够使用表单控件设计表单。能够使用器与框架标签进行网页布局设计。教学内容(1) HTM1基本概念，HTM1文(2) HTM1标签与元素，HTM1(3)文本类标签的使用。(4)图片标签的使用。(5)超链接的使用。(6)列表标签的使用。表格标签的使用。(8)表单标签及表单控件的使用容器与框架标签的使用。档的基本结构。属性O重点,文字排版设计。(2)插入图片。(3)超链接的使用。(4)表格设计。表单设计。(6)DIV的使用。难点：(1)转义字符的含义。相对路径与绝对路劲。锚点超链接。单元格

3、的合并。(5)表单控件的使用。(6)DIV标签划分页面。教学过程设计任务2-1：了解HTM1(2学时)主要步骤教学内容教学方法教学手段师生活动任务引入什么是HTM1?教师讲授启发引入多媒体教师：问题提问学生：问题讨论知识讲解(1) HTM1的发展史(2) HTM1文档的基本结构(3) HTM1标签与元素(4) HTM1属性启发讲解讨论归纳多媒体课件演示教师：知识讲解学生：记录笔记师生互动交流示范操作操作1：创建HTM1文档。操作2：HTM1标签属性的使用。问题引导操作演示分析归纳多媒体系统演示老师：操作演示学生：观摩思考老师：归纳总结实战训练实战1：创建HTM1文档，设置head、bodyO实

4、战2：设置标签通用属性、专用属性、自定义属性值。动手实践做中学多媒体系统操作学生：实践操作老师：巡视检查评估讨论展示学生实战任务完成的效果。评估讨论实战任务完成的正确性。评估讨论实战任务完成的规范性；(4)记载学生实战认为完成的考核结果。教师启发讨论归纳分数激励实训项目单学生：演示交流老师：点评激励课堂总结(1)归纳总结HTM1文档的基本构成。归纳总结HTM1标签的语法格式。(3)归纳总结HTM1标签属性的使用。教师讲解多媒体课件演示学生：整理笔记老师：引导创新课后作业2.1在线练习作业练习在线练习平台老师：布置作业提出要求学生：完成作业任务2-2：掌握文本类标签的用法(2学时)主要步骤教学内

5、容教学方法教学手段师生活动任务引入HTM1文档中文本排版设计教师讲授启发引入多媒体教师：问题提问学生：问题讨论知识讲解(1)标题标签。段落标签。换行标签。(4)水平线文本格式化标签(6)转义字符启发讲解讨论归纳多媒体课件演示教师：知识讲解学生：记录笔记师生互动交流示范操作操作1：使用文本标签排版设计。问题引导操作演示分析归纳多媒体系统演示老师：操作演示学生：观摩思考老师：归纳总结实战训练实战1实战2实战3实战4实战5使用标题标签定义标题。使用段落与换行标签分段。创建水平线。格式化文本插入转义字符动手实践做中学多媒体系统操作学生：实践操作老师：巡视检查评估讨论展示学生实战任务完成的效果。评估讨论

6、实战任务完成的正确性。评估讨论实战任务完成的规范性；(4)记载学生实战认为完成的考核结果。教师启发讨论归纳分数激励实训项目单学生：演示交流老师：点评激励课堂总结归纳总结文本排版方法。(2)归纳总结文本格式化标签的作用。归纳总结常用转义字符的含义。教师讲解多媒体课件演示学生：整理笔记老师：引导创新课后作业2.2在线练习作业练习在线练习平台老师：布置作业提出要求学生：完成作业任务2-3：掌握图片、路径、超链接的用法(2学时)主要步骤教学内容教学方法教学手段师生活动任务引入HTM1中插入图片和链接教师讲授启发引入多媒体教师：问题提问学生：问题讨论知识讲解(1)图片标签。相对路径与绝对路径。(3)超链

7、接。(4)锚点图片超链接启发讲解讨论归纳多媒体课件演示教师：知识讲解学生：记录笔记师生互动交流示范操作操作1：绝对路径插入图片。操作2：相对路径插入图片。操作3：超链接使用操作4：锚点超链接使用。操作4：图片超链接。问题引导操作演示分析归纳多媒体系统演示老师：操作演示学生：观摩思考老师：归纳总结实战训练实战1：HTM1文档中插入图片。实战2：同一页面锚点超链接。实战3：不同页面锚点超链接。实战4：图片超链接。动手实践做中学多媒体系统操作学生：实践操作老师：巡视检查评估讨论展示学生实战任务完成的效果。评估讨论实战任务完成的正确性。评估讨论实战任务完成的规范性；(4)记载学生实战认为完成的考核结果

8、。教师启发讨论归纳分数激励实训项目单学生：演示交流老师：点评激励课堂总结相对路径与绝对路径的使用。(2)锚点的使用。教师讲解多媒体课件演示学生：整理笔记老师：引导创新课后作业2.3、2.4在线练习作业练习在线练习平台老师：布置作业提出要求学生：完成作业任务2-4：掌握列表及表格的用法(2学时)主要步骤教学内容教学方法教学手段师生活动任务引入HTM1中展示数据表教师讲授启发引入多媒体教师：问题提问学生：问题讨论知识讲解有序列表无序列表(3)定义列表表格启发讲解讨论归纳多媒体课件演示教师：知识讲解学生：记录笔记师生互动交流示范操作操作1：列表显示文本。操作2：表格显示数据。问题引导操作演示分析归纳

9、多媒体系统演示老师：操作演示学生：观摩思考老师：归纳总结实战训练实战1：有序列表显示文本。实战2：无序列表显示文本。实战3：定义列表显示文本。实战4：表格设计。动手实践做中学多媒体系统操作学生：实践操作老师：巡视检查评估讨论展示学生实战任务完成的效果。评估讨论实战任务完成的正确性。评估讨论实战任务完成的规范性；(4)记载学生实战认为完成的考核结果。教师启发讨论归纳分数激励实训项目单学生：演示交流老师：点评激励课堂总结归纳总结列表的种类。归纳总结表格包含的元素。(3)归纳总结单元格的合并方法。教师讲解多媒体课件演示学生：整理笔记老师：引导创新课后作业2.5、2.6在线练习作业练习在线练习平台老师

10、：布置作业提出要求学生：完成作业任务2-5：掌握表单的用法(2学时)主要步骤教学内容教学方法教学手段师生活动任务引入用户注册表单教师讲授启发引入多媒体教师：问题提问学生：问题讨论知识讲解表单的作用表单标签的属性表单控件启发讲解讨论归纳多媒体课件演示教师：知识讲解学生：记录笔记师生互动交流示范操作操作1：创建表单。操作2：表单控件的功能。操作3：用户注册表单设计。问题引导操作演示分析归纳多媒体系统演示老师：操作演示学生：观摩思考老师：归纳总结实战训练实战1：用户登录表单设计。实战2：用户注册表单设计。动手实践做中学多媒体系统操作学生：实践操作老师：巡视检查评估讨论展示学生实战任务完成的效果。评估

11、讨论实战任务完成的正确性。评估讨论实战任务完成的规范性；(4)记载学生实战认为完成的考核结果。教师启发讨论归纳分数激励实训项目单学生：演示交流老师：点评激励课堂总结归纳总结表单的作用。归纳总结表单标签的常用属性。归纳总结常用的表单控件的。教师讲解多媒体课件演示学生：整理笔记老师：引导创新课后作业2.7在线练习作业练习在线练习平台老师：布置作业提出要求学生：完成作业任务2-6：掌握容器与框架的用法(2学时)主要步骤教学内容教学方法教学手段师生活动任务引入DIV与CSS相结合实现效果教师讲授启发引入多媒体教师：问题提问学生：问题讨论知识讲解(1) DIV的功能。(2) span的功能。(3) if

12、rame的功能。启发讲解讨论归纳多媒体课件演示教师：知识讲解学生：记录笔记师生互动交流示范操作操作1：使用div实现页面布局。操作2：使用SPan进行文本修饰。操作3：使用iframe框架嵌入网页。问题引导操作演示分析归纳多媒体系统演示老师：操作演示学生：观摩思考老师：归纳总结实战训练实战1：使用DIV设计目录。实战2：使用span进行文本修饰。实战3：使用iframe嵌入网页。动手实践做中学多媒体系统操作学生：实践操作老师：巡视检查评估讨论展示学生实战任务完成的效果。评估讨论实战任务完成的正确性。评估讨论实战任务完成的规范性：(4)记载学生实战认为完成的考核结果。教师启发讨论归纳分数激励实训项目单学生：演示交流老师：点评激励课堂总结(1)归纳总结div的使用。归纳总结SPan的使用。(3)归纳总结iframer的使用教师讲解多媒体课件演示学生：整理笔记老师：引导创新课后作业2.8在线练习作业练习在线练习平台老师：布置作业提出要求学生：完成作业