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

框架--网页设计中常用的技术，用来让一个浏览器同时显示多个超文本。下面，小编将用文字、图像以及具体的代码，教大家如何制作一个使用了frameset的网页。

好吧，虽然frameset已经不太流行了，不过会了总是没有坏处的。小编会在该系列经验的后续介绍更多的流行的知识。

工具/原料

一台电脑
TXT或者DW

步骤

1

首先，我希望在你的目录下，有4个网页，各自显示不同的内容。

如图所示：

1.html显示“火影忍者”

2.html显示“英雄联盟”

3.html显示“嵌入式开发、网页开发、安卓开发”

4.html显示“alsp”
2

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，到这里还没有结束。如何实现左侧添加目录，在右侧显示不同的网页内容呢？请关注小编之后的经验吧。

HTML网页制作：[12]使用框架结构之frameset相关推荐

HTML 静态网页制作12月2日表单样式
HTML 表单的应用源代码: <body> <center> 账号:<input type="text" name="first" ...
HTML5期末大作业：美食网页制作——餐饮料里(12页) HTML+CSS+JavaScript 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载
HTML5期末大作业:美食网页制作--餐饮料里(12页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网页设计作业题材有 ...
《网页制作与网站建设从入门到精通》第一部分入门篇
第一部分入门篇第1章■ 网页设计基础第2章■ HTML入门第3章■ 网站建设基础第4章■ 网页中的色彩知识第1章网页设计基础为了使网页初学者能够对网页设计有个总体的认识,本章首先介绍了 ...
网页制作105个问答
---恢复内容开始--- 1.怎样定义网页语言(字符集)? 在制作网页过程中,你首先要定义网页语言,以便访问者浏览器自动设置语言,而我们用所见即所得的HTML工具时,都没有注意到这个问题,因为它是默认 ...
html练习题及答案文库,HTML_XML与网页制作测试题及答案电子教案.doc
HTML_XML与网页制作测试题及答案电子教案.doc HTML/XML与网页制作复习资料第1题判断正误(1)HTML标记符的属性一般不区分大小写.(对)(2)网站就是一个链接的页面集合.(对)(3 ...
信阳学院大一计算机考试题库,韩山师范学院大一计算机考试题库网页制作的试题...
韩师网页制作试题汇集,此乃计算机题库试题,准确率高达95%····· 一. 单选题 1.使用"记事本"编辑网页时,应将其保存为(A )后缀. (A).htm或.html(B).cs ...
网页制作HTML代码全攻略
网页制作HTML代码全攻略第一章:HTML 语言的结构 html文件是标准的ASCII文件,它看起来象是加入了许多被称为标注(tag)的特殊字符串的普遍文本文件.从结构上讲,html文件由元素(el ...
制作一个html文件效果如下图,网页制作基础知识-习题课件.ppt
网页制作基础知识-习题课件第一章网页制作基础知识;1.1 案例网页制作学习园地网页;1.1案例:网页制作学习园地网页; 1.1.1 功能要求1．整个网站主要以HTML代码编写的方式完成.页面风格 ...
《网页制作与网站建设从入门到精通》目录
目录封面扉页前言第一部分入门篇第1章网页设计基础 1.1 预备知识 1.2 如何设计网页 1.2.1 网页设计的任务 1.2.2 网页设计的实现 1.2.3 网页设计的基本原则 1.3 ...

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

工具/原料

步骤

HTML网页制作：[12]使用框架结构之frameset相关推荐

最新文章

热门文章