5.3 页面布局 1. 用表格实现页面布局 用表格实现页面布局 2. 用框架布局页面 用框架布局页面 3. 层的使用 层的使用.

Presentation on theme: "5.3 页面布局 1. 用表格实现页面布局 用表格实现页面布局 2. 用框架布局页面 用框架布局页面 3. 层的使用 层的使用."— Presentation transcript:

1 5.3 页面布局 1. 用表格实现页面布局 用表格实现页面布局 2. 用框架布局页面 用框架布局页面 3. 层的使用 层的使用

2 使用表格 表格的作用 – 表现表格内容 – 排版 单元格的内容 – 文字、图像、背景图像 – 表单 – 另一个表格

3 1. 用表格实现页面布局 表格的引入使网页 更容易组织，布局 更整齐美观。但是， 过多地使用表格也 有不利的一面

4 表格对应的 HTML 标签为... ； 表格中的横向的一行称为 “ 行 ” ， 对应的 HTML 标签为... ； 表格中最小单位的格子称为 “ 单 元格 ” ，对应的 HTML 标签为... ； 有时表格中也会使用到页眉， 它所对应的 HTML 标签为... 。

5 利用 Dreamweaver 可以任意的创建表 格 能所见即所得地修改表格 不再需要直接输入 HTML 代码

6 插入表格 打开菜单【插入】  【表 格】 在表格设置对话框中设置 – 表格的行列数 – 表格的宽度 – 边框粗细 – 单元格边距 – 单元格间距 – 表格页面位置 – 表格标题及对齐方式 – 表格摘要

7 一般说来，布局表格不需要设置高度，因为一旦在表 格的单元格中插入元素，表格的高度将自动调整 表格的宽度也不要超过一般显示器的宽度 如果要插入的是一个布局表格，显然不希望用户看到 边框线，所以一般设置边框粗细为 0 单元格边距指的是单元格边框和单元格内容之间的距 离，而单元格间距指的是相邻单元格之间的距离 标题文字显示在表格第一行之上，如果使用表格做布 局之用，可以不设置标题文字及标题对齐方式 表格摘要不会在浏览器中显示，用于其他用途

8 表格的选定（先选后做） 选定单元格 – 单个 – 相临和不相临多个 选定行、列 选定全表

9 编辑表格 1 添加行或列 – 将光标移至单元格，右击，在弹出快捷菜单中选 择【表格】  【插入行】（【插入列】），将在 这一行上（左）添加一行（列） – 添加最后一行： Tab –Ctrl+enter 删除行或列 – 将光标移至单元格，右击，在弹出快捷菜单中选 择【表格】  【删除行】（【删除列】）即可删 除

10 编辑表格 2 合并单元格 – 用鼠标拖曳选择相邻的需要合并的单元格，然后单 击鼠标右键，在弹出快捷菜单中选择【表格】  【合并单元格】 拆分单元格 – 将光标移至某一单元格，右击，在弹出快捷菜单中 选择【表格】  【拆分单元格】，在弹出的对话框 中，根据需要选择拆分方式

11 修饰表格 改变表格的属性 – 布局、宽度与高度、背景、边框、文字样式 改变单元格的属性 – 布局、宽度与高度、背景、边框 移动 / 复制行或列 向单元格添加图像

12 绘制布局表格和单元格 对于常规表格，使用上述创建、修改表格的方 法比较方便，但如果表格行列较多且关系较复 杂时，使用上述方法将很繁琐，而且容易出错， 反复的插入、删除、合并和拆分操作将使表格 较难处理 对于这种情况，可以使用绘制布局表格和单元 格的方法

13 【插入】工具栏选择【布局】选项卡，然后选 择【布局】设计模式 单击【布局表格】按钮，使用鼠标拖动绘制布 局表格 单击【绘制布局单元格】按钮，使用鼠标拖动 绘制布局单元格

14 绘制的布局表格与直接插入的表格，在浏览器 中显示并无区别；只是在代码中增加了注释 等，供 Dreamweaver 区 别编辑。

15

16 导入数据表并排序 表格除用作布局外，也可以用于一般表格 的使用 将特制的文本文件（其中以 Tab 、逗号、分 号或引号等分界符分割）导入到网页中， 并将其排序

17 导入数据表 【插入】工具栏选择【布局】选项卡，单击最 右侧的【表格数据】按钮，弹出【导入表格数 据】对话框 确定后，完成数据表的导入

18 原始数据与导入后的表格

19 排序数据表 将光标移至表格中的任一单元格后，打开菜单 【命令】  【排序表格】，在弹出的【排序表 格】对话框中设置排序要求

20 格式化表格和单元格 用设计方案格式化表格 – 可以向表格快速应用一个预定义的设计 – 选定表格，打开菜单【命令】  【格式化表格】， 弹出【格式化表格】对话框  选择预设计方案

21 格式化表格和单元格 格式化表格 – 包括：表格的对齐方式、间距与边距的调整、边框 及背景的设置 – 直接使用鼠标拖曳 – 使用【属性检查器】，精确指定大小及对其他属性 进行设置 – 如果不方便选择表格，可以使用【标签选择栏】帮 助选择

22 格式化表格和单元格 格式化单元格 – 包括单元格及其中内容的格式化 – 单元格本身，主要对高、宽、水平和垂直的对齐方 式、背景颜色、背景图片、边框粗细和颜色等进行 设置 – 单元格中文本，主要对字体、大小、颜色、使用的 CSS 样式、对齐方式、项目符号、文字缩进、是否 换行、是否为标题文字、超链接指向等设置 – 通过单元格的【属性检查器】进行设置

23 练习 建立如样张所示的网页，具体要求： （ 1 ）网页标题为：办公用品，网页背景色为黄色，所有 文字颜色为蓝色，超级链接颜色为黑色； （ 2 ）设置第 1 行文字属性为：宋体、粗体、居中，大小 与样张大致一致，第 1 行文字下插入一个 2 行 3 列的表 格，表格对齐方式为居中、指定宽度 400 像素、边框 线宽度 6 、单元格边距 3 ，表格内所有单元格：水平对 齐方式中央、垂直对齐方式中部，在表格正下方第一 行输入文字，设置文字属性：宋体、粗体、居中，大 小与样张大致一致； （ 3 ）将表格第二行平均拆分为两个单元格，按行从第 1 行第 1 列单元格到第 2 行第 2 列单元格分别插入图片 bg1.jpg 、 bg2.jpg 、 bg3.jpg 、 bg4.jpg 、 bg5.jpg 、 并设置所插入的所有图像宽度为 150 像素，高度为 90 像素； （ 4 ）将当前网页以 “ 自己的姓名 bg.htm” 保存在名为 “ 自 己的学号 ” 的站点中，并将图片都按原名保存在站点的 images 文件夹中。

24 参考样张