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

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

实践探索（15min）

课堂小结（3min）

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

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

（5min）【教师】提出以下问题：使用DreamweaverCC如何在网页中插入图像？【学生】思考、举手发言通过问题导入，引导学生思考，调动学生的主观能动性，了解本节课要学习的内容传授新知

（23min）【教师】通过学生的发言，引入新的知识点，介绍在网页中添加图像并设置图像样式一、添加图像【教师】演示利用DreamweaverCC添加图像的步骤，帮助学习理解使用DreamweaverCC可以直接在网页文档中添加图像，将插入点置于想要插入图像的位置；然后打开“插入”面板，单击“Image”按钮，打开“选择图像源文件”对话框；接着在其中选择图像文件；最后单击“确定”按钮。在HTML5中，使用<img/>标签标记图像。该标签在使用时需要声明两个属性，其中，src属性必须设置，它表示图像的引用地址，一般用相对路径表示；alt属性表示图像的代替文本，当该图像因文件缺失、路径错误等原因无法显示时，浏览器将在该标签所在位置显示代替文本，该属性可以为空。（详见教材）二、绝对路径与相对路径【教师】利用多媒体辅助讲解绝对路径和相对路径在网页中使用图像、音频、视频等素材文件时，都需要引用素材文件的地址，引用方式有绝对路径与相对路径两种。（1）绝对路径。绝对路径是指素材文件的真正地址，可以是文件在磁盘上的完整路径，也可以是文件在网络上的完整网址。制作网页时不推荐使用绝对路径，因为在网页制作完成后需将其上传至服务器，这时素材文件的绝对路径会发生改变，导致文件无法引用。（2）相对路径。相对路径是指素材文件相对于当前文件的地址，也就是以当前文件为起点，通过层级关系描述素材文件的位置。三、设置图像样式图像文件在页面中显示时默认占据一个矩形区域，使用CSS3可以设置该矩形区域的宽度、高度、边框及圆角样式。【教师】展示DreamweaverCC设置图像样式的界面，辅助学习理解（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)，表示旋转方法，用于使元素旋转一个角度。（5）skew(x-angle,y-angle)，表示倾斜方法，用于使元素倾斜一个角度。【课堂互动】教师提出以下问题：使用DreamweaverCC如何实现3D变形呢？【学生】聆听、思考、举手回答【教师】对学生的回答进行总结rotateX(angle)、rotateY(angle)与rotateZ(angle)方法，它们表示在3D环境中旋转元素。2．过渡【教师】展示CSS3过渡效果属性界面，辅助学习理解使用CSS3提供的过渡功能，能够在不使用Flash与JavaScript的情况下展示元素样式从一个状态向另一个状态缓缓变化的过程。（1）transition-property属性用于设置应用过渡效果的CSS属性名称。（2）transition-duration属性用于设置过渡效果的变化时间。（3）transition-timing-function属性用于设置过渡效果的速度曲线。（4）transition-delay属性用于设置过渡效果开始之前需要等待的时间，其设置方法与transition-duration属性相同。（详见教材）五、设置元素背景与阴影CSS3中提供了许多设置元素背景的属性，包括背景图像和背景颜色。此外，还提供了设置元素阴影的属性。1.设置背景图像【教师】根据教材步骤演示使用DreamweaverCC为元素设置背景图像的方法为一个元素设置背景图像与直接插入图像标签的操作有所不同。设置背景图像的方法为，打开“CSS设计器”面板，单击“属性”窗格的“背景”设置区中background-image属性下子属性url后的文件按钮，打开“选择图像源文件”对话框，在其中选择图像文件后，单击“确定”按钮。（详见教材）【学生】观察、记录、理解【教师】展示CSS3中与背景图像相关的属性界面，辅助学习理解（1）background-position属性用于设置背景图像的显示位置。默认情况下，背景图像显示在元素左上角。该属性需设置两个值，它们之间用空格隔开，如“background-position:lefttop;”。（2）background-size属性用于设置背景图像的宽度与高度。（3）background-repeat属性用于设置背景图像的显示方式（详见教材）2．设置背景颜色【教师】根据教材步骤演示使用DreamweaverCC为元素设置背景颜色的方法元素背景颜色的设置方式与文本颜色的设置方式类似。在为元素设置选择器之后，打开“CSS设计器”面板，在“属性”窗格中的“背景”设置区中设置background-color属性。（详见教材）【学生】观察、记录、理解3．设置元素阴影【教师】根据教材步骤演示使用DreamweaverCC为元素设置阴影的方法元素的阴影将显示在元素的四周，其设置方法与文本阴影的设置方式类似。在为元素设置选择器之后，打开“CSS设计器”面板，在“属性”窗格中的“背景”设置区中设置box-shadow属性。（详见教材）【学生】观察、记录、理解【学生】聆听、思考、记忆通过讲解，让学生了解如何使用DreamweaverCC添加图像并设置样式小组互助（15min）【教师】组织学生以小组为单位使用DreamweaverCC保存网页，并在网页中添加图像【学生】阅读、思考、上机操作，由组内最先完成操作的学生帮助其他学生完成操作【教师】进行巡视，解答学生的问题以学生为主体，针对学生接受能力的差异性，让优秀学生带动其他学生掌握知识点第二节课任务实施

（25min）【教师】演示使用DreamweaverCC制作“传承经典网”主页的“大家风范”模块的操作，并对其进行分析（1）继续在任务一任务实施创建的文档中操作，或用本书配套素材“项目四”→“任务二”→“Sculture”文件夹中的文件替换本地磁盘中站点文件夹中的文件，并打开“index.html”网页文档。（2）将插入点置于<main>→<divclass="sheet_2">→<divclass="author">→<divclass="con">标签中，单击“插入”面板中的“Image”按钮，打开“选择图像源文件”对话框，选择“img”文件夹中的“quyuan.png”图像文件，单击“确定”按钮插入图像。（3）添加.author.conimg选择器，设置图像的宽度为“180px”，上下外边距均为“5px”，左右外边距均为“15px”，浮动为（向右浮动，代码为“float:right;”），圆角均为“8px”，元素阴影为“0px1px3px1px#84592F”。（4）在图像标签下方添加3个<p>标签，并为“屈原”文本添加<span>标签。（5）添加.author.conp选择器，设置段落文本的样式。（6）添加.author.conpspan选择器，设置“屈原”文本的文本颜色。（详见教材）【学生】观察、记录、理解，上机操作【教师】巡堂指导，及时解决学生的问题【课堂互动】教师提出以下问题：【学生】聆听、思考、举手回答通过任务实施，让学生们主动参与学习，熟悉使用

DreamweaverCC在网页中添加图像并设置元素的步骤实践探索

（15min）【教师】组织学生参照“任务实施”中的操作步骤，使用DreamweaverCC保存网页，在网页中添加更多图片，并改变其样式【学生】聆听、理解、上机操作【教师】巡堂指导，及时解决学生的问题通过实践探索，使学生进一步巩固所学知识，了解更多关于网页添加图像的知识课堂小结

（3min）【教师】简要总结本节课的要点本节课学习了在网页中添加图像，并设置图像样式的方法。希望大家在课下多加练习，熟练掌握利用DreamweaverCC