网页设计与制作项目实训教程 教学课件 ppt 作者 严加琼 曾金发 项目8

1、项目8 使用表格布局网页,项目描述,知识储备,实践向导,能力拓展,退   出,项目小结,项目描述,表格是一种特殊的元素，不但可以用来设置各种数据，还可以作为页面布局元素来使用。在作为页面布局元素使用时，表格可以有助于用户有条理地组织网页中的各种对象。本项目运用表格知识制作“庐山风景欣赏”网页，其效果如图 。,项目描述,图8-1 “庐山风景欣赏” 页面效果图,8.2 知识储备,8.2.1 认识表格 8.2.2 表格的基本操作 8.2.3 设置表格及单元格的属性 8.2.4 调整表格的结构 8.2.5 填加表格数据 8.2.6 导入外部表格数据文件 8.2.7 嵌套表格,8.2知识储备,8.2.1 认识表格 1.表格的组成元素 一张表格横向叫行，纵向叫列，行列交叉部分就叫单元格，如图8-2所示。单元格中的内容和边框之间的距离叫边距。单元格和单元格之间的距离叫间距。整张表格的边缘叫边框。,图8-2 表格的基本组成部分,8.2知识储备,8.2.2 表格的基本操作 1.插入表 插入表格的具体操作步骤： 将光标置于要插入表格的位置。 单击菜单“插入”“表格”命令,弹出“表格”对话框。如图

2、8-3所示。,图8-3 表格对话框,8.2知识储备,设置表格大小为“5行3列”、“表格宽度”为100%，“边框粗细”为“3”像素，然后单击“确定”按钮。此时，在Dreamweaver CS5中显示了5行3列的表格，如图8-4所示。 在插入表格之后，就可以像在Word中一样输入表格内容了。,图8-4 插入表格,8.2知识储备,2.选择表格和表格元素 表格元素包括行、列和单元格三种，他们的选取方法各不相同。 (1)选择表格 要选择表格，可执行以下任意一种操作： 将鼠标指针移到表格的左上角或表格的顶、底边缘边框上，当指针形状变成形状时单击。 在表格中的任意单元格内单击，然后单击文档窗口左下角标签选择器中的标签。 单击表格中的任意单元格，然后选择菜单“修改”“表格”“选择表格”命令。 在表格上右击鼠标，从弹出的快捷菜单中选择“表格”“选择表格”命令。,8.2知识储备,表格被选定后，表格的下边缘和右边缘会出现尺寸控点，如图8-5所示。,图8-5 表格的选定状态,8.2知识储备,(2)选择表格元素 可以分别选择表格中的行、列、单元格，一次可以选择一行、一列、一个单元格，也可以同时选择多行、多列或多

3、个单元格。 选择行：将指针指向行的左边缘，当指针形状变为选择箭头（右指的箭头）时单击，可选择当前行；上下拖动指针可选择多行。 选择列：将指针指向行的上边缘，当指针形状变为选择箭头（下指的箭头）时单击，可选择当前列；左右拖动指针可选择多列。,8.2知识储备, 选择单元格：在所需单元格中单击，然后单击文档窗口左下角标签选择器中的标签。 选择连续的单元格区域：从一个单元格拖到另一个单元格，或者先单击一个单元格，然后按住shift键单击另一个单元格。两个单元格定义的直线或矩形区域中的所有单元格都将被选中。 选择不相邻的单元格：在按住Ctrl键的同时单击要选择的单元格、行或列。如果按住Ctrl键，单击尚未选中的单元格、行或列，则会将其选中。如果它已经被选中，再次单击则会将其从选择中删除。,8.2知识储备,8.2.3 设置表格及单元格的属性 1.设置表格属性 格式化表格的大部分操作都可以通过表格属性面板完成。选择表格后，属性面板上会显示当前表格的相关属性，如图8-6所示。,图8-6 表格属性面板,8.2知识储备,2.设置单元格、行或列属性 当选择单元格或者一行、一列时，属性面板中将对应显示单元格或

4、者行、列的属性，在行、列、单元格的属性面板中可以分别设置行、列或单元格的宽、高、背景颜色以及单元格内容的对齐方式等属性，如图8-7所示。,图8-7 单元格属性面板,8.2知识储备,8.2.4 调整表格的结构 1.调整表格和单元格的大小 当调整整个表格的大小时，表格中的所有单元格按比例更改大小。选中插入的表格，在出现三个控制点后，将鼠标移动到控制点上，鼠标形状变成双向箭头时，按鼠标左键并拖动即可改变表格的大小。,8.2知识储备,将光标置于要设置大小的单元格中，用鼠标拖动列或行的边框来调整列宽或行高，如图8-8所示。,图8-8 调整单元格行高,8.2知识储备,2.添加或删除行或列 在网页文档中添加行或列可以用以下方法： (1)将光标置于相应的单元格中，选择菜单“修改”“表格”“插入行”命令，即可插入一行。 (2)将光标置于相应的位置，选择菜单“修改”“表格”“插入列”命令，即可在相应的位置插入一列。,8.2知识储备,(3)将光标置于相应的位置，选择菜单“修改”“表格”“插入行或列”命令，弹出“插入行或列”对话框，在对话框中进行相应的设置，如图8-9所示。单击“确定”按钮，即可在相应位置插入

5、行或列。,图8-9 插入行或列对话框,8.2知识储备,在网页文档中删除行或列可以用以下方法： (1)将光标置于要删除行的任意一个单元格，选择菜单“修改”“表格”“删除行”命令就可以删除当前行。 (2)将光标置于要删除列中的任意一个单元格，选择菜单“修改”“表格”“删除列”命令就可以删除当前列。 (3)选中要删除的行或列，选择菜单“编辑”“清除”命令，即可删除行或列。 (4)选中要删除的行或列，按Delete键或按BackSpace键也可以删除行或列。,8.2知识储备,3.拆分单元格 在使用表格的过程中，有时需要拆分单元格以达到所需的效果。拆分单元格就是将选中的表格单元格拆分为多行或多列，有以下方法： (1)将光标置于要拆分的单元格中，选择菜单“修改”“表格”“拆分单元格”命令，弹出“拆分单元格”对话框，如图8-10所示。设置完成后，单击“确定”按钮。,图8-10 拆分单元格对话框,8.2知识储备,(2)将光标置于要的拆分的单元格中，单击鼠标右键，在弹出菜单中选择“表格”“拆分单元格”命令，弹出“拆分单元格”对话框，然后进行相应的设置。 (3)单击“属性”面板中的“拆分单元格”按钮，弹出

6、“拆分单元格”对话框，然后进行相应的设置。,8.2知识储备,4.合并单元格 合并单元格就是将选中单元格的内容合并到一个单元格，合并单元格有以下方法： (1) 选中要合并的单元格，然后选择菜单“修改”“表格”“合并单元格”命令，将多个单元格合并成一个，如图8-11所示。,图8-11合并单元格,8.2知识储备,(2)选中要合并的单元格，在“属性”面板中单击“合并单元格”按钮，即可合并单元格。 (3)选中要合并的单元格，单击鼠标右键，在弹出菜单中选择“表格”“合并单元格”，可合并单元格。,8.2知识储备,5.剪切、复制和粘贴表格 剪切、复制和粘贴表格步骤如下： 选择要剪切的表格，选择菜单“编辑”“剪切”或菜单“编辑”“拷贝”命令。 光标置于要粘贴表格的位置，选择菜单“编辑”“粘贴”命令，即可复制或者移动表格。,8.2知识储备,8.2.5 添加表格数据 表格中的每一个单元格都相当于一个独立的小文档，在要添加内容的单元格中单击，即可在其中输入文字、插入图像或者其他网页元素。在单元格中添加和编辑数据的方法与在普通文档中相同。 编辑完一个单元格的数据后，用户可执行以下任意操作移动插入点，以便编辑下一

7、个单元格。在表格中跳转的方法如下： (1)跳转至下一个单元格：按Tab键。 (2)跳转至上一个单元格：按Shift+Tab组合键。 (3)向上、向下、向左、向右移动插入点：按上、下、左、右箭头键。 (4)在表格下方添加一行：在表格的最后一个单元格中按Tab键。,8.2知识储备,8.2.6 导入外部表格数据文件 如果在其他应用程序（如写字板）中创建了以分隔文本的格式保存的表格式数据文件（其中的项以制表符、逗号、冒号、分号或其他分隔符隔开），可以直接将其导入到Dreamweaver CS5中。导入的表格数据文件在网页中显示为表格的格式。,8.2知识储备,要导入数据文件，可选择“文件”“导入”“表格式数据”命令或选择“插入”“表格对象”“导入表格式数据”命令，打开如图8-12所示的“导入表格式数据”对话框，进行相关设置后单击“确定”按钮，即可将所选文件中的数据以格式的形式导入到Dreamweaver CS5文档中。,图8-12 “导入表格式数据”对话框,8.2知识储备,8.2.7 嵌套表格 嵌套表格是在一个表格的单元格中插入另一个表格，用户可以像对其他任何表格一样对嵌套表格进行格式设置，但是

8、宽度受其所在单元格的宽度限制。 嵌套表格的具体步骤如下： 选择要嵌套表格的单元格，在“插入”面板的“常用”分类中单击“表格”按钮，如图8-13所示。,8.2知识储备,在“表格”对话框中设置要嵌套的表格，然后单击“确定”按钮。即可在单元格中插入嵌套表格。,图8-13 “插入”面板,8.3 实践向导,任务8-1 制作”庐山风景欣赏”网页，效果如图8-1所示。 具体操作步骤如下： （1）启动Dreamweaver CS5,单击菜单“文件” “新建”命令，打开“新建文档”对话框，选择“空白页” “HTML” “”选项，单击“确定”按钮，创建一个网页文档，并保存文件。,8.3 实践向导,（2）单击菜单“插入” “表格”命令，弹出“表格”对话框，插入一个4行3列的表格，设置表格宽度为870像素，边框粗细为0像素，单击“确定”按钮。然后在“属性”面板中设置其对齐方式为“居中对齐” 。 （3）将光标置于表格中，选中第一行，合并单元格。 （4）在第一行单元格内输入文本，设置单元格高为71像素，文本格式为“标题1”，水平居中对齐，背景颜色为“#FFCC33”。,8.3 实践向导,（5）鼠标置于第二行第一列单元格内，设置单元格水平居中对齐，宽为290像素，高位205像素，背景颜色为”#FFCC99” 。 （6）设置完单元格属性后，在单元格内插入图像和输入文本。 （7）重复步骤（5）（6），在第二行和第三行的单元格内插入图片和文本。 （7）将光标置于表格第四行中，合并单元格，设置高度为100像素，背景颜色为“#FFCCFF”，输入文本。,8.3 实践向导,（8）选择“文件” “保存全部”命令，保存所有文件。按【F12】预览，效果如图所示。,8.4 能力拓展,利用表格布局页面。在表格单元格中适当填充内容，完成页面的效果如图8-20所示。通过该网页的制作，掌握表格的插入、基本属性的设置、利用表格制作网页。,8.4 能力拓展,图8-20 “旅游网”页面效果图,8.5 项目小结,本项目介绍了创建和使用表格的方法，包括表格的创建、编辑、嵌套、表格属性的设置，以及使用表格布局页面等内容。通过本项目的学习，读者应掌握表格的基本操作方法，并且能够利用表格布局网页，有条理的组织网页中的各种对象。,

《网页设计与制作项目实训教程 教学课件 ppt 作者 严加琼 曾金发 项目8》由会员E****分享，可在线阅读，更多相关《网页设计与制作项目实训教程 教学课件 ppt 作者 严加琼 曾金发 项目8》请在金锄头文库上搜索。