框架技術在網頁設計中的應用淺析

摘 要：本文章分析了框架技術在網頁設計中的優勢與劣勢，并提出了相應的優化解決方案。恰當地運用框架技術，可對網頁的設計起到事半功倍的效果。

關鍵詞：框架技術 iframe 網頁設計

框架是網頁制作中用來定位或布局網頁的一項重要技術，他的主要作用是用來增強網頁的布局和導航功能。恰當地運用框架技術可以很好地提升網頁的設計效果，但如果使用不當，則會給整個網站造成不良的影響。

1、框架技術在網頁設計中的應用

在網頁制作中，經常會要求我們在設計時要達到這樣的效果:點擊左邊相應的導航項時，能夠在右邊分別顯示相應的正文內容，那么很多設計者采用框架技術來設計此效果的網頁時，一般是通過創建如圖1所示的框架結構加超鏈接技術來實現。其基本過程為:首先將各導航項所指向的正文內容分別保存為一個個獨立的網頁；然后設計如圖1所示的框架結構；最后為各導航項設置超鏈接(目標文件為所要鏈接到的網頁，目標窗口為右框架名稱Rightframe即可。

使用這種框架結構的網站存在著很多的優勢，如:

(1)使用框架既可以讓網頁的風格統一，又能加快瀏覽速度。在瀏覽頁而時，不需要將頁面中含框架的窗口都重新加載，對于導航或不動的窗口，在瀏覽網站時只需加載一次，這樣能大大地加快瀏覽速度。

(2)每個框架都具有自己的滾動條(如果內容太大，在窗口中顯示不下)，訪問者可以獨立滾動這此框架。例如，當框架中的內容頁面較長時，如果導航條位于不同的框架，那么向下滾動到頁而底部的訪問者就不需要再滾動回頂部來使用導航條。

(3)對源代碼起到了保護作用。當訪問者點擊“查看”一“源代碼”時將看不到網頁真正的源代碼，只能看到以下形式的代碼:

(4)頁而的更新與維護較為方便。在更新時只需對各框架中的源文件進行編輯即可，無需更改整個布局。

但是，使用框架技術設計網頁也存在一定的弊端，如:

(1)各個帶有框架的頁面的URL不顯顯示在瀏覽器中，因此訪問者可能難以將特定頁而設為收藏，因為收藏到的網頁是整個框架集的URL地址，而不是當前某個框架頁的地址。

(2)對導航進行測試可能很耗時間，因為導航需要決定鏈接在哪一個框架頁，采用哪種鏈接方式，要經過反復的調試。

(3)不利于復雜頁面的排版。框架內網頁的位置處理較麻煩。

(4)不方便推廣和收錄。大多數的搜索引擎都無法識別網頁中的框架，或者無法對框架中的內容進行遍歷或搜索，這將導致網站的級別很難得到提升。

2 框架技術在網頁設計中的優化處理

對于上述問題，我們可以通過以下方法解決:

2.1使用嵌套框架iframe

iframe也是框架的一種，但它是嵌套在網頁內部使用。

圖1所示的網頁可使用嵌套框架iframe方式設計，運用這種iframe嵌套框架后，整個網頁用表格table來布局，各導航項的鏈接目標窗口設為iframe的名稱，各導航項所要鏈接的內容設計成一個個獨立的網頁文件保存。在表格中應用iframe，即發揮了表格布局網頁的強大功能，又使得導航項不用每次加載，大大提高了瀏覽速度；iframe也有自己的滾動條，方便瀏覽者瀏覽；對復雜頁面的排版變得簡單易行，只要控制靈活多變的表格就可以達到目的；

2.2搜索問題的處理

框架中的內容在后臺代碼中是無法被體現的，而對于那此主要搜索引擎的搜索程序來說，如google的GoogleBot和Fresh-bot，其設計思路都是完全忽略某些HTML代碼，轉而直接鎖定網頁上的實際內容進行索引。這樣一來，搜索程序在那此一般性的框架網頁上根本找不到要搜索的內容。這是由于那此具體內容都被放到我們稱之為“內部網頁”中去了。

對于網站的任何頁面，真實的頁而內容才是達到成功優化的關鍵。因此，如果要使搜索程序能夠對使用了框架的網頁進行有效的索引，就應該在網頁種有效地提供含有豐富關鍵字和關鍵短語的重要文字和內容，這樣才可以有效地幫助網站在SERP(搜索引擎搜索結果頁)中取得較高的排名(頁面等級)。

而應用了iframe的頁面因整個網頁用表格來布局，網頁代碼中含有一些豐富的關鍵字和關鍵短語，有利于網頁被搜索查詢。當訪問者點擊“查看”一“源代碼”時將看到比使用frameset更豐富的關鍵字和短語，代碼如下：

"第一章、初識C#2005

"第二章、控制臺與窗體應用程序

"第三章、C#2005語言基礎

"第四章、順序結構與選擇結構

"第五章、循環結構

"第六章、方法

"第七章、類與對象

"第八章、數組與集合類

結束語

在網頁設計中，我們只要合理的應用框架技術，就可以制作出風格統一的網頁以及方便簡捷的導航，達到非框架頁達不到的實用效果。

參考文獻:

[1]趙豐年.網頁制作教程[M].北京:人民郵電出版社，2003.

[2]張宏偉.網頁設計基礎教程與上機指導[M].北京:清華大學出版社，2004.

[3]w3school在線教程http://www.w3school.com.cn