html框架--frameset

来源：互联网发布：网络购物合同纠纷编辑：程序博客网时间：2024/05/29 09:14

今天学习了利用frameset将网页的整个页面划分成几个区域，颇有感触。现将所学整理消化，并希望帮助到有缘人。

首先来看一下最后的效果图：

该网页分为三个部分，首先分为上下两个模块：上面的部分为一张图片，整个部分下面是一部分；然后下面又分为两个模块，左边即为粉色区域部分，右边即为白色区域部分。该网页实现的功能为：点击粉色区域的超链接，相应超链接里面的内容会代替白色区域部分显示内容。

接下来是该网页搭建的具体步骤

1.首先构建大的框架，将整个页面分为几个部分

其中frameset就是将整个页面分为几个部分的法宝啦，frameset后的属性：cols表示将页面竖着划分，后面的数值表示该部分所占划分区域的比例；rows表示将页面横着划分，当然，其后的数值也表示该部分占划分区域的比例；frameboeder表示将该区域划分后产生的边框的大小，数值为0表示没有边框。以本例为例，rows后的属性值为20%，表示整个网页将会横着划分，该图片占整个页面的20%。cols所占比例为20%，注意本例中frameset中嵌套了一个frameset,所以该20%表示除去图片的下部分中，1.html和2.html竖着划分剩余页面并且1.html占20%，2.html占80%。

特别注意：用于分块的代码中，不允许出现body和body块

frame元素：src表示该部分引入一个网页的路径；name表示给该元素起一个名字；noresize表示该页面的比例大小固定，鼠标不可随意改动其大小；scrolling表示在页面中不会产生页面滚轮，影响美感。

2.往各个页面中加东西

(1)加图片

body后的属性align，将其值设置为center表示该图片在页面中呈居中显示。接下来是一个图片的超链接，<img src="xx">

(2)往右边页面加东西

<!DOCTYPE html><html><body> 我喜欢的音乐的歌词</body></html>

此为刚刚打开浏览器，未点击任何超链接时的显示效果。在右边空白页面显示“我喜欢的音乐的歌词”

(3)往左边页面加东西

<!DOCTYPE html><html><body bgcolor="pink"> <h3 align="center">我喜欢的音乐</h3> <ul> <li><a href="3.html" target="frame2">歌谣</a></li> <li><a href="4.html" target="frame2">带你去旅行</a></li> <li><a href="5.html" target="frame2">下完这场雨</a></li> <li><a href="6.html" target="frame2">我一定会爱上你</a></li> </ul></body></html>

body元素后的属性首先将左边区域整个染成粉红色。

接下来使用无序列表及超链接将页面进行替换。

1.在无序列表中可以使用超链接<a href="xx.html">xx</a>

2.关于超链接中为什么要使用target将超链接页面引到名称为frame2的页面上

(1)使用target属性的使用