节课堂教学省公共课一等奖全国赛课获奖课件.pptx

第三章第三章第三章第三章表单和框架表单和框架表单和框架表单和框架1第1页回顾回顾 使用使用HTML创建一个表格最少需要哪些标签？创建一个表格最少需要哪些标签？跨多行表格是在单元格里用哪个属性进行设置跨多行表格是在单元格里用哪个属性进行设置？对表格进行美化，主要用哪些属性进行设置？对表格进行美化，主要用哪些属性进行设置？2第2页预习检验预习检验请列举表单中有哪些惯用表单元素？请列举表单中有哪些惯用表单元素？创建一个框架页面最少需要哪几个标签？创建一个框架页面最少需要哪几个标签？3第3页本章任务本章任务制作制作“注册注册”页面页面制作制作“客户中心客户中心”页面页面4第4页会使用表单基本结构制作表单页面会使用表单基本结构制作表单页面会使用各种表单元素实现注册页面会使用各种表单元素实现注册页面能了解能了解post和和get两种提交方式区分两种提交方式区分会使用框架结构实现多窗口展示页面会使用框架结构实现多窗口展示页面本章目标本章目标5第5页表单表单表单经典应用表单经典应用注册用户注册用户搜集信息搜集信息反馈信息反馈信息为网站提供搜索工具为网站提供搜索工具注册用户注册用户搜集信息搜集信息反馈信息反馈信息提供搜提供搜索工具索工具6第6页表单包含控件表单包含控件单行文本输入单行文本输入框框(TEXT)单项选择按钮单项选择按钮(RADIO)复选框复选框(CHECKBOX)下拉列表下拉列表(SELECT)重置按钮重置按钮(RESET)提交按钮提交按钮(SUBMIT)多行文本框多行文本框(TEXTAREA)密码框密码框(PASSWORD)7第7页表单页面基本结构表单页面基本结构METHOD=“post或或get”ACTIONMETHOD指定提交后，由服务器指定提交后，由服务器上那个处理程序处理上那个处理程序处理指定向服务器提交方法指定向服务器提交方法:普通为普通为post或或get方法方法,post方法比较安全方法比较安全 ACTION=“URL”演示示例演示示例1 1：使用：使用 postpost提交方式提交方式 和和 getget提交方式提交方式 8第8页表单元素统一格式表单元素统一格式 指定元素类型，可为指定元素类型，可为TEXT、RADIO、SUBMIT等等控件控件名称名称控件控件初始值初始值控件控件初始宽初始宽度度控件中输入控件中输入最最多字符个数多字符个数控件是否控件是否被被选中选中9第9页表单元素逐一介绍表单元素逐一介绍文本框基本语法文本框基本语法名名  字：字：查看源代码查看源代码单行文本输入框，单行文本输入框，字符宽度为字符宽度为20文本区宽度文本区宽度输入元素输入元素默认值默认值文本输入框文本输入框10第10页表单元素逐一介绍表单元素逐一介绍密码框基本语法密码框基本语法密码区宽度密码区宽度初始密码初始密码密码框密码框密密  码：码：查看源代码查看源代码密码框，密码框，22个字符宽度个字符宽度11第11页表单元素逐一介绍表单元素逐一介绍单项选择按钮基本语法单项选择按钮基本语法初始值初始值单项选择单项选择按钮按钮默认选中默认选中性别：性别：男男 查看源代码查看源代码设置此单项设置此单项选择按钮被选择按钮被选中选中12第12页表单元素逐一介绍表单元素逐一介绍复选框基本语法复选框基本语法复选框复选框复选框名复选框名复选框值复选框值 聊天聊天  查看源代码查看源代码设置此复选设置此复选框被选中框被选中13第13页列表框基本语法列表框基本语法 说明：说明：size确定列表中可同时看到行数。确定列表中可同时看到行数。selected默认被选中可选项。默认被选中可选项。表单元素逐一介绍表单元素逐一介绍查看源代码查看源代码出生日期：出生日期： 年年 选择月份选择月份 一月一月 二月二月 月月 日日 设置此输入框最多设置此输入框最多只能输入四个符号只能输入四个符号设置设置“选择月份选择月份”选项默认被选中选项默认被选中14第14页表单元素逐一介绍表单元素逐一介绍按钮基本语法按钮基本语法按钮名称按钮名称按钮类型可为按钮类型可为button、submit按钮上标签按钮上标签 查看源代码查看源代码单击按钮，控件值被单击按钮，控件值被重置为重置为value属性中属性中指定初始值指定初始值15第15页表单元素逐一介绍表单元素逐一介绍多行文本框基本语法多行文本框基本语法 文本框中内容文本框中内容 文本框文本框名字名字文本框文本框列数列数文本框文本框行数行数欢迎阅读服务条款协议，欢迎阅读服务条款协议，本协议阐述之条款和条件适合用于您使用本协议阐述之条款和条件适合用于您使用Taobao网站各种工具和服务。网站各种工具和服务。本服务协议双方为淘宝与淘宝网用户，本服务协议含有协议效力。本服务协议双方为淘宝与淘宝网用户，本服务协议含有协议效力。淘宝权利和义务淘宝权利和义务 6行行40个字符宽个字符宽度多行文字域度多行文字域查看源代码查看源代码16第16页小结小结1 1编写如左图所表示效果对应编写如左图所表示效果对应html代码代码在网页设计中，表单主要用在网页设计中，表单主要用途有哪些？途有哪些？TEXTPASSWORDRADIOTEXTAREASUBMITRESETSELECTCHECKBOX练习答案练习答案练习代码练习代码17第17页框架框架广告栏顶部框架广告栏顶部框架(top.htm)导航栏左导航栏左侧框架侧框架(left.htm)详细内容页详细内容页面右侧框架面右侧框架(main.htm)框架边框架边框框框架集页面框架集页面(FrameSet.htm)18第18页框架使用场所框架使用场所页面一个固定部分显页面一个固定部分显示徽标或静态信息示徽标或静态信息在另一个在另一个固定部分固定部分显示导航显示导航部分详细部分详细内容内容在此处显示详细内容，在此处显示详细内容，页面中此部分页面中此部分是改变是改变。19第19页 框架基本结构框架基本结构框架页面基本语法框架页面基本语法边框尺边框尺寸大小寸大小将窗口分割成左中将窗口分割成左中右右3个部分个部分,可选可选将窗口分割成上将窗口分割成上下下2个部分个部分,可选可选第一个窗口要第一个窗口要显示网页显示网页20第20页框架基本结构框架基本结构rows_cols框架框架 将窗口分割成将窗口分割成上中下上中下3部分部分窗口边框窗口边框宽度宽度假如要在浏览器中创建左中假如要在浏览器中创建左中右三个窗口右三个窗口,该怎样实现？该怎样实现？查看源代码查看源代码每个窗口对应一个页面，以及一个框架集每个窗口对应一个页面，以及一个框架集页面，总共需要几个页面，总共需要几个HTML页面文件？页面文件？21第21页怎样创建多个复杂窗口怎样创建多个复杂窗口 要实现以下列图所表示窗口，该怎样制作？要实现以下列图所表示窗口，该怎样制作？1、分成上下两个窗口、分成上下两个窗口2、把下面窗口分成、把下面窗口分成 左右两个窗口左右两个窗口top窗口窗口left窗口窗口right窗口窗口22第22页怎样创建多个复杂窗口怎样创建多个复杂窗口 创建多个复杂窗口实现步骤以下：创建多个复杂窗口实现步骤以下：1、创建一个、创建一个HTML页面页面“top.html”2、创建一个、创建一个HTML页面页面“left.html”3、创建一个、创建一个HTML页面页面“right.html”top.html效果图效果图left.html效果图效果图right.html效果效果23第23页怎样创建多个复杂窗口怎样创建多个复杂窗口4、新建、新建多框架多框架HTML页面页面“Frame_Sets.html”.查看源代码查看源代码设置无框设置无框架边框架边框不显示不显示滚动条滚动条禁止调整禁止调整框架大小框架大小框架名称，便于超框架名称，便于超文本链接锚标签文本链接锚标签target属性所引用属性所引用24第24页怎样设置窗口链接显示位置怎样设置窗口链接显示位置 假假如如在在同同一一个个页页面面中中，要要实实现现在在一一个个框框架架窗窗口口中中超超链接页面出现在另一个框架窗口中，怎样实现？链接页面出现在另一个框架窗口中，怎样实现？演示示例演示示例2 2：不一样框架之间超链接效果不一样框架之间超链接效果使用使用target目标窗口属性目标窗口属性25第25页怎样设置窗口链接显示位置怎样设置窗口链接显示位置target目标窗口属性目标窗口属性name“显示窗口名显示窗口名”target属性指定了所链接属性指定了所链接文件出现在名称为文件出现在名称为“窗窗口名口名”框架窗口里。框架窗口里。target属性指定了所链接文属性指定了所链接文件出现在名称为件出现在名称为“rightframe”框架窗口里框架窗口里演示示例演示示例3：使用使用target=“窗口名窗口名”查看源代码查看源代码26第26页怎样设置窗口链接显示位置怎样设置窗口链接显示位置target目标窗口属性目标窗口属性四个特殊窗口四个特殊窗口 显示在新窗口显示在新窗口 显示在本窗口显示在本窗口 显示在父窗口显示在父窗口 显示在整个浏览器窗口显示在整个浏览器窗口 新启一个窗口打开文新启一个窗口打开文件件“right.html”演示示例演示示例4 4：使用四个特殊窗口使用四个特殊窗口27第27页小结小结2 2top.htmlleft.htmlright1.html或或right2.htmlframe_sets.html练习答案练习答案练习代码练习代码编写以下列图所表示效果对应编写以下列图所表示效果对应html代码代码28第28页总结总结表单中提交数据方法有那两种及其区分？表单中提交数据方法有那两种及其区分？表单里有哪些常用表单元素？表单里有哪些常用表单元素？创建一个框架页面最少需要哪两个标签？创建一个框架页面最少需要哪两个标签？target设定目标资源所要显示窗口，其取值可认为哪设定目标资源所要显示窗口，其取值可认为哪些？些？简述创建一个多框架页面所需主要步骤。简述创建一个多框架页面所需主要步骤。29第29页