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

课题 网页文本、图像与多媒体( 二 ） 课时 2课时（90 min） 教学目标 知识技能目标： （1） 能够在网页中添加图像，并设置图像样式 （2） 能够在网页中设置元素的变形和过渡 （3） 能够在网页中设置元素的背景与阴影 （4） 能够使用Dreamweaver CC为网页添加图像并设置样式 思政育人目标： （1）掌握使用Dreamweaver CC丰富网页内容的方法，提升工作能力。 （2）通过学习文本、图像及多媒体元素的使用方法，明白各种事物都有其独特的功能性。。 教学重难点 教学重点：在网页中设置元素的背景与阴影 教学难点：使用Dreamweaver CC为网页添加图像并设置样式 教学方法 情景模拟法、问答法、讨论法、练习法 教学用具 电脑、投影仪、多媒体课件、教材 教学设计 第1节课：课前任务→ 考勤（2 min）→ 问题导入（5 min）→传授新知（23min）→小组互助（15 min） 第2节课：任务实施（25 min）→ 实践探索（15 min）→ 课堂小结（3 min）→ 作业布置（2 min） 教学过程 主要教学内容及步骤 设计意图 第一节课 课前任务 · 【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过文旌课堂APP，查阅资料，了解在Dreamweaver CC中如何添加图像 · 【学生】按照教师要求完成课前任务 通过课前的预热，让学生了解所学软件，激发学生的学习欲望 考勤 （2 min） · 【教师】使用文旌课堂APP进行签到 · 【学生】按照老师要求签到 培养学生的组织纪律性，掌握学生的出勤情况 问题导入 （5 min） · 【教师】提出以下问题： 使用Dreamweaver CC如何在网页中插入图像？ · 【学生】思考、举手发言 通过问题导入，引导学生思考，调动学生的主观能动性，了解本节课要学习的内容 传授新知 （23 min） · 【教师】通过学生的发言，引入新的知识点，介绍在网页中添加图像并设置图像样式 一、添加图像 【教师】演示利用Dreamweaver CC添加图像的步骤，帮助学习理解 使用Dreamweaver CC可以直接在网页文档中添加图像，将插入点置于想要插入图像的位置；然后打开“插入”面板，单击“Image”按钮，打开“选择图像源文件”对话框；接着在其中选择图像文件；最后单击“确定”按钮。 在HTML5中，使用<img />标签标记图像。该标签在使用时需要声明两个属性，其中，src属性必须设置，它表示图像的引用地址，一般用相对路径表示；alt属性表示图像的代替文本，当该图像因文件缺失、路径错误等原因无法显示时，浏览器将在该标签所在位置显示代替文本，该属性可以为空。 （详见教材） 二、绝对路径与相对路径 【教师】利用多媒体辅助讲解绝对路径和相对路径 在网页中使用图像、音频、视频等素材文件时，都需要引用素材文件的地址，引用方式有绝对路径与相对路径两种。 （1）绝对路径。绝对路径是指素材文件的真正地址，可以是文件在磁盘上的完整路径，也可以是文件在网络上的完整网址。制作网页时不推荐使用绝对路径，因为在网页制作完成后需将其上传至服务器，这时素材文件的绝对路径会发生改变，导致文件无法引用。 （2）相对路径。相对路径是指素材文件相对于当前文件的地址，也就是以当前文件为起点，通过层级关系描述素材文件的位置。 三、设置图像样式 图像文件在页面中显示时默认占据一个矩形区域，使用CSS3可以设置该矩形区域的宽度、高度、边框及圆角样式。 【教师】展示Dreamweaver CC设置图像样式的界面，辅助学习理解 （1）width与height属性分别用于设置元素的宽度与高度。 （2）border属性用于设置元素的边框，在“边框”设置区中可以选择设置矩形元素的“所有边”“顶部”“右侧”“底部”“左侧”边框，其下方的子属性width用于设置边框的宽度，属性值为数值加单位；子属性style用于设置边框的样式，常用的属性值为solid，表示单实线，属性值dotted表示点线、dashed表示虚线；子属性color用于设置边框的颜色，属性值的设置方式与文本颜色的设置方式相同。 （3）border-radius属性用于设置元素的圆角。 （详见教材） 四、变形与过渡 【教师】展示CSS3中transform属性界面，辅助学习理解 1．变形 在CSS3中，使用transform属性即可实现元素的平移、缩放与旋转等变形效果。属性值有以下几种。 （1）none，默认值，表示无变形效果。 （2）translate(x,y)，表示平移方法，用于重新设置元素的位置。 （3）scale(x,y)，表示缩放方法，用于改变元素的尺寸。 （4）rotate(angle)