5.3 页面布局教案.pptVIP

5.3 页面布局 1. 用表格实现页面布局 2. 用框架布局页面 3. 层的使用 使用表格 表格的作用 表现表格内容 排版 单元格的内容 文字、图像、背景图像 表单 另一个表格 1. 用表格实现页面布局 表格的引入使网页更容易组织，布局更整齐美观。但是，过多地使用表格也有不利的一面 表格对应的HTML标签为table.../table； 表格中的横向的一行称为“行”，对应的HTML标签为tr.../tr； 表格中最小单位的格子称为“单元格”，对应的HTML标签为td.../td； 有时表格中也会使用到页眉，它所对应的HTML标签为TH.../TH。 利用Dreamweaver可以任意的创建表格 能所见即所得地修改表格 不再需要直接输入HTML代码 插入表格 打开菜单【插入】?【表格】 在表格设置对话框中设置 表格的行列数 表格的宽度 边框粗细 单元格边距 单元格间距 表格页面位置 表格标题及对齐方式 表格摘要 一般说来，布局表格不需要设置高度，因为一旦在表格的单元格中插入元素，表格的高度将自动调整 表格的宽度也不要超过一般显示器的宽度 如果要插入的是一个布局表格，显然不希望用户看到边框线，所以一般设置边框粗细为0 单元格边距指的是单元格边框和单元格内容之间的距离，而单元格间距指的是相邻单元格之间的距离 标题文字显示在表格第一行之上，如果使用表格做布局之用，可以不设置标题文字及标题对齐方式 表格摘要不会在浏览器中显示，用于其他用途 表格的选定（先选后做） 选定单元格 单个 相临和不相临多个 选定行、列 选定全表 编辑表格1 添加行或列 将光标移至单元格，右击，在弹出快捷菜单中选择【表格】?【插入行】（【插入列】），将在这一行上（左）添加一行（列） 添加最后一行：Tab Ctrl+enter 删除行或列 将光标移至单元格，右击，在弹出快捷菜单中选择【表格】?【删除行】（【删除列】）即可删除 编辑表格2 合并单元格 用鼠标拖曳选择相邻的需要合并的单元格，然后单击鼠标右键，在弹出快捷菜单中选择【表格】?【合并单元格】 拆分单元格 将光标移至某一单元格，右击，在弹出快捷菜单中选择【表格】?【拆分单元格】，在弹出的对话框中，根据需要选择拆分方式 修饰表格 改变表格的属性 布局、宽度与高度、背景、边框、文字样式 改变单元格的属性 布局、宽度与高度、背景、边框 移动/复制行或列 向单元格添加图像 绘制布局表格和单元格 对于常规表格，使用上述创建、修改表格的方法比较方便，但如果表格行列较多且关系较复杂时，使用上述方法将很繁琐，而且容易出错，反复的插入、删除、合并和拆分操作将使表格较难处理 对于这种情况，可以使用绘制布局表格和单元格的方法 【插入】工具栏选择【布局】选项卡，然后选择【布局】设计模式 单击【布局表格】按钮，使用鼠标拖动绘制布局表格 单击【绘制布局单元格】按钮，使用鼠标拖动绘制布局单元格 绘制的布局表格与直接插入的表格，在浏览器中显示并无区别；只是在代码中增加了注释!--DWLayoutTable--等，供Dreamweaver区别编辑。 导入数据表并排序 表格除用作布局外，也可以用于一般表格的使用 将特制的文本文件（其中以Tab、逗号、分号或引号等分界符分割）导入到网页中，并将其排序 导入数据表 【插入】工具栏选择【布局】选项卡，单击最右侧的【表格数据】按钮，弹出【导入表格数据】对话框 确定后，完成数据表的导入 原始数据与导入后的表格 排序数据表 将光标移至表格中的任一单元格后，打开菜单【命令】?【排序表格】，在弹出的【排序表格】对话框中设置排序要求 格式化表格和单元格 用设计方案格式化表格 可以向表格快速应用一个预定义的设计 选定表格，打开菜单【命令】 ? 【格式化表格】，弹出【格式化表格】对话框?选择预设计方案 格式化表格和单元格 格式化表格 包括：表格的对齐方式、间距与边距的调整、边框及背景的设置 直接使用鼠标拖曳 使用【属性检查器】，精确指定大小及对其他属性进行设置 如果不方便选择表格，可以使用【标签选择栏】帮助选择 格式化表格和单元格 格式化单元格 包括单元格及其中内容的格式化 单元格本身，主要对高、宽、水平和垂直的对齐方式、背景颜色、背景图片、边框粗细和颜色等进行设置 单元格中文本，主要对字体、大小、颜色、使用的CSS样式、对齐方式、项目符号、文字缩进、是否换行、是否为标题文字、超链接指向等设置 通过单元格的【属性检查器】进行设置 练习 建立如样张所示的网页，具体要求： （1）网页标题为：办公用品，网页背景色为黄色，所有文字颜色为蓝色，超级链接颜色为黑色； （2）设置第1行文字属性为：宋体、粗体、居中，大小与样张大致一致，第1行文字下插入一个2行3列的表格，表格