用IFRAME实现网页的内嵌和预载
上一篇 / 下一篇 2007-08-16 14:41:18 / 个人分类:HTML
iframe元素的功能是在一个文档里内嵌一个文档,创建一个浮动的帧。其部分属性简介如下:51Testing软件测试网Wp?k+BBq!@
H N MGHJ?{!l$B0 name:内嵌帧名称
X!K7n;u5gs$Z,no$S051Testing软件测试网B'~Aq5{$LD^bwidth:内嵌帧宽度(可用像素值或百分比)
y q,UIBP[051Testing软件测试网Sx[M-Jnheight:内嵌帧高度(可用像素值或百分比)51Testing软件测试网2[5dZd;}dEg5{
-u/I$U'x:~H PE0 frameborder:内嵌帧边框
g-R5_ey0`%R.lLoV0 marginwidth:帧内文本的左右页边距
cV f1Yc0C a;TIv^d051Testing软件测试网V gS9^.Q9x'bZmarginheight:帧内文本的上下页边距
,\ i%XSH1X-N\B7D051Testing软件测试网2T+`*n]/C{5~7Pscrolling:是否出现滚动条(“auto”为自动,“yes”为显示,“no”为不显示)
^ VuE#wH%U6eOu,h0Vm YMD0 src:内嵌入文件的地址51Testing软件测试网&WYr s]\2HY
51Testing软件测试网1J+K y/zw h^style:内嵌文档的样式(如设置文档背景等)51Testing软件测试网4\$e0b.x9cJ
&x|S D+@0 allowtransparency:是否允许透明51Testing软件测试网8P/g;l#y i2Z
[[b8Fq^0 明白了以上属性后,我们可用以下代码实现,在main.htm中把samper.htm文件的内容显示在一个高度为80、宽度为100%、自动显示边框的内嵌帧中:51Testing软件测试网8F r5\zl(t
A`|,|W0 〈iframe name="import_frame" width=100% height=80 src="samper.htm" frameborder=auto〉51Testing软件测试网5mZZ2T%{*RC
〈/iframe〉
GMK8[ Cs0 不错吧,马上“Ctrl+C”、“Ctrl+V”试试。
%ST*`f(Y@3R*^?051Testing软件测试网5K6P0f$}2I有时我们为强调页面的某项内容,想让它先于页面的其他内容显示。同样用iframe即可轻松实现:
LwO&G'_)j.Q0+J LtCQ0 先把要强调显示的内容另存为一个文件,如first.htm,然后通过一个预载页index.htm,内容如下:51Testing软件测试网m r z gJ
51Testing软件测试网K6_MsNO9Y"B)k〈meta http-equiv="refresh" content="3,url=index2.htm"〉
w0k0Cn!kvon051Testing软件测试网\*m~)a9h7Seg*\〈body〉51Testing软件测试网{U1jvGQ*^:\
51Testing软件测试网'V3jy9Xj4Od!ov%S!L页面加载中,请稍候……〈iframe src="first.htm" style="display:none"〉〈/iframe〉51Testing软件测试网3p$s7`R%D_ Ns2}
51Testing软件测试网Wf] _9UKUZ'k Z〈/body〉51Testing软件测试网3E Zk,w0U }W
51Testing软件测试网sD,EG2VH+a^c)h$\主文件index2.htm51Testing软件测试网7~)hh)u"` d-c8pV
51Testing软件测试网.un'Pvv〈body〉51Testing软件测试网6i HHReup$t
51Testing软件测试网rD+M8Df〈iframe src="first.htm"加入其他属性限制〉〈/iframe〉
,Zam L v9h-BP0I8d0aw s*UR0 〈/body〉
c(?zTGL&?0U:LB!rz.d0 first.htm的内容就会先于页面的其他内容出现在您的浏览器里了51Testing软件测试网jqm B)i
51Testing软件测试网WlE@ S+F#e-g//META标签的奥妙
*g)_`p}!e*]g0t$f&t@JK |f0META标签,是HTML语言head区的一个辅助性标签。在几乎所有的page里,我们都可以看到类似下面这段html代码:51Testing软件测试网 ?R{)^|aB#H
7m^%x@0LV0-----------------------------------------------
xj~!Ej(a7a8l0<head>
8r&\U5|}o0<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
R9Aqa}+s0</head>51Testing软件测试网W{:QnE tCJ)e
-----------------------------------------------
3n;y7L+oRV2fIj^0这就是meta标签的典型运用。meta标签有多少参数,有什么作用,为什么我们要特别重
If!w D2AH1z0U4o0视它呢?让我们一起来发掘meta标签的奥妙!51Testing软件测试网nE(h}8Wu0Q0f6D1l
b m
_"T?7D0根据HTML语言标准注释:meta标签是对网站发展非常重要的标签,它可以用于鉴别作者,51Testing软件测试网*O#@ r r1vM!}G
设定页面格式,标注内容提要和关键字,以及刷新页面等等。
meta标签分两大部分:HTTP-EQUIV和NAME变量。
P%}o)j$c051Testing软件测试网,yUb2sg3c#hA/]s●HTTP-EQUIV类似于HTTP的头部协议,它回应给浏览器一些有用的信息,以帮助正确和精确51Testing软件测试网]/|K!X3D
地显示网页内容。常用的HTTP-EQUIV类型有:51Testing软件测试网|f3R!xwJ4M8E
1.expires(期限)
-bZ~
~SL0说明:可以用于设定网页的到期时间。一旦网页过期,必须到服务器上重新调阅。51Testing软件测试网R5M^w!e!D(`bY+k-e
用法:<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
3hO:{9HaXP0注意:必须使用GMT的时间格式。51Testing软件测试网f'Nk/f;b!@-G!l+Y
"N;om:E0J'gk02.Pragma(cach模式)
/K~fU*\&] |0说明:禁止浏览器从本地机的缓存中调阅页面内容。
3aod@&LM*^
b(z0用法:<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
v&u*{W+D+m1GBP-Yw0注意:这样设定,访问者将无法脱机浏览。
3.Refresh(刷新)51Testing软件测试网IT F6G2OL"p[
说明:需要定时让网页自动链接到其它网页的话,就用这句了。51Testing软件测试网qz
Q/T'SGcI jI f
用法:<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://www.yahoo.com">
_#X5TD,Hi(`7Q0注意:其中的5是指停留5秒钟后自动刷新到URL网址。51Testing软件测试网1e'KY#~z
4.Set-Cookie(cookie设定)51Testing软件测试网 t9u[+h1q!q3F
说明:如果网页过期,那么存盘的cookie将被删除。51Testing软件测试网[nh$^fI/b n!]
用法:<META HTTP-EQUIV="Set-Cookie" CONTENT="cookievalue=xxx;
?.\!P4oY s0expires=Wednesday, 21-Oct-98 16:14:21 GMT; path=/">51Testing软件测试网bn$O.DH]E-eq
注意:必须使用GMT的时间格式。
5.Window-target(显示窗口的设定)51Testing软件测试网?n OgXu
说明:强制页面在当前窗口以独立页面显示。51Testing软件测试网7Uvz+\$M&scx
用法:<META HTTP-EQUIV="Window-target" CONTENT="_top">
0P9B4S[2Nt0注意:用来防止别人在框架里调用你的页面。51Testing软件测试网!QU(Q*KiN}On
5.Content-Type(显示字符集的设定)51Testing软件测试网3K9]5W
C1d;c^Q J4?
说明:设定页面使用的字符集。(我们在前面字体设计中已经介绍过它的作用)
"vR{Da3b E0用法:<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
ZChF7ON051Testing软件测试网 @]fw/Y|/d
●meat标签的NAME变量语法格式是:
:m_/Mt.M pvz:r-Ax\0<META NAME="xxx" CONTENT="xxxxxxxxxxxxxxxxxx">
5\I(l7sLJ)H1l)g&S;q"d0其中xxx主要有下面几种参数:
1.Keywords(关键字)51Testing软件测试网1V1jIQ8|T}d
说明:keywords用来告诉搜索引擎你网页的关键字是什么。
Y/Dq~(ml&`e0举例:<META NAME ="keywords" CONTENT="life, universe, mankind, plants,51Testing软件测试网
kjWxdAZi.H L
Z
relationships, the meaning of life, science">51Testing软件测试网 mo(~(k/tW8ZM
2.descrīption(简介)51Testing软件测试网4i:c,{;x
?D
说明:descrīption用来告诉搜索引擎你的网站主要内容。
2Y7x/E[1z X3J;Q@s^?V0举例:<META NAME="descrīption" CONTENT="This page is about the meaning of51Testing软件测试网B[
mbA7_
life, the universe, mankind and plants.">
3.robots(机器人向导)51Testing软件测试网7Rs-U"rH`]
说明:robots用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。
,xJ)W*t~0CONTENT的参数有all,none,index,noindex,follow,nofollow。默认是all。51Testing软件测试网l2JO8qtC.b8C5M
举例:<META NAME="robots" CONTENT="none">51Testing软件测试网`P nWP'\#M1b&X'W
4.author(作者)
rwFi:IgA0说明:标注网页的作者51Testing软件测试网u:S
r!K;wY2B/oj3h7F8r`
举例:<META name="AUTHOR" content="ajie,ajie@netease.com">51Testing软件测试网` sM4t8P
以上是meta标签的一些基本用法,其中最重要的就是:Keywords和descrīption的设定。
ujKZ-l9]tj#Z051Testing软件测试网/LuU0z5m:s为什么呢?道理很简单,这两个语句可以让搜索引擎能准确的发现你,吸引更多的人访问
H0P^4f$L0你的站点!51Testing软件测试网2T5{&r!CP,]Yin$E
根据现在流行搜索引擎(Lycos,AltaVista等)的工作原理,搜索引擎首先派出机器人自动
'fBD$W5OQ0在www上搜索,当发现新的网站时,便检索页面中的keywords和decription,并将其加入到自
'`HB6r7{n0己的数据库,然后再根据关键词的密度将网站排序。
也就是说:
0z*` FT"J6e01. 如果你的页面中根本没有Keywords和descrīption的meta标签,那么机器人是
)XSt#Bz8Q6v2v0无法将你的站点加入数据库,网友也就不可能搜索到你的站点。51Testing软件测试网-tw!`9w"}z O
2. 如果你的关键字选的不好,关键字的密度不高,被排列在几十甚至几百万个站点的后面
|s F}T/s"q0被点击的可能性也是非常小的。51Testing软件测试网4R&fW3^@:J
"h#h6]C ?2g0所以,我们必须记住添加keywords和descrīption的meta标签,并尽可能写好关键字和简介。
%})}8xTAq)B]Z051Testing软件测试网A @2YOhT写keywords的禁忌是:
bHE#T
c01.不要用常见词汇。例如www,homepage,net,web等。
CC&mZ
r A.n02.不要用形容词,副词。例如最好的,最大的等。51Testing软件测试网!~zc5dG;h#v0_/@4O
3.不要用笼统的词汇,要尽量精确。例如不用"摩托罗拉手机",改用"V998"等51Testing软件测试网1WRS1FnmH;]
寻找合适的关键词的一个技巧是:到lycos,Alta,infoseek等搜索引擎,搜索与你内容相仿
l2{o d9GuQ'cD!V}l0的网站,查看排名前十位的网站的meta关键字,copy下来用到自己的站点上。51Testing软件测试网$|&u#xlu
Vf'cP }WR0这里,我们举一段微软多媒体网站的关键字供你参考: