5FrontPage综合实验.docVIP

案例一 用表格制作版面（基础） 实例说明 表格可以用于排版，将一张比较大的图片切成许多小块，然后再像拼图一样将每块重新拼起来，表格就像模考一样，在每个单元格中填入一张图片。这种设计可以很好的控制网页的版本，而且在网页下载时，分成小块的图片下载也比完整的大图片要快。在浏览网页时，根本就看不出表格的存在。 本例就是利用表格来组织页面，通过表格的嵌套，实现版面的统一。最终的效果如图1所示。 图1 案例知识点 打开网站 插入表格并设置其属性 设置单元格的属性 插入图片 插入Web 文字的输入和设置 插入行为 设置背景图片 插入超级链接 保存网页 （1）运行FrontPage 2003，单击“文件”→“新建”命令，在界面右侧弹出的“新建”任务窗体中选择“空白页面”。 （2）在空白处单击鼠标右键，在弹出菜单中选择“页面属性”。 （3）在弹出的“网页属性”对话框中，选择“格式”选项卡，在“背景”选区勾选“背景图片”，单击“浏览”，选择“bg.gif”为背景图片，如图2所示。 （4）选择“表格”→“插入”→“表格”命令。 （5）设置插入的表格（表格1）行数为“1”，列数为“2”；指定宽度为“700”像素；单元格衬距以及单元格间距为“0”；边框的粗细为“0”；其他均为默认值，最后单击“确定”保存配置，如图3所示。 （6）选择“表格”→“插入”→“表格”命令，在第一列单元格中插入新的表格（表格2），如图4所示。 （7）设置插入的表格（表格2）行数为“7”，列数为“1”；指定宽度为“150”像素；单元格衬距以及单元格间距为“0”；边框粗细为“0”；其他均为默认值，最后单击“确定”保存配置。 （8）选择表格1的第一列单元格，单击鼠标右键，选择“单元格属性”命令。 （9）在“单元格属性”对话框中，选择“垂直对齐方式”为“顶端对齐”，如图5 所示。 （10）选择“插入”→“图片”→“来自文件”命令，在表格2的第一行插入图片。 （11）选择名为top的图片插入第一行，如图6所示。 （12）在第二行至第七行中依次插入名为second、b1、b2、b3、b4、bottom的图片。完成后效果如图7所示。 （13）选中表格1的第二列，单击鼠标右键，选择“单元格属性”命令。 （14）在“单元格属性”对话框中，选择“垂直对齐方式”为“顶端对齐”。 （15）选择“插入”→“图片”→“来自文件”命令，在表格1的第二列插入图片，如图8所示。 （16）选择名为welcome的图片插入表格中，如图9所示。 （17）按回车键，选择“插入”→“图片”→“来自文件”命令。 （18）选择名为divide的图片插入表格中。 （19）重复步骤（17）、（18）在同一行在插入divide图片。完成后如图10所示。 （20）按回车键，在表格1的第二列的底部插入名为ball的图片。也可以仍然通过表格来组织表格1的第二列中得图片。为了对比表格排版的作用，本例第二列的图片没有采用表格排版。 （21）存盘。在浏览器中预览效果。 案例知识点总结 打开网站 插入表格并设置其属性 设置单元格的属性 文字的输入和设置 保存网页  案例知识点 打开网站 插入表格并设置其属性 单元格的拆分 设置单元格的属性 表格的嵌套 插入艺术字 插入水平线 插入图片 插入Web 文字的输入和设置 插入行为 设置背景音乐和背景图片 插入超级链接 保存网页 （1）新建站点 【文件】|【新建网站】，【由一个网页组成的网站】 ，“指定新网站的位置” （2）打开主页 双击“文件夹列表”中的index.htm文件 “网页大小”：800×600 （3）插入表格（table） 【表格】|【插入】|【表格】， “启用布局工具” （4）利用表格完成页面布局 第二行单元格设置 设置单元格属性 【表格】| 】|【表格属性】|【单元格属性】/快捷菜单 拆分单元格为2列 设置拆分后单元格的 第一列的“单元格属性”中的 “指定宽度”为40 （5）利用表格完成页面布局 第四行单元格设置 插入嵌套表格（table1） 设定嵌套表格（table1）中的单元格（1，3）的属性 table1中嵌套table2 （6）利用表格完成页面布局 table1中嵌套table2 table2嵌套于table1中的第一个单元格 table1中嵌套table3 table3嵌套于table1中的第三个单元格 设置table2和table3中第一个单元格的属性 设置table2和table3中第二个单元格的属性 （7）表格（table）第一行添加背景色 【表格】| 】|【表格