第2章表格、表单和框架精选.pptx

第2章 表格、表单和框架 ;内 容 提 要;;2.1 表格;基本语法;表格标题 ;划分表格结构;与表格相关的元素或标签如表所示。 ;划分表格结构;划分表格结构 ;table标签的常用属性如表所示。;table标记属性;table标记属性;table标记属性;table标记属性;table标记属性;;table1.html的显示结果如图所示。 ;tr标记属性;tr标记属性;tr标记属性;tr标记属性;td标记属性 ;td标记属性;td标记属性;table3.html: !DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN /TR/html4/loose.dtd html head meta http-equiv=Content-Type content=text/html; charset=UTF-8 title表格使用示例3-不规则表格/title /head body table border=2 width=300 bordercolorlight=#FF9600 bordercolordark=#FF00EE cellpadding=0 cellspacing=0 tr td1/td td rowspan=3此单元格跨三行/td td2/td td3/td /tr tr td4/td td5/td td6/td /tr tr td7/td td colspan=2此单元格跨两列/td /tr /table /body /html ;table3.html的显示结果如图所示。;使用表格布局网页;网页布局类型 ;网页布局类型 ;网页布局类型 ;网页布局类型 ;网页布局实例 ;表格布局网页实例;2.3 框架;;;2.3.1 定义框架 ;2.3.1 定义框架 ;2.3.2 利用框架分割窗口;2.3.2 利用框架分割窗口;2.3.2 利用框架分割窗口;2.3.2 利用框架分割窗口;2.3.3 框架的嵌套 ;实验三;2.3.4 框架的初始化 ;2.3.5 创建浮动框架 ;2.3.5 创建浮动框架;2.3.6 框架控制 ;frameset标签的常用属性如表所示。; 控制框架边框 ; 控制框架边框; 控制框架边框; 控制框架子窗口 ; 控制框架子窗口;2.3.7 使用框架布局网页实例 ;2.3.7 使用框架布局网页实例;2.3.7 使用框架布局网页实例;下面的实例为一个混合框架，先垂直划分，然后水平划分，当单击左侧框架的超级链接时，在右侧框架中显示资源文件。;;;;ch2.html, ch3.html的源代码与ch1.html类似。请求frameset.html的显示结果如图所示。 ;单击左边框架中的“第3章”，显示结果如图所示。 ;实验3;2.2 表单;;什么是表单 ;表单控件的类型 ;1．form标签;;2．input标签;;;;;;;;;;;实验四;form1.html中的表单提交给form1_ok.jsp处理，form1_ok.jsp显示用户填写的信息。;;验证form1.html及form1_ok.jsp的显示结果，需要将其部署到Java Web服务器上，在浏览器的地址栏里输入http://localhost:8080/ch02/form1.html，填写完相应的信息后的显示结果如图所示。;提交以后的结果如图所示。;3．select标签;其中： name指的是下拉列表的名称； size指的是下拉列表中可见选项的数目； onfocus指的是当下拉列表获得焦点时调用的语句或脚本函数； onblur指的是当下拉列表失去焦点时调用的语句或脚本函数； onchange指的是当下拉列表的选中项发生变化时调用的语句或脚本函数； multiple指的是允许下拉列表选择多项，如果没有此属性，则下拉列表只能选择单项；如果设置此属性，下拉列表会显示成平铺状态。例2-28.HTML ;4．textarea标签;下??菜单以及多行文本框的使用示例form2.html以及form2_ok.jsp。;;请求form2.html，并填写相应的信息后的显示结果如图所示，单击“提交”后的显示结果如图所示。 ;提交以后的结果如图所示。;表格是组织结构化数据的常用手段，表格通过table、tr、td等标签来定义，表格还可以用来进行页面布局。 表单是Web设计中必不可少的内容，是装载客户端向服务器端提交的数据的容器。 在表单中可包括的控件有单行文本框、密码框、单选按钮、复选框、下拉列表、多行文本框、提交按钮、重置按钮以及普通按钮等。 框架可以实现对整个网页的内容的划分，不同的区域引用不同的源文件，区域之间可以相互独立，