网页设计与制作第8章

26第8章框架一、知识要点注：框架是在同一浏览器窗口中显示多个相互隔离的HTML页的结构，每个区域显示一个HTML文件。所有框架标记需要放在一个总起的HTML文件中，这个文件只记录了该框架如何划分，不会显示任何资料，所以只是将frameset标记取代body标记，用来声明框架的定义。1、设置框架framesetrows=像素数/百分比/*，像素数/百分比/*，……或cols=像素数/百分比/*，像素数/百分比/*，……frameborder=yes/nobordercolor=边框颜色framesrc=URLname=框架名frameborder=yes/nonoresizescrolling=yes/no/auto……/framesetnoframes……/noframesframeset属性：rows或cols任选其一，应避免同时出现；rows：设定横向分割的框架的数目及框架的大小，用像素数表示框架的绝对大小，用百分比表示框架相对于浏览器窗口的大小，用*表示自动匹配；cols：设定纵向分割的框架数目及框架的大小，表示方式与rows类似；frameborder：设定有无边框；frame属性：src：表示该框架对应的源文件；name：指定框架名，框架名由字母开头，用下划线开头的名字无效；frameborder：设定有无边框；scrolling：设置是（yes）/否（no）/自动（auto）加入滚动条；noresize：不允许各窗口改变大小，缺省及默认设置是允许各窗口改变大小的。在noframes标记后的文字将只出现在不支持FRAMES的浏览器中。2、设置嵌套框架3、在框架中或嵌套框架中建立超链接ahref=URLtarget=打开窗口的方式或框架名称热点/a4、设置浮动框架iframesrc=初始页面的URLname=框架名width=宽度值height=高度值frameborder=yes/noscrolling=yes/no/auto此处文字将只出现在不支持FRAMES的浏览器中/iframe网页的设计者可以在网页的任何地方插入浮动框架，不必像普通框架需要Frameset标签为每个框架划分空间，每个浮动框架可以独立的定义其大小。二、例题分析例8．1：27HTMLHEADTITLE框架构建页面/TITLE/HEADFRAMESETframeborder=noframeSpacing=0rows=80,*,30FRAMEsrc=l8-1files/top.htmname=topFramenoResizescrolling=noFRAMEsrc=l8-1files/content.htmname=contentFRAMEsrc=l8-1files/bottom.htmname=bottomFramenoResizescrolling=no/FRAMESET/HTML例8．2：分别建立top.htm、left.htm、感想.htm、不敢怕了.htm……等网页；然后建立框架网页，把前面建立的网页在不同窗口中显示，如图1所示；单击左下框架的其它项，右下框架的内容改变，如图2所示。图1图2例8-2的源文件：htmlheadtitle例8-2/title/headframesetrows=80,*frameborder=0border=0framespacing=0framename=topFramescrolling=NOnoresizesrc=l8-2files/top.htmtarget=contentsframesetcols=210,*frameborder=1border=0framespacing=0framename=leftFramescrolling=NOnoresizesrc=l8-2files/left.htmtarget=mainframename=mainsrc=l8-2files/感想.htm/frameset/frameset/htmltop.htm源文件htmlbodyh1align=center校园逸趣/h1/body/htmlleft.htm源文件：htmlbodylink=#FF00FFvlink=#17CB03alink=#0000FFpahref=感想.htm感想/a/ppahref=不敢怕了.htm不敢怕了/a/ppahref=我病死了.htm我病死了/a/ppahref=分工.htm分工/a/ppahref=伤势.htm伤势/a/p/body/html例8．3：分别建立A.htm、B.htm、C.htm网页；然后建立一个普通网页，在此网页中加入浮动框架，初始页面为A.htm，如图1所示；单击浮动框架下的超链接文字，浮动框架的内容改变，如图2所示。图1图228HTMLHEADTITLEIFrame范例/TITLE/HEADBODYCENTERIFRAMEname=windowsrc=l8-3files/A.HTMHereisaFloatingFrame/IFRAMEBRAhref=l8-3files/A.htmtarget=windowLoadA/ABRAhref=l8-3files/B.htmtarget=windowLoadB/ABRAhref=l8-3files/C.htmtarget=windowLoadC/ABR/CENTER/BODY/HTML三、实作训练8．1：分别建立a.htm、b.htm、c.htm、d.htm四个网页，分别如图如示；然后建立框架网页，把a.htm、b.htm、c.htm、d.htm显示在四个不同的窗口中，如后图所示。将框架网页HTML代码补充完整。8．1的框架集文件：htmlheadtitle框架嵌套/title/headframeset=80%,*frameset=20%,80%framename=leftscrolling=nonoresizetarget=rtopsrc=a.htmframesetrows=50%,50%framename=rtoptarget=rbottomsrc=b.htmscrolling=autoframename=rbottomsrc=c.htmscrolling=auto/framesetnoframes此网页使用了框架，但您的浏览器不支持框架。/noframes/html298．2：制作如下图所示的网页，先通过表格对网页整体进行排版，再在单元格中插入浮动框架，把正确的HTML代码写在下面。