frame如何使用—网页设计框架

在我们浏览中的很多网站中都会出现导航栏,当我们点击导航栏的各项时,我们发现刷新的不是整个网页或者跳转,而是局部刷新部分页面,导航不变。例如下图,点击红色区域导航,只有蓝色区域发生改变,其他没有变化。

操作方法

  • 01

    创建一个文件夹,并创建先随便创建几个txt文件(用txt文件编写html是一种良好的习惯对于初学者而言)。

  • 02

    在每个txt文件下,加入标准规范代码。可以参考下图实例。

  • 03

    可以按行分割页面,也可以按列进行分割。很多网站都不是单一一种分割而是嵌套使用。 例如如下代码的图示如下: <frameset rows="10%,*" frameborder="0" framespacing="10"><frame src="导航1(logo)" noresize="noresize" scrolling="yes"/><frameset cols="20%,*"><frame src="导航2" noresize="noresize"/><frame src="调用内容(局部刷新页面)" name="right1"/></frameset> </frameset>

  • 04

    在对页面进行分割时可以采用像素,也可以采用百分百,每个分割区域就得使用","隔开, 如 <frameset rows="75xp,*">,<frameset rows="50%,*">这两种方式都是将网页分割成两行。具体代码如下: <frameset  rows="75xp,*" > <frame scrolling="no" noresize="noresize" frameborder="0"  height="75"  src="导航页.html" name="daohangye"> <frame frameborder="0" class="a" src="导航页.html" name="contain"> </frameset>

  • 05

    通过上面代码你也应该注意到没有body元素, frame不能脱离frameSet单独使用,frame不能放在body中,而是用于对整个页面布局的效果。在属性讲解,scrolling(是否滚动窗体),noresize(分割框架大小是否可变)name(作为调用的重要依据,target=“name”),本例我导航页网站和主站实现局部刷新的功能。代码如下: 导航页: <li><a href="子网页1.html" target="contain">子网页1</a></li> <li><a href="子网页2.html" target="contain">子网页2</a></li> 主网页: <frame frameborder="0" class="a" src="导航页.html" name="contain"> 主页中name的值和target的值对应时,链接网站就显示在对应框体内,从而实现了局部刷新,就是导航。

  • 06

    然后将创建的所以txt另存为后缀为.html的文件,并运行双击主网页,对应导航。看到变化。然后点击导航相应的导航栏目,会发现下面刷新网页。

(0)

相关推荐

  • 网页设计\网页制作常用软件分享

    一.专业的网页设计.网页制作软件: 1.CorelDraw:通过CorelDRAW9的全方面的设计及网页功能融合到现有的设计方案中,制作矢量的插图.设计及图像,出色地设计公司标志.简报.彩页.手册.产 ...

  • 网页设计软件有哪些?

    操作方法 01 网页设计软件包括: Photoshop:学习图像处理.编辑.通道.图层.路径综合运用;图像色彩的校正:各种特效滤镜的使用;特效字的制作;图像输出与优化等,灵活运用图层风格,流体变形及褪 ...

  • 10个人人必知的网页设计术语

    今天的环境相比过去已经是一百倍的复杂,因为我们在网络上使用工具和框架,语言和库的开发使得一切进步飞快。 设计师 —— 即使是专业的网页设计师,也必须努力保持对所有不同的专业术语和技术的理解,所以在这里 ...

  • 十款新兴实用的网页设计与开发工具

    对于设计师和开发者而言,好工具和好想法同样重要.我们常说"工欲善其事,必先利其器",所以在项目开始之初,有必要弄清楚有哪些事情任务需要完成,而哪些成熟的工具可以有针对性地搞定这些问 ...

  • 【品牌维生素】浅谈当下网页设计趋势

    技术的革新带动了设计行业的的迅猛发展,这使得设计师和开发者有了更广阔的的探索天地.而网页设计也越发不再那么循规蹈矩,许多团队和公司都做了很多思考和创意.所以在我们适应着现代设计潮流的同时,不妨也来看看 ...

  • 20个最火爆的Behance网页设计及UI案例解析

    现在,如果你想获得专业同行的认可,单凭几个浏览器截图和一段介绍语是远远不够了.在过去几年,我们见证了很多非常优秀的案例研究,甚至可以说这些案例研究自身就可堪称艺术作品.下面列出了20个最火爆的Beha ...

  • 写给初学者的6条网页设计安全配色指南

    网页设计中最基本的原则之一是,不管你花多长时间创造一个华丽的设计,其最终的角色都是这场秀中真正的明星--内容的衬托 我仍然清楚地记得我最早的一次美术课,那时我还是一个小小的.对凡事都充满渴望的孩子,我 ...

  • 2015年网页设计趋势(下)

    小编:上次给大家分享了2015年网页设计趋势(上),今天应酷设计又带来了下篇.看一下今天的文章都带来了哪些技巧呢!其实方法都大同小异,主要是多运用.结合一下文章的图文解释理解一下吧!(温馨提示:可以点 ...

  • 网页设计中的极简风格—无的力量

    小编:首先感谢@飞屋睿UIdesign为我们分享讲解什么是极简设计以及如何做到极简并配上很优秀的图来帮助我们讲解.不久前刚看到一句话来和大家分享下,感觉可以用来提升逼格.这句话是这样写的"U ...