避免在網站設計中使用框架頁

最近,我和一位客戶討論一個內部使用的網絡應用軟件,會議進行得很順利,直到他提及框架頁的使用。他選擇框架頁作為站點的版面設計,因為他要取代現有的VB程序。但是目前,框架頁的使用難以令人滿意,雖然我已經不記得最后一次編寫使用框架頁的程序的時間了,但我卻記得使用框架頁的那段艱難時光。在這篇文章中,我將向您解釋為什么要避免使用框架頁而考慮其它的設計方案。

 

 

基本概念

中.國站長站

 

在很多年前首次引入的時候,框架頁曾經是一個很酷的概念。我還記得在橫幅、導航和站點內容部分分別使用單獨的框架頁。即使您不熟悉框架頁的概念也沒有關系,其概念并不復雜,基本上,HTML框架頁允許您將瀏覽器窗口劃分為單獨的空間或框架。

 

 

還有框架的HTML元素主要用于基于框架的版面設計,框架元素定義了單獨的空間或框架集,這些框架頁包含在框架元素中,框架元素的行與列的屬性定義了框架頁的版面效果。列表A中的HTML代碼創建了一個示例框架集,網絡開發區的文檔將載入到左邊的框架頁,而同時Download.com網站將被載入到右邊的框架頁。 Www.Chinaz.com

以下為引用的內容:
<html>
<head>
<title>Frames</title>
</head>
<frameset cols="400, *">
<frame name="left" src="http://www.webjx.com/htmldata/2007-10-15/1192417401.html" SCROLLING="yes" NORESIZE>
<frame name="right" src="http://www.webjx.com/" SCROLLING="yes" NORESIZE>
<noframes><body>
This appears if frames aren't supported.
</body>
</noframes>
</frameset>
</html>


列表A Www^Chinaz^com

每個框架頁的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的頁面設計方案。

發表評論

(required)

This site uses Akismet to reduce spam. Learn how your comment data is processed.