以子頁框 (frameset) 方式呈現出的網頁畫面，真教人又愛又恨，如果運用得當，則瀏覽便 利流暢，一切一目了然。但如果運用不當，則往往教人看得一個頭兩個大，甚至連搜尋引 擎都有看沒有懂！不知從何開步走 ...。 你打算使用子頁框來排列組合網站內容嗎？我們一起來看看子頁框的優點、缺點、以及如 何在適當時機下，排列組合出美美的子頁框。
使用子頁框的好處
使用子頁框最明顯的好處，在於提供瀏覽者既清楚又方便的導覽系統。例如：其中一個子頁框裡置入導覽列，另一個子頁框裡呈現出相對應的內容。如果導覽列裡的選項很多，瀏 覽著可以分別使用各自的捲軸，來來回回瀏覽、點選有興趣的項目。如此使得個別子頁框 的內容一目了然，又免除了每點按一次，導覽列裡的（大量）圖片得重新下載、重新在螢 幕上重繪成形的等待之苦。
-- 右邊子頁框裡置入導覽列，左邊子頁框裡呈現出對應內容，一目了然。
-- 版權歸屬 Nikka Costa 網站：cynthiavonbuhler.com/
子頁框的缺點 -- 設計者觀點
很多專業網頁設計者盡量不選擇子頁框的網站架構，因為使用子頁框有其明顯缺點：
-- 增加複雜性： 更多的 HTML 檔需要維護，而在超連結的設計上，又要多考慮 target 問題。如果動線設 計得不夠縝密，往往有可能在一個子頁框裡，又再出現另外一整組的子頁框組合，於是畫 面被分割得破破碎碎，一大堆條條框框。
-- 很難對齊： 在不同的子頁框裡若想要精準對齊圖形，非常困難。
-- 很難檢索： 搜尋引擎不認識子頁框的架構，因此很難檢索以子頁框組合而成的網頁。設計者得特別在 此下工夫，以利搜尋引擎做檢索。
-- 測試耗時耗力： 在子頁框的網站架構裡，瀏覽動線變得更複雜多變。設計者在測試時，需耗費更多的時間 與心思。
子頁框的缺點 -- 瀏覽者觀點
很多瀏覽者厭惡含有子頁框的網站，為什麼呢？
-- 難為「我的最愛」： 瀏覽者往往很難正確儲存「我的最愛」網址，大概每次都得從一開始的第一階層畫面組合 開始瀏覽。
-- 看得一個頭兩個大： 一些設計不良的子頁框組合反而更加長下載時間、更容易讓人迷路、更帶來資訊超載的壓 迫感、更令人想逃離無謂的條條框框。
-- 廣告疲勞轟炸： 子頁框裡恆常呈現著閃動不停的廣告，無法以捲軸捲開，大力摧殘瀏覽者的眼睛。
勿忘文件 Title
其實 <meta> 標籤並非萬能，反而在 <noframes> 處詳加敘述網頁內容，標示上大標題 <h1>、超連結，較有助於搜尋引擎檢索（在 Dreamweaver 裡，執行 Modify / Frameset / Edit NoFrames Content，即可加入 <noframes> 的敘述）。
但另外還有個更具效力的方法：在每一個 HTML 文件裡，詳細標明它的標題 Title。加入 Title 的方法：在 Dreamweaver 裡執行 Modify / Page Properties。HTML 文件裡的標題 Title 就好比印在書封面上的書名，你想找有關什麼主題的書，最快 速確實的方法，就是在書架上掃描包含有某一關鍵字的書名標題。
因此我們在給予每一網頁 Title 時，雖力求簡明扼要，但也不可遺漏重點，別光只是淡淡 寫著：「兩隻老虎首頁」，這在搜尋引擎眼裡，得分實在不高。但如果改成：「兩隻老虎 首頁：歡迎免費下載 XML eBook、如何成為 Adobe 認可 Photoshop 專家 eBook、還有許 多網頁設計、Flash 應用文章」，如此將你的網站主旨、或各頁重點內容，清楚扼要的寫 入各頁 Title 裡，你的網站就不會平白受損，落後於搜尋排名。
千萬別以為：反正是嵌入的子頁框，瀏覽者又看不到 Title，就偷懶不寫了。各大搜尋網站 都將網頁 Title 列為極重要的檢索參考呢！
按一下，變兩框！
如果你的網站資料豐富，而要介紹的產品也具相當複雜性，需同時伴隨更新兩個（以上） 子頁框內容，才足以清楚傳達你的產品資訊，這時你可使用 Dreamweaver 裡的「Go To URL」指令。此外，這種「按一下，變兩框」的手法也常被運用於想大力促銷廣告的網站 ，隨著網頁內容的變化，搭配呈現最相關適切的廣告，而且廣告會一直呈現在畫面上，不 會被捲軸捲開。
-- 瀏覽者點按左框的超連結後，會同時引發右邊上下兩框的內容更新。
在 Dreamweaver 裡的作法：
Step 1：選擇三框版型： 在 Insert Bar 裡點按 Frames 標籤。挑選包含有三個子頁框的版型。
-- 先設定好含有三個子頁框的版型。
Step 2：為個別頁框命名： 先叫出 Frames 工作面板：執行 Windows / Others / Frames，點按 Frames 工作面板裡的 各框，再配合 Property 工作面板，為每一子頁框取好名字。命名時，要以英文，中間不 可包含空白格。
-- 為每一子頁框取好名字。
Step 3：安排超連結「#」： 在網頁裡鍵入文字、或置入一個圖檔，當做可點按的超連結。在 Property 工作面板裡， 設定此超連結指向「#」。
-- 設定超連結指向「#」。
Step 4：設定「Go To URL」： 在 Behavior 工作面板裡，按下「＋」按鈕，選擇「Go To URL」指令。
-- 下指令「Go To URL」。
Step 5：更新第一個子頁框： 先選擇你希望瀏覽者點按超連結之後，會更新內容的第一個子頁框名稱，在「URL」處指 定新內容的資料來源。
-- 設定更新第一個子頁框的內容。
Step 6：更新第二個子頁框： 接著，選擇你希望同時更新內容的第二個子頁框名稱，在「URL」處指定另外一 HTML 檔 ，為第二個子頁框的新內容來源。
-- 同時變化第二個子頁框的內容。
隱形頁框妙處多
隱形的子頁框瀏覽者表面上是看不到的，既然看不到，為什麼還要多此一舉，徒增複雜度 ？原因在於我們常常可以在隱形子頁框裡動些手腳，像是加入背景音樂，於是當瀏覽者在 100% 可見的頁框裡換頁時，背景音樂仍可繼續不間的播放。此外在隱形頁框裡也常被放 入程式碼，藉此呼應、控制可見頁框裡的內容，像是在上一期我們介紹的 Flash 購買寵物 網站，即是利用 100% 與 0% 的頁框組合，並搭配 Javascript、Actionscript，而達成 Flash 電影裡「無縫」平順的回上一頁動作。
以下示範隱形頁框裡加入背景音樂的作法（以下所有範例，均利用 Dreamweaver 完成） ：
Step 1：加入聲音檔： 先在 Insert Bar 裡點按 Frames 標籤，挑選子頁框的版型。之後點按 Media 標籤，點按 Plug-in 按鈕，加入聲音檔案。建議使用 MP3 或 MIDI 格式，檔案 size 較小。
-- 點按 Media 標籤，點按 Plug-in 按鈕，加入聲音檔。
Step 2：設定可見的頁框佔據 100%： 在另一個可見的頁框裡安排內容，然後叫出 Frames 工作面板：執行 Windows / Others / Frames，點按 Frames 工作面板裡打算呈現出來的子頁框（下框），在 Property 工作面 板裡，設定其佔據空間 100% 。
-- 設定可見的頁框佔據頁面空間 100%。
Step 3：設定隱形頁框的相對值： 點按 Frames 工作面板裡包含有音樂的子頁框（上框），在 Property 工作面板裡，設定其 佔據空間為「Relative」。意指畫面上還剩多少相對空間，就都分配給我吧！於是在扣掉 100% 的空間後，剩下 0% 的相對空間，就分配給這個包含有音樂的子頁框。
由於這個 0% 的子頁框一直固定存在著，瀏覽者雖看不到，但卻聽得到。即使下框內容不 斷更換，但音樂卻不會因此而受干擾、間斷重來。
強迫在「頁框組合」下觀看
有些網頁的內容設計，必須搭配另一個特定的子頁框一起觀看，才比較清楚達意，而瀏覽 者也才有超連結的活動空間。但有時透過搜尋網站的搜尋結果，瀏覽者會連結到一頁「落 單」的頁面，為了幫助這種原本不該「獨處」的頁面，我們可使用「Find Parent Frameset」指令，幫助這些「落單」的頁面，強迫回到「頁框組合」下觀看。
其實，這種「強迫頁框」的手法，也常被運用於想大力促銷廣告的網站，瀏覽者無論是使用 Netscape 瀏覽器裡的 This Frame / Show Only This Frame 指令，想逃離廣告子頁框，或 者直接鍵入真正含有內容的網址，都無法逃脫「強迫頁框」的作用，依然被帶回原先設計 好的「頁框組合」畫面。作法：
Step 1：設定兩個子頁框： 做出含有兩個子頁框的組合。在 Property 工作面板裡，分別將子頁框命名為：nav、main 。
-- 分別將子頁框命名為：nav、main。
Step 2：下載「Find Parent Frameset」： 執行 Help / Dreamweaver Exchange，連結到 Macromedia Dreamweaver Exchange 網站 。 搜尋一個名叫「Find Parent Frameset」的指令，將它下載下來，Dreamweaver 的 Extension Manager 會自動將此指令安裝起來（如果你沒有最新版本的 Extension Manager，記得要先下載、安裝）。 關閉你的 Dreamweaver 程式，再將它重新啟動，以便讓剛才安裝的指令生效。
Step 3： 打開「不該落單獨處」的網頁（最好不要在「子頁框組合」的畫面裡打開，而是單獨開啟 此網頁），執行 Command / Find Parent Frameset，設定此網頁在理想狀況下，應該呈現 於哪一個子頁框裡（亦即鍵入此子頁框名稱）。
在第二個空格裡，設定「子頁框組合」的檔案，亦即將左框與右框組合起來的 HTML 檔。
-- 設定強迫在「頁框組合」下觀看，要讓內容應呈現於那一框 (main)？
Step 4： 重複 Step 3，在另一「不該落單獨處」的網頁裡，也執行 Command / Find Parent Frameset，設定此網頁在理想狀況下，應該呈現於哪一個子頁框裡。
-- 設定另外一頁內容，應呈現於另外一個子頁框裡 (nav)。
強制去除頁框組合
與「強迫在頁框組合下觀看」的相反模式是「強制去除頁框組合」，這是為了避免自己辛 苦製作出來的網頁，被別人的網站子頁框拼湊在一起，呈現於別人的條條框框之下。作法 ：
Step 1：下載「Bust Frames」： 執行 Help / Dreamweaver Exchange，連結到 Macromedia Dreamweaver Exchange 網站 。
搜尋一個名叫「Bust Frames」的指令，將它下載下來，Dreamweaver 的 Extension Manager 會自動將此指令安裝起來（如果你沒有最新版本的 Extension Manager，記得要 先下載、安裝）。
關閉你的 Dreamweaver 程式，再將它重新啟動，以便讓剛才安裝的指令生效。
Step 2： 打開你想要「強制去除頁框組合」的網頁，在網頁的最左下角按下 <body> 標籤，在 Behavior 工作面板裡，按下「＋」按鈕，選擇「Bust Frames」指令即可。 你可以故意在子頁框的組合下，試著去連結這個「Bust Frames」網頁，看看其效力如何 。
