《中文版Dreamweaver网页制作案例教程[2021版]》教案 项目三 网页中的文本、图像与音视频.docx

PAGE8

PAGE8

PAGE9

PAGE9

课题

项目三网页中的文本、图像与音视频

课时

12课时（540min）

教学目标

知识技能目标：

（1）掌握在网页中添加文本、图像与音视频的方法

（2）掌握用于标记文本、图像与音视频的标签

（3）掌握文本样式与图像样式的设置方法

（4）能够使用Dreamweaver2021在网页中添加文本与特殊字符，并设置文本样式

（5）能够使用Dreamweaver2021在网页中添加图像，并设置图像样式。

（6）能够使用Dreamweaver2021在网页中添加音视频文件

素质目标：

（1）通过在网页中添加文本、图像及音视频，明白各种事物都有其独特的作用

（2）通过制作丰富的案例，提升实操能力

教学重难点

教学重点：在网页中添加文本、图像与音视频的方法，用于标记文本、图像与音视频的标签，文本样式与图像样式的设置方法

教学难点：在网页中添加文本与特殊字符，并设置文本样式；在网页中添加图像，并设置图像样式；在网页中添加音视频文件

教学方法

案例分析法、问答法、讨论法、讲授法

教学用具

电脑、投影仪、多媒体课件、教材

教学过程

主要教学内容及步骤

课前任务

【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，完成课前任务

请大家预习本节课内容，了解在网页中添加和设置文字、图像、音频、视频的方法。

【学生】完成课前任务

考勤

【教师】使用APP进行签到

【学生】班干部报请假人员及原因

互动导入

【教师】组织学生扫码观看“网页文本的设计要点”视频，并讨论以下问题：

（1）网页文本的设计要点有哪些？

（2）任选一种类型的网站，简述如何设计网页中的文本。

【学生】观看、思考、讨论、举手回答

【教师】总结学生的回答

传授新知

【教师】通过学生的回答，引入新知，讲解添加文本、添加特殊字符、设置文本样式的相关知识

一、添加文本

在网页中，文本主要包括标题、段落和一些具有特殊格式的文本。使用Dreamweaver2021可以在网页中添加不同的文本。

1．添加标题

【教师】利用多媒体展示“添加标题”图片（详见教材），并进行讲解

使用Dreamweaver2021的“插入”面板可以在网页中添加标题，具体操作方法是，首先确定添加标题的位置；然后在“插入”面板中单击“标题”下拉按钮，在展开的下拉列表中选择具体的标题标签（如“H6”）；最后输入标题内容。此时，“标题”按钮自动变为对应的标题标签按钮（如“标题∶H6”），单击该按钮会插入对应的标题标签（如h6）。

【教师】利用多媒体展示“各级标题的效果”图片（详见教材），并进行讲解

HTML5提供了6个标题标签h1～h6，分别用于标记不同级别的标题。其中，h1标签标记的标题级别最高，h6标签标记的标题级别最低。默认情况下，这些标签标记的标题都具有字体加粗效果，并随着标题级别的降低，字体大小依次减小。

【小贴士】

在一些网页中，标题就相当于网页内容的大纲，根据网页内容合理安排标题可以更清晰地表达出网页的整体内容。

2．添加段落

【教师】利用多媒体展示“添加段落”图片（详见教材），并进行讲解

使用Dreamweaver2021的“插入”面板可以在网页中添加段落，具体操作方法是，首先确定添加段落的位置；然后在“插入”面板中单击“段落”按钮；最后输入段落内容。

……（详见教材）

3．添加具有特殊格式的文本

【教师】利用多媒体展示“添加粗体文本与斜体文本”图片（详见教材），并进行讲解

在网页中，具有特殊格式的文本是指以粗体、斜体或下画线等效果显示的文本。使用Dreamweaver2021的“属性”面板可以在网页中添加具有特殊格式的文本，具体操作方法是，首先确定添加文本的位置；然后选择“窗口”/“属性”选项，打开“属性”面板；接着单击“粗体”按钮，添加以粗体显示的文本，按“F5”键后单击“斜体”按钮，添加以斜体显示的文本。

在HTML5中，使用strong标签标记的文本以粗体显示，使用em标签标记的文本以斜体显示。此外，HTML5还提供了许多文本格式化标签来标记不同的文本，可直接在代码视图中输入相关代码进行添加。

（1） sup标签与sub标签，分别用于标记上标文本与下标文本。上标文本的位置比主体文本稍高，常见的上标文本有指数、商标符号等；下标文本的位置比主体文本稍低，常见的下标文本有脚注、化学符号脚标等。

（2） ins标签与del标签，分别用于标记插入的文本与删除的文本。默认情况下，ins标签标记的文本底部会显示下画线；del标签标记的文本上会显示删除线。

（3） mark标签，用于标记需要突出显示的文本。默认情况下，mark标签标记的文本会显示黄色底纹