用HTML建立框架课件

《用HTML建立框架课件》由会员分享，可在线阅读，更多相关《用HTML建立框架课件（37页珍藏版）》请在装配图网上搜索。

1、用HTML建立框架用HTML建立框架 本章主要目标本章主要目标l理解框架和框架集的概念理解框架和框架集的概念l掌握创建框架集和框架的基本方掌握创建框架集和框架的基本方法法l浮动式框架的应用浮动式框架的应用l使用框架技术对网页进行布局使用框架技术对网页进行布局用HTML建立框架 认识框架和框架集认识框架和框架集案例案例 用HTML建立框架 认识框架和框架集认识框架和框架集 用HTML建立框架 框架集网页适用场合： 网页上经常出现一些重复部分，用框架可将整个窗口分成几个独立的小窗口，每一个窗口可分别载入不同的文件，每个窗口是可以相互沟通。最常见的是用来定义页面的导航区域、LoGo标志和内容区域，从

2、而使浏览者随时能找到自己感兴趣的内容不足：内容非常多的网页不宜采用框架式结构，所以大网站中几乎所有的网页都不是框架式网页。因为不同框架部分的表格比较难对齐。用HTML建立框架 框架使用场合框架使用场合页面的一个固定部分页面的一个固定部分显示徽标或静态信息显示徽标或静态信息在另一个在另一个固定部分固定部分显示导航显示导航部分详细部分详细内容内容在此处显示详细内容，在此处显示详细内容，页面中此部分页面中此部分是变化的是变化的。用HTML建立框架 框架集的相关概念框架集的相关概念q 框架 框架不是文件框架不是文件，是在框架集中定义的区域，它可以通过指定URL显示任何文档。q 框架集 框架集是个文档框

3、架集是个文档，它本身没有提供显示在浏览器中的HTML内容。它用来定义一系列框架的属性以及他们的大小、位置等布局方式，以及每个框架中最初始的页面的URL。框架集文件本身不包含要在浏览器中显示的Web页内容（对不能显示框架的浏览器进行的处理除外，即部分）。框架集文件只是向浏览器提供应如何显示一组框架以及在这些框架中应显示哪些文档的有关信息。用HTML建立框架 广告栏顶部框架广告栏顶部框架(top.html)导航栏左导航栏左侧框架侧框架(left.html)详细内容页面详细内容页面右侧框架右侧框架(main.html)框架的边框框架的边框框架集页面框架集页面(FrameSet.html)用HTML建

4、立框架 框架不是文件。很可框架不是文件。很可能会以为当前显示在框能会以为当前显示在框架中的文档是构成框架架中的文档是构成框架的一部分，但该文档实的一部分，但该文档实际上并不是框架的一部际上并不是框架的一部分。框架是存放文档的分。框架是存放文档的容器，任何一个框架都容器，任何一个框架都可以显示任意一个文档。可以显示任意一个文档。用HTML建立框架 框架的基本结构框架的基本结构l 框架页面的基本语法边框尺边框尺寸大小寸大小将窗口分割成左中右将窗口分割成左中右3个部分个部分,可选可选将窗口分割将窗口分割成上下成上下2个个部分部分,可选可选第一个窗口要第一个窗口要显示的网页显示的网页用HTML建立框架

5、 l如果一个站点在浏览器中显示为包含如果一个站点在浏览器中显示为包含3 3个框个框架的单个页面，则它实际上至少由架的单个页面，则它实际上至少由4 4个单独个单独的的WebWeb文档组成：文档组成：框架集文件以及框架集文件以及3 3个文档个文档，这，这3 3个文档包含这些框架内初始显示的内个文档包含这些框架内初始显示的内容。容。当在当在DreamweaverDreamweaver中设计使用框架集的中设计使用框架集的页面时，必须全部保存这页面时，必须全部保存这4 4个文件个文件，以便该，以便该页面可以在浏览器中正常工作。页面可以在浏览器中正常工作。 用HTML建立框架 l 框架集可以嵌套定义，以便

6、将浏览器窗口划分出更多的区域。l 框架技术主要通过两种类型的元素来实现，一个是框架集(由标签定义)，一个是框架(由标签定义)。前者定义如何划分框架，后者定义框架的具体属性。用HTML建立框架 框架集与框架的基本语法框架集与框架的基本语法 您的浏览器不支持框架！用HTML建立框架 框架集代码 您的浏览器不支持框架！用HTML建立框架 框架集总结：总结：框架集文件只是对窗口进行划分，并在各窗口载入相应的网页。（1）是对窗口进行划分，并预设了各窗口属性和特点（2） src值指定了事先做好的、要载入该窗口的文件（3）该部分用于不支持框架的浏览器所显示的内容 用HTML建立框架 l 框架集的主要应用类型

7、用HTML建立框架 框架集文件制作步骤框架集文件制作步骤q规划框架集（框架结构规划）；q准备每一个框架中调入（打开）的页面；q创建框架集网页，设置框架集及各框架属性、大小，加载的初始页面等属性；q选中框架集保存框架集文件 。用HTML建立框架 规划框架集规划框架集l 窗口的结构划分和大小设置窗口的结构划分和大小设置l 标签的rows属性实现横向划分分，cols属性实现纵向分用，每一块的大小由这两个属性的值来实现。 例: 例:l #的值为一对用引号括起来的字符串，字符串中的数值表示每个分窗口所占的尺寸，数值中间用逗号隔开，有几个数值就表示分出了几个窗口。其中数值可以是百分比值，也可是象素值，任何

8、一个数值也可由“*”来代替，表示由浏览器自动设置其大小（剩余的都分配给最后一个窗口或平均分配给剩余的窗口）。 用HTML建立框架 创建基本框架创建基本框架 . 用HTML建立框架 创建基本框架创建基本框架(续续) 用HTML建立框架 框架集属性设置q边框的设置 #=yes, no/0,1q边框的粗细设置 #为象素值q边框的颜色设置 #为颜色值用HTML建立框架 如何创建多个复杂的窗口如何创建多个复杂的窗口 要实现如下图所示的窗口，该如何制作？要实现如下图所示的窗口，该如何制作？1、分成上下两个窗口、分成上下两个窗口2、把下面的窗口分成、把下面的窗口分成 左右两个窗口左右两个窗口top窗口窗口l

9、eft窗口窗口right窗口窗口用HTML建立框架 创建多个复杂的窗口实现步骤如下：1、创建一个HTML页面“top.html”2、创建一个HTML页面“left.html”3、创建一个HTML页面“right.html”top.html效果图效果图left.html效果图效果图right.html效果效果用HTML建立框架 4、新建多框架HTML页面“Frame_Sets.html” 设置无框架边框禁止调整禁止调整框架大小框架大小框架名称，便于超文本链接锚标签target属性所引用用HTML建立框架 框架的嵌套框架的嵌套用HTML建立框架 框架属性设置各窗口链接页面的路径设置 各窗口的名称设

10、置 #为字符串 各窗口边框的设置 #=yes, no/0,1各窗口的上下左右边界宽度设置 各窗口的滚动条设置 #=yes, no, auto各窗口框边是否允许用户改变设置 用HTML建立框架 如何设置窗口链接的显示位置如何设置窗口链接的显示位置 如果在同一个页面中，要实现在一个框架窗口中的如果在同一个页面中，要实现在一个框架窗口中的超链接页面出现在另一个框架窗口中，如何实现？超链接页面出现在另一个框架窗口中，如何实现？演示示例：演示示例：不同框架之间超链接效果不同框架之间超链接效果使用使用target目标窗口属性目标窗口属性用HTML建立框架 技术要点：l 1.设置框架中各窗口的name属性l

11、 2.链接设置中设置Target属性，其值为指定了所链接的文件出现在哪一窗口（ _top / _parent /框架名称/_self /_blank）用HTML建立框架 如何设置窗口链接的显示位置如何设置窗口链接的显示位置l target目标窗口属性nname“显示的窗口名” target属性指定了所链接属性指定了所链接的文件出现在名称为的文件出现在名称为“窗口名窗口名”的框架窗口的框架窗口里。里。 target属性指定了所链接的属性指定了所链接的文件出现在名称为文件出现在名称为“rightframe”的框架窗口里的框架窗口里用HTML建立框架 如何设置窗口链接的显示位置如何设置窗口链接的显示

12、位置l target目标窗口属性n四个特殊的窗口 显示在新窗口 显示在本窗口 显示在父窗口 显示在整个浏览器窗口 新启一个窗口打开文新启一个窗口打开文件件 “right.html”用HTML建立框架 小结小结2 2top.htmlleft.htmlright1.html或或right2.htmlframe_sets.html编写如下图所示效果对应的html代码用HTML建立框架 浮动式框架浮动式框架 Iframel浮动式框架也称为嵌入式框架（标签为）也是框架的一种形式。它与普通框架的区别在于，它可以嵌入在网页中的任意部分，比如可以在表格中插入嵌入式框架。正是由于这一特点，使得嵌入式框架使用广泛

13、。用HTML建立框架 用HTML建立框架 q q 框架的另一种形式，它与不同的是，iframe可以嵌在网页中的任意部分。q语法： q URL可以是相对路径，也可以是绝对路径用HTML建立框架 标签的属性l src：文件的路径，既可是HTML文件，也可以是文本、ASP等； l width、height：浮动框架的宽与高； l scrolling:当SRC的指定的HTML文件在指定的区域不显不完时，滚动选项，如果设置为NO，则不出现滚动条；如为Auto：则自动出现滚动条；如为Yes，则显示; l marginwidth、 marginheight ：设置浮动边框与邻近元素的横向和纵向距离，为了让浮动边框与邻近元素很好的融合，常设置为0用HTML建立框架 l 的应用用HTML建立框架 本章小结本章小结l框架和框架集的概念l标签及其属性的应用l标签及其属性的应用l标签及其属性的应用l窗口链接的设置