四框架和嵌入式框架PPT课件

Page1,第四章框架与嵌入式框架,Page2,课程回顾,等标记构成表格和的区别表格的尺寸颜色（背景、边框）跨行跨列的表格表格的美化修饰(背景图，居中，边距等)表格填充属性cellpaddingcellspacing用表格嵌套，排列，填充实现页面布局,Page3,本章要点,框架标记各窗口尺寸设置各窗口间相互操作(FrameTarget)IFrame的外观IFrame的使用,Page4,框架,广告栏顶部框架(top.htm),导航栏左侧框架(left.htm),详细内容页面右侧框架(main.htm),框架的边框,框架集页面(FrameSet.htm),Page5,多窗口页面(Frames),使用Frames结构，能够将整个窗口分成几个独立的小窗口每一个窗口可分别载入不同的文件，每个窗口是可以相互沟通。Framees结构中的每个URL值指定了一个事先做好的文件,Page6,上中下排列的窗口,每个窗口对应一个页面，以及一个框架集页面，总共需要几个HTML页面文件？,FRAME,FRAME,FRAME,FRAMESET,Page7,框架标记,将窗口分割成上中下3部分,窗口边框的宽度,如果要在浏览器中创建左中右三个窗口,该如何实现？,在上例中主要用到了下列代码,查看源码,Page8,结构简述,出现标记的文档中，将不再使用标记,注意：frame在Frameset中间没有BODY,Page9,三窗口框架,top.html效果图,left.html效果图,right.html效果,Page10,多个复杂的窗口,设置无框架边框,不显示滚动条,禁止调整框架大小,框架名称，便于超文本链接锚标签target属性所引用,Page11,各窗口尺寸设置,其中的任何一个数字也可以由“*”来代替,如：将100像素以外的窗口平均分配将窗口分为三等份s,框架可以将窗口分割为几块，横向分用ROWS属性，纵向分用COLS属性，每一块的大小可以由这两个属性的值来实现,可以由数字或百分比来实现,Page12,窗口间相互操作,由Frames分出来的几个窗口的内容并不是静止不变的，往往一个窗口的内容随着另一个窗口的要求而不断变化我们必须为每一个窗口起一个名字，这个名字用属性Name来定义,例如：,Page13,Target属性,定义了窗口名称，还应该有Target来配合使用，Target属性指定了所链接的文件出现在哪一窗口。Target的值可以是name定义的名称，也可以是以下四类值:,显示一个新窗口显示在同一个窗口显示在前一份文件的窗口显示在整个浏览器窗口,Page14,Target示例一,right页面buy页面,target属性指定了所链接的文件出现在名称为“rightframe”的框架窗口里,Page15,Target示例二,right.htmlbuy.htmlsale.htmlperson_info.html,新启一个窗口打开文件“right.html”,在本身窗口打开文件“buy.html”,在前一窗口显示sale.html,在整个浏览器窗口显示all.html,Page16,各窗口边框的设置,Frameborder属性用来设定各窗口边框的设置，yes表示有边框，no表示没有边框,查看源码,Page17,边框色彩,bordercolor=#属性用来设定边框色彩,查看源码,Page18,边界宽度,用来设定各窗口的上下左右边界宽度#的值为像素点,marginwidth=5,marginwidth=10,marginwidth=50,查看源码,Page19,各窗口间空白区域,framespacing=#属性用来设定各窗口间空白区域，其中#为空白区域的大小,如图所示：红色和黑色部分表示各窗口的空白区域,framespacing=50,查看源码,Page20,卷滚条设置,用来设定滚动条，缺省值是autoyes表示有，no表示没有，auto表示由浏览器自动设置,当现实区域不够的时候就会出现滚动条,B窗口，设置了不显示滚动条,查看源码,Page21,框架的应用领域,很少用在网站的页面显示中，如果使用，大都也是应用在网站后台管理系统的页面上可以应用于各种web应用系统的使用界面观察搜狐首页和一个博客系统的后台页面体会效果,Page22,网站首页,Page23,后台页面,Page24,嵌入式框架,如同“画中画“电视,Iframe标记，又叫浮动帧标记，你可以用它将一个HTML文档嵌入在一个HTML中显示,Page25,Iframe标记的使用,格式:,文件的路径，既可是HTML文件，也可以是文本、ASP等,“画中画”区域的宽度,是否出现滚动条,区域边框的高度,另外，在中还可以添加name=#属性，属性后面的文字将出现在不支持FRAMES的浏览器中,Page26,嵌入式框架实例,登鹳雀楼白日依山尽，黄河入海流。欲穷千里目，更上一层楼。,我们先创建一个文件名叫a.html文件，其代码如下,查看源码,Page27,主页面代码,嵌入式框架,换成如下代码，大家注意效果的变化，体会属性的作用,查看源码,Page28,Iframe的应用领域,用于在页面上动态的显示其他系统页面的内容嵌入的页面有更新的话，也会相应的显示出来将页面数据提交到iframe，可以不让页面刷新关于这点，大家在学习了后面知识“表单”后，才能深刻体会,Page29,总结,框架标记各窗口尺寸设置框架边框