当前位置: 首页 > 平面设计 > 平面设计实战技能 > 平面设计图像处理 > frame如何使用—网页设计框架

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

发布时间:2020年06月19日 01:58:06 来源: 点击量:765

【摘要】在我们浏览中的很多网站中都会出现导航栏,当我们点击导航栏的各项时,我们发现刷新的不是整个网页或者跳转,而是局部刷新部分页面,导航不

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

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

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

可以按行分割页面,也可以按列进行分割。很多网站都不是单一一种分割而是嵌套使用。例如如下代码的图示如下:

<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>

在对页面进行分割时可以采用像素,也可以采用百分百,每个分割区域就得使用","隔开,如<framesetrows="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>

通过上面代码你也应该注意到没有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的值对应时,链接网站就显示在对应框体内,从而实现了局部刷新,就是导航。

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

分享到: 编辑:cocomi

就业培训申请领取
您的姓名
您的电话
意向课程
点击领取

环球青藤

官方QQ

扫描上方二维码或点击一键加群,免费领取大礼包,加群暗号:青藤。 一键加群

绑定手机号

应《中华人民共和国网络安全法》加强实名认证机制要求,同时为更加全面的体验产品服务,烦请您绑定手机号.

预约成功

本直播为付费学员的直播课节

请您购买课程后再预约

环球青藤移动课堂APP 直播、听课。职达未来!

安卓版

下载

iPhone版

下载
环球青藤官方微信服务平台

刷题看课 APP下载

免费直播 一键购课

代报名等人工服务

课程咨询 学员服务 公众号

扫描关注微信公众号

APP

扫描下载APP

返回顶部