授课人：何蕴婷 EMAIL：jmhyt 网页设计（5） 在网页中应用表格 与框架 内部培训资料,不作任何宣传用途 l l 知识技能目标知识技能目标 1、通过实训项过实训项 目熟练练掌握在网页页中插 入表格。 2、通过实训项过实训项 目了解框架页页面的结结构 。 内部培训资料,不作任何宣传用途 l l 实训内容实训内容 1、在网页中插入表格。 2、建立框架结构的网页。 内部培训资料,不作任何宣传用途 实训项目实训项目1 1 设置页面效果如图 内部培训资料,不作任何宣传用途 实训项目实训项目22框架网页框架网页 内部培训资料,不作任何宣传用途 l l 课堂实训课堂实训 1.创创建网页页，并插入表格 （1）在学生盘盘文件夹夹14ec下的文件夹夹 “website”中新建文件夹夹“shixun5” （2）在文件夹夹“shixun5”中新建网页页， 文件名为为resume.htm。 （3）给给网页页插入表格（DW插入的方法） 语语法： 我的个人简历 表格中的行 表格中的单元格 内部培训资料,不作任何宣传用途 l l 课堂实训课堂实训 2.给给网页页中的表格设设置样样式 （1）表格的宽宽度和高度（相关属性width ，height） （2）表格的边边界间间距（相关属性 border，cellpadding） （3）表格的背景（相关属性background ，） 内部培训资料,不作任何宣传用途 l l 课堂实训课堂实训 3.建立框架结结构的网页页 主要用到框架的创建、框架和框架集的属性设置、框架和框架集 的保存、不能显示框架的处理等知识。本页面分为上中下3个框架 来制作，在制作之前应先制作好各框架中要显示的网页。 （1） 内部培训资料,不作任何宣传用途 l l 课堂实训课堂实训 3.建立框架结结构的网页页 框架页面的语法结构 内部培训资料,不作任何宣传用途 教学相关内容 表格 框架 内部培训资料,不作任何宣传用途 相关内容 插入表格 输入表格内容 表格嵌套 选择表格 合并及拆分单元格 插入或删除行或列 设置表格、单元格属性和表格模板 表格内容的移动和排序 表格数据的导出 内部培训资料,不作任何宣传用途 插入表格 在网页制作中，对页面进 行布局是非常重要的，表格就是 页面布局中常用的方式。 Dreamweaver不仅支持在表格 中有序地排列数据，还可用表格 对网页中的文本、图像及其他元 素进行定位。 语法： 内部培训资料,不作任何宣传用途 输入表格内容 手动添加表格内容 从其他文档导入表格式数据 内部培训资料,不作任何宣传用途 手动添加表格内容 将表格插入到文档后即可向表格添加文本或图像等内容。向表格添加内 容的方法很简单，只需将插入点定位到要输入内容的单元格中，再输入文本 或插入图像即可。 内部培训资料,不作任何宣传用途 从其他文档导入表格式数据 Dreamweaver可以将创建在另一个应用程序（如写字板文件） 中的数据导入到网页中并设置为表格的格式，而且各数据之间不可以 制表符、逗号、冒号、分号或其他分隔符分隔开来。 内部培训资料,不作任何宣传用途 表格嵌套 嵌套表格是表格布局中一个十分重要的环节，它是指在一个表格 的单元格中再插入一个表格，嵌套表格的宽度受所在单元格的宽度限 制，其编辑方法与表格相同。 语法： 外层 内层 内部培训资料,不作任何宣传用途 选择表格 选择整个表格 选择整行或整列 选择单元格 内部培训资料,不作任何宣传用途 选择整个表格 内部培训资料,不作任何宣传用途 选择整行或整列 将鼠标光标移到要选择行或列的左侧或上方，当需要选择的行 或列边框线呈红色时单击鼠标即可。 内部培训资料,不作任何宣传用途 选择单元格 单元格的选择分为选择单个单元格和选择多个单元格 区域。 内部培训资料,不作任何宣传用途 合并及拆分单元格 合并单元格 拆分单元格 内部培训资料,不作任何宣传用途 合并单元格 合并单元格操作只能针对连续的单元格使用。 举例： 我的个人简历 内部培训资料,不作任何宣传用途 拆分单元格 表格中每一行中的单元格列数可能不等，这时就可根据需 要使用拆分命令把一个单元格变为几个单元格。 内部培训资料,不作任何宣传用途 插入或删除行或列 插入单行或单列 插入多行或多列 删除行或列 内部培训资料,不作任何宣传用途 插入单行或单列 内部培训资料,不作任何宣传用途 插入多行或多列 内部培训资料,不作任何宣传用途 删除行或列 将插入点定位到要删除行或列的任意一个单元格中， 然后选择修改表格删除行菜单命令或选择修 改表格删除列菜单命令。 选择表格要删除的行或列，然后选择编辑清除菜 单命令或按【Delete】键。 内部培训资料,不作任何宣传用途 设置表格、单元格属性和表格模板 设置表格属性 设置单元格属性 套用表格模板 内部培训资料,不作任何宣传用途 设置表格属性 “表格”属性面板中显示了插入表格的所有特性， 通过修改面板中的参数可快速地编辑表格外观。 内部培训资料,不作任何宣传用途 设置单元格属性 在编辑网页时除可以设置整个表格的属性外，还可以单独设置表格 中某行、列或单元格的属性。 内部培训资料,不作任何宣传用途 套用表格模板 在Dreamweaver中提供了多个表格模板供用户选择使用，还可以 通过设置模板的参数来调整表格的外观。 内部培训资料,不作任何宣传用途 表格内容的移动和排序 表格整列内容的移动 表格的排序 内部培训资料,不作任何宣传用途 表格整列内容的移动 内部培训资料,不作任何宣传用途 表格的排序 表格一般用来处理数据，在处理数据的同时还需要对表格中的 各项进行排序。 内部培训资料,不作任何宣传用途 表格数据的导出 因为语言原因，导出的文件只能用写字板打开才 能正确显示其中的数据，在其他程序中打开会乱码 。 内部培训资料,不作任何宣传用途 认识框架和框架集 框架是将一个页面划分成不同的文档区，每个文档区显示独立的 内容，其效果是在浏览网页时，网页中一部分区域（如公司Logo、 导航条）内容不改变，而其他区域内容在不断发生改变。 框架集是HTML文件，它定义一组框架的布局和属性，包括框架 的数目、大小、位置以及在框架中初始显示页面的地址。框架集文件 本身不包含要在浏览器中显示的网页内容（对不能显示框架的浏览器 进行的处理除外，即部分），框架集文件只是向浏览器 提供应如何显示一组框架以及在这些框架中应显示哪些网页的有关信 息。 内部培训资料,不作任何宣传用途 框架和框架集的创建 在“插入”栏插入预定义的框架集 创建预定义框架集 手动设计框架 内部培训资料,不作任何宣传用途 在“插入”栏插入预定义的框架集 在Dreamweaver中预定义了一些框架集样式，需要使用 时直接插入即可。 内部培训资料,不作任何宣传用途 创建预定义框架集 内部培训资料,不作任何宣传用途 手动设计框架 内部培训资料,不作任何宣传用途 框架和框架集的选择和删除 认识“框架”面板 选择框架与框架集 删除框架 内部培训资料,不作任何宣传用途 认识“框架”面板 “框架”面板中显示所创建的框架结构，并在不同的框架区域中显 示框架的名称。当在框架网页中新建、删除框架，或修改框架的尺寸 、名称等时，“框架”面板中的示意图会跟随变化。 内部培训资料,不作任何宣传用途 选择框架与框架集 在编辑窗口中选择 在“框架”面板中选择 内部培训资料,不作任何宣传用途 在编辑窗口中选择 在编辑窗口中选择框架的方法很简单，按住【Alt】键，在要选择的框架 内单击鼠标左键即可。被选取的框架边框呈虚线显示。 选择框架集时，单击框架边框即可，选取的所有框架边框呈虚线。 内部培训资料,不作任何宣传用途 在“框架”面板中选择 在“框架”面板中单击框架区域中的任意位置即可选择框架， 选中的框架以粗黑框显示。 在“框架”面板中单击框架边框即可选择框架集，如果要选择 整个框架集，只需单击框架最外面的边框即可。 内部培训资料,不作任何宣传用途 删除框架 如果窗口中有不需要的框架，可将其删除，用鼠标将要删 除框架的边框拖到父框架边框上或拖离页面即可。 内部培训资料,不作任何宣传用途 框架和框架集的保存 保存框架与框架集之后才能在浏览器中浏览用框架布局的网页。 每个框架包含一个网页，一个框架集则包含多个网页，在保存时应保存 所有的框架与框架集。 保存框架 保存框架集 保存框架集中的所有网页 内部培训资料,不作任何宣传用途 保存框架 将插入点定位到要保存的框架中。 选择文件保存框架菜单命令，在打开的“另存为” 对话框中像保存其他网页一样指定保存路径和文件名 ，然后单击“保存”按钮即可。 内部培训资料,不作任何宣传用途 保存框架集 选中要保存的框架集。 选择文件保存框架页菜单命令，打开“另存为”对话框。 在“保存在”下拉列表框中选择框架集的保存路径，在“文件名”文 本框中为框架集命名。 单击“保存”按钮即可保存框架集。 内部培训资料,不作任何宣传用途 保存框架集中的所有网页 内部培训资料,不作任何宣传用途 框架和框架集的属性设置 框架集的属性设置 框架集文档标题的设置 框架的属性设置 内部培训资料,不作任何宣传用途 框架集的属性设置 使用框架集属性面板可以查看和设置大多数框架集属性。 内部培训资料,不作任何宣传用途 框架集文档标题的设置 当访问者在浏览器中查看该框架集时，标题将显示在浏览器 的标题栏中。 内部培训资料,不作任何宣传用途 框架的属性设置 内部培训资料,不作任何宣传用途 处理不能显示框架的浏览器 由于在低版本的浏览器中不能正确显示使用了框架的网页 和框架中的内容，因此在Dreamweaver中允许指定在不支持框 架的基于文本的浏览器和较旧的图形浏览器中显示内容。此类内 容存储在框架集文件中，用标签括起来。当不支持 框架的浏览器加载该框架集文件时，浏览器只显示用 标签括起来的内容。 内部培训资料,不作任何宣传用途 框架的链接 在使用了框架技术文档中的链接与一般文档中的链 接不同，增加了与框架有关的链接目标，可以在一个框 架内使用链接改变另一个框架的内容。 内部培训资料,不作任何宣传用途 作业 问题 1.主页index 2.文件存放目录不规范，网页放image下 3.链接文件路径不对 内部培训资料,不作任何宣传用途 课后作业 本课课 后制作 一表格 网页, 参考如 右图