[第08章使用表格布局页面.pptVIP

第8章 使用表格布局页面 页面布局是影响网页设计的一个关键因素，Dreamweaver 8提供了多种方法来创建和控制网页布局。其中，使用表格的布局模式，简化了使用表格进行网页布局的过程。在该模式中可以使用表格作为基础结构来设计网页，避免了使用传统的方法创建基于表格的页面布局时经常出现的一些问题。本章将主要介绍在Dreamweaver 8中绘制与编辑布局单元格和表格等内容。 通过本章的理论学习和上机实训，读者应了解和掌握以下内容: 布局单元格和表格 绘制布局单元格和表格的方法 绘制嵌套布局表格的方法 间隔图像的使用方法 布局单元格和表格的设置方法 布局模式参数的设置方法 本章章节内容安排如下: 8.1 使用布局单元格和表格 8.2 设置布局单元格和表格的格式 8.3 表格布局综合实例 8.4 思考与练习 8.1 使用布局单元格和表格 在Dreamweaver 8中，使用表格布局模式可以在页面上方便地绘制布局单元格，灵活地将这些单元格移动到所需的位置，还可以创建固定宽度的布局和自动伸展为整个浏览器窗口宽度的布局。总之，与使用表格相比，使用布局模式减少了繁琐的参数设置与定义，因此，可以高效、快速地制作结构复杂的版面。 认识布局单元格和表格 绘制布局单元格和表格 为布局单元格添加内容 绘制嵌套布局表格 将布局单元格靠齐到网格 移动和调整布局单元格和表格 设置布局宽度 使用间隔图像 认识布局单元格和表格 在Dreamweaver 8中，表格有标准模式、扩展模式及布局模式3种模式。标准模式就是最基本的表格模式；扩展模式是标准模式的扩充，在这种模式下用户可以方便地选择表格进行编辑；布局模式就是Dreamweaver 8为方便页面布局而专门设计的一种模式，与前两种模式相比，这种模式下表格和单元格边框是没有宽度的。 绘制布局单元格和表格 在表格的布局模式中，可以绘制布局单元格和表格。在创建布局单元格时，Dreamweaver 8将自动创建用来放置布局单元格的布局表格。要在网页中绘制布局单元格和表格，必须先切换到布局模式，有下面几种方法。 选择“查看”|“表格模式”|“布局模式”命令。 按Ctrl+F6键。 选择“插入”工具栏中的“布局”选项卡，并单击“布局模式”按钮。 为布局单元格添加内容 在布局模式的布局单元格中可以像在标准模式中将内容添加到表格单元格一样，添加文本、图像或媒体插件等。当创建一个布局表格时，表格以灰色填充，表示该区域不能被显示，并且不能插入内容，因此，必须在表格中创建布局单元格，才能在布局单元格中插入所需要的文本、图形或媒体插件等。 要在布局单元格中插入文本，可以先将插入点放置在要添加文本的布局单元格中，然后在单元格中输入文本或是粘贴从其他文档复制的文本。 要在布局单元格中添加图像，可以选择“插入”工具栏中的“常用”选项卡，然后单击第6个按钮旁边的下拉箭头，选择“图像”菜单，或选择“插入”|“图像”命令，打开“选择图像源文件”对话框，并选择一个图像文件，然后单击“确定”按钮即可。 绘制嵌套布局表格 在Dreamweaver 8中，可以将一个布局表格绘制在另一个布局表格中，用来创建嵌套布局表格；但是，不能在布局单元格中创建布局表格，只能在现有布局表格的空白区域中或在现有单元格周围创建嵌套布局表格。当在嵌套布局表格中的布局单元格中插入对象时，布局单元格的长宽变化不会受外部表格的大小影响。在实际应用中，大多数的网页都是使用的嵌套布局表格。 如果用户希望取消表格的嵌套，将子表格在内容不改变的情况下融入到父表格中去，可以利用“删除嵌套”功能来实现，这时可以选中嵌套的布局表格，单击表格尺寸旁边的向下三角按钮，在弹出的下拉菜单中选择“删除嵌套”命令即可。 将布局单元格靠齐到网格 在Dreamweaver 8中，可以使用网格功能，将布局单元格和表格进一步准确定位，通过网格可以让单元格在移动或是绘制时自动靠齐到网格。同时，无论网格是否可见，靠齐都是可以发挥作用的。 要将布局单元格对齐到网格，可以选择“查看”|“网格”|“显示网格”命令，在文档中显示网格，再选择“查看”|“网格”|“靠齐到网格”命令，使靠齐网格的作用生效，这时，如果绘制或是移动单元格，系统就会自动捕捉相应的网格以便对齐单元格。 移动和调整布局单元格和表格 页面布局过程中，用户能够移动或调整布局单元格和表格的位置或尺寸，更利于