制作交互功能的网页—表单网页的制作

制作交互功能的网页—表单网页的制作
制作交互功能的网页—表单网页的制作

教学课题:制作交互功能的网页——表单网页的制作

教学背景:

在此之前,学生已经对制作网页的基本方法有了清楚地认识,并基本完成了自己的站点,此内容是网页制作部分的进一步提升,让学生对网页制作进行更加深入的探究和制作,通过学习制作具有交互功能的网页,进一步感受网页制作的乐趣,激发更大的创造热情,培养学习兴趣。

教材分析:

本节课是苏教版初中信息技术(下册)第十章“主题网站设计”的第2节“制作网站”中的第5小节,在本章节中起着承上启下的作用。在前面几小节,已经介绍了如何规划网站、如何建立站点及基本网页的制作,这节课通过学习表单网页的设计,学会与人交流,正确收集反馈意见。在后续的课程中继续对网页制作进行深化,本节课又为后续课程奠定了基础。

学生分析:

学生在学习本节内容之前,已经学习过因特网的相关知识、会上网,并且已经掌握常用网络工具软件的使用,如QQ、E-mail等等,并且有着浓厚的兴趣。大部分学生只停留在利用QQ聊天、进行网络游戏、收发E-mail等阶段,对申请QQ号码和E-mail时的网页结构形式知之甚少。在设计之前应让学生看或简单完成几个平时他们并不陌生的这类网页,并告诉他们很快他们自己也能成为这类设计的幕后策划者,使得同学们对本课的学习充满期待,绝大多数学生都有亲自动手一试的欲望。

教学目标:

1.知识与技能:了解交互网页概念,学会表单的功能及表单元件的使用方法;掌握表单元件的功能及使用方法,掌握表单各组件属性设置方法。

2.过程与方法:通过学习与创作,使学生感受表单在网页中的作用,体验网页的交互功能。

3.情感态度与价值观:通过“动物保护知多少”表单网页设计,让学生在运用、学习、制作的过程中感受表单给网页带来的交互作用,逐步提升环保意识。

4.行为与创新:

网页的设计模式不是单一的,可以让学生自己有所发挥,培养学生的信息素养和用信息技术解决问题的能力。

教学策略:

在教学中有效利用互联网,鼓励学生利用互联网进行自主探究,帮助学生丰富知识体系,多引导,多交流,在平等和谐的环境中逐步击破各个知识要点,理解表单网页的作用及制作方法。为培养学生自主学习的习惯与能力,尽量少讲,更多的让学生自己学习教师提供的学件。课前收集本交互网页制作过程中所需要的各种素材,给予学生充分自主选择的机会;提供制作网页的操作指南及录像帮助,使学生在平等愉快的气氛中自主的学习,真正成为课堂的主人,从而更好的完成教学目标。

教学重点:

1、表单元件的正确插入

2、表单数据的搜集

教学难点:

1、表单元件的属性设置

2、根据实际需要正确运用表单元件

教学方法:讲授法,演示法,任务驱动法

教学过程:

一.创设情境,激趣引入

教师播放一段视频(通过网络搜索并截取),展示目前非常严重的空气污染,使学生自然地融入课堂。

师:同学们都知道目前环境污染非常严重,你对我们南京的空气污染到底了解多少呢?我们一起来做一份问卷调查吧!

给出网址,学生填写问卷调查https://www.360docs.net/doc/fe7823058.html,/146491-283517.aspx

设计意图:通过创设接近学生生活的情境使学生尽快融入课堂,激发学生学习热情并积极思考处理问题的方法,唤起学生保护环境的意识,恰当的运用互联网,使学生体会表单的运用。

二.揭示课题,自主探究

师:刚才同学们填写的问卷调查,被广泛的运用在网页中,用于收集信息,这就是我们今天要学习制作的具有交互功能的网页——表单网页。

教师展示PPT课件,使学生明确表单网页的概念。

什么是表单?表单是用于实现网页浏览者与服务器(或者说网页所有者)之间信息交互的一种页面元素,在WWW上它被广泛用于各种信息的搜集和反馈。

师:同学们还用过哪些表单?给大家2分钟,上网去体验一下表单还经常运用在哪些地方,把你体验的页面展示给大家,跟大家一起分享吧!

学生上网体验表单。

教师展示学生的页面,并做小结,用PPT课件展示样例:表单通常用在新用户注册、会员登记表、留言薄、问卷调查中,用于各种信息的搜集和反馈,便于不断完善网站的功能,提供更好的服务,吸引更多的浏览者。

设计意图:自然地衔接,从而引出课题,让学生明确学习任务,通过自主探究,上网体验表单的功能及运用,从而更好的理解表单网页的作用,同时也使每一位学生都参入到课堂,激发学生的制作热情,克服刚刚接触表单网页的困难感,为后续表单网页的制作打下基础。

三.深入剖析,精讲精练

师:我们已经对表单网页有个直观的认识,那么我们能不能自己动手制作一个表单网页来丰富我们的网站呢?今天我们就一起来试一试吧!首先我们来认识一下表单网页中的表单元件。

教师播放PPT,展示一个表单网页的样例,通过PPT的动画效果,逐个介绍几个常用的表单元件:单行文本框、单选按钮、下拉菜单、复选框、滚动文本框、按钮。

教师边介绍边请学生说说这些表单元件一般都用在什么地方,什么时候需要用这些表单元件来帮助我们搜集信息?如果遇到问题可以上网搜索,自主探究,教师及时给予指导。

教师演示表单的插入方法。

教师布置任务一:完成简单的个人信息的表单制作。

教师给出学件,便于学生自主探究,巡视并及时指出学生操作过程中的问题。

任务一图——个人信息表单

学生完成任务一,有问题参考学件,根据老师的提示修改自己网页中存在的问题。

教师展示学生制作的任务一表单,反馈任务一中比较普遍的问题。学生认真思考老师的提问,并积极的回答。

教师布置任务二:完善并美化个人信息表单。

教师给出学件,便于学生自主探究,巡视并及时指出学生操作过程中的问题。

任务二图——完善并美化个人信息表单

学生完成任务二,有问题参考学件,根据老师的提示修改自己网页中存在的问题。

教师讲解制作中特别需要注意的问题:性别的调查是用两个单选按钮,注意同一组的单选按钮的“组名称”应该一样。请学生演示下拉菜单中选项的添加方法。

教师布置提高任务:完成“知识问答”表单制作。

学生根据老师给的文字,使用正确的表单元件,完成整个表单网页的制作。和老师一起分析同学的作品,积极回答问题。

教师巡视学生制作情况,给予及时辅导并解答学生的问题,使学生不断碰撞思维,擦出火花,激发更多的灵感,使自己的作品更加别具一格。

教师演示学生作品,分析学生所运用的表单元件,讲解表单的提交。

设计意图:通过例子深入剖析各个表单元件,使学生明确各个表单元件的作用及适用范围,在制作过程中及时提供给学生帮助,包括网络支持和自主探究的学件,有效的培养学生自主探究的能力,通过设计不同层次的任务,分层次学习,使学生真正成为课堂的主人!

四.师生互评,共同提高

利用网络事先发布做好的评价页面,给出评价指标,学生登陆评价网页进行自评,填写评价表,学生打分后能即时看到自己的成绩,争做五星全能小冠军。

教师展示学生制作好的表单,先让学生评价,其中的闪光点和需要修改的地方。

学生评价其他同学的表格,大胆说出自己的想法。

教师评价,提出合理化建议,激励学生更好的修改自己的表单。

设计思想:通过网络发布评价表便于学生自评打分后就能看到自己的成绩,使学生对本节课所学做一次回顾,对照评价指标客观的评价自己,通过成果展示,师生共同评价,达到更客观、更公正的评价自己与他人的作品,并能取长补短,不断进步,共同提高。

五.教学总结,设疑激趣

师:今天,我们学习制作了表单网页,这样可以更加充实我们的网站,搜集浏览者的信息,今天我们主要制作了环保知识表单,同学们也可以根据自己网站的主题制作符合自己网站特色的表单,如趣味测试、留言簿等。同学们可能还有个疑问,我们点“提交”按钮的时候,我们填写的表单内容,提交到什么地方了呢?在哪里能看到我们填写的信息呢?这个问题留给大家课后去探究,记住,我们的法宝:有效地利用互联网!

设计思想:梳理本节课的知识,引导学生再次回顾本节课所学知识,深入理解本节课的重难点,抛出更深层次的问题,引发学生思考,鼓励学生利用互联网进一步探索更深层次的知识,培养运用信息技术解决问题的能力。

教学反思:

本节课有效地利用互联网结合教学内容开展教学,充分利用互联网资源,注重培养学生的自主探究能力,从本课教与学的情况来看,由于课前做了一定的调查与准备,所以教学效果还是比较满意的,但仍存在许多不足。

可取之处表现在:

1、通过互联网和教学学件辅助教学,能极大地调动学生的学习积极性,学生发现问题能够自主解决,从而培养学生自主探究学习的能力,激发学生凡事要深入了解的兴趣,使之在学习的过程中,体验着参与之乐、思维之趣、成功之悦。

2、课堂创设的情境学生非常感兴趣,也与我们的生活息息相关,能够很快的融入到课堂中,在建构知识体系中采用先产生直观的感性认识逐步升华到理解制作方法的理性认识,课堂中与学生不断互动,使学生紧跟老师的思维去解决问题。

3、本节课学生积极动手参与率高,整体来看效果较好,目标达成率较高;分层次的任务设置给了基础好的学生更多的探索空间,个别同学具有一定的创新性,甚至比老师设计的更有创意。

不足需改进之处:

1、在课堂中运用网络辅助教学,因此要收放有度,控制得当。不能给学生太多放手的时间,控制好“度”,确保教学内容的顺利完成。在一开始让学生利用互联网去体验表单所用之处,并展示给其他同学看,效果非常直观,但是所用时间过长,影响了后续的教学。

2、在评价环节,采用学生自评与师生互评的方式,必须使学生能够客观公正的评价自己的作品,不能流于形式,教师必须对学生作品的评价标准有较为全面地把握,鼓励学生客观的评价自己与他人的作品。

3、由于此节课为了让学生夯实基础,主要制作了教师设置的任务及主题例子,如果能给学生更大的空间,放手让学生自己动手,制作具有个性特征的表单网页就更好了!

HTML网页设计(表单元素)

HTML网页设计(表单元素) 1.什么是表单 表单(form)是由一个或多个文本输入框、可单击的按钮、多选框、下拉菜单和图像按钮等组成,所有这些都放在

标签在。一个文档中可以包含多个表单,而且每个表单可以放置通常的主体内容(包括文字和图像在内) Form标签 设计者可以将表单放在文档主体中的任何位置,但前提是将表单的缘故都放在标签和
结束标签之间。

2.表单元素 在

标签中,可以包含以下5个标签。 Input标签 对于大量通常的表单内元素,可以使用标签来进行定义,其中包括文本字段、多选列表、可单击的图像和提交按钮等。虽然标签中有许多属性,但对每个元素来说,只有type和name属性是必须的。当然,根据指定的比哦啊单元素类型,也可以设置一些其

可以使用标签中的name属性来为字段命名(表单提交到处理过程中使用的字段,这种字段的说明可以参阅前面介绍)。从技术角度上讲,name属性的值是任意的一个字符串,但是我们建议最好采用没有嵌入空格或标点的字符串。标签中必须的type属性可以用来选择控件的类型,其属性值如下表所示。 最有用也是最常见的表单输入元素时文字域,在浏览器窗口中显示为一行的空框,它接收用输入的一行信息,当你用户将表单提交给服务器时,这些信息就变成了元素值。 范例代码:

密码域 将type属性值设置为password,就可以创建一个密码域。传统文本域的其他属性和语义也可以应用于密码域。应用呢密码域时必须制定一个字段的名称,这样就可以为该段字段设置size和maxlength属性,并可以设置一个初见时的vlaue。 范例代码: 文件域(file) 复选框(checked) 单选框(ridio) 普通按钮(button) 设置普通按钮(button)代码: 重置按钮(Reset) Textarea标签 作为表单的一部分,