网页设计与制作项目教程教学设计 项目2“旅行游记”页面制作

第1章PHP开篇PAGE16黑马程序员《网页设计与制作项目教程（HTML5+CSS3+JavaScript）》教学设计课程名称：授课年级：授课学期：教师姓名：年月课题名称项目2“旅行游记”页面制作计划课时6课时教学引入随着人们生活水平的提高，旅行成为越来越多人放松身心、增长见识的选择。最近，热爱旅游的小智想要制作一个“旅行游记”页面，用于完整记录自己的旅行故事，同时也能与志同道合的旅友们分享交流。由于之前没有接触过网页制作，因此小智决定先从HTML语法、基本格式、基础标签学起，等夯实基础后，再着手“旅行游记”页面的制作。教学目标使学生掌握HTML文档基本格式使学生了解HTML文档头部相关标签，及一些常用头部标签的作用使学生掌握图像标签的用法，能够制作图文混排页面使学生掌握HTML文本控制标签的用法，能够实现网页文字排版整齐、结构清晰使学生通过对HTML文档基本格式的学习，形成对HTML文档规范的清晰认知，培养严谨、遵循代码书写规范的职业素养使学生通过对图像标签和图文混排技术的学习，培养页面布局与设计能力教学重点HTML文档基本格式任务2-1认识HTML文本格式化标签特殊字符<div>标签常用图像格式教学难点任务2-1认识HTML文本格式化标签教学方式课堂教学以PPT讲授为主，并结合多媒体进行教学教学过程第一课时（HTML文档基本格式、HTML标签、HTML标签的属性、HTML标签的关系、HTML文档头部相关标签、任务2-1认识HTML）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课HTML作为一门标记语言，主要用来描述网页中的文字和图像等信息，目前HTML5已逐渐成为移动互联网的主流。但是什么是HTML，又该如何使用HTML标签控制网页中的文字和图像等信息呢？本节课将具体介绍HTML文档的基本格式、标签分类、标签属性等知识点。三、新课讲解知识点1-HTML文档基本格式教师通过PPT的方式讲解认识HTML文档基本格式。<!DOCTYPE><html><head><body>知识点2-HTML标签教师通过PPT的方式讲解认识HTML标签。双标签单标签注释标签知识点3-HTML标签的属性教师通过PPT的方式讲解认识HTML标签的属性。介绍HTML标签添加属性的基本语法。<标签名属性1="属性值1"属性2="属性值2"…>内容</标签名>知识点4-HTML标签的关系教师通过PPT的方式讲解认识HTML标签的关系。嵌套关系并列关系知识点5-HTML文档头部相关标签教师通过PPT的方式讲解认识HTML文档头部相关标签。<title><meta>知识点6-任务2-1认识HTML教师通过PPT的方式讲解任务2-1认识HTML。带领学生对HTML文档基本格式、HTML标签等知识进行讲解，使读者进一步认识HTML。四、归纳总结教师回顾本节课所讲的内容，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第二课时（页面格式化标签、文本格式化标签、特殊字符、任务2-2HTML文本控制标签）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课不管网页内容如何丰富，文字自始至终都是网页中最基本的元素。为了使文字排版整齐、结构清晰，HTML中提供了一系列文本控制标签，如<h1>～<h6>、段落标签<p>等。本节课将针对页面格式化标签、文本格式化标签、特殊字符知识点进行讲解。三、新课讲解知识点1-页面格式化标签教师通过PPT的方式讲解页面格式化标签。标题标签段落标签水平线标签换行标签知识点2-文本格式化标签教师通过PPT的方式讲解文本格式化标签。介绍常用的文本格式化标签。通过案例演示常用的文本格式化标签。知识点3-特殊字符教师通过PPT的方式讲解特殊字符。介绍HTML中特殊字符的代码。知识点4-任务2-2HTML文本控制标签教师通过PPT的方式讲解任务2-2HTML文本控制标签。带领学生对HTML文本控制标签进行。四、归纳总结教师回顾本节课所讲的内容，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第三课时（<div>标签、常用图像格式、图像标签、路径、任务2-3HTML图像应用）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课浏览网页时人们常常会被网页中的图像吸引，巧妙地在网页中使用图像可以让网页更为丰富多彩。本任务将通过常用图像格式、图像标签、路径（绝对路径和相对路径）知识点，详细讲解HTML中图像的应用。三、新课讲解知识点1-<div>标签教师通过PPT的方式讲解<div>标签。介绍什么是<div>标签。通过案例演示<div>标签的用法知识点2-常用图像格式教师通过PPT的方式讲解常用图像格式。GIFPNG格式JPEG格式WebP格式知识点3-图像标签教师通过PPT的方式讲解图像标签。（1）介绍图像标签的语法。<imgsrc="图像URL"/>（2）通过表介绍<img/>标签提供了其他的属性。（3）alt属性（4）width属性和height属性（5）title属性知识点4-路径教师通过PPT的方式讲解路径。绝对路径相对路径知识点5-任务2-3HTML图像应用教师通过PPT的方式讲解任务2-3HTML图像应用。带领学习认识常用图像格式、图像标签、路径。四、归纳总结教师回顾本节课所讲的内容，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第四课时（任务2-4页面建设准备工作、任务2-5制作头部模块、任务2-6制作游记模块、任务2-7制作页脚模块）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课浏览网页时人们常常会被网页中的图像吸引，巧妙地在网页中使用图像可以让网页更为丰富多彩。本任务将通过常用图像格式、图像标签、路径（绝对路径和相对路径）知识点，详细讲解HTML中图像的应用。三、新课讲解知识点1-任务2-4页面建设准备工作教师通过PPT的方式讲解任务2-4页面建设准备工作。（1）页面分析（2）页面布局知识点2-任务2-5制作头部模块教师通过PPT的方式讲解任务2-5制作头部模块。（1）效果分析（2）模块制作知识点3-任务2-6制作游记模块教师通过PPT的方式讲解任务2-6制作游记模块。（1）效果分析（2）模块制作知识点4-任务2-7制作页脚模块教师通过PPT的方式讲解任务2-7制作页脚模块。效果分析模块制作四、归纳总结教师回顾本节课所讲的内容，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第五、六课时（上机练习）上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错的内容进行练习，通过上机练习可以考察同学对知识点的掌握情况，对代码的熟练程度。上机一：（考察知识点为：任务2-4页面建设准