任务2搭建简单学院网站1电子教案 Web前端开发案例教程（HTML5+CSS3）中职 高三 工信版
2023-03-14
|
9页
|
131人阅读
|
2人下载
普通
内容正文：
教案名称
任务2 搭建简单学院网站
计划学时
12学时
学习目标
掌握HTML5的基本结构
熟悉常用的HTML文本标记、列表标记、超链接标记、图像标记
会熟练使用HTML标记创建简单网页
素质目标
在编写代码中养成精益求精的工匠精神
通过案例融入价值观塑造
教学重点
HTML5文档基本结构
HTML文本标记、列表标记、超链接标记、图像标记
教学难点
使用HTML标记创建简单网页
教学模式
任务驱动教学法
线上+线下混合教学模式
教学活动及主要环节
思政元素
切入点
第1、2学时
( HTML文本标记)
课前发布任务：
观看学习通平台相关学习视频。
做课前测试题。
I.学生讨论：（10分钟）
使用HBuilder新建HTML5默认文档时，HTML5文档的基本格式包括哪些标记？每个标记的作用是什么？
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
</body>
</html>
II.重难点内容讲授：
一、HTML文本标记 （40分钟）
1.标题标记（实现example02.html）
2. 段落标记（实现example03.html）
3. 水平线标记（实现example04.html） 单标记
4. 换行标记 重点强调单标记（实现example05.html）
5. 字体样式标记（实现example06.html）
6. 特殊字符（实现example07.html）
（教师多媒体演示、学生一起操作，实现教学做一体化）
二、【任务实现】学院简介页面制作 （15分钟）
效果图如下：
1、 代码如下：
2、
三、练习：制作自己的个人介绍页面。（20分钟）教师巡视，答疑
III.课堂小结： （5分钟）
本次课介绍了HTML文本标记及利用HTML文本标记创建简单的学院简介页面。
课后作业：
1.课后实训2
2.超星学习通平台作业
第3、4学时
（HTML列表标记）
课前发布任务：
观看学习通平台相关学习视频。
做课前测试题。
I.学生讨论：（10分钟）
问题：为什么要学习各种列表标记？各种列表标记之间又有什么区别？
II.讲授重难点内容：
一、无序列表 （10分钟）
对“无序列表”的概念、基本语法格式及常用属性值进行讲解，并列举网页中常见的例子进行说明，进行代码演示。
（学生同步操作，教师巡视，答疑）
强调：定义“无序列表”时需要注意的问题。
二、有序列表 （10分钟）
对“有序列表”的概念、基本语法格式及常用属性值进行讲解，并列举网页中常见的例子进行说明，进行代码演示。
（学生同步操作，教师巡视，答疑）
强调：定义“有序列表”时需要注意的问题。
三、列表的嵌套应用 （15分钟）
打开浏览器，输入淘宝网址，对“列表嵌套”在网页中的常见效果进行展示，进行讲解。代码演示嵌套应用。
强调：定义“列表嵌套”时需要注意的问题
（学生一起操作，教师巡视，答疑）
四、【任务实现】学院新闻页面制作 （35分钟）
【实现步骤】
1、新建网页
打开HBuilder创建项目，在项目名称上右击，选择“新建”|“html文件”，在“新建html文件”对话框中输入文件名称：news.html，单击“创建”按钮，创建文件。
2、分析页面效果，该页面主要由标题和列表文字组成。标题文字使用<h2>，列表文字使用<ul>，编写源码如下。
3、保存文件 Ctrl+S
4、浏览网页 Ctrl+R
同步练习：使用列表标记列出你的家乡特产。
III．课堂小结： （10分钟）
掌握有序列表、无序列表、列表嵌套以及自定义列表标记的使用，最常用的是无序列表和无序列表嵌套。
课后作业：
超星学习通平台作业。
预习：
HTML超链接标签、图像标签
第5、6学时
（创建超链接、锚点链接）
课前发布任务：
观看学习通平台相关学习视频。
做课前测试题。
I.导入新课：（10分钟）
创建超链接的学习中，你遇到了哪些问题？如何解决的？
II.重难点内容讲授：
一、超链接标签 （45分钟）
1、超链接标签的语法格式：
<a href="目标地址" target="目标窗口" title="提示文字">热点文字</a>
（操作演示讲解超链接标签的各个属性，学生同步练习）
2、超链接的几种形式：
· 页面间的超链接：该链接指向当前页面以外的其他页面，单击该链接将完成页面之间的跳转。
实例讲解
（学生同步操作，教师巡视，答疑）
· 锚点链接：该链接指向页面内的某一个地方，单击该链接可以完成页面内的跳转。
（师生互动：列举网页浏览需求，引入特殊链接--锚点链接，用户能够快速定位到目标内容）
锚点链接创建步骤
资源预览图
1
2
3
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。