《网页制作》课件——项目六表格──布局商务网页.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,Dreamweaver 8中文版,网页制作基础,项目六 表格布局商务网页,任务一,使用表格布局页眉,任务二 使用嵌套表格布局主体页面,任务三 使用表格布局页脚,实 训 使用表格布局“馨馨水果网”页面,表格是网页排版的灵魂，是页面布局的重要方法，它可以将网页中的文本、图像等内容有效地组合成符合设计效果的页面本项目将以商务网页为例，介绍使用表格进行网页布局的基本方法在项目中，将使用表格分别对页眉、主体和页脚进行布局任务一 使用表格布局页眉,需要掌握的内容主要有：,1,、表格的概念,2,、插入表格,3,、选择表格,4,、设置表格属性,5,、设置单元格属性,在网页制作中，表格的作用主要体现在两个方面，一个是组织数据，如各种数据表，另一个是布局网页，即把网页的各种元素通过表格进行有序布局一个完整的表格包括行、列、单元格、单元格间距、单元格边距（填充）、表格边框和单元格边框表格边框可以设置粗细和颜色等属性，单元格边框粗细不可设置另外，表格的,HTML,标签是“,”,，行的,HTML,标签是“,”,，单元格的,HTML,标签是“,”,。

一个包括,n,列表格的宽度,2,表格边框（,n,1,）,单元格间距,2n,单元格边距,n,单元格宽度,+2n,单元格边框宽度（,1,个像素）掌握这个公式是非常有用的，在运用表格布局时，精确地定位网页就是通过设置单元格的宽度或者高度来实现的1,、表格的概念,在主菜单中选择,【,插入,】,【,表格,】,命令，或在,【,插入,】,【,常用,】,面板中单击 （表格）按钮打开,【,表格,】,对话框进行设置插入即可2,、插入表格,选择表格的方法如下：,（,1,）单击表格左上角或者表格中任何一个单元格的边框线2,）将光标移至欲选择的表格内，单击文档窗口左下角对应的“,table,”标签3,）将光标置于表格的边框上，当光标呈上下箭头形状时单击鼠标4,）将光标置于表格内，在主菜单中选择,【,修改,】,【,表格,】,【,选择表格,】,命令或在鼠标右键快捷菜单中选择,【,表格,】,【,选择表格,】,命令3,、选择表格,选中表格，在,【,属性,】,面板中将显示表格的各项属性，同时也可以修改这些属性设置4,、设置表格属性,将光标置于单元格内，在单元格,【,属性,】,面板设置其属性5,、设置单元格属性,任务二 使用嵌套表格布局主体页面,（一）布局左栏内容,（二）布局右栏内容,（一）,布局左栏内容,需要掌握的内容主要有：,1,、在表格外插入表格,2,、插入嵌套表格,3,、在表格中增加行或列,4,、选择单元格,1,、在表格外插入表格,用鼠标选中整个表格或者将光标置于表格的最右侧，然后选择,【,插入,】,【,表格,】,命令插入表格，即可在上一个表格的下面插入表格。

2,、插入嵌套表格,所谓嵌套表格，就是在表格的单元格中再插入表格将光标置于单元格内，在主菜单中选择,【,插入,】/【,表格,】,命令将在单元格中插入一个嵌套表格嵌套表格嵌套的层数不宜过多，以,3-4,层为宜在使用表格进行网页布局时，最好不要将所有内容放在一个表格中，因为在浏览器端只有整个表格的内容全部下载完后才显示，内容过多的表格必然导致用户等待的时间太长，而把内容分散到多个表格必然解决这个问题3,、在表格中增加行或列,在表格中增加行或列的方法如下：,（,1,）在主菜单中选择,【,修改,】,【,表格,】,【,插入行,】,或,【,插入列,】,命令或在鼠标右键快捷菜单中选择,【,表格,】,【,插入行,】,或,【,插入列,】,命令将在光标所在行的上面插入一行或在列的左侧插入一列2,）在主菜单中选择,【,修改,】,【,表格,】,【,插入行或列,】,命令或在鼠标右键快捷菜单中选择,【,表格,】,【,插入行或列,】,命令，可以通过,【,插入行或列,】,对话框设置是插入行还是列及其行数和位置3,）在主菜单中选择,【,插入,】,【,表格对象,】,【,在上面插入行,】,、,【,在下面插入行,】,、,【,在左边插入列,】,、,【,在右边插入列,】,命令插入行或列。

4,、选择单元格,选择相邻单元格的方法如下1,）在开始的单元格中按住鼠标左键并拖曳到最后的单元格2,）将光标置于开始的单元格内，按住,Shift,键不放，单击最后的单元格选择不相邻的单元格的方法如下1,）按住,Ctrl,键，单击欲选择的单元格2,）在已选择的连续单元格中按住,Ctrl,键，单击想取消选择的单元格将其去除选择单个单元格的方法如下1,）先将光标置于单元格内，按住,Ctrl,键，并单击单元格2,）将光标置于单元格内，然后单击文档窗口左下角的“,”,标签需要掌握的内容主要有：,1,、选择表格的行、列,2,、合并单元格,3,、拆分单元格,4,、删除表格的行或列,（二）布局右栏内容,选择表格的行、列的方法如下：,（,1,）当鼠标位于欲选择行首或者列顶时，鼠标变成黑色箭头，这时单击鼠标左键，便可选择行或者列2,）按住鼠标左键从左至右或者从上至下拖曳，将欲选择的行或列选择3,）还有一种方法可以选择行，将光标移到欲选择的行中，然后单击文档窗口左下角的“,”,标签，这种方法只能用来选择行，而不能用来选择列1,、选择表格的行、列,选择表格不相邻的行、列的方法如下：,（,1,）按住,Ctrl,键，把鼠标置于欲选择的行首或者列顶，当鼠标变成黑色箭头时，依次单击鼠标左键。

2,）按住,Ctrl,键，在已选择的连续行或列中单击想取消的行或列将其去除合并单元格是针对多个单元格而言的，而且这些单元格必须是连续的一个矩形合并单元格首先需要选中这些单元格，然后执行以下任一操作即可1,）单击,【,属性,】,面板中的 （合并单元格）按钮2,）在主菜单中选择,【,修改,】/【,表格,】/【,合并单元格,】,命令3,）在鼠标右键快捷菜单中选择,【,表格,】/【,合并单元格,】,命令2,、合并单元格,拆分单元格是针对单个单元格而言的，可看成是合并单元格的逆向操作拆分单元格首先需要将光标置于该单元格内，然后执行以下任一操作1,）单击,【,属性,】,面板中的 （拆分）按钮2,）在主菜单中选择,【,修改,】/【,表格,】/【,拆分单元格,】,命令3,）在鼠标右键快捷菜单中选择,【,表格,】/【,拆分单元格,】,命令3,、拆分单元格,无论使用哪种方法拆分单元格，最终都将弹出,【,拆分单元格,】,对话框在,【,拆分单元格,】,对话框中，,【,把单元格拆分,】,选项后面有,【,行,】,和,【,列,】,两个选项，这表明可以将单元格纵向拆分或者横向拆分如果要删除表格的行或列，可以先将光标置于要删除的行或列中，或者将要删除的行或列选中，然后在主菜单中选择,【,修改,】/【,表格,】/【,删除行,】,或,【,删除列,】,命令或在鼠标右键快捷菜单选择,【,表格,】/【,删除行,】,或,【,删除列,】,命令即可。

其实，最简便的方法是选定要删除的行或列，然后按下,Delete,键直接删除如果要删除表格的内容而不想删除表格，可以选择一个或多个单元格，但不能选择整行、整列或者整个表格只有这样，被选择的行、列或者单元格中的内容被删除后，表格的结构或属性才不会发生变化4,、删除表格的行或列,任务三 使用表格布局页脚,需要掌握的内容主要有：,1,、使用表格模板格式化表格,2,、表格排序,3,、表格式数据的导入或导出,1,、使用表格模板格式化表格,选中要格式化的表格，然后在主菜单中选择,【,命令,】/【,格式化表格,】,命令打开,【,格式化表格,】,对话框，进行参数设置即可2,、表格排序,表格还可以根据表格列中的数据来进行排序，主要是针对具有数据的表格方法是，首先选中表格，然后在主菜单中选择,【,命令,】/【,排序表格,】,命令，打开,【,排序表格,】,对话框，进行参数设置即可3,、表格式数据的导入或导出,在,Dreamweaver,中，还可以将一些具有制表符、逗号、句号、分号或其他分隔符的已经格式化的表格数据导入到网页文档中，也可以将网页中的表格导出为文本文件保存，这对于需要在网页中放置大量格式化数据的情况提供了更加快捷、方便的方法。

方法是，在主菜单中选择,【,文件,】/【,导入,】/【Excel,文档,】,命令或,【,表格式数据,】,命令导入表格，选择,【,文件,】/【,导出,】/【,表格,】,命令导出表格实训 使用表格布局“馨馨水果网”页面,本项目主要介绍了使用表格布局网页的基本方法，本实训将让读者进一步巩固所学的基本知识要求：把“项目实训,素材”文件夹下的内容复制到站点根文件夹下，然后使用表格布局如图所示网页制作“送孟浩然之广陵”网页,小结,本项目介绍了使用表格对网页进行布局的基本方法，详细阐述了插入表格、编辑表格、表格属性设置、单元格属性设置等基本内容熟练掌握表格的各种操作和属性设置会给网页制作带来极大的方便，是需要重点学习和掌握的内容之一在本项目中，最外层表格的宽度是用“像素”来定制的，这样网页文档不会随着浏览器分辨率的改变而发生变化插入嵌套表格可以区分不同的栏目内容，使各个栏目相互独立，但嵌套表格最好不要层次太多，否则会加长网页的打开时间在没有设置,CSS,样式的情况下，在一个文档中表格不能在水平方向并排，而只能在垂直方向按顺序排列。