第6章 表格与框架元素.ppt

第6章 表格与框架元素 第6章 表格与框架元素 第6章 表格与框架元素 第6章 表格与框架元素 第6章 表格与框架元素 第6章 表格与框架元素 第6章 表格与框架元素 第6章 表格与框架元素 第6章 表格与框架元素 第6章 表格与框架元素 第6章 表格与框架元素 第6章 表格与框架元素 第6章 表格与框架元素 吴 丰 主编 清华大学出版社 6.1.1 插入表格与选择表格 + 6.1 插入并编辑表格 1．插入表格 Dreamweaver CS5提供多种创建表格的方法。 【教与练6-1】：插入表格 ① 启动Dreamweaver CS5，新建空白 XHTML文档，将光标定位在需要插入表格的 位置。 ② 按下组合键〈Ctrl+Alt+T〉，或者在软件 菜单栏中执行“插入”→“表格”命令，再或者在 “插入”面板“常用”类别中，单击“表格”按钮。 ③ 这时弹出如图6-1所示的对话框。 图6-1 “表格”对话框 图6-2 在表格中插入文字和图像 图6-3 在表格中嵌套表格 第6章 表格与框架元素 2．选择表格 表格中行与列交叉的部分称为单元格，它是组成表格的最小单位，单个数 的输入和修改都是在单元格中进行的。选择表格，其实就是选择单元格。 【教与练6-2】：选择表格。 图6-4 拖动鼠标选择连续单元格 图6-5 定位鼠标在表格边缘即可选择列或行 图6-6 选择整个表格 第6章 表格与框架元素 6.1.2 设置单元格属性 + 6.1 插入并编辑表格 选择一个或多个单元格，“属性”面板即刻显示有关单元格的相关属性，如图6-7所示，其中各项含义如下： 图6-7 设置单元格属性 6.1.3 合并、拆分单元格 + 6.1 插入并编辑表格 1．合并单元格 2．拆分单元格 图6-8 合并单元格 图6-9 “拆分单元格”对话框 图6-10 格拆单元格后的效果 6.1.4 删除单元格与增加列或行 + 6.1 插入并编辑表格 1．删除单元格 2．增加列或行 6.2.1 细线表格 + 6.2 使用CSS控制表格外观 【教与练6-6】：细线表格。 图6-17 增加“border-collapse”属性 图6-18 最终预览效果 6.2.2 隔行换色表格 + 6.2 使用CSS控制表格外观 【教与练6-7】：隔行换色表格。 图6-22 “隔行换色表格”预览效果 6.3.1 什么是框架与框架集 + 6.3 框架 1．什么是框架 框架（Frame）是浏览器窗口中的一个区域，包含在框架集中，它是框架 集 的一部分，每个框架中放置一个网页内容，组合起来就是浏览者看到的框架 式网页。 2．什么是框架集 框架集（Frameset）实际是一个网页文件，用于定义文档中框架的布局和属性，包括框架的数目、框架的大小和位置以及在每个框架中显示的页面的URL。 3．框架与框架集的关系 例如，某个页面被创建为两个框架，那么它实际包含三个文件：一个框架集文件，两个框架内容文件。 6.3.2 创建框架与框架集 + 6.3 框架 1．新建文件时创建框架与框架集 2．在已有文档中创建框架与框架集 6.3.3 与框架相关的基本操作 + 6.3 框架 1．认识框架面板 “框架”面板主要为用户提供框架集内各框架的可视化表示形式，通过该面板 用户能够清楚的看到框架集的层次结构，打开或关闭该面板的快捷键是〈Shift+F2〉，如图6-25所示。 2．选择框架与框架集 在包含框架的页面中，单击框架集中任意两个框架的边界，即可选中框架集，如图6-26所示。 在“框架”面板中单击某个框架，即可选中相应的框架；单击“框架”面板最外围的边框，即可选中框架集。 图6-25 框架面板 图6-26 单击边框选择框架集 6.3.4 使用框架制作简单网页 + 6.3 框架 【教与练6-8】：使用框架制作简单网页。 图6-27 “使用框架制作简单网页”最终效果 + 6.4 案例精粹——网站后台管理平台 图6-35 网站后台管理平台最终效果 + 6.5 举一反三——吉他教程 图6-53 吉他教程页