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

广东工程职业技术学院计算机信息系网页设计实训报告实训题目：实训项目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-1mai n.html、产品介绍 07-1mai n2.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. 让光标定位在 ma inFrame框架中，编辑07-1mai n.html文件，在07-1mai n.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）在灯具文字位置处绘制一个矩形热区，并做连接到灯具的网页相册中，连接目标选中右下方框架的名称“ ma in Fram6'。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，选择导航条中的“首页”图片，在【属 性】面板中设置图像链接为“ in dexmai n.html”，目标为“ main frame” 。保存，完成 链接到首页的超链接设置。2) 在top.html中，鼠标单击选择“商旅管理”导航图片，在【属性】面板中设置 图像链接为“ ctmmain.html”，目标为“ mainframe”。保存，完成“商旅管理”超链接 设置。3) 用同样的方法创建好其他栏目的超级链接， 链接的目标都设置为“mainFrame"， 这样超链接对应页面内容就会在“ mainframe”框架中显示。4) 保存top.html页面，在浏览器中浏览框架集页面index.html，测试设置好的超级 链接，超链接所对应的栏目页面会在下侧框架中显示，而浏览器的地址栏中一直保 持为index.html页面地址。d)预览效果：index.html7. 请写填写网页设计课程设计站点制作实训周记，并放在你的站点中。 实训周记：班别：学号：姓名：操作提示:1. 本次实训建立的网页均保存在“ 07”的子文件夹中2. 本次操作所用到的文本和图片均放在素材文件夹中。3. 在框架页面做链接的时候，注意链接目标的选择。4