div和布局對(duì)象的使用

《div和布局對(duì)象的使用》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫(kù)。

1、第4章Div和布局對(duì)象的使用教學(xué)內(nèi)容：APDiv是一種網(wǎng)頁(yè)元素定位技術(shù)，使用APDiv可以以像素為單位精確定位頁(yè)面元素，并且可以將其放置在頁(yè)面的任意位置。使用框架可以將瀏覽器窗口分成包含單獨(dú)網(wǎng)頁(yè)的區(qū)域，這樣可以使網(wǎng)頁(yè)布局更合理，同時(shí)也能對(duì)網(wǎng)站或網(wǎng)頁(yè)起到導(dǎo)航的作用。學(xué)習(xí)目標(biāo)掌握APDiv在網(wǎng)頁(yè)中的使用掌握APDiv的基本操作掌握APDiv和表格的轉(zhuǎn)換掌握使用Spry布局對(duì)象教學(xué)目標(biāo)和基本要求_______________________________________________________________

2、__________________________________________教學(xué)時(shí)間：本章共分_______課時(shí)教學(xué)方法案例教學(xué)多媒體教學(xué)理論面授教學(xué)素材課程范例文件：sample第4章練習(xí)文件：exercise第4章4.1在網(wǎng)頁(yè)中使用APDivAPDiv是CSS中的定位技術(shù)，在Dreamweaver中將其進(jìn)行了可視化操作。文本、圖像和表格等元素只能固定其位置，不能互相疊加在一起，使用APDiv功能，可以將其放置在網(wǎng)頁(yè)中的任何一個(gè)位置，還可以按順序排放網(wǎng)頁(yè)文檔中的其他構(gòu)成元素。APDiv體現(xiàn)了網(wǎng)頁(yè)

3、技術(shù)從二維空間向三維空間的一種延伸。APDiv和行為的綜合使用，還可以創(chuàng)作出動(dòng)畫效果，而不使用任何的JavaScript或HTML編碼。4.1.1關(guān)于AP元素面板在網(wǎng)頁(yè)中創(chuàng)建了APDiv元素后，在面板中可以方便地處理APDiv的操作、設(shè)置AP元素的屬性。4.1.2小案例——插入APDiv并設(shè)置其屬性在DreamweaverCS6中有兩種插入APDiv的方法，一種是通過(guò)菜單創(chuàng)建，一種是通過(guò)插入欄創(chuàng)建。4.1.3選擇APDiv選擇APDiv有以下幾種方法。單擊APDiv的邊框，可以選中APDiv。在【AP元素】面板中

4、單擊APDiv的名稱，也可以選中APDiv。4.1.4調(diào)整APDiv的大小在文檔窗口中插入APDiv后，在操作過(guò)程中，常常會(huì)根據(jù)需要對(duì)APDiv的大小進(jìn)行適當(dāng)?shù)卣{(diào)整。調(diào)整APDiv的大小有以下幾種方法。選中APDiv，拖曳APDiv上的控制點(diǎn)來(lái)改變APDiv的大小。選中APDiv，按住Ctrl鍵的同時(shí)再按方向鍵，可以在相應(yīng)的方向上每次增加一個(gè)像素。選中APDiv，按住Ctrl＋Shift組合鍵的同時(shí)再按方向鍵，可以在相應(yīng)的方向上每次增加10個(gè)像素。選中APDiv，在【屬性】面板中的【左】、【上】、【寬】和【高】文

5、本框中輸入數(shù)值，可以精確地控制APDiv的大小。4.2APDiv和表格的轉(zhuǎn)換與表格相比APDiv更方便，因此在設(shè)計(jì)網(wǎng)頁(yè)的時(shí)候應(yīng)先考慮使用APDiv。但是瀏覽器版本對(duì)APDiv有一定的限制，因此不是所有的瀏覽器都支持APDiv的應(yīng)用。相對(duì)來(lái)說(shuō)使用表格能獲得多個(gè)瀏覽器支持。4.2.1小案例——將APDiv轉(zhuǎn)換為表格可以使用APDiv來(lái)排版網(wǎng)頁(yè)，然后將APDiv轉(zhuǎn)換為表格，以使該網(wǎng)頁(yè)能夠在MicrosoftInternetExplorer4.0和NetscapeNavigator4.0之前的版本中正確地顯示。一般使用A

6、PDiv將元素精確定位，然后將APDiv轉(zhuǎn)換為表格。4.2.2小案例—將表格轉(zhuǎn)換為APDiv在設(shè)計(jì)網(wǎng)頁(yè)時(shí)經(jīng)常需要不斷地調(diào)整頁(yè)面的布局。如果要調(diào)整的網(wǎng)頁(yè)布局是表格形式，調(diào)整起來(lái)就會(huì)比較費(fèi)勁，此時(shí)用戶可以將表格布局轉(zhuǎn)換為APDiv布局進(jìn)行調(diào)整。4.3使用Spry布局對(duì)象Spry框架支持一組用標(biāo)準(zhǔn)HTML、CSS和JavaScript編寫的可重用構(gòu)件?？梢苑奖愕夭迦脒@些構(gòu)件（采用最簡(jiǎn)單的HTML和CSS代碼），然后設(shè)置構(gòu)件的樣式?？蚣苄袨榘ㄔ试S用戶執(zhí)行下列操作的功能：顯示或隱藏頁(yè)面上的內(nèi)容、更改頁(yè)面的外觀（如顏色）、

7、與菜單項(xiàng)交互等。4.3.1小案例—使用【Spry】菜單欄菜單欄構(gòu)件是一組可導(dǎo)航的菜單按鈕，當(dāng)站點(diǎn)訪問(wèn)者將鼠標(biāo)懸停在其中的某個(gè)按鈕上時(shí)，將顯示相應(yīng)的子菜單。使用菜單欄構(gòu)件可在緊湊的空間中顯示大量可導(dǎo)航信息，并使站點(diǎn)訪問(wèn)者無(wú)需深入瀏覽站點(diǎn)即可了解站點(diǎn)上提供的內(nèi)容。4.3.2小案例—使用Spry選項(xiàng)卡式面板選項(xiàng)卡式面板構(gòu)件是一組面板，用來(lái)將內(nèi)容存儲(chǔ)到緊湊空間中。站點(diǎn)訪問(wèn)者可通過(guò)單擊他們要訪問(wèn)的面板上的選項(xiàng)卡來(lái)隱藏或顯示存儲(chǔ)在選項(xiàng)卡式面板中的內(nèi)容。當(dāng)訪問(wèn)者單擊不同的選項(xiàng)卡時(shí)，構(gòu)件的面板會(huì)相應(yīng)地打開。在給定時(shí)間內(nèi)，選項(xiàng)卡式

8、面板構(gòu)件中只有一個(gè)內(nèi)容面板處于打開狀態(tài)。4.3.3小案例—使用Spry折疊式面板折疊構(gòu)件是一組可折疊的面板，可以將大量?jī)?nèi)容存儲(chǔ)在一個(gè)緊湊的空間中。站點(diǎn)訪問(wèn)者可通過(guò)單擊該面板上的選項(xiàng)卡來(lái)隱藏或顯示存儲(chǔ)在折疊構(gòu)件中的內(nèi)容。當(dāng)訪問(wèn)者單擊不同的選項(xiàng)卡時(shí)，折疊構(gòu)件的面板會(huì)相應(yīng)地展開或收縮。在折疊構(gòu)件中，每次只能有一個(gè)內(nèi)容面板處于打開且可見的狀態(tài)。4.3.4小案例—使用Spry可折疊