浮動框架在網頁制作中使用技巧

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

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

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

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

一、浮動框架的應用特點

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

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

二、網頁上的對象超鏈接到嵌入的浮動框架

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

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

三、浮動框架外面的元素鏈接框架內的錨記

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

test

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

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

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

html{

scrollbar-face-color:# #00CCFF;

scrollbar-highlight-color:#FFCC00;

scrollbar-3dlight-color:#336666;

scrollbar-darkshadow-color:#666633;

scrollbar-Shadow-color:#666633;

scrollbar-arrow-color:#336666;

scrollbar-track-color:#FFFF00;

}

各條語句含義如下：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1.將插入點置于要設置可編輯區域的單元格中，單擊文檔工具欄

總結

以上是生活随笔為你收集整理的html网页制作浮动框架,浮动框架在网页制作中使用技巧.doc的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。