使用表格布局网页

 

 

1.  掌握插入表格、表格嵌套的方法。

2.  掌握选择表格,合并及拆分单元格,插入或删除行或列的方法。

3.  设置表格、单元格属性和表格模板。

 

 

表格是一种最基本的网页布局元素,在网页中使用表格进行布局,可以实现页面的精确排版和定位,美化页面,很好地控制页面中的各元素。

表格就如同一个容器,可以将网页元素有机地组合在一起,将其合理地分布在各单元格中,构成一个完整的页面。

 



※任务分析

本项目要完成的制作就是图4-1所示图文并茂的网页。整个页面色彩鲜艳,层次清晰。网页使用了表格布局,在表格中插入了图像、文本等网页元素。

由于此页面中表格的使用较为复杂。制作中可分步实施,逐项完成。本任务先完成页面中相互独立的区块制作。我们将其划分成7个独立的子表格。在任务2中,我们再来组合这些子表格,制作完成整个页面。

◆图4-1 “每味美味”的页面

※相关知识

一.表格布局

使用表格进行页面布局,能很好的控制文本、图像等网页元素在页面上出现的位置。设计过程中根据不同的内容将整个页面划分为若干个表格,通过设置表格和单元格的属性值,实现对页面元素的准确定位,可以达到整齐划一的页面显示效果。

二.表格的相关属性

插入表格后,就可以在“属性”面板中设置表格的相关属性,如图4-2所示。

◆图4-2  表格的属性

表格ID:表格在网页中的唯一标识。

行、列:用于设置表格的行数和列数。

宽:用于设置表格的宽度,单位为像素或百分比。

填充:用于设置单元格中的内容与单元格边框之间的距离。如图4-3所示。

间距:用于设置单元格与单元格之间的距离。如图4-3所示。

对齐:用于设置表格的对齐方式,主要有左对齐、居中对齐和右对齐,默认为左对齐。

边框:用于设置表格边框的宽度。

边框颜色:用于设置表格边框的颜色。

背景颜色:用于设置表格的背景颜色。

背景图像:用于设置表格的背景图像。

表格中既设置了背景颜色又设置了背景图像时,背景图像将会遮住背景颜色的显示。

三.单元格的相关属性

单元格是组成表格的最基本单位。单元格属性面板如图4-4所示。

◆图4-4  单元格的属性

字体:用于设置单元格中文本的字体。

大小:用于设置单元格中文本的大小。

水平:用于设置单元格内容的水平对齐方式,主要有左对齐、居中对齐和右对齐,默认为左对齐。

垂直:用于设置单元格内容的垂直对齐方式,主要有顶端、居中、底部、基线四种方式、默认为居中对齐。

宽、高:用于设置单元格的宽度和高度。

背景:用于设置单元格的背景图像。

背景颜色:用于设置单元格的背景颜色。

边框:用于设置单元格边框的颜色。

链接:用于设置单元格中内容的超链接。

※任务实施

1.在Windows环境下使用“我的电脑”或“资源管理器”搜集网页素材。将“素材”文件夹中project04\images中的图片文件复制到我们已经建立的站点文件mwmw中的images文件夹中。

2.运行Dreamweaver CS3软件,在example站点中新建一个网页文件,命名为ex01.html

3单击“插入”→“常用”工具栏上的“表格”按钮,打开“表格”对话框,设置11列,宽度为“1000像素”,边框为“0像素”,“单元格边距”和“单元格间距”均为“0像素”,如图4-5所示。单击“确定”按钮,则在编辑区插入了一个11列的表格。设置表格ID为“top”。

◆图4-5  插入表格对话框

4.将光标定位在单元格中,设置单元格高度为70单击“插入”→“常用”工具栏上的“图像”按钮,在打开的“选择图像源文件”对话框中选择images文件夹中的图像logo.jpg,单击“确定”,即可将图像插入在当前单元格中。

5选中该表格,在“属性”面板中设置背景颜色为“#333300,在各单元格中输入文本,参照图4-6所示。

6.逐一选中各单元格,设置单元格的高为“50像素”,文本颜色为“#FFFFFF”,对齐方式为水平“居中对齐”。在各单元格中输入相应文本。如图4-6所示

7.逐一选中各单元格中的文本,设置字符大小为12,颜色为白色(#FFFFFF)。

◆图4-6  插入导航菜单表格

8同样的方法再插入一个11列的表格,宽度为“242像素”,边框为“0像素”,单元格边距和单元格间距均为“0像素”。设置表格ID为“pic”。

9.将光标定位在单元格中,在“属性”面板中设置水平为“居中对齐”,垂直为“居中”,高度为“288像素”

10插入images文件夹中的ct_01.jpg图像。如图4-7所示。

◆图4-7  插入图片的表格

11插入一个21列的表格,宽度为“242像素”,边框为“0像素”,单元格间距和边距为“0像素”。设置表格ID为“nav”。

12.选中第一个单元格,设置背景颜色为“#336600高度为“30像素”。再输入文本“栏目导航”,设置文本大小为“12”,颜色为“白色(#FFFFFF)”。如图4-8所示。

13.选中第二个单元格。设置高度为“150”,垂直对齐方式为“居中”。再输入5行文本。选中这些文本,单击“文本”菜单→“列表”→“项目列表”。如图4-8所示。

14同样的方法制作一个“联系方式”表格。设置表格ID为“cont”。如图4-9所示。第一个单元格的高度为“30”。第二个单元格的高度为“170”。第二个单元格中的文本换行采用Ctrl+Enter方式。

15.同样的方法制作一个21列的表格,宽度为“746像素”,边框为“0像素”,单元格边距和单元格间距均为“0像素”。设置表格ID为“company”。

16.选中第一个单元格,设置背景颜色为“#336600,高度为“30像素”。其他设置同前。如图4-10所示。

17.在第二个单元格输入文本。设置文本大小为“12”。

18.定位光标到文本起始处,插入图片images文件夹中的datang.jpg。设置图的对齐为“右对齐”。效果如图4-10所示。

       

  ◆图4-8  “栏目导航”表格            ◆图4-9  “联系方式”表格

◆图4-10  “公司介绍”表格

19同样的方法再插入一个11列的表格,宽度为“1000像素”,边框为“0像素”,单元格间距和边距为“0像素”。设置表格ID为“bottom”。

20.输入文本,设置单元格“对齐”为居中。如图4-11所示。

◆图4-11  网页底部表格

21.保存此文件。



※任务分析

完成如图4-1所示的网页。前面我们将网页中各区块的表格制作完成了。完整的网页结构可参照图4-12所示。插入此表格后,将前面已经制作完成的表格粘贴到相应的单元格即可。

◆图4-12  网页的整体布局

※相关知识

一.使用嵌套表格进行页面布局

对于表现形式多样、内容丰富、布局相对复杂的网页,可以使用嵌套表格将页面进行划分布置,使页面内容显示更有层次,也便于页面内容的修饰。

二.选择表格元素的方法

在使用表格嵌套后,常常会不能准确地选择所需的表格、单元格。此时应该认真理解表格的嵌套层次,通过文档编辑区左下方的“标签选择器”来选择,这是一种较好的选择方法。

※任务实施

1.打开站点example。新建一个空白网页,命名为“company.html”。

2在“属性”面板中单击“页面属性”按钮,在弹出的“页面属性”对话框中进行如图4-13所示的设置。

◆图4-13  设置“页面属性”

3单击“常用”工具栏上的“表格”按钮,打开“表格”对话框,设置52列,宽度为“1000像素”,边框为“0像素”,单元格间距和边距为“0像素”,单击“确定”。

4.选中该表格,在“属性”面板中设置“对齐”为“居中对齐”,“背景颜色”为“#FFCC00

5.选中第一行水平方向的两个单元格,右击,在快捷菜单中选择“表格”→“合并单元格”。这样第一行就合并成一个单元格了。

6.用同样的方法分别将第二、三、五行水平方向的单元格合并。合并单元格后,表格的效果如图4-12所示。

7.参照图4-12所示的高度值、宽度值和对齐方式,分别设置各单元格的宽度、高度、对齐方式等属性。

8.打开ex01.html文件。选中“top”表格,Ctrl+C复制。

9.切换到company.html文件,将光标定位在第一个单元格中Ctrl+V粘贴。

10.参照图4-1,用上面同样的方法,将ex01.html文件中的各表格复制到当前表格的相应位置。

11.网页制作完成,保存并浏览。

※任务拓展

1.站点主页文件home.html结构与compnay.html基本相同,主体部分稍复杂一些,其内容如图4-14所示,使用了表格的多层嵌套。图片可从“素材”文件夹中project04\images中复制。

2.主体的左侧仍然是在一个单元格嵌入两个上下布置的表格。右侧则是在一个22列的表格(ID为“right”)中嵌套三个表格。

◆图4-14  主体部分

3.布局规划如图4-15所示。各表格主要属性如下:

◆图4-15  主体部分的单元格设置

酒店简介:22列,左列宽度140像素,右列宽度206像素;第一行高度30像素,背景颜色#336600;第二行高度200像素。

行业动态:22列,左列宽度140像素,右列宽度206像素;第一行高度30像素,背景颜色#336600;第二行高度200像素,有单元格合并。

今日推介:22列,左列宽度140像素,右列宽度206像素;第一行高度30像素,背景颜色#336600;第二行高度190像素。

行业动态:22列,左列宽度120像素,右列宽度176像素;第一行高度30像素,背景颜色#336600;第二行高度190像素,有单元格合并。

图像展示:14列,表格宽度664像素,各单元格平均分布,插入相应图像,在“属性”面板是为各图像设置统一的“替换”文本——“美食展示”。如图4-16所示。

4.“right”表格为22列。第一行左列宽度350像素,高度210像素,左对齐;右列宽度300像素。第二行单元格合并,高度为140像素。如图4-17所示。

◆图4-16  为图像设置“替换”文本——“美食展示”

◆图4-17  right”表格的单元格设置

 


 


自行规划设计如图4-18所示的网页。网页以company.html为文件名保存到练习文件夹exercise中,所用的图片在教材的“素材”文件夹下的exercise/images中。

◆图4-18  巩固练习的网页


一.填空题

1________是组成表格的最基本单位。

2.单元格之间的间隔称为______,单元格中的内容与单元格边框之间的间隔称为________

3.删除表格的方法是:先选中表格,再按________键。

4.“属性”面板左下角的按钮是______按钮,按钮为______按钮。

5.默认情况下,新插入的行在选定行的_________,新插入的列在选定列的________。若想新插入的行在下方,新插入列在右侧,应_____________________________

二.简答

1.使用表格布局有什么优点?

2.插入表格有几种方法?

3.选择表格有哪些方法?