实验三 利用表格进行网页布局
一、实验目的
1、了解网页设计常用的几种版式；
2、掌握绘制及编辑布局表格和布局单元格；
3、掌握利用布局表格的嵌套来设计较复杂的版面； 4、掌握在布局表格中添加具体内容 ； 5、掌握设置布局表格和单元格属性 。
二、实验内容
利
用
布
局
表
格
制
作
如
图
所
示
的
网
页
。
图
三、知识点分解
由上图可知，该网页的结构属于拐角型，先画出该网页的版式结构，如图所示。 LOGO BANNER 导航菜单 导 航 网页内容 网页内容 版权信息 图
由图我们可以知道在进行该网页布局时，先要布最外面的表格，然后布最上端的表格，用来放置LOGO和BANNER，然后再布一个单元格放置导航菜单，接着下面布三个并排的表格，分别放置左边的导航，中间的网页内容，右边的网页内容，最下面再布一个单元格，放置版权信息。
四、实验步骤
1、 新建一个文档，打开“属性面板”，单击按钮，在弹出的页面属性对话框中将“背景图像”设为“bg-greenline.jpg”。
2、 将“插入”栏中的“常用”选项卡改为“布局”选项卡，此时就出现“布局”工具栏，如图所示。
图
3、单击布局工具栏中的按钮，进入布局模式。
4、首次执行以上操作之一后，会打开“从布局模式开始”对话框，在该对话框中给出在“布局模式”下创建表格的方法的提示。单击
按钮即可切换到布局模式。切换到
“布局”模式后，在“文档”窗口的顶部会出现标有“布局模式”的蓝色长条。
5、在“插入”栏的“布局”选项卡中单击“绘制布局表格”
按钮 。
6、将鼠标光标放置在页面上，此时鼠标光标变为加号（+）。
7、将鼠标移到要创建表格的左上角位置并按住鼠标不放拖动到要创建表格的右下角后释放鼠标。
8、选中该表格，打开属性面板，将表格的宽度设为“783px”，高度设为“845px”。
9、在“插入”栏的“布局”选项卡中单击“绘制布局表格”按钮 。将鼠标光标
放置在刚才绘制的表格的左上角，拖动鼠标，绘制一个嵌套表格，规格为：宽度“783px”，高度“101px”。
10、选中该表格，切换到“标准”模式，将背景图像改为“log1-text.jpg”。 11、再切换到“布局”模式，在“插入”栏的“布局”选项卡中单击“绘制布局单元格”按钮
。选中该单元格，打开属性面板，将单元格的宽度设为“111px”，高度设为
“101px”，水平对齐方式设为“左对齐”，垂直对齐方式设为“顶端”。
12、将图像“niux-home.gif”插入到该单元格，打开属性面板将其宽设为“，高设为“，对齐设为“绝对居中”，在紧接着该图像的旁边写上文字“加入收藏”，同时将该文字设为：字体“宋体”，大小“12px”。
13、将“插入”栏中的“布局”选项卡改为“文本”选项卡，单击“换行符”按钮
，
光标自动定位到下一行。
14、将“插入”栏中的“文本”选项卡改为“布局”选项卡，进入“布局”模式，重复步骤11、12两次。
15、在“插入”栏的“布局”选项卡中单击“绘制布局单元格”按钮
。选中该单
元格，打开属性面板，将单元格的宽设为“783px”，高设为“29px”，水平对齐设为“居中对齐”，垂直设为“居中”，背景颜色设为“#FF。
16、将光标定位到该单元格，输入文字“首页”，然后将“插入”栏中的“布局”选项卡改为“文本”选项卡，单击“不换行空格”按钮
两次，出现了两个空格，紧接着输入
两次，紧接
“|”（该符号用键盘上的“shift+\\”输入），再单击“不换行空格”按钮
着输入“国内旅游”，后面文字按相同方法输入，选中导航栏的所有文字，将其设为：字体“宋体”，大小“14px”，颜色“#。
17、紧接导航栏的布局单元格，在它下方绘制一个宽为“181px”，高为“665px”，颜色为“#dde”的布局表格，用来放左边导航内容。
18、在该布局表格内绘制一个宽“181px”，高“73px”的布局单元格，然后将“ygdd.jpg”图像插入到该单元格，同时设该图像的宽为“181px”，高为“73px”。
19、紧接上面的布局单元格，在它下方绘制一个宽“181px”，高“60px”，水平对齐为“居中对齐”，垂直为“居中”的布局单元格，输入文字“人文地理”，同时将该文字设为：字体“楷体”，大小“18px”，颜色“#CC。
20、紧接上面的布局单元格，在它下方绘制一个宽“181px”，高“98px”，的布局表格。
21、在上面的布局表格内绘制一个宽“26px”，高“96px”，的布局单元格。
22、在上面的布局单元格右边绘制一个宽“153px”，高“24px”，垂直“居中”的布局单元格，输入文字“□自然环境”(“□”的输入：在“智能abc”输入法下按键盘符号v+数字1)，将其设为：字体“宋体”，大小“14px”。
23、在上面的布局单元格下面绘制一个宽“153px”，高“24px”，垂直“居中”的布局单元格，输入文字“□气候变化”，将其设为：字体“宋体”，大小“14px”。
24、重复步骤22两次，同时将输入的文字分别改为“□人口、语言”，“□宗教、信仰”。
25、紧接上面的布局表格，在它下方绘制一个宽“181px”，高“60px”，水平对齐为“居中对齐”，垂直为“居中”的布局单元格，输入文字“民族风情”，同时将该文字设为：字体“楷体”，大小“18px”，颜色“#CC。
26、重复步骤20、21、22、23，将输入的文字分别改为“□民间风俗”，“□服饰与音乐”，“□民族节日”，“□生活习惯”。
27、重复步骤25，将输入的文字改为“旅游指南”。
28、重复步骤19、20、21、22、23，将输入的文字分别改为“□自驾车旅游须知”，“□潜水的医学知识”，“□散客旅游指南”，“□自助游常识”。
29、左边的导航做好了，将光标定位到中间的网页内容区，绘制一个宽“418px”，高“665px”，颜色为“#FFFFFF”的布局表格。
30、在该布局表格内绘制一个宽“418px”，高“239px” 的布局表格。
31、在该布局表格内绘制一个宽“126px”，高“239px”，垂直为“居中”的布局单元格，然后将“love.jpg”图像插入到该单元格，同时设该图像的宽为“126px”。
32、在上面的布局单元格右边绘制一个宽“278px”，高“239px”的布局表格。 33、在上面的布局表格内绘制一个宽“278px”，高“42px”，水平对齐“居中对齐”，垂直“居中”的布局单元格，将“plane.jpg” 图像插入到该单元格。
34、返回到 “标准”模式，选择[插入]/[表格]菜单命令，插入一个5行4列，宽“278px”，高“194px”，边框“的表格，将第1列宽设为“54px”，第2列宽设为“110px”，第3列宽设为“52px”，第4列宽设为“50px”，每行高都设为“30px”，单击第一单元格，设置：水平“居中对齐”，垂直“居中”，输入文字“出发地”，将文字设为：字体“宋体”，大小“12px”，颜色“#。
35、按照同样的方法，完成该表格的制作，且将其余各行文字设为：字体“宋体”，大小“12px”，颜色“#0000CC”。。
36、紧接着第29步的布局表格的下方绘制一个宽“418px”，高“52px”，背景图像为“fj01.jpg”的布局表格，然后再在该布局表格内偏左的位置绘制宽“156px”，高“52px”，水平对齐“居中对齐”，垂直“居中”的布局单元格，输入文字“风景名胜快览”，将文字设为：字体“楷体”，大小“24px”，颜色“#FF。
注意：设置表格背景图像时一定要从“布局”模式下退出，进入“标准”模式进行设置。 37、紧接上面的布局表格，在它下方绘制一个布局表格，在该布局表格内绘制一个宽“418px”，高“10px”的布局单元格。
38、在上面布局单元格的下面绘制一个宽“15px”，高“95px”的布局单元格，再在紧靠该单元格的右边绘制一个宽“120px”，高“95px”的布局单元格，在该单元格中插入图像“fj01-zjj.jpg”，将该图像设为：宽“120px”，高“95px”。
39、重复步骤38两次，分别将图像改为“fj03-tyhj.jpg”，“fj02-pu.jpg”。 40、在3个图像所在的布局单元格的正下面绘制3个宽“120px”，高“27px”，水平对齐“居中对齐”，垂直“居中”的布局单元格，分别输入文字“张家界”、“天涯海角”、“昆明”，并将文字设为：字体“宋体”，大小“12px”，颜色“#。
41、重复步骤38、39、40，将图像分别改为“fj06-sldw.jpg”、“fj05-sx.jpg”、“fj04-xm.jpg”，文字改为“森林公园”、“三峡”、“四川”。
42、紧接上面的布局单元格，在它下方绘制一个水平“居中对齐”，垂直“居中”的布局单元格，插入图像“banner.gif” ，并将其宽设为“410px”。
43、中间的网页内容做好了，将光标定位到右边的网页内容区，绘制一个宽“184px”，高“665px”，颜色为“#99CC的布局表格。
44、在该布局表格内绘制一个宽“184px”，高“255px”，颜色为“#FFFFFF” 的布局表格。
45、在该布局表格内绘制一个宽“184px”，高“49px”，背景图像为“b1.jpg”的布局表格，再在该布局表格内绘制一个宽“86px”，高“49px”，垂直“居中”的布局单元格。输入文字“最新资讯”，并将文字设为：字体“楷体”，大小“18px”，颜色“#CC。
46、紧接上面的布局表格，在它下方绘制一个宽“6px”，高“41px”水平“居中对齐”，垂直“居中”的布局单元格，插入图像“gw01.gif”，在紧靠该单元格的右边绘制一个宽“172px”，高“41px”。垂直“居中”的布局单元格，输入文字“第四届天目湖南山竹海登山节盛大开幕”，并将文字设为：字体“宋体”，大小“12px”。
47、重复步骤46四次，分别将文字改为“市旅游局发布2008年旅游质监情况”、“交通渐趋便利 杭州-千岛湖-黄山游线蓄势待发”、“常州旅游券发放现场拥挤被指“暗箱操作””、“早春二月“踏青游” 南方三城市受网友热捧”。
48、紧接上面的布局单元格，在它下方绘制一个宽“184px”，高“20px”，水平“右对齐”，垂直“居中”的布局单元格，插入图像“more1.jpg”。
49、紧接上面的布局单元格，在它下方依次绘制五个宽“184px”，高“65px”，
水平“居中对齐”，垂直“居中”的布局单元格，第一个布局单元格内输入文字“友情链接”，字体“楷体”，大小“18px”，颜色“#CC0033”；第二个布局单元格内插入图像“yqlogo01.jpg”，并将图像设为：宽“153px”，高“48px”；第三个布局单元格内插入图像“yqlogo02.gif”；第四个布局单元格内插入图像“yqlogo03.gif”；第五布局单元格内插入图像“yqlogo04.gif”；并将图像设为：宽“153px”，高“48px”。
50、右边的网页内容做好了，将光标定位网页的版权信息区，绘制一个宽“783px”，高“34px”，颜色为“#cccc，水平“居中对齐”，垂直“居中”的布局单元格，输入文字“Copyright ?阳光旅游公司 。
51、将“插入”栏中的“布局”选项卡改为“文本”选项卡，单击“换行符”按钮
，
光标自动定位到下一行，输入文字“E—mail：*********制作者：**********”。 52、选中这两行文字，将其设为：字体“宋体”，大小“12px”。
53、选中最外面的表格，切换到“标准”模式，打开“属性面板”，将对齐改为“居中对齐”。
54、按【F12】键，预览。
思考题：很多同学在做完这个实验后，预览网页时，页脚区（版权信息）与上面的主体区不能很好的结合起来，中间会有空隙，怎么解决这个问题呢？