《Web前端开发》教学讲义 Web前端设计基础 项目九-2.docxVIP

教学课题 项目9 CSS 3修饰表格表单—9.2知识准备 授课班级 授课时间 教学目标 知识目标 1.掌握CSS设置圆角边框； 2.掌握CSS设置边框阴影； 3.掌握CSS设置图片边框； 4.掌握CSS修饰表格。 能力目标 1.培养学生自主学习、分析问题和解决问题的能力； 2.培养学生熟练运用所学知识的能力。 德育目标 1.鼓励学生主动学习，提高学习兴趣，提升学生的专业素质； 2.培养学生的团队合作精神。 学情分析 通过前面知识的学习，已经掌握了CSS 3的各类选择器的应用，掌握了CSS 3美化文本、段落和图片的方法以及 CSS 3美化超链接和项目列表，掌握了。 任何一个页面都有不同的背景和基调，而对于单个元素，边框效果随处可见，表格和表单也是网页中最常见的元素，想要使网页页面达到整齐美观的视觉效果，就需要用CSS来进行美化。本项目学习使用CSS修饰表格表单，并掌握CSS美化边框、美化背景的方法。 教学重点 1.CSS设置圆角边框； 2.CSS设置边框阴影； 3.CSS设置图片边框； 4.CSS修饰表格。 教学难点 1.CSS设置图片边框； 2.CSS修饰表格。 教学方法 项目教学法、多媒体辅助教学法、讲练结合法 教学过程 教学环节 教学内容 师生活动 新课导入 给学生展示一个网页页面，通过网页中圆角边框、边框阴影等的效果，导入本节课的内容。 教师提出问题，学生可分组讨论，协作探究。 技能学习 单元格列行单元格列行单元格列行一、使用CSS设置圆角边框 单元格 列 行 单元格 列 行 单元格 列 行 CSS 3的border-radius属性可用来定义边框的圆角效果，格式如下： {border-radius:none | length{1,4} [ / length{1,4}];} 二、使用CSS设置边框阴影 在CSS 3中，使用box-shadow属性来设置边框阴影，格式如下： {box-shadow: h-shadow v-shadow blur spread color inset;} 三、使用CSS设置图片边框 在CSS 3中，可以用border-image属性设置对象的图像边框，格式如下： {border-image:border-image-source border-image-slice border-image-width border-image- outset border-image-repeat;} 【例9-4】制作不同样式的边框实例，代码如下所示。 1 !DOCTYPE html 2 html lang=en 3 head 4 meta charset=UTF-8 5 title边框样式/title 6 style 7 body{ 8 margin:30px; 9 background-color:#E9E9E9; 10 } 11 .pic{ 12 width:300px; 13 padding:10px 10px 20px 10px; 14 background-color:white; 15 box-shadow: 10px 10px 5px #888888; 16 border:15px solid transparent; 17 border-image:url(images/border4.jpg) 30 30 round; 18 } 19 img{ 20 border-top-left-radius: 20px; 21 border-top-right-radius: 20px; 22 border-bottom-left-radius: 10px; 23 border-bottom-right-radius: 10px; 24 } 25 /style 26 /head 27 body 28 div class=pic 29 img src=images/02.jpg alt=梅园亭 width=284 height=213 / 30 h3 class=caption大唐芙蓉园灯会/h3 31 /div 32 /body 33 /html 在Chrome浏览器中预览，效果如图所示。 四、使用CSS修饰表格 1．border-collapse属性 2．border-spacing属性 border-spacing属性用于设置分隔单元格边框的距离，格式如下： {border-spacing:length[length];} 3．caption-side属性 4．empty-cells属性 5．table