《网页设计与制作案例教程（第2版） 》教案 第7课 网页文本、图像与多媒体（一）

7第课7第课网页文本、图像与多媒体（一）（一）网页文本、图像与多媒体（一）网页文本、图像与多媒体第课7PAGE4PAGE4PAGE3PAGE37第7第课网页文本、图像与多媒体（一） 课题网页文本、图像与多媒体(一）课时2课时（90min）教学目标知识技能目标：（1）熟悉文本标签的基础知识（2）能够在网页中添加文本（3）能够设置文本样式（4）能够使用DreamweaverCC为网页添加文本与特殊字符，并设置样式思政育人目标：（1）掌握使用DreamweaverCC丰富网页内容的方法，提升工作能力。（2）通过学习文本、图像及多媒体元素的使用方法，明白各种事物都有其独特的功能性。教学重难点教学重点：文本标签的基础知识教学难点：使用DreamweaverCC为网页添加文本与特殊字符，并设置样式教学方法情景模拟法、问答法、讨论法、练习法教学用具电脑、投影仪、多媒体课件、教材教学设计第1节课：传授新知（23min）小组互助（15min）第2节课：

任务实施（25min）

实践探索（15min）

课堂小结（3min）

作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过文旌课堂APP，查阅资料，了解在DreamweaverCC中如何添加文本【学生】按照教师要求完成课前任务通过课前的预热，让学生了解所学软件，激发学生的学习欲望考勤

（2min）【教师】使用文旌课堂APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入

（5min）【教师】提出以下问题：在网页中文本由什么组成？【学生】思考、举手发言通过问题导入，引导学生思考，调动学生的主观能动性，了解本节课要学习的内容传授新知

（23min）【教师】通过学生的发言，引入新的知识点，介绍在网页中添加文本和特殊字符，并设置文本样式的方法一、添加文本【教师】展示利用DreamweaverCC添加文本的样式，帮助学习理解1．段落标签在HTML5中，使用<p>标签标记段落文本，该标签通常用于标记正文形式的文本。虽然使用其他标签也能实现段落文本的显示效果，但是不建议使用，因为可能会妨碍搜索引擎的识别。2．标题标签HTML5中提供了6个级别的标题，可用<h1>～<h6>标签来标记。其中，<h1>的标题级别最高，<h6>的标题级别最低。默认情况下，这些标签都具有字体加粗效果，并根据标题级别的降低，依次减小字号（详见教材）3．文本格式化标签【教师】根据教材步骤演示使用DreamweaverCC添加文本格式化标签的方法（1）打开本书配套素材，右击“ex1.html”文件，在弹出的快捷菜单中选择“打开方式”→“AdobeDreamweaver2020”选项，在DreamweaverCC中打开该文件。（2）将鼠标指针置于任一文本标签中，单击“窗口”→“属性”菜单，打开“属性”窗格（3）单击其中的“粗体”按钮，即可在代码中插入<strong>标签，在标签内输入“粗体”；单击“斜体”按钮，即可在代码中插入<em>标签，在标签内输入“斜体”。将网页保存后，按“F12”键进行预览。（详见教材）【学生】观察、记录、理解【教师】利用多媒体辅助讲解常用的其他格式化标签（1）上下标。上标与下标是很重要的排版格式，在HTML5中，分别使用<sup>与<sub>标签来标记上标文本与下标文本。上标文本比主体文字稍高，常见的上标有指数、商标符号等；下标文本比主体文字稍低，常见的下标有脚注、化学符号脚标等。（2）插入与删除文本。在HTML5中，分别使用<ins>与<del>标签标记插入与删除的文本。默认情况下，<ins>标签中的文本会添加下划线效果，<del>标签中的文本会添加删除线效果。（3）突出显示文本。在HTML5中，使用<mark>标签标记页面中需要突出显示的文本内容。默认情况下，标签中的文本会添加黄色背景。（4）注音。在HTML5中，使用<ruby>标签为字符添加注音（也称旁注）。注音是东亚语言（如中文或日文）中的一种惯用符号，一般位于要标注字符的上方或右侧。<ruby>标签在使用时需要与<rt>标签连用，<rt>标签标记字符需要标注的注音内容。（详见教材）二、添加特殊字符【教师】根据教材步骤演示使用DreamweaverCC添加特殊字符的方法在网页中编辑文本时，有时可能会遇到一些无法直接输入的字符，如版权符号“©”、注册商标符号“®”等。这时可以使用DreamweaverCC的插入功能添加对应字符，具体的方法为，将插入点置于想要插入字符的标签中，打开“插入”面板，单击“字符”按钮，在展开的列表中选择对应符号即可。如果还需要其他更多的字符可以选择“其他字符”选项，打开“插入其他字符”对话框，选择对应字符，然后单击“确定”按钮（详见教材）【学生】观察、记录、理解三、设置文本样式【教师】展示DreamweaverCC的文本设置区，辅助学习理解（1）color属性用于设置文本颜色。属性值即要设置的颜色值，它可以是HTML预设的颜色名称，也可以是数值。（2）font-family属性用于设置文本的字体样式。属性值即为字体样式名称，当字体样式名称为中文时需要用双引号引起来；为英文时直接声明即可。（3）font-style属性用于设置文本的字体风格。（4）font-weight属性用于设置文本的字体粗细。（5）font-size属性用于设置文本字号。（6）line-height属性用于设置文本的行高。（7）text-align属性用于设置文本的水平对齐方式。（8）text-decoration属性用于设置文本划线。（9）text-indent属性用于设置文本的缩进。（10）text-shadow属性用于设置文本阴影。（详见教材）【课堂互动】教师提出以下问题：在DreamweaverCC中如何设置文本的重叠效果？【学生】聆听、思考、举手回答【教师】对学生的回答进行总结行高的属性值小于100%时，将产生文本重叠效果，属性值为0时表示没有行高，即完全重叠。【教师】提出以下学习任务：根据本节课学过的内容，通过实践探索在DreamweaverCC中添加文本及改变文本样式的方法【学生】思考、练习、上机操作【学生】聆听、思考、记忆通过讲解，让学生了解如何使用DreamweaverCC添加文本并设置样式小组互助（15min）【教师】组织学生以小组为单位，制作文本重叠效果【学生】阅读、思考、上机操作，由组内最先完成操作的学生帮助其他学生完成操作【教师】进行巡视，解答学生的问题以学生为主体，针对学生接受能力的差异性，让优秀学生带动其他学生掌握知识点第二节课实践探究

（25min）【教师】演示使用DreamweaverCC制作“传承经典网”主页的“诗词佳作”模块的操作，并对其进行分析（1）继续在项目三任务二任务实施创建的文档中操作，或用本书配套素材“项目四”→“任务一”→“Sculture”文件夹中的文件替换本地磁盘中站点文件夹中的文件。（2）打开index.html网页文档，将插入点置于<main>→<divclass="sheet_2">→<divclass="poetry">→<divclass="con">标签中；单击“插入”面板中的“标题：H1”按钮，插入一个<h1>标签，并在标签中输入“将进酒（节选）”；然后在“将”文本后手动输入“¹”代码，在“酒”文本后手动输入“²”代码。（3）在<h1>标签末尾换行，单击“插入”面板中“标题：H1”按钮左侧的三角按钮，在展开的列表中选择“H2”选项，插入一个<h2>标签，在其中输入“李白[唐代]”，并为该标签添加类属性class，属性值为poe_1。（4）使用同样方法继续添加剩余文本标签（5）添加.poetry.consup选择器，设置上标文本的样式。将鼠标指针移动至代码首行的<sup>标签中，单击“CSS设计器”面板“选择器”窗格左侧的加号按钮，此时自动添加一个选择器“.conh1sup”，但是这个自动添加的选择器不符合我们的要求，我们需要设置整段文本代码中的所有<sup>标签，所以还需要手动将其更改为“.poetry.consup”。（6）添加.poetryh1选择器，设置诗文标题的样式。双击“布局”设置区中margin属性下的矩形上边，在输入框中输入“5px”，再双击下边，在输入框中输入“10px”，设置上下外边距。（7）添加.poetry.poe_1选择器，设置诗人名的字体样式。（8）poe_1~p选择器，设置诗文内容的字体样式。（9）添加.poetry.poe_2选择器，设置注释标题的样式。（10）添加.poe_2~p选择器，设置注释文本。（11）添加.poe_2~pspan选择器，设置注释文本中诗文的文本样式。（详见教材）【学生】观察、记录、理解，上机操作【教师】巡堂指导，及时解决学生的问题通过任务实施，让学生们主动参与学习，熟悉使用

DreamweaverCC在网页中添加文本，以及设置文本样式的步骤实践探索

（15min）【教师】组织学生使用DreamweaverCC在网页中添加更多文本，并设置不同的文本样式【学生】聆听、理解、上机操作【教师】巡堂指导，及时解决学生的问题通过实践探索，使学生进一步巩固所学知识，了解更多关于网页添加文本的知识课堂小结

（3min）【教师】简要总结本节课的要点本节课了解了在网页中如何添加文本和特殊符号以及如何设置文本样式。希望大家在课下多加练习，熟悉如何利用DreamweaverCC在网页中添加文本和设置样式的操作。【学生】总结回顾知识点总结知识