《网站制作与编辑5》由会员分享，可在线阅读，更多相关《网站制作与编辑5（38页珍藏版）》请在金锄头文库上搜索。
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执行以下操作：用鼠标拖动这些控制点则可改变表格的大小。 在表格“属性检查器”中重新设置“高度”与“宽度”值，改变表格的大小。（二）调整行高和列宽1将鼠标移到要调整的行高或列宽的边框上，光标变为 或
5、。2拖动鼠标即调整行高或列宽。,5.1.5 编辑表格的基本操作,（三）合并或折分单元格1拆分单元格（1）选择（或将光标定位在）要拆分的单元格。（2）执行以下操作之一：单击菜单栏中的“修改”|“表格”|“拆分单元格”命令。在“属性检查器”中，单击“拆分单元格”的按钮 。(3)打开拆分单元格对话框如图。（4）在这可以选择拆分行还是拆分列，以及设置拆分的行数或列数。如设置拆分为“行”，行数为“2”。（5）单击确定，单元格被拆分。,5.1.5 编辑表格的基本操作,2合并单元格（1）选择需要进行合并的两个以上单元格。（2）执行以下操作之一：单击菜单栏“修改”|“表格”|“合并单元格”命令在“属性检查器”
6、中，单击“合并单元格”按钮 。（3）选的单元格被合并。,5.1.5 编辑表格的基本操作,（四）插入和删除行或列1插入单行或单列在所选择的行、列或单元格的上面及左侧插入单行或单列，操作如下：（1）选择行、列或单元格。（2）单击菜单栏中的“修改”|“表格”|“插入行”或“插入列”命令。选择“插入列”命令：可以在所选列的左侧添加一列。选择“插入行”命令：可以在所选行的上面添加一行。,5.1.5 编辑表格的基本操作,2插入多行或多列（1）选择行、列或单元格。（2）单击菜单栏中的“修改”|“表格”|“插入行或列”的命令，打开“插入行或列”对话框。（3）选择插入“列”或“行”，并设置数目，单击确定。,5.
7、1.5 编辑表格的基本操作,3删除行或列在表格中删除行或列的操作为：（1）选择要删除的行或列。（2）执行以下操作之一：单击菜单栏中的“修改”|“表格”|“删除行”或“删除列”命令。单击菜单栏中的“编辑”|“清除”命令。使用键盘上的“Delete”键。,5.1.5 编辑表格的基本操作,5.2 表格布局,5.2.1 布局视图 5.2.2 绘制布局表格和布局单元格 5.2.3 编辑布局表格和布局单元格,5.2 表格布局,（一）切换布局视图1执行以下操作之一：单击菜单栏中“视图”|“表格视图”|“布局视图”命令。在“插入”栏的“布局”类别中，单击“布局模式”按钮。2打开“从布局模式开始”对话框,5.2
8、.1 布局视图,3单击“确定”按钮，进入布局视图模式。4单击“退出”按钮，或单击相应的其他视图按钮，退出布局视图。,5.2.1 布局视图,（二）布局工具按钮在“插入栏”的“布局”类别中，有布局用的各种工具按钮。从左到右依次为：“标准”：单击进入标准视图模式。“扩展”：单击进入扩展表格模式。“布局”：单击进入布局视图模式。“ ”：用于绘制布局表格。“ ”：用于绘制布局单元格。“ ”：用于添加布局框架。“ ”：用于导入表格数据。,5.2.1 布局视图,（一）绘制布局表格1切换到布局视图模式2单击“绘制布局表格”按钮 ，鼠标指针变为“+”。3在文档窗口中，按住鼠标左键并拖动，可以绘制出布局表格，表格
9、的框线显示为绿色。5要绘制多个布局表格， 按住Ctrl键同时单击“绘制 布局表格”按钮。6每个布局表格都在顶端 有标签，并在布局表格的底 端或顶端显示表格的大小。,5.2.2 绘制布局表格和布局单元格,7单击“绘制布局表格”按钮，可以在布局表格内绘制嵌套的布局表格如图所示，嵌套的表格大小不能超过包含它的布局表格。,5.2.2 绘制布局表格和布局单元格,（二）绘制布局单元格1切换到布局视图模式2单击“绘制布局单元格”按钮 ，鼠标指针变为“+”3在布局表格中合适位置， 按住鼠标左键并拖动，可以绘 制出布局单元格，单元格的框 线显示为蓝色，如图所示。4要绘制多个单元格， 可以在按住Ctrl键的同时单
10、击 “绘制布局单元格”按钮并绘制。,5.2.2 绘制布局表格和布局单元格,（一）移动布局表格和布局单元格1单击布局表格标签，可以选中布局表格；单击单元格边框，可以选择布局单元格；2用鼠标拖动布局表格或布局单元格到合适位置。（二）调整布局表格和布局单元格大小1选择要调整的布局表格和布局单元格。2选择的表格或单元格四周会出现控制点，拖动控制点可以调整其大小。（三）向单元格中添加内容1将光标定位在要添加内容的单元格。2插入文字和图像等各种网页元素。,5.2.3 编辑布局表格和布局单元格,（四）删除布局表格或布局单元格删除布局表格或布局单元格的操作为：1选择要删除的布局表格和布局单元格。2执行以下操作
11、之一：单击菜单栏中“编辑”|“清除”命令。使用键盘上的“Delete”键。,5.2.3 编辑布局表格和布局单元格,（五）设置布局表格属性1布局表格属性2布局单元格属性,5.2.3 编辑布局表格和布局单元格,（四）利用表格制作垂直线和水平线（1）在网页中插入一个无边框、无边距的表格（2）定位光标在制作水平线的单元格内（3）在“属性检查器”中，设置高度（或宽度）为“1”，为单元格添加背景颜色。（4）单击 “文档”工具栏中 的“拆分”按钮， 切换到“代码和设 计视图”，删除单 元格内的“”代码，如图。,5.2.3 编辑布局表格和布局单元格,（4）保存网页，在浏览器中预览网页，如图所示。,5.2.3
12、编辑布局表格和布局单元格,5.3 框架布局,5.3.1 建立框架 5.3.2 框架面板 5.3.3 设置框架的属性 5.3.4 保存框架 5.3.5 框架中的超链接,1定位光标在要插入框架集的窗口中。2执行以下操作之一：单击菜单栏中“插入”|“HTML”|“框架”命令，在子菜单中单击相应的框样式。在“插入”栏的“布局” 类别中，单击框架按钮右 侧的下拉按钮，弹出下拉 菜单，单击相应的框架集 图标。建立框架网页。,5.3.1 建立框架,（）打开框架面板单击菜单栏中“窗口”|“框架”命令，打开框架面板。在面板中标识了每个框的名称。（二）框架面板的基本操作：1选择框架集：在“框架”面板中单击最外层的
13、边框，使其出现粗黑边显示，则选中了框架集。2选择框架：在“框架”面板中单击要选择的框架，使其出现细黑边显示，则选中了框架。,5.3.2框架面板,（一）设置框架集属性：选中框架集，打开框集属性1边框选项设置2框架集中框架大小设置（二）设置框架属性选择框架后（如选择左侧框架），打开框架属性,5.3.3 设置框架的属性,（一）保存框架集的操作：1在框架面板中，选择中要保存的框架集。2单击菜单栏中“文件”|“保存框架页”命令。3打开“另存为”对话框，设置保存位置和文件名，单击“保存”按钮，保存了框架集网页。（二）保存框架的操作：1定位光标在要保存的框架内，或在框架面板中选择要保存的框架。2单击菜单栏中“文件”|“保存框架”命令，打开另存为对话框。3打开“另存为”对话框，设置保存位置和文件名，单击“保存”按钮，保存了框架。,5.3.4 保存框架,如图中的网页为“上方及左侧嵌套”框架，左侧设置为导航条，右侧为链接打开的目标窗口。,5.3.5 框架中的超链接,在框架中设置超链接的操作为：1选择超链接的载体，如左侧框架的“电影城”图像。2在“属性检查器”中，“链接”项中设置超链接为：dianying.html。3在“属性检查器”中的“目标”下拉菜单中选择目标框架或窗口，选择“mainFrame”如图。,5.3.5 框架中的超链接,本章小结,插入表格,
