網(wǎng)頁設計與制作第六章

6AP元素6.1

AP元素概述6.2

AP元素的創(chuàng)建與編輯6.3

AP元素的疊加和嵌套6.4

AP元素與表格的互相轉換6.5Spry構件6.1AP元素概述6.1.1AP元素的特點AP元素的運用大大增強了DreamweaverCS6網(wǎng)頁布局的靈活性，這也是許多專業(yè)設計人員偏好用DreamweaverCS6布局網(wǎng)頁的一個原因。AP元素在網(wǎng)頁中有以下幾點特性：①AP元素的可浮動性。由于AP元素具有可浮動性的特點，所以AP元素可以在網(wǎng)頁中任意定位表格、文本、圖像或其他在HTML文檔中放置的對象，除了框架。②AP元素的可隱藏性。利用AP元素的可隱藏性，可以指定AP元素顯示或隱藏，結合顯示或隱藏AP元素行為命令可完成下拉菜單的制作。③AP元素的可重疊性。AP元素的可重疊性可以顯現(xiàn)出在AP元素中添加的對象的錯落效果。排列AP元素時，可以通過【AP元素】面板來調節(jié)對象的AP元素堆疊順序，Z值越大，就越靠近上方，最大值顯示在最上方。④AP元素的可剪切性。AP元素的可剪切性可以將AP元素中對象多余的部分裁剪掉，或指定顯示在AP元素中的區(qū)域。⑤AP元素的可滾動性。利用該特性，可以通過滾動條顯示出AP元素中的有限空間內容。6.1.2AP元素面板通過【AP元素】面板可以管理文檔中的AP元素，防止AP元素重疊，更改AP元素的可見性，以及選擇多個AP元素。執(zhí)行【窗口】|【AP元素】命令，或者按【F2】鍵，即可打開【AP元素】面板。其中各個選項的功能如下：【防止重疊】：勾選該復選框，表示創(chuàng)建AP元素時各AP元素不能重疊。但在創(chuàng)建嵌套AP元素時，不能勾選此復選框?！綢D】：顯示AP元素的名稱，雙擊AP元素可更改AP元素的名稱?！綵】：在該列中可以更改AP元素堆疊順序。AP元素在“Z”列中的編號高，就排在上層；反之則排在下層。6.2AP元素的創(chuàng)建與編輯6.2.1創(chuàng)建AP元素將【插入】面板切換到【布局】面板，單擊【繪制APDiv】按鈕，這時光標變成十字形狀，在文檔窗口中拖動鼠標，即可繪制一個AP元素?；蛘邎?zhí)行【插入】|【布局對象】|【APDiv】命令也可插入AP元素。提示：按住【Ctrl】鍵不放，可以連續(xù)繪制多個AP元素。6.2.2AP元素的編輯（1）設置AP元素參數(shù)使用【首選參數(shù)】對話框中的【AP元素】類別選項可確定AP元素的默認設置。執(zhí)行【編輯】|【首選參數(shù)】命令，打開【首選參數(shù)】對話框，在左側的【分類】列表中選擇【AP元素】選項。（2）選擇AP元素選擇AP元素包括選擇一個AP元素與選擇多個AP元素。①選擇一個AP元素。操作方法有下列三種：a．在【AP元素】面板上單擊所要選擇AP元素的名稱，可選中該AP元素。b．單擊一個AP元素的選擇柄可選中該AP元素，如果選擇柄不可見，請在該AP元素中的任意位置單擊，則可以顯示此選擇柄，可選中該AP元素。c．單擊一個AP元素的邊框可選中該AP元素。②選擇多個AP元素。在【AP元素】面板或者在頁面中，按住【Shift】鍵依次單擊需要選擇的AP元素，可選擇多個AP元素。當選中多個AP元素時，最后選定的AP元素的調整柄和手控點以藍色實心突出顯示，其他AP元素的大小調整柄則以藍色空心顯示，（3）移動AP元素AP元素在編輯頁面時是可以隨意移動的。操作方法有下列三種：①選擇需要移動的AP元素，拖動AP元素上方的選擇柄或者邊框可以將其移動到文檔中的任意位置。②選擇需要移動的AP元素，使用鍵盤上的方向鍵來移動AP元素，每按一次可以將其移動一個像素的距離。③選擇需要移動的AP元素，按住【Shift】鍵的同時再使用鍵盤上的方向鍵，每按一次可以移動一個網(wǎng)格單元的距離。④選擇需要移動的AP元素，在AP元素的【屬性】面板上的【左】和【上】文本框中直接輸入數(shù)值也可以改變AP元素的位置。（4）調整AP元素的大小調整一個AP元素的大小可以通過拖動該AP元素的調整柄進行；或者按住【Ctrl】鍵的同時，再按鍵盤上的方向鍵來調整AP元素的大小，每按一次能調整一個像素的大小；還可以在AP元素的【屬性】面板上的【寬】和【高】文本框中直接輸入AP元素的寬度值和高度值進行調整。（5）對齊AP元素AP元素的對齊方式可以通過菜單欄進行調整。若要對齊AP元素，操作步驟如下：①選定網(wǎng)頁文檔中的AP元素。②執(zhí)行【修改】|【排列順序】命令，在彈出的菜單中選擇一個對齊選項，。6.3AP元素的疊加和嵌套6.3.1AP元素的疊加AP元素是可以疊加的，后面創(chuàng)建的層會覆蓋在先創(chuàng)建的層上，如果層的背景是透明的，則可以顯示下層中的內容。利用這一特性，可以實現(xiàn)網(wǎng)頁的特殊效果。層中還可以插入表格，將兩者結合起來，可以更好地實現(xiàn)圖文混排。6.3.2AP元素的嵌套所謂AP元素的嵌套，就是將一個層創(chuàng)建在另一個層里。形成嵌套的父子層可以重疊，也可不重疊，子層大小可以大于父層的大小。嵌套層之間存在繼承關系。繼承的作用就是使子層的可見性與父層一致，并且保持子層與父層的相對位置不變。對于嵌套層，當父層的位置變化時，子層的位置也隨之變化；當父層的可見性改變時，子層的可見性也可以隨之改變。AP元素可以嵌套。操作方法有下列兩種：①先創(chuàng)建父層，然后將光標置于父層中，在DreamweaverCS6主窗口中執(zhí)行【插入】|【布局對象】|【APDiv】命令，即可創(chuàng)建嵌套層。②利用【AP元素】面板創(chuàng)建嵌套層，在【AP元素】面板上選中作為子層的層，按住【Ctrl】鍵，將選中的子層拖動到要作為父層的層上，松開鼠標即可創(chuàng)建嵌套層這個其實就是div的一個clip（剪輯屬性），就相當于ps或者fw中的裁剪。比如：div{clip:rect(100px,400px,400px,100px)}這個意思就是只顯示這個層的那四個坐標數(shù)值中間的內容。這個屬性一直以來都有很多兼容性的問題，平常也很少有人用，dw里在屬性面板里設置數(shù)值后，源碼里的css或自動寫成div{clip:rect(100px,400px,400px,100px)}這樣的形式，也就是坐標用逗號隔開，這樣的寫法只能在firefox3下起到剪輯的作用。而在ie7下沒有效果。你可以這樣來寫：div{clip:rect(100px400px400px100px)}也就是數(shù)值用空格隔開，就可以兼容所有的瀏覽器。6.4AP元素與表格的互相轉換6.4.1AP元素轉換為表格在AP元素轉換為表格之前，先確保AP元素沒有重疊。AP元素轉換為表格的操作步驟如下：①執(zhí)行【修改】|【轉換】|【將APDiv轉換為表格】命令②在【表格布局】區(qū)域中，若選中【最精確】單選按鈕，將把每個AP元素都轉換為表格，并將AP元素與AP元素之間相鄰的空間轉換為表格。若選中【最小】單選按鈕，則要指定AP元素的值在指定的像素數(shù)內，AP元素的邊緣應對齊。③勾選【使用透明GIFs】復選框，將用透明的GIF填充表格的最后一行，這將確保該表格在所有瀏覽器中都以相同的列寬顯示。④勾選【置于頁面中央】復選框，則轉換好的表格將放置在頁面的中央。⑤在【布局工具】區(qū)域中選擇所需的布局工具和網(wǎng)格選項。⑥單擊【確定】按鈕，AP元素就轉換為表格6.4.2表格轉換為AP元素將表格轉換為AP元素的操作步驟如下：①選中網(wǎng)頁文檔中需要轉換的表格②執(zhí)行【修改】|【轉換】|【將表格轉換為APDiv】命令，③勾選【顯示AP元素面板】，可以在轉換后顯示【AP元素】面板。④勾選【顯示網(wǎng)格】和【靠齊到網(wǎng)格】，可以在轉換后使用網(wǎng)格來協(xié)助對AP元素進行定位。⑤單擊【確定】按鈕，表格就轉換為AP元素。6.5Spry構件6.5.1Spry菜單欄“Spry菜單欄”構件是一組可導航的菜單按鈕，當站點訪問者將鼠標懸停在其中的某個按鈕上時，將顯示相應的子菜單。使用菜單欄可在緊湊的空間中顯示大量可導航信息，并使站點訪問者無需深入瀏覽站點即可了解站點上提供的內容。DreamweaverCS6允許插入兩種菜單欄構件：垂直構件和水平構件。1）插入Spry菜單欄構件①執(zhí)行【插入】|【Spry】|【Spry菜單欄】命令。②選擇【水平】或【垂直】，單擊【確定】按鈕（2）添加或刪除菜單和子菜單可利用【屬性】面板向菜單欄構件中添加菜單項或從中刪除菜單項①添加主菜單項。在文檔窗口中選擇一個菜單欄構件，然后在【屬性】面板中單擊第一列上方的“＋”按鈕，命名新菜單項，即更改文檔窗口或【屬性】面板【文本】框中的默認文本。②添加子菜單項。在文檔窗口中選擇一個菜單欄構件，然后在【屬性】面板中選擇要向其中添加子菜單的主菜單項的名稱。單擊第二列上方的“＋”按鈕，命名新的子菜單項，即更改文檔窗口或【屬性】面板【文本】框中的默認文本。要向子菜單中添加子菜單，請選擇要向其中添加另一個子菜單項的子菜單項名稱，在【屬性】面板中單擊第三列上方的“＋”按鈕。③刪除主菜單項或子菜單項。在文檔窗口中選擇一個菜單欄構件，然后在【屬性】面板中選擇要刪除的主菜單項或子菜單項的名稱，單擊“－”按鈕。6.5.2Spry選項卡式面板“Spry選項卡式面板”構件是一組面板，用來將內容存儲到一個緊湊的空間中。站點訪問者可通過單擊要訪問的面板上的選項卡來隱藏或顯示存儲在選項卡式面板中的內容。當訪問者單擊不同的選項卡時，構件的面板會相應地打開。在給定時間內，選項卡式面板構件中只有一個內容面板處于打開狀態(tài)。（1）插入選項卡式面板構件執(zhí)行【插入】|【Spry】|【Spry選項卡式面板】命令，打開Spry選項卡式面板。提示：還可以使用【插入】面板中的【Spry】類別插入選項卡式面板構件。（2）將面板添加到選項卡式面板構件①在文檔窗口中選擇一個選項卡式面板構件。②在【屬性】面板中單擊【面板】旁邊的“＋”按鈕。③更改選項卡的名稱，即在【設計】視圖中選擇選項卡的文本并對其進行修改。（3）從選項卡式面板構件中刪除面板①在文檔窗口中選擇一個選項卡式面板構件。②在【屬性】面板的【面板】選項中選擇要刪除的面板的名稱，單擊“－”按鈕。（4）打開面板進行編輯操作方法有下列兩種：①將鼠標指針移到要在【設計】視圖中打開的面板選項卡上，然后單擊出現(xiàn)在該選項卡右側中的眼睛圖標②在文檔窗口中選擇一個選項卡式面板構件，然后單擊要在【屬性】面板的【面板】選項中編輯的面板的名稱。6.5.3Spry