网页设计与制作案例教程（HTML5 CSS3 JavaScript）（微课版）（第2版） 教案 案例8山东介绍网页

教案8案例8山东介绍网页计划学时2学时知识目标掌握设置背景颜色、背景图像的属性；掌握设置不透明度的方法；掌握设置渐变效果的方法。能力目标能够设置页面元素背景颜色和图像；能够设置页面元素不透明度；能够设置页面元素渐变背景。素质目标在案例实现中培养综合分析问题的能力；在代码编辑中培养耐心细致、精益求精的工匠精神。教学重点设置背景颜色及背景图像；设置不透明度。教学难点设置渐变效果。教学模式教学做一体化；线上+线下混合式教学。教学活动及主要环节素质培养第1学时（案例分析与实现）=1\*ROMANI.问题讨论：（5分钟）对同学们课前观看微课过程中的疑难问题展开讨论。=2\*ROMANII.案例分析与实现：（40分钟）一、案例描述创建山东介绍网页，将所有内容放入一个盒子中，并使用CSS设置盒子的样式，浏览效果如图8-1所示。图8-1山东介绍网页二、案例分析与实现1.案例分析图8-1所示的网页内容是放在一个盒子中的，首先要用<div>标记定义一个盒子，在盒子中添加<h2>标记定义标题，添加<p>标记定义段落。<h2>标题中的背景颜色、左侧的Logo图像，以及盒子中的背景图像都使用background综合属性设置。2.案例实现学生同步操作，做学教一体略。第2学时（相关知识点）一、设置背景颜色及背景图像学生已观看微课，略讲1.background-color属性语法格式：background-color:#RRGGBB或rgb(r,g,b)或预定义的颜色值;例8-1example01.html学生同步操作，做学教一体2.background-image属性语法格式：background-image:url(图像来源);例8-2example02.html学生同步操作，做学教一体3.background-repeat属性语法格式：background-repeat:repeat|no-repeat|repeat-x|repeat-y|space|round;分别操作演示各个属性值的效果。4.background-position属性语法格式：background-position:关键字|百分比|长度;分别操作演示各个属性值的设置。5.background-attachment属性语法格式：background-attachment:scroll|fixed|local;分别操作演示各个属性值的效果。6.background-size属性语法格式：background-size:长度|百分比|auto|

cover|

contain;例8-3example03.html学生同步操作，做学教一体7.综合设置背景语法格式：background:背景颜色url("图像")重复位置固定大小;操作演示综合设置案例8网页中标题的背景颜色和网页的背景图像。8.设置多重背景图像例8-4example04.html学生同步操作，做学教一体二、设置不透明度1.opacity属性语法格式：opacity:不透明度值;例8-5example05.html学生同步操作，做学教一体2.rgba(r,g,b,alpha)函数三、设置渐变效果语法格式：background:linear-gradient(渐变角度,颜色值1,颜色值2,…,颜色值n);渐变角度：颜色值：例8-6example06.html学生同步操作，做学教一体四=2\*ROMAN、小结重点掌握对盒子和盒子中的元素设置背景颜色和背景图像。作业1：课本课后习题与实训作业2：扫码观看案例9中的微课，学习元素的浮动属性、块元素与行内元素、元素之间的外边距等内容。课前小组讨论过程中，培养学生团队合作，综合分析问题的能力。在编写代码中培养学生耐心细致、