模块5 任务14 制作在线调查表-表单的应用

PAGE\#000MERGEFORMAT001PAGE78计算机应用基础教学参考书（Windows7+Office2010）（第2版）书模块5高级应用任务14制作在线调查表——表单的应用教案1．教学整体设计教学单元名称网页交互设计课时2学时所属章节任务14制作在线调查表——表单的应用任务描述通过“制作在线调查表——表单的应用”任务，了解IISWeb服务器作用并掌握其安装与基础配置；理解完整表单系统的三部分组成，认识form标签及各类表单控件（文本、密码、单选、下拉、日期、文本域、提交/重置按钮）；能够插入表单、用表格布局调查表、设置控件属性与样式，并通过本机IP访问测试，建立服务器与网页交互的概念，培养规范表单页面布局习惯。任务分析在本任务中，需要完成以下操作：1.启用Windows功能安装IIS，设置站点物理路径与绑定本机IP；2.新建站点renwu14，附加外部CSS样式文件；3.插入表单，用表格布局调查表（8行2列）；4.依次插入文本、密码、单选按钮组、下拉选择、日期、文本域、提交/重置按钮，设置属性、样式、占位提示与必填项；5.通过本机IP访问预览调查表；理解完整表单系统组成。教学重点：IIS安装与基础站点配置；form表单插入；各类表单控件的插入与属性设置；提交按钮与重置按钮功能区别。教学难点：IIS服务器各项参数配置；理解完整表单系统（网页表单、服务器程序、数据库）三者关系；单选按钮组、下拉列表值设置。教学目标知识目标1.了解IISWeb服务器的作用，掌握IIS安装与基础配置；2.理解完整表单系统的三部分组成；3.认识form标签以及各类表单控件（文本、密码、单选、下拉选择、日期、文本域、提交/重置按钮）；4.掌握提交、重置按钮各自功能。能力目标1.能够完成Windows下IIS的安装、站点物理路径、IP绑定配置；2.在Dreamweaver插入表单，利用表格布局调查表；3.熟练插入各类表单元素并设置属性、样式、占位提示、必填项；4.通过本机IP访问测试表单页面。素养目标理解网页表单数据提交原理，建立服务器与网页交互的概念，培养规范表单页面布局习惯。考核方式过程考核：知识学习与技能掌握情况（30%）小组协作、积极参与讨论与分享任务成果（40%）终结考核：教师评价+小组互评+学生自评（30%）教学环境机房计算机配置如下：软件环境—Windows10、Dreamweaver2021、IIS组件、Edge浏览器、多媒体课件；网络环境——机房可访问互联网（本机IP测试）；素材资源——renwu14素材、style.css样式文件。

2．教学实施过程教学环节教学内容教师活动学生活动教学策略课程思政导入任务日常上网经常遇到问卷、注册页面，页面中填写信息、点击提交，数据如何传给服务器？引出表单。要测试网页服务，需要Web服务器IIS。展示在线调查表案例效果，引出任务14制作在线调查表。展示调查表案例，提出问题，讲解表单与Web服务器的作用，明确本课任务。思考表单数据提交原理，观察调查表效果，明确学习目标。情境导入法、问题驱动法从日常问卷、注册等真实场景切入，引导学生认识表单是人与网络交互的桥梁，体会信息技术服务生活的价值。知识讲授与操作演示任务一：IIS安装与配置Web站点1.控制面板→程序→启用或关闭Windows功能，勾选InternetInformationServices，安装IIS；2.打开IIS管理器，展开网站-DefaultWebSite，右键【管理网站-高级设置】，物理路径设为D:\task13；3.右键【编辑绑定】，设置本机IP地址（ipconfig查看）。任务二：新建站点与网页，附加CSS样式1.Dreamweaver2021新建站点“制作在线调查表”，站点文件夹renwu14，完成服务器选项基本设置；2.新建HTML网页，标题设为“在线调查表”；3.打开CSS设计器，附加现有CSS文件style.css。任务三：插入表单、表格布局调查表1.【插入→表单→表单】插入表单（设计视图红色虚线）；2.表单内插入8行2列表格，宽600px、边框0、边距0、间距20px；3.合并第一行单元格，水平居中，应用q3类，输入标题“在线调查表”；4.第2-7行第一列依次输入：用户名、密码、性别、专业、入学日期、建议/意见。任务四：插入各类表单控件1.用户名：插入【文本】，类q1，placeholder“请输入用户名”，勾选Required必填；2.密码：插入【密码】，类q1，placeholder“请输入密码”，勾选Required必填；3.性别：插入【单选按钮组】，标签与值设男、女，删除多余换行；4.专业：插入【选择】，类q1，列表值添加网络技术、数字媒体、软件技术；5.入学日期：插入【日期】，类q1；6.建议：插入【文本区域】，类q1；7.合并最后一行，居中，插入提交按钮、重置按钮，类q2；8.保存index.html，浏览器输入本机IP访问预览调查表。1.演示IIS安装，讲解物理路径、IP绑定作用，提醒机房系统权限问题；2.演示站点建立、附加外部CSS，说明CSS统一调查表样式；3.讲解form表单红色虚线含义与表格布局技巧；4.逐个演示表单控件插入与属性面板设置，讲解placeholder、Required必填，区分提交/重置按钮功能。机房巡回指导。1.跟随实操，完成IIS安装，配置物理路径与绑定IP；2.新建网页，附加style.css样式文件；3.插入表单与布局表格，完成文字录入与单元格合并；4.依次插入全部表单控件，设置样式与属性，用IP访问测试调查表。演示法、讲解法、任务驱动法表单设计需换位思考、以用户为中心，引导学生树立服务意识与规范布局习惯，体会技术服务于人的理念。任务五：IIS服务器知识1.IIS：InternetInformationServices，Windows的Web服务器组件；2.安装：Windows功能勾选IIS；3.配置要点：①高级设置设网站物理路径；②编辑绑定本机IP；③默认文档设首页文件名；④浏览器输入IP访问站点。任务六：表单系统与表单元素1.完整表单系统三部分：HTML表单网页、服务器处理程序、数据库；2.网页表单三部分：form表单标记、表单对象、表单按钮；3.常用控件：文本、密码、文本区域、单选按钮组、选择下拉列表、日期域、文件域；4.三种按钮：提交按钮（提交数据给服务器）、重置按钮（恢复初始状态）、普通按钮（配合JS自定义交互）。1.结合刚才实操讲解IIS各配置项作用；2.对照学生制作的调查表，讲解各个控件功能。1.记笔记，理解Web服务器作用；2.理解表单完整工作流程，分清各类控件用途。讲解法、对比教学法理解表单系统与服务器关系，培养系统思维与数据安全意识，体会“前端+后端”协同的工程逻辑。练习技能1.实操练习：制作一份简单用户注册调查表网页，包含用户名、密码、性别（单选）、爱好（复选框）、个人简介文本域、提交与重置按钮；2.设置控件placeholder占位提示与必填项，用本机IP访问测试页面；3.小组互助排查：IIS路径/IP配置错误、控件属性设置不当、表单无法提交等问题。1.布置实操任务，明确标准；2.机房巡回指导，重点处理IIS配置、表单控件属性等共性问题；3.集中演示纠错。1.独立制作注册调查表；2.遇到访问失败等问题，自主检查IIS与表单设置；3.小组互助交流。任务驱动法、异质分组合作学习法数据采集需合规，引导学生树立信息安全与隐私保护意识，培养严谨规范的职业习惯。展示作品1.作品提交规范：提交index.html表单页面或预览截图，命名格式：姓名_任务14_表单；2.评价维度：能完成IIS配置；能插入form表单与各类控件并设置属性；页面布局合理；能IP访问预览；3.学生自查作品，提交电子教室作业区。1.明确提交格式与标准；2.检查表单控件与IIS配置规范性；3.挑选典型作品点评。1.对照标准自查；2.规范命名，提交作业。实践教学法、自我评价法规范提交、有始有终，养成按标准交付成果的职业素养。评价总结1.课堂作品点评，梳理高频错误：①IIS路径/IP配置错误无法访问；②控件属性（placeholder、Required）遗漏；③混淆提交与重置按钮；2.知识点回顾：IIS服务器；完整表单系统组成；各类表单控件功能；提交与重置按钮区别。1.点评典型作品，梳理错误；2.提问引导学生回顾核心概念；3.布置课后作业。1.对照点评反思；2.巩固表单与IIS知识，查漏补缺。作品点评法、归纳总结法表单只是前端界面、本身不能