来看看:“画中画”效果――谈Iframe标志的利用
更好的控制页面布局。不用多说。纵不雅时下网站,原本网速就有些慢,但是几近每页都要放甚么Banner,栏目图片,版权等一年夜堆相同的器材,固然,出于网站作风一致、告白效应的必要,本无可厚非,可究竟让用户的钱包为这些“粉饰“的器材”日趋消得钱干瘪”了,有无举措,让这些相同的器材一次下载后就不必再下载,而只下载那些内容有变更地区的网页内容呢?
谜底很一定:使用Iframe标志!
1、Iframe标志的利用
提起Iframe,大概你早已将之扔到“被忘记的角落”了,不外,提及其兄弟Frame就不会生疏了。Frame标志即帧标志,我们所说的多帧布局就是在一个扫瞄器窗口中显现多个HTML文件。如今,我们碰到一种很实际的情形:若有一个教程,是一节一节地上,每页开端做一个“上一节“、“下一节“的链接,除每节教程内容分歧以外,页面别的部份内容都是不异的,假如一页一页地做笨页面,这仿佛太让人腻烦了,这时候突发奇想,假如有一种办法让页面别的中央稳定,只将教程做成一页一页的内容页,不含别的内容,在点击高低翻页链接时,只改动教程内容部分,别的坚持稳定,如许,一是省时,另则今后如教程有个安然无恙的变化,也很便利,不致于牵一发而动三军了;更主要的是将那些告白Banner、栏目列表、导航等几近每页的都有的器材只下载一次后就不再下载了。
Iframe标志,又叫浮动帧标志,你能够用它将一个HTML文档嵌进在一个HTML中显现。它分歧于Frame标志最年夜的特性即这个标志所援用的HTML文件不是与别的的HTML文件互相自力显现,而是能够间接嵌进在一个HTML文件中,与这个HTML文件内容互相交融,成为一个全体,别的,还能够屡次在一个页面内显现统一内容,而不用反复写内容,一个抽象的比方即“画中画“电视。
如今我们谈一下Iframe标志的利用。
Iframe标志的利用格局是:
<Iframesrc="URL"width="x"height="x"scrolling=""frameborder="x"></iframe>
src:文件的路径,既但是HTML文件,也能够是文本、ASP等;
width、height:"画中画"地区的宽与高;
scrolling:当SRC的指定的HTML文件在指定的地区不显不完时,转动选项,假如设置为NO,则不呈现转动条;如为Auto:则主动呈现转动条;如为Yes,则显现;
FrameBorder:地区边框的宽度,为了让“画中画“与临近的内容相交融,常设置为0。
好比:
<Iframesrc="http://netschool.cpcw.com/homepage"width="250"height="200"scrolling="no"frameborder="0"></iframe>
2、父窗体与浮动帧之间的互相把持
在剧本言语与工具条理中,包括Iframe的窗口我们称之为父窗体,而浮动帧则称为子窗体,弄清这二者的干系很主要,由于要在父窗体中会见子窗体或相反都必需分明工具条理,才干经由过程程序来会见并把持窗体。
1、在父窗体中会见并把持子窗体中的工具
在父窗体中,Iframe即子窗体是document工具的一个子工具,能够间接在剧本中会见子窗体中的工具。
如今就有一个成绩,即,我们如何来把持这个Iframe,这里必要讲一下Iframe工具。当我们给这个标志设置了ID属性后,便可经由过程文档工具模子DOM对Iframe所含的HTML举行一系列把持。
好比在example.htm里嵌进test.htm文件,并把持test.htm里一些标志工具:
<Iframesrc="test.htm"id="test"width="250"height="200"scrolling="no"frameborder="0"></iframe>
test.htm文件代码为:
<html>
<body>
<h1id="myH1">hello,myboy</h1>
</body>
</html>
如我们要改动ID号为myH1的H1标志里的笔墨为hello,mydear,则可用:
document.myH1.innerText="hello,mydear"(个中,document可省)
在example.htm文件中,Iframe标志工具所指的子窗体与一样平常的DHTML工具模子分歧,对工具会见把持体例一样,就不再赘述。
2、在子窗体中会见并把持父窗体中工具
在子窗体中我们能够经由过程其parent即父(双亲)工具来会见父窗口中的工具。
如example.htm:
<html>
<bodyonclick="alert(tt.myH1.innerHTML)">
<Iframename="tt"src="frame1.htm"width="250"height="200"scrolling="no"frameborder="0"></iframe>
<h1id="myH2">hello,mywife</h1>
</body>
</html>
假如要在frame1.htm中会见ID号为myH2中的题目笔墨并将之改成"hello,myfriend",我们就能够如许写:
parent.myH2.innerText="hello,myfriend"
这里parent工具就代表以后窗体(example.htm地点窗体),要在子窗体中会见父窗体中的工具,无一破例都经由过程parent工具来举行。
Iframe固然内嵌在另外一个HTML文件中,但它坚持绝对的自力,是一个“自力王国“哟,在单一HTML中的特征一样合用于浮动帧中。
试想一下,经由过程Iframe标志,我们可将那些稳定的内容以Iframe来暗示,如许,不用反复写不异的内容,这有点象程序计划中的历程或函数,减省了几烦琐的手工休息!别的,相当主要的是,它使页面的修正更加可行,由于,不用由于版式的调剂而修正每一个页面,你只需修正一个父窗体的版式便可了。
有一点要注重,Nestscape扫瞄器不撑持Iframe标志,但在时下IE的世界,这仿佛也无年夜碍,普遍接纳Iframe标志,既为本人(网站)着了想,又为网友节俭了网费,何乐而不为?</p>
可以将站点上所有的网页风格都使用一个CSS文件进行控制,只要修改这个CSS文件中相应的行,那么整个站点的所有页面都会随之发生变动。
来看看:“画中画”效果――谈Iframe标志的利用
技术的学习如同长跑。只要越过极限,就会越跑越轻松。技术的学习其实并不像想象中那么可怕,任何技术都并不高深莫测。 dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS,三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。 只要我们努力,无论是怎样的艰难险阻,成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。 运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环 Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器,在编辑时能同时看到源码和设计界面,非常方便新手学习制作网页。 Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。 技术的学习如同长跑。只要越过极限,就会越跑越轻松。技术的学习其实并不像想象中那么可怕,任何技术都并不高深莫测。 使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。 所见则所得网页编辑器的优点就是直观性,使用方便,容易上手.
页:
[1]