课题第5课超链接、表格课时2课时（90 min）
教学目标知识技能目标：
（1）掌握超链接标签的使用方法，熟悉不同类型的超链接（2）掌握表格标签的使用方法，熟悉表格的常用属性
素质目标：
（1）增加知识储备，规范编码习惯，提升职业素养（2）锻炼思维方式，加强实践练习，提升专业技能
教学重难点教学重点：超链接标签、表格标签的使用方法；教学难点：表格的常用属性
教学方法问答法、讨论法、讲授法、实践练习法、演示法教学用具电脑、投影仪、多媒体课件、教材、
教学设计第1节课：课前任务→考勤（2 min）→问题导入（3 min）→传授新知（25 min）→实战演练（15min）→实战拓展（8min）
第2节课：效果导入（2 min）→传授新知（23 min）→实战演练（15 min）→课堂小结（3 min）→教学反思（2min）
教学过程主要教学内容及步骤设计意图
第一节课
课前任务【教师】布置课前任务，将课程素材放到APP或其他学习软件，和学生负责人取得
联系，把学生分为5个队，让其提醒同学下载素材，提前预习第4.1超链接课程，每
个队负责一个模块（图像链接、下载链接、锚点链接、链接、图像热点链
接），每个队抽人上课进行讲解
【学生】完成课前任务
通过课前任务，
分队伍布置任务，
增加学生的团队
精神，以任务驱动
法，激发学生的内
在学习动力
考勤（2 min）【教师】使用APP进行签到
【学生】按照老师要求签到
培养学生的组
织纪律性，掌握学
生的出勤情况
问题导入（3min）【教师】提出问题
超链接的全称为超文本链接，是HTML5提供的一个强大且有价值的功能，也是
实现网站功能必不可少的元素。一个网站含有许多页面，使用超链接可以实现从一个
页面跳转到另一个页面，或从页面的一个位置跳转到另一个位置。
同学们知道怎么在网页上设置超链接么？超链接有哪些类型？
【学生】思考、举手回答
【教师】通过学生的回答引入要讲的知识
通过问题导入
的方法，引导学生
主动思考，激发学
html href属性生的学习兴趣
传授新知（25 min）4.1 超链接
4.1.1 超链接标签
通过翻转课堂
的形式，调动学生
学习的积极性，活
【教师】讲解超链接标签的使用方法，并通过案例演示效果
在HTML5 中，使用<a>标签标记超链接，具体格式为：……（详见教材）
【课堂拓展】
<a>标签必须设置href 属性，如果暂时还未确定链接的目标地址，可以将该属性值设置为#（如href="#"），……（详见教材）
除了href 属性外，<a>标签还有一个常用的属性target，……（详见教材）
【例4-1】设置超链接并使用不同的方式打开目标资源……（详见教材）
<a>标签中的载体可以是文本、图像或内容块等，但不能是其他链接、音频、视频等交互式内容。<a>标签中的载体可以是文本、图像或内容块等，但不能是其他链接、音频、视频等交互式内容。
【例4-2】以内容块为载体设置超链接……（详见教材）
【学生】聆听、记录、理解、观看效果
4.1.2 常见超链接类型
【教师】让每个队推选一个同学上台进行讲解和演示，让学生通过讲解案例引入图像链接、下载链接、锚点链接、链接和图像热点链接的标签的概念讲解，之后老师进行补充和点评
超链接除了可以链接到网页外，还可以链接到其他目标资源。因此，除了网页链接外，常见的超链接类型还有图像链接、下载链接、锚点链接、链接和图像热点链接等。
1．图像链接
图像链接是指链接到图像文件的超链接，即href 属性值为图像文件路径，如href="img/ p2.jpg"，鼠标单击图像链接后可在浏览器中全屏查看所链接的图像文件。
【例4-3】设置图像链接……（详见教材）
2．下载链接
下载链接是指可以将链接的文件下载至本地计算机的超链接。若链接的文件不能被浏览器解析（如压缩文件），则只需将href 属性值设置为链接文件的路径，如href=" img/test.zip"，……（详见教材）
【例4-4】设置下载链接……（详见教材）
【课堂拓展】
在浏览器中直接打开本地网页文件无法查看含有download 属性的下载链接效果，需要使用HBulider X 以本地网站的形式打开网页文件，才能查看该下载链接的效果。需要注意的是，目前仅Chrome 浏览器与火狐浏览器支持download 属性。
3．锚点链接
锚点链接是指向同一页面或其他页面中特定元素的链接。例如，可以在篇幅较长的网页底部设置一个返回顶部的锚点链接，用户单击该链接可以快速跳转到网页顶部，从而减少移动滚动条的麻烦。在网页中添加锚点链接需要执行两步操作。
（1）创建锚点……（详见教材）跃课堂氛围，锻炼学生的表达能力，更好的掌握超链接标签的使用方法
（2）添加链接……（详见教材）
【例4-5】制作分类相册……（详见教材）
【课堂拓展】
为了更好地展示页面效果，本例在<head>标签中添加了<style type="text/css">…</style>标签，并在其中输入代码img{width:500px;height:300px;}，统一设置HTML 文档中图像元素的宽度与高度。
4．链接
使用链接可以打开浏览器默认的应用程序，收件人的邮件地址由链接指定，无须手动输入。
链接的href 属性值为……（详见教材）
【例4-6】设置链接……（详见教材）
5．图像热点链接
图像热点链接是指在图像上创建多个热点区域并分别为这些区域设置不同的超链接，鼠标单击热点区域后可跳转到不同的目标资源。使用这种方法可以为图像的局部区域设置链接，或根据需要为一个图像设置多个链接。
制作图像热点链接一般需要执行3 步操作。
……（详见教材）
【例4-7】设置图像热点链接……（详见教材）
【学生】上台讲解、讨论、聆听、记录、理解、观看效果
实战演练（15min）
制作“金企鹅教育”网站主页的导航栏
【教师】介绍制作“金企鹅教育”网站主页的导航栏项目的重点部分和容易出错的
地方并演示，要求学生制作该项目，遇到不会的问题可以扫描微课二维码观看视频”
制作“金企鹅教育”网站主页的导航栏“（详见教材），可以互相讨论或询问老师
“金企鹅教育”网站主页的导航栏用于连接网站其他页面，下面使用无序列表和超
链接制作导航栏。
步骤1 在HBuilder X 中导入本书配套素材“素材与案例\第4章\实战演练
\4.1\Jinqie Project”文件夹，然后打开“index.html”文档。
步骤2 添加导航栏列表。使用无序列表在“index.html”文档中表示导航栏区块的
<nav id="index_nav">…</nav>标签中的<img class="fl nav_logo" src="img/logo_1.png"/>标
签下面添加导航栏列表，代码如下：
……（详见教材）
步骤3 为导航栏列表添加超链接。使用<a>标签为导航栏中的列表项添加超链
接，……（详见教材）
步骤4链接CSS 样式表文件。在标签<head>…</head>中添加以下代码，链接
CSS样式表文件“index.css”，……（详见教材）
【学生】观看效果、聆听要求、制作项目、观看微课、讨论
通过制作“金企
鹅教育”网站主页
的导航栏，使学生
巩固所学知识，锻
炼动手操作能力
第二节课
效果导入（2 min）
【教师】通过展示多个有丰富表格的网页，引入新课
在人们的日常工作和生活中，表格是用来组织和管理数据的重要工具，其应用形式
多种多样，如日历表、课程表、工资表等。在网页中，表格同样扮演着重要的角，使
用它可以清晰直观地展示各种数据与信息。
【学生】观看效果、聆听、理解
通过效果展示
的方法，直观地展
现有表格的网页，
引起学生学习兴
趣，引出新课
传授新知（20 min）
4.2 表格
4.2.1 表格的基本结构
【教师】讲解表格的基本结构，并演示例子
表格由行和列组成，它们的交点称为单元格，……（详见教材）
在HTML5 中，可以使用标签<table>、<tr>和<td>标记一个最基本的表格结构。其
中，<table>用于标记表格，<tr>用于标记表格的行，<td>用于标记表格行中的单元格，
具体格式为：……（详见教材）
在单元格中可以添加文本、图像等元素。默认情况下，单元格中的文本左对齐显示，
单元格的宽度根据文本长度自动调节。
1.表头
表头是对一组数据的概括或解释，表头信息可以方便用户理解表格数据的含义，提
高网页的可读性。在HTML5 中，使用<th>标签标记表头单元格，具体格式为：
……（详见教材）
【课堂拓展】
为了更好地展示页面效果，本例在<head>标签中添加了<style type="text/css">…
</style>标签，并在其中输入代码img{width:500px;height:300px;}，统一设置HTML 文
档中图像元素的宽度与高度。
2．标题
标题就是表格的名称，用于表明表格要表达的内容。在HTML5 中，使用<caption>
标签标记表格标题，具体格式为：……（详见教材）
【例4-8】制作电影佳作推荐表（以下提供部分代码），页面效果如图
……（详见教材）
【学生】观看效果、聆听、记录、理解
4.2.2 表格分组
【教师】讲解表格分组的两种方式，并演示例子
在实际应用中，可以根据需要将表格按行或列进行分组。
1．按行分组
……（详见教材）
【例4-9】制作第一季度工资单（以下提供部分代码），页面效果如图4-12 所
示。……（详见教材）
2．按列分组
通过讲解和课
堂互动，使学生掌
握表格的基本结
构和表格分组方
式、表格常用属性
当需要单独设置表格中某一列或多列的样式时，可以将表格按列分组。在HTML5 中，使用<col>标签对列进行分组，该标签必须包含在<table>标签中。
【课堂拓展】
HTML5 中还有一个与<col>标签功能相似的<colgroup>标签，它与<col>标签的用法基本相同，<col>标签可放在该标签中。目前只能为这两种标签设置宽度和背景颜两种样式。
【例4-10】制作高中课程表，利用<col>标签为表的多个列设置样式，……（详见教材）
【课堂拓展】
<col>标签是只包含属性的空标签，如需创建列，必须在<tr>标签中创建<td>标签。
……（详见教材）
【学生】回答、聆听、记录、理解
4.2.3 表格常用属性
【教师】讲解设置表格的整体边框、单元格内外边框、表格内外边框，以及单元格跨行、跨列显示等常用属性，并演示案例
1．整体边框与单元格内外边距
在HTML5 中，使用<table>标签的border 属性设置表格的整体边框，其属性值为数值（省略其单位“px
”）。
【例4-11】制作第二季度工资单，使用<table>标签的border 属性设置表格的整体边框……（详见教材）
在<table>标签中，使用cellpadding 和cellspacing 属性设置单元格的内外边距，属性值为数值（省略其单位“px”）。
……（详见教材）
【课堂拓展】
设置单元格内外边距时，一般不直接使用cellpadding 和cellspacing 属性，而是在CSS3 样式表中使用padding 和border-spacing 属性
2．表格内外边框
在HTML5 中，使用<table>标签的rules 属性设置表格的内边框，……（详见教材）在HTML5 中，使用<table>标签的frame 属性设置表格的外边框，……（详见教材）【例4-12】制作第三季度工资单，设置表格的内外边框，制作特殊的边框线效果，……（详见教材）
3．单元格跨行、跨列显示
<th>与<td>都是表示单元格的标签，设置它们的rowspan 或colspan 属性可以使单元格跨行或跨列显示，这两个属性的属性值为跨行或跨列的个数。
【例4-13】制作完整的高中课程表（以下提供部分代码），……（详见教材）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。