表格和框架的使用和网站布局.doc

试验二 表格和框架使用和网站布局
一、试验目标
    掌握使用DreamweaverCS3进行表格和框架设计。掌握网页布局方法。
二、试验要求
    学生经过试验掌握网页元素（文字、图像等）在网页中布局，要求学生掌握使用表格、布局表格及框架对网页元素进行布局和安排，以合理、美观方法设计网页。
三、试验内容
1．创建表格
2．使用布局表格设计网页
3．框架使用
四、试验步骤
1．创建表格
（1）用Dreamweaver CS3打开试验素材BG文件夹中kcb．htm网页文件。
（2）在文档菜单中选择“插入”-“表格”命令，在“插入表格”对话框中，设置插入一个8行7列表格。
（3）单击“确定”按钮，便可在文档窗口中插入一个8行7列表格。
（4）选中表格(单击表格边框，可选中表格)，选择文档窗口中“窗口”-“属性”命令打开“属性”面板。在“属性”面板中将该表格高设置为284像素；对齐方法设置为居中对齐。
（5）设置单元格背景颜色。选中第l行单元格(按下左键，在第1行单元格上拖动鼠标)，打开“属性”面板，在“背景颜色”中输入“#999999”颜色值。
（6）按摄影同方法将第1列单元格背景颜色设置为“#99CCFF”；其它单元格背景颜色设置为“#FFFFCC”。
（7）合并单元格。按下Ctrl键，单击第1行第1列和第2列单元格选中单元格。在文档窗口菜单中选择“修改”-“表格”-“合并单元格”命令，将该单元格进行合并。
（8）反复前面操作。将第1列单元格2、3、4、5行单元格，第1列6、7行单元格，第8行单元格2、3、4、5、6、7列单元格进行合并。
（9）参考以下实样图，在对应单元格内输入文本，保留文档。。
2．使用布局表格设计网页
（1）。
（2）选中在布局表格中所绘制布局单元格，在“属性”面板中将该布局单元格宽度也设置为775像素，高度为68像素，以下图所表示。
（3）将光标停留在布局单元格内，选择文档窗口菜单栏中“插入”-“图像菜单”命令，在打开“选择图像源”对话框中，选择存放在BJ／imges文件夹下baner．jpg图像。
（4）选择图像文件后，单击“确定”按钮，便可在布局单元格内插入该图像文件。
（5）单击“布局单元格”按钮，在已经插入图像布局表格下面绘制3个布局单元格，以下图所表示。
（6）分别选中所绘制布局单元格，并打开“属性”面板，将布局单元格宽度和高度分别设置为：(152、40)、(334、40)、(135、40)。
（7）在所绘制布局单元格1和2内分别输入文本“生活空间”和“音乐天地”，并在布局单元格3内插入存放在BJ／images文件夹下01．gif图像，以下图所表示。
（8）在其下绘制2个布局单元格，分别选中并同时打开“属性”面板，将单元格宽度和高度分别设置为： (148、326)、 (516、326)，以下图所表示。
（9）在上图所表示布局单元格(1)中绘制4个宽度为136像素，高度为34像素单元格(切换到标准视图用插入表格进行操作），并在其单元格内分别输入文本，以下图7-18所表示。
（10）参考下图，填充布局单元格内容。完成所对应布局