《dreamweaver第八章 表格.docx》由会员分享，可在线阅读，更多相关《dreamweaver第八章 表格.docx（11页珍藏版）》请在三一文库上搜索。
1、使用表格可以清晰地显示列成表的数据，例如股票行情的数据列表。实际上表格的作用不只是显示数据，它还在网页定位上起着重要的作用。8.1使用HTML建立表格表格的建立将利用3个最基本的HTML标签来完成，它们分别是标签、标签和标签。建立一个最基本的表格，必须包含一组标签、一组标签以及一组标签，这也是最简单的单元格表格。标签的作用是定义一个表格， 标签的作用是定义一行，而标签的作用是定义一个单元格。8.1.1一个最简单的表格观察下面的代码。单元格单元格1单元格2单元格3单元格4单元格5单元格6注意代码中以粗体显示的语句。这就是一个最基本的表格，它只有3行2列，下面就详细讲解一下这3个标签。标签：它用于
2、标识一个表格，就如同标签一样，告诉浏览器这是一个表格。标签：它用于标识表格的一行，也就是建立一行表格，代码中有多少个标签，就表示有多少行的表格。标签：它用于标识表格的一列，也就是建立一个单元格，它必须放在标签里使用，一个标签内有多少个就表示这行里有多少列或是说有多少个单元格。8.1.2各种表格样式在上一节中介绍了表格的建立方法，但这样一个表格样式比较单一，在实际应用中还可以利用相关的HTML标签来设置表格的各种样式。下面就一一进行介绍。1. 表格边框的设置现在来了解一下标签中各属性的用法，首先是设置表格边框的样式。表格的边框属性单元格1单元格2注意代码中以粗体显示的语句。控制表格的边框共有3个
3、属性，分别是border、cellspacing和cellpadding属性。2. 表格高宽的控制对于表格的高、宽度也是通过height和width两个属性来控制的。表格的长宽课程教室语文东楼1-1注意代码中以粗体显示的语句。两者的语法结构为、，n代表一个数值，单位为像素（px），m代表0到100的数，即0%到100%，表格将相对于当前窗口大小的百分比来显示。注意，这里的高宽设置是整个表格的高宽设置。3. 表格相关颜色的设置下面介绍表格的边框和背景颜色的设置。表格的颜色设置课程教室语文东楼1-1英语西楼1-1注意代码中以粗体显示的语句。表格的边框颜色是通过bordercolor属性来设置的，表
4、格的边框颜色包括了表格的外框颜色和单元格的外框颜色。而表格的背景颜色是通过bgcolor属性来设置的，。8.2在Dreamweaver中创建和操纵表格有了上面的基础，再学习使用Dreamweaver制作表格就很容易了。选择“插入”菜单的“表格”命令，在出现的对话框中指定表格的行数、列数、列宽和边线宽度，这时文档窗口的文本光标处会出现一个空白表格。如果开始时不能确定这些参数，那么也可以使用默认值，后面还可以用属性面板来修改表格的外观。8.2.1在属性面板中控制表格Dreamweaver对表格的控制非常灵活。属性面板可以分别控制整个表格、表格的一行、表格的一列或一个单元格。属性面板的控制对象由选中
5、的对象决定。当把鼠标移到表格的四周时，鼠标指针的形状变为十字形，这时单击鼠标左键，表格四周出现一个框，表示选中整个表格。这时控制面板各项参数的作用如下。 行和列：设定表格的行数和列数。 宽和高：设定表格宽度和高度。可以通过浏览器窗口百分比或使用绝对像素数来定义。例如设定宽度为60%，即表格的宽度为浏览器窗口宽度的60%，如果访问者使用640像素宽的浏览器窗口，则表格宽度为384像素。当浏览器窗口大小变化时，表格的宽度也随之变化。如果设置表格宽度为400像素，那么无论浏览器窗口的大小为多少，表格的宽度都不会变。 填充：设定单元格中的内容与单元格边线之间的距离，缺省值为1。 间距：设定单元格之间的
6、距离，缺省值为2。 对齐：设定表格的对齐方式，居左、居中或居右。 和 ：清除行高和 列宽。 ：根据当前值，把列宽转换为绝对像素数。 ：根据当前值，把列宽转换为窗口宽度的百分比。 ：根据当前值，把行高转换为绝对像素数。 ：根据当前值，把行高转换为窗口高度的百分比。 边框：设定表格外框的宽度。如果设置为0，就可以选择菜单“查看/可视化助理表格边框”命令观察表格的外框。 背景颜色：设定表格的背景色。 边框颜色：设定表格框线的颜色。 背景图像：设定表格的背景图片。选取整个表格最方便的方法是把鼠标移到表格右边界的外侧，按下鼠标并向左拖拽，可以快速地选中整个表格。当把鼠标移到上边框附近，鼠标指针的形状变为
7、向下的箭头时，单击鼠标左键，可以选中表格的一列。当把鼠标移到左边框附近，鼠标指针的形状变为向右的箭头时，单击鼠标左键，可以选中表格的一行，这时的属性面板与列属性面板基本相同。这里介绍一个很有用的按钮 ，它可以把一列或一行单元格合并成一个。实际上，只要按住鼠标，划过几个相连的单元格，再释放鼠标，就可以选中这几个单元格，然后单击 按钮，就可以把选中的单元格合并成一个单元格。当选中一个单元格时，可以拆分单元格。单击 按钮，在出现的对话框中选择是沿横向还是沿纵向拆分单元格，并输入拆分出的单元格数。经过调整各个属性，把表格调整为我们需要的样子。在单元格中可以放置文字或图片，并且可以设置文本和图片的格式。
8、8.2.2实践与练习：制作“成绩单”表格本例着重练习在Dreamweaver中创建一个基本表格，其中会讲解创建表格时对行数、列数以及宽度等表格属性的设置，以及向表格里添加文本内容。（1）首先运行程序Dreamweaver 8，选择菜单栏“文件新建”命令，创建新文档。（2）创建好新文档之后，在文档窗口内输入表格的标题，这里输入“成绩单”，在属性面板中将其字体设为粗体并居中对齐，然后在文本的后面按键盘上“Enter”键以便插入表格。提示：在新建的文档中输入文字后，在属性面板中将文本设为居中对齐时，文本行会出现虚线，这些虚线是DIV标签。如果多输入一些段落文本后再进行居中对齐，就不会出现DIV标签。
9、（3）选择菜单栏“插入表格”命令，弹出“表格”对话框。（4）在“表格大小”里设置行数和列数及表格宽度。这里设置为“行数”5，“列数”6，“表格宽度”为300，单位设为“像素”。单击“确定”接钮，一个5行6列的表格就生成了。（5）表格创建好以后，开始对这表格输出数据。在第一行的第一个单元格内单击鼠标左键，确认文本光标在单元格内闪烁，从键盘输入“姓名”。在第一行的第二个单元格内单击鼠标左键或直接按键盘上的“”键，在第二个单元格内输入“数学”。（6）依次在各个单元格里输入数据。输入时，按键盘上“”键文本光标会下移到下一行的同一列单元格，按“”键文本光标会左移一个单元格，按“”键会上移到上一行的同一列
10、单元格。（7）输入完成后，可以根据需要对在属性面板中对单元格进行排列，在“水平”后面的下拉菜单中设置为“居中对齐”，然后按“Ctrl+S”保存文档，预览网页效果。8.2.3实践与练习：制作“旅游行程表”立体表格本例着重练习在Dreamweaver中创建一个“旅游行程表”，通过对表格边框的属性设置来创建一个有立体感的表格。（1）首先运行程序Dreamweaver 8，选择菜单栏“文件新建”命令，创建新文档。（2）创建好新文档之后，在文档窗口输入表格标题，这里输入“旅游行程表”，在属性面板中将文本的字体设为粗体并居中对齐。提示：在新建的文档中输入文字后，在属性面板中将文设为居中对齐时，文本行会出现
11、显线，如图8.17所示，这虚线是DIV标签。如果多输入些段落文后再进行居中对齐，就不会出现DIV标签。（3）选择菜单栏“插入表格”命令，或按键盘组合键“Ctrl+Alt+T”，或单击“常规”工具面板上的“表格”按钮，弹出“表格”对话框。（4）在“表格”对话框的“表格大小”里设置行数和列数及表格宽度。这里设置“行数为”4，“列数”为3，“表格宽度”为300，单位设为“像素”，“边框粗细”1。单击“确定”接钮，一个4行3列的有立体感表格就生成了。（5）鼠标在表格左边单击，并按住鼠标左键向右拖动，选中表格。此时属性面板就显示出该表格的属性。（6）修改属性面板上的“填充”、“间距”、“边框”的数值，就
12、可以改变表格的立体程度效果，如将“填充”、“间距”、“边框”的数值都设为8。（7）通过第（6）步的操作修改表格属性后立体效果过于强烈，需要再次修改相关数值，得到适当的立体效果后，开始对这表格输出数据。（8）在第一行的第一个单元格内单击鼠标左键，确认文本光标在单元格内闪烁，从键盘输入“日期”。按键盘上的“”键，在第二个单元格内输入“上午”，第三单元格输入“下午”。（9）输入完后，可以根据需要对文本进行一些编辑，如颜色设置、居中等。然后按菜单“文件保存”命令，保存文档，预览网页效果。8.2.4实践与练习：制作“旅游行程表”双线表格本例着重练习在Dreamweaver中创建一个“旅游行程表”，通过对
13、表格的边框及边框颜色的设置来创建双线表格。（1）首先运行程序Dreamweaver 8，选择菜单栏“文件新建”命令，创建新文档。（2）创建好新文档之后，在文档窗口内单击鼠标左键，确认文本光标在文档区域内闪烁。接着就可以直接在文档区域内输入相关的文字信息。这里输入“旅游行程表”作为表头，设字体为粗体、颜色为红色。（3）选择菜单栏“插入表格”命令，插入一个“行数”为4、“列数”为3、“表格宽度”为300，单位设为“像素”、“边框粗细”为1，单击“确定”接钮。（4）此时鼠标在表格右边闪烁，按鼠标向左拖动，选中表格。此时属性面板显示出该表格的属性。（5）单击属性面板中“间距”后的小方框，输入数字“2”
14、，“边框”保持默认的“1”，此时“边框颜色”未设置。（6）单击属性面板中“边框颜色”后的小色块，弹出颜色编辑器，吸取边框颜色，如图8.30所示。吸取颜色后边框背景色被设为桔黄色。（7）完成（5）（6）步操作后，表格效果就成了双线表格效果。至此双线表格制作完了。（8）在第一行的第一个单元格内单击鼠标左键，确认文本光标在单元格内闪烁，输入“日期”。按键盘上的“Tab”键，文本光标就会跳到下一个单元格，依次在各单元格中输入数据。（9）输入完后，可以根据需要对输入文字的相关属性进行一些编辑。然后选择菜单“文件保存”命令，保存文档，预览网页效果。8.2.5实践与练习：制作“图书信息表”单线表格本例着重练
15、习在Dreamweaver中创建一个“图书信息表”，通过对表格的间距、表格背景色及单元格背景色的设置来创建单线表格。（1）首先运行程序Dreamweaver 8，选择菜单栏“文件新建”命令，创建新文档。（2）创建好新文档之后，输入“图书信息表”作为表头，在属性面板中设字体颜色为桔黄色并居中对齐，单击键盘上的“Enter”键，以便插入表格。（3）选择菜单栏“插入表格”命令，插入一个“行数”4、“列数”4、“表格宽度”为300，单位设为“像素”，单击“确定”接钮，创建一表格。（4）此时鼠标在表格右边闪烁，按鼠标左键拖动，选中表格。单击属性面板中“间距”右边的小方框，输入数字“1”，“边框”右边的小
16、方框内输入数字“0”。（5）单击属性面板中“背景颜色”右边的小色块，此时会弹出颜色编辑器，在颜色编辑器中选取颜色。（6）选取颜色后表格的背景色被设为桔黄色。（7）在第一行的第一个单元格内单击鼠标左键，确认文本光标在单元格内闪烁，按住鼠标向表格的右下角拖动，直到所有的单元格被选中。（8）选中所有单元格后松开鼠标，在属性面板上单击“背景颜色”后的小方块。在颜色编辑器中选取白色，将单元格的背景颜色设为白色。（9）单元格的背景颜色设为白色后，表格就成了单线表格了。单线的宽度由属性面板中“间距”右边的小方框内输入的数字决定。（10）在第一行的第一个单元格内单击鼠标左键，从键盘输入“书名”。按键盘上的“T
17、ab”键，在第二个单元格里输入“编号”，依次输入各单元格的数据。（11）输入完后，可以根据需要对输入文字进行一些编辑。然后按菜单“文件保存”命令，保存文档，预览网页效果。8.2.6 实践与练习：制作“会议议程表”无线表格本例着重练习在Dreamweaver中创建一个“会议议程表”，通过对表格的行列的选取、列的选取、单元格的选取，对单元格内的文本进行属性设置。（1）首先运行程序Dreamweaver 8，选择菜单栏“文件新建”命令，创建新文档。（2）创建好新文档之后，输入“会议议程表”作为表头，在属性面板中设字体颜色为红色、粗体并居中对齐。（3）选择菜单栏“插入表格”命令，插入一个“行数”3、“
18、列数”5、“表格宽度”为580、单位设为“像素”，单击“确定”接钮，创建一表格。（4）此时鼠标在表格右边闪烁，按住鼠标向左拖动选取整个表格，查看表格的属性。此时属性面板中“填充”、“间距”、“边框”右边的小方框内都是空白无任何数字。如果有数字，选中后按键盘上的“Delete”键将其删除，这样的表格就是无线表格。（5）无线表格创建后，在第一行的第一个单元格内单击鼠标左键，输入“时间”。按键盘上的“Tab”键，依次输入各单元格的文本。（6）将鼠标移到表格第一行的左边，使鼠标变成向右指示的箭头形状，并且第一行的所有单元格都变成红线格。（7）然后单击鼠标左键，整个表格的第一行就被选中了，这一行的所有单
19、元格变成了黑线格。（8）选中第一行后，在属性面板中设置字体为粗体、居中对齐、字体颜色为桔红色，参考值是“#FF6600”。提示：对表格第一行设置字体属性后，单元格带虚线了，这是DIV标签。（9）单击第二行第二列的单元格，按住鼠标向表格的右下角拖动鼠标，选中表格的第二行第二列开始的所有单元格。（10）在属性面板中设置居中对齐。然后按菜单“文件保存”命令，保存文档，预览网页效果。8.2.7 实践与练习：套用设计方案制作“会议议程表”本例着重练习在Dreamweaver中创建一个“会议议程表”，通过对表格执行“格式化表格”命令，套用设计方案。（1）首先运行程序Dreamweaver 8，选择菜单栏“
20、文件新建”命令，创建新文档。（2）创建好新文档之后，输入“会议议程表”作为表头，在属性面板中设字体颜色为深蓝色并居中对齐。（3）选择菜单栏“插入表格”命令，插入一个“行数”为4，“列数”为5，“表格宽度”为580，单位设为“像素”，单击“确定”接钮，创建一个表格。（4）在第一行的第一个单元格内单击鼠标左键，输入“时间”。按键盘上的“Tab”键，依次输入各单元格的文本。（5）将鼠标移到表格的外边线上，鼠标箭头变成向左向右指示形，表格外边线变成红线。此时单击鼠标左键选中表格。（6）选择菜单栏“命令格式化表格”命令，弹出格式化表格对话框。（7）在格式列表里选择已存在的设计方案，点击“确定”按钮，套用
21、设计方案，从而格式化被选中的表格。（8）如果对设计方案不满意，可以在格式化对话框中进行修改。在这里修改“行颜色”，“第一种”设为桔黄色，第二种设为浅黄色；修改“第一行”，“对齐”为居中对齐，“文字样式”为粗体，“背景色”设为深紫色；“最左列”的“对齐”设为居中对齐，点击“确定”按钮应用新设计的方案。（9）然后选择菜单栏“文件保存”命令，保存文档，预览网页效果。8.2.8实践与练习：用表格制作“绿叶乡舟”网页顶部本例着重练习在Dreamweaver中创建复杂的表格。主要通过拆分单元格，合并单元格，插入行，插入列等操作，制作一个复杂的表格。（1）首先运行程序Dreamweaver 8，选择菜单栏“
22、文件新建”命令，创建新文档。（2）选择菜单栏“插入表格”命令，创建一个3行3列，表格宽度为775的表格。 （3）选中表格，在属性面板上的“填充”、“间距”、“边框”右边方框内都输入“0”，“对齐”设为“居中对齐”。（4）先选中表格第一行的所有单元格，单击属性面板上的“行”下方的“合并所有单元格，使用跨度”按钮，合并被选中的单元格。（5选中合并后的单元格，在属性面面中将单元格背景色设为黄绿色。（6）在第二行第一列单元格中单击鼠标左键，选择菜单栏“插入图像”命令，插入一张图片，读者可以打开光盘文件：CD-RomCH088.2.8logotran.gif。插入图片后，第一列变得很宽了，此时将鼠标放到
23、第一列的右边线上，鼠标变成了双向箭头。按住鼠标向左拉边线，直到拉不动为止。（7）单击第二行的第三列单元格，在属性面板中设“宽”为100、“背景色”为绿色。然后单击属性面板上的“拆分单元格为行或列”按钮。（8）此时弹出“拆分单元格”对话框，点击“行”前的小圆，“行数”为“5”，点击“确定”按扭。（9）通过上一步的操作，就将该单元格拆成五行了，将拆分后的第1行和第5行的行高设为“5”，在中间三行中输入文字，并设置CSS样式。CSS样式的具体设置方法在实例“在计算机发展史文档中设置使用CSS”中详细讲解了，这里就不具体讲解了。（10）选中“返回首页”文本，在属性面板中，单击 “浏览文件”按钮，在弹出
24、的“选择文件”对话框中选择链接文件。同样的方法为“联系我们”、“加入收藏”文本创建链接。（11）单击第二行的第二列单元格，选中该单元格，单击属性面板上“背景”右边的“单元格背景URL”按钮。 （12）此时弹出“选择图像源文件”对话框，在对话框的“查找范围”列表里找到背景图片，读者可以打开光盘文件：CD-RomCH088.2.8bg.jpg。点击“确定”按钮。这就为单元格添加了背景图。（13）添加背景图后，在第二行的第二列单元格输入文本“绿叶乡舟”。分别对“绿叶乡舟”和“”设置并应用CSS样式。（14）现在感觉这个表格的第三行没什么意义，选中第三行所有单元格，按键盘上“Delete”键，删除该行
25、。（15）然后选择菜单栏文件保存命令，保存文档，预览网页效果。8.2.9实践与练习：制作自动伸缩表格页面本例着重练习在Dreamweaver中创建自动伸缩表格，使表格能随页面窗口的拉大而放大，能随页面窗口的缩小而缩小，从而使页面能适配窗口，并使用这个自动伸缩表格布局制作一个简单的网页。（1）首先运行程序Dreamweaver 8，选择菜单栏“文件新建”命令，创建新文档。（2）选择菜单栏“插入表格”命令，创建一个3行3列、表格宽度为100%的表格。 （3）选中表格，在属性面板的“间距”右边方框内输入“0”。选中第一行第一列单元格，在属性面板上“高”右边的方框内输入“60”。（4）选中第二行，在属
26、性面板上“高”右边的方框为输入“400”。同样的选中第三行，在属性面板上“高”右边的方框内输入“30”。（5）表格的行高都设置好了，为了查看效果，分别选中第一行和第三行，在属性面板上“背景颜色”的后设背景色为“#996633”；选中，在属性面板上“背景色”后设背景色“#996633”。（6）按菜单文件保存命令，保存文档，预览网页效果，向左右拉动窗口就能看了表格的自动伸缩效果了。（7）再回到Dreamweaver 8的编辑环境中来，继续对文档的操作，制作一个简单的网页。选中第一行的所有单元格，单击属性面板上的“行”下方的“合并所有单元格，使用跨度”按钮，合并被选中的单元格。（8）单击第一行合并后
27、的单元格，在属性面板上单击“垂直”右边的下拉菜单，在垂直列表中选“居中”。使单元格中的内容在垂直方向居中。（9）从键盘上输入文字作为网页头，这里输入“京剧名角”，选中输入的文本，在属性面板上设置“字体”、“大小”、“文本颜色”、“文本缩进”等，这些都根据需要来设定。（10）单击第二行第二列的单元格，选择菜单栏“插入图像”命令，插入一张图片，读者可以打开光盘文件：CD-RomCH088.2.9ibbdd.jpg，插入一张“京剧名角”的图片。选中该图片，将鼠标放到图片的右下角按住鼠标不松开，并同时按住键盘上的“Shift”功能键，对图片的大小进行适当的缩放，使其适合页面的需要。（11）选中第三行的
28、所有单元格，单击属性面板上的“行”下方的“合并所有单元格，使用跨度”按钮，合并单元格。单击合并后的单元格，在属性面板中设“水平”为“居中对齐”、“垂直”为“居中”。然后输入文本，作为网页的底部，这里输入“京剧名角网版权所有”，设“文本颜色”为“白色”。（12）选择菜单栏文件保存命令，保存文档。一个用伸缩表格布局的简单网页就做好了，预览网页效果。8.2.10实践与练习：嵌套表格制作一个简单的网页本例着重练习在Dreamweaver中创建表格，并通过嵌套表格来实现对网页的布局，制作一个有导航栏的简单的网页，并使代码高度和可视高度一致。（1）首先运行程序Dreamweaver 8，选择菜单栏“文件新
29、建”命令，创建新文档。（2）选择菜单栏“插入表格”命令，插入一个1行1列宽度为100%的表格，选中表格，在属性面板中设该表格的“高”为“100%”，“间距”为“0”、“边框”为“0”。（3）在表格的单元格内单击，在属性面板中，设单元格的“水平”为“居中对齐”、“垂直”为“居中”。此时光标就在单元格的正中闪烁。（4）选择菜单栏“插入表格”命令，插入一个3行3列的表格，选中表格，在属性面板中设该表格的“宽”为600 像素，“高”为360像素，“填充”为0，“间距”为0，“边框”为0。插入表格后，就在第一个表格中嵌套了一个表格，嵌套进来的表格居于第一个表格的中心。（5）第一个表格就是帮助网页定位的，
30、嵌套进来的表格是网页部分，接下来就在嵌套表格里进行操作。分别选中第一行的各个单元格，然后单击属性面板上“背景”右边的“单元格背景URL”按钮，准备为各个单元格添加背景。 （6）单击“单元格背景URL”按钮后，会弹出“选择图像源文件”对话框，在对话框的“查找范围”列表里找到背景图片，读者可以打开光盘文件：CD-RomCH088.2.10bg.jpg，点击“确定”按钮。这就为第一行各个单元格添加了背景图。（7）为第一行添加背景图后可以看到，背景图片超出了第一行的单元格，所以需要设置单元格的相关属性。单击第一行第一列单元格，在属性面板中设置单元格的属性，“宽”为240，“高”为59，如图8.94所示
31、。然后在该单元格中输入网页名字，这里输入“名香艺馆”，设置CSS样式并应用于字体。（8）在第一行第二列单元格内单击，在属性面板中设置“水平”为居中对齐，“垂直”为底部，“宽”为260。输入文本“名香 香艺”，设置CSS样式时将字体颜色设为“#999900”。这样网页的顶部就制作完成了。（9）选取第三行的所有单元格，单击属性面板上的“行”下方的“合并所有单元格，使用跨度”按钮，合并这一行。在这一行的单元格内单击，在属性面板上设“高”为40、“背景色”为黑色。在单元格中输入文本“前沿工作室 电话：010-00000000”，然后在属性面板中设置文本在单元格中“居中对齐”。设置CSS样式，将大小设为
32、“12”，颜色为白色。这样网页的底部就制作完成了。（10）选取第二行的所有单元格，合并单元格。单击合并后的单元格，选择菜单栏“插入表格”命令，在第二行的单元格中插入一个1行2列的表格。选中该表格，在属性面板中设“宽”、“高”都为100%，“间距”为0。这是网页的中间主体部分。（11）单击在第10步中插入的表格左列的单元格，在属性面板中输入“宽”为“20%”、“背景色”为浅灰色，设置“垂直”为“顶端”。然后选择菜单栏“插入表格”命令插入一个8行1列，宽度为100%的表格作为导航栏。（12）选中导航栏表格，“间距”设为0，各行的“高”分别交替地设为6、20。行高为“20”的单元格的背景色设为桔黄色
33、。（13）此时发现行高为“6”的单元格的高度与可视高度不一致。此时单击行高为“6”的单元格，然后点击“代码”按钮，进入代码视图。（14）在光标闪烁处有“ ”代码，删除此代码。同样的方法把其他行高为“6”的单元格在代码视图中删除“ ”代码。这样，行高的代码高度就和可视高度就一致了。（15）在行高为“20”的单元格中输入文本，设置并应用CSS样式，导航栏就制作完成了。（16）单击第（10）步操作中嵌入的表格的右列单元格，选择菜单栏“插入图像”命令，插入一张图片，读者可以打开光盘文件：CD-RomCH088.2.108.2.10.jpg，按住键盘上的“Shift”键调整图片的大小
34、。（17）选中图片，在属性面板中设“对齐”为“左对齐”，使图片与文本左对齐。然后输入文本，并设计文本的CSS样式。（18）按菜单栏“文件保存”命令，保存文档，预览网页效果。8.2.11实践与练习：对“成绩单”表格排序本例着重练习在Dreamweaver中创建表格，通过菜单“命令排序表格”命令，以表格的某一列为基础对表格进行升序或降序排列。（1）首先运行程序Dreamweaver 8，选择菜单栏“文件新建”命令，创建新文档。（2）创建好新文档之后，输入标题文本“成绩单”，选中“成绩单”文本，然后在属性面板中设“粗体”，“文本颜色”为红色，对齐方式为“居中对齐”。注意，这里的虚线框是DIV标签。（
35、3）在文本后面插入文本光标，然后选择菜单栏“插入表格”命令，插入一个“行数”为5，“列数”为6，“表格宽度”为300，单位设为“像素”，单击“确定”接钮，嵌套一个新表格。（4）选中嵌套表格，在属性面板中设“间距”为1、“边框”为0，点击“背景颜色”右边的小色块，设置表格的背景色为桔黄色。（5）在第一行的第一个单元格内单击鼠标左键，确认文本光标在单元格内闪烁，按住鼠标向表格的右下角拖动，直到所有的单元格被选中，在属性面板上单击“背景颜色”后的小色块，将单元格的背景颜色设为白色。这样就使表格成为桔黄色单线表格。（6）单击第一行第一个单元格，选择菜单栏“插入图像”命令，插入一张图片作为表格的分割线，
36、读者可以打开光盘文件：CD-RomCH088.2.118.2.11.jpg。提示：插入的“分割线”是先在绘图软件中根据表格的设计需要而绘制并保存的图片。（7）在第一行的第二个单元格内输入“数学”。按键盘上的“Tab”键，依次在各单元格中输入文本，在属性面板中将文本的对齐方式设为“居中对齐”。（8）按键盘组合键“Ctrl+A”全选表格标题和表格，按键盘组合键“Ctrl+C”复制表格标题和表格，然后将文本光标插入到该表格的后面，按键盘功能键“Enter”后，按键盘组合键“Ctrl+V”粘贴表格标题和表格。（9）此时会在文档窗口中弹出一个“图像描述（Alt文本）”对话框。在这里单击“取消”按钮即可。
37、提示：如果选择的表格中没有插入图片，在上述步骤中复制粘贴该表格时，就不会弹出“图像描述（Alt文本）”对话框。因为在Dreamweaver 8中复制粘贴图片时，都会弹出该对话框。（9）在第一个表格标题“成绩单”后单击鼠标左键，输入“（以数学成绩排序）”并选中它，然后在属性面板中设置文本颜色为黑色。同样方法在第二个表格标题“成绩单”后输入并设置“（以英语成绩排序）”。（10）选中第一个表格，即“以数学成绩排序”的表格，选择菜单栏“命令排序表格”命令，弹出“排序表格”对话框。（11）在排序下拉列表中选列2，因为“数学”成绩是在第二列，在顺序中“按数字排序”“降序”。点击“确定”铵钮，表格就以“数学”成绩降序排列了。（12）选中第二个表格，即“以英语成绩排序”的表格，选择菜单栏“命令排序表格”命令。在“排序表格”对话框中，在排序下拉列表中选列3，因为“英语”成绩是在第3列，在顺序中选择“按数字排序”、“降序”。点击“确定”铵钮，表格就以“英语”成绩降序排列了。（13）然后选择菜单栏“文件保存”命令，保存文档，预览网页效果。