您现在的位置：天下网吧 >> 网吧天地 >> 天下码农 >> 数据库 >> 正文

避免在网站设计制作中使用框架页

2008-5-18不详佚名

【大中小】

框架页曾经是一个很酷的概念。还记得在横幅、导航和站点内容部分分别使用单独的框架页。即使您不熟悉框架页的概念也没有关系，其概念并不复杂，基本上，HTML框架页允许您将浏览器窗口划分为单独的空间或框架。

　　还有框架的HTML元素主要用于基于框架的版面设计，框架元素定义了单独的空间或框架集，这些框架页包含在框架元素中，框架元素的行与列的属性定义了框架页的版面效果。列表A中的HTML代码创建了一个示例框架集，网络开发区的文档将载入到左边的框架页，而同时Download.com网站将被载入到右边的框架页。

以下是引用片段：
<html>
<head>
<title>Frames</title>
</head>
<frameset cols="400, *">
<frame name="left" src="http://..../index.html" SCROLLING="yes" NORESIZE>
<frame name="right" src="http://www....com/" SCROLLING="yes" NORESIZE>
<noframes><body>
This appears if frames aren't supported.
</body>
</noframes>
</frameset>
</html>列表A

　　每个框架页的SCROLLING属性决定了用户是否能在该框架页中使用滚动条;NORESIZE属性则说明了该框架页不能被重新设定大小，因而其宽度是静态的;而noframes元素则提供了在不支持框架的浏览器中的显示效果;在框架页上除了这些之外就没有其它的选项了，您可以参考相关的HTML资源来获取更多信息。

　　在上个例子中，将两个网站载入到框架页中并不是最实际的应用，框架页通常用于将浏览窗格放置在左侧或着顶端，而内容放置在右侧或者底部，通过设定框架页的宽度(或者高度)并载入所需要的页面，这一功能很容易实现。框架页的概念很简单，但是大部分网络开发人员都蔑视这一功能。

　　缺陷

　　近来，框架页的使用难以令网络开发社区感到满意，实际上，在XHTML 1.1规范中，已经不再支持框架页了，它已经被XFrames所取代。所以这是放弃使用框架页的一个原因，但目前被支持的标准怎么样呢?以下列出了框架页没有被广泛使用的原因：

　　很多网络开发人员从哲理的角度讨论了框架页，它们认为框架页的使用违反了互联网的基本概念，因为这将造成大量的独立页面无法被链接。

　　虽然大部分网络浏览器可以依照设计显示出框架页，但是对于非传统的浏览器平台，比如手机、掌上设备等，却没有实现此功能，即使基于框架页的设计方法是有用的，但在这些平台上却造成了混乱。

　　搜索引擎在处理使用框架页管理的网站时会遇到麻烦，很多搜索引擎，比如Google，会跳过框架页内容而对没有框架的内容进行索引。

　　对于预先定义的基于框架页的区域，编写代码和页面设计都可能成为问题，如果页面布局设计得很糟糕，在单独浏览这些页面的时候，就会造成麻烦。

　　对于用户而言，使用框架页站点的浏览体验可能令人恼怒。在将站点加入收藏夹时，通常会收录整个框架集而相关内容却被忽略了，因此用户很难找到所需的内容。另外一个问题是打印，不过好在大部分浏览器都允许用户选择打印整个框架集或者单独的框架页。

　　框架页还导致了很多可及性(accessibility)问题，含有框架页的视觉布局很难转换到非视觉化的浏览器中，一个好的准则是在所有的页面元素上提供文字说明，并附加对不支持框架页的浏览器的说明。一份在线指导提供了更多的细节。

　　替代设计

　　框架页是在CSS出现之前引入到互联网的，现在，CSS可以作为替代框架页的设计方案，上文中的例子可以使用CSS重新编写，列表B展示了使用CSS的代码。

以下是引用片段：
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<title>Two columns with CSS</title>
<style>
#left {
width: 400px;
float: left;
margin-left: -1px;
padding: 5px;
background: yellow;
}
#right {
padding: 5px;
margin-left: 405px;
background: lightgrey;
}
</style>
</head>
<body>
<div id="left">
Left area
</div>
<div id="right">
Right area
</div>
</body>
</html>列表B