html网页制作PPTchapter3表单和框架优质PPT.ppt

html网页制作PPTchapter3表单和框架优质PPT.ppt

《html网页制作PPTchapter3表单和框架优质PPT.ppt》由会员分享，可在线阅读，更多相关《html网页制作PPTchapter3表单和框架优质PPT.ppt（40页珍藏版）》请在冰豆网上搜索。

,本章任务,制作“注册”页面制作“客户中心”页面,本章目标,会使用表单的基本结构制作表单页面会使用各种表单元素实现注册页面能理解post和get两种提交方式的区别会使用框架结构实现多窗口展示页面,表单,表单的典型应用注册用户收集信息反馈信息为网站提供搜索工具,注册用户,收集信息,反馈信息,提供搜索工具,表单包含的表单元素,单行文本输入框（TEXT）,单选按钮（RADIO）,复选框（CHECKBOX）,下拉列表（SELECT）,重置按钮（RESET）,提交按钮（SUBMIT）,多行文本框（TEXTAREA）,密码框（PASSWORD）,表单页面的基本结构,METHOD=post或get,ACTION,METHOD,指定提交后，由服务器上哪个处理程序处理,指定向服务器提交的方法:

一般为post或get方法,post方法比较安全,ACTION=URL,演示示例1：

使用post提交方式和get提交方式,表单的基本语法2-2,用户名：

密,表单输入元素：

input,表单提交地址和方法的设置,表单的典型应用：

假定登录126邮箱,表单的执行原理,Internet,1,2,客户端：

请求登录，通过表单填写账户信息,服务器端：

验证发来的账号信息，然后给出反馈,客户端和服务器类似两人沟通一样，从而建立交互活动,指定元素的类型，可为text、radio、submit等,控件的名称,控件的初始值,控件的初始宽度,控件中输入的最多字符个数,控件是否被选中checked,表单元素的基本格式,文本框,用户名：

表单元素的逐一介绍8-1,单行文本输入框，字符宽度为21,name用于服务器端获取数据，例如：

request.getParameter（userName）,密码框,密码：

表单元素的逐一介绍8-2,隐藏输入的信息,按钮,.,表单元素的逐一介绍8-3,普通按钮：

button提交按钮：

submit重置（清空）按钮：

reset图片按钮：

image,单选按钮,.性别：

表单元素的逐一介绍8-4,特点：

单选,名字name相同表明属于同一组,复选框,爱好：

运动玩游戏,表单元素的逐一介绍8-5,特点：

多选,练习贵美登录页,需求说明：

完成网站登录页面,完成时间：

20分钟,1、提交地址：

login.aspx2、提交方法：

post,文件域,.,表单元素的逐一介绍8-6,显示上传文件的地址,小结,前面所学的各类表单元素，语法分别是什么？

列表框,.选择月份一月二月三月四月,表单元素的逐一介绍8-7,提供固定选项，避免用户输入错误,多行文本框,.阅读贵美网服务协议欢迎阅读服务条款协议.,表单元素的逐一介绍8-8,文本内容,隐藏域方便服务器端“记住”客户端的信息、但又不希望客户看到的数据,.,表单的高级用法2-1,隐藏的客户代号信息：

666，但客户端页面不显示,隐藏域：

既方便服务器端“记住”客户端的数据，又避免因显示浏览者不关心的数据导致用户反感,只读和禁用属性readonly：

希望某个框内的内容只允许用户看，不能修改disabled：

因没达到使用的条件，限制用户使用,欢迎阅读服务条款协议，贵美的权利和义务.同意以上协议,表单的高级用法2-2,1、用户不能修改协议2、勾选“同意以上协议”，才允许点击“注册”按钮,练习简易求职表,需求说明：

使用表单制作简易求职表,“协议”只读，“提交”按钮禁用,用隐藏域提交求职者姓名“zhangsan”,如何实现表单布局3-1,如何实现页面中登录表单的布局？

问题：

结构简单，但不美观,如何实现表单布局3-2,实际页面中的登录表单布局,实际应用，需要几行几列的表格布局？

如何实现表单布局3-3,会员名:

代码同“会员名”,整体布局：

4行3列的表格,图片后的内容跨2列，内容用“空格”填充,图片按钮跨2列,小结1,编写如左图所示效果对应的html代码在网页设计中，表单的主要用途有哪些？

TEXT,PASSWORD,RADIO,TEXTAREA,SUBMIT,RESET,SELECT,CHECKBOX,练习答案,练习代码,框架,广告栏顶部框架（top.htm）,导航栏左侧框架（left.htm）,详细内容页面右侧框架（main.htm）,框架的边框,框架集页面（FrameSet.htm）,框架使用场合,页面的一个固定部分显示徽标或静态信息,在另一个固定部分显示导航部分详细内容,在此处显示详细内容，页面中此部分是变化的。

框架的基本结构,框架页面的基本语法,边框尺寸大小,将窗口分割成左中右3个部分,可选,将窗口分割成上下2个部分,可选,第一个窗口要显示的网页,框架的基本结构,rows_cols框架,将窗口分割成上中下3部分,如果要在浏览器中创建左中右三个窗口,该如何实现？

查看源代码,每个窗口对应一个页面，以及一个框架集页面，总共需要几个HTML页面文件？

窗口边框的宽度,如何创建多个复杂的窗口,要实现如下图所示的窗口，该如何制作？

1、分成上下两个窗口2、把下面的窗口分成左右两个窗口,top窗口,left窗口,right窗口,如何创建多个复杂的窗口,创建多个复杂的窗口实现步骤如下：

1、创建一个HTML页面“top.html”2、创建一个HTML页面“left.html”3、创建一个HTML页面“right.html”,top.html效果图,left.html效果图,right.html效果,如何创建多个复杂的窗口,4、新建多框架HTML页面Frame_Sets.html,.,查看源代码,设置无框架边框,不显示滚动条,禁止调整框架大小,框架名称，便于超文本链接锚标签target属性所引用,如何设置窗口链接的显示位置,如果在同一个页面中，要实现在一个框架窗口中的超链接页面出现在另一个框架窗口中，如何实现？

演示示例2：

不同框架之间超链接效果,使用target目标窗口属性,如何设置窗口链接的显示位置,target目标窗口属性name显示的窗口名,target属性指定了所链接的文件出现在名称为“窗口名”的框架窗口里。

target属性指定了所链接的文件出现在名称为“rightframe”的框架窗口里,演示示例3：

使用target=窗口名,如何设置窗口链接的显示位置,target目标窗口属性四个特殊的窗口显示在新窗口显示在本窗口显示在父窗口显示在整个浏览器窗口,新启一个窗口打开文件right.html,演示示例4：

使用四个特殊的窗口,小结2,编写如下图所示效果对应的html代码,top.html,left.html,right1.html或right2.html,frame_sets.html,练习答案,练习代码,总结,表单中提交数据的方法有哪两种及其区别？

表单里有哪些常用的表单元素？

创建一个框架页面至少需要哪两个标签？

target设定目标资源所要显示的窗口，其取值可以为哪些？

简述创建一个多框架页面所需的主要步骤。