div和布局對象的使用

《div和布局對象的使用》由會員上傳分享，免費在線閱讀，更多相關內容在教育資源-天天文庫。

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

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

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

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

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

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

7、與菜單項交互等。4.3.1小案例—使用【Spry】菜單欄菜單欄構件是一組可導航的菜單按鈕，當站點訪問者將鼠標懸停在其中的某個按鈕上時，將顯示相應的子菜單。使用菜單欄構件可在緊湊的空間中顯示大量可導航信息，并使站點訪問者無需深入瀏覽站點即可了解站點上提供的內容。4.3.2小案例—使用Spry選項卡式面板選項卡式面板構件是一組面板，用來將內容存儲到緊湊空間中。站點訪問者可通過單擊他們要訪問的面板上的選項卡來隱藏或顯示存儲在選項卡式面板中的內容。當訪問者單擊不同的選項卡時，構件的面板會相應地打開。在給定時間內，選項卡式

8、面板構件中只有一個內容面板處于打開狀態(tài)。4.3.3小案例—使用Spry折疊式面板折疊構件是一組可折疊的面板，可以將大量內容存儲在一個緊湊的空間中。站點訪問者可通過單擊該面板上的選項卡來隱藏或顯示存儲在折疊構件中的內容。當訪問者單擊不同的選項卡時，折疊構件的面板會相應地展開或收縮。在折疊構件中，每次只能有一個內容面板處于打開且可見的狀態(tài)。4.3.4小案例—使用Spry可折疊