框架的高级设计框架的超级链接浮动框架的.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、嵌套框架的建立一定要熟练。,今天的课就到这里，希望大家下课后预习表单的制作。,