网页设计基础第三章

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

2、基本概念与结构表格是网页中常见的一种页面元素，由行和列组成。行和列交叉构成了表格的单元格，单元格中包含表格的数据，每个表格还有特定的标题。创建表格主要用到4个标签：、和。在一个最基本的表格元素中，必须包含一组标签、一组标签和一组标签。创建表格的语法格式如下： （）第一行第一列单元格内容（） （）第一行第二列单元格内容（） （）第一行第n列单元格内容（） 第二行第一列单元格内容 第二行第二列单元格内容 第二行第n列单元格内容 第m行第一列单元格内容 第m行第二列单元格内容 第m行第n列单元格内容 （1）table：该标签对用于定义整个表格，表格中的所有内容都必须位于和之间。一个表格元素是由多个横

3、行（）、单元格（）和表头单元格（）子元素组成的。（2）：该标签对用于定义表格的标题，标题文本位于与之间。表格标题标签不是必需的，但如果使用，就必须放置在之后。说明：（3）：标签定义表格的行，必须位于和之间，结束标签可以省略，在一对标签内可建立一行表格，也可以包含多组由或标签所定义的单元格。表格有多少行就应该定义多少对标签。（4）：该标签对用于定义表格的表头单元格，此单元格中的文字将显示为粗体。有多少个表头单元格就应该定义多少对标签。表头单元格也可以省略。（5）：该标签对用于定义表格列的单元格，一对标签将建立一个单元格。标签必须放在标签内。单元格内的数据，必须位于与之间，表格中有多少个单元格就应

4、该定义多少对标签。3.1.2表格的基本属性标签的属性主要有border、bordercolor、width、height、align、bgcolor、background、cellspacing、cellpadding等，用于设置表格的边框、大小、背景颜色等。这些属性是可选的，也可以不设置属性值，而使用标签的默认属性值。 1.设置表格边框和分隔线显示状态如果不定义边框属性，表格将不显示边框，但大多数时候，需要显示边框。设置表格边框的语法格式如下：border属性值为数字，表示表格边框宽度的像素数。例如，表示表格的边框宽度为12个像素。如果不定义边框属性或border属性的值是0，表格将不显示边

5、框。 1）设置边框显示状态还可以将表格4个边框：左边框、右边框、上边框、下边框设置为显示或者隐藏。设置表格边框显示状态的语法格式如下：（1）显示整个表格边框：（2）不显示表格边框：（3）只显示表格的上下边框：（4）只显示表格的左右边框：（5）只显示表格的上边框：（6）只显示表格的下边框：（7）只显示表格的左边框：（9）只显示表格的右边框： 2）设置表格中的分隔线表格中分隔线的显示效果同样可以进行设置。设置表格中分隔线的显示状态的语法格式如下：（1）显示所有分隔线：（2）只显示组与组的分隔线：（3）只显示行与行之间的分隔线：（4）只显示列与列之间的分隔线：（5）不显示所有分隔线：2.设置表格边框

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

7、语法格式如下：align属性的参数值有left、center和right，分别表示表格位于其相邻文字的左侧、水平居中和位于与其相邻的文字右侧。6设置表格边框与内容的间距设置表格边框与内容间距的语法格式如下：其中，数值为像素值，表示单元格内容与表格边框之间的距离。 7设置表格的标题表格的标题用来表明表格内容。设置表格标题的语法结构如下：表格标题之间的内容就是表格的标题。应放在标签中，在表格的行标签之前。 3.1.3表格的行属性表格按行组织，每个表格均有若干行，每行被分割为若干单元格。单元格可以包含文本、图片、列表、段落、表单、水平线、表格等元素。标签有height、align、valign、bo

8、rdercolor和bgcolor等可选属性，用于设置表格每一行的属性。1设置行的高度与对齐方式height属性控制表格内某行的高度，其语法格式如下：其中，数值为整数，其单位为像素。align属性控制表格中该行单元格内文字的水平对齐方式，其语法格式如下：其中，参数值为left、center、right，分别表示该行中各单元格内容的对齐方式为左对齐、水平居中和右对齐，默认值为left。 valign属性控制表格中该行单元格内文字的垂直方向对齐方式，语法格式如下：其中，参数值为top、middle和bottom，分别表示该行中各单元格内容的对齐方式为上对齐、垂直居中和下对齐，默认值为middle。

9、2设置行的内边框颜色与行的背景颜色在标签中使用bordercolor属性控制表格某行内边框的颜色，其语法结构如下：在标签中使用bgcolor属性控制表格中该行单元格的背景颜色，其语法格式如下：3.1.4表格的单元格属性每个表格均有若干行（由标签定义），每行被分割为若干单元格（由或标签定义）。由于和标签都是用于设置单元格内容，所以和标签的所有属性及相应的属性功能完全一样。和标签有bordercolor、bgcolor、background、width、align、valign、rowspan、colspan等可选属性。1和表头标签是成对出现的，用于规定表头的内容，之间的内容就是位于该表头单元格的

10、内容。表头一般位于每列的首行，用以说明该列的具体数据是关于哪个对象的。数据标签也是成对出现的，之间的内容就是该单元格中的具体数据内容。除了表头元素是以粗体显示外，表头元素和具体数据元素没有区别。2设置单元格宽度在或标签中使用width属性控制表格中某单元格的宽度，其语法格式如下：width属性的参数值可以是数字或百分数，其中数字表示此单元格宽度所占的像素数，百分数表示此单元格的宽度占整个表格宽度的百分比。3.设置单元格内容的对齐方式align属性用于设置单元格内容在水平方向上的对齐方式，其语法格式如下：align属性的参数值有left（默认值）、center和right，分别表示该单元格内容的

11、对齐方式为左对齐、水平居中和右对齐的。4设置单元格的边框颜色、背景颜色和背景图像设置单元格边框颜色的语法格式如下：设置单元格背景颜色的语法格式如下：设置单元格背景图像的语法格式如下：5合并单元格在表格中使用和标签的colspan和rowspan属性设置跨行和跨列的单元格，将单元格合并，语法格式如下：rowspan表示该单元格所跨的行数，默认值为1。colspan表示该单元格所跨的列数，默认值为1。3.1.5利用表格进行网页布局在利用表格进行网页布局的过程中，表格的边框可以设置为可见，这样可以在浏览器中清晰地看到利用表格进行网页布局的效果。在进行较复杂的网页布局时还可以利用表格的嵌套功能，即在表

12、格内部再嵌入另一个表格对页面布局进行细化。在网页布局结束时，再将表格的border属性设置为0，不显示表格的边框，使页面美观，而页面上的其他内容则会留在HTML网页上。3.2框架框架技术可以将浏览器的显示空间分割成多个可滚动的区域，每个区域可以独立显示不同的网页。这些区域互不干扰，可以相互沟通。一个区域可保持不变，而其他区域根据用户选择的超链接显示相应网页，达到在浏览器中同时浏览不同网页的效果。框架技术常应用于制作页面导航栏和网站论坛。 3.2.1框架的基本概念框架的基本结构主要分为框架集和单个框架两部分。框架集是在一个文档内定义一组框架结构的HTML网页。单个框架是指框架集中的单个区域。要在

13、浏览器中查看一组框架网页，先打开框架集文件，浏览器随后打开要显示在这些框架中的相应HTML文档。框架不是文件，是存放HTML文档的容器。任何一个框架都可以显示任意的HTML文档，在框架中初始显示的HTML文档也是构成框架网页的一部分。1框架结构在框架集文件中使用标签和标签定义框架的数量、大小，载入框架的网页源和其他可以定义的属性等。在单个框架中显示的HTML文档与一般的HTML文档的书写格式相同。而在框架集文档中，页面的标签被标签取代，然后通过标签定义每一个框架。框架集文档的结构如下：创建框架网页实例,框架集文件源代码如下：框架的基本结构2窗口框架的分割方式框架的分割方式主要有3种：左右分割、

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

15、的语法格式如下： 或 3.2.2设置框架集的属性框架设置标签是成对出现的，之间的内容就是框架集文档的主体部分。在框架集文档中不能使用标签，否则会导致Web浏览器忽略所有的框架定义，而只显示和之间的内容。标签主要有rows、cols、border、bordercolor和frameborder等属性。1设置框架上下分割和左右分割的情况标签的rows和cols属性用于设置窗口框架上下分割和左右分割的情况，语法格式如下：参数值之间用逗号分隔，依次表示各个子窗口的高度（宽度）。这些参数可以用数字、百分比或剩余值以及这3种方式的混合来表示。数字表示子窗口高度（宽度）所占的像素数；百分比“%”表示子窗口高

16、度（宽度）占整个浏览器窗口高度（宽度）的百分比；剩余值“*”。表示当前所有窗口设定之后的剩余部分。2设置框架边框的宽度标签的border属性或framespacing属性都可以用于控制分割框架的边框宽度，语法格式如下：其中，参数值表示此窗口框架的宽度，单位为像素。3设置框架边框的颜色标签的bordercolor属性用于设置框架边框的颜色，其语法格式如下：4设置框架边框的显示状态在与标签中使用frameborder属性，可以控制框架四周是否显示边框。在标签中使用frameborder属性时，可控制所有框架的边框。在标签中使用frameborder属性时，仅能控制该标签所代表框架的边框。设置框架边

17、框显示状态的语法格式如下：参数值可以取值0或1，0代表不显示框架，1代表显示框架，默认值为1。3.2.3设置框架的属性标签用来初始化框架。页面中的每一个框架均对应一个标签。是单独出现的标签，将它放在中，标签主要有src、name、marginwidth、marginheight、scrolling和noresize等可选属性。1指定在框架中显示的网页在浏览器窗口中建立好框架后，应在各个框架内放入相应的信息。用标签中的src属性链接相应的HTML文档，该文档的内容就显示在标签对应的框架中。标签的src属性用于设置在某个框架中显示的网页，其语法格式如下：如果一个标签中没有src属性，则该窗口显示为

18、空白。2定义子窗口名称标签的name属性用来指定框架的名称，其语法格式如下：当定义好框架的名称后，可在超链接中指定显示超链接目标网页的框架。3控制框架滚动条属性标签scrolling属性用于设置某个框架窗口是否显示滚动条，其语法格式如下：参数值可以是yes、no和auto（默认值），分别表示显示滚动条、不显示滚动条、自动根据框架内容来设置是否显示滚动条。4设置是否允许调整框架的大小标签的noresize属性没有属性值，用于设置是否允许浏览者使用鼠标调整框架的大小。其语法格式如下：如果添加了noresize属性，则表示不能调整框架大小。不添加noresize属性，则可以通过鼠标拖动框架边框来调整

19、框架的大小。5设置框架的边距标签的marginwidth属性用于控制框架中的内容与框架左右边框的距离，该属性的参数值为像素值，默认为1。其语法格式如下：标签的marginaheight属性用来控制框架内显示的内容与框架上下边框的距离，该属性参数值为像素值，默认为1。设置框架边距的语法格式如下：3.2.4浮动框架 在HTML中通过标签创建浮动框架。浮动框架是指在一个页面中直接引入另一个页面的特殊框架。语法格式如下：浮动框架中不能用标签代替标签，标签放在标签之内。3.2.5设置框架中的超链接在框架网页中使用超链接可以在不同的框架窗口中打开不同的网页内容。首先在标签中使用name属性定义框架窗口的名

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

21、框架，则在同一框架窗口中打开链接的网页内容；当将target属性设置为_top (target=_top)时，则脱离目前的窗口框架，在最上层的窗口框架中显示链接的网页内容。3.2.6利用框架进行网页布局简单制作一个使用框架布局的网页。网页由3个框架组成：上方是网页标题区，左边是导航区，右边是内容区。在浏览器中打开该网页时，单击左边导航框架内的某个超练接，对应的链接网页内容就显示在右边框架内。上方的网页标题区和左边的导航栏始终不变。3.3水平线和列表水平线和列表在网页中也会经常用到。在网页设计中使用水平线和列表将信息组织成各种不同形式，可以使网页内容排列得更清晰明了。3.3.1 水平线在HTML

22、文件中可以使用标签创建水平线，将不同的内容分开，从视觉上将网页分隔成多个部分，使各部分内容看起来清晰明了。标签的作用是换行并在该行下添加一条水平线，水平线的上下都会留出一定的空白。标签有size、align、color、width、noshade等可选属性，创建水平线的语法结构如下：各属性的含义如下：size：设置水平线的粗细，以像素为单位，默认值2。width：设置水平线的长度，单位为像素或百分比，默认值100%。align：设置水平线的对齐方式，属性值为left、center（默认）、right。color：设置水平分线的颜色，默认值为black。noshade：表示水平线不显示3D阴影效

23、果。3.2.2 列表当网页中包含多项内容时，可以使用列表将这些内容进行合理组织。HTML中的列表可分为无序列表、有序列表、自定义列表3种。1无序列表无序列表是用项目符号来表示一个没有特定顺序的相关条目的集合。用于说明文件中需要列出的项，可以按任意顺序显示出来，各个列表项之间没有顺序级别之分。通常会在每个列表项的前面添加一个项目符号，并且每行缩进相同的距离。无序列表使用一对标签定义，并且每个列表项都要使用标签进行定义。 创建无序列表的语法格式如下： 列表项 列表项 列表项 其中和必须成对出现，且必须放在标签之间，可以省略。省略变成单标签，在省略的无序列表中，下一个的出现，就表明上一个列表项的结束。type属性用于指定每个列表项的项目符号。type属性值为disc表示使用实心圆点（）作为项目符号，这是默认值；属性值为circle表示项目符号为空心圆点（）；属性值为square表示使用实心方形（）作为项目