实训练习07 html网页布局设计——框架的应用

《实训练习07 html网页布局设计——框架的应用》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、广东工程职业技术学院计算机信息系《网页设计》实训报告实训题目：实训项目07框架的应用班级：学号：姓名：日期：教师：成绩：实训目的：1．掌握在网页中创建框架的操作方法。2．掌握如何保存框架集文件和各个框架的操作方法。3．掌握设置框架集属性和框架属性的方法。4．掌握编辑框架内容的操作方法。5．了解在框架中设置超链接的操作方法。实训内容：1.本次实训要求用布局表格完成“我的主页”网页，完成2个框架集页面的创建，具体效果参见预览效果页面。2.在站点“myweb”根文件夹之下，建立一个“07”的子文件夹，将“素材”复

2、制到这个文件夹下，而且重新命名为“sucai”，里面的文件夹也重新命名，去掉中文；再在“07”下建立一个“letuweb”文件夹，将“ch8”复制到此文件下。3.在“07”的子文件夹中建立“07.html”的网页文件，为本次练习的内容做一个首页。4.制作一个框架网页a)新建一个页面文档，将其保存为07-1.html。创建框架集“上方和下方框架”网页，在中间的框架中嵌套一个“左侧框架”，保存全部的页面，设置框架网页标题及属性。b)框架集由4个框架组成：1.顶部为标题部分，显示网页的大标题，保存为07-1top

3、.html。2.中间左侧为导航部分，提供个网页的导航链接，保存为07-1left.html。3.中间右侧为主题部分，显示网页主要内容，网页展示的内容共分为4大部分，分别为：公司简介07-1main.html、产品介绍07-1main2.html、征稿合作07-1main3.html和联盟伙伴07-19b5a9a597d2fe03dde7127154bb1aa07.doc框架的应用第4页main4.html。这4部分内容分别放置在4个网页中，并通过导航链接控制在住框架中显示。1.底部为说明部分，主要包括一些版

4、权信息等，保存为07-1bottom.html。b)编辑各框架内的网页文件：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中插入表格并在表格中输入“

5、公司简介”的相关文字内容。4.让光标定位在bottomFrame框架中，编辑07-1bottom.html文件，输入版权信息等相关文字内容。c)制作其他需要调用至主框架的网页文件，产品介绍07-1main2.html、征稿合作07-1main3.html和联盟伙伴07-1main4.html，并用CSS样式对网页进行美化。d)定义框架之间超链接，由于这些链接都是在主框架中打开，在“目标”文本框中选择“mainframe”。e)预览效果：07-1.html。2.创建框架集网页a)创建一个“上方固定，左侧嵌套”

6、的框架集网页，将整体大的框架网页保存为：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

7、.html插入文字并对其用CSS样式进行美化。f)创建一个灯具的网页相册。g)在灯具文字位置处绘制一个矩形热区，并做连接到灯具的网页相册中，连接目标选中右下方框架的名称“mainFrame”。h)预览效果：07-2.html3.使用框架布局制作“乐途网”首页及商旅管理首页（保存在ch8文件夹下），操作参考教材P146-151a）制作“乐途网”首页1）启动DreamweaverCS4，在“乐途网”站点中，执行【文件】

8、【新建】命令，打开【新建文档】对话框。2）9b5a9a597d2fe03dde7127154

9、bb1aa07.doc框架的应用第4页在【新建文档】对话框中选择【示例中的页】，在【示例文件夹】列表框中选择【框架页】，在【示例页】列表框中选择框架结构【上方固定】。3）单击“创建”按钮，打开【框架标签辅助功能属性】对话框。在“框架”下拉列表框中选择框架，在“标题”文本框中输入标题，通常保持默认设置。4）单击“确定”按钮关闭对话框，完成框架网页的创建5）执行【文件】

10、【框架集另存为】菜单命令，将框架集页面命名为“