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

广东工程职业技术学院计算机信息系网页设计实训报告实训题目：实训项目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大部分，分别为：公司简介07-1main.html、产品介绍07-1main2.html、征稿合作07-1main3.html和联盟伙伴07-1main4.html。这4部分内容分别放置在4个网页中，并通过导航链接控制在住框架中显示。4. 底部为说明部分，主要包括一些版权信息等，保存为07-1bottom.html。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.html6. 使用框架布局制作“乐途网”首页及商旅管理首页（保存在ch8文件夹下），操作参考教材P146-151a）制作“乐途网”首页1） 启动Dreamweaver CS4，在“乐途网”站点中，执行【文件】|【新建】命令，打开【新建文档】对话框。2） 在【新建文档】对话框中选择【示例中的页】，在【示例文件夹】列表框中选择【框架页】，在【示例页】列表框中选择框架结构【上方固定】。3） 单击“创建”按钮，打开【框架标签辅助功能属性】对话框。在“框架”下拉列表框中选择框架，在“标题”文本框中输入标题，通常保持默认设置。4） 单击“确定”按钮关闭对话框，完成框架网页的创建 5） 执行【文件】|【框架集另存为】菜单命令，将框架集页面命名为“index.html”，保存在站点根目录“ch8”文件夹中。6） 鼠标点击选中上侧框架页面，执行【文件】|【保存框架】菜单命令，将上侧框架页面命名为“top.html”，保存在站点根目录中。7） 鼠标点击选中下侧框架页面，执行【文件】|【保存框架】菜单命令，将下侧框架页面命名为“indexmain. html”，保存在站点根目录“ch8”文件夹中。完成框架网页的保存。 b）制作“商旅管理”主页面1） 在【文件】面板中双击ctmmain.html文件，在工作区以设计视图打开文件。设置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.html7. 请写填写网页设计课程设计站点制作实训周记，并放在你的站点中。实训周