HTML框架的基本结构

HTML框架的基本结构
HTML框架的基本结构

HTML框架的基本结构

在一个网页中,并不是所有的内容都需要改变,如网页的导航栏、网页页脚等部分是不需要改变的,如果在每一个网页中都重复添加这些元素,不仅会浪费时间,而且在浏览时也会带来不便、耗费更多的时间,为了解决这种问题,我们可以使用框架来对网页进行布局。

本节单词记忆:标签 1.frameset 2.frame属性 1.cols 2.rows 3.noresize 4.bordercolor 5.frameborder

网页学习网提示:html语言非常简单,不需要逻辑理解,而绝大部分朋友觉得它难以掌握,90%的原因在于英语单词不过关,所以每节记忆几个单词是非常有必要的。

使用框架可以把浏览器窗口划分为多个区域,每个区域可以显示不同的网页,每次浏览者在访问框架页面时,只下载框架页面中变化的区域,对于不变的区域,不用重新下载,从而给浏览者带来方便、节省下载页面所需的时间。

一个框架结构是由以下两部分组成的:

框架(FRAME):是浏览器窗口中的一个区域,它可以显示与浏览器窗口其余部分中所显示内容无关的网页文件。

框架集( FRAMESET):是一个网页文件,它将一个窗口通过横向或纵向的方式分割成多个框架,每个框架中要显示的都是不同的网页文件。不同的网页文件可以通过超链接联系起来。

如图1所示就是一个比较经典的框架集页面。此页面一共有3个区域,每个区域分别显示一个HTML文档,由于框架集页面也是一个HTML文档,所以一共有4

个HTML文件。为了浏览方便,当浏览者单击左侧导航栏中的服务列表(如“注册&认证”、“买家帮助”等)超链接时,右侧窗口显示相应的详细帮助信息。

图1 框架集页面

一、为何使用框架

一个网页可以有一个或多个框架。框架的一些用法如下:

● 在页面的一个固定部分显示Logo或静态信息。

● 左侧框架显示目录,右侧框架显示内容,用户只需单击左侧窗口的目录,在右侧窗口中就会显示相应内容,如网上在线学习教程、论坛、后台管理、产品介绍等。

● 框架能有机地把多个页面组合在一起,这多个页面之间可互相独立,却又可相互联系。

二、框架的基本结构

框架集( FRAMESET)页面的结构是通过属性rows和cols来设置的,根据框架的分割方式可分为:上下分割窗口(使用rows属性来分割),左右分割窗口(使用cols属性来分割),嵌套分割窗口(同时使用rows和cols属性来分割)。https://www.360docs.net/doc/774090776.html,

语法:

……

说明:FRAMESET仅是一个框架的集合。FRAME标签可以提供对单独HTML文档URL 引用,其中每个HTML文档占据一个框架。cols将页面沿垂直方向分割为几个窗口,cols可以取多个值,不同的值用逗号隔开,单位可以是像素,也可以是占浏览器的百分比。rows将页面沿水平方向分割为几个窗口,也可以取多个值,是由逗号分割的像素值或百分比。src指定框架窗口的源文件。

示例1:

rows框架

示例1在浏览器中预览效果如图2所示。

图2 水平方向分割为上中下3个窗口

示例2:

cols框架

示例2在浏览器中预览效果为两个窗口左右分割,而左边的窗口固定宽度120px。

三、如何创建多个复杂的窗口

前面的示例1和示例2要么是水平分割,要么是垂直分割,如果要实现如图1

所示的框架集页面,那怎么实现?

经分析,首先将页面分割为上下两部分,上部分的高度占浏览器高度的30%左右。然后将下面部分分割成左右两部分,宽度大约分别占窗口的20%和 80%。注意对其中的一个框架窗口再次分割时,需要使用标签代替标签。下面我们就一步一步地实现如图1所示的框架集页面。

第一步:创建或直接提供如图1所示的top窗口中所显示的页面文档top.html。

第二步:创建或直接提供如图1所示的left窗口中所显示的页面文档

left.html。

第三步:创建或直接提供如图1所示的right窗口中所显示的页面文档

right.html。

第四步:手写如示例3中的代码,然后保存为frame_Sets.html文件。

示例3:

创建多框架页面

noresize="noresize" id="topFrame" title="topFrame" />

border="0">

noresize="noresize" />

示例4在浏览器中预览效果如图1所示。

本节作业:

制作如图1复杂框架网页。

注意事项:

1.掌握框架的基本结构。

2.注意框架结构的网页不能只有一个网页,一点还要存在标签src属性指定的网页。

网页学习网提示:光看教程是无法让你掌握HTML知识,最好是完成作业后才进入下一次教程,动起手来吧!

点击下载第三章案例及作业资源返回《HTML入门经典》教程列表

转载请注明本文地

址:https://www.360docs.net/doc/774090776.html,/html/jc/505.html

韩顺平html笔记

HTML 一、HTML有关知识点 1.html介绍 html是一种标记语言,主要的用途是开发网页,使用html可以展现文字、图片、视频、声音,html是我们web开发(网站开发)。 2.html可以做什么 ?html可以编写静态网页 ?该静态网页可以包括文字、图像、动画、声音、表格、链接。从而构成一个个漂亮的网页 3.Html发展历史 4.Html的基本结构 5.是标记(也叫元素),标记的一般格式: <元素名[属性=“属性值”]>元素内容 如果没有内容可以用:<元素名[属性=“属性值”]/> 6.Html实体标记 7.Html常用标记

?html超链接 ●_blank 新的窗口 ●_self 本窗口 ●_parent 父窗口 ●_top整个浏览器窗口 ?html图像元素 ?html表格

--用于说明行 --用于说一小格
?无序列表
?有序列表
?框架 ?表单元素 文本框: 密码框: 单选框: 复选框:checked是指默认选中的 隐藏域: 图片按钮: ?文本域: ?下拉菜单: