做一个有顶，有左侧网页，有右侧网页的框架集网页应该怎么做？
先把各个小的分散页面做好
all2.html
top.html
left.html
right1.html
right2.html
来看每个文件的具体代码：
all2.html
<!--这里开始是整体框架结构，为上下结构-->
<frameset rows="20%,*"
frameborder=0>
<frame src="top.html" noresize scrolling=no
/>
<!--这里开始是另外一个框架集结构为左右结构-->
<frameset cols="20%,*">
<frame src="left.html" noresize
/>
<!--frame元素中有一个name属性，相当于给frame取名，以方便识别位置-->
<frame src="right1.html" name="right"
/>
</frameset>
</frameset>
top.html
这里是顶部内容
left.html
<a href="right1.html"
target="right">青花瓷1</a><br
/>
<a
href="right2.html"
target="right">青花瓷2</a><br
/>
right1.html
这里是right1.html的内容
right2.html
这里是right2.html的内容
框架可以生成独立变化和滚动的窗口，从而能将一个窗口分割为若干个字窗口。在每一个字窗口中显示一个HTML文档。我们这回就来看看多文档的基本结构和子窗口之间的交叉链接。一，基本结构HTML使用<Frameset>,<Frame>和<noFrames>标签来定义框架。下面我们就来了解一下这三个标签的作用和相应的属性。
（一），<Frameset>标签。
该标签是框架设计标签，成对使用。首尾标签之间的内容就是使用到框架的HTML主体部分。在使用框架的HTML文档中不能出现<body>标签，否则会导致浏览器忽略所有的框定义而只显示<body>和</body>之间的内容。
<Frameset>标签作用是将窗口分割为若干个自窗口，子窗口的数目取决于嵌套在该标签中<Frame>标签的书目。<Frameset>标签有两个属性。rows和cols，分别用来确定个子窗口的高度和宽度，格式为<Frameset rows="值1,值2,……值n"><Framest cols="值1,值2,……值n">.各参数之间以逗号分割，依次表示各个自窗口的高度（宽度）。这两个属性的参数值可以是数字、百分数或符号“*”。下面我们来分别解释一下：
（1）数字。表示子窗口高度（宽度）所占的像素点数。
（2）百分数。表示子窗口高度（宽度）占整个浏览器窗口高度（宽度）的百分比。 （3）符号“*”。当符号*只出现一次。即其他子窗口的大小都有明确的定义时，表示该子窗口的大小将根据浏览器窗口的大小而自动调整。当符号*出现一次以上时，表示按比例分割浏览器窗口的剩余空间。例如：
<Frameset cols="40%,2*,*">表示将浏览器窗口分割为3列，第一个子窗口在第一列，窗口宽度为整个浏览器窗口宽度的40%；第二个子窗口在第二列，占浏览器窗口剩余空间的2/3，即其宽度为整个浏览器窗口宽度的40%，第三个子窗口占剩余空间的1/3，宽度为整个浏览浏览器窗口宽度的20%。
（二），<frame>标签。HTML用<frame>标签来标识子窗口。<frame>标签是嵌套在框架设置标签<Frameset>标签中来使用的单独标签。在<Frameset>中定义了多少个子窗口就要有多少个<frame>标签与之匹配，依次定义各个窗口的性质。<frame>标签有7个属性，除SRC属性是不可缺省的外，其他属性都是可选的。
（1）SRC属性。用以定义子窗口的名称。
（2）.name属性。用于定义子窗口的名称。
（3）frameboder属性。该属性的参数值为1或0。当参数值为1时，表示该子窗口有边框，为0时没有边框。该属性缺省值为1。
（4）bordercolor属性。用以规定子窗口的边框颜色。如果在一个以上的<frame>标签中定义了子窗口的边框颜色，则以第一次指定的颜色为标准。在指定边框颜色时，可以使用颜色的RBG代码或直接使用与该颜色想对应的英文单词。bordercolor属性的参数值可以是16种颜色中的任意一种。
（5）sclling属性。属性的参数值为yes,no或auto之一。参数值为yes时表示该子窗口始终有滚动条。为no时是始终没有滚动条。为auto时表示当文档的内容超出窗口范围时，浏览器自动为该子窗口添加滚动条。scolling属性的缺省值为auto.
（6）maginwidth和marginwidht属性。这两个属性是用来指定显示内容与窗口边界之间的空白距离大小的。其中maginwidth属性用于确定显示内容与左右边界之间的距离；maginwidht用来确定显示内容与上下边界之间的距离。这两个属性的参数值都是数字。分别表示左右边距所占的像素点数。
（三），<noframes>标签。使用该标签可以在用户浏览器不支持框架显示时告之用户一些相关信息，以免浏览者对空白窗口画面感觉莫名其妙。<noframes>标签是成对使用的。首尾标签之间的内容就上告之浏览者的信息。如“如您看到空白的画面说明您的浏览不支持框架显示”。虽然常用的两中浏览器IE和NC都是支持框架显示的。但为了加强文档的适用性，我们最好还是养成使用这个标签的习惯。
（四），基本结构。
我们举例说明HTML中框架文档的基本结构：
<html>
<head>
<title>文档标题</title>
</head>
<Frameset Cols="值1,值2,……,值n>将浏览器窗口分割为n个窗口。
<Frame SRC="1.html">
<frame SRC="2.html">
.
.
.
<frame SRC="n.html">
</Frameset>
<noframes>如果您看到空白的画面，说明您的浏览器是不支持框架机构的</noframes>
</html>
其中，<frameset>标签是可以嵌套使用的，也就是说，可以将其中某一个或几个子窗口划分为若干个更小的窗口。例如：
<html>
<Frameset cols="30%,90,*">
<frame SRC="1.html"name=cont>
<frame SRC="caipage.gif">
<frame SRC="2.html">
</frameset>
<frame SRC="f2.html"name=another marginheight=120>
</frameset>
<noframes>您使用的浏览器不支持框架</noframes>
</html>
二，目标窗口的交叉链接。
为了方便用户进行搜索和浏览，我们经常用到一系列锚标组成的索引目录显示在一个子窗口中，而将锚标所指向的内容放在另一个子窗口中。显示锚标的子窗口通常被成为”源窗口“，显示目标文档的窗口则称之为“目标窗口”。
在进行交叉<frame>标签的name属性定义目标窗口的名称，然后再修改显示在源窗口中的文档。在所有的<A>标签中添加语句target="目标窗口名称"来指定目标文档的显示位置。例如：/P>连接时，我们必须先用
<html>
<head>
<title>目标窗口测试页</title>
</head>
<frameset cols="30%,90,*">
<frame src='f1.html"marginheight=60>
<frameset rows="120,*">
<frame src="caipage.gif">
<frame src="2.html">
</frameset>
<frame src="f2.html"name=another marginheight=60>
</frameset>
<noframes>您的浏览器不支持框架结构</noframes>
其中，第一个子窗口是源窗口。我们在源窗口的对应文档f1.html中定义了一系列锚标，该文档的内容如下：
<html>
<body>
<<center>（说明：文档主体内容举重显示
<P><A href="田园风光.jpg" target="another">田园风光</A><P>
<A href="qiu.jpg" target="another">金色秋天</A><P>
<A href="tong.html" target="another">渔哥唱晚</A><P>
<A href="pig.gif" target="another">夕阳无限</A><P>
</body>
</html>
当用户点击锚标“田园风光”后，浏览器将在目标文档显示锚标的连接对象
1、使用css中的flaot属性就可以了，首先打开Dreamweaver，创建html文件：2、然后先给页面设置背景颜色，创建段落两个段落，段落上面设置2张图片的float属性，分别让它们左右浮动，值为left和right，最后打开浏览器：
3、打开浏览器后即可看到效果，两张图片分别浮动在文本的左右两边，文字则是围绕在图片周围.。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）