《表格及布局网》PPT课件.ppt

第12章 表格及布局网页,本章学习要点：创建表格，表格的组成表格的属性设置表格编辑使用表格布局网页,12.1表格简介12.2 向表格内添加内容12.3 编辑表格12.4 使用表格布局网页,12.1.1表格概述12.1.2 创建表格12.1.3表格的属性设置面板,12.1表格简介,12.1.1表格概述表格是网页设计制作不可缺少的重要元素，它以简洁明了和高效快捷的方式将数据、文本、图片、表单等网页元素合理有序地布局在页面上，使页面结构整齐,版面清晰。不太复杂的网页一般都利用表格进行网页布局。,12.1.2 创建表格,操作步骤如下：步骤1：在设计窗口中,将插入点放在需要插入表格的位置。步骤2：选择菜单“插入(I)”|“表格(T)”命令。或单击对象面板组上的“插入表格”按钮,打开表格对话框，如图12.1所示。,图12.1 表格对话框,步骤3：在表格对话框中设置相应的选项。“表格大小”选项组中各选项的功能如下：“行数”此文本框用来确定表格具有的行的数目，如输入3行。“列数”此文本框用来确定表格具有的列的数目，如输入8列。“表格宽度”此文本框用来以像素为单位或按占浏览器窗口宽度的百分比，确定 表格宽度，如输入200像素。“边框粗细”此文本框用来以像素为单位确定表格边框粗细，如输入1像素。“单元格边距”可以采取默认值。“单元格间距”可以采取默认值。,“页眉”选项组中各选项的功能如下：“无”不设置页眉。“顶部”页眉设置在表格顶部。“左”页眉设置在表格左边。“两者”页眉设置在表格左边与顶部。“辅助功能”选项可以不进行设置。“标题”提供了一个显示在表格外的表格标题。“对齐标题”指定表格标题相对于表格的显示位置。“摘要”给出了表格的说明。屏幕阅读器可以读取摘要文本,但是该文本不会显示在浏览器中。,步骤4：各选项设置完成后，用鼠标单击“确定”按钮。即会在设计窗口中出现表格。如图12.2所示。,图12.2设计窗口中的表格,12.1.3表格的属性设置面板在Dreamweaver MX 2004中,可以通过表格的属性设置面板设置表格的各种属性。如图12.3所示。,图12.3 表格的属性设置面板,表格属性设置面板中各个选项功能如下（1）“表格Id”中的下拉列表框用来为选中表格名称。“行(R)”此文本框用来为选中表格设定行数。用鼠标 单击文档内任一位置,表格自动改变。“列(C)”此文本框用来为选中表格设定列数。用鼠标单击文档内任一位置,表格自动改变。“宽(W)”此文本框用来为选中表格设定宽度。在文本框后的下拉列表中选择所设宽度的单位,有百分比和像素两种选择。,表格属性设置面板中各个选项功能如下（2）“高(H)”此文本框用来为选中表格设定高度。在文 本框后的下拉列表中选择所设高度的单位,有百分比和像素两种选择。“填充(P)”此文本框用来指定选中表格的单元格高度，使用默认值。“对齐(A)”此下拉列表框用来指定表格相对于同一段落中其他元素的显示位置，使用默认值。“左对齐”沿其他元素的左侧对齐表格。“右对齐”沿其他元素的右侧对齐表格。“居中对齐”将表格居中。,表格属性设置面板中各个选项功能如下（3）“默认”指示浏览器应该使用其默认对齐方式。“间距(S)”此文本框用来指定选中表格的边框距离。“边框(B)”此文本框用来设置选中表格的边框大小。“类(C)”设置选中表格的CSS样式。“背景颜色(G)”设置选中表格的背景颜色,可以从颜色选择器后面的文本框内直接输入。“边框颜色(R)”设置选中表格的边框颜色,可以从颜色选择器后面的文本框内直接输入。“背景图像(B)”可在文本框内输入图像位置和名称,将该图像作为选中表格的背 景图像。,12.2 向表格内添加内容在表格的单元格中可以输入任何数据。同时也可以对数据进行常规的编辑操作。操作步骤如下：步骤1：将光标移到要插入数据的单元格内。步骤2：直接输入对象,或者将复制的对象粘贴到单元格中。步骤3：一个单元格内的内容输入完毕后,可以用Tab键将光标移动到下一个单元格,以便继续输入，也可以使用鼠标移动光标。,12.3 编辑表格12.3.1选择表格对象12.3.2 调整表格大小12.3.3调整行和列的大小12.3.4 添加及删除行和列12.3.5 拆分和合并单元格12.3.6复制、粘贴及删除单元格12.3.7嵌套表格,12.3.1选择表格对象1。选择整个表格选择整个表格有如下一些操作方法：单击表格左上角、表格的顶边缘和底边缘的任何位置，或者行或者列的边框，当可以选择表格时,鼠标指针会变成表格网格图标。单击某个表格单元格,然后在设计窗口左下角的标签选择器中选择 标签。单击某个表格单元格,然后选择菜单“修改(M)”|“表格(T)”|“选择表格(S)”命令。单击某个表格单元格,然后选择表下边的倒三角，出现标题菜单，在标题菜单中选择“选择表格(S)”。,将光标位于表格外,按住Shift键,然后单击表格中任意位置。将光标置于表格内任意位置,连续两次按下Ctr1+A组合键。所选中表格的下边缘和右边缘出现选择柄。如图12.4所示。,标题菜单,若要选择单个或多个行,操作步骤如下：步骤1：定位鼠标指针使其指向行的左边缘。步骤2：当鼠标指针变为选择箭头时,单击已选择单个行。进行拖动以选择多个行。按住Ctrl键,则可以选择多个不相邻的表格行。,若要选择单个或多个列,操作步骤如下：步骤1：将鼠标指针指向列的上边缘。步骤2：当鼠标指针变为选择箭头时,单击已选择单个列。进行拖动以选择多个列。按住Ctrl键,则可以选择多个不相邻的表格列。,3.选择单元格选择单个单元格有如下一些操作方法：将光标放在要选择的单元格内,然后在设计窗口左下角的标签选择器中选择标签。按住Ctrl键单击该单元格。将光标放在要选择的单元格内,然后选择“编辑(E)”|“全选(L)”命令。如果选择了一个单元格后再次选择“编辑(E)”|“全选(L)”命令可以选择整个表格。,选择一行或多个单元格有如下一些操作方法：从一个单元格拖到另一个单元格。在一个单元格中按住Ctrl键的同时单击鼠标,然后按住 Shift键单击另一个单元格。这两个单元格定义的直线或矩形区域中的所有单元格都将被选中。,若要选择不相邻的单元格有如下一些操作方法：将光标放在要选择的任一单元格内，按住Ctrl键的同时单击要选择的单元格。在按住Ctrl键的同时单击要选择的单元格。如果它己经被选中,再次单击会将其从选择中删除。,12.3.2 调整表格大小若要调整表格的大小，先选择该表格。该表格周围出现选择柄,如图12.4所示。,通过拖动表格的一个选择柄来调整表格大小。,标题菜单,有以下一些操作方法：若要在水平方向调整表格大小，拖动右边的选择柄。若要在垂直方向调整表格大小，拖动底部的选择柄。若要在两个方向调整表格大小，拖动右下角的选择柄。,12.3.3调整行和列的大小使用属性面板设置列宽或行高,操作步骤如下：步骤1：先选择列或行。步骤2：再选择属性面板，在“宽(W)”右边的文本中输入数字,如输入18。或在“高(H)”右边的文本中输入数字，如输入20。按Tab键或Enter键确定应用该值。,12.3.4 添加及删除行和列添加单个行或列，有如下一些操作方法：步骤1：选择菜单“修改(M)”|“表格(T)”|“插入行(N)”命令或“修改(M)”|“表格(T)”|“插入列(C)”命令,则在插入点的上面出现一行或在插入点的左侧出现一列。步骤2：单击表格每列下面的小三角（列标题菜单）,然后选择“左侧插入列(L)”或“右侧插入列(R)”命令。则在插入点的左侧或右侧出现一列。,添加多行或多列,操作步骤如下：步骤1：单击一个单元格。选择菜单“修改（M）”|“表格(T)”|“插入行或列(I)”命令,即出现插入行或列对话框,如图12.5所示。,图12.5插入行或列对话框,步骤2：选中“行(R)”或“列(C)”单选按钮,在“行数(N)”中输入1。步骤3：选择位置中的单选按钮。步骤4：单击“确定”按钮,行或列出现在表格中。,删除某行或列,操作步骤如下：步骤1：单击要删除的行或列中的一个单元格,然后选择“修改(M)”|“表格(T)”|“删除行(D)”命令或“修改(M)”|“表格(T)”|“删除列(E)”命令。步骤2：选择完整的一行或列,然后选择“编辑(E)”|“清除(A)”命令或按Delete键。整个行或列即从表格中消失。,使用属性面板添加或删除行或列选中整个表格。在属性面板中增加或减少行数值以添加或删除行。它将在表格的底部添加和删除行。增加或减少列数值以添加或删除列。它将在表格的右边添加和删除列。,12.3.5 拆分和合并单元格合并单元格操作步骤如下：步骤1：选中要合并的单元格,单元格必须相邻,不相邻的单元格不能合并,如图12.6所示。,步骤2：选择菜单“修改(M)”|“表格(T)”|“合并单元格(M)”命令实现单元格的合并,如图12.7所示。,图12.7 合并的单元格,2.拆分单元格操作步骤如下：步骤1：选中要拆分的单元格。步骤2：选择菜单“修改(M)”|“表格(T)”|“拆分单元格(P)”命令,弹出拆分单元格对话框，如图12.8所示。,图12.8 拆分单元格对话框,步骤3：选中“行(R)”单选按钮,在“行数(N)”中输入5，可以将选中的单元格拆分为5行；选中“列(C)”单选按钮,则可以将选中的单元格拆分为多列。步骤4：单击“确定”按钮,完成单元格的拆分。,如图12.9所示,图12.9 按行拆分单元格,12.3.6复制、粘贴及删除单元格剪切或复制表格单元格,操作步骤如下:步骤1：选择连续的一个或多个单元格。步骤2：选择菜单“编辑(E)”|“剪切(T)”或“编辑(E)”|“复制(C)”命令。,粘贴表格单元格,操作步骤如下：步骤1：选择要粘贴单元格的位置。步骤2：选择菜单“编辑(E)”|“粘贴(P)”命令或者按Ctrl+V快捷键粘贴。如果要将整个行或列粘贴到现有的表格中,则这些行或列将被添加到该表格中。如果要粘贴单个单元格,则将替换所选单元格的内容。如果要在表格外进行粘贴,则这些行、列或单元格用于定义一个新表格。,删除单元格内容,操作步骤如下:步骤1：选择一个或多个单元格。步骤2：选择“编辑(E)”|“清除(A)”命令或按Delete键。如果在选择“编辑(E)”|“清除(A)”命令或按Delete键前，选择了完整的行或列,则将从表格中删除整个行或列,而不仅仅是删除它们的内容。,删除包含合并单元格的行或列,操作步骤如下：步骤1：选择行或列。步骤2：选择菜单“修改(M)”|“表格(T)”|“删除行(N)”命令或“修改(M)”|“表格(T)”|“删除列(C)”命令。,12.3.7嵌套表格嵌套表格是在表格的单元格中再插入另一个表格。在对嵌套表格进行格式设置时,其宽度受它所在单元格的宽度的限制。,在表格单元格中嵌套表格,操作步骤如下:步骤1：单击现有表格中的一个单元格。步骤2：选择菜单“插入(I)”|“表格(T)”命令,弹出表格对话框,如图12.10所示。,图12.10 表格对话框,步骤3：输入行数2；列数2。步骤4：单击“确定”按钮,两行两列的表格插入到现有表格中,如图12.11所示。,图12.11 嵌套表格,12.4 使用表格布局网页12.4.1 打开设计窗口12.4.2 绘制表格草图12.4.3 插入和调整表格12.4.4 向表格添加内容12.4.5导入和导出表格式数据,12.4.1 打开设计窗口选择菜单“文件(F)”|“新建(N)”,打开设计窗口，如图12.12所示。,图12.12 设计窗口,12.4.2 绘制表格草图在插入表格之前，首先画一个草图，安排好各个表格中的内容，避免在插入元素时产生许多麻烦。如图12.13所示。,图12.13 表格草图,12.4.3 插入和调整表格操作步骤如下：步骤1：选择常用面板中的“表格”按钮,显示表格对话框，如图12.14所示。,步骤2：在弹出的表格对话框中,输入行数3,列数3。,图12.14 表格对话框,步骤3：依照草图编辑表格，将表格调整好，将“单元格填充”、“单元格间距”和“边框”属性值均设置为0,这里我们设置表格宽度为200像素,并将表格居中显示,当然也可以将表格设置为100%,这样表格将铺满整个屏幕。调整后的表格如图12.15所示。,图12.15 调整后的表格,12.4.4 向表格添加内容1.添加文字和图形操作步骤如下：步骤1：打开文件D:渊博书屋Untitled-6.tml。步骤2：选择D:渊博书屋image1文件夹中的素材。,步骤3：按第10章所讲的方法，分别向表格中插入文字，图形。如图12.16所示。,图12.16名字为Untitled-6.tml的网页,2.插入导航图导航图主要用于制作网页主题的链接，以便浏览者能够快速查找有关的网页，并随时可以切换网页主题来浏览不同的网页，它是在页面中插入一排垂直或水平的导航按钮。经常使用的导航图有4种：状态图像鼠标经过图像按下图像按下时鼠标经过图像,状态图像是一种还未使用鼠标单击图像或与元素交互时显现的图像。插入“状态图像”的操作步骤如下：步骤1：选择菜单“插入(I)”|“图像对象(G)”|“导航条(G)”命令，如图12.17所示。,图12.17 插入导航条对话框,步骤2：在图11.17中选择“状态图像”，通过“浏览”查找图像文件“图书6”，如图12.18所示。,图12.18 选择状态图像,步骤3：在“替换文本”中输入“状态图像”。步骤4：选中“选项”中的“预先载入图像”按钮。,步骤5：单击“确定”按钮，完成制作过程，如图12.19所示。,步骤6：在浏览器中浏览，即可看到“状态图像”。,状态图像,图12.19 插入状态图像,鼠标经过图像是一种当鼠标指针移动到状态图像时显现的图像。插入“鼠标经过图像”操作步骤如下：步骤1：将光标定位于图像插入位置。步骤2：选择菜单“插入(I)”|“图像对象(G)”|“鼠标经过图像(R)”命令，如图12.20所示。,图12.20 插入鼠标经过图像对话框,步骤3：选择“原始图像”，通过浏览选择文件“梦幻小说.gif”。步骤4：选择“鼠标经过图像”，通过浏览选择文件“骗鲜记.jpg”。步骤5：在“替换文本”中输入“鼠标经过图像”。,步骤6：单击“确定”按钮，完成制作过程，如图12.21所示。,步骤7：在浏览器中浏览，即可看到“鼠标经过图像”和“替换文本”。,鼠标经过图像,图12.21插入鼠标经过图像,按下图像是被鼠标单击后显现的图像。“按下图像”的操作步骤如下：步骤1：选择菜单“插入(I)”|“图像对象(G)”|“导航条(G)”命令。步骤2：在图11.17中选择“按下图像”，通过浏览选择文件“图书3”。步骤3：在“替换文本”中输入“按下图像”。步骤4：点击“选项”中的“预先载入图像”按钮。步骤5：单击“确定”按钮，完成制作过程。因为在一个网页中只能够有一个导航条，所以“按下图像”的图示没有插入。,按下时鼠标经过图像是在图像被单击后,当鼠标指针移动到按下图像上时显现的图像。“按下时鼠标经过图像”的操作步骤如下：步骤1：选择菜单“插入(I)”|“图像对象(G)”|“导航条(G)”命令。步骤2：在图11.17中选择“按下时鼠标经过图像”，通过浏览选择文件“图书4”。步骤3：在“替换文本”中输入“按下时鼠标经过图像”。步骤4：点击“选项”中的“预先载入图像”按钮。步骤5：单击“确定”按钮，完成制作过程。,步骤6：在浏览器中浏览，即可看到“按下时鼠标经过图像”和“替换文本”。如图12.22所示。,图12.22浏览器中的“按下时鼠标经过图像”,按下时鼠标经过图像,12.4.5导入和导出表格式数据1.导入表格数据以前保存的表格数据或其他文本数据都可以重新以表格的形式导入到文档中。,导入表格数据,操作步骤如下:步骤1：在Dreamweaver MX 2004设计窗口中选择“文件(F)”|“导入(I)”|“Excel文档”命令,显示打开文件对话框,如图12.23所示。,图12.23 打开文件对话框,步骤2：在对话框中选择需要导入的文件book1.xls。步骤3：单击“打开”按钮，即可完成对数据表格的导入。如图12.24所示。,图12.24 导入的Excel表格数据,2.导出表格式数据在Dreamweaver MX 2004中,除了可以导入表格式数据外,还可以将Dreamweaver MX 2004中建立的表格保存到一个文本文件中,以便以后需要时使用。,导出表格式数据操作步骤如下:步骤1：选择网页中的数据表格,如图12.25所示。,图12.25 网页中的数据表格,步骤2：将光标放在表格中或选中该表格。步骤3：选择“文件(F)”|“导出(E)”|“表格(T)”命令,出现如图12.26所示的导出表格对话框。,图12.26 导出表格对话框,步骤4：在“定界符”下拉列表框中选择表格数据输出到文本文件后的分隔符号,默认的是Tab,这里选择逗号,步骤5：在“换行符”下拉列表框中选择数据输出到文本文件后的换行方式,这里选择Windows，表示按Windows系统格式换行。,步骤6：设置完成后,单击“导出”按钮,弹出表格导出为对话框,在表格导出为对话框中输入一个文件名dcbg,可以不输入扩展名,也可以使用一个文本类型的扩展名,然后单击“保存”按钮即可。如图12.27所示。,图12.27 表格导出为对话框,导出后,用记事本打开该文件,可以看到导出的文件,如图12.28所示。,图12.28 导出到记事本中的表,