第3章ppt.ppt

《第3章ppt.ppt》由会员分享，可在线阅读，更多相关《第3章ppt.ppt（38页珍藏版）》请在三一文库上搜索。

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 王明

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

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

7、个人都在建 设自己的Web站点，编写自己的Web网页。HTML正是创建网页的 基础语言。 点击进入 ,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】一个简单的表单示例(Cha

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

10、单数据的处理程序。, 登录 用户名： 密码： ,右图是页面显示后输入了用户名“wang”和密码“123456”后的情形：,“cha3-7-formAction.htm”代码：, 简单表单 登录成功！ ,表单处理网页cha3-7-formAction.htm实际对表单数据没有做实质性的处理，它仅仅显示一个提示信息。,如果单击前面网页中的 “确定”, 表单数据就提交给 action属性的值“cha3-7-formAction.htm”处理, 即打开一个新的网页, 打开的网页如右图所示。,3.2.4 单选钮、复选框、文件选择框,复选框、单选钮、文件选择框的相关属性,【例3-8】复选框、单选钮、文件选

11、择框示例(Cha3-8.htm)。,    网页作品交流 姓名： 性别：男 女 制作经验：个人网页 娱乐网页 作品名称： 提交作品： ,文档说明: 单选钮中name属性值相同，表示它们是同一组，它们之中只能选择一项。 复选框中name属性值必须互不相同。,3.2.5 多行文本框,多行文本框（如下图）用于接受大量的文字。 多行文本框不是用标签创建，其标签对是、，同样必须放在标签对中。,的常用属性： name 设置多行文本框的名字； rows 文本框的行数（高度）； cols 文本框的列数（宽度）； readonly 是否是只读，取值为“true”时只能读，为“false”

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

13、、，用来创建列表中的列表项，它主要的属性是selected（不需赋值），指定初始状态被选中 。,【例3-10】列表示例(Cha3-10.htm)。, 选择课程: 计算机基础 网页编程 Java语言 选择上课时间: 周六 周日 ,3.2.7 习题,1. 用来创建表单的标签是（）。 a b. c. d. 2. 回答下列问题： 表格与表单在功能上主要不同之处是什么？ 的“type”属性可以没有吗？ 复选框和单选钮之间主要不同之点是什么？ 文件选择框的功能？ 菜单和单选钮有什么类似之处？。,3. 使用表单设计如右边所示页面： 4. 使用表单中的列表、多行文本框等标签设计如下网页。要求页面布局不随窗口大

14、小改变而变动。,3.3 框架,3.3.1 框架的基本结构,框架就是把浏览器窗口划分为多个子窗口，每个子窗口显示一个页面，从而实现在一个网页中同时显示多个页面的效果。 下面的页面同时显示了三个网页。,3.3.1 框架的基本结构,框架与表格类似，也是以行和列的形式分割页面，称之为水平分割（横向分割、行）和垂直分割（纵向分割、列）。但是框架和表格不同，其根本区别是：框架网页中的每一块里面包含的又是一个网页。 框架也可以嵌套，即在一个框架内还可以分割成 若干个框架。,框架由框架集标签对、 实现，这时，网页的主体被标签代替。 注意，包含的网页就不能有body部分，否则，将使框架完全被浏览器忽略，看到的只

15、是body部分包含的内容 。 的基本结构如下：, ,标签最重要的属性是rows和cols，用于分割页面，还有一些设置边框外观的属性。 的属性,分割框架时可加入符号“*”灵活使用，非常方便。例： 将窗口分割为上下俩子窗口，上子窗口200象素 点高，下子窗口300象素点高 将窗口分割为左、中、右仨子窗口,左和中为100 和200象素点宽，剩余归右 将窗口分割为上、中、下部分,上和中占30% 和40%，剩余归下子窗口 将窗口等分为上、下两个子窗口 将窗口等分为左、中、右三个子窗口 将窗口等分为左、中、右仨子窗口，第 1个占窗体 宽的1/6，第2个占2/6，第3个占3/6 分割窗口时如果计算不准确，值

16、加起来不是100%，它们会被按比例 缩小或放大成100%。,框架标签用于定义子窗口要显示的内容，是一个单标签。 的属性,3.3.2 简单框架示例,【例3-11】（Cha3-11.htm）设计一个框架网页，其 中包含左右两个子窗口，分别放置Cha3-6.htm和Cha3-5.htm两个网页，左子窗口占40%。, 简单框架示例 ,3.3.3 框架嵌套示例,【例3-12】（Cha3-12.htm）设计框架网页，使显示结果如下图。,分析：页面首先被分割为上下两部分，下面部分又被分割为左右两部分。因此，该页面需要使用框架嵌套方法才能实现，即下面部分还是放一个框架集，而此框架集再分割为左右两部分就可以了。

17、, 框架嵌套示例 ,3.3.4 子窗口间互操作,【例3-13】利用框架技术，设计如下图左所示页面。其中的“欢迎进入网页世界”子窗口是可变显示区，当单击左栏中的章标题后，该区显示对应章的内容。（如单击“第3章表格、表单及框架”后的界面如下图右）。 （Cha3-13.htm）,许多网页利用框架把窗口划分成固定显示区和可变显示区，固定的内容显示在一个框架中，如顶标题、目录、标志、导航栏和版权声明等。单击固定显示区的链接可以更新可变显示区的内容，这就是子窗口间的互操作。 子窗口间互操作就是设置链接的显示位置在本网页内的某个子窗口中，利用的name属性和的target属性实现。,分析： 页面的框架结构与

18、例3-12的类似，可套用例3-12的结构得到Cha3-13.htm； 由于有三个子窗口，所以需要设计对应的三个网页： Cha3-13top.htm、 Cha3-13left.htm、 Cha3-13right.htm。 由于目录中有三章标题，因而还必须有三个对应的页面，它们是类似的。为简化， 后面只给出第三章的文档Cha3-13-Cha3.htm； 上面窗口的界面实际就是例3-5中的一部 分，简化例3-5即可得。,3.3.4 子窗口间互操作, 框架及其链接 , 网页编程学习网站 ,3.3.4 子窗口间互操作, 目  录 第1章HTML基础 第2章列表、图像、超链接 第3章表格、表单及框架 , 欢迎进入网页世界 ,3.3.4 子窗口间互操作, 第3章表格、表单及框架 3.1 表格 用表格显示信息条理清楚，使浏览网页的人一目了然。 HTML具有强大的建立、显示表格的功能。 另外，表格在网页中还有协助布局的作用，可以把文字、 图像、声音甚至视频，或者另一个表格，组织到表格的不同 行列中，制作清晰、整齐的页面。 ,3.3.5 习题,1. 的属性“cols”是将页面分割成多（ ）。 a行 b列 c. 块 d. 格 2. 下面的语句（ ）是设置一个大小不变的子窗口。 a b. c. d. 3. 设计一个框架网页，页面如下图所示。,