实验课名称
实验项目名称
实验学时
实验类型
网页设计与制作
框架的创建及应用
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.创建框架呢网页
选择“文件”-“新建”菜单命令，打开“新建文档”对话框，在“常规”选项卡下选择html网页设计报告总结“框架集”选项，再在“框架集”列表中选择“上方固定，左侧嵌套”，单击“创建”按钮创建一个框架集网页。
4.保存框架网页
1）“文件”-“保存全部”，打开“另存为”对话框，输入框架集的名字为“frame.html”，保存。
2）提示保存右下方的框架中的网页文件，输入“main.html”，保存。
3）提示保存左侧的框架中的网页文件，输入“left.html”，保存。
4) 提示保存上方的框架中的网页文件，输入“top.html”，保存。
5.编辑top.html框架
1）修改背景颜。
2）插入1行1列表格，在下方插入1行7列表格。
3）最后添加其他元素。
6. 编辑left.html框架
1）修改背景颜。
2）插入8行1列表格。
3）最后添加其他元素。
7. 编辑main.html框架
8.设置超链接
1）选中“首页”，在属性面板的“链接”文本框中输入“index.html”,在“目标”下拉列表中选择mainFrame。
2）选中“古诗”，在属性面板的“链接”文本框中输入“left.html”,在“目标”下拉列表中学则leftFrame。
3）选中“游子吟”，在属性面板的“链接”文本框中输入“main.html”,在“目标”下拉列表中学则mainFrame。
4）保存并浏览。
实验
总结
反思
通过本次实验让我熟悉框架的基本操作及属性设置，了解浮动框架的基本操作，能进行具体的框架应用设计。
指导
老师
批语
                          指导教师:年    月    日

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