网页设计与制作第3章表格的使用

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,表格的使用,学习目标：,本章主要介绍表格的操作，使用表格布局网页。,要求:,1.熟练掌握建立表格、编辑表格、设置表格属性根本操作。,2.了解如何用表格来布局网页元素;,3.掌握表格布局的两种模式：标准模式和布局模式。并,能熟练运用这两种模式布局网页。,第3章 表格的使用,3.1 创立表格,3.2 编辑表格,3.3 布局视图模式,3.4 用表格布局网页,3.1 创立表格,表格在网页中是一种用途广泛的工具。它可以有序地排列数据，更重要的是可以精确定位文本、图像及其他网页元素。表格是由行和列组成.,3.1 创立表格,单元格：由行和列相交所产生的区域。,单元格填充：单元格中的内容与单元格边框之间的距离。,单元格间距：单元格与单元格之间的空间大小。,3.1 创立表格,3.1.1 建立表格,建立表格的方法有以下几种，可任选一种。,将光标定位，单击,【,常用,】,工具栏中的,【,表格,】,按钮,;,将,【,常用,】,工具栏中的,【,表格,】,按钮拖到页面相应的位置。,将光标定位，选择主菜单,【,插入,】,/,【,表格,】,命令。,3.1 创立表格,3.1.2 在表格中添加内容,表格建立好后，就可以向表格中添加内容了。例如文本、图像、表格等网页元素。文本可直接输入，随着文本的增多，表格会自动增高。,在单元格中插入图像同文档插入图像方法相同，如果单元格的尺寸小于图像的尺寸，那么图像插入后，单元格会自动增高或增宽。,如果在表格的单元格继续插入表格，就构成了嵌套表格，内嵌表格可以将一个单元格分成许多行和列。内嵌表格越多，浏览器所花费的下载时间越长，因此一般内嵌的表格最多不超过3 层。,3.2 编辑表格,表格建立好，就可以对它进行编辑。编辑表格要先选择表格对象。表格对象的选择包括选择行、选择列、选择单元格、选择整个表格。,3.2 编辑表格,3.2.1 选择表格对象,3.2.2 设置表格属性,3.2.3 设置行、列与单元格属性,3.2.4 增加、删除行或列,3.2.5 表格的快速格式化,3.2.6 创立细线表格,3.2.7 表格的其他操作,3.2.1 选择表格对象,1选择整个表格,有多种方法，这里介绍两种:,单击表格的边框线，选定表格,将光标移到要选择的表格内，单击状态栏的,“标签。,2选择行,将鼠标指针置于表格行最左侧，会变为指向右侧的粗黑箭头，单击即选中此行。选中后上下拖动鼠标，可选中多行。,将光标移到要选择的行中，然后单击状态栏的“标签，可选择此行。,3.2.1 选择表格对象,3选择列,将鼠标指针置于表格列最上方，会变为指向下侧的粗黑箭头，单击即选中此行。选中后左右拖动鼠标，可选中多列。,3.2.1 选择表格对象,4选择单元格,只要在想选择的单元格内单击，即选择了该单元格。状态栏上的标签处于选中的状态，,3.2.1 选择表格对象,5选择不相邻的单元格、行或列,按住Ctrl键，依次单击，可选中不相邻的单元格、行或列。,在已选择的连续单元格、行或列中按住Ctrl键，然后单击不需选中的单元格、行或列。,3.2.1 选择表格对象,3.2.2 设置表格属性,【表格的ID】：如果要在网页中使用JavaScript语言来控制表格，就需 要为表格的取名。,【行和列】：设置表格的行数和列数，这两个值必须给定。重新设置行和列，可以增加或减少表格行数或列数。,【宽和高】：设定表格的宽度和高度。单位可以是像素或百分比。表格的宽度值必须给定。而高度值可以不设定，由实际内容来决定表格的高度。通过设置表格的宽度和高度可以改变表格的大小。当然也可以拖动边框线来改变表格的大小，但这种方法不准确。,【填充】：设定单元格内容与边距之间的距离。对应表格的属性“cellpadding。,【间距】：单元格与单元格之间的距离。对应表格的属性“cellspacing。,假设不指定填充和间距的值，那么多数浏览器按填充为1、间距为2来显示表格。,3.2.2 设置表格属性,【对齐】：设定表格的对齐方式，有4 个选项：【默认】、【居中对齐】、【左对齐】、【右对齐】。选择【默认】选项，那么按左对齐显示。,【边框】：设定表格边框的宽度，单位为像素。绝大多数浏览器以三维线条显示表格，假设设值为0，表示没有边框。可以在编辑状态下选择【查看】/【可视化助理】/【表格边框】命令，显示表格的虚线框。【背景颜色】：设置表格的背景颜色。,【背景图像】：设置表格的背景图像。,【边框颜色】：设置表格的边框颜色。,和按钮：去除行高和列宽。,和按钮：根椐当前值，把列宽转换为像素值和百分比。,和按钮：根椐当前值，把行高转换为像素值和百分比。,3.2.3 设置行、列与单元格属性,选定表格的行、列或单元格，【属性】面板显示的参数根本是相同。如图3-5所示。通过【属性】面板可以重新设置所选对象。,3.2.4 增加、删除行或列,增加、删除表格的行数或列数，除了可以通过【属性】面板重新定义表格的行数、列数这种方法外，还可以通过菜单命令来实现。步骤：,将光标定位于要插入新行列的单元格。,要增加一行，选择菜单【修改】/【表格】/【插入行】命令，或单击右键，选择快捷菜单中的【表格】/【插入行】命令。那么在光标所在单元格的上面增加了一行。,要增加一列，选择菜单【修改】/【表格】/【插入列】命令，或单击右键，选择快捷菜单中的【表格】/【插入列】命令。那么在光标所在单元格的左侧增加了一列。,要增加多行或多列，选择菜单【修改】/【表格】/【插入行或列】命令，弹出【插入行或列】对话框，如图3-7所示。进行选择设置，单击【确定】按钮，可完成插入操作。,删除行、列也是先将光标定位于要删除的行或列中，然后选择菜单【修改】/【删除行】或【删除列】命令；或单击右键，选择快捷菜单中的【表格】/【删除行】或【删除列】命令，将行或列删除。,3.2.5 表格的快速格式化,除了可以通过【属性】面板对表格格式化外，在Dreamweaver系统中还提供了十几种表格模板来快速格式化表格。另外，这些模板也不是固定不变，可通过设置模板参数，调整表格外观。步骤：,选定表格，选择菜单【命令】/【格式化表格】命令，弹出【格式化表格】对话框。如图3-8所示。,3.2.5 表格的快速格式化,3.2.5 表格的快速格式化,在列表框中选定一种格式。,可以对选项进行设置：,【行颜色】：包括3个选项，用于定义表格中每一行的颜色。,第一种：为表格中的行设置一种颜色。,第二种：为表格中的行设置另一种颜色。,交错：两种行颜色交替出现的方式，共有【不要交错】、【每一行】、【每二行】、【每三行】、【每四行】5个选项。,【第一行】：包括4个选项，用于设置表格顶部第一行的各项属性参数。,对齐：其下拉列表中包括4个选项：【无】、【左对齐】、【居中对齐】、【左对齐】。,文字样式：其下拉列表中包括4个选项：【常规】、【粗体】、【斜体】、【加粗斜体】。,背景色和文本颜色：设置第一行的背景色和文本颜色。,【最左列】：用于设置表格左侧第1列的各项属性参数。有2个选项：【对齐】、【文字样式】。设置方法同上。,【边框】：用于设置表格的边框宽度，以像素为单位。,【将所有属性套用至TD标注而不是TR标签】：在HTML标签中，“表示表格的行，“表示数据单元格。假设要将上述设置用于而不是，那么勾选该选项。,单击【确定】按钮，完成表格的格式化设置。,3.2.6 创立细线表格,假设设置表格边框为“1，那么在浏览器中呈示的线条实际为2像素，要制作细线表格，可以使用CSS样式表来定义，也可以运用表格的属性参数来进行设置。我们先介绍后一种方法，具体步骤如下：,在Dreamweaver中按Ctrl+Alt+T，弹出插入表格的对话框，参数设置如图3-9所示。为固定值：表格边框设为“0，间距设为“1。,3.2.7 表格的其他操作,1.复制粘贴行,2.排序,3.导入导出其他应用程序中的数据,3.3 布局视图模式,在编辑网页前应该首先对网页进行整体布局设置。合理的布局使网页看起来美观大方，并且便于网页元素的插入与编辑。表格是进行布局的强有力的工具。使用表格的标准模式进行布局不太方便，因为最初创立表格是为了显示表格数据，而不是用于对Web页进行布局。为了简化使用表格进行页布局的过程，Dreamweaver MX 2004提供了布局视图。在布局视图中，可以使用表格作为根底结构来设计我们的页面，防止了使用传统的方法创立时经常出现的一些问题。例如，在布局视图中我们可以在页上方便地绘制布局单元格，然后将这些单元格移动到所需的位置。我们还可以方便地创立固定宽度的布局和自动伸展为整个浏览器窗口宽度的布局等。,3.3 布局视图模式,要使用布局模式，必须翻开Dreamweaver MX 2004的布局模式，方法是：,选择【查看】/【表格模式】/【布局模式】命令，或者单击工具栏上的【常用】下拉列表，选择【布局】工具栏，如图3-13所示。点击【布局】按钮，切换到表格的布局模式。【布局表格】按钮和【绘制布局单元格】按钮有效。,3.3.1 绘制布局单元格和表格,在布局模式中，可以在页面上直接绘制布局单元格和布局表格。当不在布局表格中绘制布局单元格时，Dreamweaver MX 2004会自动创立一个布局表格以容纳该单元格。布局单元格不能存在于布局表格之外。,1.绘制布局单元格的操作步骤如下;,2绘制布局表格操作步骤如下;,3.3.1 绘制布局单元格和表格,说明：不能在现有内容旁边绘制布局表格。如果我们的页上已包含内容，那么只能在现有内容的下方绘制新的布局表格。如果我们尝试在现有内容之下绘制布局表格，就会出现禁止绘制鼠标指针，请重新调整文档窗口的大小以使现有内容底部和窗口底部之间产生更多的空白空间。,3.3.1 绘制布局单元格和表格,3绘制嵌套布局表格,可以将一个布局表格绘制在另一个布局表格中，创立嵌套表格。对外部表格所进行的更改不会影响嵌套表格中的单元格；例如，当更改外部表格中行或列的大小时，内部表格中单元格的大小不发生变化。,4将布局单元格靠齐到网格,可以翻开Dreamweaver MX 2004文档窗口中的网格，将其用作绘制布局的可视化向导，让页面元素在移动时自动靠齐到网格。还可以通过指定网格设置更改网格或控制靠齐行为。不管网格是否可见，靠齐都将发挥作用。,3.3.2 向布局单元格中添加内容,在布局模式中可以将文本、图像和其他内容添加到布局单元格中，就象在标准模式中一样。但在布局模式中不能向布局表格的空白灰色区域插入内容，因此在添加内容之前，必须先创立布局单元格，当添加内容的宽度大于布局单元格时，该单元格自动扩展。,3.3.3 调整布局表格和布局单元格,为了调整页面布局，可以对布局单元格和嵌套布局表格进行移动并调整它们的大小，最外面的布局表格只能调整大小。布局单元格不能重叠，对单元格进行移动或调整大小之后，该单元格不能跨越包含它的布局表格的边框。,1调整布局单元格的大小,具体步骤如下：,单击布局单元格的边框或者按住CTRL键并单击布局单元格里的任何区域，在布局单元格的边框上会出现控制点。,拖动控制点就可以改变布局单元格的大小。或通过【属性】面板调整单元格的大小。,3.3.3 调整布局表格和布局单元格,2调整布局表格的大小,当布局表格的大小不适宜时，就需要调整布局表格的大小。具体步骤如下：,单击状态栏上的表格标签，选中表格。,通过【属性】面板调整表格的大小，或拖动控制点调整大小。,3移动布局表格或布局单元格,布局表格或布局单元格不在正确的位置时，需要调整布局单元格或布局表格的位置。具体步骤如下：,选定布局单元格。,拖动布局单元格到页面上所需的地方。或者使用键盘上的方向键，按一下方向键可以移动1个像素的距离，如果同时按住Shift键，一次可以移动10个像素的距离。,可以通过使用【属性】面板来更改布局单元格或表格的多种属性，包括宽度和高度、背景颜色以及单元格内容的对齐方式。,设置布局表格，具体步骤如下：,选定布局表格，【属性】面板显示布局表格的参数。如图3-14所示。,图3-14