网页设计基础第三章.ppt

1、随着网页内容的不断丰富，图像、声音、动画等多媒体元素不断充斥网页，使得网页内容不断膨胀，用户对网页的视觉效果提出了更高要求。本章就介绍如何进行网页布局，以最适合浏览的方式将图片和文字等排放在页面的不同位置，使得页面更加美观、整齐。3.13.1表格表格表格以行与列的形式简明扼要地表达相关内容，结构严谨且效果直观。表格以行与列的形式简明扼要地表达相关内容，结构严谨且效果直观。表格通常所含的信息量非常大，能够把许多相互关联的数字和信息集中表格通常所含的信息量非常大，能够把许多相互关联的数字和信息集中起来。一张表格可以非常直观地表示出需要用大段文字描述的内容信息。起来。一张表格可以非常直观地表示出需要

2、用大段文字描述的内容信息。另外，在制作网页时，表格除了组织和显示数据之外，还具有布局页面另外，在制作网页时，表格除了组织和显示数据之外，还具有布局页面的作用。表格可以将文本和图片等元素按行、列排列，实现网页的布局的作用。表格可以将文本和图片等元素按行、列排列，实现网页的布局要求。要求。3.1.13.1.1表格的基本概念与结构表格的基本概念与结构表格是网页中常见的一种页面元素，由行和列组成。行和列交叉构成了表格是网页中常见的一种页面元素，由行和列组成。行和列交叉构成了表格的单元格，单元格中包含表格的数据，每个表格还有特定的标题。表格的单元格，单元格中包含表格的数据，每个表格还有特定的标题。创建表

3、格主要用到创建表格主要用到4个标签：个标签：、和和。在一个最基。在一个最基本的表格元素中，必须包含一组本的表格元素中，必须包含一组标签、一组标签、一组标签和一组标签和一组标签。标签。创建表格的语法格式如下：创建表格的语法格式如下：（）第一行第一列单元格内容）第一行第一列单元格内容（）（）第一行第二列单元格内容）第一行第二列单元格内容（）（）第一行第）第一行第n列单元格内容列单元格内容（）第二行第一列单元格内容第二行第一列单元格内容 第二行第二列单元格内容第二行第二列单元格内容 第二行第第二行第n列单元格内容列单元格内容 第第m行第一列单元格内容行第一列单元格内容 第第m行第二列单元格内容行第二

4、列单元格内容 第第m行第行第n列单元格内容列单元格内容（1）table：该标签对用于定义整个表格，表格中的所有内容都必：该标签对用于定义整个表格，表格中的所有内容都必须位于须位于和和之间。一个表格元素是由多个横行（之间。一个表格元素是由多个横行（）、单元格）、单元格（）和表头单元格（）和表头单元格（）子元素组成的。）子元素组成的。（2）：该标签对用于定义表格的标题，标题文本位于：该标签对用于定义表格的标题，标题文本位于与与之间。表格标题标签不是必需的，但如果使用，就必之间。表格标题标签不是必需的，但如果使用，就必须放置在须放置在之后。之后。说明：（3）：标签定义表格的行，必须位于标签定义表格的

5、行，必须位于和和之间，结束标签之间，结束标签可以省略，在一对可以省略，在一对标签内可建标签内可建立一行表格，也可以包含多组由立一行表格，也可以包含多组由或或标签所定义的单元格。表格标签所定义的单元格。表格有多少行就应该定义多少对有多少行就应该定义多少对标签。标签。（4）：该标签对用于定义表格的表头单元格，此单元格中的文：该标签对用于定义表格的表头单元格，此单元格中的文字将显示为粗体。有多少个表头单元格就应该定义多少对字将显示为粗体。有多少个表头单元格就应该定义多少对标签。表头单标签。表头单元格也可以省略。元格也可以省略。（5）：该标签对用于定义表格列的单元格，一对：该标签对用于定义表格列的单元

6、格，一对标签将建立一个单元格。标签将建立一个单元格。标签必须放在标签必须放在标签内。单元格内的数据，标签内。单元格内的数据，必须位于必须位于与与之间，表格中有多少个单元格就应该定义多少对之间，表格中有多少个单元格就应该定义多少对标签。标签。3.1.23.1.2表格的基本属性表格的基本属性标签的属性主要有标签的属性主要有border、bordercolor、width、height、align、bgcolor、background、cellspacing、cellpadding等，用于设置表格的边等，用于设置表格的边框、大小、背景颜色等。这些属性是可选的，也可以不设置属性值，而框、大小、背景颜色

7、等。这些属性是可选的，也可以不设置属性值，而使用使用标签的默认属性值。标签的默认属性值。1.1.设置表格边框和分隔线显示状态设置表格边框和分隔线显示状态如果不定义边框属性，表格将不显示边框，但大多数时候，需要显示边如果不定义边框属性，表格将不显示边框，但大多数时候，需要显示边框。设置表格边框的语法格式如下：框。设置表格边框的语法格式如下：border属性值为数字，表示表格边框宽度的像素数。例如属性值为数字，表示表格边框宽度的像素数。例如，表示表格的边框宽度为表示表格的边框宽度为12个像素。如果不定义边框属性个像素。如果不定义边框属性或或border属性的值是属性的值是0，表格将不显示边框。，表

8、格将不显示边框。1 1）设置边框显示状态）设置边框显示状态还可以将表格还可以将表格4个边框：左边框、右边框、上边框、下边框设置为显示个边框：左边框、右边框、上边框、下边框设置为显示或者隐藏。设置表格边框显示状态的语法格式如下：或者隐藏。设置表格边框显示状态的语法格式如下：（1）显示整个表格边框：）显示整个表格边框：（2）不显示表格边框：）不显示表格边框：（3）只显示表格的上下边框：）只显示表格的上下边框：（4）只显示表格的左右边框：）只显示表格的左右边框：（5）只显示表格的上边框：）只显示表格的上边框：（6）只显示表格的下边框：）只显示表格的下边框：（7）只显示表格的左边框：）只显示表格的左边

9、框：（9）只显示表格的右边框：）只显示表格的右边框：2 2）设置表格中的分隔线）设置表格中的分隔线表格中分隔线的显示效果同样可以进行设置。设置表格中分隔线的显示状态表格中分隔线的显示效果同样可以进行设置。设置表格中分隔线的显示状态的语法格式如下：的语法格式如下：（1）显示所有分隔线：）显示所有分隔线：（2）只显示组与组的分隔线：）只显示组与组的分隔线：（3）只显示行与行之间的分隔线：）只显示行与行之间的分隔线：（4）只显示列与列之间的分隔线：）只显示列与列之间的分隔线：（5）不显示所有分隔线：）不显示所有分隔线：2.2.设置表格边框的颜色设置表格边框的颜色通过设置表格边框的颜色，能达到较好的视

10、觉效果。但是一些低版本的通过设置表格边框的颜色，能达到较好的视觉效果。但是一些低版本的浏览器并不支持表格的边框颜色、背景颜色和背景图像，在实际制作网浏览器并不支持表格的边框颜色、背景颜色和背景图像，在实际制作网页时，应该尽可能多地用各种浏览器对制作的网页进行测试。设置表格页时，应该尽可能多地用各种浏览器对制作的网页进行测试。设置表格边框颜色的语法格式如下：边框颜色的语法格式如下：3 3设置表格的大小设置表格的大小width和和height属性分别用于设置表格的宽度和高度，从而定义表格的大属性分别用于设置表格的宽度和高度，从而定义表格的大小。这两个属性值为像素值或者百分比。其中百分数表示表格的宽

11、度小。这两个属性值为像素值或者百分比。其中百分数表示表格的宽度（高度）占浏览器窗口宽度（高度）的百分比。设置表格大小的语法格（高度）占浏览器窗口宽度（高度）的百分比。设置表格大小的语法格式如下：式如下：4 4设置表格的背景颜色和背景图像设置表格的背景颜色和背景图像设置表格背景颜色的语法格式如下：设置表格背景颜色的语法格式如下：其中，其中，“#”取值为十六进制的颜色代码。取值为十六进制的颜色代码。设置表格背景图像的语法格式如下：设置表格背景图像的语法格式如下：5 5设置表格的位置设置表格的位置设置表格位置的语法格式如下：设置表格位置的语法格式如下：align属性的参数值有属性的参数值有left、

12、center和和right，分别表示表格位于其相邻文，分别表示表格位于其相邻文字的左侧、水平居中和位于与其相邻的文字右侧。字的左侧、水平居中和位于与其相邻的文字右侧。6 6设置表格边框与内容的间距设置表格边框与内容的间距设置表格边框与内容间距的语法格式如下：设置表格边框与内容间距的语法格式如下：其中，数值为像素值，表示单元格内容与表格边框之间的距离。其中，数值为像素值，表示单元格内容与表格边框之间的距离。7 7设置表格的标题设置表格的标题表格的标题用来表明表格内容。设置表格标题的语法结构如下：表格的标题用来表明表格内容。设置表格标题的语法结构如下：表格标题表格标题 之 间 的 内 容 就 是

13、表 格 的 标 题。之 间 的 内 容 就 是 表 格 的 标 题。应放在应放在标签中，在表格的行标标签中，在表格的行标签签之前。之前。3.1.33.1.3表格的行属性表格的行属性表格按行组织，每个表格均有若干行，每行被分割为若干单元格。单元表格按行组织，每个表格均有若干行，每行被分割为若干单元格。单元格可以包含文本、图片、列表、段落、表单、水平线、表格等元素。格可以包含文本、图片、列表、段落、表单、水平线、表格等元素。标签有标签有height、align、valign、bordercolor和和bgcolor等可选属性，等可选属性，用于设置表格每一行的属性。用于设置表格每一行的属性。1 1设

14、置行的高度与对齐方式设置行的高度与对齐方式height属性控制表格内某行的高度，其语法格式如下：属性控制表格内某行的高度，其语法格式如下：其中，数值为整数，其单位为像素。其中，数值为整数，其单位为像素。align属性控制表格中该行单元格内文字的水平对齐方式，其语法格式如属性控制表格中该行单元格内文字的水平对齐方式，其语法格式如下：下：其中，参数值为其中，参数值为left、center、right，分别表示该行中各单元格内容的对，分别表示该行中各单元格内容的对齐方式为左对齐、水平居中和右对齐，默认值为齐方式为左对齐、水平居中和右对齐，默认值为left。valign属性控制表格中该行单元格内文字的

15、垂直方向对齐方式，语法格属性控制表格中该行单元格内文字的垂直方向对齐方式，语法格式如下：式如下：其中，参数值为其中，参数值为top、middle和和bottom，分别表示该行中各单元格内容，分别表示该行中各单元格内容的对齐方式为上对齐、垂直居中和下对齐，默认值为的对齐方式为上对齐、垂直居中和下对齐，默认值为middle。2 2设置行的内边框颜色与行的背景颜色设置行的内边框颜色与行的背景颜色在在标签中使用标签中使用bordercolor属性控制表格某行内边框的颜色，其语法属性控制表格某行内边框的颜色，其语法结构如下：结构如下：在在标签中使用标签中使用bgcolor属性控制表格中该行单元格的背景颜

16、色，其语属性控制表格中该行单元格的背景颜色，其语法格式如下：法格式如下：3.1.43.1.4表格的单元格属性表格的单元格属性每个表格均有若干行（由每个表格均有若干行（由标签定义），每行被分割为若干单元格标签定义），每行被分割为若干单元格（由（由或或标签定义）。由于标签定义）。由于和和标签都是用于设置单元格标签都是用于设置单元格内容，所以内容，所以和和标签的所有属性及相应的属性功能完全一样。标签的所有属性及相应的属性功能完全一样。和和标签有标签有bordercolor、bgcolor、background、width、align、valign、rowspan、colspan等可选属性。等可选属性

17、。1 1th 和和表头标签表头标签是成对出现的，用于规定表头的内容，是成对出现的，用于规定表头的内容，之间之间的内容就是位于该表头单元格的内容。表头一般位于每列的首行，用以的内容就是位于该表头单元格的内容。表头一般位于每列的首行，用以说明该列的具体数据是关于哪个对象的。说明该列的具体数据是关于哪个对象的。数据标签数据标签也是成对出现的，也是成对出现的，之间的内容就是该单元格之间的内容就是该单元格中的具体数据内容。除了表头元素是以粗体显示外，表头元素和具体数中的具体数据内容。除了表头元素是以粗体显示外，表头元素和具体数据元素没有区别。据元素没有区别。2 2设置单元格宽度设置单元格宽度在在或或标签

18、中使用标签中使用width属性控制表格中某单元格的宽度，其语法格属性控制表格中某单元格的宽度，其语法格式如下：式如下：width属性的参数值可以是数字或百分数，其中数字表示此单元格宽度所占属性的参数值可以是数字或百分数，其中数字表示此单元格宽度所占的像素数，百分数表示此单元格的宽度占整个表格宽度的百分比。的像素数，百分数表示此单元格的宽度占整个表格宽度的百分比。3.3.设置单元格内容的对齐方式设置单元格内容的对齐方式align属性用于设置单元格内容在水平方向上的对齐方式，其语法格式如下：属性用于设置单元格内容在水平方向上的对齐方式，其语法格式如下：align属性的参数值有属性的参数值有left

19、（默认值）、（默认值）、center和和right，分别表示该单元格内，分别表示该单元格内容的对齐方式为左对齐、水平居中和右对齐的。容的对齐方式为左对齐、水平居中和右对齐的。4 4设置单元格的边框颜色、背景颜色和背景图像设置单元格的边框颜色、背景颜色和背景图像设置单元格边框颜色的语法格式如下设置单元格边框颜色的语法格式如下：设置单元格背景颜色的语法格式如下设置单元格背景颜色的语法格式如下：设置单元格背景图像的语法格式如下设置单元格背景图像的语法格式如下：5 5合并单元格合并单元格在表格中使用在表格中使用和和标签的标签的colspan和和rowspan属性设置跨行和跨列的单元格，属性设置跨行和跨

20、列的单元格，将单元格合并，语法格式如下：将单元格合并，语法格式如下：rowspan表示该单元格所跨的行数，默认值为表示该单元格所跨的行数，默认值为1。colspan表示该单元格所跨的列数，表示该单元格所跨的列数，默认值为默认值为1。3.1.53.1.5利用表格进行网页布局利用表格进行网页布局在利用表格进行网页布局的过程中，表格的边框可以设置为可见，这样可在利用表格进行网页布局的过程中，表格的边框可以设置为可见，这样可以在浏览器中清晰地看到利用表格进行网页布局的效果。在进行较复杂的以在浏览器中清晰地看到利用表格进行网页布局的效果。在进行较复杂的网页布局时还可以利用表格的嵌套功能，即在表格内部再嵌

21、入另一个表格网页布局时还可以利用表格的嵌套功能，即在表格内部再嵌入另一个表格对页面布局进行细化。对页面布局进行细化。在网页布局结束时，再将表格的在网页布局结束时，再将表格的border属性设置为属性设置为0，不显示表格的边框，不显示表格的边框，使页面美观，而页面上的其他内容则会留在使页面美观，而页面上的其他内容则会留在HTML网页上。网页上。3.23.2框架框架框架技术可以将浏览器的显示空间分割成多个可滚动的区域，每个区域可以独立显示框架技术可以将浏览器的显示空间分割成多个可滚动的区域，每个区域可以独立显示不同的网页。这些区域互不干扰，可以相互沟通。一个区域可保持不变，而其他区域不同的网页。这

22、些区域互不干扰，可以相互沟通。一个区域可保持不变，而其他区域根据用户选择的超链接显示相应网页，达到在浏览器中同时浏览不同网页的效果。框根据用户选择的超链接显示相应网页，达到在浏览器中同时浏览不同网页的效果。框架技术常应用于制作页面导航栏和网站论坛。架技术常应用于制作页面导航栏和网站论坛。3.2.13.2.1框架的基本概念框架的基本概念框架的基本结构主要分为框架集和单个框架两部分。框架集是在一个文档框架的基本结构主要分为框架集和单个框架两部分。框架集是在一个文档内定义一组框架结构的内定义一组框架结构的HTML网页。单个框架是指框架集中的单个区域。网页。单个框架是指框架集中的单个区域。要在浏览器中

23、查看一组框架网页，先打开框架集文件，浏览器随后打开要要在浏览器中查看一组框架网页，先打开框架集文件，浏览器随后打开要显示在这些框架中的相应显示在这些框架中的相应HTML文档。框架不是文件，是存放文档。框架不是文件，是存放HTML文档文档的容器。任何一个框架都可以显示任意的的容器。任何一个框架都可以显示任意的HTML文档，在框架中初始显示文档，在框架中初始显示的的HTML文档也是构成框架网页的一部分。文档也是构成框架网页的一部分。1 1框架结构框架结构在框架集文件中使用在框架集文件中使用标签和标签和标签定义框架的数量、大小，标签定义框架的数量、大小，载入框架的网页源和其他可以定义的属性等。载入框

24、架的网页源和其他可以定义的属性等。在单个框架中显示的在单个框架中显示的HTML文档与一般的文档与一般的HTML文档的书写格式相同。而在文档的书写格式相同。而在框架集文档中，页面的框架集文档中，页面的标签被标签被标签取代，然后通过标签取代，然后通过标签定义每一个框架。标签定义每一个框架。框架集文档的结构如下框架集文档的结构如下：创建框架网页实例创建框架网页实例,框架集文件源代码如下：框架集文件源代码如下：框架的基本结构框架的基本结构2 2窗口框架的分割方式窗口框架的分割方式框架的分割方式主要有框架的分割方式主要有3种：左右分割、上下分割和嵌套分割。通过种：左右分割、上下分割和嵌套分割。通过标签中

25、的标签中的cols属性（左右分割）和属性（左右分割）和rows属性（上下分割）来设置分属性（上下分割）来设置分割方式。通过割方式。通过标签中标签中d的的name属性和属性和src属性设置每一个框架的名称和属性设置每一个框架的名称和要导入框架的要导入框架的HTML文件来源。文件来源。1 1）左右分割）左右分割使用使用标签的标签的cols属性将浏览器窗口左右分割成多个窗口，语法格式属性将浏览器窗口左右分割成多个窗口，语法格式如下：如下：cols的属性值可以用数字、百分比、剩余值及这的属性值可以用数字、百分比、剩余值及这3种方式的混合方式来表示。种方式的混合方式来表示。数字表示像素值；剩余值（数字表

26、示像素值；剩余值（*）表示当前所有窗口设定之后的剩余部分。）表示当前所有窗口设定之后的剩余部分。2 2）上下分割）上下分割使用使用标签的标签的rows属性将浏览器窗口上下分割成多个窗口，语法格式属性将浏览器窗口上下分割成多个窗口，语法格式如下：如下：3 3）嵌套分割）嵌套分割同时使用同时使用标签的标签的cols属性和属性和rows属性可以将浏览器属性可以将浏览器窗口进行嵌套分割，即同时左右和上下分割。窗口进行嵌套分割，即同时左右和上下分割。嵌套分割框架的语法格式如下：嵌套分割框架的语法格式如下：或或 3.2.23.2.2设置框架集的属性设置框架集的属性框架设置标签框架设置标签是成对出现的，是成

27、对出现的，之间的内容之间的内容就是框架集文档的主体部分。在框架集文档中不能使用就是框架集文档的主体部分。在框架集文档中不能使用标签，否则会标签，否则会导致导致Web浏览器忽略所有的框架定义，而只显示浏览器忽略所有的框架定义，而只显示和和之间的内容。之间的内容。标签主要有标签主要有rows、cols、border、bordercolor和和frameborder等属性。等属性。1 1设置框架上下分割和左右分割的情况设置框架上下分割和左右分割的情况标签的标签的rows和和cols属性用于设置窗口框架上下分割和左右分割的情属性用于设置窗口框架上下分割和左右分割的情况，语法格式如下：况，语法格式如下：

28、参数值之间用逗号分隔，依次表示各个子窗口的高度（宽度）。这些参数参数值之间用逗号分隔，依次表示各个子窗口的高度（宽度）。这些参数可以用数字、百分比或剩余值以及这可以用数字、百分比或剩余值以及这3种方式的混合来表示。数字表示子种方式的混合来表示。数字表示子窗口高度（宽度）所占的像素数；百分比窗口高度（宽度）所占的像素数；百分比“%”表示子窗口高度（宽度）表示子窗口高度（宽度）占整个浏览器窗口高度（宽度）的百分比；剩余值占整个浏览器窗口高度（宽度）的百分比；剩余值“*”。表示当前所有窗。表示当前所有窗口设定之后的剩余部分口设定之后的剩余部分。2 2设置框架边框的宽度设置框架边框的宽度标签的标签的b

29、order属性或属性或framespacing属性都可以用于控制分属性都可以用于控制分割框架的边框宽度，语法格式如下割框架的边框宽度，语法格式如下：其中，参数值表示此窗口框架的宽度，单位为像素其中，参数值表示此窗口框架的宽度，单位为像素。3 3设置框架边框的颜色设置框架边框的颜色标签的标签的bordercolor属性用于设置框架边框的颜色，属性用于设置框架边框的颜色，其语法格式如下其语法格式如下：4 4设置框架边框的显示状态设置框架边框的显示状态在在与与标签中使用标签中使用frameborder属性，可以控制框架四周是属性，可以控制框架四周是否显示边框。在否显示边框。在标签中使用标签中使用fr

30、ameborder属性时，可控制所有框属性时，可控制所有框架的边框。在架的边框。在标签中使用标签中使用frameborder属性时，仅能控制该属性时，仅能控制该标签所代表框架的边框。设置框架边框显示状态的语法格式如下标签所代表框架的边框。设置框架边框显示状态的语法格式如下：参数值可以取值参数值可以取值0或或1，0代表不显示框架，代表不显示框架，1代表显示框架，默认值为代表显示框架，默认值为1。3.2.33.2.3设置框架的属性设置框架的属性标签用来初始化框架。页面中的每一个框架均对应一个标签用来初始化框架。页面中的每一个框架均对应一个标签标签。是单独出现的标签，将它放在是单独出现的标签，将它放

31、在中，中，标签主要有标签主要有src、name、marginwidth、marginheight、scrolling和和noresize等可等可选属性选属性。1 1指定在框架中显示的网页指定在框架中显示的网页在浏览器窗口中建立好框架后，应在各个框架内放入相应的信息。用在浏览器窗口中建立好框架后，应在各个框架内放入相应的信息。用标签中的标签中的src属性链接相应的属性链接相应的HTML文档，该文档的内容就显示在文档，该文档的内容就显示在标签标签对应的框架中对应的框架中。标签的标签的src属性用于设置在某个框架中显示的网页，其语法格式如下属性用于设置在某个框架中显示的网页，其语法格式如下：如果一个

32、如果一个标签中没有标签中没有src属性，则该窗口显示为空白属性，则该窗口显示为空白。2 2定义子窗口名称定义子窗口名称标签的标签的name属性用来指定框架的名称，其语法格式如下属性用来指定框架的名称，其语法格式如下：当定义好框架的名称后，可在超链接中指定显示超链接目标网页的框架当定义好框架的名称后，可在超链接中指定显示超链接目标网页的框架。3 3控制框架滚动条属性控制框架滚动条属性标签标签scrolling属性用于设置某个框架窗口是否显示滚动条，其语法格属性用于设置某个框架窗口是否显示滚动条，其语法格式如下：式如下：参数值可以是参数值可以是yes、no和和auto（默认值），分别表示显示滚动条

33、、不显示滚动（默认值），分别表示显示滚动条、不显示滚动条、自动根据框架内容来设置是否显示滚动条。条、自动根据框架内容来设置是否显示滚动条。4 4设置是否允许调整框架的大小设置是否允许调整框架的大小标签的标签的noresize属性没有属性值，用于设置是否允许浏览者使用鼠标属性没有属性值，用于设置是否允许浏览者使用鼠标调整框架的大小。其语法格式如下：调整框架的大小。其语法格式如下：如果添加了如果添加了noresize属性，则表示不能调整框架大小。不添加属性，则表示不能调整框架大小。不添加noresize属性，则属性，则可以通过鼠标拖动框架边框来调整框架的大小。可以通过鼠标拖动框架边框来调整框架的大

34、小。5 5设置框架的边距设置框架的边距标签的标签的marginwidth属性用于控制框架中的内容与框架左右边框的距属性用于控制框架中的内容与框架左右边框的距离，该属性的参数值为像素值，默认为离，该属性的参数值为像素值，默认为1。其语法格式如下：。其语法格式如下：标签的标签的marginaheight属性用来控制框架内显示的内容与框架上下边框属性用来控制框架内显示的内容与框架上下边框的距离，该属性参数值为像素值，默认为的距离，该属性参数值为像素值，默认为1。设置框架边距的语法格式如下：。设置框架边距的语法格式如下：3.2.43.2.4浮动框架浮动框架 在在HTML中通过中通过标签创建浮动框架。浮

35、动框架是指在一个页面中直接标签创建浮动框架。浮动框架是指在一个页面中直接引入另一个页面的特殊框架。语法格式如下引入另一个页面的特殊框架。语法格式如下：浮动框架中不能用浮动框架中不能用标签代替标签代替标签标签，标签放在标签放在标签之内标签之内。3.2.53.2.5设置框架中的超链接设置框架中的超链接在框架网页中使用超链接可以在不同的框架窗口中打开不同的网页内容。首先在框架网页中使用超链接可以在不同的框架窗口中打开不同的网页内容。首先在在标签中使用标签中使用name属性定义框架窗口的名称，然后在超链接属性定义框架窗口的名称，然后在超链接标签标签中使用中使用target属性指定所链接的网页文件出现在

36、哪一个框架中。设置框架中超属性指定所链接的网页文件出现在哪一个框架中。设置框架中超链接的语法格式如下链接的语法格式如下：需要注意的是，需要注意的是，target属性有几个特定的框架名称具有特殊含义，它们是属性有几个特定的框架名称具有特殊含义，它们是_blank、_self、_parent和和_top。当将当将target属性设置为属性设置为_blank（target=_blank）时，将打开新的浏览器窗口）时，将打开新的浏览器窗口显示链接的网页内容显示链接的网页内容；当将当将target属性设置为属性设置为_self（target=_self）时，将在当前框架窗口中显示链）时，将在当前框架窗口

37、中显示链接的网页内容接的网页内容；当将当将target属性设置为属性设置为_parent（arget=_parent）时，将在该链接所在的框架）时，将在该链接所在的框架窗口的上一层框架中打开链接的网页内容，如果没有上一层框架，则在同一框窗口的上一层框架中打开链接的网页内容，如果没有上一层框架，则在同一框架窗口中打开链接的网页内容架窗口中打开链接的网页内容；当将当将target属性设置为属性设置为_top(target=_top)时，则脱离目前的窗口框架，在最时，则脱离目前的窗口框架，在最上层的窗口框架中显示链接的网页内容上层的窗口框架中显示链接的网页内容。3.2.63.2.6利用框架进行网页布

38、局利用框架进行网页布局简单制作一个使用框架布局的网页。网页由简单制作一个使用框架布局的网页。网页由3个框架组成：上方是网页标题区，个框架组成：上方是网页标题区，左边是导航区，右边是内容区。在浏览器中打开该网页时，单击左边导航框架左边是导航区，右边是内容区。在浏览器中打开该网页时，单击左边导航框架内的某个超练接，对应的链接网页内容就显示在右边框架内。上方的网页标题内的某个超练接，对应的链接网页内容就显示在右边框架内。上方的网页标题区和左边的导航栏始终不变。区和左边的导航栏始终不变。3.33.3水平线和列表水平线和列表水平线和列表在网页中也会经常用到。在网页设计中水平线和列表在网页中也会经常用到。

39、在网页设计中使用水平线和列表将信息组织成各种不同形式，可以使用水平线和列表将信息组织成各种不同形式，可以使网页内容排列得更清晰明了。使网页内容排列得更清晰明了。3.3.1 3.3.1 水平线水平线在在HTML文件中可以使用文件中可以使用标签创建水平线，将不同的内容分开，从视标签创建水平线，将不同的内容分开，从视觉上将网页分隔成多个部分，使各部分内容看起来清晰明了。觉上将网页分隔成多个部分，使各部分内容看起来清晰明了。标签的作用是换行并在该行下添加一条水平线，水平线的上下都会留标签的作用是换行并在该行下添加一条水平线，水平线的上下都会留出一定的空白。出一定的空白。标签有标签有size、align

40、、color、width、noshade等可选等可选属性，创建水平线的语法结构如下：属性，创建水平线的语法结构如下：各属性的含义如下各属性的含义如下：size：设置水平线的粗细，以像素为单位，默认值：设置水平线的粗细，以像素为单位，默认值2。width：设置水平线的长度，单位为像素或百分比，默认值：设置水平线的长度，单位为像素或百分比，默认值100%。align：设置水平线的对齐方式，属性值为：设置水平线的对齐方式，属性值为left、center（默认）、（默认）、right。color：设置水平分线的颜色，默认值为：设置水平分线的颜色，默认值为black。noshade：表示水平线不显示：表

41、示水平线不显示3D阴影效果。阴影效果。3.2.2 3.2.2 列表列表当网页中包含多项内容时，可以使用列表将这些内容进当网页中包含多项内容时，可以使用列表将这些内容进行合理组织。行合理组织。HTML中的列表可分为无序列表、有序中的列表可分为无序列表、有序列表、自定义列表列表、自定义列表3种。种。1 1无序列表无序列表无序列表是用项目符号来表示一个没有特定顺序的相关条目的集合。用无序列表是用项目符号来表示一个没有特定顺序的相关条目的集合。用于说明文件中需要列出的项，可以按任意顺序显示出来，各个列表项之于说明文件中需要列出的项，可以按任意顺序显示出来，各个列表项之间没有顺序级别之分。通常会在每个列

42、表项的前面添加一个项目符号，间没有顺序级别之分。通常会在每个列表项的前面添加一个项目符号，并且每行缩进相同的距离。并且每行缩进相同的距离。无序列表使用一对标签无序列表使用一对标签定义，并且每个列表项都要使用定义，并且每个列表项都要使用标签进行定义。标签进行定义。创建无序列表的语法格式如下：创建无序列表的语法格式如下：列表项列表项 列表项列表项 列表项列表项 其中其中和和必须成对出现，且必须成对出现，且必须放在必须放在标签之间，标签之间，可以省略。省略可以省略。省略变成单标签，变成单标签，在省略在省略的无序列表中，下一个的无序列表中，下一个的出现，就表明上一个的出现，就表明上一个列表项的结束。列

43、表项的结束。type属性用于指定每个列表项的项目符号。属性用于指定每个列表项的项目符号。type属性值为属性值为disc表示使用表示使用实心圆点（）作为项目符号，这是默认值；属性值为实心圆点（）作为项目符号，这是默认值；属性值为circle表示项目表示项目符号为空心圆点（符号为空心圆点（）；属性值为）；属性值为square表示使用实心方形（表示使用实心方形（）作）作为项目符号。为项目符号。2 2有序列表有序列表有序列表用于说明文件中需要按特定顺序排列和显示的内容。有有序列表用于说明文件中需要按特定顺序排列和显示的内容。有序列表在列表的每项前都加上编号。因此，浏览者可以清晰地了序列表在列表的每项

44、前都加上编号。因此，浏览者可以清晰地了解 各 个 项 目 的 顺 序。定 义 有 序 列 表 需 要 使 用 有 序 标 签解 各 个 项 目 的 顺 序。定 义 有 序 列 表 需 要 使 用 有 序 标 签和列表项标签和列表项标签，创建有序列表的语法格式如下：创建有序列表的语法格式如下：第一个列表项第一个列表项 第二个列表项第二个列表项 第三个列表项第三个列表项顺序编号是由属性顺序编号是由属性type和和start来设置的。来设置的。type表示标号的类型，表示标号的类型，type属性取值属性取值1表示列表项用数字（表示列表项用数字（1，2，3）编号，是默认值；）编号，是默认值；A表示列表

45、项用大写英文字母（表示列表项用大写英文字母（A，B，C）编号；）编号；a表示表示用小写英文字母（表示表示用小写英文字母（a，b，c）编号；）编号；I表示用大写罗马字母（表示用大写罗马字母（I，II，III）编号；）编号；i表示列表项用小写罗马字母（表示列表项用小写罗马字母（i，ii，iii）编号。）编号。start属性表示列表项目的编号从第几项开始，例如，属性表示列表项目的编号从第几项开始，例如，type=1，start=1表表示有序列表的序号类型为数字，从第一个项目开始编号。示有序列表的序号类型为数字，从第一个项目开始编号。3 3嵌套列表嵌套列表将一个列表嵌入另一个列表中将一个列表嵌入另一个

46、列表中，作为另一个列表的一部分，叫做嵌套列，作为另一个列表的一部分，叫做嵌套列表。表。HTML可以用层层嵌套的方式来实现嵌套列表。可以用层层嵌套的方式来实现嵌套列表。使用嵌套列表可以把网页的内容分为多个层次，增强内容的层次感，有使用嵌套列表可以把网页的内容分为多个层次，增强内容的层次感，有序列表和无序列表自身可以嵌套，彼此之间也可以进行嵌套。序列表和无序列表自身可以嵌套，彼此之间也可以进行嵌套。4 4自定义列表自定义列表自定义列表是项目及其注释的组合。自定义列表用于比较复杂的自定义列表是项目及其注释的组合。自定义列表用于比较复杂的列表说明，不只可以分项说明，还可以针对每一个小项目再加以列表说明

47、，不只可以分项说明，还可以针对每一个小项目再加以说明。创建自定义列表的语法格式如下：说明。创建自定义列表的语法格式如下：自定义列表项目自定义列表项目1 项目项目1的解释的解释1 自定义列表项目自定义列表项目2 项目项目2的解释的解释1 其中，其中，和和之间的内容就是自定义列表的内容，由一系列之间的内容就是自定义列表的内容，由一系列用自定义列表项标签用自定义列表项标签和解释项标签和解释项标签标识的列表项组成。标识的列表项组成。在显示时，解释项的内容会自动缩进一定的距离，使列表的结构在显示时，解释项的内容会自动缩进一定的距离，使列表的结构更加清晰。更加清晰。本章小结本章小结本章主要介绍了如何使用表格、框架、水平线和列表来布局网页。本章主要介绍了如何使用表格、框架、水平线和列表来布局网页。通过本章的学习，读者应重点掌握表格和框架的使用，熟悉添加水通过本章的学习，读者应重点掌握表格和框架的使用，熟悉添加水平线和定义列表的方法，能够设计制作出层次清晰、页面美观的平线和定义列表的方法，能够设计制作出层次清晰、页面美观的HTML文档。文档。谢谢！谢谢！