首页 > 软件开发 > HTML >

HTML网页制作:[12]使用框架结构之frameset

来源:互联网 2023-03-16 19:19:43 版权归原作者所有,如有侵权,请联系我们

框架--网页设计中常用的技术,用来让一个浏览器同时显示多个超文本。下面,小编将用文字、图像以及具体的代码,教大家如何制作一个使用了frameset的网页。ROq办公区 - 实用经验教程分享!

好吧,虽然frameset已经不太流行了,不过会了总是没有坏处的。小编会在该系列经验的后续介绍更多的流行的知识。ROq办公区 - 实用经验教程分享!

工具/原料

  • 一台电脑
  • TXT或者DW

步骤

  • 1

    首先,我希望在你的目录下,有4个网页,各自显示不同的内容。ROq办公区 - 实用经验教程分享!

    如图所示:ROq办公区 - 实用经验教程分享!

    1.html显示“火影忍者”ROq办公区 - 实用经验教程分享!

    2.html显示“英雄联盟”ROq办公区 - 实用经验教程分享!

    3.html显示“嵌入式开发、网页开发、安卓开发”ROq办公区 - 实用经验教程分享!

    4.html显示“alsp”ROq办公区 - 实用经验教程分享!

    HTML网页制作:[12]使用框架结构之framesetROq办公区 - 实用经验教程分享!

  • 2

    OK,来介绍下frameset的语法ROq办公区 - 实用经验教程分享!

    frameset rows="第一个框架窗口的高度,第二个框架窗口的高度......" ROq办公区 - 实用经验教程分享!

    cols="第一个框架窗口的宽度,第二个框架窗口的宽度"......>ROq办公区 - 实用经验教程分享!

    所谓框架集属性frameset,其目的就是用来将网页分成什么样子。如图所示,通过frameset将整个页面分成三个部分:1)上面是头部,用来放置logo等2)左侧是目录架构,用来放置目录3)右侧是要显示内容懂了吧,frameset的作用,就是用来将整个页面分成你想要的模块和架构;ROq办公区 - 实用经验教程分享!

    HTML网页制作:[12]使用框架结构之framesetROq办公区 - 实用经验教程分享!

  • 3

    这里,又要提到一个窗口属性,frameROq办公区 - 实用经验教程分享!

    用frameset>将整个页面分割成N个块,而每一个块,就是用frame来表示,其就是用来表示一个单独的页面。ROq办公区 - 实用经验教程分享!

    其语法:ROq办公区 - 实用经验教程分享!

    frame src="页面的源地址">ROq办公区 - 实用经验教程分享!

    下面看例子。ROq办公区 - 实用经验教程分享!

    ROq办公区 - 实用经验教程分享!

  • 3相关内容未经许可获取自百度经验
  • 4

    frameset rows="100,200,800" frameborder="yes" border="1" framespacing="1">frame src="2.html"/>frame src="3.html">frame src="4.html">/frame>ROq办公区 - 实用经验教程分享!

    HTML网页制作:[12]使用框架结构之framesetROq办公区 - 实用经验教程分享!

  • 5

    再来看一下效果图ROq办公区 - 实用经验教程分享!

    HTML网页制作:[12]使用框架结构之framesetROq办公区 - 实用经验教程分享!

  • 6

    可以看到,整个页面被分成了3分。ROq办公区 - 实用经验教程分享!

    而用frame指定的页面也显示了出来。ROq办公区 - 实用经验教程分享!

    其中,ROq办公区 - 实用经验教程分享!

    frameborder:用来表示显示边框ROq办公区 - 实用经验教程分享!

    framespacing:表示边框的宽度ROq办公区 - 实用经验教程分享!

    ROq办公区 - 实用经验教程分享!

  • 7

    下面再来看一个例子:ROq办公区 - 实用经验教程分享!

    frameset cols="100,200,900" frameborder="yes" border="1" framespacing="1">frame src="2.html"/>frame src="3.html">frame src="4.html">/frame>ROq办公区 - 实用经验教程分享!

    ROq办公区 - 实用经验教程分享!

    HTML网页制作:[12]使用框架结构之framesetROq办公区 - 实用经验教程分享!

  • 8

    看效果图,整个页面也被分成了3分,但是,是横向的。ROq办公区 - 实用经验教程分享!

    HTML网页制作:[12]使用框架结构之framesetROq办公区 - 实用经验教程分享!

  • 9

    再来看最后一个例子。ROq办公区 - 实用经验教程分享!

    frameset rows="30%,*" cols="*" frameborder="yes" border="1" framespacing="1">frame src="2.html"/>frameset cols="30%,70%" frameborder="yes" framespacing="1">frame src="3.html">frame src="4.html">/frame>ROq办公区 - 实用经验教程分享!

    HTML网页制作:[12]使用框架结构之framesetROq办公区 - 实用经验教程分享!

  • 10

    看效果图ROq办公区 - 实用经验教程分享!

    被分成了3分,但是和之前的都不一样。ROq办公区 - 实用经验教程分享!

    HTML网页制作:[12]使用框架结构之framesetROq办公区 - 实用经验教程分享!

  • 11

    这里,rows="30%,*"的意思是,将页面分成上部分30%,下部分用“*”表示为还没有分配。ROq办公区 - 实用经验教程分享!

    cols也是这个意思。ROq办公区 - 实用经验教程分享!

    然后,通过frame将2.html页面放在其中。ROq办公区 - 实用经验教程分享!

    之后,再用frameset将下部分分成左右两部分,放上3.html页面和4.html页面,就会出现上述的效果了ROq办公区 - 实用经验教程分享!

  • 12

    OK,到这里还没有结束。如何实现左侧添加目录,在右侧显示不同的网页内容呢?请关注小编之后的经验吧。ROq办公区 - 实用经验教程分享!

  • 插入表单|下一篇:

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!ROq办公区 - 实用经验教程分享!


    标签: HTML

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号