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

《（中职）Web前端设计基础 项目九-2电子教案.docx》由会员分享，可在线阅读，更多相关《（中职）Web前端设计基础 项目九-2电子教案.docx（6页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

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

2、3 美化文本、段落和图片的方法以及 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-shadowv-shadowblurspreadcolorinset;三、使用三、使用 CSS

4、 设置图片边框设置图片边框在 CSS 3 中，可以用 border-image 属性设置对象的图像教师操作演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查看教学效果。（中职）Web 前端设计基础 项目九-2 电子教案边框，格式如下：border-image:border-image-sourceborder-image-sliceborder-image-width border-image-outset border-image-repeat;【例 9-4】制作不同样式的边框实例，代码如下所示。12345边框样式67body8margin:30px;

5、9background-color:#E9E9E9;1011.pic12width:300px;13padding:10px 10px 20px 10px;14background-color:white;15box-shadow:10px 10px 5px#888888;16border:15px solid transparent;17border-image:url(images/border4.jpg)30 30round;1819img20border-top-left-radius:20px;21border-top-right-radius:20px;22border-botto

6、m-left-radius:10px;23border-bottom-right-radius:10px;24252627282930大唐芙蓉园灯会313233在 Chrome 浏览器中预览，效果如图所示。教师操作演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查看教学效果。（中职）Web 前端设计基础 项目九-2 电子教案四、使用四、使用 CSS 修饰表格修饰表格1border-collapse 属性2border-spacing 属性border-spacing 属性用于设置分隔单元格边框的距离，格式如下：border-spacing:lengthl

7、ength;3caption-side 属性4empty-cells 属性5table-layout 属性【例 9-5】用 CSS 修饰表格实例，代码如下所示。12345CSS 对表格的修饰67table89border-collapse:separate;10border-spacing:10px;11caption-side:top;12empty-cells:show;13table-layout:auto;141516171819标题20教师操作演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查看教学效果。（中职）Web 前端设计基础 项目九-2

8、 电子教案21第一季度22收益 100000 元232425第二季度2627282930在 Chrome 浏览器中预览，效果如图所示。知识归纳本节课学习了使用 CSS3 设置圆角边框、设置边框阴影、设置图片边框和修饰表格的美化方法。属性属性值说明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-outsetb

9、order-image-repeatborder-collapseseparate|collapse|inherit表格边框是否折叠border-spacinglengthlength单元格边框的距离caption-sidetop|bottom|inherit表格标题的位置empty-cellshide|show|inherit是否显示空白单元格table-layoutautomatic|fixed|inherit单元格是否自动适应内容教师讲授，学生归纳总结，并作适当的笔记。课后作业一、选择题1.下列_是定义边框的圆角效果的属性。Aborder-styleBborder-widthCborde

10、r-radiusDborder-color2.下列_是用来设置边框阴影的属性。Aborder-styleBbox-shadowCborder-radiusDborder-color学生上机完成任务并提交，进行分组互评。（中职）Web 前端设计基础 项目九-2 电子教案3.下列_属性用于设置表格标题的位置。Aborder-spacingBempty-cellsCcaption-sideDtable-layout二、上机实训上机完成例 9-4 和例 9-5 的实例操作。教学反思教学反思（中职）Web 前端设计基础 项目九-2 电子教案感谢您的支持与使用感谢您的支持与使用如果内容侵权请联系删除如果内容侵权请联系删除仅供教学交流使用仅供教学交流使用