网页设计与制作实验报告:框架的创建及应用
实验课名称
实验项目名称
实验学时
实验类型
网页设计与制作
框架的创建及应用
4
验证、设计
实验报告内容(包括:1.实验目的要求;2.主要使用仪器设备、材料或软件; 3.实验原理或实验方案; 4.方法步骤;5.实验总结反思)
一、实验目的要求
1.熟悉框架的基本操作及属性设置
2.了解浮动框架的基本操作
3.能进行具体的框架应用设计
二、实验软件及材料
Dreamweaver 8、网页设计与制作教程
三、实验方案
1.练习框架的创建、编辑及属性的设置。
2.设计一框架应用案例,方案自定。(建议可参考书上139页上机实训或书上框架网页布局实例
四、方法步骤
1.新建站点
选择“站点”-“新建站点”,根据新建站点向导创建一个站点,命名为“kj”。
2.创建和编辑主页
1)在“文件”面板右击站点名称kj,在弹出的快捷菜单中选择“新建文件”命令建立一个基本网页。
2)在“文件”面板右击新建的网页,重命名为“index.html”,并设置为主页。
3)在“文件”面板中双击index.html,“插入”-“图片”菜单命令,插入图片“诗情画意.jpg”。单击该图片,在属性面板中设置图片属性,宽为1024,高为457,居中显示。
3.创建框架呢网页
选择文件-新建菜单命令,打开新建文档对话框,在常规选项卡下选择框架集选项,再在“框架集”列表中选择上方固定,左侧嵌套,单击创建按钮创建一个框架集网页。
4.保存框架网页
1文件-保存全部,打开另存为对话框,输入框架集的名字为frame.html”,保存。
2)提示保存右下方的框架中的网页文件,输入“main.html”,保存。
3)提示保存左侧的框架中的网页文件,输入“left.html”,保存。
4) 提示保存上方的框架中的网页文件,输入“top.html”,保存。
5.编辑top.html框架
1)修改背景颜。
2)插入11列表格,在下方插入17列表格。
3)最后添加其他元素。
6. 编辑left.html框架
1)修改背景颜。
2)插入81列表格。
3)最后添加其他元素。
7. 编辑main.html框架
8.设置超链接
1)选中“首页”,在属性面板的“链接”文本框中输入“如何保存网页内容index.html,在“目标”下拉列表中选择mainFrame
2)选中“古诗”,在属性面板的“链接”文本框中输入“left.html,在“目标”下拉列表中学则leftFrame
3)选中“游子吟”,在属性面板的“链接”文本框中输入“main.html,在“目标”下拉列表中学则mainFrame
4)保存并浏览。
实验
总结
反思
通过本次实验让我熟悉框架的基本操作及属性设置,了解浮动框架的基本操作能进行具体的框架应用设计。
指导
老师
批语
                          指导教师:       

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。