框架的高级设计框架的超级链接浮动框架的.ppt

,实验内容 1、框架的建立； 2、框架的高级设计； 3、框架的超级链接； 4、浮动框架的建立。,实验目的 1、熟练掌握框架的建立并完成一个简单的框架页面 2、熟练掌握框架的高级设定并完成一个较复杂的框架页面； 3、准确实现框架中的超级链接； 4、够熟练掌握浮动框架的建立。,实验重点 1、框架的属性 2、框架的超级链接,实验难点 1、浮动框架的建立,（一）演示实验项目效果 1、实验项目一 创建简单的框架页面,实验项目一的效果图,2、实验项目二 框架的高级设计实例,实验项目二的效果图,3、实验项目三 实现框架的超级链接实例 4、实验项目四 浮动框架的建立实例,实验项目四的效果图,（二）实验步骤： 实验项目一 创建简单的框架页面 1、建立框架的基本结构（注意：frameset与body不能同时出现。） 2、将框架水平分割（可以以数值或百分比方式设置） 3、分别设定上框架和下框架的显示的页面 （注：定义窗口框架的frameset标记为成对标记，而定义子窗口框架的标记为非成对标记。）,实验项目二 框架的高级设计实例 1、打开实验项目一的源代码，另存为一个HTML文件 2、在此文件的基础上将窗口框架进行水平分割，建立嵌套窗口框架 3、设置子窗口框架显示的网页和名称（右框架显示的是图片） 注意：一定要正确设计框架的样式。,实验项目三 实现框架的超级链接实例 1、在实验二的基础上，给框架名称为up中所显示的页面中的按钮图标建立超级链接，并显示在框架名称为down的位置。（通过target属性设置） 2、正确设置超链接显示的内容。 实验步骤： 1、打开shiyan4文件夹下的f05.html文件； 2、找到有超链接的页面（ shiyan4文件夹下的wssc03.html) 3、对链接进行修改课堂练习： 打开shiyan4文件夹下的f06.html文件，完成f04.html的效果。,实验项目四 浮动框架的建立实例 1、在wssc02.html中建立浮动框架 2、设置浮动框架的属性提示：,实验安排： 1、实验项目一学生与我同步操作 2、实验项目二学生在项目一的基础上先操作几分钟，再由我先演示后，学生再完成 3、实验项目三由我先演示，然后跟学生同步操作 4、学生在实验项目三的基础上完成一个实例的操作 提示：大家要找到源文件，然后找到超链接的所在的位置和链接到的位置 5、实验项目四由我先演示，学生再独立完成,实验小结： 本次课，我们实现了四个实验项目，通过这四个实验项目我们对框架的基本内容有更深的了解，还有很多框架的属性在这里没有应用到，希望大家在课余时间也能熟练掌握它们。,存在的问题： 1、超链接的目的框架一定要清晰； 2、嵌套框架的建立一定要熟练。,今天的课就到这里，希望大家下课后预习表单的制作。,