《网页设计与制作》教案-第8讲-布局技术之一-表格二.doc

1、第8讲 布局技术之一-表格二1.1教学目标： u 知识目标1. 掌握在表格中输入文字、图像并定位的方法。2. 掌握嵌套表格的用法。3. 掌握切换视图的操作方法。4. 掌握布局表格、单元格的绘制与属性设置方法。u 技能目标能合理运用布局表格进行页面布局u 品质目标培养学生认真细致、踏实进取的精神1.2教学重点：1. 掌握嵌套表格的用法。2. 掌握切换视图的操作方法。3. 掌握布局表格、单元格的绘制与属性设置方法。1.3 教学难点理解各视图的作用，布局表格和单元格的绘制。1.4教学方法：讲练结合，任务驱动、分子任务操练1.5课时安排：2课时1.6教学对象分析：这个班学生具有基本专业技能，不仅仅是要

2、教会他们方法，最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力，在保证全班同学教学进度一致的情况上，培养学生较好的专业基础与创新创作意识。1.7教学过程：一、导入和导出表格式数据Dreamweaver MX 2004提供了与外界数据进行交换的工具。在其他程序中创建的数据表格例如 Excel中保存的表格式数据、Word文档导入到 Dreamweaver 中并设置为表格的格式。同样也可以将表格数据从 Dreamweaver 导出到文本文件中，相邻单元格的内容由分隔符隔开。可以使用逗号、冒号、分号或空格作为分隔符。当导出表格时，将导出整个表格，不能选择导出部分表格。要导入表格数据可执

3、行如下操作： 1) 将光标定位在要插入数据表格的位置，选择“文件/导入/表格式数据”， 或选择“插入/表格对象/导入表格式数据”。 即会出现“导入表格式数据”对话框。如图2-80所示。在该对话框中，可以指定有关表格式数据文件的信息，并指定要使用这些数据创建的表格的属性：l 数据文件：是要导入的文件的名称。单击“浏览”按钮选择一个文件。l 定界符：是正在导入的文件中所使用的分隔符，可选择不同的定界符。若选择“其他”，则一个文本框出现在弹出式菜单的右侧。输入您的文件中使用的分隔符，确保指定保存数据文件时使用的分隔符。如果没能指定分隔符，则无法正确地导入文件，也无法在表格中对您的数据进行正确的格式设

4、置。l 表格宽度：是将创建的表格的宽度。 图2-80导入表格数据l 选择“匹配内容”使每个列足够宽以适应该列中最长的文本字符串。 l 选择“设置”以像素为单位指定固定的表格宽度，或按占浏览器窗口宽度的百分比指定表格宽度。 l 单元格边距：是单元格内容和单元格边框之间的像素数。l 单元格间距：确定相邻的表格单元格之间的像素数。若没有明确指定单元格间距和单元格边距的值，则大多数浏览器按单元格边距设置为 1，单元格间距设置为 2 显示表格。若要确保浏览器不显示表格中的边距和间距，则将“单元格边距”和“单元格间距”设置为 0。l 格式化首行：确定应用于表格首行的格式设置（如果存在）。从四个格式设置选项

5、中进行选择：无格式、粗体、斜体或加粗斜体。l 边框：指定表格边框的宽度（以像素为单位）。若没有明确指定边框的值，则大多数浏览器按边框设置为 1 显示表格。若要确保浏览器不显示表格边框，则将“边框”设置为 0。若要在边框设置为 0 时查看单元格和表格边框，请选择“查看/可视化助理/表格边框”命令。2) 单击“确定”即可。要导出表格数据，可执行如下操作：1) 将光标放置要导出的表格中的任意单元格中。 选择“文件/导出/表格”命令， 弹出“导出表格”对话框，如图2-81所示。图2-81导出表格此对话框允许设置定界符和换行符样式以通过从表格中导出数据来创建文本文件。定界符：指定应该使用哪个分隔符字符在

6、导出的文件中隔开各项。 换行符：指定将在哪个操作系统中打开导出的文件：Windows、Mac、UNIX。（不同的操作系统具有不同的指示文本行结尾的方式。）2) 单击“导出”，“表格导出为”对话框，在对话框中输入文件名称，单击“保存”，完成表格数据的导出与保存。 u 对表格进行排序表格作为处理数据的常见形式，一般都会有大量的数据，对其中的数据进行排序是必不可少的。要对表格进行排序，可执行以下操作：1) 选择需要进行排序的表格，或单击该表格的任意单元格。 2) 选择“命令/排序表格”，弹出“排序表格”对话框。如图2-82所示。图2-82排序表格对话框3) 该对话框允许设定表格的排序方式。 二、使用

7、嵌套表格搭建页面表格是设计页面布局的有利工具，它提供了一种使页面元素排列的更精确的方法。所以在设计页面时，我们通常用表格来定位页面元素。表格单元格中几乎可以容纳所有的元素，例如文字、图像、超链接和动画等。利用表格搭建页面时，先规划页面中各元素的具体位置，再通过调整表格将这些区域划分出来，在表格单元格中插入元素后，仔细调整单元格的大小、位置，使页面各个元素的所在位置与实际需要相符。利用表格搭建页面时，一般将表格边框宽度设为0，如果设置了边框会影响显示的效果。最好将表格的宽度设置为以象素为单位，这样当浏览器的窗口大小改变时，表格不会因此而改变，真正起到定位的作用。如图2-83所示，是使用表格及嵌套

8、表格搭建的页面，用户只要在各单元格中插入相应的内容即可。图2-83使用表格搭建页面三、布局表格的使用在网页设计中，进行页面布局最常用的方法就是使用表格，但是对于初学者来说，必须经过很长时间的学习、使用才能完全掌握。为了简化用表格进行页面布局的过程，Dreamweaver提供了布局模式功能，利用这个功能，可以将原来繁琐的页面布局工作变得简单而轻松。1. 关于布局模式单击“插入”栏上“布局”选项卡中的布局按钮，显示布局模式，此时将弹出一个提示对话框，如图2-84所示，若不想再显示该对话框，选中下面“不再显示此消息”复选框即可。图2-84提示对话框单击“确定”按钮，“布局”选项卡中的“插入表格”按钮

9、和“描绘层”按钮将变成灰色，表示这两个对象不能在布局模式下使用；而原来灰色的“绘制布局表格”和“绘制布局单元格”按钮则变成了彩色，可以使用这两个对象进行页面布局，如图2-85所示。图2-85布局模式下的“布局”选项卡在布局模式中，我们可以在添加内容前使用布局单元格和表格来对页面进行布局。例如，在页的顶部绘制一个单元格放置标题图形，在页的左边绘制另一个单元格放置导航条，在右边绘制第三个单元格放置内容。添加内容时，可以按需要在四周移动单元格，以调整布局。2. 建立布局单元格和表格在布局模式下，可以在页面上绘制布局单元格和表格，可执行以下操作：1) 在布局模式下单击“插入”栏的“布局”类别中的，“绘

10、制布局单元格”按钮。鼠标指针变为“十”字形状。2) 将鼠标指针放置在页中要开始绘制单元格的位置，然后拖动指针以创建布局单元格。如果在创建布局表格之前创建一个布局单元格，系统会自动创建一个布局表格来容纳该布局单元格，既布局单元格不能存在于布局表格之外，如图2-86所示。 图2-86新建布局单元格若要绘制多个布局单元格而不必重复选择“绘制布局单元格”，请在绘制布局单元格时按住 Ctrl 键拖动，便可以连续绘制出多个布局单元格。若在靠近布局表格边缘的位置绘制单元格，则单元格的边缘会自动与包含它的布局表格的边缘对齐。若要临时禁用靠齐，可在绘制单元格时按住 Alt 键。当 Dreamweaver 自动创

11、建布局表格时，该表格最初显示为填满整个“设计”视图，即使更改“文档”窗口的大小也是如此。这种全窗口默认布局表格使用户可以在“设计”视图中的任意位置绘制布局单元格。单击表格边框然后拖动表格的大小调整手柄，可以表格设置为特定的大小。若要绘制嵌套布局表格，可执行以下操作：1) “布局”模式中单击“插入”栏的“布局”类别中，“绘制布局表格”按钮。鼠标指针变为“十”字形状。2) 鼠标指向现有布局表格中的空白（灰色）区域，然后拖动指针以创建嵌套布局表格。如图2-88所示。只能在现有布局表格的空白区域中或在现有单元格周围创建嵌套布局表格，不能在布局单元格中创建布局表格。3. 为布局单元添加内容当创建一个布局

12、表格时，表格以灰色填充，表示该区域不能被显示，并且不能插入内容，因此必须在表格中创建布局单元格，才能在布局单元中插入需要的文本、图像或媒体等。在布局模式中可以将文本、图像和其他内容添加到布局单元格中，就像在“标准”模式中将内容添加到表格单元格一样。单击要添加内容的单元格，然后键入文本或插入其他内容即可。图2-88创建嵌套布局表格当添加宽度或高度大于布局单元格的内容时，该单元格将自动扩展。当单元格扩展时，该单元格所在的列也随之扩展，这可能会改变周围单元格的大小。该列的列宽变为显示代码中出现的宽度，后面的括号中是该列的可视宽度（屏幕上显示的宽度）。 如图2-89所示。 图2-89在单元格中添加内容

13、后单元格自动扩展并影响相邻单元格当向布局单元格添加内容后，默认的单元格高度可能与内容高度不符，此时可清除单元格高度。单击表格标题菜单，然后选择“清除所有高度”。 或者通过单击表格顶部的选项卡选择一个布局表格，然后单击属性检查器中的“清除行高”按钮，即可清除布局单元格的高度，如图2-90所示，为清除单元格高度前后的效果。图2-90清除行高前后4. 设置布局单元格和表格的属性1） 设置布局单元格的属性单击单元格的边框，或按住Ctrl键的同时在单元格内单击，如果出现控制句柄，表示当前已选中要设置属性的单元格，此时在属性检查器上显示了该单元格的各项属性，如图2-91所示。直接在属性检查器上进行修改设置

14、即可。图2-91设置布局单元格属性2） 设置布局表格属性单击布局表格的标题栏或者边框，选中布局表格，此时在属性检查器上显示了该布局表格的各项属性，如图2-92所示。直接在属性检查器上进行修改设置即可。图2-92设置布局表格属性3）设置布局宽度在布局模式下，可以使用固定宽度和自动伸展两种类型的宽度，相当于在标准模式下数值宽度和百分比宽度。固定宽度显示的是具体的宽度值，如200像素；自动伸展宽度与文档窗口大小相关，在自动伸展模式下，布局总是充满整个浏览窗口，与窗口视图的尺寸设置无关。默认情况下，布局按固定宽度显示。将固定宽度转换为自由伸展宽度：单击想要转换宽度的列的列头，在弹出的菜单中选择“列设置

15、为自动伸展”选项，或单击列中的一个单元格的边缘来选择该单元格，然后在属性检查器中单击“自动伸展”。如图2-93所示，在自动伸展列的顶部或底部会出现波浪线，在包含间隔图像的列的顶部或底部会出现双线。 图2-93将列设置为自动伸展前后若尚未给该站点设置间隔图像，将出现“选择间隔图像”对话框。4）设置布局参数通过设置布局参数，可以改变布局表格的显示颜色、自动插入间隔等特性。打开“编辑”菜单，选择“首选参数”命令，在弹出的“首选参数”对话框左侧的“分类”列表框中选择“布局模式”选项，如图2-94所示。图2-94设置布局模式参数1.8归纳总结：本讲的教学中我们对表格的创建及布局模式下和应用做了系统介绍，主要内容有以下几点：标准表格创建是以几行几列的方式插入到页面中的；表格除了可以编排数据外，通过改变表格的外观，还可以达到美化网页的目的；使用文件导入表格式数据命令，可一次将所有数据导入网页，并以设置的分界符分割内容；使用命令格式化表格，可迅速为表格套用不同的配色方案；从布局模式开始窗口中介绍了布局模式的灵活运用。通过这节的学习我们对网页制作更深入了一步，还要举一反三反复练习。1.9课后作业题：1. 表格各视图的作用是？2. 表格的属性如何设置？3. 布局表格和单元格各属性的作用？