资源简介

教案名称 任务2 搭建简单学院网站 计划学时 12学时
学习目标 掌握HTML5的基本结构熟悉常用的HTML文本标记、列表标记、超链接标记、图像标记会熟练使用HTML标记创建简单网页
素质目标 在编写代码中养成精益求精的工匠精神通过案例融入价值观塑造
教学重点 HTML5文档基本结构HTML文本标记、列表标记、超链接标记、图像标记
教学难点 使用HTML标记创建简单网页
教学模式 任务驱动教学法 线上+线下混合教学模式
教学活动及主要环节 思政元素切入点
第1、2学时( HTML文本标记)课前发布任务：观看学台相关学习视频。做课前测试题。I.学生讨论：（10分钟）使用HBuilder新建HTML5默认文档时，HTML5文档的基本格式包括哪些标记？每个标记的作用是什么？II.重难点内容讲授：一、HTML文本标记 （40分钟）1.标题标记（实现example02.html）段落标记（实现example03.html）水平线标记（实现example04.html） 单标记换行标记 重点强调单标记（实现example05.html）字体样式标记（实现example06.html）特殊字符（实现example07.html）（教师多媒体演示、学生一起操作，实现教学做一体化）二、【任务实现】学院简介页面制作 （15分钟）效果图如下：代码如下： 三、练习：制作自己的个人介绍页面。（20分钟）教师巡视，答疑III.课堂小结： （5分钟）本次课介绍了HTML文本标记及利用HTML文本标记创建简单的学院简介页面。课后作业： 1.课后实训22.超星学台作业第3、4学时（HTML列表标记）课前发布任务：观看学台相关学习视频。做课前测试题。I.学生讨论：（10分钟）问题：为什么要学习各种列表标记？各种列表标记之间又有什么区别？ II.讲授重难点内容：一、无序列表 （10分钟）对“无序列表”的概念、基本语法格式及常用属性值进行讲解，并列举网页中常见的例子进行说明，进行代码演示。（学生同步操作，教师巡视，答疑）强调：定义“无序列表”时需要注意的问题。二、有序列表 （10分钟）对“有序列表”的概念、基本语法格式及常用属性值进行讲解，并列举网页中常见的例子进行说明，进行代码演示。（学生同步操作，教师巡视，答疑）强调：定义“有序列表”时需要注意的问题。三、列表的嵌套应用 （15分钟）打开浏览器，输入淘宝网址，对“列表嵌套”在网页中的常见效果进行展示，进行讲解。代码演示嵌套应用。强调：定义“列表嵌套”时需要注意的问题（学生一起操作，教师巡视，答疑）四、【任务实现】学院新闻页面制作 （35分钟）【实现步骤】1、新建网页打开HBuilder创建项目，在项目名称上右击，选择“新建”|“html文件”，在“新建html文件”对话框中输入文件名称：news.html，单击“创建”按钮，创建文件。2、分析页面效果，该页面主要由标题和列表文字组成。标题文字使用

，列表文字使用

，编写源码如下。3、保存文件 Ctrl+S4、浏览网页 Ctrl+R同步练习：使用列表标记列出你的家乡特产。III．课堂小结： （10分钟）掌握有序列表、无序列表、列表嵌套以及自定义列表标记的使用，最常用的是无序列表和无序列表嵌套。课后作业：超星学台作业。预习：HTML超链接标签、图像标签第5、6学时（创建超链接、锚点链接）课前发布任务：观看学台相关学习视频。做课前测试题。I.导入新课：（10分钟）创建超链接的学习中，你遇到了哪些问题？如何解决的？II.重难点内容讲授：一、超链接标签 （45分钟）1、超链接标签的语法格式：热点文字（操作演示讲解超链接标签的各个属性，学生同步练习）2、超链接的几种形式：页面间的超链接：该链接指向当前页面以外的其他页面，单击该链接将完成页面之间的跳转。实例讲解（学生同步操作，教师巡视，答疑）锚点链接：该链接指向页面内的某一个地方，单击该链接可以完成页面内的跳转。（师生互动：列举网页浏览需求，引入特殊链接--锚点链接，用户能够快速定位到目标内容）锚点链接创建步骤：第一步：定义锚点；第二步：创建指向锚点的链接。（针对“锚点链接”的作用及创建步骤进行讲解，代码演示说明）（学生一起操作，教师巡视，答疑）对“创建超链接”与“锚点链接”进行对比分析，并总结其注意事项。空链接：单击该链接时不进行任何跳转。热点文字二、练习：完成专业介绍页面。（30分钟）III.课堂小结：（5分钟）本次课介绍了超链接的语法格式、形式、利用超链接实现页面间、页面内的跳转。课后作业：超星学台作业第7、8学时图像标签、绝对路径课前发布任务：观看学台相关学习视频。做课前测试题。I. 讨论：（10分钟）在学习图像标记的过程中，你遇到了哪些问题？同学们讨论解决方法。II.重难点讲授：一、图像标签（20分钟）1. 语法格式：对“图像标记”及其属性进行讲解，代码演示说明。（学生一起操作，教师巡视，答疑）2. 绝对路径和相对路径通过文件夹的层级关系对“路径”进行讲解。展示PPT对“绝对路径”进行讲解，并举例说明。展示PPT对“相对路径”进行讲解，并通过“图像文件和html文件”的不同位置进行演示。（学生提问，教师答疑）图像标签应用（15分钟）学生同步练习。三、练习：制作一个图文并茂的个人介绍页面并展示 （40分钟）教师巡视答疑III.课堂小结： （5分钟）本次课学习了HTML5图像标记和路径的使用，重点掌握相对路径的表示方法。课后作业： 1.课后实训22.学台作业第9~10学时(任务实现：创建简单学校网站)按照课本2.3任务实现步骤，创建简单学校网站。一、创建项目（1）打开 HBuilderX 工具，选择“文件”｜“新建”选项，再选择“项目”选项，在“新建项目”对话框中输入项目名称 school，位置选择一个合适的位置，选择模板 “空项目”，单击“创建”按钮。（2）右击项目名称 school，选择“新建”|“目录”选项，创建目录 images，用于存放图像文件，把本任务提供的素材中的图像复制到该目录中。二、 创建网站各页面课后作业： 学台作业第11~12学时(实训：创建个人介绍网站)创意设计：创建一个个人网站项目，对自己进行全面介绍，要求如下。（1）包含一个主页和三个子页，主页和子页可以相互链接。（2）在主页中创建友情链接，链接到自己喜欢的两个网站。（3）至少有一个页面包含无序列表。（4）至少有一个页面包含锚点链接。（5）在每个页面中合理使用文字、图像等。课后作业： 学台作业 通过学台拓展阅读使学生了解HTML5标准规范的制定，激发同学们科技报国的雄心，增强使命担当意识。通过编写HTML5 代码，让学生了解代码书写要遵循规范，小错误可能会导致页面崩溃，要养成严谨细致的工匠精神。列表是一种有秩序的信息表现形式，在我们今天高度发达的文明社会中，讲文明，懂礼貌，识大局，懂规矩，遵守社会公共秩序 。引导学生热爱家乡、增加文化自信用蒂姆.伯纳斯.李的故事激发学习兴趣，引导学生立大志，实现人生价值。学生独立完成，遇到问题时先小组讨论，锻炼解决问题的能力。

展开更多......

收起↑