（中职）网页设计与制作教程5.ppt

《（中职）网页设计与制作教程5.ppt》由会员分享，可在线阅读，更多相关《（中职）网页设计与制作教程5.ppt（51页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、YCF正版可修改PPT（中职）网页设计与制作教程5项目活动五公司网站建设项目活动五公司网站建设:表格在页面表格在页面中的应用中的应用任务一表格的基本操作任务一表格的基本操作任务二特殊表格的制作任务二特殊表格的制作任务三公司网站建设任务三公司网站建设返回任务一表格的基本操作任务一表格的基本操作一、插入表格一、插入表格在网页中插入表格，在网页中插入表格，可以使用以下几种方法。可以使用以下几种方法。方法一方法一:在菜单栏上执行在菜单栏上执行“插入插入”“表格表格”命令。命令。方法二方法二:在在“插入插入”工具栏的工具栏的“常用常用”选项卡中单击选项卡中单击“表格表格”图标。图标。方法三方法三:在在“

2、插入插入”工具栏的工具栏的“布局布局”选项卡中单击选项卡中单击“表格表格”图标。图标。利用以上几种方法都可以弹出利用以上几种方法都可以弹出“表格表格”对话框，对话框，在该对话框中可以在该对话框中可以设置表格的属性，设置表格的属性，这些都是在设计面板中完成的，这些都是在设计面板中完成的，参数设置完成后，参数设置完成后，单击单击“确定确定”按钮，按钮，插入表格，插入表格，如如图图 所示所示。“表格表格”对话框分为三个部分，对话框分为三个部分，它们被灰色的线区分开。它们被灰色的线区分开。下一页返回任务一表格的基本操作任务一表格的基本操作.表格大小表格大小在这一部分中可以对表格的基本数据进行设置。在这

3、一部分中可以对表格的基本数据进行设置。“行数行数”选项和选项和“列列”选项用来设置表格的行数和列数。选项用来设置表格的行数和列数。“表格宽度表格宽度”的设置有两种，的设置有两种，一种是像素，一种是像素，另一种是百分比。另一种是百分比。以像素为单位来进行宽度设置时，以像素为单位来进行宽度设置时，可以精确地设置表格的宽度可以精确地设置表格的宽度,以百分比为单位设置宽度时，以百分比为单位设置宽度时，会按比例会按比例来显示表格的宽度。来显示表格的宽度。“边框粗细边框粗细”选项用于以像素为单位来设置表选项用于以像素为单位来设置表格的边框，格的边框，如果不希望表格的边框在浏览器中显示出来，如果不希望表格的

4、边框在浏览器中显示出来，可以将它可以将它的值设置为。的值设置为。“单元格边距单元格边距”就是指在单元格中插入的对象与单就是指在单元格中插入的对象与单元格边框之间的距离。元格边框之间的距离。“单元格间距单元格间距”是指单元格与单元格之间的是指单元格与单元格之间的距离距离。上一页 下一页返回任务一表格的基本操作任务一表格的基本操作.标题标题用于对表格进行页眉的设置，用于对表格进行页眉的设置，有四种标题设置方式。有四种标题设置方式。选择选择“无无”可可以将其设置为没有标题的表格以将其设置为没有标题的表格,选择选择“左左”“顶部顶部”“两者两者”这三种这三种可以将标题的位置设置为相应的位置。凡被设置为

5、页眉栏的表格，可以将标题的位置设置为相应的位置。凡被设置为页眉栏的表格，其其内部的文字就会自动加粗处理、居中显示。内部的文字就会自动加粗处理、居中显示。如如图图 所示为使用所示为使用“顶部顶部”页眉模式制作的一个简单的职称表。页眉模式制作的一个简单的职称表。在制作这个职称表时，在制作这个职称表时，设置好顶部页眉后，设置好顶部页眉后，就可以直接在第一行中就可以直接在第一行中输入输入“姓名姓名”“性别性别”“职称职称”。由于页眉的设置，由于页眉的设置，这些字样会与这些字样会与其他单元格中的不一样。其他单元格中的不一样。从从图图 中可看出，中可看出，被设置为页眉栏的被设置为页眉栏的单元格中的文字都被

6、加粗处理、居中显示了，单元格中的文字都被加粗处理、居中显示了，而没有被设置为页眉栏而没有被设置为页眉栏的单元格则依然保持原来的状态。的单元格则依然保持原来的状态。上一页 下一页返回任务一表格的基本操作任务一表格的基本操作.辅助功能辅助功能用户在这里可以设置表格的标题，用户在这里可以设置表格的标题，并可以通过并可以通过“标题标题”选项对表格选项对表格的标题和显示位置进行设置。的标题和显示位置进行设置。“摘要摘要”部分是对这个表格的一些说部分是对这个表格的一些说明，明，使用屏幕阅读器可以读取摘要，使用屏幕阅读器可以读取摘要，不过这个摘要不会显示在用户不过这个摘要不会显示在用户的浏览器中。的浏览器中

7、。设置完毕后单击设置完毕后单击“确定确定”按钮就可以将表格插入到文按钮就可以将表格插入到文档中档中。二、选择表格二、选择表格在对这些插入好的表格进行进一步的编辑时，在对这些插入好的表格进行进一步的编辑时，要先选择这个表格。要先选择这个表格。除了能够选择整个表格，除了能够选择整个表格，还需要能够选择表格的行、列及单元格。还需要能够选择表格的行、列及单元格。上一页 下一页返回任务一表格的基本操作任务一表格的基本操作.选择整个表格选择整个表格如果表格处于选中状态，如果表格处于选中状态，那么表格周围就会出现一个黑边框，那么表格周围就会出现一个黑边框，这个这个边框的右边和下面附带有黑色的控制点。边框的右

8、边和下面附带有黑色的控制点。选择整个表格的方法如下选择整个表格的方法如下:方法一方法一:将光标移动到表格的左上角、上边框或下边框外的附近区域，将光标移动到表格的左上角、上边框或下边框外的附近区域，在光标的右下角出现一表格的缩略图时，在光标的右下角出现一表格的缩略图时，单击鼠标左键就可以将这个单击鼠标左键就可以将这个表格选中。表格选中。方法二方法二:将光标定位到表格的任一单元格中，将光标定位到表格的任一单元格中，然后单击该表格对应的然后单击该表格对应的 标签，就可以将这个表格选中。标签，就可以将这个表格选中。方法三方法三:将光标定位到表格的任一单元格中，将光标定位到表格的任一单元格中，然后按下然

9、后按下“”组合键两次就可以选中表格组合键两次就可以选中表格。方法四方法四:将光标定位到表格的任一单元格中，将光标定位到表格的任一单元格中，执行菜单执行菜单“修改修改”“表格表格”“选择表格选择表格”命令即可选中表格。命令即可选中表格。上一页 下一页返回任务一表格的基本操作任务一表格的基本操作.选择表格的行选择表格的行为了使选中的部分能够和没有选中的部分区分开，为了使选中的部分能够和没有选中的部分区分开，当用户选择了某行当用户选择了某行时，时，行的周围都带有黑色的边框，行的周围都带有黑色的边框，将光标指向当前选中的行，将光标指向当前选中的行，所有所有单元格的周围都带有红色边框。单元格的周围都带有

10、红色边框。选择表格行的方法如下选择表格行的方法如下:方法一方法一:将光标定位到要选择行的任一单元格中，将光标定位到要选择行的任一单元格中，然后在选择器上单然后在选择器上单击相对应行的击相对应行的 标记，标记，即可选择行。即可选择行。方法二方法二:将光标移动到要选择行的左边框附近位置，将光标移动到要选择行的左边框附近位置，当鼠标指针变为当鼠标指针变为一个指向右的黑色箭头形状时，一个指向右的黑色箭头形状时，单击鼠标即可选择行。单击鼠标即可选择行。方法三方法三:将光标定位到要选择行的第一个单元格中，将光标定位到要选择行的第一个单元格中，按住鼠标左键拖按住鼠标左键拖动至该行的最后一个单元格，动至该行的

11、最后一个单元格，即可选择行。即可选择行。上一页 下一页返回任务一表格的基本操作任务一表格的基本操作.选择表格的列选择表格的列当用户选择了列以后，当用户选择了列以后，它的显示状态和行的状态一样，它的显示状态和行的状态一样，不同的是它不同的是它们的选择方式。们的选择方式。选择表格列的方法如下选择表格列的方法如下:方法一方法一:将光标移动到要选择列的上边框附近位置，将光标移动到要选择列的上边框附近位置，当鼠标指针变为当鼠标指针变为一个指向下的黑色箭头形状时，一个指向下的黑色箭头形状时，单击鼠标即可选择列。单击鼠标即可选择列。方法二方法二:将光标定位到要选择列的第一个单元格中，将光标定位到要选择列的第

12、一个单元格中，按住鼠标左键拖按住鼠标左键拖动至该列的最后一个单元格，动至该列的最后一个单元格，即可选择列。即可选择列。.选择表格的单元格选择表格的单元格对表格的行和列的选择已经非常熟悉时，对表格的行和列的选择已经非常熟悉时，单元格的选择就已经不再困单元格的选择就已经不再困难了。难了。用户可以在表格中的某个单元格内单击，用户可以在表格中的某个单元格内单击，然后按住鼠标向相然后按住鼠标向相邻单元格方向拖动鼠标就可以选中这个单元格。邻单元格方向拖动鼠标就可以选中这个单元格。使用快捷键进行选择使用快捷键进行选择时要先在某个单元格内单击一下，时要先在某个单元格内单击一下，然后按然后按“”组合键组合键即可

13、将这个单元格选中。即可将这个单元格选中。上一页 下一页返回任务一表格的基本操作任务一表格的基本操作如果要选择连续单元格，如果要选择连续单元格，按住鼠标左键拖动，按住鼠标左键拖动，即可选择连续单即可选择连续单元格元格,如果要选择不连续单元格，如果要选择不连续单元格，将光标定位到单元格中，将光标定位到单元格中，按按 键并单击就可以选择任意不相邻的单元格。键并单击就可以选择任意不相邻的单元格。三、表格属性的设置三、表格属性的设置表格属性的设置主要通过表格属性的设置主要通过“表格表格”属性面板来进行。属性面板来进行。选中表格，选中表格，属属性面板就会变成性面板就会变成“表格表格”属性，属性，如如图图

14、所示。所示。主要选项介绍如下主要选项介绍如下:“行行”和和“列列”:可以直接在可以直接在“行行”和和“列列”后的文本框中输入行后的文本框中输入行数和列数，数和列数，以调整原来表格的结构。以调整原来表格的结构。“宽度宽度”:用来设置表格的宽度，用来设置表格的宽度，默认单位为像素，默认单位为像素，也可以为百分比也可以为百分比“填充填充”:用来设置单元格内部空白的大小，用来设置单元格内部空白的大小，单位为像素。单位为像素。“间距间距”:用来设置单元格之间的距离，用来设置单元格之间的距离，单位为像素。单位为像素。上一页 下一页返回任务一表格的基本操作任务一表格的基本操作“边框边框”:用来设置表格边框的

15、宽度，用来设置表格边框的宽度，单位为像素。单位为像素。“对齐对齐”:用来设置表格的对齐方式，用来设置表格的对齐方式，对齐方式有对齐方式有“默认默认”“左对齐左对齐”“居中对齐居中对齐”和和“右对齐右对齐”。和和 按钮按钮:分别用来清除表格的列宽和行高。分别用来清除表格的列宽和行高。和和 按钮按钮:分别用来将表格的列宽转换为像素和将表格的列宽转分别用来将表格的列宽转换为像素和将表格的列宽转换为百分比。换为百分比。四、单元格属性的设置四、单元格属性的设置在网页中既可以对表格进行属性设置，在网页中既可以对表格进行属性设置，也可以对单元格进行属性设置。也可以对单元格进行属性设置。选择单元格，属性面板就

16、会变成选择单元格，属性面板就会变成“单元格单元格”属性，属性，如如图图 所示。所示。上一页 下一页返回任务一表格的基本操作任务一表格的基本操作在在“单元格单元格”属性面板中可以对单元格进行一些设置和修改，属性面板中可以对单元格进行一些设置和修改，主要主要选项介绍如下选项介绍如下:“水平水平”:用来设置单元格内容的水平对齐方式，用来设置单元格内容的水平对齐方式，水平对齐方式有水平对齐方式有“默认默认”“左对齐左对齐”“居中对齐居中对齐”和和“右对齐右对齐”。“垂直垂直”:用来设置单元格内容的垂直对齐方式，用来设置单元格内容的垂直对齐方式，垂直对齐方式有垂直对齐方式有“默认默认”“顶端顶端”“居中

17、居中”“底部底部”和和“基线基线”。“宽宽”和和“高高”:用来设置单元格的宽度和高度，用来设置单元格的宽度和高度，单位为像素或百分单位为像素或百分比。比。“不换行不换行”:当单元格中的文本超过它的宽度时，当单元格中的文本超过它的宽度时，该单元格的宽将会该单元格的宽将会自动发生改变以适应过长的文本。自动发生改变以适应过长的文本。上一页 下一页返回任务一表格的基本操作任务一表格的基本操作“标题标题”:用来设置单元格文字为标题格式。用来设置单元格文字为标题格式。通常在使用表格时把表通常在使用表格时把表格的第一行或第一列单元格设置为标题单元格，格的第一行或第一列单元格设置为标题单元格，也称为表头。也称

18、为表头。如果如果对对“标题标题”复选框进行选择，复选框进行选择，那么被选择的单元格都将被设置为标那么被选择的单元格都将被设置为标题单元格。题单元格。而被设置为标题的单元格中的内容将被加粗显示出来，而被设置为标题的单元格中的内容将被加粗显示出来，以表明该单元格中的内容已经被设置为标题。以表明该单元格中的内容已经被设置为标题。“背景颜色背景颜色”:用来设置单元格的背景颜色。用来设置单元格的背景颜色。和和 按钮按钮:分别用来合并单元格和拆分单元格。分别用来合并单元格和拆分单元格。五、表格的修改五、表格的修改.插入行和列插入行和列()如果要插入一行，如果要插入一行，将光标定位在最后一行的任一单元格中，

19、将光标定位在最后一行的任一单元格中，单单击鼠标右键，击鼠标右键，在弹出的快捷菜单中选择在弹出的快捷菜单中选择“表格表格”“插入行或列插入行或列”命令，命令，弹出弹出“插入行或列插入行或列”对话框，对话框，如如图图 所示。所示。上一页 下一页返回任务一表格的基本操作任务一表格的基本操作()设置对话框设置对话框“位置位置”选项为选项为“所选之下所选之下”，“行数行数”为为“”，单击单击“确定确定”按钮即可。按钮即可。用同样的方法也可以插入一列。用同样的方法也可以插入一列。.删除行和列删除行和列删除行和列的方法很简单，删除行和列的方法很简单，下面介绍三种方法。下面介绍三种方法。方法一方法一:选中要删

20、除的行或者列，选中要删除的行或者列，单击鼠标右键，单击鼠标右键，在弹出的快捷菜单在弹出的快捷菜单中选择中选择“表格表格”“删除行删除行”或者或者“表格表格”“删除列删除列”命令即可。命令即可。方法二方法二:选中要删除的行或者列，选中要删除的行或者列，选择菜单选择菜单“修改修改”“表格表格”“删除行删除行”或或“修改修改”“表格表格”“删除列删除列”命令即可。命令即可。方法三方法三:选中要删除的行或列，选中要删除的行或列，按按 键即可。键即可。上一页 下一页返回任务一表格的基本操作任务一表格的基本操作 合并和拆分单元格合并和拆分单元格在使用表格进行网页的布局时，在使用表格进行网页的布局时，表格并

21、不是单独地放在网页里面的，表格并不是单独地放在网页里面的，而是有层次地在表格里面再嵌套表格，而是有层次地在表格里面再嵌套表格，或将一个单元格拆分为几个单或将一个单元格拆分为几个单元格，元格，也可以把多个单元格合并在一起。也可以把多个单元格合并在一起。在在 中，中，一个单元格可以扩展到多行或多列的大小。一个单元格可以扩展到多行或多列的大小。而合并单元格可而合并单元格可以将以将多个单元格合并为一个较大的单元格。多个单元格合并为一个较大的单元格。中可以使用以下三种方法来合并和拆分单元中可以使用以下三种方法来合并和拆分单元格。格。方法一方法一:利用利用“属性属性”面板中的面板中的“合并合并”按钮按钮

22、和和“拆分拆分”按钮按钮方法二方法二:选择菜单选择菜单“修改修改”“表格表格”“合并单元格合并单元格”或者或者“修改修改”“表格表格”“拆分单元格拆分单元格”命令。命令。上一页 下一页返回任务一表格的基本操作任务一表格的基本操作方法三方法三:单击鼠标右键，单击鼠标右键，在弹出的快捷菜单中选择在弹出的快捷菜单中选择“表格表格”“合并合并单元格单元格”或者或者“表格表格”“拆分单元格拆分单元格”命令进行操作。命令进行操作。合并单元格时，合并单元格时，选择的几个单元格必须都是相邻的，选择的几个单元格必须都是相邻的，并且还要在一并且还要在一个矩形的范围内才能被合并。个矩形的范围内才能被合并。如果选择的

23、单元格不相邻或没有形成一如果选择的单元格不相邻或没有形成一个矩形的范围，个矩形的范围，那么它们就无法合并为一个单元格。那么它们就无法合并为一个单元格。拆分单元格就拆分单元格就比较简单了，比较简单了，不过它要求只能选择一个单元格来进行拆分。不过它要求只能选择一个单元格来进行拆分。六、表格排序六、表格排序 中的表格有一个排列表格内容的功能，中的表格有一个排列表格内容的功能，这这个功能对于数据表格来说非常有用。个功能对于数据表格来说非常有用。用户能够通过该功能轻松地实现用户能够通过该功能轻松地实现按姓名或数字排列表格中的内容。按姓名或数字排列表格中的内容。表格排序命令可以重新排列任何大表格排序命令可

24、以重新排列任何大小的表格，小的表格，并能够保持表格的格式不发生变化。并能够保持表格的格式不发生变化。不需要使用数据库，不需要使用数据库，表格排序命令就可以将同样的数据以不同的形式显示出来。表格排序命令就可以将同样的数据以不同的形式显示出来。上一页 下一页返回任务一表格的基本操作任务一表格的基本操作表格排序方法如下表格排序方法如下:)执行菜单执行菜单“命令命令”“排序表格排序表格”命令，命令，打开打开“排序表格排序表格”对对话框。话框。)在在“排序按排序按”下拉菜单中，下拉菜单中，选择选择“列列”，在在“顺序顺序”下拉菜下拉菜单中选择单中选择“按数字顺序按数字顺序”，并且并且“升序升序”排列，排

25、列，如如图图 所示。所示。)设置完成，设置完成，单击单击“确定确定”按钮即可。按钮即可。上一页返回任务二特殊表格的制作任务二特殊表格的制作一、细线表格的制作一、细线表格的制作在设置表格边框时，在设置表格边框时，即使将表格的边框设置为即使将表格的边框设置为“”，其边框还是其边框还是有些粗的。有些粗的。那么如何制作出更细表格线的表格呢那么如何制作出更细表格线的表格呢?下面将介绍制作细下面将介绍制作细线表格的方法。线表格的方法。)在网页中，在网页中，选择如选择如图图 所示表格。所示表格。)在在“属性属性”面板的面板的“表格表格”框中输入框中输入“”，在在“填充填充”和和“边框边框”文本框中输入文本框

26、中输入“”，在在“间距间距”文本框中输入文本框中输入“”，如如图图 所示。所示。)选择表格，选择表格，执行菜单执行菜单“窗口窗口”“样式样式”命令，命令，打开打开“样式样式”面板，单击面板下方的面板，单击面板下方的 按钮，按钮，出现如出现如图图 所示的所示的“新建新建 规则规则”对话框，对话框，单击单击“确定确定”按钮按钮。下一页返回任务二特殊表格的制作任务二特殊表格的制作)弹出如弹出如图图 所示的所示的“的的 规则定义规则定义”对话对话框，框，在在“分类分类”栏中的栏中的“背景背景”选项卡中设置选项卡中设置“”为为“”，设置完成，设置完成，单击单击“确定确定”按钮。按钮。)选择表格中的所有单

27、元格，选择表格中的所有单元格，在单元格属性面板的在单元格属性面板的“背景颜色背景颜色”选选项卡中输入项卡中输入“”，将单元格背景色设置为白色，将单元格背景色设置为白色，保存，保存，按按 键浏览页面，键浏览页面，效果如效果如图图 所示。所示。二、外框线表格的制作二、外框线表格的制作)在网页中，在网页中，选择如选择如图图 所示的表格。所示的表格。)在属性面板中在属性面板中“表格表格”名称框中输入名称框中输入“”，在在“填充填充”“边框边框”和和“间距间距”文本框中输入文本框中输入“”。上一页 下一页返回任务二特殊表格的制作任务二特殊表格的制作)选择表格，选择表格，执行菜单执行菜单“窗口窗口”“样式

28、样式”命令，命令，打开打开“样式样式”面板，面板，单击面板下方的单击面板下方的 按钮，按钮，出现如出现如图图 所示的所示的“新建新建 规则规则”对话框，对话框，单击单击“确定确定”按钮按钮。)弹出弹出“的的 规则定义规则定义”对话框，对话框，在在“分类分类”栏的栏的“边框边框”选项卡中设置选项卡中设置“”“”和和“”，如如图图 所示，所示，设置完成后，设置完成后，单击单击“确定确定”按钮。按钮。)保存网页，保存网页，按按 键浏览页面，键浏览页面，效果如效果如图图 所示。所示。上一页 下一页返回任务二特殊表格的制作任务二特殊表格的制作三、利用表格制作水平线三、利用表格制作水平线/垂直线垂直线有时

29、为了页面的美观，有时为了页面的美观，需要在页面的适当位置设置一些水平线或垂直需要在页面的适当位置设置一些水平线或垂直线，线，但系统里提供的水平线往往达不到页面的具体需求，但系统里提供的水平线往往达不到页面的具体需求，且系统没且系统没有提供垂直线，有提供垂直线，这时就可以利用表格的功能来制作它们。这时就可以利用表格的功能来制作它们。利用表格制作水平线的方法如下利用表格制作水平线的方法如下:)在网页文档的适当位置插入一个在网页文档的适当位置插入一个 行行 列的表格，列的表格，宽度为宽度为 像素，像素，在在“表格表格”属性面板的属性面板的“表格表格”名称框中输入名称框中输入“”，在在“填充填充”“边

30、框边框”和和“间距间距”文本框中输入文本框中输入“”。)应用上面制作细线表格的方法，应用上面制作细线表格的方法，将表格背景色将表格背景色“”设置为黑色。设置为黑色。上一页 下一页返回任务二特殊表格的制作任务二特殊表格的制作)在代码视图中，在代码视图中，将光标定位到将光标定位到 标签中，标签中，设置高度设置高度“”为，为，代码如下代码如下:)选中表格，选中表格，在代码视图中，在代码视图中，将代码将代码“,”中的空格中的空格“”去掉去掉。)保存，保存，按按 键浏览该网页，键浏览该网页，效果如效果如图图 所示。所示。同理，同理，制作垂直线只需要将表格宽度设置为制作垂直线只需要将表格宽度设置为 像素，

31、像素，高度设置为高度设置为 像素即可。像素即可。上一页 下一页返回任务二特殊表格的制作任务二特殊表格的制作四、立体导航栏的制作四、立体导航栏的制作在网页设计中为了使页面生动美观，在网页设计中为了使页面生动美观，许多设计者喜欢把导航栏制作成许多设计者喜欢把导航栏制作成立体效果。立体效果。利用表格颜色的设置同样可以制作出导航栏的立体感，利用表格颜色的设置同样可以制作出导航栏的立体感，也就是立体导航栏。也就是立体导航栏。制作立体导航栏的方法如下制作立体导航栏的方法如下:)新建一个空白网页，新建一个空白网页，将光标定位在需要插入表格的位置，将光标定位在需要插入表格的位置，插入一插入一个个 行行 列、宽

32、为列、宽为 像素的表格。像素的表格。选中单元格，选中单元格，在属性面板在属性面板中将中将“水平水平”文本框设置为文本框设置为“居中对齐居中对齐”，添加如，添加如图图 所示所示的文本。的文本。)在在“表格表格”属性面板的属性面板的“表格表格”名称框中输入名称框中输入“”，在在“边框边框”文本中输入文本中输入“”，在在“填充填充”和和“间距间距”文本框中输入文本框中输入“”。上一页 下一页返回任务二特殊表格的制作任务二特殊表格的制作)选择该表格，选择该表格，执行菜单执行菜单“窗口窗口”“样式样式”命令，命令，打开打开“样式样式”面板，单击面板下方的面板，单击面板下方的 按钮，按钮，出现如出现如图图

33、 所示的所示的“新建新建 规则规则”对话框，对话框，单击单击“确定确定”按钮按钮。)在在“分类分类”栏的栏的“背景背景”选项卡中设置选项卡中设置“”为为“”，如如图图 所示。所示。)同理，同理，设置设置“分类分类”栏中的栏中的“边框边框”选项卡，选项卡，设置参数如设置参数如图图 所示，所示，设置完成，设置完成，单击单击“确定确定”按钮。按钮。)在代码视图中，在代码视图中，将光标定位到将光标定位到 标签中，标签中，设置设置“”为为“”，代码如代码如下下:)保存，保存，按按 键浏览该网页，键浏览该网页，效果如效果如图图 所示。所示。上一页返回任务三公司网站建设任务三公司网站建设一、顶部页面的制作一

34、、顶部页面的制作)创建本地站点，创建本地站点，将将 中公司网站建设中的中公司网站建设中的 文文件夹，件夹，复制到本地根文件夹下复制到本地根文件夹下。)新建页面，新建页面，保存名称为保存名称为.。打开该页面，打开该页面，在在“插入插入”工具栏的工具栏的“常用常用”选项卡中，选项卡中，单击单击 按钮，按钮，插入一个插入一个 行行 列、宽度为列、宽度为 像素的表格。像素的表格。在在“表格表格”属性面板的属性面板的“填充填充”“间距间距”和和“边框边框”文本框中分别输入文本框中分别输入“”，并且设置并且设置“对齐对齐”方式为方式为“居中对齐居中对齐”。)将光标定位到第一个单元格中，将光标定位到第一个单

35、元格中，执行菜单执行菜单“插入插入”“图像图像”命命令，令，插入文件夹下的插入文件夹下的.图像。图像。)同理，同理，将光标定位到第二个单元格中，将光标定位到第二个单元格中，插入图像插入图像.、.、.、.、.、.、.、.、.、.。下一页返回任务三公司网站建设任务三公司网站建设)将光标定位到第三个单元格中，将光标定位到第三个单元格中，插入图片插入图片.。二、中部和底部页面的制作二、中部和底部页面的制作下面布局公司网站的中部页面，下面布局公司网站的中部页面，效果如效果如图图 所示。所示。)将光标定位到表格的后面，将光标定位到表格的后面，执行菜单执行菜单“插入插入”“表格表格”命令，命令，插入一个插入

36、一个 行列、宽度为行列、宽度为 像素的表格，像素的表格，居中对齐。居中对齐。)将光标定位到将光标定位到 行行 列表格的第一个单元格中，列表格的第一个单元格中，在在“属性属性”面面板中设置单元格的板中设置单元格的宽度为宽度为 像素，像素，在该单元格中嵌套一个在该单元格中嵌套一个 行行 列的表格。列的表格。)在在 行行 列表格的第列表格的第 行至第行至第 行分别插入图片行分别插入图片.、.、.、.、.、.，在第在第 行中插入行中插入.。上一页 下一页返回任务三公司网站建设任务三公司网站建设)将光标定位到将光标定位到 行行 列表格的第二个单元格中，列表格的第二个单元格中，插入一个插入一个 行行 列、

37、宽度为的表格，列、宽度为的表格，并将该表格顶端对齐。并将该表格顶端对齐。)在在 行行 列表格下插入一个列表格下插入一个 行行 列、宽度为的表格，列、宽度为的表格，并在表格的第并在表格的第 行第行第 个单元格中插入图片个单元格中插入图片.，第第 行第行第 个单元格中插入图片个单元格中插入图片.。)在在 行行 列表格的第列表格的第 行第行第 个单元中嵌套一个个单元中嵌套一个 行行 列、宽列、宽度为度为 的表格，并在第的表格，并在第 个单元格中插入图片个单元格中插入图片.，第第 个单元格中插入图片个单元格中插入图片.。)同理，同理，制作制作 行行 列表格中的最后一个单元格，列表格中的最后一个单元格，

38、并且插入相应并且插入相应的图片，的图片，如如图图 所示所示。)布局公司网站页面底端部分，布局公司网站页面底端部分，效果如效果如图图 所示。所示。)保存，保存，并按并按 键浏览网页，键浏览网页，最终效果如最终效果如图图 所示。所示。上一页返回图图“表格表格”对话框对话框返回图图 使用使用“顶部顶部”页眉模式的职页眉模式的职称表称表返回图图“表格表格”属性面板属性面板返回图图“单元格单元格”属性面板属性面板返回图图“插入行或列插入行或列”对话框对话框返回图图“排序表格排序表格”对话框对话框返回图图 表格表格返回图图“表格表格”属性面板属性面板返回图图“新建新建 规则规则”对话框对话框返回图图“的的

39、 规规则定义则定义”对话框对话框返回图图 细线表格效果图细线表格效果图返回图图“新建新建 规则规则”对对话框话框返回图图“的的 规规则定义则定义”对话框对话框返回图图 外框线表格效果图外框线表格效果图返回图图 利用表格制作水平线效果图利用表格制作水平线效果图返回图图 导航表格导航表格返回图图“新建新建 规则规则”对对话框话框返回图图 设置背景颜色设置背景颜色返回图图 设置设置“边框边框”选项卡选项卡返回图图 立体导航栏效果图立体导航栏效果图返回图图 公司网站顶部效果图公司网站顶部效果图返回图图 公司网站中部效果图公司网站中部效果图返回图图 公司网站底端效果图公司网站底端效果图返回图图 公司网站最终效果图公司网站最终效果图返回