说课稿表单.docx

说课稿表单.docx

《说课稿表单.docx》由会员分享，可在线阅读，更多相关《说课稿表单.docx（13页珍藏版）》请在冰豆网上搜索。

说课稿表单

说课稿

《建立表单》

姓名:

XXX

XXXXXXXXXXXXXXXXXX学校

《建立表单》说课稿

教材分析

一．教材的地位和作用

《建立表单》选自高等教育出版社出版的中等职业技术学校信息类专业《计算机网络应用基础》的第五章第六节内容。

《计算机网络应用基础》是信息类专业学生在现代计算机应用中必须掌握的一门基础课程，同时在本书中也介绍了计算机的程序设计基础，在学生的思想中扎下一个计算机高级应用的模型。

计算机网络最主要的目的是资源共享，在一般用户看来基本上都体现在使用WWW浏览器等网络软件的平台上，本课内容是最常用的WWW浏览器的组成部分之一；同时对于所有信息类专业学生而言老师们应该早就给他们建立起了一个“交互”的观念，而友好的界面又最能体现“交互”的应用，本节内容旨在教会学生如何完成表单友好界面设置。

我预备安排一个课时的时间来完成教学。

二．教学的重点和难点

教学重点

根据信息类专业学生的技能要求，和信息职业技能考核的要求，并结合教学大纲，确定本课的教学重点：

1表单的主要作用和捆绑的后台处理程序

2表单的语言结构和控件类型

教学难点

根据学生现有认知水平与本节所学内容的相对难易程度，确定本课的教学难点：

1表单控件属性的详细设定

2表单的交互式界面设计

教学目标

一．确立依据

✧中等职业学校信息类专业的培养目标及该专业学生就业岗位群技能要求；

✧信息类专业职业技能考核要求；

✧信息类专业教学大纲；

✧学生在知识、能力、素质等方面的要求及学生现有的认知水平和理解能力。

二．知识目标

1了解表单的结构及组成

2掌握表单控件的交互模式

3应用简单的表单设计制作

三．能力目标

学习能力：

1培养学生观察能力、分析能力和归纳问题的能力

2利用对比、补充、归纳，提高学生的理解能力和形象化思维能力

专业能力：

1培养学生运用所学知识解决实际问题的能力

2实例解析与模块分析相结合，培养学生专业水平能力

四．情感目标

1培养学生热爱自身专业的专业感情

2培养学生勤于动脑、勇于实践的习惯

教学分析

一．指导思想

以学生为主体：

有利于学生积累知识、提高技能、完善人格

以能力为本位：

通过教学活动培养学生学习能力与专业能力

以就业为导向：

通过教学活动积累专业知识，掌握职业技能

二．教学方法

采用“创设情景—提问解析—实例引入—模块分析—实践应用—练习巩固—归纳总结”的教学模式。

实现学生对各个知识点的认知、理解及应用，以及理论知识的掌握和专业技能的形成。

三．教法分析

1在教学环境上，尽量体现职业教育教学特点，贴近就业环境，利用学校的多媒体教室、校园局域网等相关教学设施、设备及教学手段来实现交互界面设计的情景。

2理论与实践相结合，知识与技能相结合。

3坚持以学生为主体，强调探究式学习方法。

因其具有很强的问题性、实践性、参与性和开放性。

经过探究而获得理智与情感体验、建立知识构架、更能掌握解决问题的方法。

四．学法分析

1．学情分析

◆教学对象：

中职学校信息类专业二年级学生。

◆学生特点：

这些孩子都在十五、六岁左右，思维活跃，个性张扬，具有较强的独立意识，自尊心和自信心。

在本课之前，他们已经学习了关于HTML的标记语言和网页的一些组成要素，特别是上堂课中对表格的掌握已在他们头脑中形成了一个模糊的“框架”概念；但是他们的学习习惯较差，自我约束力较差，缺乏积极获取知识的主动性，也没有良好的学习方法。

2．学法指导

◆强调“探究式学习”

营造师生互动和生生互动的学习环境。

突出学生的主体性：

重过程、重应用、重体验、全员参与，营造开放和谐的教学氛围，构建开拓创新的教学模式。

◆理论与实践相结合

在学生充分理解和掌握理论知识的基础之上，运用实作手段用理论指导实践、让实践升华理论。

教学过程

一．课前准备复习巩固（3分钟）

因为“建立表单”是在本章前面五节内容上的升华，进一步强化学生对HTML语言的认知及应用，所以在新课开始前有必要对前面的内容作简单复习，并侧重强调表格的应用，为以后规范化的界面设计提供铺垫。

Ø课前准备

教室在课前准备好本堂课程所需的教案、课件；准备好需要展示的表单样本；准备好与课程相关的最新资讯。

如：

全球最大的中文Web技术教程：

有效网页表单的八条规则：

1.保守性的搭建,并带有目的性的设计表单

2.让你的表单适应它的风格

3.用你所需

4.在必要的时候才使用简洁的描述

5.主动沟通

6.把表单分成划分成许多小的部分

7.使用有意义的,关联上下文的错误信息

8.当用户点击提交按钮时,他们会自以为已经完成了,打算离开.基本上他们会说,“这是你要的信息,再见.”

优秀表单样本：

在网页设计中浏览者的回馈信息是十分重要的，这是增加用户粘性最最直接的方式。

而那些回馈页面都要设计一些表格来给浏览者填写。

如果你把这些表格设计的枯燥无味，你可能就会失去很多的浏览者，而且他们可能永远都不会再回来。

所以给出一个好的创意来优化你的这个重要页面是非常重要的一件事。

http:

//www.z-

全新改进的HTML5表单创建：

经历了12年之久，万维网的核心语言（HTML或超文本标记语言）终于迎来了HTML5主要修订版本。

虽然万众期待的版本仍处于测试阶段并且没有宣布正式推出的日期，HTML5的网页设计师和程序员已经就有关最新功能展开了热烈讨论。

根据W3C，HTML5新特性的目的是在改善嵌入诸如视频的多媒体支持，提供更好的用户体验和更简单的编程。

虽然HTML4中已经取得了巨大成功，（甚至被认为最成功的标记格式已经发布）在互联网世界的每个人都耐心等待，浏览器更新时得到最新的HTML版本。

随着时间推移，人们都很纳闷，还等什么呢？

事实上HTML5已经被很多浏览器支持，比如Safari,Chrome,FireFox,Opera,以及其他主流浏览器。

即使是IE9也准备好了支持新的HTML5。

HTML5的好处是，它是向后兼容的，因而，如果你乐于更新你的网站，现在你就可以。

只是有几个浏览器不完全兼容HTML5。

升级到HTML5是相当容易的，因为它与HTML4兼容。

事实上，我们没有理由摒弃HTML4的所有，因为HTML5只是一个简单的增加一堆新而酷的功能添加到HTML4核心语言。

升级（如果你是这样认为）到HTML5是非常简单的。

你所需要做的的是修改你的DOCTYPE。

这种新的更新有助于让事情变得简单，而在HTML4中有你可以使用不同的文档类型，使得这一点更加棘手。

你现在就可以更新你所有的网站，它们不会崩溃，因为所有HTML4的标签在HTML5还是100％支持的。

HTML5的表单定义了十几个新的输入类型和特性，这些新增元素可以让程序员可以过个好日子。

输入框占位符

我觉得这是HTML5新特性中我最爱的。

所有开发人员都使用JavaScript和jQuery做输入框占位符，而在HTML5中，开发人员可以非常容易的显示一个占位符。

什么是占位符？

占位符就是出现在输入框的提示文本，当你点击输入栏位，它就自动消失。

你可以把用户应该输入的文本样例在文本框提示出来。

一个例子，如果你有一个电话号码输入框，你可以设置占位符（XXX）XXX-XXXX，点击它们时就会消失。

我相信你已经看过很多。

支持情况如下（本人开发过Android，是支持的——译者注）

IEFFSafariChromeOperaiphoneAndroid

-3.7+4+4+11+4+-

自动焦点事件

目前HTML4要做到自动焦点的方式是使用JavaScript把焦点放在一个表单的第一个输入字段。

HTML5只要加载一个网页，网页自动将焦点移到特定的输入框，和JavaScript一样。

区别是什么？

由于现在只是一个HTML标记，用户可以很容易地在他们的浏览器禁用此属性。

并非所有浏览器都支持自动对焦功能，但浏览器不只是简单地忽略该属性。

如果你想所有浏览器都行得通，只需添加新的HTML5自动对焦属性，然后检测浏览器是否支持自动对焦。

如果可以就不必使用自动对焦的脚本，如果没有的话，就要添加自动对焦的脚本。

支持情况

FFIESafariChromeOperaiphoneAndroid

-4+4+3+10+--

HTML新定义13个输入类型

电子邮件

我要说的第一个输入框是电子邮件地址。

那些不支持新类型的旧版浏览器也只是把它们看作一个文本框，99%的用户不会注意到这个变化，直到他们提交表单（此时会有表单验证）。

iPhone的用户应该知道在那些邮件地址的输入框，当输入@和a的时候会出现一个简单容易的键盘。

如果你用过iPhone,你懂的。

网址

再说说网址输入框。

如果需要输入网址，期望输入的就像。

现在在网址类型输入框会出现像iPhone里面一样的一个可变化的虚拟键盘用户可以很方便输入斜线和.com。

同样的，在提交表单之前用户对这些毫不知情。

数字

在过去要得到匹配的数字，你不得不使用jquery这样的脚本来帮助验证输入。

HTML5增加了数字类型。

还增加了一些额外的属性（可选）：

Min：

指定输入框可接受的最小输入数字。

Max：

你猜对了，就是允许输入的最大数字。

Step:

属性输入域合法的间隔，默认是1.

如上图，只允许输入数字（大多数情况下不会注意到这些，直到提交的时候提示错误），只有0，2，4合法（6不合法因为step是10，合法的是0，10，20...——译者注）。

NumbersasaSlider数字滑动条

我觉得这个真酷。

HTML5允许你使用一个新的类型叫range，输入框变成一个滑动条。

你的网站表单可以使用滑动条了，这很酷吧。

它的属性标记和数字类型一样，只是把类型设置type='number'改成type='range'。

日历表

迄今为止最好的新增元素，名为date和datetime的日期选择器类型（还有其他额外的date/time类型，如时间，星期，月份，以及本地日历）。

很多JavaScript框架如jQueryUI和YIU已经具备了这些控件，但增加一个日历选择器还是挺烦人的。

HTML5定义一个新的本地日期选择器，不必包括使用页面上的脚本。

截至目前，Opera是一个唯一完全支持此功能的，对于其他浏览器，你可以做一个备用脚本以备该浏览器不支持。

不过，最终，所有的浏览器都会更新的。

搜索

HTML5增加了搜索输入框类型。

这没什么，但对一些用户来说是很好的变化。

它可以简单的把输入框自动圆边，当你开始输入时，它右边会有一个小X。

目前并不是所有的浏览器支持。

颜色

HTML5还定义类型的颜色，它可以让你选择一种颜色，返回hexademical值。

Opera11是唯一支持这种类型的浏览器。

不过应该不会有很多人使用这个类型，所以不支持也不是什么大问题。

表单验证

上面我们谈到有关这些新的输入类型，如电子邮件，日期，数量等HTML5新元素中，最令人兴奋的新特性莫过于表单验证。

大多数开发人员都做了表单验证，无论是客户端或服务器端（我们两个都做！

）。

也许HTML5的表单验证器可能无法取代你的服务器端验证，但它肯定能最终取代你的客户端验证。

JavaScript验证的问题是，用户很容易绕过它，可以很容易绕过它只需禁用JavaScript。

现在HTML5，你不用有此担心。

下面是Chrome12的一个例子。

所有的浏览器和操作系统对于错误有不同的显示方式，不过这是一个例子，让你看清错误可能发生的样子。

所有的错误都是HTML5原生提示的，并没有使用JavaScript。

IEFFSafariChromeOperaIphoneAndriod

-4+5+10+9+--

必需字段

HTML5的表单验证并不仅仅局限于验证字段的类型，它还允许调用一个新的额外的标记，required。

这个新属性允许开发人员验证输入框是否填写，无需使用JavaScript。

每个开发人员都知道这些更新对缩短开发周期和增强的用户体验都是至关重要。

一旦所有的浏览器接受了HTML5，新一代的网站将超过任何人的期望。

那么你有了它。

你可以HTML5中找到一个快速入门指南。

如果你可以理解这篇文章的任何东西，请记住，HTML5不是什么可怕的麻烦。

它将大大有助于开发者，而只要你有准备所有HTML4网站已经可以升级了！

Ø复习巩固

教师提问、抽生作答：

1请同学们说出我们前面所学的HTML标记的语法。

答案：

容器型标记→<起始标记>内容or非容器型标记→<标记>

2请同学们简述表格的结构形式。

答案：

常规表格，行合并，列合并以及表格修饰

二．创设情景导入新课（4分钟）

通过展示已准备好的表单界面实例，与学生交流计算机和人交互的相关内容及计算机网络中HTML语言的知识要点。

Ø创设情境

找一名学生表演：

学生在讲台一端，教师在另一端，相向而行，初次见面，相互问候。

教师提问：

在刚才的演绎中人与人之间的交流的建立是这样的，那么人与计算机之间的交互又是什么样的呢？

（此处由学生分组讨论，自由发言）

教师释疑：

所谓的“交流和交互”指的是对象与对象之间的相互沟通。

而人与计算机的交互在网络时代最重要表现形式就是表单，它能收集人们的资料供给计算机进行处理、分类，同时提供给有需求的用户使用“整理后的信息”。

例：

网络调查。

Ø导入新课

根据上面的交流讨论教师引导学生设问：

表单的界面到底是什么样的呢？

（展示预先准备好的第一个表单样本）

（设计目的：

通过与学生的交流引导学生进入到对“交互”的认知，让学生在交流中形成对“交互界面”的认知和向往，激发学生的学习热情和求知欲望。

）

三．分组探究掌握理论（8分钟）

衔接刚才的问题让学生带着浓厚的兴趣马上让他们进入到对表单知识的学习中，从CGI的认识到对表单标记格式的了解再到表单控件的掌握。

Ø分组探究

（在平时的教学过程中，我已将学生按照“以好带差，中等突破”的原则进行了相关的小组分配，并在教学进程的不断进行中，不断优化分组情况。

）

学生带着刚刚的问题进入到课本基础知识的自我学习当中，并抽查具有代表性的个别小组小组长总结本组的讨论、认识和理解情况。

Ø掌握理论

在教师抽查部分学习小组讨论结果的过程中，可能有些小组的总结内容会脱离本节教学的主题，此时教师可结合课本作出适当的引导将学生的认识拉回到本课的学习环境中。

在结束抽查的同时带着学生进入到课本基础理论认知的学习中，详细解析与实作内容相关的几个概念“CGI”、“表单标记”、“表单控件类型”及“控件属性”等知识。

CGI程序：

网络服务器和外部应用程序的接口，是运行在服务器上的一段程序。

表单标记：

……

表单控件类型：

在“TYPE”后取相应的值，得到相应的控件。

如：

TEXT→文本框；RADIO→单选框

控件属性：

每种控件都由自己相应的特殊属性设置，但是所有控件都由一些相同的属性。

NAME属性→CGI的引用名；VALUE属性→控件的提交值；MAXLENGTH属性→控件能容纳的最大字符数等等

（在学生探究的基础上引导学生理解课本中得理论内容形成基础知识构架。

）

四．实例探究指导认知（3分钟）

在学生基本掌握了理论知识构架的基础之上，向他们演示完成一个简单的表单设计的过程，并在设计的过程的强调“人机交互”的具体表现，达到“明确应用、强化学习目标”的目的。

Ø实例探究

承接前面的基础理论知识之后，教师首先向学生在教学平台上演示一个简单表单的设计过程。

提示学生注意观察各个基础理论知识的应用，特别是控件属性的设置。

程序：

        会员注册

Ø指导认知

在教师演示的过程中，强调表单的“交互式”形象化设计及各个控件的属性设置异同所产生的效果。

让学生在此过程中尽量掌握表单的界面组成和表单的控件属性。

（表单控件属性的详细设定及表单界面的组成样式是本课的难点，为了让学生突破难点，我针对学生的具体情况在列举实例时进行多个控件的详细属性设置，并对产生的效果进行对比，养成学生的形象化思维应用能力。

）

五．动手实践培养技能（20分钟）

接下来我们进入动手实践、培养技能的环节，将理论结合到实践，将知识转化为技能。

Ø动手实践

组织学生在观察教室演示、掌握操作技巧的基础上进入到实践操作中。

并提示学生在设计之前必须想好我们的“设计”应该针对什么样的“用户”？

，这些用户的需求是什么？

（展示预先准备好的第二个表单样本，对比“第一个”和“第二个”，并分析）

Ø培养技能

教师强调学生以刚刚的展示实例作为模板进行创新设计，同时提出等下我们展示优秀作品时，其余学生要对被抽到的作品做出像刚才老师那样的“必要客户分析”。

本环节通过四个方面（1．界面雏形规划；2．控件的属性及功能分析；3．创新设计；4．界面的语言实施）的具体实施让学生对“表单的设计”具有更加明朗和深刻的应用实践能力，让学生真正把知识转化为技能。

六．作品展示点评优缺（5分钟）

在学生充分实作的基础上，将学生的作品展示出来，以师生共同探讨的形式连接实践、升华知识。

Ø作品展示

在学生操作的过程中，教室通过网络多媒体教室的终端查看并抽取需要展示的学生作品。

展示被选中的学生作品，并抽部分同学从“用户的角度”来说说对当前作品的看法。

Ø点评优缺

教师点评展示作品的优点和缺点，并将其对应到相关的用户群体中，提出“友好界面”的概念，为后面的教学内容埋下伏笔，同时引导学生的就业导向，将“用户”的思想置于首位的创造思想，使他们将来能更好的适应社会的人才需求。

七．课堂小结布置作业（2分钟）

总结本节内容，布置课后作业。

Ø小结：

表单只是“人机交互”的一个简单实例，但是通过对表单的认知、表单控件的理解以及表单的实作应用让我们懂得应该如何与计算机进行交流，并且我们也学会了表单操作的基本技能，同时形成我们良好的就业素质，一切以用户作为衡量标准，也是我们养成“计算机思维”的一个重要环节。

Ø作业：

理论题形成对“表单”的认知总结。

实践题完成对任意用户（同学、老师或亲戚朋友等）的一个表单界面设计。

板书设计