第六章 布局對(duì)象使用

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

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

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

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

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

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

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

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

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

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