分享
 
 
 

学习网页制作基础入门教程(8)框架标签

王朝html/css/js·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

相关文章:

学习网页制作基础入门教程(1)网页编写

学习网页制作基础入门教程(2)排版标签

学习网页制作基础入门教程(3)字体标签

学习网页制作基础入门教程(4)图象标签

学习网页制作基础入门教程(5)图象标签

学习网页制作基础入门教程(6)连接标签

学习网页制作基础入门教程(7)表格标签

框架概念

1. 首先,各位先看看右边这张图片,将利用这张图来做解释,这样子,讲起来可能会清楚一些。

我们可以看见,右边的这个图片,一共分为 1 、 2 、 3 三个框架,每一个框架,各有其显示的內容分别是 a.htm、b.htm、c.htm 三个文件。然而左下角的那个 index.htm 是做什么用的呢?

2. 原来,左下角的这个文件 index.htm,就是要告诉浏览器,我们要将页面分割成这样,也就是说,所有Frame的标签,其实都只放在 index.htm 这个文件里。

3. 这样明白了吧!总之,你要分割几个框,就一定会有几个对应的html 文件。

开始分割

1. 分割窗口可是一门学问,要分割也是要一步一步来的。看看刚刚那例子,想像页面是一个蛋糕,你要怎么割,才能割成那样呢?

原始代码

显示结果

<HTML>

<HEAD>

<TITLE>框架制作 </TITLE>

</HEAD>

</HTML>

2. 各位会发现,奇怪,在上面的语法中,怎么没看到 <BODY></BODY> 标签呢?呵呵...没错,它已经被将要加进去的 <FRAMESET></FRAMESET> 标签給取代了!也就是说,如果我们要分割页面,就要先用<FRAMESET>标签告诉浏览器:"我要开始分割了!"此时,<BODY> 是派不上用场的,所以躲到一旁凉快去了!

3. 现在开似乎动手分割看吧!我们先将页面分成左右两边,如下图:

原始代码

显示结果

<HTML>

<HEAD>

<TITLE>框架制作</TITLE>

</HEAD>

<FRAMESET COLS="120,*" >

<FRAME SRC="a.htm" NAME="左">

<FRAME SRC="b.htm" NAME="右">

</FRAMESET>

</HTML>

4. 在<FRAMESET>中,我们要告诉浏览器到底是要左右分(COLS)?还是上下分(ROWS)。一开始我们是左右分,所以我们写成<FRAMESET COLS="120,*"。COLS="120,*" 就是说,左边那一栏强制定为 120 px,右边则随浏览器大小而变。除了直接写px数外,我们也可以用百分比来表示,例如COLS="20%,80%"也是可以的。

5. 然后,再将右边的框窗再分割成上下两个页面。如下图:

原始代码

显示结果

<HTML>

<HEAD>

<TITLE>框架制作</TITLE>

</HEAD>

<FRAMESET COLS="120,*">

<FRAME SRC="a.htm" NAME="左">

<FRAMESET ROWS="100,*">

<FRAME SRC="b.htm" NAME="右上">

<FRAME SRC="c.htm" NAME="右下">

</FRAMESET>

</FRAMESET>

</HTML>

6. 看见了没?原本的 <FRAME SRC="b.htm" NAME="2">在第 3 点的语法中)被另一组<FRAMESET ROWS="100,*">取代了!所以要注意!第二组<FRAMESET ROWS="100,*">是被第一组<FRAMESET COLS="120,*"> 包围起来的!

7. 不知不觉就大功告成了,其实只要将最后完成的那些语法存成 index.htm,然后再准备三个文件 a.htm 、b.htm 、c.htm 那么就完工了!当然,这是一个最好的分割法,再将一些进阶的标签在下面一一说明。

其他标签参数说明:

例子 : <FRAMESET COLS="120,*" FRAMEBORDER=0 FRAMESPACING=5>

1. COLS="120,*" 就是垂直切割页面啦!你可以一次切成左右两个页面,当然也可以切成三个,很简单只要写成 COLS="30,*,50" (数字随便你自己调整!),依此类推,四个以上当然就是四组数字了!

2. ROWS="120,*" 就是橫向切割页面,也就是将页面上下分开,切法同上。

3. FRAMEBORDER=0 设定框架的边框,其值只有 0 和 1 , 0 就是不要边框, 1 就是要显示边框。边框是无法调整粗细的。

4. FRAMESPACING=5 表示框架与框架见的保留空白的距离,以免看起来太挤。

例子 : <FRAME SRC="a.htm" NAME="1" FRAMEBORDERr=0 SCROLLING="no" noresize marginhight=2 marginwidth=2>

1. SRC="a.htm" 设定此框架中要显示的网页名称,每个框架一定要对应一个网页,否则就会产生错误,这里就是要您填入对应网页的名称。(如果该网页在不同目录,记得路径要写清楚)

2. NAME="1" 设定这个框架的名称,这样才能指定框架来作连接,所以一定要设定啊!当然名称随你高兴取名。

3. FRAMEBORDERr=0 设定框架的边框,其值只有 0 和 1 , 0 就是不要边框, 1 就是要显示边框。边框是无法调整粗细的。

4. SCROLLING="no" 设定是否要显示滚动条,YES是要显示滚动条,NO是无论如何都不要显示,AUTO是视情況显示。 noresize

5. noresize 设定不让使用者可以改变这个框框的大小,如果没有设定这个参数,使用者可以很容易的拉动框架,改变其大小。

6. marginhight=2 表示框架高度部份边缘所保留的空间。

7. marginwidth=2 表示框架宽度部分边缘所保留的空间。

其他标签

1. <noframe>

使用方法:<noframe>请换有支持Frame功能的浏览器<noframe>

标签解释:有些浏览器版本较低,无法显示Frame的功能,因此,就要使用此标签,让这些人知道,该换换浏览器了。或者,你也可以在这标签中,写上沒有Frame语法的网页标签,那么,没有支持Frame功能的浏览器,便会自动显示没有Frame语法的网页。

2. target=框架名称

使用方法: <A HREF="d1-1.htm" target=3>显示內容</A>

标签解释:常常有一个情況是,我想在框窗 1 的地方按下连接,但是希望他的内容出现在框架 3 中(请参照上面那个图),那应该如何写呢?就像上面加个 target=框架名称 就行啦!

3. target=_top

使用方法:< A HREF="http://www.webjx.com" target=_top>网页教学网</A>

标签解释:有时候,在框架里面连接到别的站,却发现,新连接的这个站,竟然被框架包住了,不但难看,而且可能会吃上官司!所以,这时候你必需加入 target=_top这个参数,那么,这个新连接到的网站,就会重新占据整个浏览器了!

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有