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

《表格和框架的使用和网站布局》由会员分享，可在线阅读，更多相关《表格和框架的使用和网站布局（6页珍藏版）》请在金锄头文库上搜索。

1、实验二 表格和框架的使用和布局一、实验目的掌握使用DreamweaverCS3进行表格和框架的设计。掌握网页布局的方法。 二、实验要求学生通过实验掌握网页元素（文字、图像等）在网页中的布局，要求学生掌握使用表格、布局表格及框架对网页元素进行布局和安排，以合理、美观的方式设计网页。 三、实验容1创建表格2使用布局表格设计网页3框架的使用 四、实验步骤1创建表格（1）用Dreamweaver CS3打开实验素材BG文件夹中kcbhtm网页文件。（2）在文档菜单中选择“插入”-“表格”命令，在“插入表格”对话框中，设置插入一个8行7列的表格。（3）单击“确定”按钮，便可在文档窗口中插入一个8行7列的

2、表格。（4）选中表格(单击表格边框，可选中表格)，选择文档窗口中的“窗口”-“属性”命令打开“属性”面板。在“属性”面板中将该表格的高设置为284像素；对齐方式设置为居中对齐。（5）设置单元格背景颜色。选中第l行单元格(按下左键，在第1行单元格上拖动鼠标)，打开“属性”面板，在“背景颜色”中输入“#999999”颜色值。（6）按照相同的方法将第1列单元格背景颜色设置为“#99CCFF”；其余单元格背景颜色设置为“#FFFFCC”。（7）合并单元格。按下Ctrl键，单击第1行的第1列和第2列单元格选中单元格。在文档窗口的菜单中选择“修改”-“表格”-“合并单元格”命令，将该单元格进行合并。（8）

3、重复前面的操作。将第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文件夹下的ban

4、erjpg图像。（4）选择图像文件后，单击“确认”按钮，便可在布局单元格插入该图像文件。（5）单击“布局单元格”按钮，在已经插入图像的布局表格下面绘制3个布局单元格，如下图所示。（6）分别选中所绘制的布局单元格，并打开“属性”面板，将布局单元格的宽度和高度分别设置为：(152、40)、(334、40)、(135、40)。（7）在所绘制布局单元格1和2分别输入文本“生活空间”和“音乐天地”，并在布局单元格3插入存放在BJimages文件夹下的01gif图像，如下图所示。（8）在其下绘制2个布局单元格，分别选中并同时打开“属性”面板，将单元格的宽度和高度分别设置为： (148、326)、 (516

5、、326)，如下图所示。（9）在上图所示布局单元格(1)中绘制4个宽度为136像素，高度为34像素的单元格(切换到标准视图用插入表格进行操作），并在其单元格分别输入文本，如下图7-18所示。（10）参照下图，填充布局单元格容。完成所对应的布局单元格文本的输入。（11）最后将“布局视图”转化为“标准视图”。在“标准视图”中根据自己的审美观进行调整，可为布局单元格的边框进行修饰，完成了该页面的制作，通过浏览器预览，并与FINAL文件夹中的07.htm网页文件进行对比。3框架的使用（1）打开或新建一个空白的文档，在该文档中创建一个 框架页。（2）命名框架。将左列框架命名为index框架、右列上部框架

6、命名为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号

7、字体，颜色为#66CC00；表格边框的颜色为#009900；单元格的背景颜色为#CCFFFF，单元格的高度为30像素，单元格的对齐方式为水平居中、垂直中间（7）将top框架的标题设置为“标题栏”，在“属性”面板中将所有边界设置为O。（8）将光标停留在top框架中，输入文本并插入images文件夹下的图像，其中文本字体大小为7，颜色为#66CC00，如下图所示。（9）完成index和top框架的填充和设置后的结果如下图所示。（10）设置。选中左边框架(index)中目录下的“考试作弊”文本，在“属性”面板中的“”框中设置与之对应的笑话容(WJwj6-1.htm)的。这时“目标”框变为激活状态，从

8、“目标”下拉列表框中选择的目标为main。用户如果在浏览器中浏览这个页面的时候，单击“考试作弊”文本，则被的文件将在main框架中打开。（11）使用相同的方法设置其他“笑话”目录所的容和目标，其他的目标均为mian框架。笑话目录各项和WJ文件夹中wj6-1.htmwj6-8.htm是一一对应的关系。（12）指定框架源文件。选中main框架，在“属性”面板中的“源文件”文本框中设置框架的源文件。单击旁边的文件夹，选择WJ文件夹中Wj6-1.htm。（13）设置了源文件后的页面如下图所示。（14）在文档窗口的菜单栏中单击“保存全部”按钮，将所有的框架进行保存。（15）按F12键便可预览该实例，并与FINAL文件夹中的网页作对比。 注：以上图形为黑白，但在实际操作中都为彩色。