浮動框架在網(wǎng)頁制作中的使用技巧

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

關鍵詞：網(wǎng)頁設計；浮動框架；錨記；自適應高度；模板

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

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

一、浮動框架的應用特點

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

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

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

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

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

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

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

test

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

四、設置浮動框架滾動條的顏色

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

各條語句含義如下：

Crollbar-face-color:設定滾動條頁面顏色；

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

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

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

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

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

Scrollbar-track-Color:設定滾動條底版顏色；

五、設置浮動框架的自適應高度

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

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

可以設置一個實例Iframe的自適應高度來解決這個問題：

六、浮動框架應用于模板中

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

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

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

2.在

3.接著單擊標簽選擇器中

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

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

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

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

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

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

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

參考文獻：

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

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

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

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

[作者簡介]

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