第七讲用HTML建立框架.ppt

本章主要目标 认识框架和框架集 案例 认识框架和框架集 框架集网页 框架使用场合 框架集的相关概念 框架 框架不是文件，是在框架集中定义的区域，它可以通过指定URL显示任何文档。 框架集 框架集是个文档，它本身没有提供显示在浏览器中的HTML内容。它用来定义一系列框架的属性以及他们的大小、位置等布局方式，以及每个框架中最初始的页面的URL。框架集文件本身不包含要在浏览器中显示的Web页内容（对不能显示框架的浏览器进行的处理除外，即noframes部分）。框架集文件只是向浏览器提供应如何显示一组框架以及在这些框架中应显示哪些文档的有关信息。 框架的基本结构 如果一个站点在浏览器中显示为包含3个框架的单个页面，则它实际上至少由4个单独的Web文档组成：框架集文件以及3个文档，这3个文档包含这些框架内初始显示的内容。当在Dreamweaver中设计使用框架集的页面时，必须全部保存这4个文件，以便该页面可以在浏览器中正常工作。 框架集可以嵌套定义，以便将浏览器窗口划分出更多的区域。 框架技术主要通过两种类型的元素来实现，一个是框架集(由frameset标签定义)，一个是框架(由frame标签定义)。前者定义如何划分框架，后者定义框架的具体属性。 框架集与框架的基本语法 frameset cols=“50%,50% frame src=frame_a.htm / frame src=frame_b.htm / /frameset noframes body 您的浏览器不支持框架！ /body /noframes 框架集代码 框架集 框架集的主要应用类型 框架集文件制作步骤 规划框架集（框架结构规划）； 准备每一个框架中调入（打开）的页面； 创建框架集网页，设置框架集及各框架属性、大小，加载的初始页面等属性； 选中框架集保存框架集文件 。 规划框架集 窗口的结构划分和大小设置 frameset标签的rows属性实现横向划分分，cols属性实现纵向分用，每一块的大小由这两个属性的值来实现。 frameset cols=“# ” 　例:frameset cols=“100,200,*”  frameset rows=“# ” 例:frameset rows=10%,*,* #的值为一对用引号括起来的字符串，字符串中的数值表示每个分窗口所占的尺寸，数值中间用逗号隔开，有几个数值就表示分出了几个窗口。其中数值可以是百分比值，也可是象素值，任何一个数值也可由“*”来代替，表示由浏览器自动设置其大小（剩余的都分配给最后一个窗口或平均分配给剩余的窗口）。 框架集属性设置 如何创建多个复杂的窗口 创建多个复杂的窗口实现步骤如下： 1、创建一个HTML页面“top.html” 2、创建一个HTML页面“left.html” 3、创建一个HTML页面“right.html” 4、新建多框架HTML页面“Frame_Sets.html” 框架属性设置 如何设置窗口链接的显示位置 技术要点： 1.设置框架中各窗口的name属性 2.链接设置中设置Target属性，其值为指定了所链接的文件出现在哪一窗口（ _top / _parent /框架名称/_self /_blank） 如何设置窗口链接的显示位置 target目标窗口属性 name＝“显示的窗口名” frame src=url name=“窗口名”　　 a href=url target=“窗口名” 如何设置窗口链接的显示位置 target目标窗口属性 四个特殊的窗口 a href=url target=“_blank” 显示在新窗口a href=url target=“_self” 显示在本窗口a href=url target=“_parent” 显示在父窗口a href=url target=“_top” 显示在整个浏览器窗口 小结2 编写如下图所示效果对应的html代码 浮动式框架 Iframe 浮动式框架也称为嵌入式框架（标签为iframe）也是框架的一种形式。它与普通框架的区别在于，它可以嵌入在网页中的任意部分，比如可以在表格中插入嵌入式框架。正是由于这一特点，使得嵌入式框架使用广泛。 iframe /iframe 框架的另一种形式，它与frame不同的是，iframe可以嵌在网页中的任意部分。 语法： iframe width=420 height=330 frameborder=0 scrolling=auto src=URL name=iframe1 /iframe URL可以是相对路径，也可以是