实验15 利用表格和框架技术进行网页布局设计_表格布局网页结构

实验15 利用表格和框架技术进行网页布局设计由刀豆文库小编整理，希望给你工作、学习、生活带来方便，猜你可能喜欢“表格布局网页结构”。

实验15 利用表格和框架技术进行网页布局设计

1.1 15.1 实验目的1．掌握利用Adobe Dreamweaver CS6的表格进行网页布局设计的方法。2．掌握利用Adobe Dreamweaver CS6的框架技术进行网页布局设计的方法。1.2 15.2 实验内容

1．利用框架对个人站点网站重新进行设计。2．利用表格对个人站点网站重新进行设计。1.3 15.3 实验操作步骤

15.3.1 利用框架设计网页布局

利用框架设计网页布局就是利用框架技术重新设计实验14中的“我的小站”，将主页拆分为上中下部分，分别为top.html、middle.html和bottom.html。使得浏览“个人简介”和“我的学校”等页面时都能看到导航栏和底部版权联系信息。具体操作步骤如下：

1.新建站点：启动Adobe Dreamweaver CS6，单击“站点”菜单中的“新建站点”命令，则弹出“站点设置对象”对话框，如图15-1所示。在站点名称右边的文本框中填入站点名称“框架网页布局，在本地站点文件夹中填入D:websmyFrameSite（也可以指定其他位置）后，单击“保持”按钮，就创建了一个新的站点。

图15-1“站点设置对象”对话框

图15-2添加网页top.html、middle.html、bottom.html后效果

2.设计网页top.html、middle.html、bottom.html：在站点中添加网页文件并打开。如图15-2所示。参照实验14中的设计主页index.html步骤设计top.html、middle.html、bottom.html。各个页面的设计效果分别如图15-3~图15-5所示。

图15-3 网页top.html设计效果图

图15-4 网页middle.html设计效果图

图15-5 网页bottom.html设计效果图

3.添加其他网页：参照实验14，在网站中添加网页个人简介introduction.html，添加网页“我的学校”MySchool.html，添加网页“我的相册”MyAbums.html,添加网页“我的链接”MyLinks.html。自己设计各个页面并保存（也可以直接将实验14中的相应页面复制过来）。4.创建框架主页：选中“窗口”中的“框架”命令，显示框架面板。打开主页top.html页，单击“修改”菜单的“框架集”子菜单的“拆分上框架”命令，出现如图15-6的效果。将光标定位到下框架中，单击“修改”菜单的“框架集”子菜单的“拆分上框架”命令，出现如图15-7的效果，是典型的上中下网页布局形式。

5.设置框架属性：在框架面板中选中框架，在属性面板中修改框架属性，如图15-8所示。

分别将上中下框架名称修改为mytop、myMiddle、mybottom。源文件分别设为：top.html、middle.html、bottom.html。

6.保存框架集：单击保存按钮将框架集保存为indexFrame.html。

7.修改top.html中导航链接的目标框架，默认在myMiddle中打开。操作步骤是：选中超级链接，选中“修改”菜单中“链接目标”子菜单中的“myMiddle”项，如图15-9所示。

图15-6 拆分框架效果图-1

图15-7 拆分框架效果图-2

图15-8 框架属性设置

图15-9 修改导航链接的目标框架

8.在浏览器中或是发布后查看网站，效果如图15-10所示。网页上中下分别是三个独立的网页，有各自的滚动条。

图15-10 框架网页浏览效果

15.3.2 利用表格设计网页布局

利用表格设计网页布局就是利用表格设计网页布局，以对实验14中的“我的小站”进行修改设计为例进行学习，具体操作步骤如下：

1.新建站点：启动Adobe Dreamweaver CS6，单击“站点”菜单中的“新建站点”命令，则弹出“站点设置对象”对话框，如图15-1所示。在站点名称右边的文本框中填入站点名称“表格网页布局，在本地站点文件夹中填入D:websmyTableSite（也可以指定其他位置）后，单击“保持”按钮，就创建了一个新的站点。

2.在站点中添加主页文件index.html并打开，单击“插入”菜单中的“表格”命令，弹出“表格”对话框，如图15-11所示。将行设为3，列设为1，表格宽度为100%，边框为0，单击“确定”按钮，则添加了一个三行一列的表格。

3.调整单元格高度，将15.3.1中的top.html、middle.html、bottom.html依次负责到表格的三行中，这样就完成了主页的设计，效果如图15-12所示。

图15-11

“表格”对话框

4.5.6.7.8.图15-12

表格网页布局首页设计图

将主页的内容区替换为“个人简介”页面内容，并将网页另存为introduction.html。将主页的内容区替换为“我的学校”页面内容，并将网页另存为MySchool。

将主页的内容区替换为“我的相册”页面内容，并将网页另存为MyAbums.html。将主页的内容区替换为“我的链接”页面内容，并将网页另存为MyLinks.html。利用表格布局的网站完成，可发布或浏览效果。

15.3.3 操作与练习

1．在实验14.3.4中设计的个人求职站点添加一个导航页top.html和一个版权声明页bottom.html，并利用框架对站点重新布局，发布和测试站点。

2．将实验14.3.4中设计的个人求职站点按表格的形式重新设计，并发布和测试站点。

图15-13 操作与练习3要求效果图

3．按照图15-13所示设计一个表格，并填入内容，然后完成下列操作。

利用搜索引擎搜索到《三国演义》在线阅读的网站，在文字“三国演义”上建立超级链接，并链接搜索到的网站。

(1)将文字“中国四大名著”格式设为：隶书，24磅，红色加粗并居中。(2)将表格的单元格间距设为0，边框粗细设为2，边框颜色设为蓝色。(3)将文字“中国四大名著”所在单元格的背景色设为黄色。(4)将网页的上边距设为30像素，左边距设为20像素(5)将页面的标题改为“中国四大名著简介”。(6)保存网页，在浏览器中查看网页效果。

操作与练习

1、操作与练习

2、操作与练习3操作步骤（略）