资源简介 课题 网页文本、图像与多媒体( 二 ）课时 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中，使用标签标记图像。该标签在使用时需要声明两个属性，其中，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)，表示旋转方法，用于使元素旋转一个角度。 （5）skew(x-angle,y-angle)，表示倾斜方法，用于使元素倾斜一个角度。 【课堂互动】教师提出以下问题： 使用Dreamweaver CC如何实现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.设置背景图像 【教师】根据教材步骤演示使用Dreamweaver CC为元素设置背景图像的方法 为一个元素设置背景图像与直接插入图像标签的操作有所不同。设置背景图像的方法为，打开“CSS设计器”面板，单击“属性”窗格的“背景”设置区中background-image属性下子属性url后的文件按钮 ，打开“选择图像源文件”对话框，在其中选择图像文件后，单击“确定”按钮。 （详见教材） 【学生】观察、记录、理解 【教师】展示CSS3中与背景图像相关的属性界面，辅助学习理解 （1）background-position属性用于设置背景图像的显示位置。默认情况下，背景图像显示在元素左上角。该属性需设置两个值，它们之间用空格隔开，如“background-position:left top;”。 （2）background-size属性用于设置背景图像的宽度与高度。 （3）background-repeat属性用于设置背景图像的显示方式 （详见教材） 2．设置背景颜色 【教师】根据教材步骤演示使用Dreamweaver CC为元素设置背景颜色的方法 元素背景颜色的设置方式与文本颜色的设置方式类似。在为元素设置选择器之后，打开“CSS设计器”面板，在“属性”窗格中的“背景”设置区中设置background-color属性。 （详见教材） 【学生】观察、记录、理解 3．设置元素阴影 【教师】根据教材步骤演示使用Dreamweaver CC为元素设置阴影的方法 元素的阴影将显示在元素的四周，其设置方法与文本阴影的设置方式类似。在为元素设置选择器之后，打开“CSS设计器”面板，在“属性”窗格中的“背景”设置区中设置box-shadow属性。 （详见教材） 【学生】观察、记录、理解 【学生】聆听、思考、记忆 通过讲解，让学生了解如何使用Dreamweaver CC添加图像并设置样式小组互助 （15 min） 【教师】组织学生以小组为单位使用Dreamweaver CC保存网页，并在网页中添加图像 【学生】阅读、思考、上机操作，由组内最先完成操作的学生帮助其他学生完成操作 【教师】进行巡视，解答学生的问题 以学生为主体，针对学生接受能力的差异性，让优秀学生带动其他学生掌握知识点第二节课任务实施（25 min） 【教师】演示使用Dreamweaver CC制作“传承经典网”主页的“大家风范”模块的操作，并对其进行分析 （1） 继续在任务一任务实施创建的文档中操作，或用本书配套素材“项目四”→“任务二”→“Sculture”文件夹中的文件替换本地磁盘中站点文件夹中的文件，并打开“index.html”网页文档。 （2）将插入点置于→→→标签中，单击“插入”面板中的“Image”按钮，打开“选择图像源文件”对话框，选择“img”文件夹中的“quyuan.png”图像文件，单击“确定”按钮插入图像。 （3）添加.author .con img选择器，设置图像的宽度为“180 px”，上下外边距均为“5 px”，左右外边距均为“15 px”，浮动为 （向右浮动，代码为“float:right;”），圆角均为“8 px”，元素阴影为“0 px 1 px 3 px 1 px #84592F”。 （4）在图像标签下方添加3个标签，并为“屈原”文本添加标签。 （5）添加.author .con p选择器，设置段落文本的样式。 （6）添加.author .con p span选择器，设置“屈原”文本的文本颜色。 （详见教材） 【学生】观察、记录、理解，上机操作 【教师】巡堂指导，及时解决学生的问题 【课堂互动】教师提出以下问题： 同学们能想到屈原的哪些诗句能体现诗词之美？ 【学生】聆听、思考、举手回答 入不言兮出不辞，乘回风兮驾云旗。悲莫悲兮生别离，乐莫乐兮新相知。 通过任务实施，让学生们主动参与学习，熟悉使用Dreamweaver CC在网页中添加图像并设置元素的步骤实践探索（15min） 【教师】组织学生参照“任务实施”中的操作步骤，使用Dreamweaver CC保存网页，在网页中添加更多图片，并改变其样式 【学生】聆听、理解、上机操作 【教师】巡堂指导，及时解决学生的问题 通过实践探索，使学生进一步巩固所学知识，了解更多关于网页添加图像的知识课堂小结（3 min） 【教师】简要总结本节课的要点 本节课学习了在网页中添加图像，并设置图像样式的方法。希望大家在课下多加练习，熟练掌握利用Dreamweaver CC在网页中添加图像，以及设置元素样式的操作。 【学生】总结回顾知识点 总结知识点，巩固印象作业布置（2 min） 【教师】布置课后作业 （1）完成相关课后习题。 （2）保存常用的网页，利用Dreamweaver CC改变其图像。 【学生】完成课后任务 延展知识面，巩固所学知识教学反思 本节课效果不错，学生积极参与到教学活动中，而且能帮助组内同学一起学习。教学上本着“授之鱼不如授之以渔”的宗旨，注重对学生能力的培养，不仅教他们学习知识,而且让他们在学习过程中学会学习，学会做人。 展开更多...... 收起↑ 资源预览