实验四（1） 网页表格操作
一、实验目的
1、掌握表格的创建、结构调整与美化。 2、熟悉表格与单元格的主要属性及其设置。 3、掌握在表格和单元格中插入文字或图片。 4、掌握格式化表格和排序表格。
二、实验内容：
1、制作出如图2.5.1所示的表格。
图2-5-1
三、知识点分解
本次实验主要涉及到表格的基本操作，注意表格最终的效果需要按总分项进行降序排序。
四、实验步骤
1、在Dreamweaver中新建一个文档。
2、将插入点置于需要插入表格的位置。如果文档是空白的，则只能将插入点放置在文档的开头。执行下列操作之一打开“表格”对话框，如图2-5-2所示。
(1)选择[插入]\\[表格]菜单命令。
(2)在“插入栏”的“常用”选项卡中单击“表格”按钮。
(3)按【Ctrl+Alt+T】键。
图2-5-2 “表格”对话框
3、在表格大小中输入如下数据——行：4列：5，表格宽度：500像素，边框粗细：1像素，单元格边距: 1像素,单元格间距：1像素。 4、页面选择第三个——顶部。
5、辅助功能中输入如下数据——标题：学生成绩表，对齐标题：居中。 6、在表格的第一行输入如下数据：学号、语文、数学、英语、总分。 7、在表格的第二行输入如下数据：1001、87、85、65、237。 8、在表格的第三行输入如下数据：1002、81、67、57、205。 9、在表格的第四行输入如下数据：1003、82、65、78、225。
10、选择[命令]\\[格式化表格]菜单命令，在弹出的”格式化表格”对话框中选择“AltRows：Green&Yellow”，然后将行颜色改为第一种：#FFCC00，第二种：#CC0033，其余的内容不变，单击“确定”按钮。
11、选中表格的每一列，将其宽度设为100像素，高100像素，水平：居中，垂直：居中。
12、将光标定位到第一行的第5个单元格，打开“属性面板”，将背景设为“b1.jpg” 13、选择整个表格，打开“属性面板”，将边框颜色改为“红色”
14、选择整个表格，然后选择[命令]\\[排序表格]菜单命令，弹出“排序表格”对话框，进行如下设置：排序按“列5”，顺序：按“数字排序”，“降序”，单击“确定”按钮。 15、按【Ctrl+S】保存该网页。 16、按【F12】键预览。
思考题：怎样使得表格在不同尺寸浏览器、不同分辨率下都能达到铺满整个浏览器窗口的效果呢？
实验四（2） 利用表格进行网页布局
一、实验目的
1、了解网页设计常用的几种版式；
2、掌握绘制及编辑布局表格和布局单元格；
3、掌握利用布局表格的嵌套来设计较复杂的版面； 4、掌握在布局表格中添加具体内容 ； 5、掌握设置布局表格和单元格属性 。
二、实验内容
利
用
布
局
表
格
制
作
如
图
2-6-1
所
示
的
网
页
。
图2-6-1
三、知识点分解
由上图可知，该网页的结构属于拐角型，先画出该网页的版式结构，如图2-6-2所示。 LOGO BANNER 导航菜单 导 航 网页内容 网页内容 版权信息 图2-6-2
由图2-6-2我们可以知道在进行该网页布局时，先要布最外面的表格，然后布最上端的表格，用来放置LOGO和BANNER，然后再布一个单元格放置导航菜单，接着下面布三个并排的表格，分别放置左边的导航，中间的网页内容，右边的网页内容，最下面再布一个单元格，放置版权信息。 四、实验步骤
1、 新建一个文档，打开“属性面板”，单击按钮，在弹出的页面属性对话框中将“背景图像”设为“bg-greenline.jpg”。
2、 点击，菜单“查看>表格模式>布局模式”，进入布局模式。
4、首次执行以上操作之一后，会打开“从布局模式开始”对话框，在该对话框中给出在“布局模式”下创建表格的方法的提示。单击
按钮即可切换到布局模式。切换到
“布局”模式后，在“文档”窗口的顶部会出现标有“布局模式”的蓝色长条。
5、在“插入”栏的“布局”选项卡中单击“绘制布局表格”
按钮 。
6、将鼠标光标放置在页面上，此时鼠标光标变为加号（+）。
7、将鼠标移到要创建表格的左上角位置并按住鼠标不放拖动到要创建表格的右下角后释放鼠标。
8、选中该表格，打开属性面板，将表格的宽度设为“783px”，高度设为“845px”。 9、在“插入”栏的“布局”选项卡中单击“绘制布局表格”
按钮 。将鼠标光标
放置在刚才绘制的表格的左上角，拖动鼠标，绘制一个嵌套表格，规格为：宽度“783px”，高度“101px”。
10、选中该表格，切换到“标准”模式，将背景图像改为“log1-text.jpg”。
11、再切换到“布局”模式，在“插入”栏的“布局”选项卡中单击“绘制布局单元格”按钮
。选中该单元格，打开属性面板，将单元格的宽度设为“111px”，高度设为“101px”，
水平对齐方式设为“左对齐”，垂直对齐方式设为“顶端”。
12、将图像“niux-home.gif”插入到该单元格，打开属性面板将其宽设为“35”，高设为“30”，对齐设为“绝对居中”，在紧接着该图像的旁边写上文字“加入收藏”，同时将该文字设为：字体“宋体”，大小“12px”。
13、将“插入”栏中的“布局”选项卡改为“文本”选项卡，单击“换行符”按钮
，
光标自动定位到下一行。
14、将“插入”栏中的“文本”选项卡改为“布局”选项卡，进入“布局”模式，重复步骤11、12两次。
15、在“插入”栏的“布局”选项卡中单击“绘制布局单元格”按钮
。选中该单
元格，打开属性面板，将单元格的宽设为“783px”，高设为“29px”，水平对齐设为“居中对齐”，垂直设为“居中”，背景颜色设为“#FF9900”。
16、将光标定位到该单元格，输入文字“首页”，然后将“插入”栏中的“布局”选项卡改为“文本”选项卡，单击“不换行空格”按钮
两次，出现了两个空格，紧接着输入
两次，紧接着
“|”（该符号用键盘上的“shift+\\”输入），再单击“不换行空格”按钮
输入“国内旅游”，后面文字按相同方法输入，选中导航栏的所有文字，将其设为：字体“宋体”，大小“14px”，颜色“#000099”。
17、紧接导航栏的布局单元格，在它下方绘制一个宽为“181px”，高为“665px”，颜色为“#dde56c”的布局表格，用来放左边导航内容。
18、在该布局表格内绘制一个宽“181px”，高“73px”的布局单元格，然后将“ygdd.jpg”图像插入到该单元格，同时设该图像的宽为“181px”，高为“73px”。
19、紧接上面的布局单元格，在它下方绘制一个宽“181px”，高“60px”，水平对齐为“居中对齐”，垂直为“居中”的布局单元格，输入文字“人文地理”，同时将该文字设为：字体“楷体”，大小“18px”，颜色“#CC0033”。
20、紧接上面的布局单元格，在它下方绘制一个宽“181px”，高“98px”，的布局表格。 21、在上面的布局表格内绘制一个宽“26px”，高“96px”，的布局单元格。 22、在上面的布局单元格右边绘制一个宽“153px”，高“24px”，垂直“居中”的布局单元格，输入文字“□自然环境”(“□”的输入：在“智能abc”输入法下按键盘符号v+数字1)，将其设为：字体“宋体”，大小“14px”。
23、在上面的布局单元格下面绘制一个宽“153px”，高“24px”，垂直“居中”的布局单元格，输入文字“□气候变化”，将其设为：字体“宋体”，大小“14px”。
24、重复步骤22两次，同时将输入的文字分别改为“□人口、语言”，“□宗教、信仰”。 25、紧接上面的布局表格，在它下方绘制一个宽“181px”，高“60px”，水平对齐为“居中对齐”，垂直为“居中”的布局单元格，输入文字“民族风情”，同时将该文字设为：字体“楷体”，大小“18px”，颜色“#CC0033”。
26、重复步骤20、21、22、23，将输入的文字分别改为“□民间风俗”，“□服饰与音乐”，“□民族节日”，“□生活习惯”。
27、重复步骤25，将输入的文字改为“旅游指南”。
28、重复步骤19、20、21、22、23，将输入的文字分别改为“□自驾车旅游须知”，“□潜水的医学知识”，“□散客旅游指南”，“□自助游常识”。
29、左边的导航做好了，将光标定位到中间的网页内容区，绘制一个宽“418px”，高
实验四 网页表格操作 - 图文
