第6章 用表格和框架制作.pptVIP

第6章 用表格和框架制作网页 本章导读：表格是对文本和图像进行布局的强有力工具，在设计网页时往往利用表格定位页面元素。通过应用表格，可以对文字和图片进行精确的定位，使页面保持一定的版式。表格运用的好坏，直接关系到页面设计的成功与否。框架可以把浏览器划分为若干区域，每个区域可以显示独立的页面。使用框架最常见的情况就是，一个框架显示包含导航控件的文档，而另一个框架显示含有内容的文档。本章讲述了应用表格、使用表格的其他视图、应用框架三部分内容。 教学目标：掌握在网页中使用和编辑表格；掌握用表格来布局网页；掌握在网页中使用框架。 重点和难点： 1．表格的编辑和修改 2．用表格布局网页 3．框架的使用 本章主要内容 6.1 应用表格 6.2 使用表格的其他视图 6.3 框架的使用 6.4 小结 6.1 应用表格 6.1.1 新建表格 6.1.2 设置表格和单元格属性 6.1.3 编辑表格和单元格 6.1.4为表格添加内容 6.1.5 嵌套表格 6.1.1 新建表格 方法： 步骤1：单击菜单栏【插入记录】|【表格】选项，或单击【常用】工具栏上的【插入表格】按钮 ，弹出【表格】对话框，如图6-2所示。 步骤2：在【表格】对话框中设置相关的参数，单击【确定】按钮，这样一张表格插入到编辑区域。 6.1.2 设置表格和单元格属性 1．设置表格属性 方法：选中表格，弹出表格属性面板，在属性面板中进行修改，如图6-4所示。 6.1.3 编辑表格和单元格 编辑表格和单元格包括以下四个方面： 1．拆分和合并单元格 2．插入和删除行、列 3．调整表格宽度和高度的设置 4．设置边框 对表格的编辑都可以通过属性面板来设置。 6.1.4为表格添加内容 创建表格后，往往需要在表格中插入各种对象，比如文本对象或者图像对象等，这样表格才有意义。 在表格中可以输入文本，插入图像、嵌套表格等内容。 6.1.5 嵌套表格 嵌套表格是指在现有的单元格内插入表格，插入表格的大小将受到所在单元格大小的影响，当用户在插入的表格内输入文本时，单元格的高度将发生变化，而它的宽度却保持不变。需要改变表格的宽度时，可使用鼠标拖动表格或单元格的边框 。 6.2 使用表格的其他视图 6.2.1 扩展表格模式 6.2.2 布局表格模式 6.2.3 绘制布局表格 6.2.4 调整布局表格和布局单元格 6.2.5设置布局单元格和表格的属性 6.2.1 扩展表格模式 在Dreamweaver中，扩展表格模式可以向文档中的所有表格添加单元格边距和间距，并且增加表格的边框以使编辑操作更加容易。利用这种模式，我们可以选择表格中的项目或者精确地放置插入点。 例如，表格中的图像一般插入后与表格的边框之间没有缝隙，我们可以扩展一个表格以便将插入点放置在图像的左边或右边，从而避免无意中选中该图像或者单元格。具体操作方法如下： 方法一：选择【查看】|【表格模式】|【扩展表格模式】菜单命令。 方法二：在【插入】栏中的【布局】选项中单击【扩展表格模式】按钮，切换到扩展表格模式，此时可以发现所有表格被添加了单元格边距和间距。 6.2.2 布局表格模式 布局模式是一种特殊的表格模式，它的作用在于用可视化的方法在页面上绘制复杂的表格。它同传统绘制表格方法的差别在于，在布局模式中，我们可以在页面上绘制任意数量和大小的表格，而且在表格中的任意位置上也可以绘制任意数量和任意大小的单元格。切换到布局表格模式的具体操作步骤如下： 步骤1：选择【查看】|【表格模式】|【布局模式】菜单命令。如图6-26所示。 步骤2：第一次切换到布局模式时，会弹出一个【从布局模式开始】对话框，上面显示了一些提示信息。 步骤3：单击【确定】按钮，即可切换到布局模式，如图6-27所示。 6.2.3 绘制布局表格 在Dreamweaver CS3的文挡窗口中，布局表格外框为绿色。绘制布局表格的步骤如下： 步骤1：建立一个新的页面buju.htm。 步骤2：切换到布局模式。 步骤3：单击【布局】工具栏上的【绘制布局表格】按钮，如图6-28所示，开始绘制布局表格。 步骤4：拖动鼠标在页面上绘制出所需要的表格，即可完成布局表格的绘制，此时表格的标识名称【布局表格】及其尺寸在表格顶部区域显示出来，效果如图6-29所示。 步骤5：绘制完布局表格后，单击【布局】工具栏上的【绘制布局单元格】按钮，绘制布局单元格，效果如图6-30所示。 步骤6：绘制完布局表格和单元格后，系统会自动生成表格。 6.2.4 调整布局表格和布局单元格 使用Dreamweaver布局模式的一个优势就是表格和布局单元格可以很自由地移动和改变大小，包括： 1．选择表格和单元格 2．移动表格和单元格 3．改变表格和单元格 注意：单元格在高、宽调整中不