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

《实验15 利用表格和框架技术进行网页布局设计.docx》由会员分享，可在线阅读，更多相关《实验15 利用表格和框架技术进行网页布局设计.docx（7页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、实验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.

2、html和bottom.html。使得阅读“个人简介”和“我的学校”等页面时都能看到导航栏和底部版权联系信息。详细操作步骤如下： 1.新建站点：启动Adobe Dreamweaver CS6，单击“站点”菜单中的“新建站点”吩咐，则弹出“站点设置对象”对话框，如图15-1所示。在站点名称右边的文本框中填入站点名称“框架网页布局，在本地站点文件夹中填入D:websmyFrameSite（也可以指定其他位置）后，单击“保持”按钮，就创建了一个新的站点。 图15-1“站点设置对象”对话框 图15-2添加网页top.html、middle.html、bottom.html后效果 2.设计网页top.h

3、tml、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

4、,添加网页“我的链接”MyLinks.html。自己设计各个页面并保存（也可以干脆将试验14中的相应页面复制过来）。 4.创建框架主页：选中“窗口”中的“框架”吩咐，显示框架面板。打开主页top.html页，单击“修改”菜单的“框架集”子菜单的“拆分上框架”吩咐，出现如图15-6的效果。将光标定位到下框架中，单击“修改”菜单的“框架集”子菜单的“拆分上框架”吩咐，出现如图15-7的效果，是典型的上中下网页布局形式。 5.设置框架属性：在框架面板中选中框架，在属性面板中修改框架属性，如图15-8所示。 分别将上中下框架名称修改为mytop、myMiddle、mybottom。源文件分别设为：to

5、p.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

6、.2 利用表格设计网页布局 利用表格设计网页布局就是利用表格设计网页布局，以对试验14中的“我的小站”进行修改设计为例进行学习，详细操作步骤如下： 1.新建站点：启动Adobe Dreamweaver CS6，单击“站点”菜单中的“新建站点”吩咐，则弹出“站点设置对象”对话框，如图15-1所示。在站点名称右边的文本框中填入站点名称“表格网页布局，在本地站点文件夹中填入D:websmyTableSite （也可以指定其他位置）后，单击“保持”按钮，就创建了一个新的站点。 2.在站点中添加主页文件index.html并打开，单击“插入”菜单中的“表格”吩咐，弹出“表格”对话框，如图15-11所示。

7、将行设为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。 将主页的内容区替换为“我的相册”页面内容，并将网页另存为MyAb

8、ums.html。 将主页的内容区替换为“我的链接”页面内容，并将网页另存为MyLinks.html。 利用表格布局的网站完成，可发布或阅读效果。 15.3.3 操作与练习 1在试验14.3.4中设计的个人求职站点添加一个导航页top.html和一个版权声明页bottom.html，并利用框架对站点重新布局，发布和测试站点。 2将试验14.3.4中设计的个人求职站点按表格的形式重新设计，并发布和测试站点。 图15-13 操作与练习3要求效果图 3根据图15-13所示设计一个表格，并填入内容，然后完成下列操作。 利用搜寻引擎搜寻到三国演义在线阅读的网站，在文字三国演义上建立超级链接，并链接搜寻到

9、的网站。 (1) 将文字中国四大名著格式设为：隶书，24磅，红色加粗并居中。 (2) 将表格的单元格间距设为0，边框粗细设为2，边框颜色设为蓝色。 (3) 将文字中国四大名著所在单元格的背景色设为黄色。 (4) 将网页的上边距设为30像素，左边距设为20像素 (5) 将页面的标题改为中国四大名著简介。 (6) 保存网页，在阅读器中查看网页效果。 操作与练习 1、操作与练习 2、操作与练习3操作步骤（略） 试验15 利用表格和框架技术进行网页布局设计 教学设计(利用表格布局网页)举荐 应用表格布局网页结构教学设计 用表格为网页布局教学设计说课稿 应用表格布局网页教案设计与反思 表格基础和DIV+CSS网页布局基础教案 【张海燕】应用表格布局网页结构教学设计及反思 教学设计：Dreamweaver网页制作好用教程框架技术 网页设计中表格和层排版的运用技巧论文 浅谈合理利用信息技术和教化资源进行数学教学设计 本文来源：网络收集与整理，如有侵权，请联系作者删除，谢谢！第7页 共7页第 7 页 共 7 页第 7 页 共 7 页第 7 页 共 7 页第 7 页 共 7 页第 7 页 共 7 页第 7 页 共 7 页第 7 页 共 7 页第 7 页 共 7 页第 7 页 共 7 页第 7 页 共 7 页