网页设计-—表单和框架的使用课件.ppt

1、网页设计网页设计表单和框架的使表单和框架的使用用2回顾：回顾：v使用HTML标记创建表格，并通过相关的属性设置表格的格式。v层（DIV）就像一个装满内容的盒子，可以将它放到页面中所需的位置。v在HTML文件中插入多媒体。插入插入GIF动画动画插入音频和视频文件插入音频和视频文件插入插入 Java Applet 插件插件3表表的使用的使用行TR表头 TH单元格TD表名CAPTION4使用表的相关标记创建表使用表的相关标记创建表使用表使用表创建表创建表一月一月二月二月三月三月四月四月五月五月六月六月10005502401500276512403000243025001250900340056Tab

2、le中嵌套table7 层的使用层的使用可以设定多行或跨段落或某一区域的内容样式.学习学习HTML第第1部分部分元素用于组织元素元素用于组织元素DIV通常用于块级元素通常用于块级元素第第2部分部分这是第二部分这是第二部分您觉得有意思吗？您觉得有意思吗？第二部分向右对齐。第二部分向右对齐。公共格式公共格式应用于这一部分中的所有元素应用于这一部分中的所有元素 89Div中嵌套ul+li目标目标使用框架使用表单和表单控件11框架框架v框架将 Web 浏览器分成多个不同的区域，每个区域都可以显示独立、可滚动的页面。v例如，可以在网页中使用三个框架，一个显示标题，一个用作导航菜单，一个显示数据。广告栏顶

3、部框架广告栏顶部框架(top.htm)导航栏左侧导航栏左侧框架框架(left.htm)详细内容页面右详细内容页面右侧框架侧框架(main.htm)框架的边框架的边框框框架集页面框架集页面(FrameSet.htm)13FRAMESET 标记标记v使用 FRAMESET 创建框架v其属性有：RowsCols常见的对窗口的分割包括：水平分割、垂直分割和嵌套分割。具体采用哪种分割方式，取决于实际需要，可用标记中的rows（水平分割）或cols（垂直分割）属性来进行分割。框架集的基本结构框架集的基本结构框架的基本结构 边框尺边框尺寸大小寸大小将窗口分割成左中将窗口分割成左中右右3个部分个部分,可选可选

4、将窗口分割成上将窗口分割成上下下2个部分个部分,可选可选第一个窗口要显示第一个窗口要显示的网页的网页15框架使用示例：框架使用示例：两个大小相等的框架两个大小相等的框架 采用整数设置窗口的水平分割 一个垂直分割的例子一个垂直分割的例子采用整数设置窗口的水平分割 框架的边框框架的边框框架的边框控制 19嵌套的框架集嵌套的框架集嵌套框架嵌套框架 20FRAME 标记标记vFRAME 标记的属性包括：Name Src Noresize 不希望用户能随意地改变子窗口的大小Scrolling yes表示为显示滚动条，no表示不显示滚动条，auto为自动设置。Marginwidth 在HTML文件中，利用

5、框架标记中的marginwidth和marginheight属性可以设置相应子框架的左右和上下边缘的空白。复习：复习：目标显示方式属性目标显示方式属性-target 用来指定目标窗口的打开方式。包含用来指定目标窗口的打开方式。包含4个取值：个取值：_blank：在新窗口中打开。：在新窗口中打开。_parent：在上一级的浏览窗口中打开。：在上一级的浏览窗口中打开。_self：在当前页面或框架中打开。：在当前页面或框架中打开。_top：在当前浏览窗口页面中打开。：在当前浏览窗口页面中打开。vvvvv文件xvv2223目录文件：2、index.html内容内容文件：3、x1.html内容3、x1.

6、html打开方式:target=_blank4、y1.html target=content1、框架文件：框架.html框架名：index框架名：content24目录文件：2、index.html内容内容文件：3、x1.html内容3、x1.html打开方式:target=_blank4、y1.html target=content1、框架集：框架.html左框架：index右框架：content25内嵌框架内嵌框架vIFRAME属性NameSRCWidthHeightScrolling26很有趣吧。你已经对框架有所了解。很有趣吧。你已经对框架有所了解。上面是一个内嵌框架。上面是一个内嵌框架

7、。27表单简介表单简介v表单的用途用户注册某种服务时，收集其姓名、地址、电话号码、电子邮件地址和其他信息。收集购买物品所需的信息。例如，如果想通过 Internet 购买一本书，就需要填写姓名、邮政地址和付款方式等。28样本表单样本表单29单行文本输入框单行文本输入框(TEXT)单选按钮单选按钮(RADIO)复选框复选框(CHECKBOX)下拉列表下拉列表(SELECT)重置按钮重置按钮(RESET)提交按钮提交按钮(SUBMIT)多行文本框多行文本框(TEXTAREA)密码框密码框(PASSWORD)30METHOD=“post或或get”ACTIONMETHOD指定提交后，由服务器上处理指

8、定提交后，由服务器上处理程序处理程序处理指定向服务器提交的方法指定向服务器提交的方法:一般为一般为post或或get方法方法,post方法比较安全方法比较安全 ACTION=“URL”表单页面的基本结构31表单输入属性表单输入属性(input 标记的属性标记的属性)TYPE此属性指定表单元素的类型。可用的选项有TEXT、PASSWORD、CHECKBOX、RADIO、SUBMIT、RESET、FILE、BUTTON。默认值为TEXT。NAME此属性指定表单元素的名称。例如，如果表单上有几个文本框，可以按照名称来标识它们-TEXT1、TEXT2或用户选择的任何名称。VALUE此属性是可选属性，它

9、指定表单控件的初始值 SIZE此属性指定表单元素的显示长度。用于文本输入的表单元素即输入类型是TEXT或PASSWORD的 MAXLENGHT此属性用于指定在TEXT或PASSWORD表单元素中可以输入的最大字符数。默认值为无限的 CHECKED此属性是一个Boolean属性，指定按钮是否是被选中的。当输入类型为RADIO或CHECKBOX时，使用此属性。SRCSRC=URL。当使用IMAGE作为输入类型时使用此属性，它用于标识图像的位置。32 指定元素的类型，可为指定元素的类型，可为TEXT、RADIO、SUBMIT等等控件的名称控件的名称控件的初始值控件的初始值控件的初始宽控件的初始宽度度

10、控件中输入的最多控件中输入的最多字符个数字符个数控件是否被控件是否被选中选中表单控件的统一格式33Input Type 属性的值属性的值隐藏域。不显示在页面，只将内容传递到服务器中。隐藏域。不显示在页面，只将内容传递到服务器中。图形域图形域复选框复选框单选按钮单选按钮密码域密码域普通按钮普通按钮取值的含义取值的含义type取值取值文件域文件域重置按钮重置按钮提交按钮提交按钮文字字段文字字段34文本框基本语法INPUT type=“text”value=size=20名名  字：字：单行文本输入框，字符宽单行文本输入框，字符宽度为度为20文本区的宽度文本区的宽度输入元素的默输

11、入元素的默认值认值文本输入框文本输入框35密码框基本语法密码区宽度密码区宽度初始密码初始密码密码框密码框密密  码：码：密码框，密码框，22个个字符宽度字符宽度36单选按钮基本语法INPUT type=radio value=checked=checked初始值初始值单选按钮单选按钮默认选中默认选中性别：性别：男男 设置此单选按设置此单选按钮被选中钮被选中37复选框基本语法复选框复选框复选框名复选框名复选框值复选框值 聊天聊天  设置此复选框设置此复选框被选中被选中 图片域图片域图片域名图片域名图片地址图片地址 文件域文件域文件域名文件域名40

12、表单示例表单示例证券调查示例证券调查示例姓名姓名 密码密码 照片照片 投资经验投资经验 新手新手 中级中级 专家专家 投资类型投资类型 股票股票 期权期权 互惠互惠基金基金 今年选择什么证券？今年选择什么证券？41其他输入元素其他输入元素vTextArea 元素ColsRowsSizeTypeValuevBUTTON 元素NameValueType42多行文本框基本语法多行文本框基本语法TEXTAREA name=cols=40 rows=6 文本框中的内容文本框中的内容 文本框的文本框的名字名字文本框的文本框的列数列数文本框的文本框的行数行数欢迎阅读服务条款协议，本协议阐述之条款和欢迎阅读服

13、务条款协议，本协议阐述之条款和条件适用于您使用条件适用于您使用Taobao网站的各种工具和服务。网站的各种工具和服务。本服务协议双方为淘宝与淘宝网用户，本服务协议具有合同效力。本服务协议双方为淘宝与淘宝网用户，本服务协议具有合同效力。淘宝的权利和义务淘宝的权利和义务 6行行40个字符宽度的个字符宽度的多行文字域多行文字域43按钮基本语法INPUT type=reset name=Reset value=按钮名称按钮名称按钮类型可为按钮类型可为button、submit按钮上的标签按钮上的标签 单击按钮，控件的值被重单击按钮，控件的值被重置为置为value属性中指定的初属性中指定的初始值始值44

14、下拉列表框标记下拉列表框标记vSELECT 标记NameSize 规定下拉列表中可见选项的数目。Multiple 规定可选择多个选项。下拉列表框基本语法：基本语法：选项显示内容选项显示内容 .下拉列表框举例：举例：Banana Apple Orange 47表单示例表单示例证券调查示例证券调查示例您用什么方式购买证券？您用什么方式购买证券？1)网上交易网上交易2)电话交易电话交易3)经纪人代理经纪人代理4)其他其他 48求职求职 申 请 表申 请 表姓名：姓名：求职意向求职意向 网站设计师网站设计师 网管网管 网站开发人员网站开发人员工作经历工作经历无无一年一年三年三年五年五年附注附注请在这里

15、键入附注。请在这里键入附注。发送确认发送确认 49v聚焦表单控件设置焦点（鼠标单击）Tab 键访问键(accesskey)50求职求职 申 请 表申 请 表姓名：姓名：求职意向求职意向网站设计师网站设计师网管网管网站开发人员网站开发人员工作经历工作经历无无一年一年三年三年五年五年附注附注请在这里键入附注。请在这里键入附注。发送确认发送确认 51总结：总结：v表单元素用于接受用户的输入并提供一些交互式操作。v标记用于在页面上创建我们称为表单的区域。v元素用于定义表单上表单元素的类型和外观。vTEXTAREA元素用于创建多行文本输入框。vSELECT元素用于向用户显示选项列表。v元素得到焦点时，它的状态将变为活动。v框架将Web浏览器窗口分隔为多个不同的区域，每个区域都可以显示一个独立、可滚动的页面。Thank You世界触手可及世界触手可及携手共进，齐创精品工程携手共进，齐创精品工程