第7次课 任务案例：HTML基础网页（教案）《电子商务网页设计与制作》（电子工业出版社）

授课章节及主题 任务案例：HTML基础网页 课次 7 教学 目标 知识目标 1. 进一步熟悉常用的HTML各种元素的语法； 2. 进一步掌握常用的HTML各种元素的使用方法； 能力目标 1. 能够制作一些简单的网页效果； 2. 培养解决实际问题的能力； 素养目标 1. 培养学生清晰有序的逻辑思维； 2. 培养学生数据分析与总结的意识； 3. 培养学生系统分析与解决问题的能力。 学情 分析 知识基础 学生已经具备了一定的计算机操作能力和Photoshop、Dreamweaver软件的基本操作技能，对网页设计有一些基本的了解，能够创建站点和网页文件，能进行简单的网页编辑。 学生特点 1.学生爱学习爱思考爱表达，喜欢动手实践，但学生自律性不强，遇到困难时畏难。 2．软件课程知识绝大部分同学掌握较好，少部分同学操作不太熟练。 3．解决复杂问题能力弱，缺乏知识迁移能力。 教学 重点 Html元素在使用过程的综合运用 教学 难点 Html元素在使用过程的综合运用 教学 方法 讲授法 案例演示法 讨论法 实践法 线上线下混合式 教学资源与平台 教学平台 超星学习通https://www.xueyinonline.com/detail/221724252 参考书 1.《电子商务网页设计与制作》，电子工业出版社 2.《HTML5+CSS3网页设计与制作》，人民邮电出版社 参考网络资源 1.菜鸟教程：https://www.runoob.com/ 2.虎课网：https://huke88.com/ 教学过程设计 环节 教学内容 教师活动 学生活动 知识回顾（10min） 1、先选人再抢答：下图中的代码的预览的效果是（ ） A. B. C. 2、 先选人再抢答：下列哪个不是块级元素？ A. br B.div C.hr 3、先选人再抢答：<h2 align=”center”>html5的概念</h2> 是什么意思？ 4、先选人再抢答：什么是空链接？ 5、先选人再抢答：设置10秒钟刷新一次网页的代码是什么？请拍照回复。 6、先选人再抢答：在图像“p1.jpg”前插入名为itop的锚记，请写出代码，拍照回复。 7、先选人再抢答：要访问index.html文件中命名锚记itop, 请写出代码，拍照回复。 8、先选人再抢答：单击“学院官网”文本后在新窗口中打开“http://www.hnswxy.com”页面。 1.【课堂活动】教师通过开展各种课堂活动回顾上次课知识点。 1.学生积极参与课堂活动。 任务描述 （10min） 本任务是利用图片“html5logo.jpg”，添加文字信息，制作如图1-3-1所示的网页效果，以文件htmlExample.html保存。 图1-3-1 网页预览效果 1. 【任务描述】讲师讲解本次课需要完成的任务。 2.【课堂讨论】：请列举出在任务3 HTML5基础网页中，包含了哪些HTML元素？ 1.学生了解本次课要完成的任务。 2.学生积极参与课堂活动。 技能训练（35min） 组织学生一起实施项目任务： （1）创建站点 （2）创建空白文档 （3）网页添加头部信息 （4）网页添加header区块对象 （5）给网页添加content区块对象 （6）给网页添加footer区块对象 1.【发布任务】教师在学习通发布技能任务。 2.【实践指导】来回巡视，及时帮助学生解决问题。 1.学生查看技能训练任务。 2.完成技能训练题。 知识检测（30min） 1.【课堂活动】教师通过开展各种课堂活动检测本次课知识点。 1.学生积极参与课堂活动。 课堂小结（3min） 通过对本次课的学习，让学习者了解了HTML的各个常见元素。HTML是网页设计的核心基础，请学习者真正理解每一个标签的含义与使用方法。 作业布置 1.继续完成技能训练任务，并提交至学习通 2.预学下一次课的内容 教学反思 学科网（北京）股份有限公司 $$