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

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

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

3、表单页面和一个后台的表格页面，导入本节课的内容。教师提出问题，学生可分组讨论，协作探究。技能学习单元格列行单元格列行单元格列行一、项目实施单元格列行单元格列行单元格列行结合前面学习的知识，用CSS修饰一个用于发送邮件的表单页面，如图所示。Step01 打开Sublime编辑器，新建一个文件，保存文件名为“9-6.html”。Step02 输入【！】或者【html:5】，按Tab键，会自动完成html基本代码填充，更改head标签中的title标签的内容为“CSS修饰邮件表单”。Step03 在body标签中，先插入form表单，再在form表单中插入表格，在表格中填写各表单元素。1 2 3 4

4、 5 联系我们6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 Step04 在head标签中创建样式，插入，在其中设置各部分样式，代码如下：1 2 body3 background-color: #9ccede;4 5 table6 background-color: #add6e7;7 border-spacing: 20px 16px;8 border-radius: 20px 10px 10px 20px;9 10 input,textarea11 line-height: 25px;12 width: 220px;13 b

5、order: none;14 padding-left: 5px;15 color: #636363;16 17 b18 letter-spacing: 2px;19 font-size: 16px;20 21 td.mail22 color: #52737f;23 background-image: url(images/mail.png);24 background-repeat: no-repeat;25 background-position: 0px 25px;26 27 input.btn28 width: 87px;29 line-height: 37px;30 border-r

6、adius: 20px;31 background-color: #8cbdce;32 border:solid 4px #ffffff;33 34 单元格列行单元格列行单元格列行二、项目拓展单元格列行单元格列行单元格列行用CSS修饰一个后台的表格页面，效果如图所示。Step01 新建html网页文件，保存文件名为“9-7.html”。Step02 修改title标签内容为“CSS装饰表格”。Step03 在body中输入代码如下：1 2 后台页面3 4 5 6 7 提交8 删除9 打印10 修改11 更新12 13 14 15 16 17 是否质检18 产品名称19 产品编号20 出库数量2

7、1 采购单价22 出库日期23 24 25 26 27 28 panel面板29 2018030800130 50031 30032 2016-05-0633 34 35 36 panel面板37 2018030800138 50039 30040 2016-05-0641 42 43 44 panel面板45 2018030800146 50047 30048 2016-05-0649 50 51 52 panel面板53 2018030800154 50055 30056 2016-05-0657 58 59 60 panel面板61 2018030800162 50063 30064 2

8、016-05-0665 66 67 68 Step04 在head中输入样式代码如下：1 2 #top3 padding: 15px;4 font-size: 14px;5 background-image: url(images/header-bg.png);6 background-repeat: repeat-x;7 border-radius: 5px;8 color:#ffffff;9 10 #body-panel11 background-color: #f8f8f8;12 margin: 0 4px;13 border:1px solid #bcbcbc;14 border-to

9、p: 0;15 16 .table117 background-color: #f5f5f5;18 background-image: url(images/toolbar.png);19 background-repeat: repeat-x;20 border-spacing: 0;21 22 .table1 tr tdborder-right: 1px solid #d0d0d0;23 .table1 tr td a24 padding: 8px 30px 8px 40px;25 color: #666666;26 text-decoration: none;27 display: bl

10、ock;28 29 .accept,.delete,.print,.refresh,.updatebackground:no-repeat 20px 10px;30 .acceptbackground-image: url(images/accept.png);31 .deletebackground-image: url(images/cross.png);32 .printbackground-image: url(images/printer.png);33 .refreshbackground-image: url(images/arrow_refresh.png);34 .updat

11、ebackground-image: url(images/pencil.png);35 .table236 width: 100%;37 border-top: 1px solid #d0d0d0;38 border-collapse: collapse;39 border-spacing: 0px;40 41 .table2 thead th42 line-height: 30px;43 background-color: #f5f5f5;44 background-image: url(images/table-header.png);45 background-repeat: repe

12、at-x;46 background-position: left bottom;47 border:solid 2px #dddddd;48 text-align: center;49 50 .table2 tbody td51 line-height: 30px;52 border:solid 2px #dddddd;53 text-align: center;54 55 .table2 .gradeC56 background-color: #f2f2f2;57 58 教师操作演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查看教学效果。教师操作演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查看教学效果。教师操作演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查看教学效果。知识归纳本项目通过项目实施和项目拓展只做了表单页面和表格页面，学习了CSS如何设置背景和边框，如何修饰表格和表单等元