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

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