网站制作与编辑5.ppt

1、网页设计与制作,$ 知识目标 掌握表格及单元格的创建和编辑 掌握通过表格来进行网页页面的布局方法 掌握建立框架网页及框架属性设置的方法 8 能力目标 熟练掌握表格的基本操作 熟练运用表格进行网页布局 熟练运用框架进行网页的布局,第5章 网页页面布局,5.1 表格 5.2 表格布局 5.3 框架布局 本章小结,第5章 网页页面布局,5.1 表格,5.1.1插入表格 5.1.2添加内容 5.1.3 选择表格 5.1.4 设置表格属性 5.1.5 编辑表格的基本操作,在表格中横向为行，纵向为列。行列交叉部分就叫做单元格。单元格中的内容和边框之间的距离叫边距。单元格和单元格之间的距离叫间距。表格的边线

2、叫做边框。,（一）插入表格 1定位光标在要插入表格的位置，然后执行以下操作之一： 单击菜单栏中的“插入”|“表格”命令。 在“插入”栏的“常用”类别中，单击 “表格”按钮。 2打开表格对话框。,5.1.1 插入表格,5.1 表格,5.1.1 插入表格,（二）插入嵌套表格 1将光标定位在表格的一个单元格内。 2执行插入表格的操作，即可在表格内嵌套表格如图。,5.1.1 插入表格,将插入点定位在表格内，即可输入文本、图像、动画等网页元素。,5.1.2 添加内容,(一)选择整个表格 选择整个表格执行以下操作之一： 单击表格的左上角、右边或底部边缘的任意位置。 单击表格单元格，在菜单栏单击“修改”|“

3、表格”|“选择表格”命令。 (二)选择行或列 1鼠标指向行的左边缘或列的上边缘，光标变为 或 。 2单击鼠标则选择鼠标指向的行或列。 3拖动鼠标，则选择连续的多行或多列。 4按Ctrl同时单击鼠标，则可选择不连续的多行或多列。,5.1.3 选择表格,(三)选择单元格 1.选择单个单元格，请执行以下操作之一： 单击单元格，然后在文档窗口左下角的标签选择器中选择标签. 在单元格内双击鼠标则可选择该单元格。 在单元格内单击，然后按组合键Ctrl+A。 2选择连续的多个单元格可以执行以下操作之一： 单击第一个单元格，按住Shift键的同时单击另一个单元格，两个单元格之间的矩形区域内所有的单元格均被选中

4、。 在一个单元格中单击并拖动鼠标横向或纵向移动到其他一个单元格，然后松开鼠标则鼠标经过区域的单元格被选中。 3按Ctrl同时单击单元格则可选择不相邻的多个单元格。,5.1.3 选择表格,（一）表格属性 表格被选中之后，可以利用表格属性来设置或修改表格的属性。 （二）单元格属性 单元格被选中或光标定位在单元格中时，可以利用单元格属性，来设置或修改单元格的属性。,5.1.4 设置表格属性,(一)调整表格的大小： 1选择整个表格，在表格的边缘出现3个黑色控制点。 2执行以下操作： 用鼠标拖动这些控制点则可改变表格的大小。在表格“属性检查器”中重新设置“高度”与“宽度”值，改变表格的大小。 （二）调整

5、行高和列宽 1将鼠标移到要调整的行高或列宽的边框上，光标变为 或 。 2拖动鼠标即调整行高或列宽。,5.1.5 编辑表格的基本操作,（三）合并或折分单元格 1拆分单元格 （1）选择（或将光标定位在）要拆分的单元格。 （2）执行以下操作之一： 单击菜单栏中的“修改”|“表格”|“拆分单元格”命令。 在“属性检查器”中，单击“拆分单元格”的按钮 。 (3)打开拆分单元格对话框如图。 （4）在这可以选择拆分行还是拆分列，以及设置拆分的行数或列数。如设置拆分为“行”，行数为“2”。 （5）单击确定，单元格被拆分。,5.1.5 编辑表格的基本操作,2合并单元格 （1）选择需要进行合并的两个以上单元格。

6、（2）执行以下操作之一： 单击菜单栏“修改”|“表格”|“合并单元格”命令 在“属性检查器”中，单击“合并单元格”按钮 。 （3）选的单元格被合并。,5.1.5 编辑表格的基本操作,（四）插入和删除行或列 1插入单行或单列 在所选择的行、列或单元格的上面及左侧插入单行或单列，操作如下： （1）选择行、列或单元格。 （2）单击菜单栏中的“修改”|“表格”|“插入行”或“插入列”命令。 选择“插入列”命令：可以在所选列的左侧添加一列。 选择“插入行”命令：可以在所选行的上面添加一行。,5.1.5 编辑表格的基本操作,2插入多行或多列 （1）选择行、列或单元格。 （2）单击菜单栏中的“修改”|“表格

7、”|“插入行或列”的命令，打开“插入行或列”对话框。 （3）选择插入“列”或“行”，并设置数目，单击确定。,5.1.5 编辑表格的基本操作,3删除行或列 在表格中删除行或列的操作为： （1）选择要删除的行或列。 （2）执行以下操作之一： 单击菜单栏中的“修改”|“表格”|“删除行”或“删除列”命令。 单击菜单栏中的“编辑”|“清除”命令。 使用键盘上的“Delete”键。,5.1.5 编辑表格的基本操作,5.2 表格布局,5.2.1 布局视图 5.2.2 绘制布局表格和布局单元格 5.2.3 编辑布局表格和布局单元格,5.2 表格布局,（一）切换布局视图 1执行以下操作之一： 单击菜单栏中“视

8、图”|“表格视图”|“布局视图”命令。 在“插入”栏的“布局”类别中，单击“布局模式”按钮。 2打开“从布局模式开始”对话框,5.2.1 布局视图,3单击“确定”按钮，进入布局视图模式。 4单击“退出”按钮，或单击相应的其他视图按钮，退出布局视图。,5.2.1 布局视图,（二）布局工具按钮 在“插入栏”的“布局”类别中，有布局用的各种工具按钮。 从左到右依次为： “标准”：单击进入标准视图模式。 “扩展”：单击进入扩展表格模式。 “布局”：单击进入布局视图模式。 “ ”：用于绘制布局表格。 “ ”：用于绘制布局单元格。 “ ”：用于添加布局框架。 “ ”：用于导入表格数据。,5.2.1 布局视

9、图,（一）绘制布局表格 1切换到布局视图模式 2单击“绘制布局表格”按钮 ，鼠标指针变为“+”。 3在文档窗口中，按住鼠标左键并拖动，可以绘制出布局表格，表格的框线显示为绿色。 5要绘制多个布局表格，按住Ctrl键同时单击“绘制布局表格”按钮。 6每个布局表格都在顶端有标签，并在布局表格的底端或顶端显示表格的大小。,5.2.2 绘制布局表格和布局单元格,7单击“绘制布局表格”按钮，可以在布局表格内绘制嵌套的布局表格如图所示，嵌套的表格大小不能超过包含它的布局表格。,5.2.2 绘制布局表格和布局单元格,（二）绘制布局单元格 1切换到布局视图模式 2单击“绘制布局单元格”按钮 ，鼠标指针变为“+

10、” 3在布局表格中合适位置，按住鼠标左键并拖动，可以绘制出布局单元格，单元格的框线显示为蓝色，如图所示。 4要绘制多个单元格，可以在按住Ctrl键的同时单击“绘制布局单元格”按钮并绘制。,5.2.2 绘制布局表格和布局单元格,（一）移动布局表格和布局单元格 1单击布局表格标签，可以选中布局表格；单击单元格边框，可以选择布局单元格； 2用鼠标拖动布局表格或布局单元格到合适位置。 （二）调整布局表格和布局单元格大小 1选择要调整的布局表格和布局单元格。 2选择的表格或单元格四周会出现控制点，拖动控制点可以调整其大小。 （三）向单元格中添加内容 1将光标定位在要添加内容的单元格。 2插入文字和图像等

11、各种网页元素。,5.2.3 编辑布局表格和布局单元格,（四）删除布局表格或布局单元格 删除布局表格或布局单元格的操作为： 1选择要删除的布局表格和布局单元格。 2执行以下操作之一： 单击菜单栏中“编辑”|“清除”命令。 使用键盘上的“Delete”键。,5.2.3 编辑布局表格和布局单元格,（五）设置布局表格属性 1布局表格属性 2布局单元格属性,5.2.3 编辑布局表格和布局单元格,（四）利用表格制作垂直线和水平线 （1）在网页中插入一个无边框、无边距的表格 （2）定位光标在制作水平线的单元格内 （3）在“属性检查器”中，设置高度（或宽度）为“1”，为单元格添加背景颜色。 （4）单击 “文档

12、”工具栏中 的“拆分”按钮， 切换到“代码和设 计视图”，删除单 元格内的“”代码，如图。,5.2.3 编辑布局表格和布局单元格,（4）保存网页，在浏览器中预览网页，如图所示。,5.2.3 编辑布局表格和布局单元格,5.3 框架布局,5.3.1 建立框架 5.3.2 框架面板 5.3.3 设置框架的属性 5.3.4 保存框架 5.3.5 框架中的超链接,1定位光标在要插入框架集的窗口中。 2执行以下操作之一： 单击菜单栏中“插入”|“HTML”|“框架”命令，在子菜单中单击相应的框样式。 在“插入”栏的“布局” 类别中，单击框架按钮右 侧的下拉按钮，弹出下拉 菜单，单击相应的框架集 图标。建立

13、框架网页。,5.3.1 建立框架,（）打开框架面板 单击菜单栏中“窗口”|“框架”命令，打开框架面板。在面板中标识了每个框的名称。 （二）框架面板的基本操作： 1选择框架集：在“框架”面板中单击最外层的边框，使其出现粗黑边显示，则选中了框架集。 2选择框架：在“框架”面板中单击要选择的框架，使其出现细黑边显示，则选中了框架。,5.3.2框架面板,（一）设置框架集属性：选中框架集，打开框集属性 1边框选项设置 2框架集中框架大小设置 （二）设置框架属性 选择框架后（如选择左侧框架），打开框架属性,5.3.3 设置框架的属性,（一）保存框架集的操作： 1在框架面板中，选择中要保存的框架集。 2单击菜单栏中“文件”|“保存框架页”命令。 3打开“另存为”对话框，设置保存位置和文件名，单击“保存”按钮，保存了框架集网页。 （二）保存框架的操作： 1定位光标在要保存的框架内，或在框架面板中选择要保存的框架。 2单击菜单栏中“文件”|“保存框架”命令，打开另存为对话框。 3打开“另存为”对话框，设置保存位置和文件名，单击“保存”按钮，保存了框架。,5.3