网页设计 第4章 表格、表单与框架.ppt

1、第 4 章,表格、表单与框架,本章知识技能要点：,掌握表格标签,的使用方法以及其各类属性的设置 掌握表格中单元格合并的设计方法 掌握利用表格进行页面整体布局的方法 掌握创建表单页面的基本方法 掌握标签中type属性的各种取值所表示的含义 掌握单选按钮、多选按钮和下拉列表控件的设置方法 掌握框架页面制作的基本方法 掌握标签和标签中各个属性的取值以及所表示的含义 掌握多框架之间互相操作的实现方法 掌握浮动框架的制作方法,4.1 表格的应用,表格在网页设计中的应用非常广泛,可以方便灵活排版,很多动态大型网站也都是借助表格排版,这是因为表格不但可以固定文本或图像的输出，而且还可以任意的进行背景和前景颜

2、色的设置。表格可以把相互关联的信息元素集中定位,使浏览页面的人一目了然。 在HTML文档中，表格是通过,标签来完成的，如表4-1所示。在一个最基本的表格中，必须包含一组标签，一组标签和一组标签或。,4.1 表格的应用,4.1 表格的应用,4.1.1 定义表格标签 标签用来创建一个表格。其中常用的属性见表4-2。,4.1 表格的应用,4.1.2 、和标签 标签用来创建表格中的每一行。此标签只能放在标签之间使用，而在此标签之间加入文本将是无用的； 和都是插入单元格的标签，这两个标签必须嵌套在标签内，是成对出现的。用于表头标签，表头标签一般位于首行或首列，标签之间的内容就是位于该表头单元格内的标题内

3、容，其中的文字以粗体居中显示。标签用于定义表格单元格中的具体内容。,4.1 表格的应用,、和标签对的关系如下所示： 例4-1： 一个简单的（2行3列）表格 表头项1 表头项2 表头项3 单元格内容1 单元格内容2 单元格内容3 单元格内容4 单元格内容5 单元格内容6 ,例4-1运行效果图,4.1 表格的应用,、和标签的大多数属性都是一样的。属性设定如表4-3所示。,4.1 表格的应用,例4-2 无标题文档 计算机系 自动化系 电子信息系 c#程序设计 自控原理 数字信号处理 网络安全 计算机接口技术 电子系统设计 ,4.1 表格的应用,例4-2运行效果图,4.1 表格的应用,4.1.3 多行

4、多列单元格的合并 要创建多行、多列单元格合并的单元格，只需在或中加入rowspan或colspan属性以及它们的设定值（默认值为1），它们的取值表明了表格中要合并的行或列的数目。 合并多列的语法： colspan的设定值表示合并的列数，例如colspan=2则示这一格的宽度为两个列的宽度。 合并多行的语法： rowspan所要表示的意义是指合并的行数，例如rowspan=2就表示这一格的高度为两个行的高度。,4.1 表格的应用,例4-3： 多行多列单元格的合并 学生基本信息成 绩 姓 名性 别专 业课 程分 数 李晓华男计算机程序设计68 王明莉女89 ,例4-3运行效果图,4.1 表格的应用

5、,4.1.4 表格的标题标签 标签可以定义表格的标题。表格标题的位置，可由其align属性和valign属性来设置，align属性设置标题位于文档的左，中，右。 valign属性设置标题位于表格的上方或者表格的下方。 下面为表格标题位置的设置格式。 表格标题,4.1 表格的应用,4.1.5 表格的嵌套及利用表格排版 在HTML页面中，使用表格排版是通过嵌套来完成的，即一个表格内部可以嵌套另一个表格，用表格来排版页面的思路是：由总表格规划整体的结构，由嵌套的表格负责各个子栏目的排版，并插入到表格的相应位置，这样就可以使页面的各个部分有条不紊，互不冲突，看上去清晰整洁。在实际做网页时一般不显示边框

6、,边框的显示可根据自己的爱好来设定。在本例中为了让大家能够看清楚，都设置了有边框。,4.1 表格的应用,例4-5： 表格嵌套 网站logo 广告横幅banner 标题栏 标题栏 标题栏 标题栏 标题栏 标题栏 标题栏,4.1 表格的应用,标题栏 标题栏 内容六 内容一 内容二 内容三 内容四 内容五 ,4.1 表格的应用,例4-5运行效果图,4.1 表格的应用,4.2 HTML表单,表单在WEB网页中用于接受访问者填写的信息，从而能采集客户端信息，使网页具有交互的功能。一般是将表单设计在一个HTML文档中，当用户填写完信息后做提交(submit)操作，于是表单的内容就从客户端的浏览器传送到服务

7、器上，服务器处理后，再将用户所需信息传送回客户端的浏览器上，这样网页就具有了交互性。在此只介绍使用HTML标签来设计表单。 一个表单一般应该包含用户填写信息的输入框,提交和按钮等，这些输入框,按钮叫做控件,表单很像容器,它能够容纳各种各样的控件。,4.2 HTML表单,4.2.1 表单标签 创建一个表单用标签实现。也即定义表单的开始和结束位置，在开始和结束标签之间的一切定义都属于表单的内容。 标签具有name、action、method和target属性。 Name属性用于设置本表单的名字。 Action属性用于指定处理表单数据程序的程序名。 method属性用来定义处理程序从表单中获得信息的

8、方式。 target属性用来指定目标窗口。 例如 ,4.2 HTML表单,4.2.2 用户输入区标签 标签用来定义一个用户输入区，用户可在其中输入信息。此标签必须放在标签对之间。标签中共提供了八种类型的输入区域，表4-4列举了type属性的各种取值，以及所代表的含义。,4.2 HTML表单,4.2 HTML表单,例4-6： 表单用户输入的控件实例 用户信息调查表 用户名： 口令： 你喜欢哪些课程： 网页制作 网络基础 数据库 你的业余爱好是什么： 音乐 体育 旅游 提交你的作品 ,4.2 HTML表单,例4-6的运行效果图,4.2 HTML表单,4.2.3 下拉列表标签和定义列表项标签 4.2

9、.3.1 标签 标签用来创建一个下拉列表框或可以复选的列表框。这一对标签必须放在标签之间。具有multiple、name和size属性： multiple属性不用赋值，表示列表框为允许多选的； name属性用于定义此列表框的名字； size属性用来设置列表的高度，缺省时值为1。 4.2.3.2 标签 标签用来指定列表框中的一个选项，它放在标签对之间。此标签具有selected和value属性： Selected属性用来指定默认的初始选项； value属性用来给指定的那一个选项赋值，这个值是要传送到服务器上的，服务器正是通过调用区域的名字的value属性来获得该区域选中的数据项的。,4.2 HT

10、ML表单,例4-7： 下拉列表框应用实例 请选择你最喜欢的男歌星: 刘德华 张学友 郭富城 黎明 请选择你最喜欢的女歌星: 张曼玉 王菲 田震 那英 ,例4-7的运行效果图,4.2 HTML表单,4.2.4 多行文本框标签 多行文本框标签用来创建一个可以输入多行文字的文本框，此标签也要放在标签之间。 具有以下属性： name文字区块的名称，作识别之用。 cols文字区块的宽度。 rows文字区块的列数，即其高度。,4.2 HTML表单,例4-8： 多行的文本框应用实例 请提出您的宝贵意见: 请将意见输入此处 ,例4-8的运行效果图,4.3.1 框架的定义和基本构成 在浏览网页的时候，通常会遇到

11、这样的一种导航结构。超级连接置于网页左边的区域，单击这些超级链接以后，链接的目标出现在右面的区域。或者超级链接在上边的区域，单击链接以后指向的目标页面出现在下面的区域。此时的这两个区域是相互独立的。假如浏览时拖动左边的滚动条不会影响右侧的显示效果。其实这就是页面中利用了框架技术，它可以把浏览器的显示空间分割为几个部分，每个部分都独立显示网页内容。把几个框架结合在一起构成框架集，能够让页面具有更为丰富的效果。 定义框架页使用标签。这时HTML页面的文档体标签被框架集标签所取代，然后通过的子窗口标签定义每一个子窗口和子窗口的页面属性。,4.3 多视窗口框架,Frames结构的基本格式如下： . ,

12、4.3 多视窗口框架,4.3.2 的属性 常用的属性如表4-5所示。,4.3 多视窗口框架,4.3.3 子框架标签 是个单标签,标签要放在框架集标签中,设置了几个子窗口就必须对应几个标签，而且每一个标签内还必须设定一个网页文件。表4-6列举了标签中常用的属性。,4.3 多视窗口框架,4.3.4 框架的嵌套 框架的定义可以嵌套设置。比如，在分割为左右两个窗口的基础之上，还可以把右边的窗口再分割成上下两个，组成一共有三个子窗口的框架页。 例4-10： ,4.3 多视窗口框架,例4-10运行的效果图,4.3 多视窗口框架,4.3.5 各窗口间相互操作 由Frames分割出来的几个窗口的内容并不是静止

13、不变的，往往一个窗口的内容随着另一个窗口的要求而不断变化，这就提高了Frames的利用价值。为了完成各窗口之间的相互操作，我们必须为每一个窗口起一个名字，这个名字用属性Name来定义。 为窗口命名的格式是： 例如： 定义了窗口名称之后，还应该使用中的Target来配合使用。Target属性指定了所链接的文件出现在哪个窗口。Target的值可以是name定义的名称，也可以是以下四类值： 目标文件显示一个新窗口 目标文件显示在同一个窗口 目标文件显示在Frameset的前一份文件的窗口 目标文件显示在整个浏览器窗口,4.3 多视窗口框架,4.3.6 浮动框架标签 标签的作用是在浏览器窗口中嵌入另一

14、个窗口，以显示另一个网页文件。标签有表4-7所示的属性。,4.3 多视窗口框架,例4-12： 浮动框架 欣赏图像1 新浪网站 ,4.3 多视窗口框架,4.3 多视窗口框架,运行时显示图（a）所示画面 ，当点击“欣赏图像1”时，图像1所对应的源文件“1.gif”在命名为“aa”的浮动框架窗口中显示。如图（b）所示。,（a）,（b）,一、思考题： 举例说明表格在网页设计中有哪些应用？ 使用表格进行网页的版面设计有哪些优势？ 设计表格的大小时使用绝对值和相对值会带来什么显示效果的不同？ 设置了表格的背景颜色之后，还可以再设置其中的单元格背景颜色吗？显示效果怎样？ 表单在网页中具有什么作用？常用的表单控件有哪些？ 在各种表单控件当中，有9种类型的控件都是用标签定义的，那么，使用时是用什么来区分的？ 什么是框架？带有框架的网页具有怎样