《用HTML建立框架》PPT课件.ppt

第五章,重庆信息技术职业学院,框架的应用,本章主要目标,理解框架和框架集的概念 掌握创建框架集和框架的基本方法 浮动式框架的应用 使用框架技术对网页进行布局,认识框架和框架集,案例,认识框架和框架集,框架集网页,适用场合：,网页上经常出现一些重复部分，用框架可将整个窗口分成几个独立的小窗口，每一个窗口可分别载入不同的文件，每个窗口是可以相互沟通。最常见的是用来定义页面的导航区域、LoGo标志和内容区域，从而使浏览者随时能找到自己感兴趣的内容,不足：,内容非常多的网页不宜采用框架式结构，所以大网站中几乎所有的网页都不是框架式网页。因为不同框架部分的表格比较难对齐。,框架使用场合,页面的一个固定部分显示徽标或静态信息,在另一个固定部分显示导航部分详细内容,在此处显示详细内容， 页面中此部分是变化的。,框架集的相关概念,框架 框架不是文件，是在框架集中定义的区域，它可以通过指定URL显示任何文档。 框架集 框架集是个文档，它本身没有提供显示在浏览器中的HTML内容。它用来定义一系列框架的属性以及他们的大小、位置等布局方式，以及每个框架中最初始的页面的URL。框架集文件本身不包含要在浏览器中显示的Web页内容（对不能显示框架的浏览器进行的处理除外，即部分）。框架集文件只是向浏览器提供应如何显示一组框架以及在这些框架中应显示哪些文档的有关信息。,广告栏顶部框架(top.html),导航栏左侧框架(left.html),详细内容页面右侧框架 (main.html),框架的边框,框架集页面(FrameSet.html),框架不是文件。很可能会以为当前显示在框架中的文档是构成框架的一部分，但该文档实际上并不是框架的一部分。框架是存放文档的容器，任何一个框架都可以显示任意一个文档。, ,框架的基本结构,框架页面的基本语法,边框尺寸大小,将窗口分割成左中右3个部分,可选,将窗口分割成上下2个部分,可选,第一个窗口要显示的网页,如果一个站点在浏览器中显示为包含3个框架的单个页面，则它实际上至少由4个单独的Web文档组成：框架集文件以及3个文档，这3个文档包含这些框架内初始显示的内容。当在Dreamweaver中设计使用框架集的页面时，必须全部保存这4个文件，以便该页面可以在浏览器中正常工作。,框架集可以嵌套定义，以便将浏览器窗口划分出更多的区域。 框架技术主要通过两种类型的元素来实现，一个是框架集(由标签定义)，一个是框架(由标签定义)。前者定义如何划分框架，后者定义框架的具体属性。,框架集与框架的基本语法 您的浏览器不支持框架！ ,框架集代码, 您的浏览器不支持框架！ ,框架集,总结： 框架集文件只是对窗口进行划分，并在各窗口载入相应的网页。 （1）是对窗口进行划分，并预设了各窗口属性和特点 （2） src值指定了事先做好的、要载入该窗口的文件 （3）该部分用于不支持框架的浏览器所显示的内容,框架集的主要应用类型,框架集文件制作步骤,规划框架集（框架结构规划）； 准备每一个框架中调入（打开）的页面； 创建框架集网页，设置框架集及各框架属性、大小，加载的初始页面等属性； 选中框架集保存框架集文件 。,规划框架集,窗口的结构划分和大小设置 标签的rows属性实现横向划分分，cols属性实现纵向分用，每一块的大小由这两个属性的值来实现。 例: 例: #的值为一对用引号括起来的字符串，字符串中的数值表示每个分窗口所占的尺寸，数值中间用逗号隔开，有几个数值就表示分出了几个窗口。其中数值可以是百分比值，也可是象素值，任何一个数值也可由“*”来代替，表示由浏览器自动设置其大小（剩余的都分配给最后一个窗口或平均分配给剩余的窗口）。,创建基本框架, . ,创建基本框架(续),框架集属性设置,边框的设置 #=yes, no/0,1 边框的粗细设置 #为象素值 边框的颜色设置 #为颜色值,如何创建多个复杂的窗口,要实现如下图所示的窗口，该如何制作？,1、分成上下两个窗口 2、把下面的窗口分成 左右两个窗口,top窗口,left 窗口,right窗口,创建多个复杂的窗口实现步骤如下： 1、创建一个HTML页面“top.html” 2、创建一个HTML页面“left.html” 3、创建一个HTML页面“right.html”,top.html效果图,left.html效果图,right.html效果,4、新建多框架HTML页面“Frame_Sets.html”,设置无框架边框,禁止调整框架大小,框架名称，便于超文本链接锚标签target属性所引用,框架的嵌套,框架属性设置,各窗口链接页面的路径设置 ,各窗口的名称设置 #为字符串 各窗口边框的设置 #=yes, no/0,1 各窗口的上下左右边界宽度设置 各窗口的滚动条设置 #=yes, no, auto 各窗口框边是否允许用户改变设置 ,如何设置窗口链接的显示位置,如果在同一个页面中，要实现在一个框架窗口中的超链接页面出现在另一个框架窗口中，如何实现？,演示示例：不同框架之间超链接效果,使用target目标窗口属性,技术要点： 1.设置框架中各窗口的name属性 2.链接设置中设置Target属性，其值为指定了所链接的文件出现在哪一窗口（ _top / _parent /框架名称/_self /_blank）,如何设置窗口链接的显示位置,target目标窗口属性 name“显示的窗口名” ,target属性指定了所链接的文件出现在名称为“窗口名”的框架窗口里。,target属性指定了所链接的文件出现在名称为“rightframe”的框架窗口里,如何设置窗口链接的显示位置,target目标窗口属性 四个特殊的窗口 显示在新窗口 显示在本窗口 显示在父窗口 显示在整个浏览器窗口, ,新启一个窗口打开文件 “right.html”,小结2,top.html,left.html,right1.html或right2.html,frame_sets.html,编写如下图所示效果对应的html代码,浮动式框架 Iframe,浮动式框架也称为嵌入式框架（标签为）也是框架的一种形式。它与普通框架的区别在于，它可以嵌入在网页中的任意部分，比如可以在表格中插入嵌入式框架。正是由于这一特点，使得嵌入式框架使用广泛。, 框架的另一种形式，它与不同的是，iframe可以嵌在网页中的任意部分。 语法： URL可以是相对路径，也可以是绝对路径,标签的属性 src：文件的路径，既可是HTML文件，也可以是文本、ASP等； width、height：浮动框架的宽与高； scrolling:当SRC的指定的HTML文件在指定的区域不显不完时，滚动选项，如果设置为NO，则不出现滚动条；如为Auto：则自动