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

教学课题 项目5 网页中的表单—5.3项目实施5.4项目拓展 授课班级 授课时间 教学目标 知识目标 1.掌握网页中表单、表单中各元素的作用和语法格式； 2.掌握表单的高级应用； 3.掌握使用CSS样式修饰表单。 能力目标 1.培养学生自主学习、分析问题和解决问题的能力； 2.培养学生熟练运用所学知识的能力。 德育目标 1.鼓励学生主动学习，提高学习兴趣，提升学生的专业素质； 2.培养学生的团队合作精神。 学情分析 通过上节课的学习，已经掌握了网页中表单及表单中各元素的作用和语法格式、表单的高级应用、使用CSS样式修饰表单。 本节课通过制作网上银行注册页面和调查问卷来巩固以上所学知识。 教学重点 1.网页中表单、表单中各元素的作用和语法格式； 2.表单的高级应用； 3.使用CSS样式修饰表单。 教学难点 1.网页中表单的高级应用； 2.使用CSS样式修饰表单。 教学方法 项目教学法、多媒体辅助教学法、讲练结合法 教学过程 教学环节 教学内容 师生活动 新课导入 给学生展示网页页面，通过页面中的网上银行注册页面和调查问卷，导入本节课的内容。 教师提出问题，学生可分组讨论，协作探究。 技能学习 单元格列行单元格列行单元格列行一、项目实施 单元格 列 行 单元格 列 行 单元格 列 行 利用所学的表单知识制作网上银行注册页面，如图所示。 Step01 打开Sublime编辑器，新建一个文件，保存文件名为“5-7.html”。 Step02 输入【！】或者【html:5】，按Tab键，会自动完成html基本代码填充，更改head标签中的title标签的内容为“银行注册页面”。 Step03 在body标签中，先插入form表单，再在form表单中插入10行2列的表格，在表格中填写内容。 1 form method=post action= 2 table width=600 border=0 cellspacing=0 cellpadding=0 3 caption 4 中国XXX银行注册页面 5 /caption 6 tr 7 td width=255px注册卡/账户类型/td 8 td width=345px 9 input type=radio name=type value=standard checked=checked id=type_0 10 label for=type_0标准卡/账户/label 11 input type=radio name=type value=fast id=type_1 12 label for=type_1闪酷卡/label 13 /td 14 /tr 15 tr 16 td请输入注册卡（账）号/td 17 tdinput type=text name=account required=required/td 18 /tr 19 tr 20 td注册卡（帐）户密码 /td 21 tdinput type=password name=password size=10 required=required/td 22 /tr 23 tr 24 td手机号码 /td 25 tdinput type=text name=telephone/td 26 /tr 27 tr 28 td证件类型/td 29 td 30 select name=card 31 option value=idcard selected=selected身份证/option 32 option value=certificate军官证/option 33 /select 34 /td 35 /tr 36 tr 37 td请输入证件号码/td 38 tdinput type=text name=card_number required=required/td 39 /tr 40 tr 41 td请留下你的联系邮箱/td 42 tdinput type=email/td 43 /tr 44 tr 45 td选择您要开通的业务/td 46 td 47 input type=checkbox name=business value=business_0 id=business_0 48 label for=business_0短信提醒/label 49 input ty