下面是小编为大家整理的实训练习07,html网页布局设计——框架应用（完整文档）,供大家参考。
实训练习 l 07 html 网页布局设计 —— 框架的应用
----------------------------精品 word 文档 值得下载 值得拥有----------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------
广东工程职业技术学院计算机信息系
《网页设计》实训报告
实训题目:实训项目 07 框架的应用
班级: 学号: 姓名: 日期: 教师: 成绩: 实训目的:
1(掌握在网页中创建框架的操作方法。
2(掌握如何保存框架集文件和各个框架的操作方法。
3(掌握设置框架集属性和框架属性的方法。
4(掌握编辑框架内容的操作方法。
5(了解在框架中设置超链接的操作方法。
实训内容:
1. 本次实训要求用布局表格完成“我的主页”网页，完成 2 个框架集页面的创建，具 体效果参见预览效果页面。
2. 在站点“myweb”根文件夹之下，建立一个“07”的子文件夹，将“素材”复制到 这个文件夹下，而且重新命名为“sucai”，里面的文件夹也重新命名，去掉中文;再
在“07”下建立一个“letuweb”文件夹，将“ch8”复制到此文件下。
3. 在“07”的子文件夹中建立“07.html”的网页文件，为本次练习的内容做一个首页。
4. 制作一个框架网页
a) 新建一个页面文档，将其保存为 07-1.html。创建框架集“上方和下方框架”网页， 在中间的框架中嵌套一个“左侧框架”，保存全部的页面，设置框架网页标题及 属性。
b) 框架集由 4 个框架组成:
1. 顶部为标题部分，显示网页的大标题，保存为 07-1top.html。
2. 中间左侧为导航部分，提供个网页的导航链接，保存为 07-1left.html。
3. 中间右侧为主题部分，显示网页主要内容，网页展示的内容共分为 4 大部分，1560772712.doc 框架的应用 第 1 页
----------------------------精品 word 文档 值得下载 值得拥有----------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------
分别为:公司简介 07-1main.html、产品介绍 07-1main2.html、征稿合作 07-1main3.html 和联盟伙伴 07-1main4.html。这 4 部分内容分别放置在 4 个网 页中，并通过导航链接控制在住框架中显示。
-1bottom.html。
4. 底部为说明部分，主要包括一些版权信息等，保存为 07 c) 编辑各框架内的网页文件:
1. 将光标定位在 topFrame 框架中，编辑 07-1top.html 文档，在其中中插入一个 1 行 1 列宽度为 680 像数的表格，在表格中插入 Banner 图像。
2. 让光标定位在 leftFrame 框架中，编辑 07-1left.html 文件，插入 4 行 1列表格， 设置宽度为 80%，在 4 个单元格中分别插入相应的按钮图像。
3. 让光标定位在 mainFrame 框架中，编辑 07-1main.html 文件，在 07-1main.html 中插入表格并在表格中输入“公司简介”的相关文字内容。
4. 让光标定位在 bottomFrame 框架中，编辑 07-1bottom.html 文件，输入版权信 息等相关文字内容。
d) 制作其他需要调用至主框架的网页文件，产品介绍 07-1main2.html、征稿合作 07-1main3.html 和联盟伙伴 07-1main4.html，并用 CSS 样式对网页进行美化。
e) 定义框架之间超链接，由于这些链接都是在主框架中打开，在“目标”文本框中 选择“mainframe”。
f) 预览效果:07-1.html。
5. 创建框架集网页
a) 创建一个“上方固定，左侧嵌套”的框架集网页，将整体大的框架网页保存为: 07-2.html，顶部的框架网页保存为:07-2top.html，左下的框架网页保存为: 07-2left.html，右下的框架网页保存为:07-2right.html。
b) 设置框架网页标题及属性。(具体属性的设置参见制作参考)
c) 在顶部框架网页 07-2top.html 中插入一个宽度为 100%的 2 行 4 列的表格，插入 相应的图像文件。
d) 在左下框架网页 07-2left.html 插入一个宽度为 150 像数的 7 行 1 列表格，插入相 应的图像文件。
e) 在右下框架网页 07-2right.html 插入文字并对其用 CSS 样式进行美化。
f) 创建一个灯具的网页相册。
g) 在灯具文字位置处绘制一个矩形热区，并做连接到灯具的网页相册中，连接目标 选中右下方框架的名称“mainFrame”。
h) 预览效果:07-2.html
6. 使用框架布局制作“乐途网”首页及商旅管理首页(保存在 ch8 文件夹下)，操作参考教材 P146-151
1560772712.doc 框架的应用 第 2 页
----------------------------精品 word 文档 值得下载 值得拥有----------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------
a)制作“乐途网”首页
1) 启动 Dreamweaver CS4，在“乐途网”站点中，执行【文件】|【新建】命令，打开【新建文档】对话框。
2) 在【新建文档】对话框中选择【示例中的页】，在【示例文件夹】列表框中选择【框架页】，在【示例页】列表框中选择框架结构【上方固定】。
3) 单击“创建”按钮，打开【框架标签辅助功能属性】对话框。在“框架”下拉列表框中选择框架，在“标题”文本框中输入标题，通常保持默认设置。
4) 单击“确定”按钮关闭对话框，完成框架网页的创建
5) 执行【文件】|【框架集另存为】菜单命令，将框架集页面命名为“index.html”，保存在站点根目录“ch8”文件夹中。
6) 鼠标点击选中上侧框架页面，执行【文件】|【保存框架】菜单命令，将上侧框架页面命名为“top.html”，保存在站点根目录中。
7) 鼠标点击选中下侧框架页面，执行【文件】|【保存框架】菜单命令，将下侧框架页面命名为“indexmain. html”，保存在站点根目录“ch8”文件夹中。完成框架网页的保存。
b)制作“商旅管理”主页面
) 在【文件】面板中双击 ctmmain.html 文件，在工作区以设计视图打开文件。设 1 置 ctmmain.html 页面的上下边距和左右边距都为 0。
2) 在 ctmmain.html 中用表格进行布局，设置表格的对齐方式为“居中对齐”。
3) 在表格中插入图片和文本，并设置好 CSS 样式，完成 ctmmain.html 页面的制作。
C) 在框架中创建超级链接
1) 在设计视图中打开导航页面 top.html，选择导航条中的“首页”图片，在【属性】面板中设置图像链接为“indexmain.html”，目标为“mainframe” 。保存，完成链接到首页的超链接设置。
2) 在 top.html 中，鼠标单击选择“商旅管理”导航图片，在【属性】面板中设置图像链接为“ctmmain.html”，目标为“mainframe”。保存，完成“商旅管理”超链接设置。
3) 用同样的方法创建好其他栏目的超级链接，链接的目标都设置为“mainFrame”，这样超链接对应页面内容就会在“mainframe”框架中显示。
4) 保存 top.html 页面，在浏览器中浏览框架集页面 index.html，测试设置好的超级链接，超链接所对应的栏目页面会在下侧框架中显示，而浏览器的地址栏中一直保持为 index.html 页面地址。
d) 预览效果:index.html
1560772712.doc 框架的应用 第 3 页
----------------------------精品 word 文档 值得下载 值得拥有----------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------
7. 请写填写《网页设计》课程设计站点制作实训周记，并放在你的站点中。
实训周记:
班别: 学号: 姓名:
操作提示:
1. 本次实训建立的网页均保存在“07”的子文件夹中。
2. 本次操作所用到的文本和图片均放在素材文件夹中。
3. 在框架页面做链接的时候，注意链接目标的选择。
1560772712.doc 框架的应用 第 4 页