第7课网页文本、图像与多媒体( 一 ）（教案）-《网页设计与制作案例教程（第2版）》同步教学（航空工业出版社）

课题 网页文本、图像与多媒体( 一 ） 课时 2课时（90 min） 教学目标 知识技能目标： （1）熟悉文本标签的基础知识 （2）能够在网页中添加文本 （3）能够设置文本样式 （4）能够使用Dreamweaver CC为网页添加文本与特殊字符，并设置样式 思政育人目标： （1）掌握使用Dreamweaver CC丰富网页内容的方法，提升工作能力。 （2）通过学习文本、图像及多媒体元素的使用方法，明白各种事物都有其独特的功能性。 教学重难点 教学重点：文本标签的基础知识 教学难点：使用Dreamweaver CC为网页添加文本与特殊字符，并设置样式 教学方法 情景模拟法、问答法、讨论法、练习法 教学用具 电脑、投影仪、多媒体课件、教材 教学设计 第1节课：课前任务→ 考勤（2 min）→ 问题导入（5 min）→传授新知（23 min）→小组互助（15 min） 第2节课： 任务实施（25 min）→ 实践探索（15 min）→ 课堂小结（3 min）→ 作业布置（2 min） 教学过程 主要教学内容及步骤 设计意图 第一节课 课前任务 · 【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过文旌课堂APP，查阅资料，了解在Dreamweaver CC中如何添加文本 · 【学生】按照教师要求完成课前任务 通过课前的预热，让学生了解所学软件，激发学生的学习欲望 考勤 （2 min） · 【教师】使用文旌课堂APP进行签到 · 【学生】按照老师要求签到 培养学生的组织纪律性，掌握学生的出勤情况 问题导入 （5 min） · 【教师】提出以下问题： 在网页中文本由什么组成？ · 【学生】思考、举手发言 通过问题导入，引导学生思考，调动学生的主观能动性，了解本节课要学习的内容 传授新知 （23 min） · 【教师】通过学生的发言，引入新的知识点，介绍在网页中添加文本和特殊字符，并设置文本样式的方法 一、添加文本 【教师】展示利用Dreamweaver CC添加文本的样式，帮助学习理解 1．段落标签 在HTML5中，使用<p>标签标记段落文本，该标签通常用于标记正文形式的文本。虽然使用其他标签也能实现段落文本的显示效果，但是不建议使用，因为可能会妨碍搜索引擎的识别。 2．标题标签 HTML5中提供了6个级别的标题，可用<h1>～<h6>标签来标记。其中，<h1>的标题级别最高，<h6>的标题级别最低。默认情况下，这些标签都具有字体加粗效果，并根据标题级别的降低，依次减小字号 （详见教材） 3．文本格式化标签 【教师】根据教材步骤演示使用Dreamweaver CC添加文本格式化标签的方法 （1）打开本书配套素材，右击“ex1.html”文件，在弹出的快捷菜单中选择“打开方式”→“Adobe Dreamweaver 2020”选项，在Dreamweaver CC中打开该文件。 （2）将鼠标指针置于任一文本标签中，单击“窗口”→“属性”菜单，打开“属性”窗格 （3）单击其中的“粗体”按钮 ，即可在代码中插入<strong>标签，在标签内输入“粗体”；单击“斜体”按钮 ，即可在代码中插入<em>标签，在标签内输入“斜体”。将网页保存后，按“F12”键进行预览。 （详见教材） 【学生】观察、记录、理解 【教师】利用多媒体辅助讲解常用的其他格式化标签 （1）上下标。上标与下标是很重要的排版格式，在HTML5中，分别使用<sup>与<sub>标签来标记上标文本与下标文本。上标文本比主体文字稍高，常见的上标有指数、商标符号等；下标文本比主体文字稍低，常见的下标有脚注、化学符号脚标等。 （2）插入与删除文本。在HTML5中，分别使用<ins>与<del>标签标记插入与删除的文本。默认情况下，<ins>标签中的文本会添加下划线效果，<del>标签中的文本会添加删除线效果。 （3）突出显示文本。在HTML5中，使用<mark>标签标记页面中需要突出显示的文本内容。默认情况下，标签中的文本会添加黄色背景。 （4）注音。在HTML5中，使用<ruby>标签为字符添加注音（也称旁注）。注音是东亚语言（如中文或日文）中的一种惯用符号，一般位于要标注字符的上方或右侧。<ruby>标签在使用时需要与<rt>标签连用，<rt>标签标记字符需要标注的注音内容。 （详见教材） 二、添加特殊字符 【教师】根据教材步骤演示使用Dreamweaver CC添加特殊字符的方法 在网页中编辑文本时，有时可能会遇到一些无法直接输入的字符，如版权符号“©”、注册商标符号“®”等。这时可以使用Dreamweaver CC的插入功能添加对应字符，具体的方法为，将插入点置于想要插入字符的标签中，打开“插入”面板，单击“字