第8讲 布局技术之一-表格二
1.1教学目标：
◆ 知识目标
1. 掌握在表格中输入文字、图像并定位的方法。
2. 今年是第几个教师节了掌握嵌套表格的用法。
3. 掌握切换视图的操作方法。
4. 掌握布局表格、单元格的绘制与属性设置方法。
◆ 技能目标
能合理运用布局表格进行页面布局
◆ 品质目标
培养学生认真细致、踏实进取的精神
1.2教学重点：
1. 掌握嵌套表格的用法。
2. 掌握切换视图的操作方法。
3. 掌握布局表格、单元格的绘制与属性设置方法。
1.3 教学难点
理解各视图的作用，布局表格和单元格的绘制。
1.4教学方法：讲练结合，任务驱动、分子任务操练
1.5课时安排：2课时
1.6教学对象分析：
这个班学生具有基本专业技能，不仅仅是要教会他们方法，最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力，在保证全班同学教学进度一致的情况上，培
养学生较好的专业基础与创新创作意识。
1.7教学过程：
一、导入和导出表格式数据
Dreamweaver MX 2004提供了与外界数据进行交换的工具。在其他程序中创建的数据表格例如 Excel中保存的表格式数据、Word文档导入到 Dreamweaver 中并设置为表格的格式。同样也可以将表格数据从 Dreamweaver 导出到文本文件中，相邻单元格的内容由分隔符隔开。可以使用逗号、冒号、分号或空格作为分隔符。当导出表格时，将导出整个表格，不能选择导出部分表格。
要导入表格数据可执行如下操作：
1) 将光标定位在要插入数据表格的位置，选择“文件/导入/表格式数据”， 或选择“插入/表格对象/导入表格式数据”。 即会出现“导入表格式数据”对话框。如图2-80所示。
关于爱情甜蜜的句子在该对话框中，可以指定有关表格式数据文件的信息，并指定要使用这些数据创建的表格的属性：
● 数据文件：是要导入的文件的名称。单击“浏览”按钮选择一个文件。
● 定界符：是正在导入的文件中所使用的分隔符，可选择不同的定界符。
若选择“其他”，则一个文本框出现在弹出式菜单的右侧。输入您的文件中使用的分隔符，确保指定保存数据文件时使用的分隔符。如果没能指定分隔符，则无法正确地导入文件，也无法在表格中对您的数据进行正确的格式设置。
● 表格宽度：是将创建的表格的宽度。
图2-80导入表格数据
● 选择“匹配内容”使每个列足够宽以适应该列中最长的文本字符串。
● 选择“设置”以像素为单位指定固定的表格宽度，或按占浏览器窗口宽度的百分比指定表格宽度。
● 单元格边距：是单元格内容和单元格边框之间的像素数。
● 单元格间距：确定相邻的表格单元格之间的像素数。
若没有明确指定单元格间距和单元格边距的值，则大多数浏览器按单元格边距设置为 1，单元格间距设置为 2 显示表格。若要确保浏览器不显示表格中的边距和间距，则将“单元格边距”和“单元格间距”设置为 0。
● 格式化首行：确定应用于表格首行的格式设置（如果存在）。从四个格式设置选项中进行选择：无格式、粗体、斜体或加粗斜体。
● 边框：指定表格边框的宽度（以像素为单位）。
若没有明确指定边框的值，则大多数浏览器按边框设置为 1 显示表格。若要确保浏览器不
桑塔纳2000配件价格显示表格边框，则将“边框”设置为 0。若要在边框设置为 0 时查看单元格和表格边框，请选择“查看/可视化助理/表格边框”命令。
2) 单击“确定”即可。
要导出表格数据，可执行如下操作：
1) 将光标放置要导出的表格中的任意单元格中。 选择“文件/导出/表格”命令， 弹出“导出表格”对话框，如图2-81所示。
图2-81导出表格
此对话框允许设置定界符和换行符样式以通过从表格中导出数据来创建文本文件。
定界符：指定应该使用哪个分隔符字符在导出的文件中隔开各项。
换行符：指定将在哪个操作系统中打开导出的文件：Windows、Mac、UNIX。（不同的操作系统具有不同的指示文本行结尾的方式。）
2) 单击“导出”，“表格导出为”对话框，在对话框中输入文件名称，单击“保存”，完成表格数据的导出与保存。
◆ 对表格进行排序
表格作为处理数据的常见形式，一般都会有大量的数据，对其中的数据进行排序是必不可少的。
要对表格进行排序，可执行以下操作：
1) 选择需要进行排序的表格，或单击该表格的任意单元格。
2) 选择“命令/排序表格”，弹出“排序表格”对话框。如图2-82所示。表白方式
图2-82排序表格对话框
3) 该对话框允许设定表格的排序方式。
路由器设置好了上不了网二、使用嵌套表格搭建页面
表格是设计页面布局的有利工具，它提供了一种使页面元素排列的更精确的方法。所以在设计页面时，我们通常用表格来定位页面元素。表格单元格中几乎可以容纳所有的元素，例如文字、图像、超链接和动画等。
利用表格搭建页面时，先规划页面中各元素的具体位置，再通过调整表格将这些区域划分
出来，在表格单元格中插入元素后，仔细调整单元格的大小、位置，使页面各个元素的所在位置与实际需要相符。
利用表格搭建页面时，一般将表格边框宽度设为0，如果设置了边框会影响显示的效果。最好将表格的宽度设置为以象素为单位，这样当浏览器的窗口大小改变时，表格不会因此而改变，真正起到定位的作用。
如图2-83所示，是使用表格及嵌套表格搭建的页面，用户只要在各单元格中插入相应的内容即可。
图2-83使用表格搭建页面
三、布局表格的使用
在网页设计中，进行页面布局最常用的方法就是使用表格，但是对于初学者来说，必须经过很长时间的学习、使用才能完全掌握。
为了简化用表格进行页面布局的过程，Dreamweaver提供了布局模式功能，利用这个功能，可以将原来繁琐的页面布局工作变得简单而轻松。
1. 关于布局模式
单击“插入”栏上“布局”选项卡中的布局按钮，显示布局模式，此时将弹出一个提示对话框，如图2-84所示，若不想再显示该对话框，选中下面“不再显示此消息”复选框即可。
图2-84提示对话框
单击“确定”按钮，“布局”选项卡中的“插入表格”按钮和“描绘层”按钮将变成灰，表示这两个对象不能在布局模式下使用；而原来灰的“绘制布局表格”和“绘制布局单元格”按钮则变成了彩，可以使用这两个对象进行页面布局，如图2-85所示。
图2-85布局模式下的“布局”选项卡
在布局模式中，我们可以在添加内容前使用布局单元格和表格来对页面进行布局。例如，在页的顶部绘制一个单元格放置标题图形，在页的左边绘制另一个单元格放置导航条，在右边绘制第三个单元格放置内容。添加内容时，可以按需要在四周移动单元格，以调整布局。
2. 建立布局单元格和表格
在布局模式下，可以在页面上绘制布局单元格和表格，可执行以下操作：
1) 在布局模式下单击“插入”栏的“布局”类别中的，“绘制布局单元格”按钮。鼠标指针变为“十”字形状。
2) 将鼠标指针放置在页中要开始绘制单元格的位置，然后拖动指针以创建布局单元格。如果在创建布局表格之前创建一个布局单元格，系统会自动创建一个布局表格来容纳该布局单元格，既布局单元格不能存在于布局表格之外，如图2-86所示。
图2-86新建布局单元格
若要绘制多个布局单元格而不必重复选择“绘制布局单元格”，请在绘制布局单元格时按住
Ctrl 键拖动，便可以连续绘制出多个布局单元格。若在靠近布局表格边缘的位置绘制单元格，则单元格的边缘会自动与包含它的布局表格的边缘对齐。若要临时禁用靠齐，可在绘制单元格时按住 Alt 键。
当 Dreamweaver 自动创建布局表格时，该表格最初显示为填满整个“设计”视图，即使更改“文档”窗口的大小也是如此。这种全窗口默认布局表格使用户可以在“设计”视图中的任意位置绘制布局单元格。单击表格边框然后拖动表格的大小调整手柄，可以表格设置为特定的大小。
若要绘制嵌套布局表格，可执行以下操作：
1) “布局”模式中单击“插入”栏的“布局”类别中，“绘制布局表格”按钮。鼠标指针变为“十”字形状。
2) 鼠标指向现有布局表格中的空白（灰）区域，然后拖动指针以创建嵌套布局表格。如图2-88所示。
只能在现有布局表格的空白区域中或在现有单元格周围创建嵌套布局表格，不能在布局单
元格中创建布局表格。
3. 女生节祝福文案简短为布局单元添加内容
当创建一个布局表格时，表格以灰填充，表示该区域不能被显示，并且不能插入内容，因此必须在表格中创建布局单元格，才能在布局单元中插入需要的文本、图像或媒体等。
在布局模式中可以将文本、图像和其他内容添加到布局单元格中，就像在“标准”模式中将内容添加到表格单元格一样。单击要添加内容的单元格，然后键入文本或插入其他内容即可。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论