|
實現設計網頁的“圖層”精確定位
在製作網頁的時候,我們常常會提到層。這裡的層是指在Dreamweaver中,通過對它的應用來實現網頁物件在垂直方向互相重疊的效果,其做法很簡單,有不少網友在網頁中使用層便可以輕鬆實現,但你是否注意到當你改變顯示器解析度時,你的層還是在原來的位置上、網頁能夠自動地適應用戶設置的解析度嗎?我想如果你不知道層的絕對定位和相對定位的概念,你是做不出下拉式功能表效果的。
招數一:表格定位法
步驟1:打開Dreamweaver,新建一個頁面,使用快速鍵“Ctrl+Alt+T”插入一個兩行一列的表格,設置第二行的目的就是為了放置層,使其相對表格定位。輸入文字同時設置表格屬性
步驟2:將游標移入第二行表格中,在這行中插入一個層,打開其屬性面板,將L、T值刪除,使其為空。
這兩個參數絕對不能有數值,否則將不能實現層精確定位。當然這時的層參數已定,作為父層時該層是不能移動的,但可以使用游標改變其大小。
步驟3:將游標定義在父層中,再次插入一個層並設置層內容。當你使用F2打開層控制台時會看到位於父層底下的子層,作為子層是可以拖動的,因為它相對于父層定位。
步驟4:為主功能表設置滑鼠回應事件,顯示當滑鼠移到和離開該主功能表時層的顯示方式就可以了。F12預覽並改變解析度,看看是否你的子功能表沒有錯置。
招數二:CSS定位法
上述方法畢竟不是專業設計師的期望,我們可以做一個CSS相對定位的定義方式,將相對定位模型(比如表格)定義為這個CSS屬性。
步驟1:使瀏覽器以相對定位模型左上角作為原點,建立新的座標系。再在這個相對定位模型下級插入層,使之絕對於該相對定位模型定位。當然該層也是不可拖動的,改變其位置可以直接在其屬性面板上輸入Left Top的數值。
步驟2:按“Shift+F11”打開CSS Styles面板,點擊“New Style”按鈕,在彈出的New Style視窗中定義一個名稱為.pos的CSS屬性,並且選擇Make Custom Style的Type類型和This Document 0nl的Define類型,確認進入Style Defintion For .pos視窗,選取Positioning定義Type為relative確定。
步驟3:選取定義好的表格,右鍵點擊CSS Style面板中的.pos,彈出功能表中執行Apply命令即可。使該相對定位模型(表格)建立新的坐標系,只要我們在其中插入層,並設置層內容和主功能表的滑鼠回應事件就可以使層實現相對定位了。
以上兩招,大家不妨都試一試,若舉一反三的話,一定可以做出各種使用層且自動適應用戶解析度設置的網頁效果來!
|