网页设计5表格与框架

1、授课人：何蕴婷授课人：何蕴婷EMAIL：网页设计（网页设计（5 5）在网页中应用表格 与框架内部培训资料内部培训资料, ,不作任何宣传用途不作任何宣传用途1 1、通过实训项目熟练掌握在网页中插入、通过实训项目熟练掌握在网页中插入表格。表格。2 2、通过实训项目了解框架页面的结构。、通过实训项目了解框架页面的结构。内部培训资料内部培训资料, ,不作任何宣传用途不作任何宣传用途1、在网页中插入表格。、在网页中插入表格。2、建立框架结构的网页。、建立框架结构的网页。内部培训资料内部培训资料, ,不作任何宣传用途不作任何宣传用途 设置页面效果如图内部培训资料内部培训资料, ,不作任何宣传用途不作任何宣

2、传用途内部培训资料内部培训资料, ,不作任何宣传用途不作任何宣传用途 1. 1.创建网页，并插入表格创建网页，并插入表格（1 1）在学生盘文件夹）在学生盘文件夹14ec14ec下的文件夹下的文件夹“website”website”中新建文件夹中新建文件夹“shixun5”shixun5” （2 2）在文件夹）在文件夹“shixun5”shixun5”中新建网页，中新建网页，文件名为文件名为resume.htmresume.htm。 （3 3）给网页插入表格（）给网页插入表格（DWDW插入的方法）插入的方法）语法：语法： 我的个人简历我的个人简历 表格中的行表格中的行表格中的单元格表格中的单元格

3、内部培训资料内部培训资料, ,不作任何宣传用途不作任何宣传用途 2. 2.给网页中的表格设置样式给网页中的表格设置样式（1 1）表格的宽度和高度（相关属性）表格的宽度和高度（相关属性width ，height）（2 2）表格的边界间距（）表格的边界间距（相关属性相关属性 border，cellpadding）（3 3）表格的背景（相关属性）表格的背景（相关属性background ，），）内部培训资料内部培训资料, ,不作任何宣传用途不作任何宣传用途 3. 3.建立框架结构的网页建立框架结构的网页主要用到框架的创建、框架和框架集的属性设置、框架和框架集的保存、不能显示框架的处理等知识。本页面分

4、为上中下3个框架来制作，在制作之前应先制作好各框架中要显示的网页。（1 1） 内部培训资料内部培训资料, ,不作任何宣传用途不作任何宣传用途 3. 3.建立框架结构的网页建立框架结构的网页框架页面的语法结构 内部培训资料内部培训资料, ,不作任何宣传用途不作任何宣传用途教学相关内容教学相关内容 表格 框架内部培训资料内部培训资料, ,不作任何宣传用途不作任何宣传用途相关内容相关内容插入表格 输入表格内容 表格嵌套 选择表格 合并及拆分单元格 插入或删除行或列 设置表格、单元格属性和表格模板 表格内容的移动和排序 表格数据的导出 内部培训资料内部培训资料, ,不作任何宣传用途不作任何宣传用途插入

5、表格插入表格 在网页制作中，对页面进行布局是非常重要的，表格就是页面布局中常用的方式。Dreamweaver不仅支持在表格中有序地排列数据，还可用表格对网页中的文本、图像及其他元素进行定位。 语法：语法： 内部培训资料内部培训资料, ,不作任何宣传用途不作任何宣传用途输入表格内容输入表格内容 手动添加表格内容 从其他文档导入表格式数据 内部培训资料内部培训资料, ,不作任何宣传用途不作任何宣传用途手动添加表格内容手动添加表格内容 将表格插入到文档后即可向表格添加文本或图像等内容。向表格添加内容的方法很简单，只需将插入点定位到要输入内容的单元格中，再输入文本或插入图像即可。内部培训资料内部培训资

6、料, ,不作任何宣传用途不作任何宣传用途从其他文档导入表格式数据从其他文档导入表格式数据 Dreamweaver可以将创建在另一个应用程序（如写字板文件）中的数据导入到网页中并设置为表格的格式，而且各数据之间不可以制表符、逗号、冒号、分号或其他分隔符分隔开来。 内部培训资料内部培训资料, ,不作任何宣传用途不作任何宣传用途表格嵌套表格嵌套 嵌套表格是表格布局中一个十分重要的环节，它是指在一个表格的单元格中再插入一个表格，嵌套表格的宽度受所在单元格的宽度限制，其编辑方法与表格相同。 语法：语法： 外层外层 内层内层 内部培训资料内部培训资料, ,不作任何宣传用途不作任何宣传用途选择表格选择表格

7、选择整个表格 选择整行或整列 选择单元格 内部培训资料内部培训资料, ,不作任何宣传用途不作任何宣传用途选择整个表格选择整个表格 内部培训资料内部培训资料, ,不作任何宣传用途不作任何宣传用途选择整行或整列选择整行或整列 将鼠标光标移到要选择行或列的左侧或上方，当需要选择的行或列边框线呈红色时单击鼠标即可。 内部培训资料内部培训资料, ,不作任何宣传用途不作任何宣传用途选择单元格选择单元格 单元格的选择分为选择单个单元格和选择多个单元格区域。内部培训资料内部培训资料, ,不作任何宣传用途不作任何宣传用途合并及拆分单元格合并及拆分单元格 合并单元格 拆分单元格 内部培训资料内部培训资料, ,不作

8、任何宣传用途不作任何宣传用途合并单元格合并单元格 合并单元格操作只能针对连续的单元格使用。 举例：举例： 我的个人简历我的个人简历 内部培训资料内部培训资料, ,不作任何宣传用途不作任何宣传用途拆分单元格拆分单元格 表格中每一行中的单元格列数可能不等，这时就可根据需要使用拆分命令把一个单元格变为几个单元格。 内部培训资料内部培训资料, ,不作任何宣传用途不作任何宣传用途插入或删除行或列插入或删除行或列 插入单行或单列 插入多行或多列 删除行或列 内部培训资料内部培训资料, ,不作任何宣传用途不作任何宣传用途插入单行或单列插入单行或单列 内部培训资料内部培训资料, ,不作任何宣传用途不作任何宣传

9、用途插入多行或多列插入多行或多列 内部培训资料内部培训资料, ,不作任何宣传用途不作任何宣传用途删除行或列删除行或列 将插入点定位到要删除行或列的任意一个单元格中，然后选择修改表格删除行菜单命令或选择修改表格删除列菜单命令。 选择表格要删除的行或列，然后选择编辑清除菜单命令或按【Delete】键。 内部培训资料内部培训资料, ,不作任何宣传用途不作任何宣传用途设置表格、单元格属性和表格模板设置表格、单元格属性和表格模板 设置表格属性 设置单元格属性 套用表格模板内部培训资料内部培训资料, ,不作任何宣传用途不作任何宣传用途设置表格属性设置表格属性 “表格”属性面板中显示了插入表格的所有特性，通

10、过修改面板中的参数可快速地编辑表格外观。 内部培训资料内部培训资料, ,不作任何宣传用途不作任何宣传用途设置单元格属性设置单元格属性 在编辑网页时除可以设置整个表格的属性外，还可以单独设置表格中某行、列或单元格的属性。内部培训资料内部培训资料, ,不作任何宣传用途不作任何宣传用途套用表格模板套用表格模板 在Dreamweaver中提供了多个表格模板供用户选择使用，还可以通过设置模板的参数来调整表格的外观。 内部培训资料内部培训资料, ,不作任何宣传用途不作任何宣传用途表格内容的移动和排序表格内容的移动和排序 表格整列内容的移动表格的排序 内部培训资料内部培训资料, ,不作任何宣传用途不作任何宣

11、传用途表格整列内容的移动表格整列内容的移动内部培训资料内部培训资料, ,不作任何宣传用途不作任何宣传用途表格的排序表格的排序 表格一般用来处理数据，在处理数据的同时还需要对表格中的各项进行排序。 内部培训资料内部培训资料, ,不作任何宣传用途不作任何宣传用途表格数据的导出表格数据的导出 因为语言原因，导出的文件只能用写字板打开才能正确显示其中的数据，在其他程序中打开会乱码。 内部培训资料内部培训资料, ,不作任何宣传用途不作任何宣传用途认识框架和框架集认识框架和框架集 框架是将一个页面划分成不同的文档区，每个文档区显示独立的内容，其效果是在浏览网页时，网页中一部分区域（如公司Logo、导航条）

12、内容不改变，而其他区域内容在不断发生改变。 框架集是HTML文件，它定义一组框架的布局和属性，包括框架的数目、大小、位置以及在框架中初始显示页面的地址。框架集文件本身不包含要在浏览器中显示的网页内容（对不能显示框架的浏览器进行的处理除外，即部分），框架集文件只是向浏览器提供应如何显示一组框架以及在这些框架中应显示哪些网页的有关信息。 内部培训资料内部培训资料, ,不作任何宣传用途不作任何宣传用途框架和框架集的创建框架和框架集的创建 在“插入”栏插入预定义的框架集创建预定义框架集 手动设计框架 内部培训资料内部培训资料, ,不作任何宣传用途不作任何宣传用途在在“插入插入”栏插入预定义的框架集栏插

13、入预定义的框架集 在Dreamweaver中预定义了一些框架集样式，需要使用时直接插入即可。 内部培训资料内部培训资料, ,不作任何宣传用途不作任何宣传用途创建预定义框架集创建预定义框架集 内部培训资料内部培训资料, ,不作任何宣传用途不作任何宣传用途手动设计框架手动设计框架 内部培训资料内部培训资料, ,不作任何宣传用途不作任何宣传用途框架和框架集的选择和删除框架和框架集的选择和删除 认识“框架”面板 选择框架与框架集删除框架 内部培训资料内部培训资料, ,不作任何宣传用途不作任何宣传用途认识认识“框架框架”面板面板 “框架”面板中显示所创建的框架结构，并在不同的框架区域中显示框架的名称。当

14、在框架网页中新建、删除框架，或修改框架的尺寸、名称等时，“框架”面板中的示意图会跟随变化。 内部培训资料内部培训资料, ,不作任何宣传用途不作任何宣传用途选择框架与框架集选择框架与框架集在编辑窗口中选择 在“框架”面板中选择 内部培训资料内部培训资料, ,不作任何宣传用途不作任何宣传用途在编辑窗口中选择在编辑窗口中选择 在编辑窗口中选择框架的方法很简单，按住【Alt】键，在要选择的框架内单击鼠标左键即可。被选取的框架边框呈虚线显示。 选择框架集时，单击框架边框即可，选取的所有框架边框呈虚线。 内部培训资料内部培训资料, ,不作任何宣传用途不作任何宣传用途在在“框架框架”面板中选择面板中选择 在

15、“框架”面板中单击框架区域中的任意位置即可选择框架，选中的框架以粗黑框显示。 在“框架”面板中单击框架边框即可选择框架集，如果要选择整个框架集，只需单击框架最外面的边框即可。 内部培训资料内部培训资料, ,不作任何宣传用途不作任何宣传用途删除框架删除框架 如果窗口中有不需要的框架，可将其删除，用鼠标将要删除框架的边框拖到父框架边框上或拖离页面即可。 内部培训资料内部培训资料, ,不作任何宣传用途不作任何宣传用途框架和框架集的保存框架和框架集的保存 保存框架与框架集之后才能在浏览器中浏览用框架布局的网页。每个框架包含一个网页，一个框架集则包含多个网页，在保存时应保存所有的框架与框架集。 保存框架

16、 保存框架集 保存框架集中的所有网页 内部培训资料内部培训资料, ,不作任何宣传用途不作任何宣传用途保存框架保存框架 将插入点定位到要保存的框架中。 选择文件保存框架菜单命令，在打开的“另存为”对话框中像保存其他网页一样指定保存路径和文件名，然后单击“保存”按钮即可。 内部培训资料内部培训资料, ,不作任何宣传用途不作任何宣传用途保存框架集保存框架集 选中要保存的框架集。选择文件保存框架页菜单命令，打开“另存为”对话框。在“保存在”下拉列表框中选择框架集的保存路径，在“文件名”文本框中为框架集命名。单击“保存”按钮即可保存框架集。 内部培训资料内部培训资料, ,不作任何宣传用途不作任何宣传用途

17、保存框架集中的所有网页保存框架集中的所有网页 内部培训资料内部培训资料, ,不作任何宣传用途不作任何宣传用途框架和框架集的属性设置框架和框架集的属性设置 框架集的属性设置 框架集文档标题的设置 框架的属性设置 内部培训资料内部培训资料, ,不作任何宣传用途不作任何宣传用途框架集的属性设置框架集的属性设置 使用框架集属性面板可以查看和设置大多数框架集属性。 内部培训资料内部培训资料, ,不作任何宣传用途不作任何宣传用途框架集文档标题的设置框架集文档标题的设置 当访问者在浏览器中查看该框架集时，标题将显示在浏览器的标题栏中。 内部培训资料内部培训资料, ,不作任何宣传用途不作任何宣传用途框架的属性设置框架的属性设置 内部培训资料内部培训资料, ,不作任何宣传用途不作任何宣传用途处理不能显示框架的浏览器处理不能显示框架的浏览器 由于在低版本的浏览器中不能正确显示使用了框架的网页和框架中的内容，因此在Dreamweaver中允许指定在不支持框架的基于文本的浏览器和较旧的图形浏览器中显示内容。此类内容存储在框架集文件中，用标签括起来。当不支持框架的浏览器加载该框架集文件时，浏览器只显示用标签括起来的内容。 内部培训资料内部培训