認識 Layer 的運作方式

進階 CSS 語法

第六篇
認識 Layer 的運作方式

原始 Layer & CSS 程式碼：
<DIV id=Layer1 style=" 
BACKGROUND-COLOR:#FFFF00; 
LAYER-BACKGROUND-COLOR: #FF00FF; 
POSITION: absolute; 
TOP: 210px; 
LEFT: 190px; 
WIDTH: 400px; 
HEIGHT: 40px; 
Z-INDEX: 1"> 
<IMG name=Image1 src="adv.gif" width="400" height="40"> 
</DIV> 

運用說明：
一、基本觀念：
Layer 是 Netscape 4.0 所發展出來的一項新功能，他和 Style Sheet 一樣具有階層式的排版效果。
您必需具備 HTML 及 CSS 基本語法基礎，才能有效學習。
Layer 與 CSS 最大不同在於，前者以背景設定，後者以文字排版為主。
簡單的說，Layer 就是一層一層的堆疊物件，大都用於將元件精確的定位。
二、基本用法：
Layer 是由 <LAYER>..相關屬性及參數設定..</LAYER> 標籤組成，並放於 <BODY> 與< font color="blue"></BODY> 內。
Layer 必需使用是 Netscape 4.0 Over Browser，所以 Internet Explorer 不能完成支援他的功能。
<NOLAYER>....</NOLAYER>，就是告訴非 Netscape 4.0 Browser 的使用者，您不支援本功能。
Layer 的屬性設定，是以 LEFT 來控制元件最左上角的水平距離( X 軸)。
以< font color="green">TOP 來控制元件最左上角的垂直距離( Y 軸)，單位為像素或百分比。
而 Width & Height 當然就是來控制元件本身的寬與高了，單位也是像素或百分比。
Layer 的 Bgcolor="十六進位或英文單字"，是背景顏色語法。
而 BackGround="圖檔檔名.副檔名"，是背景圖檔語法。
Visibility="SHOW/HIDE/INHERIT"(顯示/隱藏/繼成母Layer值)，主要是要表達顯示 Layer 與否。
座標定位 Z-index= N 在此表示Layer 的順序設定，位於第幾層的意思，第二層會蓋住第一層，依此類推。
他有兩個屬性，ABOVE (在...上面)、BELOW(在...下面)。
Name="名稱" 這是給 Layer 的命名 (類似 FRAMES 內 Name 的功能)。
他主要是用於與其他 Layer 或 JavaScript 產生連繫，俾設定層次的上或下。
Position="ABSOLUTE/RELATIVE/STATIC" 座標定位是採相對/絕對/原始碼位置(內定值)。
他必須與 TOP 及 LEFT 相互搭配使用。
每一個屬性與下一個屬性聯用時，均以分號 (：) 分隔便可。
三、如何讓 Internet Explorer Browser 也能使用並達接近效果呢？試試以下整合吧：
因為兩大瀏覽器的版面起始點不同。
所以我們必須在 BODY 內加入 MarginHeight="25" MarginWidth="25" (適用 NC ) 及 LeftMargin="0" TopMargin="0" (適用 IE ) 來調整全頁的實際版面位置。
背顏色設定部份也不同。
所以採 BACKGROUND-COLOR#FF00FF; (適用 IE )及 LAYER-BACKGROUND-COLOR #FF00FF; (適用 NC )來合併使用。
用 DIV 標籤來設定區塊，<DIV id=Layer1 style="屬性及參數"><IMG="...."></DIV>，來定義區塊及套用 CSS 語法。
註：DIV 標籤屬 HTML 3.2 以後的標籤，他可以定義一個區域成一個個體，區域內可容納各 HTML 元件 (文字、圖形 .. 等等)。
四、要瞭解 Layer 最好的辦法，就是發一些時間去嘗試不同的屬性與參數值。
五、請先練習這些，下次我們再深入介紹 Layer 的其他用法。
六、這是動態 Layer 範例 Go。

如何完整取得所有資料：
如果您想完整取得電子報內所有檔案資料，我們提供燒錄光碟片給您 Go 。
凡加入教學或教材會員者，均可獲得以下乙份完整的資料光碟。
詳細內容：語法教學、第一電子報、第二電子報、第三期電子報、網頁圖窟。

結論與建議：
本站所有報導資料，歡迎網友加入鏈結或轉載內容，惟請保留文章完整，並註明此引用來源，謝謝您的支持與配合。
本報每篇報導都花上 8 小時以上搜集、整理及撰稿，絕對值得初學者或想徹底學會 HTML 語法網友永久保存。
強烈建議您學會 HTML 語法，她真的簡單易學，懂了她您就能駕馭她，讓您使用所見即所得軟體更得心應手。
本報導屬於完全免費性質，索取教材資料屬個人自由意願，而回饋給您的光碟片，則是我們的誠意而已。
一篇保證前所未見的 HTML 教學課程，絕對是您學習 HTML 的好教材，強烈建議您進入實際體驗一下。
本電子報報導資料，未來將繼續每隔 30 日發表一次，以嘉惠更多想學會 HTML 網友，歡迎繼續訂閱。
本報導內容或資料，因限人力、時間，非教學會員，不接受任何疑惑解答，敬請見諒。