HTML网页制作:[14]创建框架链接
1、首先看下小编的目录架构
1.html将作为主页面
2.html将作为目录页面,里面有2个目录,分别是目录一和目录二
3.html为目录一将要链接的页面
4.html为目录二将要链接的页面
![HTML网页制作:[14]创建框架链接](https://exp-picture.cdn.bcebos.com/04d7a614f4d0b5030bf7f74dcc4ec28332bf20b9.jpg)
2、然后,看下1.html的代码
<frameset cols="30%,70%" frameborder="yes" framespacing="1"><frame src="2.html" name="left"><frame src="3.html" name="right">
其中,name的意思是,指定frame的名字,他有什么用呢,看后面
![HTML网页制作:[14]创建框架链接](https://exp-picture.cdn.bcebos.com/460fdc8333bf3beffc6ae10b3f3ea8db564a1ab9.jpg)
3、再看2.html的代码
<ul><li><a href="3.html" target="right">目录一</a></li><li><a href="4.html" target="right">目录二</a></li></ul>
我创建了一个列表,然后目录一链接3.html,目录二链接4.html。
注意,有一个target的属性,他的值就是上面frame的名字。
意思是,点击目录一,将链接到3.html,然后将3.html显示在frame的名字为right的框架中
![HTML网页制作:[14]创建框架链接](https://exp-picture.cdn.bcebos.com/a99a494afa32939cfcd26e015719ce2c5a1b15b9.jpg)
4、再来看下3.html的代码。
没什么可说的,显示几个字而已
![HTML网页制作:[14]创建框架链接](https://exp-picture.cdn.bcebos.com/5a5a00def4dca039cb3a7f5f58d96975f3c40db9.jpg)
5、再来看4.html的代码,也没什么可说的
![HTML网页制作:[14]创建框架链接](https://exp-picture.cdn.bcebos.com/f385f29959430401a8dbaff1d66b04d1482905b9.jpg)
6、OK,来看1.html的网页效果
点击目录一,右侧将显示3.html的内容
![HTML网页制作:[14]创建框架链接](https://exp-picture.cdn.bcebos.com/054056fe1e425d6be7f4f89a11883913e9e500b9.jpg)
7、点击目录二,右侧将显示4.html的内容
![HTML网页制作:[14]创建框架链接](https://exp-picture.cdn.bcebos.com/9bc92713e8e5ecee44990f9ccc704618deda7ab9.jpg)
1、这个和上面基本相同。我也不想多说什么了。
<iframe name="heihei" src="3.html"></iframe>
语法就是这样!
在另外一个地方,用target链接这个名字,就可以了!
2、OK,就是那么简单,当然,网页做的很粗糙,代码也未必符合规范,但是起到一个抱砖引玉的作用,先入门,然后再优化!