（中职）Web前端设计基础 项目九-2电子教案

1、（中职）Web前端设计基础 项目九-2电子教案（中职）Web前端设计基础 项目九-2电子教案（中职）Web前端设计基础 项目九-2电子教案教学课题项目9 CSS 3修饰表格表单9.2知识准备授课班级授课时间教学目标知识目标1.掌握CSS设置圆角边框；2.掌握CSS设置边框阴影；3.掌握CSS设置图片边框；4.掌握CSS修饰表格。能力目标1.培养学生自主学习、分析问题和解决问题的能力；2.培养学生熟练运用所学知识的能力。德育目标1.鼓励学生主动学习，提高学习兴趣，提升学生的专业素质；2.培养学生的团队合作精神。学情分析通过前面知识的学习，已经掌握了CSS 3的各类选择器的应用，掌握了CSS 3美

2、化文本、段落和图片的方法以及 CSS 3美化超链接和项目列表，掌握了。任何一个页面都有不同的背景和基调，而对于单个元素，边框效果随处可见，表格和表单也是网页中最常见的元素，想要使网页页面达到整齐美观的视觉效果，就需要用CSS来进行美化。本项目学习使用CSS修饰表格表单，并掌握CSS美化边框、美化背景的方法。教学重点1.CSS设置圆角边框；2.CSS设置边框阴影；3.CSS设置图片边框；4.CSS修饰表格。教学难点1.CSS设置图片边框；2.CSS修饰表格。教学方法项目教学法、多媒体辅助教学法、讲练结合法教学过程教学环节教学内容师生活动新课导入给学生展示一个网页页面，通过网页中圆角边框、边框阴影

3、等的效果，导入本节课的内容。教师提出问题，学生可分组讨论，协作探究。技能学习单元格列行单元格列行单元格列行一、使用CSS设置圆角边框单元格列行单元格列行单元格列行CSS 3的border-radius属性可用来定义边框的圆角效果，格式如下：border-radius:none | 1,4 / 1,4;二、使用CSS设置边框阴影在CSS 3中，使用box-shadow属性来设置边框阴影，格式如下：box-shadow: h-shadow v-shadow blur spread color inset;三、使用CSS设置图片边框在CSS 3中，可以用border-image属性设置对象的图像边框

4、，格式如下：border-image:border-image-source border-image-slice border-image-width border-image-outset border-image-repeat;【例9-4】制作不同样式的边框实例，代码如下所示。1 2 3 4 5 边框样式6 7 body8 margin:30px;9 background-color:#E9E9E9;10 11 .pic12 width:300px;13 padding:10px 10px 20px 10px;14 background-color:white;15 box-shadow

5、: 10px 10px 5px #888888;16 border:15px solid transparent;17 border-image:url(images/border4.jpg) 30 30 round;18 19 img20 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 26 27 28 29 30 大唐芙蓉园灯会31 32 33 在Chrome浏览

6、器中预览，效果如图所示。四、使用CSS修饰表格1border-collapse属性2border-spacing属性border-spacing属性用于设置分隔单元格边框的距离，格式如下：border-spacing:lengthlength;3caption-side属性4empty-cells属性5table-layout属性【例9-5】用CSS修饰表格实例，代码如下所示。1 2 3 4 5 CSS对表格的修饰6 7 table8 9 border-collapse:separate;10 border-spacing:10px;11 caption-side:top;12 empty-c

7、ells:show;13 table-layout:auto;14 15 16 17 18 19 标题20 21 第一季度22 收益100000元23 24 25 第二季度26 27 28 29 30 在Chrome浏览器中预览，效果如图所示。教师操作演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查看教学效果。教师操作演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查看教学效果。教师操作演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查看教学效果。知识归纳本节课学习了使用C

8、SS3设置圆角边框、设置边框阴影、设置图片边框和修饰表格的美化方法。属性属性值说明border-radiusnone | 1,4 / 1,4;边框圆角box-shadowh-shadow| v-shadow| blur| spread| color| inset边框阴影border-imageborder-image-source图片边框border-image-sliceborder-image-widthborder-image-outsetborder-image-repeatborder-collapseseparate| collapse| inherit表格边框是否折叠border

9、-spacinglengthlength单元格边框的距离caption-sidetop| bottom| inherit表格标题的位置empty-cellshide| show | inherit是否显示空白单元格table-layoutautomatic| fixed | inherit单元格是否自动适应内容教师讲授，学生归纳总结，并作适当的笔记。课后作业一、选择题1.下列_是定义边框的圆角效果的属性。A border-style B border-width C border-radius D border-color2.下列_是用来设置边框阴影的属性。A border-style B box-shadow C border-radius D border-color3.下列_属性用于设置