利用圖層技術制作網(已修改)
2025-01-27 01:33 本頁面
【正文】 第九章 利用圖層技術制作網頁層是一種HTML頁面元素，可以將它放置在頁面的任意位置。層可以包含文本、圖像或其他可放在HTML文檔正文中的任何內容。本章介紹在網頁制作中圖層技術的應用。通過本章的學習，讀者應該掌握以下內容：認識圖層圖層的基本操作圖層與表格的操作利用圖層制作動畫 認識圖層有網頁創(chuàng)作經歷的人可能都有過這樣的經歷：在網頁中，控制文字和對象的位置實在是太困難了，有限的HTML標記和煩瑣的源代碼極大限制了用戶對網頁內容的控制能力，為了實現文本和對象在頁面中的定位，人們不得不采用其他一些特殊手段，比如利用表格來擺放文本和對象。當頁面元素較多，位置較復雜時，單純利用表格定位就有些不方便了。在Dreamweaver中，通過圖層可以實現對頁面元素的精確定位，其友好的可視化特性能夠幫助用戶在文檔中輕松地創(chuàng)建圖層、定位文檔內容，不僅避免了煩瑣的源代碼輸入，而且創(chuàng)建出的頁面內容定位效果也非常簡潔、高效。什么是層呢？層是網頁中用來放置文本、圖像、動畫、表單、插件等網頁元素的載體。沒有層的網頁像一個平面，即由x軸和y軸組合成的二維空間，而層所確定的區(qū)域是在z軸上，它擺脫了二維平面的束縛，形成了一個三維空間結構，如圖91所示。同時，層與層之間的關系也由z軸的坐標來決定。一般來說，默認后建立的層的z值大，先建立的層z值小，z值大的層可以覆蓋z值小的層，當然也可以通過調整來改變先前層的疊放次序。層不僅可以有特殊的位置，也可以有豐富的內容。層可以包含文字、圖像、表單、插件，層中甚至可以包含另一個層。由于層可以具有特殊的位置和內容，因此，在網頁制作中也可以用層來進行頁面布局，可以實現頁面元素的精確定位。把層和時間軸配合使用，可以很方便地設計出動態(tài)頁面效果，層與行為配合使用還可以很方便地制作出滾動字幕、下拉式菜單等頁面效果。 圖層的基本操作 創(chuàng)建圖層當在文檔中放置層時，Dreamweaver將在代碼中插入該層的HTML標簽。可以選擇利用Dreamweaver將div標簽或span標簽用于層中。默認情況下，Dreamweaver會使用div標簽創(chuàng)建層。div和span標簽之間的區(qū)別在于瀏覽器不支持層在div標簽之前和之后放置額外的換行符。也就是說，div標簽是塊級別的元素，而span標簽則是內聯元素。大多數情況下，在不支持層的瀏覽器中，最好讓層內容出現在自己的段落中，因此大多數情況下最好使用div而不是span。若要進一步提高在較早瀏覽器中的可讀性，應注意放置層代碼的位置。定義層的代碼可以位于HTML文件正文中的任意位置。當在Dreamweaver中繪制一個層時，該層會顯示在指定的地方，但Dreamweaver將在頁開頭且緊接在body標簽之后插入該層的代碼(如果使用的是“插入層”命令而不是繪制層，層代碼將在插入點處插入)。如果創(chuàng)建一個嵌套層，Dreamweaver會在定義父層的標簽內插入代碼。Dreamweaver可以方便地在頁面上創(chuàng)建層并精確地將層定位。Dreamweaver提供了幾種不同的方法來創(chuàng)建層，下面介紹幾種常用的方法。(1)單擊對象面板上的“描繪圖層”按鈕。(2)將鼠標移動到文檔窗口中，鼠標指針會變成“十”字形狀。(3)在文檔窗口中將要放置圖層的位置上按下鼠標左鍵。(4)拖動鼠標，根據需要繪制圖層的大小，釋放鼠標，圖層就被放置在所希望的位置上，如圖92所示。圖92 描繪圖層(1)將插入點放置在文檔窗口中。(2)單擊“插入”→“層”命令，即可在文檔窗口中插入一個預設大小的圖層。將對象面板上的“描繪圖層”按鈕直接拖動到文檔中，即可在文檔中放置一個預設大小的圖層。 激活圖層要把對象放入圖層中，首先要激活圖層。未被選中的圖層如圖93所示。把鼠標放至層內任意位置單擊，即可激活層。此時，光標在層中閃爍，被激活的層的邊界突出顯示(由灰色變成黑色)，選擇手柄也同時顯示出來，如圖94所示。 圖93 未選中的圖層 圖94 被擊活的圖層 選中圖層要選中一個圖層，有如下幾種方法。方法一：單擊文檔中的圖層標記，即可選中對應的圖層，如果圖層標記沒有顯示，可以打開“查看”菜單，選擇“可視化助理”，在其下拉菜單中選擇“隱藏元素”命令，顯示“不可見元素”命令。選中的圖層，在其邊框上會出現八個調整手柄，如圖95所示。通過拖動手柄可以調整圖層的大小。方法二：單擊圖層中的任意位置，首先激活圖層，然后單擊圖層右上角的選擇柄口，即可選中該圖層。方法三：單擊圖層邊框，即可選中該圖層。方法四：在沒有圖層被激活的情況下，按Shift鍵，在單擊圖層中的任意位置，即可選中該圖層。方法五：如果選中了多個圖層，按住Ctrl+Shift鍵，再單擊要選中的圖層，即可選中該圖層，而取消對其他圖層的選擇。方法六：按F2鍵打開圖層面板，在圖層面板上，單擊圖層的名稱，即可在文檔窗口中選中相應的圖層，如圖96所示。 圖95 被選中的圖層 圖96 在圖層面板中選擇圖層如果希望同時選中多個圖層，則可以按以下方法進行操作。方法一：按住Shift鍵，然后在每個要選中的圖層中單擊鼠標，即可選中多個圖層。方法二：按住Shift鍵，然后在圖層面板中單擊兩個或多個圖層的名稱，即可選中多個圖層，如圖97所示。圖97 利用層面板選中多個圖層選中多個圖層的情形，如圖98所示，其中最右邊的圖層是最后選中的圖層。從圖中可以看到，最后被選中的圖層，其邊框上的控制點是黑色的，而先選中的圖層的控制點是白色的。圖98 被選中的多個圖層 調節(jié)圖層大小用戶可以調整單個層的大小，也可以同時調整多個層的大小以使其具有相同的寬度和高度。如果已啟用“防止重疊”選項，那么在調整層的大小時將無法使該層與另一個層重疊。調整單個圖層大小的方法如下。(1)拖動圖層邊框的控制點來改變其大小①選擇圖層。把光標定位在層的邊框，單擊后會出現8個控制點。②上下(左右、斜方向)拖動層邊框的控制點到
公司管理相關推薦
鄂ICP備17016276號-1