文档详情

HTML CSS DIV网页设计与布局(第3版)(微课版)-教案 第9章 设置背景、边框、边距和补白.doc

发布:2025-02-28约6.99千字共8页下载文档
文本预览下载声明

PAGE8

网页设计与制作

授课教案

学年第学期

学院(部)专业(学部)

课程名称

电子商务网页设计与制作

任课教师

课内形式

理论教学□课内实践□理实一体?习题复习□考核评价□其他活动□

学习量

安排

课内:

课外形式

调查分析?小组研讨□实践任务?理论探究□考核评价□汇报展示□其他活动?

课外:

序号

9

授课日期

月日

月日

月日

月日

授课班级

课内教学内容:

第9章设置背景、边框、边距和补白

课外学习任务:

(1)课前:

以小组为单位,讨论设置背景、边框、边距和补白的相关知识并以PPT的形式记录下来。

(2)课后:

=1\*GB3①使用相关属性为元素添加背景图像,并设置背景图像的平铺方式和滚动模式。

=2\*GB3②使用边框属性为网页中元素添加边框样式。

=3\*GB3③使用margin属性和padding属性来设置网页中元素的边距和补白。

教学目标:

知识目标

掌握背景颜色的设置。

掌握背景图像的设置。

掌握边框的设置。

掌握边距的设置。

掌握补白的添加。

能力目标

能够掌握使用CSS实现背景、边框、边距和补白的设置;

素质目标

较强的专业知识和自学能力;

丰富知识结构,提升专业知识;

掌握背景、边框、边距和补白的CSS属性,理解并应用专业知识。

重点难点及解决方法:

(1)重点:使用CSS设置背景和边框

解决方法:通过知识点讲解+课堂示例相结合的方法,教师讲解元素背景和边框样式的设置,引导学生积极思考,掌握相应知识;同时通过课堂示例展示,使学生可以掌握背景和边框相关属性的使用;培养学生的思维能力和分析问题解决问题的能力。

(2)难点:使用CSS添加边距和补白

解决方法:通过案例解析+启发式教学讲解的方式,细致讲解使用CSS为元素添加边距和补白。帮助学生掌握CSS中关于边距和补白相关属性的使用方法和技巧。从实用的角度帮助学生提高专业知识。

课内教学授课地点:

教学媒体:微课、PPT课件、网页图片、相关教学视频等。

设备及材料:多媒体计算机、多媒体教学广播软件、网页素材图片、教学载体源文件等。

其它资源:与本次课相关的专业技术论文电子版。

学习效果评价方式:

对理论知识学习效果评价:采用课堂提问、课后习题和查阅技术论文研读笔记的方式;

对技能的评价:教师对学生上交网页作品按制作要求进行综合性评价;

对职业素养的评价:采用学生自评、小组内评价和教师评价相结合的方式。

课后小结:

填表说明:1.序号,指该课程授课的顺序号,应与授课计划一致;2.授课形式在相应的选项打“√”。

课内教学内容及过程

时间分配

方法

及手段

【导引示例】

jQuery提供了十分丰富的工具函数,这些工具函数主要用于数据操作。例如,使用jQuery的数组操作函数对数组元素进行批量操作。

1.背景颜色

背景通常是指除了文本与边框之外的所有颜色。在CSS中可以使用background-color来设置背景颜色。background-color属性的语法格式如下。

background-color:transparent|颜色|inherit

各属性值的含义如下。

transparent:设置背景颜色为透明,该值为默认值。

颜色:可以为英文颜色名、RGB颜色或百分比颜色。

inherit:继承父级样式。

HTML中的大多数标签都可以设置背景颜色,如body、div、td等。

2.背景图像

【设置背景图像】

在HTML中设置网页背景图像的方式为bodybackground=图片URL。在CSS中设置背景图像的属性为background-image,该属性不但可以设置网页背景图像,还可以设置表格、单元格、按钮等元素的背景图像。

background-image属性的语法格式如下。

background-image:none|url(uri)|inherit

各属性值的含义如下。

none:无背景图像,该值为默认值。

url(uri):图像的URL地址,该类地址可以是绝对地址或相对地址。

inherit:继承父级样式。

【设置固定背景图像】

通常在为网页设置背景图像之后,背景图像都会平铺在网页的下方。当网页内容比较多时,拖动滚动条,网页的背景图像会跟着网页的内容一起滚动。在CSS中使用background-attachment属性可以将背景图像固定在浏览器上,此时拖动滚动条,背景图像不会随着网页内容的滚动而滚动,看起来好像文字是浮动在图片上似的。background-attachment属性的语法格式如下。

background-attachment:scroll|fix

显示全部
相似文档