网页设计-表格、表单及框架

《网页设计-表格、表单及框架》由会员分享，可在线阅读，更多相关《网页设计-表格、表单及框架（37页珍藏版）》请在金锄头文库上搜索。

1、第3章 表格、表单及框架,3.1 表格 3.2 表单 3.3 框架,3.1 表格,3.1.1 表格的基本结构,用表格显示信息条理清楚，使浏览者一目了然。表格在网页中还有协助布局的作用，可以把文字、图像、声音甚至视频，或者另一个表格，组织到表格的不同行列中，以制作整齐、清晰的页面。HTML具有强大的建立、显示表格的功能。 HTML的表格由行和列组成， 每一行的一个列就是一个单元 格，如右图所示：,创建HTML表格需要使用下列标签：(1) 、 表格标签对，用于定义一个表格；(2) 、 行标签对，用于定义一个行，只能嵌套在表格标签对中(3) 、 单元格标签对，用于定义一个单元格，只能嵌套在行标签对中

2、。、中放单元格内容，即要显示的数据。,3.1.1 表格的基本结构,【例3-1】创建一个简单表格，放一组学生信息。,简单表格示例学号 姓名性别 08003301王明男 08003302张鸿女,常见的表格上面往往有个标题，第一行(表头)也常常用突出的字体(如黑体、粗体等)等来显示，以突显其内容。这些在HTML表格中可以利用表格下面两个标签来实现： 标题标签对，用于定义一个表格标题，它只能放在标签对中，并在之前。的align、valign属性用于设置标题的对齐方式，取值同，默认在表的上方中间。 要突出某个单元格内容，只要将希望突显内容的单元格标签对、改用表头单元格标签对、即可，甚至只需要将改为就可以

3、了。,3.1.2 表格的常用属性,的常用属性,2. 行、单元格的常用属性,【例3-2】属性设置示例,学生表 学号 姓名 性别 08003301王明男 08003302张鸿女 学号 姓名 性别 08003301王明男 08003302张鸿女 ,【例3-3】设置行及单元格的对齐方式示例,行、单元格的对齐方式表头行单元2表头行单元3表头行单元4 第1行水平右对齐水平右对齐水平右对齐水平中对齐 第2行水平左对齐水平左对齐水平左对齐水平右对齐 第3行高80垂直底对齐垂直顶对齐垂直中对齐 ,3.1.3 合并单元格,日常使用的表格中，常有些格子需要跨多行或多列，例如下面的学生表。,实际上，跨多列的格子就是将

4、一行的多个格子合并到一起，也就是该格子占多列。类似地，跨多行的格子就是将一列的多个格子合并到一起，也即该格子占多行。于是，在HTML中，就是使用指定单元格占多行或多列来创建跨多行或多列的单元格，即合并单元格。、 标签都有指定单元格占的行数或列数的属性： colspn属性 设置单元格占的列数，默认值是1。例：，指定单元格占3列。 rowspan属性 设置单元格占的行数，默认值是1。例：，指定单元格占2行。,【例3-4】创建前面所示的学生表表格,学生表基本信息 成绩 班级 学号 姓名课程 分数 计算机 一班08003301 王明计算机基础 92 08003302 张鸿 85 网络一班0800333

5、1 李晓娟网络编程 7308003332 刘刚 90 ,3.1.4 利用表格布局网页示例,使用表格设计网页格局，布局比较规则、容易，也使网页看上去更加整齐。表格布局中，不同的对象放在各自的单元格中，可以对它们进行不同的处理，而不用担心不同对象之间的影响。,【例3-5】利用表格布局创建如图所示网页,1.根据网页中元素设计表格 网页中有以下6个元素： 网页标题“网页编程学习网站”； 带学位帽人图片，文件是“a1.gif”； 装饰条图片，文件是“a2.gif”； 竹子图片，文件是“a3.gif”； 文字“如今”； 文字超链接“点击进入” (为简化,并不真链接)。根据6个元素的布局，划分出网格如图3-

6、8所示。虽然网页中只有6个元素，但有些元素需要占多个单元格，总共需要4行。,根据6个元素的布局，划分出网格如右图所示。,再根据各个元素所占位置，合并相关格子得到 6 个元素的单元格，如右图。,由上面分析可知，表格结构应该如下：,2.设置表格属性 根据各元素的特点和网页的整体布局，可基本定出表格的属性。设置属性后的表格结构如下：,3.表格填充具体代码 最后，填入各单元格的具体内容，根据需要修正属性并完善代码。Cha3-5.htm文档最后内容如下：,网页编程学习网站    如今，公司、企业和个人都在建设自己的Web站点，编写自己的Web网页。HTML正是创建网页的基础语言。

7、 点击进入 ,3.1.5 习题,1. 设计一个表格网页如下图所示，表格宽度占窗口100%，表头行背景色为橙色(orange)。,2. 使用表格布局给自己设计一个主页，结构如下图所示，表格宽、高占窗口100%。表格的第2行是个装饰条图片，表格的第3行是三个超链接(不必真链接)。,3.2 表单,3.2.1 表单的基本结构,在网页中，除了要向浏览者显示信息外，还常常需要接受浏览者输入的信息，例如需要用户注册时，就要收集用户的姓名、地址、电话号码等信息。表格是用于显示信息的，而表单正是用来接受用户输入信息的。一个表单要放在表单标签对、之间，中间放置表单输入控件元素或其他内容。表单的一般格式如下：,表单

8、输入控件元素或其他内容 ,表单控件元素是用于接受输入的控件，如文本框、提交按钮等。 属性说明：method 设置传送表单数据的方式。取值为get（默认方式）或post。 action 设置处理表单数据的处理程序。 post和get是两种不同的传送表单数据的方式。get方法把表单数据附加到浏览器地址栏地址的后面（信息被显示，不安全）向服务器传送，其长度不能超过2K字节。post方法把表单数据邮寄，在浏览器地址栏不会显示，其长度不受限制。,3.2.1 表单的基本结构,【例3-6】一个简单的表单示例(Cha3-6.htm)。,登录用户名： 密码： ,3.2.2 表单输入控件元素,cha3-6.htm

9、文档中有三行代码都是“”格式，这就是用于接受输入的输入标签，而在显示后的页面中看到的是文本框、按钮等不同式样的控件，所以称之为“控件”元素。表单常用的输入控件元素大部分由输入标签实现，由的“type”属性具体确定是哪一种控件，所以该属性是必须有的。标签必须放在标签对中，其常用属性见下表。 的常用属性,3.2.3 单行文本框、密码框、按钮,文本框、密码框、按钮的相关属性,【例3-7】单行文本框、密码框和按钮示例(Cha3-7.htm)： 在Cha3-6.htm文档中加入重置按钮、普通按钮和处理表单数据的处理程序。,登录用户名： 密码： ,右图是页面显示后输入了用户名“wang”和密码“12345

10、6”后的情形：,“cha3-7-formAction.htm”代码：,简单表单登录成功！ ,表单处理网页cha3-7-formAction.htm实际对表单数据没有做实质性的处理，它仅仅显示一个提示信息。,如果单击前面网页中的 “确定”, 表单数据就提交给 action属性的值“cha3-7-formAction.htm”处理, 即打开一个新的网页, 打开的网页如右图所示。,3.2.4 单选钮、复选框、文件选择框,复选框、单选钮、文件选择框的相关属性,【例3-8】复选框、单选钮、文件选择框示例(Cha3-8.htm)。,   网页作品交流姓名： 性别：男 女 制作经验：

11、个人网页 娱乐网页 作品名称： 提交作品： ,文档说明:单选钮中name属性值相同，表示它们是同一组，它们之中只能选择一项。复选框中name属性值必须互不相同。,3.2.5 多行文本框,多行文本框（如下图）用于接受大量的文字。多行文本框不是用标签创建，其标签对是、，同样必须放在标签对中。,的常用属性： name 设置多行文本框的名字； rows 文本框的行数（高度）； cols 文本框的列数（宽度）； readonly 是否是只读，取值为“true”时只能读，为“false”时可以编辑。用户输入行数超过rows 时会出现垂直滚动条；任何一行字符个数超过cols时会出现水平滚动条。,【例3-9】

12、多行文本框示例(Cha3-9.htm)。,留言簿在这里留言！,输入一些文字：,3.2.6 列表（菜单）,这里的列表指的是表单中的列表，也称为菜单，它主要是方便用户快速、正确地选择一些选项。列表也不是用标签创建，而是由列表标签对创建，并且一样地要放在标签对中。的常用属性： name 设置列表的名字； size 设置列表的高度(可显示的行数)。值为1时是下拉列表(也称为下拉菜单)；值大于1时是列表框，列表中的列表项超过高度则出现垂直滚动条。,创建列表还需要一个列表项标签、，用来创建列表中的列表项，它主要的属性是selected（不需赋值），指定初始状态被选中 。,【例3-10】列表示例(Cha3-

13、10.htm)。, 选择课程:计算机基础网页编程Java语言选择上课时间:周六周日,3.2.7 习题,1. 用来创建表单的标签是（）。a b. c. d. 2. 回答下列问题：表格与表单在功能上主要不同之处是什么？ 的“type”属性可以没有吗？复选框和单选钮之间主要不同之点是什么？文件选择框的功能？菜单和单选钮有什么类似之处？。,3. 使用表单设计如右边所示页面：4. 使用表单中的列表、多行文本框等标签设计如下网页。要求页面布局不随窗口大小改变而变动。,3.3 框架,3.3.1 框架的基本结构,框架就是把浏览器窗口划分为多个子窗口，每个子窗口显示一个页面，从而实现在一个网页中同时显示多个页面

14、的效果。下面的页面同时显示了三个网页。,3.3.1 框架的基本结构,框架与表格类似，也是以行和列的形式分割页面，称之为水平分割（横向分割、行）和垂直分割（纵向分割、列）。但是框架和表格不同，其根本区别是：框架网页中的每一块里面包含的又是一个网页。框架也可以嵌套，即在一个框架内还可以分割成 若干个框架。,框架由框架集标签对、 实现，这时，网页的主体被标签代替。注意，包含的网页就不能有body部分，否则，将使框架完全被浏览器忽略，看到的只是body部分包含的内容 。 的基本结构如下：,标签最重要的属性是rows和cols，用于分割页面，还有一些设置边框外观的属性。的属性,分割框架时可加入符号“*”

15、灵活使用，非常方便。例：将窗口分割为上下俩子窗口，上子窗口200象素点高，下子窗口300象素点高 将窗口分割为左、中、右仨子窗口,左和中为100和200象素点宽，剩余归右 将窗口分割为上、中、下部分,上和中占30%和40%，剩余归下子窗口 将窗口等分为上、下两个子窗口 将窗口等分为左、中、右三个子窗口将窗口等分为左、中、右仨子窗口，第 1个占窗体宽的1/6，第2个占2/6，第3个占3/6分割窗口时如果计算不准确，值加起来不是100%，它们会被按比例缩小或放大成100%。,框架标签用于定义子窗口要显示的内容，是一个单标签。的属性,3.3.2 简单框架示例,【例3-11】（Cha3-11.htm）设计一个框架网页，其 中包含左右两个子窗口，分别放置Cha3-6.htm和Cha3-5.htm两个网页，左子窗口占40%。,