网页设计-表格、表单及框架图文网页设计-表格、表单及框架_图文网页设计-表格、表单及框架_图文网页设计-表格、表单及框架_图文.ppt

第3章 表格、表单及框架 3.3.2 简单框架示例 【例3-11】（Cha3-11.htm）设计一个框架网页，其 中包含左右两个子窗口，分别放置Cha3-6.htm和Cha3-5.htm两个网页，左子窗口占40%。 html headtitle简单框架示例/title/head frameset cols=40%,* frame src=Cha3-6.htm frame src=Cha3-5.htm /frameset html 3.3.3 框架嵌套示例 【例3-12】（Cha3-12.htm）设计框架网页，使显示结果如下图。 分析：页面首先被分割为上下两部分，下面部分又被分割为左右两部分。因此，该页面需要使用框架嵌套方法才能实现，即下面部分还是放一个框架集，而此框架集再分割为左右两部分就可以了。 html headtitle框架嵌套示例/title/head frameset rows=35%,* frame src=../第1章/cha1-1.htm scrolling=no frameset cols=6*,4* frame src= frame src= /frameset /frameset /html 第 * 页 * 3.1 表格 3.2 表单 3.3 框架 3.1 表格 3.1.1 表格的基本结构 用表格显示信息条理清楚，使浏览者一目了然。表格在网页中还有协助布局的作用，可以把文字、图像、声音甚至视频，或者另一个表格，组织到表格的不同行列中，以制作整齐、清晰的页面。 HTML具有强大的建立、显示表格的功能。 HTML的表格由行和列组成， 每一行的一个列就是一个单元 格，如右图所示： 创建HTML表格需要使用下列标签： (1) table、/table —— 表格标签对，用于定义一个表格； (2) tr、/tr —— 行标签对，用于定义一个行，只能嵌套在表格标签对中 (3) td、/td —— 单元格标签对，用于定义一个单元格，只能嵌套在 行标签对中。td、/td中放单元格内容，即要显示的数据。 3.1.1 表格的基本结构 【例3-1】创建一个简单表格，放一组学生信息。 htmlheadtitle简单表格示例/title/head body table !-- 定义一个表 -- tr !-- 定义一行表格(第1行) -- td学号/td !-- 第1行的第1列 -- td姓名/td td性别/td !-- 第1行的第3列 -- /tr tr !-- 定义第2行 -- ttdtd王明/tdtd男/td /tr tr !-- 定义第3行 -- ttdtd张鸿/tdtd女/td /tr /table !-- 表格结束 -- /body/html 常见的表格上面往往有个标题，第一行(表头)也常常用突出的字体(如黑体、粗体等)等来显示，以突显其内容。这些在HTML表格中可以利用表格下面两个标签来实现： caption/caption —— 标题标签对，用于定义一个表格标题，它只能放在table标签对中，并在tr之前。caption的align、valign属性用于设置标题的对齐方式，取值同td，默认在表的上方中间。 th/th —— 要突出某个单元格内容，只要将希望突显内容的单元格标签对td、/td改用表头单元格标签对th、/th即可，甚至只需要将td改为th就可以了。 3.1.2 表格的常用属性 table的常用属性 left、center、right 设置表格在网页中的位置(左,中,右） align 像素值 设置表格的格子中内容与边框间的空隙 cellpadding 像素值 设置表格中格子间的空隙 cells