第六章 布局對象使用

1、第六章 布局對象的使用Dreamweaver CS3、Flash CS3應用基礎案例教程 項目6布局對象的使用項目分解：任務一 創(chuàng)建AP DIV時間軸動畫創(chuàng)建并設置普通的AP Div使用時間軸制作動畫任務二 Spry在網(wǎng)頁中的運用創(chuàng)建Spry菜單欄創(chuàng)建Spry選項卡創(chuàng)建Spry折疊式創(chuàng)建Spry可折疊面板教學準備素材：素材項目6eg效果：素材項目6finaDreamweaver CS3、Flash CS3應用基礎案例教程 AP Div可以看作是網(wǎng)頁內容的一個容器，在其中可以加入所有應用到頁面的對象，如文本、圖像、動畫、表格、插件等，也可以對AP Div單獨設置。它的最大優(yōu)勢在于靈活，它可以放置

2、在頁面上的任何一個位置，甚至可以隱藏在頁面的邊線以內。因此，使用AP Div比使用表格更方便實現(xiàn)頁面排版。 Dreamweaver cs3的新功能中集成了輕量級的AJAX框架Spry，最吸引我們的就是Spry所帶來的視覺效果了?？梢詫⑦@些效果直接應用于HTML元素，而無需其他自定義標簽。項目6布局對象的使用Dreamweaver CS3、Flash CS3應用基礎案例教程 活動1 創(chuàng)建并設置普通的AP Div活動2 使用時間軸制作動畫任務一：創(chuàng)建AP DIV時間軸動畫項目6布局對象的使用Dreamweaver CS3、Flash CS3應用基礎案例教程 AP Div的屬性面板參數(shù)：知識延伸知識

3、延伸CSS-P元素：AP Div的名稱，用于識別不同的AP Div；左、上：AP Div的左/上邊界距離瀏覽器窗口左/上邊界的距離；寬、高：AP Div的寬和高；Z軸：AP Div的Z軸順序；背景圖像：AP Div的背景圖；Dreamweaver CS3、Flash CS3應用基礎案例教程 知識延伸知識延伸AP Div的屬性面板參數(shù)：可見性：AP Div的顯示狀態(tài)，包括：default：表示為默認值；Inherit：表示繼承其你AP Div的屬性；visible：表示AP Div及其內容為可見方式，與父AP Div無關；Hidden ： 表示AP Div及其內容為隱藏方式，與父AP Div無關

4、；在設定層屬性為不可見時，我們可以通過“窗口”中的層面板，來調出對應的層。背景顏色：AP Div的背景顏色；剪輯：用來指定AP Div哪一部分是可見的，輸入的數(shù)值是距離層的4個邊界的距離；溢出：如果AP Div里面的文字太多或者圖像太大，AP Div 的大小不足以全部顯示的時候，有4個選項可visible：超出的部分照樣顯示；hidden ：超出的部分隱藏；scroll：不管是否超出，都顯示滾動條；auto：有超出時才出現(xiàn)滾動條供選擇。Dreamweaver CS3、Flash CS3應用基礎案例教程 1. 在“index.html”頁面中建立一個層，并將“l(fā)ogo.jpg”文件放置在其中，根

5、據(jù)此文件來設定層的大小，將其定位在左上方；2.將層移動到“時間軸”面板上，建立時間軸動畫，并且設定為自動無限循環(huán)播放。小試身手小試身手Dreamweaver CS3、Flash CS3應用基礎案例教程 任務二：Spry在網(wǎng)頁中的運用活動1 創(chuàng)建Spry菜單欄活動2 創(chuàng)建Spry選項卡活動3 創(chuàng)建Spry折疊式活動4 創(chuàng)建Spry可折疊面板參看視頻演示項目6布局對象的使用Dreamweaver CS3、Flash CS3應用基礎案例教程 .關于菜單欄構件 ：知識延伸知識延伸菜單欄構件是一組可導航的菜單按鈕，當瀏覽者將鼠標懸停在其中的某個按鈕上時，將顯示相應的子菜單。Dreamweaver中有兩種

6、菜單欄構件：垂直構件和水平構件。下圖顯示一個水平菜單欄構件，其中的第三個菜單項處于展開狀態(tài)：A. 菜單項具有子菜單 B. 子菜單項具有子菜單Dreamweaver CS3、Flash CS3應用基礎案例教程 知識延伸知識延伸菜單欄構件的 HTML代碼： 菜單欄構件由 、 和 標簽組成。 每個頂級菜單項都包含一個 li 標簽，而頂級菜單項（li 標簽）又包含多個用來為每個菜單項定義子菜單的 ul 和 li 標簽。.關于菜單欄構件 ：Dreamweaver CS3、Flash CS3應用基礎案例教程 2.關于選項卡式面板構件：知識延伸知識延伸選項卡式面板構件是一組面板，瀏覽者可通過單擊要訪問的面板

7、上的選項卡來隱藏或顯示存儲在選項卡式面板中的內容，但每次只有一個內容面板處于打開狀態(tài)。下圖顯示一個選項卡式面板構件，第三個面板處于打開狀態(tài)：A. Tab B. 內容C. 選項卡式面板構件D. 選項卡式面板Dreamweaver CS3、Flash CS3應用基礎案例教程 2.關于選項卡式面板構件：知識延伸知識延伸選項卡式面板構件的 HTML 代碼： 選項卡式面板構件包含一個含有所有面板的外部 div 標簽、一個標簽列表、一個用來包含內容面板的 div 和以及各面板對應的 div。 在文檔頭中和選項卡式面板構件的 HTML 標記之后還包括腳本標簽。Dreamweaver CS3、Flash CS

8、3應用基礎案例教程 3.關于折疊構件：知識延伸知識延伸折疊構件是一組可折疊的面板，訪問者單擊不同的選項卡時，折疊構件的面板會相應地展開或收縮。在折疊構件中，每次只能有一個內容面板處于打開且可見的狀態(tài)。 下圖顯示一個折疊構件，其中的第一個面板處于展開狀態(tài)：A. Tab B. 內容C. 選項卡式面板構件D. 選項卡式面板Dreamweaver CS3、Flash CS3應用基礎案例教程 3.關于折疊構件：知識延伸知識延伸折疊構件的HTML代碼 ： 折疊構件中包含一個含有所有面板的外部div 標簽以及各面板對應的 div 標簽，各面板的標簽中還有一個標題 div 和內容 div。在文檔頭中和折疊構件

9、的 HTML標記之后還包括 script 標簽。 Dreamweaver CS3、Flash CS3應用基礎案例教程 4.關于可折疊面板構件：知識延伸知識延伸可折疊面板構件是一個面板，瀏覽者單擊構件的選項卡即可隱藏或顯示存儲在可折疊面板中的內容。下例顯示一個處于展開和折疊狀態(tài)的可折疊面板構件：Dreamweaver CS3、Flash CS3應用基礎案例教程 知識延伸知識延伸可折疊面板構件的 HTML代碼： 可折疊面板構件包含一個外部 div 標簽，其中包含內容 div 標簽和選項卡容器 div 標簽。在文檔頭中和可折疊面板的 HTML 標記之后還包括腳本標簽。4.關于可折疊面板構件：Drea

10、mweaver CS3、Flash CS3應用基礎案例教程 1.在“index.html”頁面中建立一個垂直的“Spry菜單欄”，并參照“final”文件夾中的“index.html”頁面，更改其菜單項目，將“露地花卉”下的子菜單鏈接全部設為“hana.html”；2.在“index.html”頁面中建立一個“Spry選項卡式面板”，并參照“final”文件夾中的“index.html”頁面，將標簽和內容改動；3.在“hana.html”頁面中參照“final”文件夾中的“hana.html”頁面，插入“Spry折疊式”和“Spry可折疊面板”，并相應的更改標簽和內容。小試身手小試身手Dreamweaver CS3、Flash CS3應用基礎案例教程 布局