第三章-网页的排版和布局(二)布局表格的应用.pptVIP

计算机与信息学院 第三章 网页的排版和布局（二）布局表格的应用 福建农林大学计算机与信息学院 胡欣欣 3.3 布局表格的应用 Dreamweaver提供了“布局”模式。在“布局”模式中，可以使用布局表格和布局单元格来设计网页。 使用布局表格可以摆脱传统表格的羁绊，更方便设计者进行网页布局。 在布局表格中插入的布局单元格，可以在该布局表格中任意位置移动，使得网页布局更灵活。 布局模式是进行 Web 页布局最常用的方法。 3.3.1 绘制布局表格和布局单元格 1、绘制布局表格 ① 把表格视图切换到“布局”模式。可以通过在“插入”工具栏的“布局”类别中，单击“布局”按钮来实现，或单击“查看”/“表格模式”/“布局模式”。 ② 在“插入”栏的“布局”类别中，单击“绘制布局表格”按钮，或单击“插入”/“布局对象”/“布局表格”。当鼠标指针变为十字加号 时，拖动指针就可以开始绘制布局表格。 绘制布局表格时按住 Ctrl 键，就可以连续绘制出多个布局表格。 3.3.1 绘制布局表格和布局单元格 绘制布局表格只能自上而下绘制相邻的表格。如果在同一个水平方向上布局两个并列的表格，则只能先绘制一个布局表格，然后在该布局表格内绘制嵌套布局表格。 在布局模式下，不能向表格中添加网页元素。 布局表格不能互相重叠，但可以绘制嵌套布局表格。 3.3.1 绘制布局表格和布局单元格 2.绘制布局单元格 ① 把表格视图切换到“布局”模式中。 ② 在“插入”栏的“布局”类别中，单击“绘制布局单元格”按钮，或单击“插入”/“布局对象”/“布局单元格”。 ③将鼠标指针移动到文档中相应的布局表格上，当鼠标指针变为加号时，拖动指针绘制布局单元格。若要绘制多个布局单元格可通过 Ctrl 键实现。 3.3.1 绘制布局表格和布局单元格 3 布局单元格和布局表格的区别 必须切换到布局视图（CTRL+F6），才能在网页中添加布局表格和布局单元格。 可不必先建立布局表格，若先绘制了布局单元格，则会自动创建布局表格容纳布局单元格。 布局单元格是以布局表格为容器的,布局单元格不能超出布局表格。 在布局模式下，可以直接将内容添加到布局单元格中，而布局表格必须从布局模式切换到标准或扩展模式才能输入网页内容。 3.3.1 绘制布局表格和布局单元格 布局表格仅仅用于对网页进行布局，网页内容添加在布局单元格中。 若布局表格已经在标准或扩展模式下输入内容或曾经输入内容，则在布局模式下它的外框显示为蓝色，并且背景变为白色。 一个布局表格中可以有多个布局单元格，布局表格中还可以创建布局表格，但是不能在布局单元格中创建布局表格。 无论布局单元格和布局表格，都不能重叠。 3.3.2调整布局表格和布局单元格 1、调整和移动布局单元格 调整布局单元格的大小： ①选择一个单元格，方法是单击该单元格的边沿，或者在按住 Ctrl 键 同时单击该单元格中的任何位置。选中后，该单元格周围出现选择控制柄。 ② 拖动选择控制点来调整单元格的大小。 单元格边沿会自动与其他单元格的边沿靠齐。 3.3.2调整布局表格和布局单元格 若要移动布局单元格，首先选中单元格： ① 将该单元格拖到其所在的布局表格中的另一个位置。 ② 按箭头键移动该单元格，每次移动1个像素。 ③ 按住 Shift 键的同时按箭头键移动该单元格，每次10个像素。 2 调整和移动布局表格 方法同调整和移动布局单元格 位于网页最外部的布局表格不能移动，其他布局表格可以移动。 3.3.3 设置布局表格和布局单元格属性 设置布局单元格属性 设置布局表格属性 3.3.3 设置布局表格和布局单元格属性 宽：用于设置布局单元格的宽度。 ——“固定” ：将单元格设置为固定宽度，在旁边的文本框中输入宽度（以像素为单位）。 ——自动伸展：使单元格自动伸展以适应浏览器的宽度。 间距：设置该布局表格内布局单元格之间所能允许的最小间隔（以像素为单位）。设置单元格间距不为0后，在单元格周围将出现白色的边框，并且布局表格也会被撑大 3.3.4 设置列宽 布局视图设定宽度：固定宽度和自动伸展 ——固定宽度：具体的宽度值 ——自动伸展：根据窗口的大小而自动调整，显示为波浪，线原来固定宽度的单线变为双线 一个表格只能设置一个自动伸展。 列自动伸展的应用：常见的布局是让页面上包含主要内容的列自动伸展以适应浏览器的宽度，其他列自动设置为固定宽度。这样可以保证，即使浏览器的窗口不是最大化的情况下，这些重要内容也能全部出现在窗口中。 3.3.5 布局辅助工具 1 显示标尺 要显示标尺，可单击“查看”/“标尺”/“显示”。 2 显示和编辑网格 要显示网格可单击“查看”/“网格”/“显示网格” 靠齐到网格：该功能使得设计