第7章 用表格来布局页面.ppt

第7章用表格来布局页面 前面章节所介绍的各种网页元素在网页中的插入，采用的都是直接插入的方式。通过这种方式将网页元素插入到网页中，以此生成的网页，在浏览器窗口运行时，其中的文本或者图像会随着IE窗口的放大或者缩小而发生变化，这就使得网页处于一种不稳定的状态。如果要想改变这种现象，最简单的办法就是使用表格。表格不仅能够控制网页在IE窗口中的位置，还可以控制网页元素在网页中的显示位置，这样以来无论IE窗口如何变化，其中的网页都会保持默认的状态，从而对网页的稳定性起到一定的作用。 7.1 创建表格 可以这样说，网页设计就是从创建表格开始的，因为在Dreamweaver中，表格除了具有归纳的作用外，更具有定位和组合的作用，因此能够将元素定位在网页中的任何想要的显示区域中。由引可见，网页中表格创建是网页设计的基础。下面开始对网页中的表格进行介绍。 7.1.1 插入表格 对于较为复杂的网页来说，是有多个表格组成的，并不是只有一个表格，甚至包括表格中的表格组合而成，也就是嵌套表格。嵌套表格，顾名思义就是在表格中插入表格。在这种情况下，可以看作是由总表格负责整体的排版，由嵌套的表格来承接各个子栏目的排版，并插入到总表格的相应位置中。各自发挥它的作用。 回顾一下表格的概念，表格就是由一些粗细不同的横线和竖线构成的，横的叫做行，竖的叫做列，由行和列相交的一个个方格称为单元格。单元格是表格的基本单位，每一个单元格都是一个独立的正文输入区域，可以输入文字和图形，并单独进行排版和编辑。 1. 插入表格的方法 方法1：在菜单栏中，选择“插入”→“表格”菜单项，弹出如图7-3“表格”对话框，在该对话框中，可以设置表格的行数、列数、表格宽度、单元格间距、边距和边框粗细等选项。 图7-1 菜单操作 方法2：在插入“面板”中，选择“常用”→“表格”弹出如图7-3所示的表格设置对话框。 在“表格”对话框中设置相应的参数，参数的含意如下： 表格的宽度：以像素或者百分比为单位确定表格的宽度，可以在下拉列表中选择设置宽度的不同单位。当表格的单位为百分比时，表格的宽度会在IE浏览器窗口会随着窗口变化而变化；但当表格宽度的单位为像素时，则不会出现这样的情况。 边框粗细：用来设置表格边框的宽度。 单元格边距：指定单元格边距和单元格内容之间的像素数，即单元格内部空白的大小，如果不希望显示边框时，设置为“0”像素即可。 单元格间距：指定相邻单元格之间的像素数，即单元格与单元格之间的距离。 标题：定义表格的标题，即在表格外显示的标题。 对齐标题按钮：定义表格标题的对齐方式。 摘要：可以此处对表格进行注释。 2. 插入表格的参数设置 经过如图7-4的参数设置，可在网页中创建如图7-5所示的表格。3. 插入嵌套表格（1）首先在网页中先插入创建一个表格。如图7-5所示。（2）将光标定位在要在其中嵌入表格的单元格。（3）按照前面刚讲的插入方法和表格的参数设置插入一个表格。如图7-6所示。 7.1.2 在表格中输入网页元素 在表格创建完成后，就可以向表格中添加相应的网页元素。在表格中插入文本或图像的方法与直接在网页中插入的方法基本相同，下面介绍在表格中插入元素的操作方法。 1. 在表格中输入文本 （1）打开或新建一个网页。 （2）在网页中插入创建一个表格。 （3）将光标定位在要输入内容的单元格。 （4）向所定位的单元格输入文本。如图7-7所示。 2. 在表格中插入图像 在表格中导入图像的方法与在网页表格中插入文本的方式基本相同，都是先插入表格，将光标放置在单元格中，然后插入图像文件。 如果图像超出了单元格大小，单元格会自动扩展。插入图像后效果如图7-8所示。 除了上面讲的在网页表格单元格中插入文本、图像元素以处，同样可以插入FLV、SWF等文件。也可以导入和导出数据。 7.2 设置表格及单元格的属性 对在Dreamweaver CS5中网页中插入表格，并对表格进行一定的设置，通过对表格和单元格的设置，在满足网页设计布局要求的同时，满足用户浏览需求。下面介绍设置表格及单元格的属性方面的知识。 7.2.1 设置表格属性 在设置表格属性时，除了可在通过菜单操作“插入”表格弹出的对话框中进行一些设置外，主要是通过表格所在页面下方的“属性”面板来实现的。两者的区别是前者是在插入表格时进行的，而后者则是在插入表格以后进行设置。 在文档中插入表格之后，将光表格选中，然后在“属性”面板进行设置。如果没有显示“属性”面板，可以选择菜单中的“窗口”→“属性”打开“属性”面板。如图7-9所示。 表格“属性”面板主要参数含意如下： 表格ID：定义表格在网页中文档中唯一编号标识。可以输入一个表格的名称。 填充：用于定义表格边