日照职业技术学院RIZHAO

POLYTECHNIC《Web网站开发技术》教案1课题1-4表单标记课型理实一体化授课班级授课时数教学目标理解表单的构成,可以快速创建表单;掌握表单相关标记,能够创建具有相应功能的表单控件;掌握表单样式的控制,能够美化表单界面教学重难点教学重点:认识表单、表单元素、input元素及属性、其他表单元素、CSS控制表单样式.
措施:通过上机操作加强学习和补充案例进行巩固.
学情分析教学效果教后记日照职业技术学院RIZHAOPOLYTECHNIC《Web网站开发技术》教案2任务1表单标记了解表单能够创建表单掌握表单的属性分组讨论对新课进行讲解前,先让学生分组讨论以下问题:浏览网页的时候,我们经常需要在表单中的文本框中填写用户名、密码等.
其实,HTML表单可以搜集不同类型的用户输入.
那么,请同学们讨论下:什么是"表单",以及表单都有哪些作用请小组代表对以上问题发表见解.
教师对上述问题进行解释:对于"表单"大家并不陌生,它们在互联网上随处可见,例如注册页面中的用户名和密码输入、性别选择、提交按钮等都是用表单相关的标记定义的.
简单地说,"表单"是网页上用于输入信息的区域,它的主要功能是收集用户信息,并将这些信息传递给后台服务器,实现网页与用户的沟通.
知识点讲解讲解"表单的构成"(1)、教师通过PPT对网页中常见的表单进行展示.
(2)、教师通过PPT对表单的概念及构成进行讲解,并以网页中常见表单的构成元素进行举例.
表单控件(包含单行文本输入框、密码输入框、提交按钮等)提示信息表单域(容纳表单控件和提示信息)日照职业技术学院RIZHAOPOLYTECHNIC《Web网站开发技术》教案3(3)、教师展示PPT,对构成表单的表单控件、提示信息和表单域进行具体讲解.
(4)、教师对如何创建表单进行讲解,并进行代码演示.
(5)、教师对常用的表单控件进行简单介绍,并进行列表说明.
(6)、学生练习,教师巡视,对疑难问题进行解答.
讲解"创建表单"(1)、教师对"创建表单的基本语法格式"进行讲解,并举例说明.
(2)、教师指出"创建表单"时需要注意的问题,并给与解答.
(3)、学生练习,教师巡视,对疑难问题进行解答.
讲解"表单属性"(1)、教师和学生互动:在HTML5中,表单拥有多个属性,通过设置表单属性可以实现提交方式、自动完成、表单验证等不同的表单功能.
下面将对form标记的相关属性进行讲解.
(2)、教师指出表单属性包括action属性、method属性、name属性、autocomplete属性及novalidate属性.
(3)、教师分别对action属性、method属性、name属性、autocomplete属性及novalidate属性及其属性值进行讲解,并使用代码进行演示.
(4)、教师指出使用"表单属性"时需要注意的问题,并给与解答.
(5)、学生练习,教师巡视,对疑难问题进行解答.
阶段小结小结重点:创建表单、表单属性.
答疑教师询问学生对于知识点还有什么不理解的地方.
针对学生不理解的知识点给与解释.
巩固练习巩固本课时知识点学完知识点后,教师带领学生对本课时所学知识点进行回顾.
以此使学生更熟练地掌握表单相关属性,并学会如何创建表单.
通过"补充案例"加强学习教师分发测试题目及案例素材给学生,对于掌握较好的同学,可以通过补充案例对相关知识点进行巩固.
布置作业完成"补充案例",通过平台提交给教师,教师下节课进行点评.
预习【输入标记Input及属性】.
日照职业技术学院RIZHAOPOLYTECHNIC《Web网站开发技术》教案4任务2输入标记了解输入标记的各种属性掌握各种属性的用法.
分组讨论对新课进行讲解前,先让学生分组讨论以下问题:上一节中,我们认识了网页中的表单.
元素是表单中最常见的元素,网页中常见的单行文本框、单选按钮、复选框等都是通过它定义的.
在HTML5中,标记通过type属性可以设置多种输入类型,请分别进行列举请小组代表对以上问题发表见解.
教师对上述问题进行解释:在HTML5中,标记拥有多种输入类型,如下表所示.
属性属性值描述typetext单行文本输入框password密码输入框radio单选按钮checkbox复选框button普通按钮submit提交按钮reset重置按钮image图像形式的提交按钮hidden隐藏域file文件域emaile-mail地址的输入域urlURL地址的输入域number数值的输入域range一定范围内数字值的输入域Datepickers(date,month,week,time,datetime,datetime-local)日期和时间的输入类型search搜索域color颜色输入类型tel电话号码输入类型知识点讲解讲解"Input元素的type属性"(1)、教师和学生互动:在HTML5中,元素拥有多个type属性值,用日照职业技术学院RIZHAOPOLYTECHNIC《Web网站开发技术》教案5于定义不同的控件类型.
那么,通过type属性可以定义哪些表单控件呢(2)、教师通过PPT对"Input元素的type属性"定义的单行文本输入框、单选按钮、复选框、提交按钮、email类型、tel类型、search类型等控件进行展示.
单行文本输入框text密码输入框password单选按钮radio复选框checkbox文件域file提交按钮submit重置按钮reset普通按钮buttom图像域image(3)、教师对Input元素的type属性进行讲解,并进行代码演示.
(4)教师分别对不同的type属性定义的控件类型进行展示,并对比其应用效果.
(5)、教师指出应用"Input元素的type属性"时需要注意的问题,并给予解答.
(6)、学生练习,教师巡视,对疑难问题进行解答.
讲解"Input元素的其他属性"(1)、教师和学生互动:除了type属性之外,标记还可以定义很多其他的属性,以实现不同的功能.
下面将介绍input元素的几种常用属性.
(2)、教师指出input元素还拥有autofocus属性、form属性、list属性、multiple属性、min、max和step属性、pattern属性、placeholder属性以及required属性.
(3)、教师分别对autofocus属性、form属性、list属性、multiple属性、min、max和step属性、pattern属性、placeholder属性以及required属性进行讲解,并进行代码演示.
(4)、教师指出应用"Input元素的其他属性"时需要注意的问题,并给予解答.
(5)、学生练习,教师巡视,对疑难问题进行解答.
阶段小结小结重点:Input元素的type属性.
答疑教师询问学生对于知识点还有什么不理解的地方.
针对学生不理解的知识点给与解释.
巩固练习巩固本课时知识点学完知识点后,教师带领学生对本课时所学知识点进行回顾.
以此使学生更熟练地使用input元素的相关属性创建不同的表单控件.
通过"补充案例"加强学习教师分发测试题目及案例素材给学生,对于掌握较好的同学,可以通过补充案例对相关知识点进行巩固.
日照职业技术学院RIZHAOPOLYTECHNIC《Web网站开发技术》教案6任务3文本域标记了解文本域标记掌握文本域标记的使用方法.
分组讨论对新课进行讲解前,先让学生分组讨论以下问题:浏览网页时,经常会看到输入多行文本的文本域,例如留言板、购物评论、其他建议或意见.
那么,如何使用表单元素创建文本域效果呢请小组代表对以上问题发表见解.
教师对上述问题进行解释:在表单中,使用控件可以定义文本域效果.
与文本框的区别在于可以添加多行文字,从而可以输入更多的文本.
知识点讲解讲解"textarea元素"(1)、教师通过PPT对"textarea元素"定义的多行文本输入框效果进行展示.
(2)、教师对textarea元素的基本语法格式进行讲解,并进行代码演示.
(3)、教师对textarea元素的常用属性进行讲解,并进行代码演示.
(4)、教师指出应用"textarea元素"时需要注意的问题,并给予解答.
(5)、学生练习,教师巡视,对疑难问题进行解答.
阶段小结小结重点:textarea元素.
答疑教师询问学生对于知识点还有什么不理解的地方.
针对学生不理解的知识点给与解释.
巩固练习巩固本课时知识点学完知识点后,教师带领学生对本课时所学知识点进行回顾.
以此使学生更熟练地掌握使用textarea元素的使用.
通过"补充案例"加强学习日照职业技术学院RIZHAOPOLYTECHNIC《Web网站开发技术》教案7教师分发测试题目及案例素材给学生,对于掌握较好的同学,可以通过补充案例对相关知识点进行巩固.
布置作业完成"补充案例",通过平台提交给教师,教师下节课进行点评.
预习【列表菜单标记】.
任务4列表菜单标记了解列表菜单标记掌握列表菜单标记的属性及其使用方法分组讨论对新课进行讲解前,先让学生分组讨论以下问题:浏览网页时,经常会看到包含多个选项的下拉菜单,例如选择所在的城市、出生年月、兴趣爱好等.
那么,如何使用表单元素创建下拉菜单效果呢请小组代表对以上问题发表见解.
教师对上述问题进行解释:在表单中,使用select控件可以定义下拉菜单效果.
其中,标记用于在表单中添加一个下拉菜单,标记嵌套在标记中,用于定义下拉菜单中的具体选项,每对中至少应包含一对.
知识点讲解讲解"select元素"(1)、教师通过PPT对"select元素"定义的下拉菜单效果进行展示.
(2)、教师对使用select元素定义下拉菜单的基本语法格式进行讲解,并进行代码演示.
(3)、教师对select元素的常用属性进行讲解,并进行代码演示.
(4)、教师指出应用"select元素"时需要注意的问题,并给予解答.
(5)、教师对如何使用Dreamweaver工具生成表单控件进行讲解,并通过Dreamweaver工具进行演示.
(6)、学生练习,教师巡视,对疑难问题进行解答.
日照职业技术学院RIZHAOPOLYTECHNIC《Web网站开发技术》教案8讲解"datalist元素"(1)、教师通过PPT对"datalist元素"定义的输入框的选项列表效果进行展示.
(2)、教师对使用datalist内的option元素创建列表的方法进行讲解,并进行代码演示.
(3)、教师指出datalist元素通常与input元素配合使用,来定义input的取值,并进行代码演示.
(4)、教师指出应用"datalist元素"时需要注意的问题,并给予解答.
(5)、学生练习,教师巡视,对疑难问题进行解答.
讲解"keygen元素"(1)、教师通过PPT对"keygen元素"生成表单的密钥的效果进行展示.
(2)、教师通过PPT对"keygen元素"的概念及适用范围进行讲解,并进行代码演示.
(3)、教师对keygen元素的常用属性进行讲解,并进行代码演示.
(4)、教师指出应用"keygen元素"时需要注意的问题,并给予解答.
(5)、学生练习,教师巡视,对疑难问题进行解答.
讲解"output元素"(1)、教师通过PPT对"output元素"定义不同类型的输出,可以在浏览器中显示计算结果或脚本输出进行效果展示.
(2)、教师通过PPT对"output元素"的概念进行讲解,并讲解说明.
(3)、教师对"output元素"的常用属性进行讲解,并进行代码演示.
(4)、学生练习,教师巡视,对疑难问题进行解答.
阶段小结小结重点:select元素、datalist元素、keygen元素.
答疑教师询问学生对于知识点还有什么不理解的地方.
针对学生不理解的知识点给与解释.
巩固练习巩固本课时知识点学完知识点后,教师带领学生对本课时所学知识点进行回顾.
以此使学生更熟练地掌握使用select元素制作多行文本输入框、下拉菜单效果,并掌握"datalist元素、keygen元素、output元素"的使用.
日照职业技术学院RIZHAOPOLYTECHNIC《Web网站开发技术》教案9通过"补充案例"加强学习教师分发测试题目及案例素材给学生,对于掌握较好的同学,可以通过补充案例对相关知识点进行巩固.
布置作业完成"补充案例",通过平台提交给教师,教师下节课进行点评.
预习7.
5节【CSS样式】