HTML网页制作:[12]使用框架结构之frameset

作者:滴水穿石 | 创建时间: 2023-04-20
框架--网页设计中常用的技术,用来让一个浏览器同时显示多个超文本。下面,小编将用文字、图像以及具体的代码,教大家如何制作一个使用了frameset的网页。 好吧,虽然frameset已经不太流行了,不过会了总是没有坏处的。小编会在该系列的后...
HTML网页制作:[12]使用框架结构之frameset

步骤

首先,我希望在你的目录下,有4个网页,各自显示不同的内容。 如图所示: 1.html显示“火影忍者” 2.html显示“英雄联盟” 3.html显示“嵌入式开发、网页开发、安卓开发” 4.html显示“alsp”

OK,来介绍下frameset的语法 <frameset rows="第一个框架窗口的高度,第二个框架窗口的高度......" cols="第一个框架窗口的宽度,第二个框架窗口的宽度"......> 所谓框架集属性frameset,其目的就是用来将网页分成什么样子。如图所示,通过frameset将整个页面分成三个部分:1)上面是头部,用来放置logo等2)左侧是目录架构,用来放置目录3)右侧是要显示内容懂了吧,frameset的作用,就是用来将整个页面分成你想要的模块和架构;

这里,又要提到一个窗口属性,frame 用<frameset>将整个页面分割成N个块,而每一个块,就是用frame来表示,其就是用来表示一个单独的页面。 其语法: <frame src="页面的源地址"> 下面看例子。

<frameset rows="100,200,800" frameborder="yes" border="1" framespacing="1"><frame src="2.html"/><frame src="3.html"><frame src="4.html"></frame>

再来看一下效果图

可以看到,整个页面被分成了3分。 而用frame指定的页面也显示了出来。 其中, frameborder:用来表示显示边框 framespacing:表示边框的宽度

下面再来看一个例子: <frameset cols="100,200,900" frameborder="yes" border="1" framespacing="1"><frame src="2.html"/><frame src="3.html"><frame src="4.html"></frame>

看效果图,整个页面也被分成了3分,但是,是横向的。

再来看最后一个例子。 <frameset rows="30%,*" cols="*" frameborder="yes" border="1" framespacing="1"><frame src="2.html"/><frameset cols="30%,70%" frameborder="yes" framespacing="1"><frame src="3.html"><frame src="4.html"></frame>

看效果图 被分成了3分,但是和之前的都不一样。

这里,rows="30%,*"的意思是,将页面分成上部分30%,下部分用“*”表示为还没有分配。 cols也是这个意思。 然后,通过frame将2.html页面放在其中。 之后,再用frameset将下部分分成左右两部分,放上3.html页面和4.html页面,就会出现上述的效果了

OK,到这里还没有结束。如何实现左侧添加目录,在右侧显示不同的网页内容呢?请关注小编之后的经验吧。

点击展开全文

更多推荐