利用圖層技術(shù)制作網(wǎng)-wenkub
2023-01-30 01:33:22 本頁(yè)面
【正文】 調(diào)整多個(gè)圖層的大小 移動(dòng)圖層除了圖層的大小可以被調(diào)整以外，圖層還可以被隨意移動(dòng)。②單擊“修改”→“對(duì)齊”→“設(shè)成寬度相同”或“修改”→“對(duì)齊”→“設(shè)成高度相同”，如圖911所示。③按Ctrl+Shift+方向鍵，每次調(diào)整一個(gè)網(wǎng)格單位。 圖99 拖動(dòng)圖層邊框控制點(diǎn)改變層的大小(2)利用屬性面板精確調(diào)整圖層的大?、龠x擇要調(diào)整的圖層，打開屬性面板，如圖910所示。調(diào)整單個(gè)圖層大小的方法如下。圖97 利用層面板選中多個(gè)圖層選中多個(gè)圖層的情形，如圖98所示，其中最右邊的圖層是最后選中的圖層。方法六：按F2鍵打開圖層面板，在圖層面板上，單擊圖層的名稱，即可在文檔窗口中選中相應(yīng)的圖層，如圖96所示。方法二：?jiǎn)螕魣D層中的任意位置，首先激活圖層，然后單擊圖層右上角的選擇柄口，即可選中該圖層。 圖93 未選中的圖層 圖94 被擊活的圖層 選中圖層要選中一個(gè)圖層，有如下幾種方法。 激活圖層要把對(duì)象放入圖層中，首先要激活圖層。(4)拖動(dòng)鼠標(biāo)，根據(jù)需要繪制圖層的大小，釋放鼠標(biāo)，圖層就被放置在所希望的位置上，如圖92所示。Dreamweaver提供了幾種不同的方法來創(chuàng)建層，下面介紹幾種常用的方法。定義層的代碼可以位于HTML文件正文中的任意位置。div和span標(biāo)簽之間的區(qū)別在于瀏覽器不支持層在div標(biāo)簽之前和之后放置額外的換行符。把層和時(shí)間軸配合使用，可以很方便地設(shè)計(jì)出動(dòng)態(tài)頁(yè)面效果，層與行為配合使用還可以很方便地制作出滾動(dòng)字幕、下拉式菜單等頁(yè)面效果。一般來說，默認(rèn)后建立的層的z值大，先建立的層z值小，z值大的層可以覆蓋z值小的層，當(dāng)然也可以通過調(diào)整來改變先前層的疊放次序。在Dreamweaver中，通過圖層可以實(shí)現(xiàn)對(duì)頁(yè)面元素的精確定位，其友好的可視化特性能夠幫助用戶在文檔中輕松地創(chuàng)建圖層、定位文檔內(nèi)容，不僅避免了煩瑣的源代碼輸入，而且創(chuàng)建出的頁(yè)面內(nèi)容定位效果也非常簡(jiǎn)潔、高效。圖層的基本操作層可以包含文本、圖像或其他可放在HTML文檔正文中的任何內(nèi)容。本章介紹在網(wǎng)頁(yè)制作中圖層技術(shù)的應(yīng)用。圖層與表格的操作什么是層呢？層是網(wǎng)頁(yè)中用來放置文本、圖像、動(dòng)畫、表單、插件等網(wǎng)頁(yè)元素的載體。層不僅可以有特殊的位置，也可以有豐富的內(nèi)容。 圖層的基本操作 創(chuàng)建圖層當(dāng)在文檔中放置層時(shí)，Dreamweaver將在代碼中插入該層的HTML標(biāo)簽。也就是說，div標(biāo)簽是塊級(jí)別的元素，而span標(biāo)簽則是內(nèi)聯(lián)元素。當(dāng)在Dreamweaver中繪制一個(gè)層時(shí)，該層會(huì)顯示在指定的地方，但Dreamweaver將在頁(yè)開頭且緊接在body標(biāo)簽之后插入該層的代碼(如果使用的是“插入層”命令而不是繪制層，層代碼將在插入點(diǎn)處插入)。(1)單擊對(duì)象面板上的“描繪圖層”按鈕。圖92 描繪圖層(1)將插入點(diǎn)放置在文檔窗口中。未被選中的圖層如圖93所示。方法一：?jiǎn)螕粑臋n中的圖層標(biāo)記，即可選中對(duì)應(yīng)的圖層，如果圖層標(biāo)記沒有顯示，可以打開“查看”菜單，選擇“可視化助理”，在其下拉菜單中選擇“隱藏元素”命令，顯示“不可見元素”命令。方法三：?jiǎn)螕魣D層邊框，即可選中該圖層。 圖95 被選中的圖層 圖96 在圖層面板中選擇圖層如果希望同時(shí)選中多個(gè)圖層，則可以按以下方法進(jìn)行操作。從圖中可以看到，最后被選中的圖層，其邊框上的控制點(diǎn)是黑色的，而先選中的圖層的控制點(diǎn)是白色的。(1)拖動(dòng)圖層邊框的控制點(diǎn)來改變其大?、龠x擇圖層。②在屬性檢查器的“高”和“寬”文本框中修改層的寬度值和高度值。注意：在調(diào)整層的大小時(shí)，當(dāng)層比圖片大時(shí)，圖片的尺寸保持不變，而層最小只能調(diào)整到圖片的大小。圖911 “對(duì)齊”命令選項(xiàng)注意：多個(gè)圖層調(diào)整后的高度和寬度以最后一個(gè)被選中的圖層的(黑色突出顯示)寬度或高度為基準(zhǔn)。正是這一特點(diǎn)，方便了網(wǎng)頁(yè)元素的定位，使我們可以方便地利用圖層進(jìn)行網(wǎng)頁(yè)布局。圖914 利用屬性檢查器移動(dòng)圖層每按一次方向鍵，則移動(dòng)一個(gè)像素單位：若按Shift鍵的同時(shí)按一次方向鍵，則移動(dòng)一個(gè)網(wǎng)格單位。圖915 顯示網(wǎng)格線設(shè)置網(wǎng)格和吸附的值的步驟如下。間隔：用于設(shè)置網(wǎng)格線的間距和間距單位。 層面板的應(yīng)用 層屬性面板的應(yīng)用用戶可以在屬性面板中查看和設(shè)置層的各種屬性。輸入名稱時(shí)只使用標(biāo)準(zhǔn)的字母數(shù)字字符，而不要使用空格、連字符、斜杠或句號(hào)等特殊字符。在瀏覽器中，編號(hào)較大的層出現(xiàn)在編號(hào)較小的層的前面。顯示：指定該層最初是否是可見的。繼承——使用該層父級(jí)的可見性屬性。使用腳本語言(如JavaScript)可控制可見性屬性并動(dòng)態(tài)地顯示層的內(nèi)容。標(biāo)簽：指定用來定義該層的HTML標(biāo)簽。實(shí)際上，該層會(huì)通過延伸來容納額外的內(nèi)容。如，若要使一個(gè)層中50像素寬、75像素高的矩形區(qū)域可見而其他內(nèi)容均不可見，請(qǐng)將“左”設(shè)置為0，將“上”設(shè)置為0，將“右”設(shè)置為50，并將“下”設(shè)置為75。①單擊“窗口”→“其他”→“層”菜單命令，打開“層”面板。如果沒有眼形圖標(biāo)，該層通常會(huì)繼承其父級(jí)的可見性(如果層沒有嵌套，父級(jí)就是文檔正文，而文檔正文始終是可見的。②單擊位于列頂部的標(biāo)頭眼睛圖標(biāo)。疊放的順序可以從“層”面板上看到，如圖919所示。圖921 調(diào)整層的位置(2)利用層屬性面板來調(diào)整層間的位置在層屬性面板中直接修改Layer3層的“Z軸”值，使其小于Layer1的“Z軸”值，如圖922所示。若要?jiǎng)?chuàng)建嵌套層，可以在另一個(gè)層中插入或繪制一個(gè)層，或者使用“層”控制面板。圖923 創(chuàng)建嵌套層(2)繪制嵌套層在“插入”面板上單擊“描繪層”按鈕，然后通過拖動(dòng)在現(xiàn)有層中繪制一個(gè)層。②在“層”控制面板中選擇一個(gè)層，然后通過按住Ctrl鍵并拖動(dòng)，將層移動(dòng)到層控制面板上的目標(biāo)層。否則，當(dāng)訪問者在Netscape Navigator 4版中調(diào)整瀏覽器窗口的大小時(shí)，層會(huì)失去它們的位置。在Dreamweav
公司管理相關(guān)推薦
鄂ICP備17016276號(hào)-1