第二章：利用表格进行版面设计讲解

第二章 利用表格布局网页

教学目的与任务：掌握表格的创建、结构调整与美化方法 ，熟悉表格与单元格

的主要属性及其设置方法，掌握通过表格来进行网页页面的布局方法 教学重点：

在DW中表格的创建、调整、单元格的编辑与属性设置等操作的方法。 教学难点：表格高度和背景颜色设置、表格内嵌套表格、及多个表格的选择是难点 教学方式：讲授+实验辅导 教学课时：4 教学过程：

表格是页面布局极为有用的设计工具。使用表格可以进行页面布局，可以进行设计和排版，可以控制页面元素（文字、图片、声音、线条、符号、动画等）在页面上的位置，另外利用表格可以制作简单的水平线，垂直线和圆角表格，还可以导入表格化数据。 一、 案例分析：

在前面已经学习了如何在页面中添加各种页面元素，但是要制作与案例一样的较为复杂的页面就很难实现了,必须利用网页定位技术来进行页面布局和定位页面上的文本和图像。

首先可以利用表格进行布局设计。如上图的版面显示：

1

然后在相应的表格或者单元格放入网页元素 二、 表格基本操作

1.打开页面，点击插入/表格命令，然后弹出表格和对话框，填写相应的数据，确定，保存，预览。

注释：table

● 表格中的数值可以根据自己的需要设定。

● 宽度是指插入整个表格的宽度。有百分比与像素单位。采用百分比，表

格会随浏览器窗口的变化而变化；采用像素，则不会发生变化。比如设置宽度为窗口宽度的60％，那么当浏览器窗口大小变化的时候表格的宽度也随之变化；而如果设置宽度为400像素，那么无论浏览器窗口大小为多少，表格的宽度都不会变化。

● 边框。当边框的宽度≥1时，叫实边框。当边框=0时，叫做虚边框。在

插入表格时，边框一般用虚边框。数值为0。当为0时，上传到网站时，表格线是隐含的，不显示。

2

● 单元格填充。单元格中内容与边框之间的距离，系统默认为1，不填时即

默认。单元格间距。单元格之间的距离。默认为2。

● 表格的大小可以通过数值来设定，也可以通过鼠标的拖拽来实现。 2.表格选择

选择表格可分为选择整个表格和选择表格中的单元格。 ① 如果要选择整个表格，则可进行如下的操作之一：

★将光标置于表格中的某个单元格中，点击左下角table标签。

将光标置于表格中的某个单元格中，选择“修改”|“表格”|“选择表格”命令。

将光标置于表格中的某个单元格中，再按两次组合键“Ctrl+A”。

将光标置于表格中的某个单元格中，单击鼠标右键，在弹出的快捷菜单中选择“选择表格”命令。

将光标置于表格的尾部（在表格的同一行，但不在表格之内），向左拖动鼠标。单击表格的边线。

② 选择单个单元格的方法有以下几种：

★将光标置于所要选择的单元格中，点击左下td标签。 将光标置于所要选择的单元格中，按一次组合键“Ctrl+A”。

按住Ctrl键，单击所要选择的单元格，再单击一次则取消对单元格的选择。 ③ 选择多个单元格的方法有以下几种：

★将光标置于单元格中，拖动鼠标，选择多个单元格。 按住Ctrl键，单击所要选择的所有单元格。

如果要选择整行，将光标置于该行的左边缘，拖动鼠标向右。

如果要选择整列，将光标置于该列的上边缘，拖动鼠标向上或者下。 ④ 选择的全部单元格的方法有以下几种：

★将光标置于第1个单元格中，并拖动鼠标至最后一个单元格。

将光标置于第1个单元格中，按住Shift键，再单击最后一个单元格。 3.添加／删除行列

1.在现有的表格中插入单元行或者列，可以选择以下的操作之一： ○

将光标移到要插入单元行，单击鼠标右键，在弹出的快捷菜单中选择“表格”“|插入行或者列”出现对话框。在此对话框中进行相关的设置，然后单击“确定”按钮，设置的多列或多行将插入到页面中。 2 删除整行／整列，可以采用下列办法之一： ○

先选择欲删除的整行或整列，直接按Del键，即可删除。 4.如何使表格置顶，靠左？

插入表格，修改/页面属性，左边界设置为0.顶部边界设置为0.确定即可。

5.如何修改表格？

鼠标点table边界，即选中表格，修改表格属性，在属性面板里修改。

6.设置单元格的列、行。

除了设置整个表格的属性之外，还可以单独设置某行、列或某些单元格的属性。在属性面板里进行。

★合并单元格：选一个格——光标放入单元格——按左下的td，选中。配合shift键——把光标放入要合并的单元格——全部选中时（可以通过鼠标的拖

选来进行合并），点属性面板的合并图标（左边是合并

，右边是拆分

），

3

设置合并与拆分的行列。

7.如何设置表格或者单元格中内容所在的位置？

光标定位到表格或者单元格，属性面板里修改水平或者垂直位置即可 8.如何设置表格的背景颜色、背景图片和高度？

DWCS5表格属性面板无法设置其背景颜色与图片，也无法设置表格的高度，只能通过修改代码来实现。步骤如下：

1选中表格，切换到拆分视图下，如下图： ○

2 ○

，

在这里

我们选择需要的语句，bgcolor为背景颜色，background为背景图片，height为高度。

3选择bgcolor双击，bgcolor=“”进入代码区域，同时弹出色彩面板提供○

选择，如图：

效果图：

4

4.选择background，○background=“”右下边出现浏览，点击浏览找到图像，并保存在站点文件夹下即可。

效果图：

5.如果想去掉表格的背景颜色或背景图片，还需要选择表格，在代码中删○

除相应的语句即可。本案例需要删除语句为：

bgcolor=\。

6选择hight，hight=“”○，在双引号里输入相应的数值即可。

7.单元格可以设置背景颜色、宽度与高度，而背景图像设置也需要在代码○

下进行。选中单元格，切换到拆分或代码视图下，定位光标位置，选择background来进行操作。 三、表格应用

在了解表格基本知识后，我们就可以对它进行调整使用。比如我们需要制作下图所示的表格，可以按照以下步骤进行。

Step1：插入1行1列表格，设置合适的宽度和高度，居中，根据需要修改相应的属性。

Step2：回车键，插入1行3列表格，设置合适的宽度和高度，在表格属性对齐里选择“居中”。根据需要修改3列的宽度，或其它相应的属性。在第2列里插

5

入宽度为100%的多行表格。（提示，在单元格或者表格里嵌套表格的时候，尽量用插入表格的办法，一般不容易造成原来单元格变形，当不知道原单元格或者表格宽度的时候，可选择宽度为100%，这样插入的表格的宽度就与原来表格或者单元格的宽度保持相同。如果确实需要了解插入的表格宽度，可以在属性里把百分比装换为像素）。根据需要可修改表格属性。

Step3：回车键，插入1行列表格，在表格中输入相应的文本，为了美观可以在属性面板中进行居中设置。

小提示：通常选取整个表格比较困难，在此提供几种常用的方法：

1.把鼠标移动到表格右边界外侧，按下鼠标之后往左拖拽，这样可以快速选取表格。2.用鼠标点击任一个单元格，接着按两下“Ctrl＋A”组合按钮选取整个表格。 3.光标放到任意一个单元格后，点击左下table，就可以选中单元格所在的表格

四、表格定位 其实表格的网页定位主要通过将网页内容分成若干个区，然后将相应的内容分别填入不同的表格，从而做成非常规范与专业的网页。下面就来所示的网站是如何通过表格实现的。

6

1． 标题区

这个区域主要在表格里填充图片。标题区为2行2列的表格，填充 、间距、边框值为0，宽度为778像素，表格居中，在代码视图下修改表格高度为203像素，合并右列为181*203的单元格，在属性里分别修改左列两单元格的宽和高，插入相应的图片。F12预览。

2． 导航区

7

回车键另起一行，插入1行11列表格，宽度为778像素，表格居中，在代码视图下修改表格高度为37像素，在代码视图下设置背景图片，index_04.GIF。分别输入各个栏目的名称，F12预览。

3.内容区

①回车键另起一行，正文区是页面内容体现的主要版块，插入表格的行或者列需要根据具体的需要来进行设置。就当前的案例，插入的是一个1行3列,宽度为778像素的表格，表格的高度可以不设置。在设计过程中，可以随时修改高度。分别设置3个单元格的宽度为200、428、150像素

②其中每一列再通过插入单独的表格方法来形成多个区域并输入相应的信息。比如最左边一列，属性设置光标水平靠右、垂直顶端位置，插入一个8行1列宽度为≦200像素的表格，选择插入表格的所有单元格设置每个单元格的高度和光标的位置，本案例设置高度为40像素，选择第一单元格设置高度为80像素，并插入lanbiao图像分别用来显示栏标图标以及相应的文字内容；

③中间一列，属性设置光标位置为水平左对齐，垂直顶端处，插入2行2列，宽度为428像素的表格，设置第一行单元格高度为40像素，输入相应文本或插入图像。合并第2行单元格并设置高度为320像素，该区为动态新闻区。

8

④右边一列可为公告区。属性设置光标位置为水平左对齐，垂直顶端处，插入3行1列，宽度≦150像素的表格，分别设置3行单元格高度为60、240、60像素，并输入相应内容。 F12预览。

4、版权区

表格为1行1列，宽度为778像素，高度为70像素（因为只有一行的表格，同时也是单元格，该高度可以直接设置单元格高度即可）表格居中。插入index_06.GIF，F12预览。

9

5、设置页面背景图像。

①在页面属性里修改页面背景图像，素材为BJ.gif；

②选择内容区1行3列的表格修改背景颜色为白色。步骤，把光标定位在内容区内任意一个单元格内，选择距离body最近的table标签，就可以选中表格，在代码视图下修改背景颜色为白色

五、表格应用二 #EFE7E4

10

1． 标题区

这个区域主要在表格里填充图片。插入表格为2行2列，宽度为1003像素，填充间距边框线为0，表格居中，合并第二行，选中所有单元格，设置单元格背景颜色#EFE7E4，设置第一行第一个单元格尺寸为281*120，并插入01.jpg在单元格左对齐，顶端位置。设置第一行第二个单元格为722*120，并插入02.jpg在单元格右对齐，顶端位置，在第二行插入03.jpg(或者素材中提供的SWF格式动画)，F12预览。如下图，

11

2．内容区

回车键，插入1行3列,宽度为1003像素的表格，居中，高度可以不设置。

分别设置3列单元格的宽度如上图，选中三个单元格，设置背景颜色为#EFE7E4 1最左边一列内水中居中，顶端位置，插入一个3行1列，宽度为330像素表○

格，在此表格第1行插入04图片，在此表格第3行插入05图片。

在中间1行左对齐，顶端位置插入表格5行2列，宽300，用来放动态新闻。设置插入内部表格两列的宽度，左列为40像素

12

在左列插入每个单元格内插入06图片（可先插入一个，复制，粘贴到其它行），在右列靠左输入新闻文本如图：

2中间一列水平居中，垂直顶端位置插入2行1列，宽度为363像素的表格，○

在此表格第一行插入07图片；

在此表格第二行内插入2行2列，宽度为363像素的表格，选中四个单元格设置高度为120像素，并在合适每个单元格内水平垂直居中的位置插入图片

13

3右边一列内水平居中，顶端位置插入2行1列，宽度为254像素的表格○

在插入的表格第1行内插入12图片，

在表格的第2行内，水平左对齐插入2行1列，宽度为230像素的表格，并在新

14

插入的表格内输入邮箱文本

3.广告区

表格为1行1列，宽度为1003像素，居中。设置单元格高度为60，背景颜色#EFE7E4，F12预览。

4.版权区

表格为1行1列，宽度为1003像素，居中。设置单元格高度为100，背景颜色#ccbfaf，输入版权文字。F12预览。

虽然通过表格可以实现最基本的网页定位，但是这种方法也并不是没有缺点，它的最大问题在于表格内容下载比较耗时，往往要等一个表格中全部内容下载完成后才能显示该表格内容，因此尤其要注意表格的嵌套使用，尽量不要嵌套过多的表格以影响页面的下载速度。

六、课堂作业：利用表格编辑课程表和一简单网页

15

七、教后小结： 1. 2. 3. 4.

单元格中光标的位置容易出错 表格居中对齐容易忽视

表格高度和背景颜色设置是难点 嵌套表格的选择利用table标签

八、附录：

关于网页尺寸大小：

网页尺寸设计有一个指导性的原则：页面宽度不超过1屏，高度不超过3屏，所以网页的标准尺寸也就与显示器分辨率1以及浏览器2、操作系统3等因素有关。网页设计也需要从用户的体验角度出发，特别是宽度不超过一屏，其最基本的表现是浏览器不出现横向滚动条。

网页设计标准尺寸：

1. 分辨率是800×600时，最保守最有兼容性的网页设计尺寸为：

779×432 ，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。

2. 1024×768下，网页宽度保持在1002以内，如果满框显示的话，高度是612-615之间，就不会出现水平滚动条和垂直滚动条。

3. 在ps里面做网页可以在800×600状态下显示全屏，页面的下方又不会出现滑动条，尺寸为740×560左右。

4. 在PS里做的图到了网上就不一样了，颜色等等方面，因为web上面只用到256web安全色，而PS中的RGB或者CMYK以及LAB或者HSB的色域很宽颜色范围很广，所以自然会有失色的现象。

高度是可以向下延展的,所以一般对高度不限制. 对于一屏来说,一般没有一个固定值。

网页宽度的设置参考 编号 网站名 1 2 3 网易 新浪 腾讯 网页宽度 备注 960px 950px 910px 均指首页，下同 1

.一个是显示器屏幕.显示器现在种类很多,以17寸为主流, 正在朝19寸及宽屏的方向发展.但目前也有为数不少的15寸显示器，分辨率往往根据屏幕大小而设置。 2

. IE依旧份额最高，但是Firefox、Opera和Safari等也有一定市场。 3

.毫无疑问目前是Windows的天下，其中Windows7占绝大多数。

16

4 5 6 7 8 9 10 TOM 凤凰网 BBC AOL CNN Reuters 960px 950px 995px 978px 980px 960px 国外网站 MICROSOFT 935px 从上表可以看出，几乎所有的大型网站都是采用比较保守的网页宽度设计，目前且都已不再考虑800*600分辨率的用户的全屏浏览问题，目前网页宽度设置的主流标准仍然是950/960/980像素宽度，最大980像素也大都是国外网站，可能老外比较富裕，显示器都比较好

17