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

2016-02-19 20:34 19 1 收藏

想要天天向上,就要懂得享受学习。图老师为大家推荐避免在网站设计制作中使用框架页,精彩的内容需要你们用心的阅读。还在等什么快点来看看吧!

【 tulaoshi.com - Web开发 】

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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

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

以下是引用片段:
html
head
titleFrames/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
noframesbody
This appears if frames aren't supported.
/body
/noframes
/frameset
/html列表A

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

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

  缺陷

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

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

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

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

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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

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

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

  替代设计

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

以下是引用片段:
!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"
html
head
titleTwo 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一样为人们提供了更好的选择。

来源:http://www.tulaoshi.com/n/20160219/1624033.html

延伸阅读
一、简介 1.在移动互联网时代,移动app能解决用户的很多生活琐事,比如 (1)导航:去任意陌生的地方 (2)周边:找餐馆、找酒店、找银行、找电影院 2.在上述应用中,都用到了地图和定位功能,在iOS开发中,要想加入这2大功能,必须基于2个框架进行开发 (1)Map Kit :用于地图展示 (2)Core Location :用于地理定位  3.两个...
1 建立安装程序,用VB打包 2 多个文件压缩,用IExpree2.0,选"将文件解开并运行安装命令",生成一个"压缩运行文件" 3 对"压缩运行文件"进行签名,用signcode(在这之前要生成一个.cer的证书文件,如何生成一会儿说) 4 写入 如果你的VB工程有版本号,那么就在version=换成你的版本号,以后别人机器上即使安装过你的软件,但版本没有你的版本号高的话,一...
标签: Web开发
解决思路 :     利用框架文档中window对象的scrollBy方法来滚动。 具体步骤 : 1. 包含框架页的代码。 onmouseout="scrollStop()" onmousedown="stepY=-5"  onmouseup="stepY=-1"上  onmouseout="scrollStop()" onmousedown="stepY=5"  onmouseup="stepY=1"...
当你欣赏下面这些案例时,留意一下他们如何以及为何使用矩形或正方形元素,会使得你思路大开。此处列举的方块元素,被用来对齐、组织、装饰、排列页面上的方与圆。在设计中使用方块元素有很多方法和原因。我们来详细了解一下。 使用方块布局的目的是什么? 或许这对你而言有点哲学和理论化,我们来看看别人选择方块布局的原因。(顺便提一句,...
标签: Web开发
有时看到一些论坛,左边是每个讨论区的名称,点击任意一个讨论区就可以在右部区域中看见相应讨论区的内容,不过左右部分是独立显示的,比如拖动左边的滚动条不会影响右侧的显示效果。其实这是在页面中利用了框架技术,因此可以把浏览器的显示空间分割为几个部分,每个部分都独立显示网页内容。而且把几个框架结合在一起构成框架集,能够让...

经验教程

798

收藏

89
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部