资源预览内容
第1页 / 共4页
第2页 / 共4页
第3页 / 共4页
第4页 / 共4页
亲,该文档总共4页全部预览完了,如果喜欢就下载吧!
资源描述
广东工程职业技术学院计算机信息系网页设计实训报告实训题目:实训项目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. 请写填写网页设计课程设计站点制作实训周记,并放在你的站点中。实训周记:班别: 学号: 姓名:操作提示:1. 本次实训建立的网页均保存在“07”的子文件夹中。2. 本次操作所用到的文本和图片均放在素材文件夹中。3. 在框架页面做链接的时候,注意链接目标的选择。实训练习07 HTML网页布局设计 框架的应用 第 3 页
网站客服QQ:2055934822
金锄头文库版权所有
经营许可证:蜀ICP备13022795号 | 川公网安备 51140202000112号