《电子商务网站建设 第5章教学文案.ppt》由会员分享，可在线阅读，更多相关《电子商务网站建设 第5章教学文案.ppt（119页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、电子商务网站建设电子商务网站建设 第第5 5章章5.7 层与表格互换层与表格互换5.8 层的应用实例层的应用实例5.9 框架的基本操作框架的基本操作5.10 框架和框架集的选择与属性设置框架和框架集的选择与属性设置5.11 框架和框架集的保存框架和框架集的保存5.12 框架应用实例框架应用实例5.13 本章摘要与重点回顾本章摘要与重点回顾表格不但在组织页面数据时非常有用，而且在网页元表格不但在组织页面数据时非常有用，而且在网页元素布局安排上也起着重要的作用，利用表格可以控制素布局安排上也起着重要的作用，利用表格可以控制文本和图形等对象在页面上的位置。网页一般可用表文本和图形等对象在页面上的位置
2、。网页一般可用表格格(Table)、层层(Layer)和框架和框架(Frame)来对网页元素来对网页元素定位。定位。设计者用设计者用Dreamweaver MX能很方便地在表格中输入能很方便地在表格中输入数据，对表格进行修改，改变其外观和结构。可以增数据，对表格进行修改，改变其外观和结构。可以增加、删除、拆分、合并表格的单元格、行和列，可以加、删除、拆分、合并表格的单元格、行和列，可以修改单元格、行、列以及表格的属性，实现表格的嵌修改单元格、行、列以及表格的属性，实现表格的嵌套，表与层互相转换等操作。套，表与层互相转换等操作。5.1 创建表格的基本操作创建表格的基本操作在网页制作时要新建一个表
3、格，可选择【插入】在网页制作时要新建一个表格，可选择【插入】|【表格】命令，此时网页编辑窗口中会弹出【插入表格表格】命令，此时网页编辑窗口中会弹出【插入表格】对话框，如图】对话框，如图5-1所示。在此对话框中，可设置表所示。在此对话框中，可设置表格的属性，然后单击【确定】按钮确认属性设置后，格的属性，然后单击【确定】按钮确认属性设置后，便可在页面指定位置上插入表格。便可在页面指定位置上插入表格。5.1.1 新建表格新建表格图图5-1【插入表格】对话框【插入表格】对话框【插入表格】对话框中各项参数的具体意义如下：【插入表格】对话框中各项参数的具体意义如下：在【行数】和【列数】文本框中，可设置表格
4、的行数在【行数】和【列数】文本框中，可设置表格的行数和列数；和列数；在【单元格填充】文本框中，可设置单元格的内容和在【单元格填充】文本框中，可设置单元格的内容和单元格边框之间空白处的宽度；单元格边框之间空白处的宽度；在【单元格间距】文本框中，可设置表格中各单元格在【单元格间距】文本框中，可设置表格中各单元格之间的宽度；之间的宽度；在【宽度】文本框中，可设置表格的宽度，并在右侧在【宽度】文本框中，可设置表格的宽度，并在右侧的下拉列表框中选择表格宽度的单位，选项分别为像的下拉列表框中选择表格宽度的单位，选项分别为像素和百分比，其中百分比是指表格与浏览器窗口的百素和百分比，其中百分比是指表格与浏览器
5、窗口的百分比；分比；在【边框】文本框中，可设置表格外框线的宽度。在【边框】文本框中，可设置表格外框线的宽度。在网页上插入一个表格后，可根据需要在某些单元格在网页上插入一个表格后，可根据需要在某些单元格中插入文本或图像等对象。在插入文字对象前必须先中插入文本或图像等对象。在插入文字对象前必须先将光标定位在该单元格中，然后可直接输入文字或将将光标定位在该单元格中，然后可直接输入文字或将复制在剪贴板中的文字对象粘贴到单元格内。复制在剪贴板中的文字对象粘贴到单元格内。在表格中插入图像对象的方法是先将光标定位在某一在表格中插入图像对象的方法是先将光标定位在某一单元格内，然后单击【插入】浮动面板组的【常用
6、】单元格内，然后单击【插入】浮动面板组的【常用】选项卡中的【图像】按钮；选项卡中的【图像】按钮；或选择【插入】或选择【插入】|【图像【图像】命令，在弹出的【选择图像源】对话框中选择要插】命令，在弹出的【选择图像源】对话框中选择要插入的图像文件和路径，确认后便可插入图像。入的图像文件和路径，确认后便可插入图像。1.设置表格的属性设置表格的属性新建表格后，可在表格属性面板中设置表格属性，来新建表格后，可在表格属性面板中设置表格属性，来改变表格的外观特性。改变表格的外观特性。先在网页编辑器窗口中选中整个表格，此时表格【属先在网页编辑器窗口中选中整个表格，此时表格【属性】面板如图性】面板如图5-2所示
7、。所示。图图5-2表格【属性】面板表格【属性】面板5.1.2 设置表格和单元格的属性设置表格和单元格的属性表格【属性】面板中参数的具体意义如下：表格【属性】面板中参数的具体意义如下：(1)在【表格在【表格Id】文本框中可输入表格名称；文本框中可输入表格名称；(2)【行】、【列】、【宽】、【高】、【填充】、【行】、【列】、【宽】、【高】、【填充】、【间距】、【边框】等参数设置方法与上述【插入表【间距】、【边框】等参数设置方法与上述【插入表格】对话框的参数设置方法相同；格】对话框的参数设置方法相同；(3)在【对齐】下拉列表框中，可选择表格的对齐方在【对齐】下拉列表框中，可选择表格的对齐方式；式；(
8、4)单击【清除列宽】按钮及【清除行高】按钮，可单击【清除列宽】按钮及【清除行高】按钮，可清除表格【属性】面板中行宽和列高的数据；清除表格【属性】面板中行宽和列高的数据；(5)单击【将表格宽度转换成像素】按钮和【将表格单击【将表格宽度转换成像素】按钮和【将表格高度转换成像素】按钮，可将表格宽度和高度的单位高度转换成像素】按钮，可将表格宽度和高度的单位由百分比方式转换成像素；由百分比方式转换成像素；(6)单击【将表格宽度转换成百分比】按钮和【将表单击【将表格宽度转换成百分比】按钮和【将表格高度转换成百分数】按钮，可将表格宽度和高度的格高度转换成百分数】按钮，可将表格宽度和高度的单位由像素方式转换成
9、百分比；单位由像素方式转换成百分比；(7)在【背景颜色】和【边框颜色】文本框中，可分在【背景颜色】和【边框颜色】文本框中，可分别设置表格的背景颜色和边框线的颜色；别设置表格的背景颜色和边框线的颜色；(8)在【背景图像】文本框中，可输入表格背景图片在【背景图像】文本框中，可输入表格背景图片的路径和文件名。的路径和文件名。2.设置单元格的属性设置单元格的属性在表格的操作过程中，为了突出显示某一部分数据的在表格的操作过程中，为了突出显示某一部分数据的重要性，常常会设置选中的行、列或者是某几个单元重要性，常常会设置选中的行、列或者是某几个单元格的属性。选中一个或多个单元格后，打开单元格【格的属性。选中
10、一个或多个单元格后，打开单元格【属性】面板，如图属性】面板，如图5-3所示。所示。图图5-3单元格【属性】面板单元格【属性】面板其中各项参数意义如下：其中各项参数意义如下：(1)在【水平】和【垂直】下拉列表框中可以选择单在【水平】和【垂直】下拉列表框中可以选择单元格内容的水平对齐和垂直对齐方式，元格内容的水平对齐和垂直对齐方式，4种水平对齐种水平对齐方式为方式为“默认默认”、“左对齐左对齐”、“居中居中”、“右对齐右对齐”，5种垂直对齐方式为种垂直对齐方式为“默认默认”、“顶端对齐顶端对齐”、“中间对齐中间对齐”、“底部对齐底部对齐”、“基线对齐基线对齐”；(2)【宽】和【高】文本框中，可输入
11、以像素为单位【宽】和【高】文本框中，可输入以像素为单位的单元格的宽度和高度，若输入的数据以百分比为单的单元格的宽度和高度，若输入的数据以百分比为单位，则可在数据后面加百分比符号位，则可在数据后面加百分比符号%；(3)选中【不换行】复选框，可设置文本自动换行；选中【不换行】复选框，可设置文本自动换行；(4)选中【标题】复选框，可将单元格设置为表格的选中【标题】复选框，可将单元格设置为表格的标题，默认情况下，标题单元格中的内容将被设为粗标题，默认情况下，标题单元格中的内容将被设为粗体，并且居中对齐；体，并且居中对齐；(5)在【背景】文本框中，可设置背景图片的文件名在【背景】文本框中，可设置背景图片
12、的文件名和路径；和路径；(6)在【背景颜色】和【边框】文本框中，可设置表在【背景颜色】和【边框】文本框中，可设置表格的背景颜色和边框线的颜色；格的背景颜色和边框线的颜色；(7)单击【合并所选的单元格】按钮，可合并选中的单击【合并所选的单元格】按钮，可合并选中的单元格；单元格；(8)单击【拆分单元格为行和列】按钮，可拆分选中单击【拆分单元格为行和列】按钮，可拆分选中的单元格。的单元格。单元格【属性】面板的上半部分与文字【属性】面板单元格【属性】面板的上半部分与文字【属性】面板相同，这些项的参数意义这里不再叙述。相同，这些项的参数意义这里不再叙述。要对表格进行编辑操作，首先应掌握表格行、列以及要对
13、表格进行编辑操作，首先应掌握表格行、列以及单元格的选择方法。在单元格的选择方法。在Dreamweaver MX中选择表格中选择表格元素的方法与在元素的方法与在MS Office 软件中选择表格元素的方软件中选择表格元素的方法相同，下面介绍选择表格元素的方法。法相同，下面介绍选择表格元素的方法。5.1.3 选取表格和单元格选取表格和单元格1.选择单元格选择单元格(1)选中某个单元格的选中某个单元格的2种方法如下：种方法如下：先单击要选择的单元格，然后拖动鼠标到相邻的单先单击要选择的单元格，然后拖动鼠标到相邻的单元格中，当被选中的单元格四周出现粗边框线时释放元格中，当被选中的单元格四周出现粗边框线
14、时释放鼠标，即可选中该单元格；鼠标，即可选中该单元格；单击要选择的单元格，然后单击状态栏左侧标签选单击要选择的单元格，然后单击状态栏左侧标签选择器的择器的，便可选中该单元格。便可选中该单元格。(2)选中多个相邻的单元格的选中多个相邻的单元格的2种方法如下：种方法如下：单击第单击第1个单元格，然后拖动鼠标到最后一个单元个单元格，然后拖动鼠标到最后一个单元格，即可选中这组相邻的单元格；格，即可选中这组相邻的单元格；单击第单击第1个单元格，然后按住个单元格，然后按住Shift 键，再单击这组键，再单击这组相邻单元格的最后一个单元格，就可选中这组相邻的相邻单元格的最后一个单元格，就可选中这组相邻的单元
15、格。单元格。(3)选择多个不相邻的单元格的方法如下：选择多个不相邻的单元格的方法如下：按住按住Ctrl键，然后再分别单击要选中的那些不相邻的键，然后再分别单击要选中的那些不相邻的单元格，这时被单击的单元格就可被选中，若在按住单元格，这时被单击的单元格就可被选中，若在按住Ctrl键的同时，再次单击选中的单元格，将取消该单键的同时，再次单击选中的单元格，将取消该单元格的选择。元格的选择。(4)选择表格行的选择表格行的2种方法如下：种方法如下：将鼠标指向表格的左边框线，当光标变为将鼠标指向表格的左边框线，当光标变为时，单时，单击可选中该行，此时如果拖动鼠标可同时选择多行；击可选中该行，此时如果拖动鼠
16、标可同时选择多行；先单击某行的单元格，然后单击状态栏左侧标签选先单击某行的单元格，然后单击状态栏左侧标签选择器的择器的，便可选中该行。便可选中该行。(5)选择表格列的方法如下：选择表格列的方法如下：将鼠标指向表格的上边框线，当光标变话时，单击可将鼠标指向表格的上边框线，当光标变话时，单击可选中该列，此时如果拖动鼠标可同时选择多列。选中该列，此时如果拖动鼠标可同时选择多列。2.选择表格选择表格选择整个表格有选择整个表格有4种方法：种方法：先单击某个单元格，然后单击状态栏左侧标签选择先单击某个单元格，然后单击状态栏左侧标签选择器的器的，便可选中该表格；便可选中该表格；先单击表格中某一单元格，然后选
17、择【修改】先单击表格中某一单元格，然后选择【修改】|【表格】表格】|【选择表格】命令，也可选中整个表格；【选择表格】命令，也可选中整个表格；先单击表格中某一单元格，按两次先单击表格中某一单元格，按两次Ctrl+A快捷键，快捷键，也可选中整个表格；也可选中整个表格；单击表格的右边框线或下边框线，可选中整个表格。单击表格的右边框线或下边框线，可选中整个表格。在在Dreamweaver MX中，对于表格的嵌套没有特别的中，对于表格的嵌套没有特别的限制，表格完全可以像文本、图像一样直接插入到其限制，表格完全可以像文本、图像一样直接插入到其他表格的单元格中，然后通过对单元格的拆分和合并他表格的单元格中，
18、然后通过对单元格的拆分和合并等编辑操作，完成更复杂表格的嵌套操作。等编辑操作，完成更复杂表格的嵌套操作。将光标插入当前表格的某个单元格内，然后可选择【将光标插入当前表格的某个单元格内，然后可选择【插入】插入】|【表格】命令，或单击【插入】浮动面板的【表格】命令，或单击【插入】浮动面板的【常用】选项卡中的【插入表格】按钮，在【插入表【常用】选项卡中的【插入表格】按钮，在【插入表格】对话框中输入新表格的属性，便可以在当前单元格】对话框中输入新表格的属性，便可以在当前单元格内再插入一个表格，这就是表格的嵌套操作。但是格内再插入一个表格，这就是表格的嵌套操作。但是表格嵌套层数不宜过多。表格嵌套层数不宜
19、过多。5.1.4 表格的嵌套表格的嵌套5.2.1 改变表格或单元格的大小改变表格或单元格的大小在表格实际应用中，往往会根据需要对表格的尺寸进在表格实际应用中，往往会根据需要对表格的尺寸进行调整。修改表格尺寸的方法有两种：行调整。修改表格尺寸的方法有两种：一是用鼠标一是用鼠标拖曳表格线或表格的活动块来调整表格的大小；拖曳表格线或表格的活动块来调整表格的大小；二二是用表格的【属性】面板来修改表格尺寸。是用表格的【属性】面板来修改表格尺寸。5.2 表格的编辑与格式化表格的编辑与格式化1.用鼠标拖拽调整表格大小用鼠标拖拽调整表格大小（1）选中整个表格。选中整个表格。（2）表格四周被黑色边框线和表格四周
20、被黑色边框线和8个活动块框住。个活动块框住。（3）用鼠标对准活动块，鼠标变成双向箭头后拖曳用鼠标对准活动块，鼠标变成双向箭头后拖曳活动块，就可调整表格的尺寸。活动块，就可调整表格的尺寸。（4）将鼠标指针指向要调整的行和列的边框线。将鼠标指针指向要调整的行和列的边框线。（5）此时鼠标指针变为和形状，拖曳鼠标便可调整此时鼠标指针变为和形状，拖曳鼠标便可调整行高和列宽。行高和列宽。2.用表格属性面板调整表格行高及列宽用表格属性面板调整表格行高及列宽（1）选中整个表格，在表格属性面板中直接修改【选中整个表格，在表格属性面板中直接修改【宽】和【高】的数值，就可修改表格的尺寸。宽】和【高】的数值，就可修改
21、表格的尺寸。（2）选中某个单元格，在表格属性面板中直接修改选中某个单元格，在表格属性面板中直接修改【宽】和【高】的数值，就可调整该单元格所在行、【宽】和【高】的数值，就可调整该单元格所在行、列的行高及列宽。列的行高及列宽。在网页设计的过程中，常常会根据需要对表格中行、在网页设计的过程中，常常会根据需要对表格中行、列进行增加和删除的操作，这类操作可以通过表格【列进行增加和删除的操作，这类操作可以通过表格【属性】面板和【修改】菜单来完成。属性】面板和【修改】菜单来完成。5.2.2 表格行、列的增加和删除表格行、列的增加和删除1.通过表格【属性】面板增加与删除表格的行和列通过表格【属性】面板增加与删
22、除表格的行和列（1）选中整个表格。选中整个表格。（2）在表格【属性】面板的【行】和【列】文本框在表格【属性】面板的【行】和【列】文本框中记录了当前表格的行数、列数，可以通过调整其中中记录了当前表格的行数、列数，可以通过调整其中的数值来增加和删除表格的行数、列数。的数值来增加和删除表格的行数、列数。（3）用这种方法完成增、删表格行、列的操作，都用这种方法完成增、删表格行、列的操作，都是针对表格的最下边的行和最右边的列而言的。是针对表格的最下边的行和最右边的列而言的。2.通过【修改】菜单完成增加与删除表格行、列通过【修改】菜单完成增加与删除表格行、列（1）选中表格的某个单元格或将光标插入该单元格选
23、中表格的某个单元格或将光标插入该单元格中。中。（2）选择【修改】选择【修改】|【表格】【表格】|【插入行】命令，或【插入行】命令，或选择【修改】选择【修改】|【表格】【表格】|【插入列】命令，便可在该【插入列】命令，便可在该单元格上边增加一行或在该单元格左边增加一列。单元格上边增加一行或在该单元格左边增加一列。（3）选择【修改】选择【修改】|【表格】【表格】|【插入行或列】命令，【插入行或列】命令，此时屏幕弹出【插入行或列】对话框，在对话框中设此时屏幕弹出【插入行或列】对话框，在对话框中设置插入行（列）、插入数量、在当前行（列）上边置插入行（列）、插入数量、在当前行（列）上边（前边）或下边（后
24、边）插入行（列），如图（前边）或下边（后边）插入行（列），如图5-4所所示。示。图图5-4【插入行或列】对话框【插入行或列】对话框（4）选中表格中的某行或列，选择【编辑】选中表格中的某行或列，选择【编辑】|【清除【清除】命令，便可删除该行或列。】命令，便可删除该行或列。（5）将光标插入在表格的某个单元格中，选择【修将光标插入在表格的某个单元格中，选择【修改】改】|【表格】【表格】|【删除行】命令，或【修改】【删除行】命令，或【修改】|【表格【表格】|【删除列】命令，也可删除该行或列。【删除列】命令，也可删除该行或列。（6）将光标插入在表格的某个单元格中，单击鼠标将光标插入在表格的某个单元格中，
25、单击鼠标右键，在快捷菜单中选择【表格】右键，在快捷菜单中选择【表格】|【删除行】命令，【删除行】命令，或【表格】或【表格】|【删除列】命令，也可完成删除该行或【删除列】命令，也可完成删除该行或列的操作。列的操作。1.单元格的合并操作单元格的合并操作（1）单击表格【属性】面板右下角的按钮，将表格单击表格【属性】面板右下角的按钮，将表格【属性】面板全部展开。【属性】面板全部展开。（2）选中要合并的几个单元格，这些单元格的四周选中要合并的几个单元格，这些单元格的四周被出现的粗框线框住。被出现的粗框线框住。（3）单击表格【属性】面板左下方的合并按钮，完单击表格【属性】面板左下方的合并按钮，完成单元格的
26、合并操作。成单元格的合并操作。5.2.3 单元格的拆分和合并单元格的拆分和合并2.单元格的拆分操作单元格的拆分操作（1）单击【表格】属性面板右下角的按钮，将表格单击【表格】属性面板右下角的按钮，将表格【属性】面板全部展开。【属性】面板全部展开。（2）将光标定位在要拆分的单元格中。将光标定位在要拆分的单元格中。（3）单击表格【属性】面板左下方的拆分按钮，此单击表格【属性】面板左下方的拆分按钮，此时屏幕弹出【拆分单元格】对话框，如图时屏幕弹出【拆分单元格】对话框，如图5-5所示。所示。（4）在【拆分单元格】对话框中设定拆分方式。若在【拆分单元格】对话框中设定拆分方式。若要上下拆分单元格，则选中【行
27、】选项；要上下拆分单元格，则选中【行】选项；若要左右若要左右拆分单元格，则选中【列】选项。拆分单元格，则选中【列】选项。（5）在【行数】或【列数】文本框中输入拆分单元在【行数】或【列数】文本框中输入拆分单元格的数量。格的数量。（6）单击【确定】按钮，完成单元格的拆分操作。单击【确定】按钮，完成单元格的拆分操作。若单元格拆分前有内容，单元格拆分后内容要做相应若单元格拆分前有内容，单元格拆分后内容要做相应的调整。的调整。图图5-5【拆分单元格】对话框【拆分单元格】对话框设计网页时，文本、图片等对象可以被复制、粘贴、设计网页时，文本、图片等对象可以被复制、粘贴、移动或清除，表格中的单元格同样也支持这
28、些操作。移动或清除，表格中的单元格同样也支持这些操作。在设计网页时，可以一次复制、粘贴、移动和清除一在设计网页时，可以一次复制、粘贴、移动和清除一个或多个单元格。个或多个单元格。单元格复制与粘贴的操作方法如下单元格复制与粘贴的操作方法如下:(1)在网页编辑窗口中选中要复制的对象，按在网页编辑窗口中选中要复制的对象，按Ctrl+C快捷键，或者选择【编辑】快捷键，或者选择【编辑】|【复制】命令，将对象【复制】命令，将对象复制到剪贴板。复制到剪贴板。(2)在网页编辑窗口中选中要移动的对象，按在网页编辑窗口中选中要移动的对象，按Ctrl+X快捷键，或者选择【编辑】快捷键，或者选择【编辑】|【剪切】命令
29、，将对象【剪切】命令，将对象移动到剪贴板。移动到剪贴板。5.2.4 单元格的复制、粘贴、移动和清除单元格的复制、粘贴、移动和清除(3)单击目标单元格，按单击目标单元格，按Ctrl+V快捷键，或者选择【快捷键，或者选择【编辑】编辑】|【粘贴】命令，将对象粘贴到目标单元格中。【粘贴】命令，将对象粘贴到目标单元格中。(4)在编辑窗口中选中要复制的对象，按住在编辑窗口中选中要复制的对象，按住Ctrl键后，键后，可将复制的对象拖入目标单元格，便完成了对象的复可将复制的对象拖入目标单元格，便完成了对象的复制操作。直接拖曳选中的对象到目标单元格中，就可制操作。直接拖曳选中的对象到目标单元格中，就可完成对象的
30、移动操作。完成对象的移动操作。单元格内容清除的操作方法是，选中目标单元格中要单元格内容清除的操作方法是，选中目标单元格中要清除的对象，按清除的对象，按Delete键，或者选择【编辑】键，或者选择【编辑】|【清除【清除】命令，便可清除单元格中的内容，但该单元格的格】命令，便可清除单元格中的内容，但该单元格的格式仍旧被保留着，没有被清除。式仍旧被保留着，没有被清除。在这里粘贴一级标题下的正文。在这里粘贴一级标题下的正文。1.1.1 这里是二级标题这里是二级标题表格格式化是利用表格格式化是利用Dreamweaver MX 中提供的中提供的17种种预先设置好的表格格式，对页面上当前选中的表格进预先设置
31、好的表格格式，对页面上当前选中的表格进行快速格式化。用系统提供的表格格式可以统一网页行快速格式化。用系统提供的表格格式可以统一网页上表格的格式，简化对表格格式化的过程。上表格的格式，简化对表格格式化的过程。应用表格格式化的操作步骤如下。应用表格格式化的操作步骤如下。（1）选中网页上要套用格式的表格。选中网页上要套用格式的表格。（2）选择【命令】选择【命令】|【格式化表格】命令，此时屏幕【格式化表格】命令，此时屏幕弹出【格式化表格】对话框，如图弹出【格式化表格】对话框，如图5-6所示。所示。5.2.5 表格格式化表格格式化图图5-6【格式化表格】对话框【格式化表格】对话框（3）从列表框中选择内置
32、的某种表格格式，此时在从列表框中选择内置的某种表格格式，此时在对话框中右侧可以看到预览的效果。对话框中右侧可以看到预览的效果。在对话框中，还可以重新设置参数，各参数的意义如在对话框中，还可以重新设置参数，各参数的意义如下：下：【行颜色】中，可设置表格中行的颜色方案；【行颜色】中，可设置表格中行的颜色方案；在【第一种】与【第二种】中，可分别输入表格行在【第一种】与【第二种】中，可分别输入表格行使用的第使用的第1、2种颜色；种颜色；在【交错】下拉式列表中，可以选择两种以上的颜在【交错】下拉式列表中，可以选择两种以上的颜色，在表格中交替显示的方式；色，在表格中交替显示的方式；在【第一行】区域中，可分
33、别设置表格顶行的对齐在【第一行】区域中，可分别设置表格顶行的对齐方式、字形、背景颜色和文本颜色；方式、字形、背景颜色和文本颜色；在【最左列】区域中，可分别设置表格左边第一列在【最左列】区域中，可分别设置表格左边第一列的对齐方式和文字样式；的对齐方式和文字样式；在【边框】文本框中，可以设置表格边框线的宽度；在【边框】文本框中，可以设置表格边框线的宽度；如果选中对话框底部的复选框，则该操作将属性值如果选中对话框底部的复选框，则该操作将属性值全部写在全部写在标注中，而不写在标注中，而不写在标签中。标签中。（4）设置完成后，单击【应用】按钮观察效果。如设置完成后，单击【应用】按钮观察效果。如果正确无误
34、，可单击【确定】按钮。果正确无误，可单击【确定】按钮。5.3.1在表格中导入外部数据文件在表格中导入外部数据文件在表格中除了可以直接输入数据外，还可以加入外部在表格中除了可以直接输入数据外，还可以加入外部数据文件中的数据。外部数据文件应该使用定界符数据文件中的数据。外部数据文件应该使用定界符（如制表符、冒号、逗号、分号等）分隔数据，数据（如制表符、冒号、逗号、分号等）分隔数据，数据被导入后将被转换成被导入后将被转换成Dreamweaver MX格式。格式。导入外部数据文件的操作步骤如下。导入外部数据文件的操作步骤如下。（1）选择【文件】选择【文件】|【导入】【导入】|【表格式数据】命令，【表格
35、式数据】命令，或选择【插入】或选择【插入】|【表格对象】【表格对象】|【导入表格式数据】【导入表格式数据】命令，还可以单击【插入】面板的【常用】选项卡中命令，还可以单击【插入】面板的【常用】选项卡中的【表格式数据】按钮。的【表格式数据】按钮。5.3 外部数据导入和表格排序外部数据导入和表格排序（2）在弹出的【导入表格式数据】对话框中设置下在弹出的【导入表格式数据】对话框中设置下列参数，如图列参数，如图5-7所示。所示。图图5-7【导入表格式数据】对话框【导入表格式数据】对话框在【数据文件】文本框中输入数据文件的路径和文在【数据文件】文本框中输入数据文件的路径和文件名；件名；在【分隔符】下拉列表
36、框中选择数据分隔符；在【分隔符】下拉列表框中选择数据分隔符；在【表格宽度】单选区域中选择表格宽度的处理方在【表格宽度】单选区域中选择表格宽度的处理方法（匹配内容或指定宽度）；法（匹配内容或指定宽度）；在【单元格填充】文本框中设置单元格内容和单元在【单元格填充】文本框中设置单元格内容和单元格边框之间的宽度；格边框之间的宽度；在【单元格间距】文本框中设置表格中每个单元格在【单元格间距】文本框中设置表格中每个单元格之间的宽度；之间的宽度；在【格式化首行】下拉列表框中设置表头文字格式；在【格式化首行】下拉列表框中设置表头文字格式；在【边框】文本框中设置表格外边框线的宽度。在【边框】文本框中设置表格外边
37、框线的宽度。（3）单击【确定】按钮，就可将外部数据文件导入单击【确定】按钮，就可将外部数据文件导入到网页的表格中。到网页的表格中。不少网站的网页中都能见到包含数据的表格，表格是不少网站的网页中都能见到包含数据的表格，表格是处理数据的最常见的形式，在处理数据的最常见的形式，在Dreamweaver MX中提中提供了对表格中数据排序的功能，其操作步骤如下。供了对表格中数据排序的功能，其操作步骤如下。（1）在网页编辑窗口中选择需要排序的表格。在网页编辑窗口中选择需要排序的表格。注意注意:该表格不能是经过单元格合并操作的不规则表该表格不能是经过单元格合并操作的不规则表格。格。（2）选择【命令】选择【命
38、令】|【排序表格】命令，网页编辑窗【排序表格】命令，网页编辑窗口中弹出【排序表格】对话框，如图口中弹出【排序表格】对话框，如图5-8所示。所示。5.3.2 表格内容排序表格内容排序*图图5-8【排序表格】对话框【排序表格】对话框（3）在【排序表格】对话框中可设置对表格数据排在【排序表格】对话框中可设置对表格数据排序的参数，各项参数的具体意义如下。序的参数，各项参数的具体意义如下。在【排序按】下拉列表框中，可选择哪一列为排在【排序按】下拉列表框中，可选择哪一列为排序的主要依据。序的主要依据。在【顺序】下拉列表框及右边的下拉列表框中，在【顺序】下拉列表框及右边的下拉列表框中，设置排序的方式。选择【
39、按字母顺序】选项，则表格设置排序的方式。选择【按字母顺序】选项，则表格中字符和数字都按字母方式排序。选择【按数字顺序中字符和数字都按字母方式排序。选择【按数字顺序】选项，则表格中数值都按大小排序。】选项，则表格中数值都按大小排序。在【再按】下拉列表框中，可选择表格中哪一列在【再按】下拉列表框中，可选择表格中哪一列为排序的次要依据。为排序的次要依据。在【顺序】下拉列表框及右边的下拉列表框中，在【顺序】下拉列表框及右边的下拉列表框中，可选择次要依据的排序方式。可选择次要依据的排序方式。在【选项】中有在【选项】中有4个复选框选项：个复选框选项：选中【排序包含第一行】复选框，则在对该表格进选中【排序包
40、含第一行】复选框，则在对该表格进行排序时，首行也参加排序；行排序时，首行也参加排序；选中【对选中【对THEAD行（如果存在）进行排序】复选行（如果存在）进行排序】复选框框,对表格对表格THEAD部分（如果存在）中的所有行进部分（如果存在）中的所有行进行排序，排序后行排序，排序后THEAD行仍将保留在行仍将保留在THEAD部分部分中，并仍显示在表格的顶部；中，并仍显示在表格的顶部；选中【对选中【对TFOOT行（如果存在）进行排序】复选行（如果存在）进行排序】复选框，对表格框，对表格TFOOT部分（如果存在）中的所有行进部分（如果存在）中的所有行进行排序，排序后行排序，排序后TFOOT行仍将保留在
41、行仍将保留在TFOOT部分中，部分中，并仍显示在表格的底部；并仍显示在表格的底部；选中【排序的行保留选中【排序的行保留TR属性】复选框，则在对该属性】复选框，则在对该表格进行排序后保留排序行中表格进行排序后保留排序行中标签的原有属性，标签的原有属性，如颜色等属性。如颜色等属性。（4）设置完成后，单击【确定】按钮，便可实现表设置完成后，单击【确定】按钮，便可实现表格中数据的排序操作。格中数据的排序操作。Dreamweaver MX网页页面的布局有两种工作模式，网页页面的布局有两种工作模式，即【标准视图】（即【标准视图】（Standard View）和【布局视图】和【布局视图】（Layout Vi
42、ew）。）。在【插入】面板组的【布局】选项卡中有【标准视图在【插入】面板组的【布局】选项卡中有【标准视图】和【布局视图】和【布局视图】2个按钮，可进行个按钮，可进行2种视图的切换，种视图的切换，如图如图5-9所示。所示。图图5-9切换为【布局视图】模式切换为【布局视图】模式5.4 布局表格和布局单元格布局表格和布局单元格5.4.1 创建和调整布局表格与布局单元格创建和调整布局表格与布局单元格用【布局视图】（用【布局视图】（Layout View）规划网页布局的操规划网页布局的操作步骤如下。作步骤如下。(1)新建一个页面，并在【插入】面板组的【布局】新建一个页面，并在【插入】面板组的【布局】选项
43、卡中进行视图工作模式切换，如图选项卡中进行视图工作模式切换，如图59所示。所示。(2)单击【布局视图】按钮后，系统显示【布局视图单击【布局视图】按钮后，系统显示【布局视图入门】对话框，对话框中显示一些简单的布局视图的入门】对话框，对话框中显示一些简单的布局视图的使用信息，如图使用信息，如图5-10所示。单击【确定】按钮便可进所示。单击【确定】按钮便可进入【布局视图】模式。入【布局视图】模式。图图5-10【布局视图入门】对话框【布局视图入门】对话框（3）单击【布局视图】区域中的【绘制布局表格】单击【布局视图】区域中的【绘制布局表格】的按钮，将鼠标移到网页编辑窗口中，此时鼠标指针的按钮，将鼠标移到
44、网页编辑窗口中，此时鼠标指针变为变为+字形状，在指定位置处拖曳鼠标，就可以在网字形状，在指定位置处拖曳鼠标，就可以在网页编辑窗口中画出布局表格。在绘制布局表格的地方，页编辑窗口中画出布局表格。在绘制布局表格的地方，不能有任何文字和图片。不能有任何文字和图片。（4）如果在同一页面上还需要绘制其他的布局表格，如果在同一页面上还需要绘制其他的布局表格，按住按住Ctrl键，重复上述步骤可以连续画多个布局表格。键，重复上述步骤可以连续画多个布局表格。（5）在布局表格中必须画好布局单元格后，才可以在布局表格中必须画好布局单元格后，才可以插入文字或图片等对象。单击【布局视图】区域中的插入文字或图片等对象。单
45、击【布局视图】区域中的【绘制布局单元格】的按钮，在布局表格中可根据需【绘制布局单元格】的按钮，在布局表格中可根据需要画出多个布局单元格。要画出多个布局单元格。（6）在布局单元格中，可以根据页面需要输入文字在布局单元格中，可以根据页面需要输入文字或插入图片等对象，如图或插入图片等对象，如图5-11所示。所示。（7）如果要调整布局表格或布局单元格的大小及其如果要调整布局表格或布局单元格的大小及其中内容的属性，可选中布局表格或布局单元格，并在中内容的属性，可选中布局表格或布局单元格，并在布局表格或布局单元格的【属性】面板中完成它们的布局表格或布局单元格的【属性】面板中完成它们的属性设置。属性设置。图
46、图5-11在网页中插入布局表格和布局单元格在网页中插入布局表格和布局单元格例例51制作具有下列要求的网页制作具有下列要求的网页(见图见图5-12)。（1）创建网页名为创建网页名为exa51.htm的文件，网页的背的文件，网页的背景图片为景图片为bg0040.gif，网页文件保存在网页文件保存在My site文件夹文件夹中。中。（2）在网页中创建在网页中创建800600像素的布局表格，在网像素的布局表格，在网页顶部位置上插入页顶部位置上插入1个个80080像素的布局单元格，在像素的布局单元格，在网页左边合适的位置上插入网页左边合适的位置上插入4个个7979像素的布局单像素的布局单元格，在网页右边
47、合适的位置上插入元格，在网页右边合适的位置上插入1个个170170像像素的布局单元格。素的布局单元格。（3）在网页的顶部区域的布局单元格中插入在网页的顶部区域的布局单元格中插入ch05文文件夹中的件夹中的Flash文件文件shu.swf。5.4.2 布局视图应用实例布局视图应用实例图图5-12布局视图应用实例布局视图应用实例（4）在网页左边插入的在网页左边插入的4个布局单元格中，分别插个布局单元格中，分别插入入ch05文件夹中的图片文件文件夹中的图片文件t5_1.gif、t5_3.gif、t5_4.gif、t5_6.gif。每个图片与每个图片与My site文件夹中的一文件夹中的一个个HTML
48、文件建立超链接，被链接的文件建立超链接，被链接的HTML文件在文件在新窗口中打开。新窗口中打开。（5）在网页右边的布局单元格中，插入在网页右边的布局单元格中，插入ch05文件夹文件夹中的逐帧动画文件中的逐帧动画文件shu_1.gif。（6）预览页面效果后，保存网页文件。预览页面效果后，保存网页文件。本例的操作步骤如下。本例的操作步骤如下。（1）新建一个页面，选择【修改】新建一个页面，选择【修改】|【页面属性】命【页面属性】命令，在【页面属性】对话框中设置背景图片为令，在【页面属性】对话框中设置背景图片为bg0040.gif，并将网页保存在并将网页保存在My site文件夹中。文件夹中。（2）在
49、【插入】面板组的【布局】选项卡中，进行在【插入】面板组的【布局】选项卡中，进行视图工作模式切换，单击【布局视图】按钮后，进入视图工作模式切换，单击【布局视图】按钮后，进入【布局视图】模式。【布局视图】模式。（3）单击【布局视图】区域中的【绘制布局表格】单击【布局视图】区域中的【绘制布局表格】的按钮，将鼠标移到网页编辑窗口中，此时鼠标指针的按钮，将鼠标移到网页编辑窗口中，此时鼠标指针变为变为+字形状，在指定位置处拖曳鼠标画出字形状，在指定位置处拖曳鼠标画出800600像素的布局表格。像素的布局表格。（4）在页面的合适位置上，按住在页面的合适位置上，按住Ctrl键，分别按题键，分别按题目要求画出目
50、要求画出5个布局表格。个布局表格。（5）在网页顶部的布局单元格中插入光标，单击【在网页顶部的布局单元格中插入光标，单击【插入】面板中【常用】选项卡的【插入】面板中【常用】选项卡的【Flash】按钮，或按钮，或选择【插入】选择【插入】|【媒体】【媒体】|【Flash】命令，此时可在网命令，此时可在网页顶部的布局单元格中，插入页顶部的布局单元格中，插入ch05文件夹中的文件夹中的Flash文件文件shu.swf。（6）在网页其他在网页其他5个布局单元格中分别插入光标，个布局单元格中分别插入光标，单击【插入】面板中【常用】选项卡的【图像】按钮，单击【插入】面板中【常用】选项卡的【图像】按钮，或选择【