第四章(框架和嵌入式框架)

1、Page 1第四章第四章框架与嵌入式框架框架与嵌入式框架 Page 2课程回顾n等标记构成表格n和的区别n表格的尺寸颜色（背景、边框）n跨行跨列的表格 n表格的美化修饰(背景图，居中，边距等)n表格填充属性cellpadding cellspacingn用表格嵌套，排列，填充实现页面布局Page 3本章要点框架标记各窗口尺寸设置各窗口间相互操作(Frame Target) IFrame的外观IFrame的使用Page 4框架 广告栏顶部框架广告栏顶部框架(top.htm)导航栏左导航栏左侧框架侧框架(left.htm)详细内容页详细内容页面右侧框架面右侧框架(main.htm)框架的框架的边框

2、边框框架集页面框架集页面(FrameSet.htm)Page 5多窗口页面(Frames) n 使用Frames结构，能够将整个窗口分成几个独立的小窗口n 每一个窗口可分别载入不同的文件，每个窗口是可以相互沟通。n Framees结构中的每个URL值指定了一个事先做好的文件Page 6上中下排列的窗口每个窗口对应一个页面，以及一个框架集页面，总每个窗口对应一个页面，以及一个框架集页面，总共需要几个共需要几个HTML页面文件？页面文件？FRAMEFRAMEFRAMEFRAMESETPage 7框架标记 将窗口分割成将窗口分割成上中下上中下3部分部分窗口边框窗口边框的宽度的宽度如果要在浏览器中创建

3、左中如果要在浏览器中创建左中右三个窗口右三个窗口,该如何实现？该如何实现？在上例中主要用到了下列代码在上例中主要用到了下列代码查看源码查看源码Page 8结构简述出现出现标记的文档中，将不再使用标记的文档中，将不再使用标记标记 注意：注意：frame在在Frameset中间中间没有没有BODYPage 9三窗口框架top.html效果图效果图left.html效果图效果图right.html效果效果Page 10多个复杂的窗口 设置无框设置无框架边框架边框不显示不显示滚动条滚动条禁止调整禁止调整框架大小框架大小框架名称，便于超框架名称，便于超文本链接锚标签文本链接锚标签target属性所引用属

4、性所引用Page 11各窗口尺寸设置 其中的任何一个数字也可以由其中的任何一个数字也可以由“*”来代替来代替 如：如： 将将100像素以外的像素以外的窗口平均分配窗口平均分配 将窗口分为三等份将窗口分为三等份 s框架可以将窗口分割为几块，横向分用ROWS属性，纵向分用COLS属性，每一块的大小可以由这两个属性的值来实现可以由数可以由数字或百分字或百分比来实现比来实现Page 12窗口间相互操作n 由由Frames分出来的几个窗口的内容并不是静止不分出来的几个窗口的内容并不是静止不变的，往往一个窗口的内容随着另一个窗口的要求变的，往往一个窗口的内容随着另一个窗口的要求而不断变化而不断变化 n 我

5、们必须为每一个窗口起一个名字，这个名字用属我们必须为每一个窗口起一个名字，这个名字用属性性Name来定义来定义 例如：例如： Page 13Target属性 定义了窗口名称，还应该有定义了窗口名称，还应该有Target来配合使用，来配合使用，Target属性指定了所链接的文件出现在哪一窗口。属性指定了所链接的文件出现在哪一窗口。Target的值可以是的值可以是name定义的名称，也可以是以定义的名称，也可以是以下四类值下四类值: 显示一个新窗口显示一个新窗口 显示在同一个窗口显示在同一个窗口 显示在前一份文件的窗口显示在前一份文件的窗口 显示在整个浏览器窗口显示在整个浏览器窗口Page 14T

6、arget示例一right页面页面buy页面页面target属性指定了所链接的属性指定了所链接的文件出现在名称为文件出现在名称为“rightframe”的框架窗口的框架窗口里里Page 15Target示例二 right.html buy.html sale.html person_info.html 新启一个窗口打开新启一个窗口打开文件文件 “right.html”在本身窗口打开文在本身窗口打开文件件 “buy.html”在前一窗口显示在前一窗口显示sale.html在整个浏览器窗口在整个浏览器窗口显示显示all.htmlPage 16各窗口边框的设置Frameborder属性用来设定各窗口

7、边框的设置，属性用来设定各窗口边框的设置，yes表示有边框，表示有边框，no表示没有边框表示没有边框查看源码查看源码Page 17边框色彩bordercolor=#属性用来设定边框色彩属性用来设定边框色彩查看源码查看源码Page 18边界宽度用来设定各窗口的上下左右边界宽度用来设定各窗口的上下左右边界宽度 #的值为像素点的值为像素点marginwidth=5marginwidth=10marginwidth=50查看源码查看源码Page 19各窗口间空白区域 framespacing=#属性用来设定各窗口间空白区域，其中属性用来设定各窗口间空白区域，其中#为空白区域的大小为空白区域的大小如图所

8、示：红色和黑色部分如图所示：红色和黑色部分表示各窗口的空白区域表示各窗口的空白区域framespacing =50查看源码查看源码Page 20卷滚条设置用来设定滚动条，缺省值是用来设定滚动条，缺省值是autoyes 表示有，表示有，no表示没有，表示没有，auto表示由浏览器自动设置表示由浏览器自动设置当现实区域不够的时候当现实区域不够的时候就会出现滚动条就会出现滚动条B窗口，设置了不显示滚动条窗口，设置了不显示滚动条查看源码查看源码Page 21框架的应用领域n很少用在网站的页面显示中，如果使用，大都也是应用在网站后台管理系统的页面上n可以应用于各种web应用系统的使用界面n观察搜狐首页和

9、一个博客系统的后台页面 体会效果Page 22网站首页Page 23后台页面Page 24嵌入式框架 如同如同“画中画画中画“电视电视 Iframe标记，又叫浮动帧标记，你可以用它将一标记，又叫浮动帧标记，你可以用它将一个个HTML文档嵌入在一个文档嵌入在一个HTML中显示中显示 Page 25Iframe标记的使用 n 格式格式 :文件的路径，既可是文件的路径，既可是HTML文件，也可以是文本、文件，也可以是文本、ASP等等 “画中画画中画”区域的宽度区域的宽度是否出现滚动条是否出现滚动条区域边框的高度区域边框的高度 另外，在另外，在中还可以添加中还可以添加name=#属性，属性后面属性，属

10、性后面的文字将出现在不支持的文字将出现在不支持FRAMES的浏览器中的浏览器中Page 26嵌入式框架实例登鹳雀楼登鹳雀楼白日依山尽，黄河入海流。白日依山尽，黄河入海流。欲穷千里目，更上一层楼。欲穷千里目，更上一层楼。我们先创建一个文件名叫我们先创建一个文件名叫a.html文件，其代码如下文件，其代码如下查看源码查看源码Page 27主页面代码嵌入式框架嵌入式框架 换成如下代码，大家注意效果的变化，体会属性的作用换成如下代码，大家注意效果的变化，体会属性的作用查看源码查看源码Page 28Iframe的应用领域n 用于在页面上动态的显示其他系统页面的内容 嵌入的页面有更新的话，也会相应的显示出来n 将页面数据提交到iframe，可以不让页面刷新 关于这点，大家在学习了后面知识“表单”后，才能深刻体会 Page 29总结框架标记各窗口尺寸