Web頁面設計之頁面框架的使用

2021-08-31 08:25:12 字數 3171 閱讀 6386

web頁面設計之頁面框架的使用

web頁面設計之頁面框架的使用,web,框架,frameset,frame,iframe,

框架是頁面設計中不可缺少的元素之一,本文詳細介紹了html語言中頁面框架的實現方法,對於其各個屬性,給與了詳細的介紹並且給出使用例項。相信在閱讀本文之後會使您對使用框架規劃頁面有乙個完整,全面地認識。

在html頁面中使用框架,通常會用到如下標記:

下面對框架以及每一標籤的使用進行詳細介紹:

■ 框架概念 :

所謂框架便是網頁畫面分成幾個框窗,同時取得多個 url。只 要 即可,而所有框架標記 要放在乙個總起的 html 檔,這個檔案只記錄了該框架 如何劃分,不會顯示任何資料,所以不必放入 標記,瀏覽這框架必須讀取這檔 案而不是其它框窗的檔案。是用以劃分框窗,每一框窗由乙個 標 記所標示,必須在 範圍中使用。如下例:

此例中 把畫面分成左右兩相等部分,左便是顯示 up2u.html,右邊則會顯示 me2.html 這檔案,標記所標示的框窗永遠是按由上而下、由左至右的次序。

本節與 composer 教室的【運用框架】大部分相同,只是本節增加了內容及較為詳細,正 如其它篇章一樣並不會提及網頁製作工具,若饋下學會了 html 相信你亦不會選用 composer , frontpage 一類的工具了。

■ : ▲top

稱框架標記,用以宣告html檔案為框架模式,並設定視窗如何分割。

則只是設定某乙個框窗內的引數屬性。

引數設定:

例子:cols="90,*"

垂直切割畫面(如分左右兩個畫面),接受整數值、百分數, * 則代表占用餘下空 間。數值的個數代表分成的視窗數目且以逗號分隔。例如 cols="30,*,50%" 可以 切成三個視窗,第乙個視窗是 30 pixels 的寬度,為一絕對分割,第二個視窗是當 分配完第一及第三個視窗後剩下的空間,第三個視窗則佔整個畫面的 50% 寬度 為 一相對分割。您可自己調整數字。

rows="120,*"

就是橫向切割,將畫面上下分開,數值設定同上。唯 cols 與 rows 兩引數盡量 不要同在乙個 標記中,因 netacape 偶然不能顯示這類形的框架,盡 採用多重分割。

frameborder="0"

設定框架的邊框,其值只有 0 和 1 , 0 表示不要邊框, 1 表示要顯示邊框。(避 免使用 yes 或 no )

border="0"

設定框架的邊框厚度,以 pixels 為單位。

bordercolor="#008000"

設定框架的邊框顏色。

framespacing="5"

表示框架與框架間的保留空白的距離。

引數設定:

例子:src="a.html"

設定此框窗中要顯示的網頁檔案名稱,每個框窗一定要對應著乙個網頁檔案。你可 使用絕對路徑或相對路徑,有關此兩者詳見於【鏈結高階】。

name="top"

設定這個框窗的名稱,這樣才能指定框架來作鏈結,必須但任意命名。

frameborder=0

設定框架的邊框,其值只有 0 和 1 , 0 表示不要邊框, 1 表示要顯示邊框。(避 免使用 yes 或 no )

framespacing="6"

表示框架與框架間的保留空白的距離。

bordercolor="#008000"

設定框架的邊框顏色。顏色值請參考【html 剖析】。

scrolling="auto"

設定是否要顯示卷軸,yes 表示要顯示卷軸,no 表示無論如何都不要顯示, auto是視情況顯示。

noresize

設定不讓使用者可以改變這個框框的大小,亦沒有設定此引數,使用者可以很隨 意地拉動框架,改變其大小。

marginhight=5

表示框架高度部份邊緣所保留的空間。

marginwidth=5

表示框架寬度部份邊緣所保留的空間。

以下是一些例子:(與 composer 教室的【運用框架】相同)

例子 html code

例子 html code

例子 html code

例子 html code

例子 html code

■ : ▲top

當別人使用的瀏覽器太舊,不支援框架這個功能時,他看到的將會是一片空白。為了避免 這種情況,可使用 這個標記,當使用者的瀏覽器看不到框架時,他就會看 到 與 之間的內容,而不是一片空白。這些內容可以是提醒 瀏覽轉用新的瀏覽器的字句,甚至是乙個沒有框架的網頁或能自動切換至沒有框架的版本 亦可。

應用方法:

在標記範圍加入 標記,以下是乙個例子:

很抱歉,饋下使用的瀏覽器不支援框架功能,請轉用新的瀏覽器。

若瀏覽器支援框架,那堋它不會理會 中的東西,但若瀏覽器不支援框架,由 於不認識所有框架標記,不明的標記會被略過,標記包圍的東西便被解讀出來,所以放在 範圍內的文字會被顯示。

■ : ▲top

這標記只適用於 ie。 它的作用是在一頁網頁中間插入乙個框窗以顯示另乙個檔案。它是 乙個圍堵標記,但圍著的字句只有在瀏覽器不支援 iframe 標記時才會顯示,如一樣,可以放些提醒字句之類。通常 iframe 配合乙個辨認瀏覽器的 j***a script 會較好,若 j***ascript 認出該瀏覽器並非 internet explorer 便會切換至另一版本。

的引數設定如下:

例子:

src="iframe.html"

欲顯示於此框窗的檔案**除檔名稱,必要加上相對或絕對路徑。

name="test"

此框窗名稱,這是鏈結標記的 target 引數所 要的,

align="middle"

可選值為 left, right, top, middle, bottom,作用不大

width="300" height="100"

框窗的寬及長,以 pixels 為單位。

marginwidth="1" marginheight="1"

該插入的檔案與框邊所保留的空間。

frameborder="1"

使用 1 表示顯示邊框, 0 則不顯示。(可以是 yes 或 no)

scrolling="yes"

使用 yes 表示容許捲動(內定), no 則不容許捲動。

例子: 原始碼

很抱歉,饋下使用的瀏覽器並不支援 iframe,不能正常瀏覽我的網頁。

Web頁面測試框架

本專案為web頁面測試框架,可適用於各類web頁面自動測試專案,並為測試結果輸出報告。requirements內容 adbutils 0.6.2 anytree 2.7.2 apkutils 0.6.6 apkutils2 1.0.0 atomicwrites 1.3.0 attrs 19.3.0 ...

Axure RP 使用示例 頁面框架

axure rp是乙個快速繪製wireframe和prototyping的工具,主要用來定義應用程式的需求與規格,以及設計使用者介面與功能。本文介紹如何使用axure rp pro 6建立web頁面框架。在頁面框架中一般分為幾個區域,普通的頁面包含頭部,底部,選單和主視窗。效果如下 點選單後主視窗內...

後端開發工程開發Web頁面框架

layui是一款採用自身模組規範編寫的前端 ui 框架,遵循原生 html css js 的書寫與組織形式,門檻極低,拿來即用。其外在極簡,卻又不失飽滿的內在,體積輕盈,元件豐盈,從核心 到 api 的每一處細節都經過精心雕琢,非常適合介面的快速開發。收費 1600永久授權 官網位址為 jquery...