admin 管理员组文章数量: 1086019
2024年6月2日发(作者：sql2000sybase下载)
广东工程职业技术学院计算机信息系
《网页设计》实训报告
实训题目：实训项目07 框架的应用
班级： 学号： 姓名：
日期： 教师： 成绩：
实训目的：
1．掌握在网页中创建框架的操作方法。
2．掌握如何保存框架集文件和各个框架的操作方法。
3．掌握设置框架集属性和框架属性的方法。
4．掌握编辑框架内容的操作方法。
5．了解在框架中设置超链接的操作方法。
实训内容：
1. 本次实训要求用布局表格完成“我的主页”网页，完成2个框架集页面的创建，具
体效果参见预览效果页面。
2. 在站点“myweb”根文件夹之下，建立一个“07”的子文件夹，将“素材”复制到
这个文件夹下，而且重新命名为“sucai”，里面的文件夹也重新命名，去掉中文；再
在“07”下建立一个“letuweb”文件夹，将“ch8”复制到此文件下。
3. 在“07”的子文件夹中建立“”的网页文件，为本次练习的内容做一个首页。
4. 制作一个框架网页
a) 新建一个页面文档，将其保存为。创建框架集“上方和下方框架”网页，
在中间的框架中嵌套一个“左侧框架”，保存全部的页面，设置框架网页标题及
属性。
b) 框架集由4个框架组成：
1. 顶部为标题部分，显示网页的大标题，保存为。
2. 中间左侧为导航部分，提供个网页的导航链接，保存为。
3. 中间右侧为主题部分，显示网页主要内容，网页展示的内容共分为4大部分，
分别为：公司简介、产品介绍、征稿合作
和联盟伙伴。这4部分内容分别放置在4个网
框架的应用 第 1 页
页中，并通过导航链接控制在住框架中显示。
4. 底部为说明部分，主要包括一些版权信息等，保存为。
c) 编辑各框架内的网页文件：
1. 将光标定位在topFrame框架中，编辑文档，在其中中插入一个
1行1列宽度为680像数的表格，在表格中插入Banner图像。
2. 让光标定位在leftFrame框架中，编辑文件，插入4行1列表格，
设置宽度为80%，在4个单元格中分别插入相应的按钮图像。
3. 让光标定位在mainFrame框架中，编辑文件，在
中插入表格并在表格中输入“公司简介”的相关文字内容。
4. 让光标定位在bottomFrame框架中，编辑文件，输入版权信
息等相关文字内容。
d) 制作其他需要调用至主框架的网页文件，产品介绍、征稿合作
和联盟伙伴，并用CSS样式对网页进行美化。
e) 定义框架之间超链接，由于这些链接都是在主框架中打开，在“目标”文本框中
选择“mainframe”。
f) 预览效果：。
5. 创建框架集网页
a) 创建一个“上方固定，左侧嵌套”的框架集网页，将整体大的框架网页保存为：
，顶部的框架网页保存为：，左下的框架网页保存为：
，右下的框架网页保存为：。
b) 设置框架网页标题及属性。（具体属性的设置参见制作参考）
c) 在顶部框架网页中插入一个宽度为100%的2行4列的表格，插入
相应的图像文件。
d) 在左下框架网页插入一个宽度为150像数的7行1列表格，插入相
应的图像文件。
e) 在右下框架网页插入文字并对其用CSS样式进行美化。
f) 创建一个灯具的网页相册。
g) 在灯具文字位置处绘制一个矩形热区，并做连接到灯具的网页相册中，连接目标
选中右下方框架的名称“mainFrame”。
h) 预览效果：
6. 使用框架布局制作“乐途网”首页及商旅管理首页（保存在ch8文件夹下），操
作参考教材P146-151
a）制作“乐途网”首页
1） 启动Dreamweaver CS4，在“乐途网”站点中，执行【文件】|【新建】命令，
打开【新建文档】对话框。
2） 在【新建文档】对话框中选择【示例中的页】，在【示例文件夹】列表框中选
框架的应用 第 2 页
版权声明：本文标题：实训练习07 HTML网页布局设计——框架的应用 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1717264460a703874.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论