利用表格设计和制作网页

《利用表格设计和制作网页》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、第四章利用表格设计和制作网页在网页设计制作中，表格（Table）是一个重要的网页元素，主要用来在页面上布局数据和图像，使页面中的信息布局合理、简洁。另外，在网页设计制作中，表格还有一个重要作用，就是对网页进行排版。通过表格，可以实现很多用一般手段很难实现的排版效果，达到页面排版布局的完全控制。本章以示例网页示例为介绍网页表格的设计与制作的方法。通过本章的学习，读者应该掌握以下内容：l利用DreamweaverMX创建表格的方法l编辑表格的方法l设置表格属性的方法l利用HTML编辑表格的方法l使用表格和布局视图进行页面

2、布局的方法4.1表格网页实例我们在上网浏览时虽然没有看到多少表格，但许多网页设计的排版实际上都是采用隐藏了边框的表格来实现的。表格化的页面在不同平台、不同分辨率的浏览器里都能显示出原有的布局和对齐。图4-1所示的是“天使部落”网页利用表格进行布局的页面效果。图4-1“天使部落”主页DreamweaverMX提供了强大的制表功能，使得在制作网页的过程中插入表格的操作变得简便、快捷，并可以在表格中插入图片、文字、Flash等各种元素。表格还可以转换成层，当作层来使用（层的知识在第9章学习）。对已经建立好的表格，可以很容易

3、地修改表格的外观，改变表格中行、列的数量，对表格添加颜色，改变表格对齐方式等操作。下面以制作“天使部落”主页为例介绍创建表格、编辑表格、在表格中添加文字和图片、删除表格等内容，并结合此例介绍设置表格和单元格的属性等方法。4.2利用Dreamweaver8编辑网页表格4.2.1创建表格表格主要由以下3个基本元素组成。l行（Row）：表格在水平方向上的组成元素。l列（Column）：表格在竖直方向上的组成元素。l单元格（Cell）：表格中的最小的独立存放数据的区域。另外，还有以下几个概念需要掌握。边框(Border)：单

4、元格四周的界线标志。表格间距(Cellspace)：定义内部表格线的宽度。表格间隙(Cellpad)：相邻的单元格之间的间隙。在Dreamweaver8中，创建表格有以下4种方式。l执行主菜单中的“插入”→“表格”命令。l按组合键Ctrl+Alt+T。l单击插入面板上“常用”选项卡中的“插入表格”按钮。l单击插入面板上“表格”选项卡中的“插入表格”按钮。使用上述4种方式中任意一种方法都将打开如图4-2所示的“插入表格”对话框。图4-2“插入表格”对话框对话框中各选项含义如下。行数：初次指定表格的总行数。列数：初次指定

5、表格的总列数。单元格填充：指定单元格的大小，以像素为单位。单元格间距：指定单元格之间的距离，以像素为单位。宽度：指定表格的宽度，以百分比或像素为单位（百分比用于根据浏览器窗口的大小来自动调整表格的宽度）。边框：指定表格边界的宽度，以像素为单位（如果在浏览器窗口中不显示表格的边框，则定义为0）。具体操作是，在对话框中对各选项进行设置，创建一个6行3列的表格，宽度设为100百分比或774像素，边框设为0，其他设置取默认值。新建表格如图4-3所示。图4-3新建表格4.2.2表格的编辑1.修改表格新建立的表格必须经过部分或全

6、部修改后才能应用。修改表格主要包括调整表格的大小、合并单元格、拆分单元格等操作。（1）调整表格的大小可以用下列的操作之一来改变表格的大小。l移动鼠标到表格的水平或垂直边框上，当鼠标变为双竖杠或双横杠时，上下或左右拖动鼠标，可以粗略地调整表格的大小。l选中整个表格（双击表格边框），在表格边框右下方出现三个控制点，将鼠标移到控制点上，当鼠标指针变为双箭头形状时，拖动鼠标上下、左右或斜方向移动，也可以粗略地调整表格的大小。l利用表格“属性”面板，可以精确地设置表格的大小。选中整个表格，在表格“属性”面板中的“宽（W）”、“

7、高（H）”文本框中输入数值，如图4-4所示，精确调整整个表格的大小。图4-4利用“属性”面板调整表格的大小（2）调整行高、列宽l调整一行或一列。将鼠标指针移到要改变行或列的单元边框上，当鼠标变为双竖杠或双横杠时，上下或左右拖动鼠标至合适的行高或列宽。l利用表格“属性”面板设置。选中表格中的任一单元格，或选中所在行（列），然后在表格“属性”面板中的“宽（W）”、“高（H）”文本框中输入数值。如果文本框中为空白，则行高、列宽将由浏览器和ＤｒｅａｍｗｅａｖｅｒＭＸ根据单元格中的内容来自动调整。l清除行高、列宽。若不能用拖动

8、单元格边框的方法来改变所需的行高、列宽，则可以清除行高、列宽，再重新进行设置。选中整个表格，执行主菜单中的“修改”→“表格”→“清除单元格高度”（或“清除单元格宽度”）命令，可以对所有单元格的高度、宽度进行压缩，直到内容最多的单元格与上下左右边框之间没有间隙为止。（3）合并单元格首先选中需要合并的单元格，然后利用下列的操作之一来合并单元格。l执