1、第4章 表格与框架,2019/2/20,本章知识技能要点：,掌握表格标签,的使用方法以及其各类属性的设置 掌握表格中单元格合并的设计方法 掌握利用表格进行页面整体布局的方法 掌握框架页面制作的基本方法 掌握标签和标签中各个属性的取值以及所表示的含义 掌握多框架之间互相操作的实现方法 掌握浮动框架的制作方法,4.1 表格的应用,表格在网页设计中的应用非常广泛,可以方便灵活排版,很多动态大型网站也都是借助表格排版,这是因为表格不但可以固定文本或图像的输出，而且还可以任意的进行背景和前景颜色的设置。表格可以把相互关联的信息元素集中定位,使浏览页面的人一目了然。 在HTML文档中，表格是通过,标签来完
2、成的，如表4-1所示。在一个最基本的表格中，必须包含一组标签，一组标签和一组标签或。,4.1 表格的应用,4.1 表格的应用,4.1.1 定义表格标签 标签用来创建一个表格。,4.1 表格的应用,4.1.2 、和标签 标签用来创建表格中的每一行。 和都是插入单元格的标签，这两个标签必须嵌套在标签内，是成对出现的。用于表头标签，表头标签一般位于首行或首列，其中的文字以粗体居中显示。标签用于定义表格单元格中的具体内容。,4.1 表格的应用,、和标签对的关系如下所示： 例4-1： 一个简单的（2行3列）表格表头项1 表头项2 表头项3 单元格内容1 单元格内容2 单元格内容3 单元格内容4 单元格内
3、容5 单元格内容6 ,例4-1运行效果图,4.1 表格的应用,、和标签的大多数属性都是一样的。属性设定如表4-3所示。,4.1 表格的应用, 无标题文档计算机系 自动化系 电子信息系 c#程序设计 自控原理 数字信号处理 网络安全 计算机接口技术 电子系统设计 ,4.1 表格的应用,例4-2运行效果图,4.1 表格的应用,4.1.3 多行多列单元格的合并 要创建多行、多列单元格合并的单元格，只需在或中加入rowspan或colspan属性 合并多列的语法： colspan的设定值表示合并的列数，例如colspan=2则示这一格的宽度为两个列的宽度。 合并多行的语法： rowspan所要表示的意
4、义是指合并的行数，例如rowspan=2就表示这一格的高度为两个行的高度。,4.1 表格的应用,例4-3： 多行多列单元格的合并学生基本信息成 绩姓 名性 别专 业课 程分 数李晓华男计算机程序设计68王明莉女89,例4-3运行效果图,4.1 表格的应用,4.1.4 表格的标题标签 标签可以定义表格的标题。 下面为表格标题位置的设置格式。 表格标题,4.1 表格的应用,4.1.5 表格的嵌套及利用表格排版在HTML页面中，使用表格排版是通过嵌套来完成的，即一个表格内部可以嵌套另一个表格，用表格来排版页面的思路是：由总表格规划整体的结构，由嵌套的表格负责各个子栏目的排版，并插入到表格的相应位置，
5、这样就可以使页面的各个部分有条不紊，互不冲突，看上去清晰整洁。在实际做网页时一般不显示边框,边框的显示可根据自己的爱好来设定。在本例中为了让大家能够看清楚，都设置了有边框。,4.1 表格的应用,例4-5：表格嵌套网站logo 广告横幅banner标题栏标题栏标题栏标题栏标题栏标题栏标题栏,4.1 表格的应用,标题栏标题栏内容六内容一内容二内容三 内容四 内容五,4.1 表格的应用,例4-5运行效果图,4.1 表格的应用,4.3.1 框架的定义和基本构成 页面中利用框架技术，它可以把浏览器的显示空间分割为几个部分，每个部分都独立显示网页内容。把几个框架结合在一起构成框架集，能够让页面具有更为丰富
6、的效果。,4.3 框架,Frames结构的基本格式如下：,4.3 框架,4.3.2 的属性常用的属性如表4-5所示。,4.3 框架,4.3.2 的属性,将窗口分割为子窗口时，横向分用rows属性；纵向分用cols属性。 如 表示将窗口分为左（100像素宽）、中（200像素宽）右（剩余部分宽）三个子窗口,4.3.3 子框架标签 是个单标签,标签要放在框架集标签中,设置了几个子窗口就必须对应几个标签，而且每一个标签内还必须设定一个网页文件。表4-6列举了标签中常用的属性。,4.3 框架,无标题文档,4.3.4 框架的嵌套框架的定义可以嵌套设置。比如，在分割为左右两个窗口的基础之上，还可以把右边的窗
7、口再分割成上下两个，组成一共有三个子窗口的框架页。例4-10：,4.3 框架,例4-10运行的效果图,4.3 框架,4.3.5 各窗口间相互操作由Frames分割出来的几个窗口的内容并不是静止不变的，往往一个窗口的内容随着另一个窗口的要求而不断变化，这就提高了Frames的利用价值。为了完成各窗口之间的相互操作，我们必须为每一个窗口起一个名字，这个名字用属性Name来定义。 为窗口命名的格式是：例如： 定义了窗口名称之后，还应该使用中的Target来配合使用。Target属性指定了所链接的文件出现在哪个窗口。Target的值可以是name定义的名称，也可以是以下四类值：目标文件显示一个新窗口目
8、标文件显示在同一个窗口目标文件显示在Frameset的前一份文件的窗口目标文件显示在整个浏览器窗口,4.3 框架,4.3.6 浮动框架标签 标签的作用是在浏览器窗口中嵌入另一个窗口，以显示另一个网页文件。标签有表4-7所示的属性。,4.3 框架,例4-12：浮动框架 欣赏图像1 新浪网站,4.3 框架,4.3 框架,运行时显示图（a）所示画面 ，当点击“欣赏图像1”时，图像1所对应的源文件“1.gif”在命名为“aa”的浮动框架窗口中显示。如图（b）所示。,（a）,（b）,一、思考题： 举例说明表格在网页设计中有哪些应用？ 使用表格进行网页的版面设计有哪些优势？ 设计表格的大小时使用绝对值和相对值会带来什么显示效果的不同？ 设置了表格的背景颜色之后，还可以再设置其中的单元格背景颜色吗？显示效果怎样？ 什么是框架？带有框架的网页具有怎样的文档结构？ 在HTML文档中，标签与标签有怎样的关系？ 什么是浮动框架？它具有怎样的显示效果？,4.4 练习题,二、操作题 1编写HTML代码实现下图示效果的网页。,4.4 练习题,3用HTML代码制作一个框架页面，要求含有三个框架区域，如下图所示，点击左下方区域里的链接按钮时，所链接的页面均在右下方的区域里显示。,4.4 练习题,
