您当前的位置: 首页 » HTML/XHTML/XML编程 » 避免在网站设计中使用框架页
避免在网站设计中使用框架页
论坛链接
最近，我和一位客户讨论一个内部使用的网络应用软件，会议进行得很顺利，直到他提及框架页的使用。他选择框架页作为站点的版面设计，因为他要取代现有的VB程序。但是目前，框架页的使用难以令人满意，虽然我已经不记得最后一次编写使用框架页的程序的时间了，但我却记得使用框架页的那段艰难时光。在这篇文章中，我将向您解释为什么要避免使用框架页而考虑其它的设计方案。
基本概念
在很多年前首次引入的时候，框架页曾经是一个很酷的概念。我还记得在横幅、导航和站点内容部分分别使用单独的框架页。即使您不熟悉框架页的概念也没有关系，其概念并不复杂，基本上，HTML框架页允许您将浏览器窗口划分为单独的空间或框架。
还有框架的HTML元素主要用于基于框架的版面设计，框架元素定义了单独的空间或框架集，这些框架页包含在框架元素中，框架元素的行与列的属性定义了框架页的版面效果。列表A中的HTML代码创建了一个示例框架集，网络开发区的文档将载入到左边的框架页，而同时Download.com网站将被载入到右边的框架页。
<html><head><title>Frames</title></head>
<frameset cols="400, *">
<frame name="left" src="http://techrepublic.com.com/1200-3513-5737146.html" SCROLLING="yes" NORESIZE>
<frame name="right" src="http://www.download.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
在这个简单的例子中，为了说明CSS的作用，我还对每个div加上颜色进行区分，您可以使用CSS来创建更加强壮的页面布局。雅虎的用户界面库提供了一个很棒的例子，您还可以使用AJAX来改进数据的载入，这也是通常使用框架页的原因之一（当然框架页不需要如此频繁地刷新）。
另外一个表示选择
在网络开发者的眼中，框架页已经是历史的遗迹了，但它确实曾经像现在的CSS一样为人们提供了更好的选择，我希望听到您对框架页的意见，请在文章讨论区分享您的想法和经验。
正如您所思考的一样，我将会劝说我的客户使用含有CSS的页面设计方案。
基本概念
在很多年前首次引入的时候，框架页曾经是一个很酷的概念。我还记得在横幅、导航和站点内容部分分别使用单独的框架页。即使您不熟悉框架页的概念也没有关系，其概念并不复杂，基本上，HTML框架页允许您将浏览器窗口划分为单独的空间或框架。
还有框架的HTML元素主要用于基于框架的版面设计，框架元素定义了单独的空间或框架集，这些框架页包含在框架元素中，框架元素的行与列的属性定义了框架页的版面效果。列表A中的HTML代码创建了一个示例框架集，网络开发区的文档将载入到左边的框架页，而同时Download.com网站将被载入到右边的框架页。
<html><head><title>Frames</title></head>
<frameset cols="400, *">
<frame name="left" src="http://techrepublic.com.com/1200-3513-5737146.html" SCROLLING="yes" NORESIZE>
<frame name="right" src="http://www.download.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
在这个简单的例子中，为了说明CSS的作用，我还对每个div加上颜色进行区分，您可以使用CSS来创建更加强壮的页面布局。雅虎的用户界面库提供了一个很棒的例子，您还可以使用AJAX来改进数据的载入，这也是通常使用框架页的原因之一（当然框架页不需要如此频繁地刷新）。
另外一个表示选择
在网络开发者的眼中，框架页已经是历史的遗迹了，但它确实曾经像现在的CSS一样为人们提供了更好的选择，我希望听到您对框架页的意见，请在文章讨论区分享您的想法和经验。
正如您所思考的一样，我将会劝说我的客户使用含有CSS的页面设计方案。