情境七 制作注册页面（教案）-《网页设计与制作》同步教学（电子工业版）

情境七 制作注册页面 课程名称 网页设计与制作 学时 授课时间 授课章节 情境七 制作注册页面 授课班级 授课教师 网页设计与制作课程组 教学目的 专业理论知识 1、 理解表单的作用 2、 掌握表单基本元素的应用方法 3、 掌握在页面中正确使用各种表单元素 实际操作技能 1、 掌握并能应用表单属性 2、 能使用表单元素制作注册页面 思政元素目标 1、 培养学生团队合作精神 2、 培养学生精益求精的职业素养 知识、技能重点 1、 掌握文本域的使用。 2、 掌握单选按钮、单选按钮组和复选框的使用。 3、 掌握列表和按钮的使用。 知识、技能难点 1、 能利用表单元素制作较为复杂的表单页面。 教学方法 课前、课中、课后“三课一体”螺旋渗透教学法 教具 学习通APP、腾讯会议、学习强国APP 教学过程设计 7.1 表单在网页用中的作用及其组成元素 7.2 模仿型任务讲解 插入表单域并设置其属性 在表单域中插入表格进行布局 插入表单项 7.3开放型任务制作 教学过程 【组织教学】 1、准备教学设备、软件等； 2、点名检查学生出勤情况，填写教学情况记录表； 3、发布教学资料 【复习旧课、导入新课】 1、提问：同学们在注册网站用户的时候都要填写一些信息，知道是通过什 么将信息发送出去的吗？ 2、展示一个用户注册页面； 3、教学目的：掌握在网页中创建表单的方法，能够熟练的使用各种表单项。应用表格来定位表单项，美化表单网页。 【讲授新课】 知识储备 1.1学习路线，如图7.1 图7.1 表单学习路线 1.2 知识小天地 了解表单 一个完整的网站不仅可以向用户展示信息，同时还需要具备获取用户信息的功能，比如我们常见的用户留言板、调查表或者注册表，这些都是能够实现网站与用户交互的动态网站，这种动态交互功能的实现就是利用了表单元素。 1.2.1 表单的作用 表单在网页中的主要作用是采集用户数据，它提供一个页面，一个入口。表单处理信息的一般过程：用户在表单中方完成信息的填写后，单击表单中的提交按钮时，用户所输入的信息就会提交到服务器，服务器中的应用程序会对这些信息进行处理和响应，完成用户和服务器之间的交互。 1.2.2 表单元素 form 表单是网页上一个特定的区域，这个区域是由<form>标记定义的，它是一对双标记，<form>标记代表表单区域的开始，</form>标记代表表单区域的结束，在<form>和</form>标记之间的所有内容都属于表单内容。<form>标记的基本语法格式如下： <form name=”表单名称” action=”表单提交地址” method=”数据传输方式”> … </form> 该元素常用的表单属性描述见表7-1 表7-1 <form>元素的属性及描述 属 性 描述 accept-charset 规定用于表单提交的字符编码。 action 规定提交表单时将表单数据发送到何处。 autocomplete 规定表单是否应打开自动完成（填写）功能。 method 规定发送表单数据时要使用的 HTTP 方法。 name 规定表单名称。 Id 为表单提供唯一标识。 rel 规定链接资源和当前文档之间的关系。 target 规定提交表单后在何处显示接收到的响应。 输入元素 input Input元素是最常见的表单控件，它能够让用户在表单中输入信息，其基本语法格式如下： <input type=”输入控件类型” name=”控件名字”> 该元素的常用属性及描述见表7-2 表7-2 <input>元素的属性及描述 属 性 描述 text 定义单行的输入字段 password 定义密码字段。该字段中的字符被掩码 file 定义输入字段和 "浏览"按钮，供文件上传 radio 定义单选按钮 checkbox 定义复选框 hidden 定义隐藏的输入字段 button 定义可点击按钮 image 定义图像形式的提交按钮 reset 定义重置按钮。 submit 定义提交按钮。 text 定义单行的输入字段 【练一练】制作一个百度表单 图7.2 示例代码 图7.3 运行效果 下拉选择框元素 select 在页面设计中，为了版面布局的美观或者节省空间，有时会使用下拉选择框。下拉选择框也是页面中常见的表单元素，它由<select>标记定义，是一对双标记,<select>标记定义了下拉选择框的开始，</select>标记定义了下拉选择框的结束。可以通过设置要显示的选项数量，以及是否允许多项多项选择等内容。下拉选择框元素select的基本语法格式如下： <select name=”field_name” size=”size_value” multiple> … </select> option元素 option元素通常是作为select元素的子元素，充当下拉列表中的一个选项，单独使用是没有任何意义的。 元素option的基本语法格式如下： <select> <option value ="值1">选项1</option> <option value ="值2">选项2</option> …… </select> 【练一练】制作一个科目选择框 图7.4 示例代码 图7.5 运行效果 多行文本域元素Textarea 多行文本域textarea,<textarea> 标签是单闭合标签，它包含起始标签和结束标签，文本内容需要写在两个标签中间。具体语法格式如下： <textarea> …… </textarea> 该元素常用属性描述见表7-3 表7-3 textarea元素的常用属性及描述 属 性 描述 cols 用来指定每行显示的字符数。 rows 用来指定正常情况下（没有滚动条）显示的文本行数。 id 用来定义文本域的唯一 id 属性。 【练一练】制作一个多行文本域 图7.6 示例代码 图7.7 运行效果 二、模仿型任务讲解 2.1 注册页面设计与制作资讯单 分析案例效果，根据案例需求，通过相应的工具及渠道收集符合要求的素材，并完成资讯表。 表7-4 资讯单 注册页面设计与制作资讯单 学习情景 个人信息注册网 学习任务 学时 6学时 案例描述 搜集渠道 素材要求 小组成员 参考资料 完成时间 案例分析 2.2个人信息注册页面案例分析 案例学习目标 · 能够掌握表单基本元素的应用方法 · 能够在页面中正确使用各种表单元素 案例知识要点 · 表单<form>标记基本语法及属性 · 表单基本元素的应用 实现探究 2.3 案例设计思路 具体页面设计思路如下： 素材整理 页面设计 编码实现 测试运行 【思考】 （1）如何设置输入框的提示文字？ （2）如何设置输入框为必填项目？ （3）如何将表格和表格混合使用？ 三、实操示范 操作步骤 Step01 打开开发工具“HBuilder X”，选择“文件”------> “新建”------>“项目”，打开如下图7.13所示对话框： 图 7.8 项目创建 写好相应的项目名称后，选择基本的HTML项目，点击创建，即可完成项目的创建。 Step02 插入标题<h2>，标题文字为“个人信息注册”，并设置标题对齐属性值为居中；同时在表单标签里面嵌套一个9行2列的表格，代码如下，效果如图7.9所示。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>个人信息注册网</title> </head> <body> <h2 align="center">个人信息注册</h2> <form action="" method="post"> <table align="center" border="1" cellpadding="0" cellspacing="0" width="300px" height="500px"> <tr> <td></td> <td></td> </tr> ... </table> </form> </body> </html> 图7.9效果图Step03 接下来依次在单元格内添加输入元素、下拉选择框元素 select-option元素和多行文本域元素Textarea，设置“账户、“密码”、“性别”等控件，其中表格前三行的代码如下： <tr> <td>账户</td> <td> <input name="name" type="text" required="required" placeholder="admin" readonly="readonly"> </td> </tr> <tr> <td>密码</td> <td> <input name="psw" type="password" required="required" placeholder="密码不能少于8个字符"> </td> </tr> <tr> <td>性别</td> <td> 男<input name="gender" type="radio"> 女<input name="gender" type="radio"> </td> </tr> 注意： （1）当type="radio"的时候，input标签要去相同的name值，才能保证二选一的效果。 （2）文本区域和按钮使用了合并列，即<td colspan="2"> 表格其余几行的代码如下： <!—第四行 --> <tr> <td>爱好</td> <td> 体育<input type="checkbox"> 新闻<input type="checkbox"> 娱乐<input type="checkbox"> 学习<input type="checkbox"> </td> </tr> <!—第五行 --> <tr> <td>邮箱</td> <td><input type="email"></td> </tr> <!—第六行 --> <tr> <td>地址</td> <td> <select> <option>请选择省份</option> <option>北京</option> <option>上海</option> <option>河北</option> <option>江西</option> <option>安徽</option> <option>广东</option> </select> <select> <option>请选择城市</option> <option>南昌</option> <option>九江</option> <option>上饶</option> <option>吉安</option> <option>赣州</option> <option>抚州</option> </select> </td> </tr> <!—第七行 --> <tr> <td colspan="2"> <textarea rows="10" cols="50"> 服务条款XXXXXX </textarea> </td> </tr> <!—第八行 --> <tr align="center"> <td colspan="2"> 同意<input name="gender" type="radio"> 拒绝<input name="gender" type="radio"> </td> </tr> <!—第九行 --> <tr align="center"> <td colspan="2"> <input class="btn" type="submit" value="提交"> <input class="btn" type="reset" value="清空"> </td> </tr> 最终效果图如下所示。 7.10 最终效果图 提示：案例最后可以把表格的宽高属性去掉，并给表格添加背景颜色，如下代码所示。 <table align="center" border="1" cellpadding="0" cellspacing="0" bgcolor="#7FFFD4"> 四、学生完成开放型任务，教师巡回指导 开放型任务的任务卡如表7-2所示 表7-2 开放型任务卡 任务编号 07-2 任务名称 制作包含表单的网页 网页主题 个人信息注册页面 开放型任务描述 · 创建一个个人信息注册的网页文档 · 在网页文档中插入表单域 · 使用表格对网页的表单域进行划分 · 将图像、文本以及Flash动画的元素插入到相应的表格单元格中 · 将完成任务所需的表单项插入到表格单元格中 【课堂小结】 本次任务主要介绍了表单的基本概念、表单的用途和表单的具体用法；表单收集到的信息要提交到处理表单的页面，处理表单页面会将信息存储于网站数据库，而处理表单页面涉及动态网站的知识，如ASP、JSP 等，本次任务对此不做介绍。有兴趣的读者可以查看第十二章有关动态网页的内容。 【布置作业】 1. 表单在网页中能实现什么功能？ 2. 创建表单元素时要注意什么？ 3. 下列菜单和跳转菜单的区别是什么? 4. 表单元素通常包括那些？ 【创新型任务】 分小组选择科技强国、红色之旅、绿水青山为主题的含表单网页。通过推送学习强国学习视频的绿水青山栏目、看科技栏目、看党史的红色故事栏目，搜集相关表单素材，分小组设计科技强国、红色之旅、绿水青山为主题的含表单网页，渗透革命文化和社会主义先进文化教育、生态文明教育多个“思政元素线”。培养学生爱国情、强国志。 教学评价 考核要点 考核内容 标准分 计分 知识考核 (1)课前观看学习通微视频及完成微课下方进阶练习题 20   (2)学会制作表单、在网页中正确插入表单域 (3)在表单域中正确插入各种表单元素 (4)调用外部JavaScript脚本文件验证表单数据 能力考核 (5)能灵活运用各种表单到小组作业科技强国、红色之旅、绿水青山网页中 30   思政考核 (6)过程考核：考查学生的团队合作、创新意识、思维、专业技术能力等方面综合评价 20   (7)网页作品：对设计作品中体现的中国传统文化、生态文明意识、与软件专业有关的最新科技技术、创新性等方面进行评估 30   总计 100   评价方式 自我评价 小组评价 教师评价 考核得分       学科网（北京）股份有限公司 $$