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

实验二 表格和框架的使用和网站布局一、实验目的掌握使用DreamweaverCS3进行表格和框架的设计。掌握网页布局的方法。 二、实验要求学生通过实验掌握网页元素（文字、图像等）在网页中的布局，要求学生掌握使用表格、布局表格及框架对网页元素进行布局和安排，以合理、美观的方式设计网页。 三、实验内容1创建表格2使用布局表格设计网页3框架的使用 四、实验步骤1创建表格（1）用Dreamweaver CS3打开实验素材BG文件夹中kcbhtm网页文件。（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）参照以下的实样图，在对应的单元格内输入文本，保存文档。检查结果是否与FINAL文件夹中的kcb.htm相同。2使用布局表格设计网页（1）打开实验素材BJ文件夹中的07.htm网页文件。（2）选中在布局表格中所绘制的布局单元格，在“属性”面板中将该布局单元格的宽度也设置为775像素，高度为68像素，如下图所示。（3）将光标停留在布局单元格内，选择文档窗口菜单栏中的“插入”-“图像菜单”命令，在打开的“选择图像源”对话框中，选择存放在BJimges文件夹下的banerjpg图像。（4）选择图像文件后，单击“确认”按钮，便可在布局单元格内插入该图像文件。（5）单击“布局单元格”按钮，在已经插入图像的布局表格下面绘制3个布局单元格，如下图所示。（6）分别选中所绘制的布局单元格，并打开“属性”面板，将布局单元格的宽度和高度分别设置为：(152、40)、(334、40)、(135、40)。（7）在所绘制布局单元格1和2内分别输入文本“生活空间”和“音乐天地”，并在布局单元格3内插入存放在BJimages文件夹下的01gif图像，如下图所示。（8）在其下绘制2个布局单元格，分别选中并同时打开“属性”面板，将单元格的宽度和高度分别设置为： (148、326)、 (516、326)，如下图所示。（9）在上图所示布局单元格(1)中绘制4个宽度为136像素，高度为34像素的单元格(切换到标准视图用插入表格进行操作），并在其单元格内分别输入文本，如下图7-18所示。（10）参照下图，填充布局单元格内容。完成所对应的布局单元格文本的输入。（11）最后将“布局视图”转化为“标准视图”。在“标准视图”中根据自己的审美观进行调整，可为布局单元格的边框进行修饰，完成了该页面的制作，通过浏览器预览，并与FINAL文件夹中的07.htm网页文件进行对比。3框架的使用（1）打开或新建一个空白的文档，在该文档中创建一个 框架页。（2）命名框架。将左列框架命名为index框架、右列上部框架命名为top框架、右列下部框架命名为main框架。（3）保存框架。将框架页保存为06A.htm文档，index框架保存为06B.htm文档,top框架保存为06Chtm文档，main框架保存为06D.htm，文档均保存在KJ文件夹下。（4）设置框架的行或列。将index框架的列设置为150像素，top框架的行高设置为90像素。（5）设置页面的配色方案。在index框架的06B.htm文档中运用背景为#FFCC99、文本和链接为“#669966，#009900”的配色方案。（6）填充页面。在index框架06B.htm文档中输入如下图所示的文本并插入一个9行l列的表格。其中“休闲娱乐”文本为隶书5号字体，颜色为#66CC00；表格边框的颜色为#009900；单元格的背景颜色为#CCFFFF，单元格的高度为30像素，单元格的对齐方式为水平居中、垂直中间（7）将top框架的标题设置为“标题栏”，在“属性”面板中将所有边界设置为O。（8）将光标停留在top框架中，输入文本并插入images文件夹下的图像，其中文本字体大小为7，颜色为#66CC00，如下图所示。（9）完成index和top框架的填充和设置后的结果如下图所示。（10）设置链接。选中左边框架(index)中目录下的“考试作弊”文本，在“属性”面板中的“链接”框中设置与之对应的笑话内容(WJwj6-1.htm)的链接。这时“目标”框变为激活状态，从“目标”下拉列表框中选择链接的目标为main。用户如果在浏览器中浏览这个页面的时候，单击“考试作弊”文本，则被链接的文件将在main框架中打开。（11）使用相同的方法设置其他“笑话”目录所链接的内容和链接目标，其他的链接目标均为mian框架。笑话目录各项和WJ文件夹中wj6-1.htmwj6-8.htm是一一对应的关系。（12）指定框架源文件。选中main框架，在“属性”面板中的“源文件”文本框中设置框架的源文件。单击旁边的文件夹，选择WJ文件夹中Wj6-1.h