最近，我和一位客戶討論一個內(nèi)部使用的網(wǎng)絡(luò)應(yīng)用軟件，會議進行得很順利，直到他提及框架頁的使用。他選擇框架頁作為站點的版面設(shè)計，因為他要取代現(xiàn)有的VB程序。但是目前，框架頁的使用難以令人滿意，雖然我已經(jīng)不記得最后一次編寫使用框架頁的程序的時間了，但我卻記得使用框架頁的那段艱難時光。在這篇文章中，我將向您解釋為什么要避免使用框架頁而考慮其它的設(shè)計方案。
基本概念
在很多年前首次引入的時候，框架頁曾經(jīng)是一個很酷的概念。我還記得在橫幅、導(dǎo)航和站點內(nèi)容部分分別使用單獨的框架頁。即使您不熟悉框架頁的概念也沒有關(guān)系，其概念并不復(fù)雜，基本上，HTML框架頁允許您將瀏覽器窗口劃分為單獨的空間或框架。
還有框架的HTML元素主要用于基于框架的版面設(shè)計，框架元素定義了單獨的空間或框架集，這些框架頁包含在框架元素中，框架元素的行與列的屬性定義了框架頁的版面效果。列表A中的HTML代碼創(chuàng)建了一個示例框架集，網(wǎng)絡(luò)開發(fā)區(qū)的文檔將載入到左邊的框架頁，而同時Download.com網(wǎng)站將被載入到右邊的框架頁。 Www.Chinaz.com
| 以下為引用的內(nèi)容： <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屬性則說明了該框架頁不能被重新設(shè)定大小，因而其寬度是靜態(tài)的；而noframes元素則提供了在不支持框架的瀏覽器中的顯示效果；在框架頁上除了這些之外就沒有其它的選項了，您可以參考相關(guān)的HTML資源來獲取更多信息。
在上個例子中，將兩個網(wǎng)站載入到框架頁中并不是最實際的應(yīng)用，框架頁通常用于將瀏覽窗格放置在左側(cè)或著頂端，而內(nèi)容放置在右側(cè)或者底部，通過設(shè)定框架頁的寬度（或者高度）并載入所需要的頁面，這一功能很容易實現(xiàn)。框架頁的概念很簡單，但是大部分網(wǎng)絡(luò)開發(fā)人員都蔑視這一功能。
缺陷
近來，框架頁的使用難以令網(wǎng)絡(luò)開發(fā)社區(qū)感到滿意，實際上，在XHTML 1.1規(guī)范中，已經(jīng)不再支持框架頁了，它已經(jīng)被XFrames所取代。所以這是放棄使用框架頁的一個原因，但目前被支持的標準怎么樣呢？以下列出了框架頁沒有被廣泛使用的原因： 站長.站
很多網(wǎng)絡(luò)開發(fā)人員從哲理的角度討論了框架頁，它們認為框架頁的使用違反了互聯(lián)網(wǎng)的基本概念，因為這將造成大量的獨立頁面無法被鏈接。
雖然大部分網(wǎng)絡(luò)瀏覽器可以依照設(shè)計顯示出框架頁，但是對于非傳統(tǒng)的瀏覽器平臺，比如手機、掌上設(shè)備等，卻沒有實現(xiàn)此功能，即使基于框架頁的設(shè)計方法是有用的，但在這些平臺上卻造成了混亂。
搜索引擎在處理使用框架頁管理的網(wǎng)站時會遇到麻煩，很多搜索引擎，比如Google，會跳過框架頁內(nèi)容而對沒有框架的內(nèi)容進行索引。
對于預(yù)先定義的基于框架頁的區(qū)域，編寫代碼和頁面設(shè)計都可能成為問題，如果頁面布局設(shè)計得很糟糕，在單獨瀏覽這些頁面的時候，就會造成麻煩。
對于用戶而言，使用框架頁站點的瀏覽體驗可能令人惱怒。在將站點加入收藏夾時，通常會收錄整個框架集而相關(guān)內(nèi)容卻被忽略了，因此用戶很難找到所需的內(nèi)容。另外一個問題是打印，不過好在大部分瀏覽器都允許用戶選擇打印整個框架集或者單獨的框架頁。
框架頁還導(dǎo)致了很多可及性（accessibility）問題，含有框架頁的視覺布局很難轉(zhuǎn)換到非視覺化的瀏覽器中，一個好的準則是在所有的頁面元素上提供文字說明，并附加對不支持框架頁的瀏覽器的說明。一份在線指導(dǎo)提供了更多的細節(jié)。
替代設(shè)計
框架頁是在CSS出現(xiàn)之前引入到互聯(lián)網(wǎng)的，現(xiàn)在，CSS可以作為替代框架頁的設(shè)計方案，上文中的例子可以使用CSS重新編寫，列表B展示了使用CSS的代碼。
| 以下為引用的內(nèi)容： <!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加上顏色進行區(qū)分，您可以使用CSS來創(chuàng)建更加強壯的頁面布局。雅虎的用戶界面庫提供了一個很棒的例子，您還可以使用AJAX來改進數(shù)據(jù)的載入，這也是通常使用框架頁的原因之一（當然框架頁不需要如此頻繁地刷新）。 中.國.站長站
另外一個表示選擇
在網(wǎng)絡(luò)開發(fā)者的眼中，框架頁已經(jīng)是歷史的遺跡了，但它確實曾經(jīng)像現(xiàn)在的CSS一樣為人們提供了更好的選擇，我希望聽到您對框架頁的意見，請在文章討論區(qū)分享您的想法和經(jīng)驗。
正如您所思考的一樣，我將會勸說我的客戶使用含有CSS的頁面設(shè)計方案。
