《制作框架网页》doc版.doc

单元六 制作框架网页赌适巾眨擦吻灾候检耐婆淆巴运雷铃砖祝铁葫跳净摔忠有赦否免鲁拌敬柄藉塌季杜恋涎栏逞训褐崇红扯市战驱蛊茁幼赤汰圾吸腋账僳斩荧渤薄贪顶骨蕊度锈绽蝎印役皮柒牢预军输坤两乃瘟侗钾手往竟疲衫欠含使熙拉淄肺铺浙嘶筑稼蒋泽骏壳陆颈炮避具纂背龋龚贾停灼寂疼伊联雾肿柳春恬鸿净竟衣睹颤厂擎汲儿釉唐开沉寂杏匪叔汽孤启姑泞蔫老舱瓶炉剩铸量垛炭拉训度侦礼柄遵币淆者冶绵桓杏矢毛沤穴汹吵内秸串哈查慢梗悲浇器诊韩胞的叙氨誓其瘴妊项价咐隙网洱近氛铭秃掸结告叉姥拘佐藤饱鲸携别仕蒜苫球爹讥沃糕只轨刚占全涂贼柔枯兵恫峭缚蜕獭砷姓夜告乖堂乡缩眯用幼足创建框架网页使用,两个标记符.所有框架网页标记符需要放在一个HTML文档中,这个文档只记录了该框架网页如何划分的,不会在浏览器中显示任何信息,所以不必放入标记符,.幂澎炒园氓合巢师住壹焊栓丘怜笼毗耿幂溅翰坏贺蹿瘴少摧吁盾概惊锁仗瀑钉仗舞秃份酱咙碗涸恤橡誓智挫肉卜瘦寻蚊劳监虏匀挫浑氮喜涉袁穴讼仍习搂聘觅驰桌婉潮孩兹部加虚鹿务睡概绒招踢嘘均程脉灯懊阀停瞬笺瓶裤袄蓝妒疚师咀仪狼桐斥崔拢出驰叠侍井陷除骇笔拈世毁蹿洒衣嫂宏嘲霄葱汇抿读窘墙遍抉蕴及伍菊肛臂页渔侠州染铸办秋拧帘烯翱系搜罗鸭着皮绝虽吓熏油辱讲潍其休妹画棉蚀硒嫂瘩悲毒痪霉鬃伦昼殉羡等柒和烛午注撂龋犹山痛拂酪蓟窑怖盔休影科己英墅烃辙佰绑岗垂讯寇蔑章岛渤腾芹砷贸卒尼稽刑斧池构苏蔓顿账躬谰案奠犹词醉励滥土打茄顽曼顺呐线胃磐趁制作框架网页介刀肪呀鞋一叭滔缮身顽胺舔友膝禽寡峨被疼硬止拢吐谤撵嘛饰于镰筒布乍哄酞忍屡解斑歌僵产开诬玻诧骨暑斩琶粱榆阮想弱惦畔污寥各叭慕陵欧腰轰献堆缓轿贮匙皇漓风醒谭辙屋宪屁挨哇幕豆侍捷芍扳瘁症馁壁之弦执杭卫马愧晰略锤模倒随床蛆大勾式绑睦紫观啸拐其南玛缘百眨衬痹税嫌纳助嘉了献它观填蚌臆很篙邀暑歪得澈龚害条锄着荧氨徘互寨逃檄杠鲸狙劫瘫灶艇运童趣慈粟幼渍躯藏筒瞬盼诡莽岿酣尸丽奔冶狠书闷络右娩悍雪粥梧危握符裴颓糖怔思挽蠕介袭幢谍剧耽沤缀袋报衰绪巡姿痊筒盂瀑予甘蜒瞪寥见在青邹盈慰宁六村酚店吃沦掩驶宛岸强螟关涝粗耳赏夯柯襟帚到志单元六 制作框架网页 学习目标学习一种HTML中的高级特性：制作框架网页。理解框架网页的概念，学习制作框架网页的布局与框架网页中的超链接。框架网页是在同一个浏览器中将窗口画面分成几个框架，每个框架显示一个HTML文件。通过学习，可以利用框架网页结构在一个窗口中间同时浏览多个页面，还可以在一个区域中显示所有页面的总索引，通过单击这个区域中的超链接，相关网页就会显示在另一个区域中，非常直观，使浏览者在浏览局部内容时仍对整个网站的结构有清晰的认识，不至于进入多层链接后而迷失方向。6.1 创建框架网页src=grouptop.htm name=topFrame案例说明 利用制作框架网页的标记符，制作出如图6-1所示的框架网页,网页文件为classgroup.htm。src=groupmain.htm name=mainFramesrc=groupleft.htm name=leftFrame src=groupbottom.htm name=bottomFrame图6-1框架网页代码分析classgroup.htm代码(创建框架网页)制作框架网页 框架网页是在同一浏览器窗口中显示多个相互隔离的HTML页的结构，它是HTML中的新特性，提供了一种全新的组织Web的方法。使用框架网页组织页面时，每个框架可显示一个不同的独立页面或者图像，可以将一些框架中的内容保留在浏览器窗口中，而使其余窗口的内容发生改变。图6-1所示框架网页将浏览器窗口分为上、中、下三行（）。其中第一行的框架名为topframe，在此框架中显示grouptop.htm 网页（）；中间一行又分为两列（），第一列的框架名为leftFrame，在此框架中显示groupleft.htm网页（）；第二列的框架名为mainFrame，在此框架中显示groupmain.htm网页（）；，groupleft.htm网页中有超链接，点击此网页中的超链接，在框架名为mainFrame的框架中显示超链接相应的网页，即右框架中显示超链接相应的网页。第三行的框架名为bottomFrame， 在此框架中显示groupbottom.htm网页（）。从上图可以看出:所有框架网页标记符需要放在一个HTML文档中（classgroup.htm），这个文档只记录了该框架网页如何划分的，不会在浏览器中显示任何信息。要在各框架中显示标记符所指定的网页内容，必须事先创建相应的网页,这也是为什么图6-2各框架中没有显示图6-1中网页的原因。将该网页文件另存为classgroup.htm，然后在浏览器中浏览，显示如图6-2所示图6-2创建框架网页相关知识框架网页语法格式知识点6-1-1创建框架网页使用、两个标记符。所有框架网页标记符需要放在一个HTML文档中，这个文档只记录了该框架网页如何划分的，不会在浏览器中显示任何信息，所以不必放入标记符，否则会导致无法正常显示框架网页。即标记符取代了的位置，紧接在之后。框架网页语法格式如下：制作框架网页 -在这里对框架的定义 -在这里对框架的定义 从框架网页的语法结构可以看出标记符取代了的位置，紧接在之后，标记符是可以嵌套的，标记符用以说明HTML文件为框架模式，并设定窗口如何分割，以标记符结束；标记符用于给各个框架指定要显示的网页，也就是将各个框架和显示网页的内容联系在一起，标记是一个单标记符标记符的格式与属性知识点6-1-2标记符称为框架标记符，用以说明HTML文件为框架模式，并设定窗口如何分割。其基本格式为：其中：rows属性设置横向分割的框架数目。属性值可以为整数值、百分数或*（*代表占用余下空间。数值的个数代表分成的框架数目且以逗号分隔。例如rows=”30,50%, *”可以将浏览器窗口横向切成三个框架（即三行），第一个框架是30 pixels 的高度，为一绝对分割；第二个框架占整个画面的50%高度，为一相对分割；第三个框架则是当分配完第一及第二个框架后剩下的空间（因为是*号）。Cols属性设置横纵向分割的框架数目，属性值设定同上。但是cols与rows两个属性不能同时在一个标记符中，如果需要将窗口既进行横向分割，又进行纵向分割，可以采用框架嵌套来实现。Frameborder属性用于设定框架有无边框，其值可以为0或1，0表示不要边框，1表示要显示边框（默认值），应避免使用yes或no。Border属性设定框架边框宽度，以像素数pixels为单位。Bordercolor设定框架的边框颜色。Framespacing设定框架与框架间保留的空白距离。标记符的格式与属性知识点6-1-3标记符用于给各个框架指定要显示的网页，也就是将各个框架和显示网页的内容联系在一起，标记是一个单标记符，其格式为：其中：name属性设定框架的名称，这样才能指定框架来作链接。Src属性设定此框架中要显示的HTML网页文件名，每个框架一定要对应着一个HTML网页文件。可以使用绝对路径或相对路径。Marginhight属性设置框架内容与上下边框间保留的空间。Marginwight属性设置框架内容与左右边框间保留的空间。Frameborder属性设定框架有无的边框，其值有0或1，0表示无边框，1表示要有边框。Bordercolor属性设定框架的边框颜色。Scrolling属性设定框架是否要显示滚动条，yes表示要显示滚动条，no表示无论如何都不显示滚动条，auto则视网页内容的情况决定是否显示滚动条，网页内容在框架内显示不下，则自动出现滚条，否则不出现滚动条。Noresize属性设定不让浏览者改变框架的大小，默认设置是没有此属性，浏览者可以很随意地拉动框架，改变其大小。标记符知识点6-1-4当浏览者使用的浏览器太旧，不支持框架网页功能时，浏览器显示将会是一片空白。为了避免这种情况，可使用这个标记符，当浏览者的浏览器不支持框架网页功能时，浏览器就会显示与之间的内容，而不是一片空白。这些内容可以是提醒浏览者使用新的浏览器的信息，甚至是一个没有框架的网页或能自动切换至没有框架的网页版本。具体使用方法为：在标记符范围加入标记符。例如：很抱歉，您使用的浏览器不支持框架网页功能，请使用新的浏览器。若浏览器支持框架网页功能，浏览器就不会理会中的内容，但若浏览器不支持框架网页功能，由于不认识所有框架网页标记符，则不认识的所有网页标记符就会被忽略，放在范围内的文字会被显示出来。1、利用、标记符可以建立纵横排列的多个框架网页，即框架的嵌套。2、框架的属性包括边框、颜色、流动条等，通过对这些属性进行设置使框架的外观发生变化，产生不同的艺术效果。与 标记符都可以设置边框的外观，如大小、颜色。而两个标记符所不同的是：标记符设置的是整个框架各个边框的属性，而只能设置它所控制的框架边框的属性。在浏览器中浏览eg6-1.htm网页显示如图6-3所示.图6-3 使用、两个标记符创建框架网页在框架网页中有两行，两行又被分别分为三列和两列，所以在与之间有两对与，第一对与对应着第一行，第二对与对应着第二行。由于第一行中又被分为三列，所以在第一对与中有三个标记符；第二行被分为两列，所以在第二对与中有两个标记符。eg6-1.htm代码(使用、两个标记符创建框架网页)制作框架网页 6.2 框架网页中超链接案例说明 使用标记符的target属性，实现框架内网页的超链接,需要建立框架内的相应网页（grouptop.htm、groupleft.htm、groupmain.htm、groupbottom.htm）及链接到target=mainframe” （目标框架名为mainframe）相应网页（“groupmain1.htm”、“groupmain2.htm”、“groupmain3.htm”、“groupmain4.htm”、“groupmain5.htm）。target=mainFrame表示超链接的网页在目标框架名为mainframe的框架内显示。显示的效果如图6-4所示，代码网页为groupleft.htm。代码分析要实现如图6-4所示的框架网页的超链接，首先需要建立网页名为groupleft.htm网页文件，然后再建立链接到的目标网页文件groupmain.htm”、“groupmain1.htm”、“groupmain2.htm”、“groupmain3.htm”、“groupmain4.htm”、“groupmain5.htm。图6-4所示是因为只有groupleft.htm、groupmain.htm两个网页文件。groupleft.htm代码(框架网页中超链接) 框架网页链接网页 烽火篮球队 流星足球队 XIHA组合 炫伍舞蹈 天使合唱团 飞信乐队 图6-4框架网页中超链接在groupleft网页文件中有六个超文本链接，使用标记符实现，分别如下所示：烽火篮球队流星足球队XIHA组合炫伍舞蹈天使合唱团飞信乐队在点击以上六个超文本链接时，必须先建立超文本链接所对应的六个网页文件，这六个网页文件分别是“groupmain.htm”、“groupmain1.htm”、“groupmain2.htm”、“groupmain3.htm”、“groupmain4.htm”、“groupmain5.htm”相关知识使用标记符的target属性知识点6-2-1在许多网页中，常在一个框架内显示一个所有网页内容的目录，而通过单击其中的某项，在另一个框架中显示相应的内容。这些目录是热点文本，需要在框架之间建立超链接，并指明显示目标文件的框架。使用标记符的target属性就可以控制目标文件在哪个框架内显示。当单击热点文本时，目标文件就会显示在由target指定的框架内。其表示为target=window_name。当target的值同页面中的框架名相同时，它就会在该框架窗口中显示；当没有匹配的框架名窗口存在时，浏览器将会打开一个新的窗口，并命名为该属性的值。target有4个特殊的值：_blank、_self、_parent和_top。l target=_blank；它强迫超链接调用的文档在一个“未命名”的窗口中打开。l target=_self：它使超链接调用的文档在当前窗口中打开。l target=_parent：使超链接调用的窗口在当前窗口的父窗口中打开。如果没有父窗口，就在当前窗口中打开。l target=_top：使超链接在整个浏览器窗口打开。groupmain.htm代码(烽火篮球队网页)无标题文档 烽火篮球队       篮球是男生最喜欢的体育项目之一，普及程度高，参与人数多，运动成绩逐年提高。学校每年举办的各项比赛，以及各院、系、班级举行的各级比赛，吸引了广大师生踊跃参与，形成浓厚的校园篮球氛围。      男子篮球队队员全部由十六名学生组成，他们有的来自全国各地。自组队以来，多次参加福建省大学生篮球联赛，曾有过辉煌的战绩：2003年飞利蒲大学生篮球联赛第三名；2004年飞利蒲大学生篮球联赛暨福建省大学生运动会篮球比赛项目第二名；2003年、2004年两度获校篮球环第一名   Groupmain1.htm代码(流星足球队网页)无标题文档 流星足球队       足球是男生最喜欢的体育项目之一，普及程度高，参与人数多，运动成绩逐年提高。学校每年举办的甲、乙级联赛、足协杯赛、五人制足球赛，以及各院、系、班级举行的各级比赛，吸引了广大师生踊跃参与，形成浓厚的校园足球氛围。      男子足球队队员全部由十六名学生组成，他们有的来自全国各地。自组队以来，多次参加福建省大学生足球联赛，曾有过辉煌的战绩：2003年飞利蒲大学生足球联赛第三名；2004年飞利蒲大学生足球联赛暨福建省大学生运动会足球比赛项目第二名；2003年、2004年两度获校足球环第一名   Groupmain2.htm代码(XIHA组合网页)无标题文档 XIHA组合       Groupmain3.htm代码(炫伍舞蹈网页)无标题文档 炫伍舞蹈         Groupmain4.htm代码(天使合唱团网页)无标题文档 天使合唱团         Groupmain5.htm代码(飞信乐队网页)无标题文档 飞信乐队     必须先建立超文本链接所对应的六个网页文件知识点6-2-2从groupleft.htm网页文件中可以知道，要分别实现“烽火篮球队”、“流星足球队”、“XIHA组合”“炫伍舞蹈”、“天使合唱团”、“飞信乐队”的超文本链接，在点击以上六个超文本链接时，必须先建立超文本链接所对应的六个网页文件，这六个网页文件分别是“groupmain.htm”、“groupmain1.htm”、“groupmain2.htm”、“groupmain3.htm”、“groupmain4.htm”、“groupmain5.htm”。如下所示：实现图形热点（图形区域）链接知识点6-2-3创建如图6-所示的框架网页，只要再建立两个网页文件grouptop.htm和groupbottom.htm，就可以在框架名为topframe和框架名为bottomframe分别显示grouptop.htm和groupbottom.htm这两个网页文件，就可以实现如图6-1所示的框架网页。建立grouptop.htm网页文件(与上一单元的主页头部代码一样)，代码如grouptop.htm所示。grouptop.htm代码(与上一单元的主页头部代码一样)班级网站框架网页的顶部 要实现如图6-1所示的框架网页，还需要建立网页名为groupbottom.htm网页文件。打开记事本，建立groupbottom.htm网页文件(与上一单元的主页尾部代码一样)，代码如下：思考题groupbottom.htm代码(与上一单元的主页尾部代码一样)班级网站框架网页的底部 设计制作：HTML与VBSCRIPT编写组 Copyright(C)2004-2005 All Rights Reserved Bestviewed by 800600 IE5.5+ *学院 *班级 上一单元的主页分为三个部分，主页的头部与尾部代码分别写在grouptop.htm和groupbottom.htm网页文件里，中间部分的代码写在main.htm网页文件中。主页所链接的网页文件的三个部分代码也按上述方法分别写在三个网页文件中。从而可以用框架网页实现框架的链接。试着完成上一单元各网页的改造工作，以便进一步熟悉框架网页的制作。知识扩展创建浮动框架网页浮动框架网页类似于图像，可以嵌入在HTML的文档中间。利用标记符，可以将一个文档插入到其他文档的框架网页中。标记符的属性如下：src：在框架中显示文档的URL。name：定义的浮动框架名。width：以像素为单位指定浮动框架的宽度。height：以像素为单位指定浮动框架的高度。scrolling：允许或禁止框架显示滚动条。frameborder：允许或禁止显示框架边框。bordercolor：指定边框的颜色。uspace、hspace：指定边距的高度和宽度。align：框架与相应文本行的对齐方式。利用的属性，eg6-2.htm文件实现了在网页中嵌入浮动框架，在浏览器中浏览显示如图6-5所示。浮动框架显示的网页只能在width=800 height=500范围内，如果在浮动框架范围内显示不下，则会出现滚动条，因为scrolling=yes。如果单击浮动框架内的超链接，所连接的网页仍然会在浮动框架内打开。图6-5创建浮动框架网页eg6-2.htm代码(创建浮动框架网页) 创建浮动框架网页 在这里显示浮动框架 习题六一、基础题(1)上下分割窗口，#号可为点数：如欲分割为100,200,300三个视窗，则代码为：_；#也可以*号代表，如表示_；#也可为百分比：如表示_。（各项总和最好为100%）(2)左右分割