DW框架

框架框架与浮动窗口课程目标通过本章学习，可以掌握：HTML页面的框架框架标记各窗口尺寸设置各窗口间相互操作(FrameTarget)Frame的外观浮动窗口的使用什么是框架框架（frame）页面把浏览器窗口切割成几个独立的部分。框架页面的出现，使得访问者在浏览器窗口中可同时观察多个页面。框架也可以理解为是一种窗口，有些文章把它翻译为“窗口”框架，其中含2个网页框架标记设计框架页面时，Frame标记和Frameset标记用于定义框架网页的结构由于框架网页的出现，从根本上改变了HTML文档的传统结构,因此在出现Frameset标记的文档中，将不再使用Body标记FRAMESET是用来划分框窗，每一窗框由一个FRAME标记所标示，FRAME必须在FRAMESET范围中使用基本结构HtmlHead/HeadFramesetFramesrc=url/Frameset/Html框架尺寸设置可以将窗口分割为几块，横向分用ROWS属性，纵向分用COLS属性，每一块的大小可以由这两个属性的值来实现例如：framesetcols=#framesetcols=100，200，300framesetrows=#framesetrows=10%，20%，70%其中的任何一个数字也可以由“*”来代替如：framesetcols=100，200，*framesetcols=100，*，*将100像素以外的窗口平均分配framesetcols=*，*，*将窗口分为三等份s示例首先我们先创建3个html文件，其文件名分别为“a.html、b.html、c.html”a.htmlHtmlHeadTitleA/Title/HeadBodyh1align=centerA/h1/Body/Html横向排列多个窗口HtmlHeadTitle横向排列多个窗口/Title/HeadFramesetcols=25%，50%，25%Framesrc=a.htmlFramesrc=b.htmlFramesrc=c.html/Frameset/Html纵向排列多个窗口HtmlHeadTitle纵向排列多个窗口/Title/HeadFramesetrows=25%，25%，50%Framesrc=a.htmlFramesrc=b.htmlFramesrc=c.html/Frameset/Html混合排列多个窗口HtmlHeadTitle混合排列多个窗口/Title/HeadFramesetrows=30%，70%Framesrc=a.htmlFramesetcols=20%，80%Framesrc=b.htmlFramesrc=c.html/Frameset/Frameset/Html各窗口间相互操作由Frames分出来的几个窗口的内容并不是静止不变的，往往一个窗口的内容随着另一个窗口的要求而不断变化必须为每一个窗口起一个名字，这个名字用属性Name来定义通过name属性，可以在编程中调用并处理框架对象，比如在javascript中通过name属性，也可以在网页中引用这个框架，比如指定链接目标：target=框架名窗口标识(FrameName)格式：framesrc=urlname=“窗口名”例如：framesrc=frame/a.htmlname=“left”Target属性•定义了窗口名称，还应该有Target来配合使用，Target属性指定了所链接的文件出现在哪一窗口。•Target的值可以是name定义的名称，也可以是以下四类值:ahref=urltarget=_blank显示一个新窗口ahref=urltarget=_self显示在同一个窗口ahref=urltarget=_parent显示在Frameset的前一份文件的窗口ahref=urltarget=_top显示在整个浏览器窗口Frame的外观1．各窗口边框的设置2．边框色彩3．设置各窗口的上下左右边界宽度4．各窗口间空白区域的设置5．卷滚条设置6．不可变动的框边framenoresize来设置不可变动的框边各窗口边框的设置Frameborder属性用来设定各窗口边框的设置，yes表示有边框，no表示没有边框HtmlHeadTitle窗口边框的设置/Title/HeadFramesetrows=30%，70%frameborder=1Framesrc=a.htmlFramesetcols=20%，80%frameborder=0Framesrc=b.htmlFramesrc=c.html/Frameset/Frameset/Html边框色彩bordercolor=#属性用来设定边框色彩例Framesetrows=30%，70%bordercolor=redHtmlHeadTitle边框色彩/Title/HeadFramesetrows=30%，70%bordercolor=redFramesrc=a.htmlFramesetcols=20%，80%bordercolor=blackFramesrc=b.htmlFramesrc=c.html/Frameset/Frameset/Html设置各窗口的上下左右边界宽度framemarginwidth=#marginheight=#用来设定各窗口的上下左右边界宽度#的值为像素点HtmlHeadTitle设置各窗口的上下左右边界宽度/Title/HeadFramesetrows=30%，70%bordercolor=redFramesrc=a.htmlmarginwidth=50marginheight=50Framesetcols=20%，80%bordercolor=blackFramesrc=b.htmlmarginwidth=50marginheight=50Framesrc=c.htmlmarginwidth=50marginheight=50/Frameset/Frameset/Html各窗口间空白区域的设置framespacing=#属性用来设定各窗口间空白区域，其中#为空白区域的大小Framesetrows=30%，70%bordercolor=redframespacing=20Framesrc=a.htmlFramesetcols=20%，80%bordercolor=blackframespacing=40Framesrc=b.htmlFramesrc=c.html/Frameset/Frameset卷滚条设置framescrolling=#用来设定滚动条yes表示有，no表示没有auto表示由浏览器自动设置#缺省值是autoHtmlHeadTitle卷滚条设置/Title/HeadFramesetrows=30%,70%bordercolor=redframespacing=20Framesrc=a.htmlFramesetcols=20%,80%bordercolor=blackframespacing=40Framesrc=b.htmlscrolling=noFramesrc=c.html/Frameset/Frameset/Html浮动窗口Iframe标记，又叫浮动帧标记，可以用它将一个HTML文档嵌入在一个HTML中显示如同“画中画“电视Iframe标记的使用格式:Iframesrc=URLwidth=xheight=xscrolling=[OPTION]frameborder=x/iframe文件的路径，既可是HTML文件，也可以是文本、ASP等画中画区域的宽与高是否出现滚动条区域边框的宽度另外，在iframe中还可以添加name=#属性，属性后面的文字将出现在不支持FRAMES的浏览器中浮动窗口实例我们先创建一个文件名叫a.html文件，其代码如下：htmlheadTitle登鹳雀楼/Title/headbodybgcolor=Limeh3align=center登鹳雀楼/h3Palign=center白日依山尽，黄河入海流。br欲穷千里目，更上一层楼。/P/body/html主页面代码HtmlHeadTitle浮动窗口/Title/HeadIframesrc=a.html/iframe/Html设置浮动窗口区域的宽与高HtmlHeadTitle浮动窗口/Title/HeadIframesrc=a.htmlwidth=250height=200/iframe/Html效果如图所示设置浮动窗口区域边框HtmlHeadTitle浮动窗口/Title/HeadIframesrc=a.htmlwidth=250height=200frameborder=0/iframe/Html动手实践带有框架和浮动窗口的综合页面这样的页面是不是很漂亮？我们还可以为其添加一些浮动窗口，实现“画中画”的功能。