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

教学课题 项目9 CSS 3修饰表格表单—9.3项目实施9.4项目拓展 授课班级 授课时间 教学目标 知识目标 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修饰一个用于发送邮件的表单页面，如图所示。 Step01 打开Sublime编辑器，新建一个文件，保存文件名为“9-6.html”。 Step02 输入【！】或者【html:5】，按Tab键，会自动完成html基本代码填充，更改head标签中的title标签的内容为“CSS修饰邮件表单”。 Step03 在body标签中，先插入form表单，再在form表单中插入表格，在表格中填写各表单元素。 1 form method=post action= 2 table width=380px 3 tr 4 td class=mail width=80px rowspan=6 valign=top 5 b联系我们/b 6 /td 7 tdinput type=text value=姓名/td 8 /tr 9 tr 10 tdinput type=text value=邮箱地址/td 11 /tr 12 tr 13 tdinput type=text value=网站地址/td 14 /tr 15 tr 16 tdtextarea rows=4 value=信息内容/textarea/td 17 /tr 18 tr 19 tdinput class=btn type=submit name= value=submit/td 20 /tr 21 tr 22 td height=20px/td 23 /tr 24 /table 25 /form Step04 在head标签中创建样式，插入style/style，在其中设置各部分样式，代码如下： 1 style 2 body{ 3 background-color: #9ccede; 4 } 5 table{ 6 background-color: #add6e7; 7 border-spacing: 20px 16px; 8 border-radius: 20px 10px 10px 20px; 9 } 10 input,textarea{ 11 line-height: 25px; 12 width: 220px; 13 border: none; 14 padding-left: 5px; 15 color: #636363; 16 } 17 b{ 18 letter-spacing: 2px; 19 font-size: 16px; 20 } 21 td.mail{ 22 color: #52737f; 23 background-image: url(images/mail.png); 24 background-repeat: no-repeat; 25 background-position: 0px 25px; 26 } 27 input.btn{ 28 width: