网页设计框架_第1页
网页设计框架_第2页
网页设计框架_第3页
网页设计框架_第4页
网页设计框架_第5页
已阅读5页，还剩18页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第7章框架重庆科技学院信息学院黄永文网页设计框架全文共23页，当前为第1页。框架是一种划分浏览器窗口的特殊方式，通过使用框架可以将多个网页组合成一个页面显示在浏览器中。浏览器的各个页面之间相互独立，却又相互关联。用户在浏览这种页面的时候，当对其中某一个部分进行操作，如浏览、下载的时候，其他页面保持不变，这样的页面就被称为框架结构的页面，也称为多窗口页面。网页设计框架全文共23页，当前为第2页。7.1创建框架实际上框架对象本身也一类窗口，它继承了窗口对象的所有特征，并拥有所有的属性和方法。使用框架最主要的目的就是创建链接的结构，最常见的框架结构就是网站的导航条作为一个单独的框架窗口。网页设计框架全文共23页，当前为第3页。7.1创建框架框架主要包含两个部分：框架集和具体的框架文件。框架集<FRAMESET>用来定义一个HTML文件为框架模式，并设定视窗如何分割。其实框架集就是存放框架结构的文件，也是访问框架文件的入口文件，其基本语法如下：<FRAMESET>

<FRAME

SRC="">

<FRAME

SRC="">

……</FRAMESET>网页设计框架全文共23页，当前为第4页。7.2分割窗口框架结构最大的特点就是将一个单独的窗口分割成多个窗口，窗口的分割方式需要在框架集页面中进行设置。框架集是框架结构的基础，只有通过框架集，各个框架窗口才能结合起来组成一个真正的网页文件。因此，对于框架集的属性设置，也是使用框架的最基础操作，而分割窗口则是基础中的基础。网页设计框架全文共23页，当前为第5页。7.2.1上下分割框架结构的页面包含多个框架窗口，设置框架窗口的排列方式是必不可少的工作。上下分割窗口就是在窗口的水平方向上划分出几条分割线，将页面分成由上到下几个窗口，需要使用ROWS属性，其语法是：<FRAMESETROWS="各个窗口的高度">

<FRAME

SRC="">

<FRAME

SRC="">

……</FRAMESET><FRAMESETROWS="30%,70%">

<FRAME

SRC="a.html">

<FRAME

SRC="b.html"></FRAMESET><FRAMESETROWS="100px,*">

<FRAME

SRC="a.html">

<FRAME

SRC="b.html"></FRAMESET><FRAMESETROWS="100px,*,500px">

<FRAME

SRC="a.html">

<FRAME

SRC="b.html">

<FRAME

SRC="c.html"></FRAMESET>网页设计框架全文共23页，当前为第6页。7.2.2左右分割左右分割窗口就是在浏览器中沿垂直方向分割为几个窗口，这些窗口左右分布，其设置属性是COLS，使用的语法是：<FRAMESETCOLS="各个窗口的宽度">

<FRAME

SRC="">

<FRAME

SRC="">

……</FRAMESET><FRAMESETCOLS="30%,70%">

<FRAME

SRC="a.html">

<FRAME

SRC="b.html"></FRAMESET><FRAMESETCOLS="300px,*">

<FRAME

SRC="a.html">

<FRAME

SRC="b.html"></FRAMESET><FRAMESETCOLS="300px,*,200px">

<FRAME

SRC="a.html">

<FRAME

SRC="b.html">

<FRAME

SRC="c.html"></FRAMESET>网页设计框架全文共23页，当前为第7页。7.2.3窗口的嵌套嵌套分割窗口就是在框架集中嵌套框架集，一个浏览器页面内，既有上下分割的窗口，又有左右分割的窗口：<FRAMESET>

<

FRAME

SRC=""/>

<

FRAMESET>

<

FRAME

SRC

=""/>

<

FRAME

SRC

=""/>

</

FRAMESET></

FRAMESET><FRAMESETROWS="30%,70%">

<

FRAME

SRC="a.html">

<

FRAMESET="30%,50%,*">

<

FRAME

SRC

="b.html">

<

FRAME

SRC

="c.html">

<

FRAME

SRC

="d.html">

</

FRAMESET></

FRAMESET>网页设计框架全文共23页，当前为第8页。7.3设置框架边框除了设置框架的分割方式外，还有一些属性需要在框架集页面中设置，包括框架的边框大小、颜色等。网页设计框架全文共23页，当前为第9页。7.3.1设置框架边框显示或隐藏默认情况下，框架的边框是显示出来的。有时候，用户希望隐藏框架结构中的框架分割线，这时候可以通过设置FRAMEBORDER实现。设置框架边框的语法是：<FRAMESETFRAMEBORDER="框架显示属性值">

<FRAME

SRC="">

<FRAME

SRC="">

……</FRAMESET>frameborder的取值只能为0或1，1为默认值，表示显示；如果为0，则边框线会隐藏起来。在<frameset>中设置将对整个框架有效，在<frame>中设置则只对当前这个框架有效。网页设计框架全文共23页，当前为第10页。7.3.2设置框架边框宽度不同浏览器中对框架边框的宽度显示都不一致，也没有规定用于设置框架边框宽度的属性，但是很多浏览器都支持在<FRAMESET>标签里使用BORDER属性来设置边框宽度。<FRAMESETBORDER="框架边框宽度">

<FRAMESRC="">

<FRAMESRC="">

……</FRAMESET>网页设计框架全文共23页，当前为第11页。7.3.3设置框架边框颜色默认情况下，框架的边框是灰色的，可以使用BORDERCOLOR属性将其设置为其他颜色，但BORDERCOLOR属性要在BORDER属性存在的时候才可以产生效果：<FRAMESETBORDER="10px"BORDERCOLOR="颜色值">

<FRAME

SRC="">

<FRAME

SRC="">

……</FRAMESET>网页设计框架全文共23页，当前为第12页。7.4框架属性在框架结构中，除了可以设置框架集的各种属性外，对于每一个框架窗口，也可以通过设置不同的属性来呈现不同的框架效果。网页设计框架全文共23页，当前为第13页。7.4.1设置框架滚动条显示默认情况下，当框架窗口的内容不足以在分割的区域内显示时，会出现滚动条，以方便用户的查看。滚动条会自动在各个无法完全显示的框架窗口内出现，使用SCROLLING属性可以分别对各个框架窗口的滚动条进行设置，其语法是：<FRAMESET>

<FRAMESRC=""SCROLLING="属性值">

……</FRAMESET>网页设计框架全文共23页，当前为第14页。7.4.2固定框架在默认情况下，框架窗口的大小是可以由用户自己来调整的，不过有些时候网页开发者会不希望用户可以自己调整框架窗口大小而影响了网页效果。在HTML4.01里允许通过FRAME元素的NORESIZE属性来禁止浏览用户调整框架窗口大小。<FRAMESET>

<FRAMESRC=""NORESIZE>

……</FRAMESET>网页设计框架全文共23页，当前为第15页。7.4.3不支持框架标记框架结构虽然对于页面导航很有效，但是有些浏览器并不支持框架页面。因此对于框架结构的网页，有时候无法正常显示，这就影响了用户的阅读。使用<NOFRAMES>标记可以使这些浏览器能够读取标记内的内容，对于支持框架结构的浏览器来说，则会自动忽略其中的内容。<FRAMESET>

<FRAMESRC="页面源文件地址"NORESIZE>

……

<NOFRAMES>

……

</NOFRAMES></FRAMESET>网页设计框架全文共23页，当前为第16页。7.5在框架中使用链接框架的链接和普通链接一样，都需要使用<A>标记。特别的是，当框架结构中的一个框架作为变换页面时，需要为该框架窗口命名，然后根据名称对框架进行变换。这就需要使用NAME标记和TARGET标记，其中NAME标记用来为窗口命名，而TARGET标记则用来引导链接页面在框架内打开。<FRAMESETROWS="100px,*">

<FRAME

NAME="navi"SRC="navi.html"><FRAME

NAME="content"SRC="content.html"></FRAMESET>网页设计框架全文共23页，当前为第17页。7.6浮动框架在框架结构中，除了固定的分割方式之外，还有一种框架窗口可以作为一个页面元素添加到普通页面中，这样框架窗口可以位于页面的各个位置，这种框架结构被称为浮动框架。浮动框架带有许多属性，通过这些属性可以调整框架页面的样式、以及它在页面中的布局。网页设计框架全文共23页，当前为第18页。7.6.1插入浮动框架在HTML里，可以使用<IFRAME>标签来创建浮动框架。<IFRAME>标签与<IMG>标签一样，可以放在<BODY>标签之内的任何一个位置。<IFRAME>标签里的SRC属性可以用来指定浮动框架载入的文档URL。插入浮动框架语法如下所示：<IFRAMESRC="页面源文件地址"></IFRAME>网页设计框架全文共23页，当前为第19页。7.6.2浮动框架大小在普通框架结构中，由于框架就是整个浏览器窗口，因此不需要设置其大小。但是浮动框架中是插入到普通HTML页面中的一个元素，可以使用WIDTH和HEIGHT属性调整其大小，其语法是：<IFRAMESRC="页面源文件地址"WIDTH="窗口宽度值"HEIGHT="窗口高度值"></IFRAME>网页设计框架全文共23页，当前为第20页。7.6.3浮动框架对齐方式由上例的图中可以看出，默认情况下浮动框架是左对齐的。如果不想让浮动框架左对齐，可以使用ALIGN属性对框架的对齐方式进行更改，其语法如下所示：<IFRAMESRC=""ALIGN="left/center/right"></IFRAME>网页设计框架全文共23页，当前为第21页。7.6.4浮动框架页面的链接除了普通的框架结构外，浮动框架也可以制作页面之间的链接。在一个浮动窗

人人文库> 全部分类> 行业资料 > 信息产业

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论