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

第一篇：实验15 利用表格和框架技术进行网页布局设计实验15 利用表格和框架技术进行网页布局设计 1.1 15.1 实验目的 1．掌握利用Adobe Dreamweaver CS6的表格进行网页布局设

15 第一篇：实验利用表格和框架技术进行网页布局设计 15 实验利用表格和框架技术进行网页布局设计 1.115.1 实验目的 1AdobeDreamweaverCS62Adobe ．掌握利用的表格进行网页布局设计的方法。．掌握利用 DreamweaverCS61.215.2 的框架技术进行网页布局设计的方法。实验内容 121.315.3 ．利用框架对个人站点网站重新进行设计。．利用表格对个人站点网站重新进行设计。实 验操作步骤 15.3.1 利用框架设计网页布局 14 利用框架设计网页布局就是利用框架技术重新设计实验中的“我的小站”，将主页拆分为上中下部 top.htmlmiddle.htmlbottom.html 分，分别为、和。使得浏览“个人简介”和“我的学校”等页面时都能看 到导航栏和底部版权联系信息。具体操作步骤如下： 1.AdobeDreamweaverCS6 新建站点：启动，单击“站点”菜单中的“新建站点”命令，则弹出“站 15-1 点设置对象”对话框，如图所示。在站点名称右边的文本框中填入站点名称“框架网页布局，在本地 D:\webs\myFrameSite 站点文件夹中填入（也可以指定其他位置）后，单击“保持”按钮，就创建了一个 新的站点。 15-1 图“站点设置对象”对话框 15-2top.htmlmiddle.htmlbottom.html 图添加网页、、后效果 2.top.htmlmiddle.htmlbottom.html15-2 设计网页、、：在站点中添加网页文件并打开。如图所示。 14index.htmltop.htmlmiddle.htmlbottom.html 参照实验中的设计主页步骤设计、、。各个页面的设计效果 15-3~15-5 分别如图图所示。 15-3top.html 图网页设计效果图 15-4middle.html 图网页设计效果图 15-5bottom.html 图网页设计效果图 3.14introduction.html 添加其他网页：参照实验，在网站中添加网页个人简介，添加网页“我的学校” MySchool.htmlMyAbums.html,MyLinks.html ，添加网页“我的相册”添加网页“我的链接”。自己设计各 144. 个页面并保存（也可以直接将实验中的相应页面复制过来）。创建框架主页：选中“窗口”中的“框 top.html 架”命令，显示框架面板。打开主页页，单击“修改”菜单的“框架集”子菜单的“拆分上框架” 15-6 命令，出现如图的效果。将光标定位到下框架中，单击“修改”菜单的“框架集”子菜单的“拆分上 15-7 框架”命令，出现如图的效果，是典型的上中下网页布局形式。