摘要：首先介紹了浮動框架的應(yīng)用特點，然后結(jié)合實際的使用技巧介紹了在浮動框架中：可以制作與其它頁面之間的鏈接，設(shè)置浮動框架的滾動條及區(qū)域的顏色，根據(jù)需要可以設(shè)置浮動框架的自調(diào)高度，以及浮動框架在網(wǎng)頁設(shè)計的模板中同樣可以靈活應(yīng)用。在介紹這些應(yīng)用技巧的同時指出浮動框架在應(yīng)用中的缺點，那就是不能進行可視化地操作，只能由代碼編寫來執(zhí)行。

關(guān)鍵詞：網(wǎng)頁設(shè)計；浮動框架；錨記；自適應(yīng)高度；模板

中圖分類號：TP393.092 文獻標(biāo)識碼：A 文章編號：1007-9599 (2012) 09-0000-02

浮動框架也叫嵌入式框架或內(nèi)聯(lián)框架，是一種特殊的框架頁面。浮動框架就是在網(wǎng)頁中嵌入一個框架，可以自由控制窗口大小，可以配合表格隨意地在網(wǎng)頁中的任意位置插入窗口。通過鏈接可以在這個有限的浮動窗口中顯示理想的網(wǎng)頁效果。

一、浮動框架的應(yīng)用特點

正確使用浮動框架，可以給網(wǎng)站的創(chuàng)建帶來許多便利，比如在個人網(wǎng)站中，可以將留言內(nèi)容放在一個嵌入式框架里，這樣既方便又漂亮；也可以為框架定義一個名字，并在其中顯示鏈接網(wǎng)頁，這樣就實現(xiàn)了在各個頁面之間快速跳轉(zhuǎn)的目的。

盡管浮動框架可以插入到頁面中的任意位置，不過遺憾的是，在DreamweaverCS3中不能可能實現(xiàn)可視化地制作浮動框架，需要用手寫代碼方式來實現(xiàn)。

二、網(wǎng)頁上的對象超鏈接到嵌入的浮動框架

關(guān)鍵點是一定要給這個iframe命名。操作是。再把網(wǎng)頁上建立的超鏈接語句應(yīng)該寫為：xxx

語句中的URL用相對路徑較好，但也可以用絕對路徑，height表示高度， width表示寬度，在實際應(yīng)用可根據(jù)實際情況調(diào)整。是否顯示頁面滾動條用scrolling表示，有三個可用的參數(shù)為auto、yes、no，若省略了選項，則默認為auto。

三、浮動框架外面的元素鏈接框架內(nèi)的錨記

在上面制作的基礎(chǔ)上，仍然可以用超鏈iframe來做，例如：可參照以下的代碼來完成：

test

主要是 a標(biāo)簽的target屬性應(yīng)該是框架的名稱， target 屬性規(guī)定在何處打開鏈接文檔。另外如果需要連接到錨記的話需要加#錨記名稱，再比如說，那么就可以用test連接過去。而 標(biāo)簽的 href 屬性用于指定超鏈接目標(biāo)的 URL。

四、設(shè)置浮動框架滾動條的顏色

將以下這段CSS放在框架鏈接的頁面就可以看到效果了。至于顏色值按你的具體要求修改。

各條語句含義如下：

Crollbar-face-color:設(shè)定滾動條頁面顏色；

Scrollbar-highlight-Color:設(shè)定滾動條斜面和左面顏色；

Scrollbar-3Dlight-Color:設(shè)定滾動條上邊和左邊的邊沿顏色；

Scrollbar-darkshadow-Color:設(shè)定滾動條下邊、右邊邊沿顏色。

Scrollbar-shadow-Color:設(shè)定滾動條下斜面和右面顏色；

Scrollbar-arrow-Color:設(shè)定滾動條兩端箭頭顏色；

Scrollbar-track-Color:設(shè)定滾動條底版顏色；

五、設(shè)置浮動框架的自適應(yīng)高度

在使用iframe時經(jīng)常會遇到所調(diào)用的頁面在預(yù)覽時出現(xiàn)滾動或頁面不能完整顯示的情況，對整個頁面的美觀產(chǎn)生較大影響，此時可在“代碼”中添加下例中的代碼，問題就迎刃而解了。

比如網(wǎng)頁上有3個鏈接：鏈接1、鏈接2、鏈接3、和1個浮動框架：Iframetest。如果想通過這3個鏈接來改變浮動框架的高度，例如：點擊“鏈接1”就將Iframetest的高度設(shè)為110；點擊“鏈接2”就將Iframetest的高度改為230；點擊“鏈接3”就將Iframetest的高度改為350，這樣的效果該如何實現(xiàn)？

可以設(shè)置一個實例Iframe的自適應(yīng)高度來解決這個問題：

六、浮動框架應(yīng)用于模板中

首先制作一個帶有表格布局的網(wǎng)頁模板，設(shè)置可編輯區(qū)域時要不同于常規(guī)的類型，需要使用嵌入式浮動框架來實現(xiàn)。

（一）將可編輯區(qū)域設(shè)置為嵌入式浮動框架

1.將插入點置于要設(shè)置可編輯區(qū)域的單元格中，單擊文檔工具欄中的“拆分”按鈕，在文檔窗口上方打開代碼視圖，單擊“布局”插入欄中的“iframe”按鈕，在單元格中插入代碼。

2.在

3.接著單擊標(biāo)簽選擇器中

（二）應(yīng)用模板創(chuàng)建網(wǎng)站浮動框架網(wǎng)頁

創(chuàng)建網(wǎng)站網(wǎng)頁主要是制作可編輯區(qū)域，此處就是嵌入式浮動框架中的內(nèi)容。例如我們首先要制作一個簡單的網(wǎng)頁，然后將其設(shè)置為嵌入式浮動框架的起始頁，完成此網(wǎng)頁的創(chuàng)建。

在站點中新建網(wǎng)頁文檔。選擇“文件”|“新建”，打開“新建文檔”對話框，在左側(cè)的“文檔類型”列表中選擇“模板中的頁”，在“站點”中選擇當(dāng)前的站點，在“站點‘XX’的模板”列表中選擇“md.dwt”，然后完成創(chuàng)建基于模板的網(wǎng)頁，可保存為“ifpage.html”網(wǎng)頁文件。

（三）基于浮動框架模板的網(wǎng)頁應(yīng)用

在利用模板創(chuàng)建的“ifpage.html”網(wǎng)頁中，只有浮動框架可編輯區(qū)域在此頁中才能被編輯修改，如何才能在此浮動框架中展示內(nèi)容呢？

假如已經(jīng)設(shè)置好了另外的一個網(wǎng)頁“page1.html”，這時打開“ifpage.html”，打開代碼視圖，在

正確使用浮動框架可以給網(wǎng)站的創(chuàng)建帶來許多方便，網(wǎng)頁設(shè)計者不需要單獨增加復(fù)雜的框架集文檔，直接在可以在瀏覽器窗口中嵌套子窗口中來顯示網(wǎng)頁，而且每個浮動框架都可以獨立地定義，而不僅僅局限在一個瀏覽器窗口，可以在有限的空間里放無限的東西來展示網(wǎng)頁豐富多彩的魅力。

參考文獻：

[1]黃世吉等.Dreamweaver 網(wǎng)頁制作案例教程（CS3版）[M].北京:航空工業(yè)出版社，2010

[2]趙靜宇.利用浮動框架與表格結(jié)合設(shè)計網(wǎng)絡(luò)課件的探索[J].中國醫(yī)學(xué)教育技術(shù).2007，21(3)

[3]盧成均.內(nèi)聯(lián)框架(Iframework)在網(wǎng)頁設(shè)計中的一種應(yīng)用[J].重慶文理學(xué)院學(xué)報(自然科學(xué)版).2006，5(2)

[4]吳智君，丘昊.淺析網(wǎng)格系統(tǒng)在網(wǎng)頁設(shè)計中的重要性[J].計算機光盤軟件與應(yīng)用，2010，5

[作者簡介]

田彥(1969.12-)，女，山東省淄博市高新技術(shù)開發(fā)區(qū)人，高級講師，研究生，從事計算機應(yīng)用技術(shù)與網(wǎng)絡(luò)技術(shù)的教學(xué)工作。