模塊6利用apdiv布局網(wǎng)頁4.ppt

《模塊6利用apdiv布局網(wǎng)頁4.ppt》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。

1、主講教師：譚榮華網(wǎng)頁設(shè)計與制作——學(xué)習(xí)情境6：利用APDiv布局網(wǎng)頁布置習(xí)題學(xué)習(xí)目標知識講解課堂實踐教學(xué)總結(jié)利用APDiv布局網(wǎng)頁學(xué)習(xí)情境6課程引導(dǎo)AP（Absolutepositioning），絕對定位的意思。APDiv與時間軸是Dreamweaver中兩種比較重要的功能。其中，APDiv相當于一個容器，可以包含所有在HTML文件中出現(xiàn)的元素，如文本、圖像和Flash等，可以隨意將APDiv拖到頁面的任意位置，從而簡單又精確地定位頁面對象。而使用時間軸可以在網(wǎng)頁中創(chuàng)建動畫，它是以幀為最基本的概念來運作的

2、概述我聽別人說現(xiàn)在都流行div+css，表格布局已經(jīng)過時了，然后學(xué)了一下div+css，就去了一家做網(wǎng)站的公司上班，老板每天給我一個網(wǎng)站的源碼供我學(xué)習(xí)，可是里面網(wǎng)站的布局全都是表格布局，一開始看的是簡單的網(wǎng)站，我不習(xí)慣表格布局，就把網(wǎng)站源碼很輕松的改成了div+css布局的，可是今天看的這個網(wǎng)站表格布局的很復(fù)雜，下拉菜單用表格布局+javascript,我看了一天沒整明白，但是我看div+css+javascript實現(xiàn)下拉菜單的代碼就很輕松的看懂。我問老板說用表格做還是div+css,表格是不是已經(jīng)被淘

3、汰了？老板說div+css雖然好，可是在不同的瀏覽器中顯示結(jié)果不同，所以他還是習(xí)慣用表格做，div+css他不是很熟悉。我該怎么辦呢？繼續(xù)向更高處鉆研div+css，自創(chuàng)一路（因為我估計公司庫里的網(wǎng)站全都是表格布局的）還是懶點？做網(wǎng)站時候套用公司庫的表格模板？我的感覺是每個模塊都要放div里，不然我真不知道怎么調(diào)整它的位置，做網(wǎng)站的時候我該在設(shè)計視圖中畫表格還是直接寫代碼？我現(xiàn)在的習(xí)慣是寫代碼。希望大俠們多多提意見，感激不盡!表格布局的優(yōu)勢與劣勢1、表格操作簡單直觀，只要會一點word操作的人員，就差不多

4、可以使用frontpage設(shè)計網(wǎng)頁了，如果專業(yè)一點可以使用Dreamweaver對網(wǎng)頁進行編輯。2、網(wǎng)頁設(shè)計速度快，如果你要編輯的網(wǎng)頁不是很多的話，使用表格排版速度快3、可視化操作強，所有網(wǎng)頁在網(wǎng)頁編輯軟件中編輯，可以視化操作，直觀，你所看到的內(nèi)容，和在瀏覽器中顯示的內(nèi)容基本上是一樣的。4、在網(wǎng)頁設(shè)計時是可重復(fù)性操作不強，如一個網(wǎng)頁的布局和另一個如果頁面相同的布局的話，得重新設(shè)計一個。5、網(wǎng)頁如果要修改的話、可以每個獨立的修改，如果很多風(fēng)格一樣的頁面，不能同時操作。6、網(wǎng)頁設(shè)計時文件內(nèi)容很多及的話，文件會

5、變得非常之大。DIV+CSS網(wǎng)頁布局優(yōu)勢與劣勢1、要做DIV+CSS的網(wǎng)頁設(shè)計師必須要會手寫HTML語言的能力，所以對設(shè)計師來說相對要求高一點。2、同時得會手寫CSS語言的能力。3、可視化操作性不強，在很多可視化操作軟件中看不出效果。4、網(wǎng)頁表現(xiàn)與結(jié)構(gòu)分離，對CSS修改可以對網(wǎng)頁文件布局修改，如果有多個網(wǎng)頁相同布局的話，可以調(diào)用同一個CSS文件實現(xiàn)布局功能。5、網(wǎng)頁打開速度快，因為它可以先打開內(nèi)容，再調(diào)用CSS文件。建議（一個網(wǎng)頁設(shè)計師在回答先前提問的原話）：Table布局相對一目了然，配上CSS，效果也

6、不差，以我的經(jīng)驗來說，Table不容易變形。嗯……我是指在各種開發(fā)工具里面，但是想要改版就有些麻煩，例如說一個板塊希望跟另一個板塊換位置，同時想做精細一些的邊框也稍顯復(fù)雜。CSS+DIV貌似現(xiàn)在比較主流，各大網(wǎng)站多是這樣布局。效果比Table布局更為精致。這種布局自然是不差，但要求頁面設(shè)計者對CSS了解比較透徹。如果沒有詳細的說明文檔，又不是開發(fā)者本人的話，重用就有些頭痛了，有時候會出一些莫名其妙的問題。(好吧，我承認我經(jīng)?！耙浦病备鞔缶W(wǎng)站的布局)我個人建議是：如果針對用戶群有限或?qū)缑嬉蟛桓撸鏞A或

7、企業(yè)內(nèi)部網(wǎng)站，用Table布局好如果是外網(wǎng)，針對大量用戶或希望頁面美觀，DIV+CSS是不二的選擇。布置習(xí)題知識講解課堂實踐教學(xué)總結(jié)課程引導(dǎo)利用APDiv布局網(wǎng)頁學(xué)習(xí)情境6學(xué)習(xí)目標掌握利用APDiv布局對象有效控制頁面對象和利用時間軸制作動畫的方法學(xué)習(xí)目標專業(yè)能力目標專業(yè)知識目標專業(yè)素質(zhì)目標布置習(xí)題知識講解課堂實踐教學(xué)總結(jié)課程引導(dǎo)利用APDiv布局網(wǎng)頁學(xué)習(xí)情境6學(xué)習(xí)目標使用DreamweaverCS3中APDiv容器和時間軸基本操作的能力利用DreamweaverCS3中APDiv容器和時間軸控制網(wǎng)頁中對

8、象的能力專業(yè)能力目標布置習(xí)題知識講解課堂實踐教學(xué)總結(jié)課程引導(dǎo)利用APDiv布局網(wǎng)頁學(xué)習(xí)情境6學(xué)習(xí)目標創(chuàng)建普通APDiv、選擇APDiv、APDiv的屬性設(shè)置移動APDiv、改變APDiv的大小、對齊APDiv、AP元素面板的使用、時間軸、創(chuàng)建時間軸動畫使用Spry菜單欄、使用Spry選項卡式面板、使用Spry折疊式、使用Spry可折疊面板專業(yè)知識目標布置習(xí)題知識講解課堂實踐教學(xué)總結(jié)課程引導(dǎo)利用APDiv布局網(wǎng)頁學(xué)習(xí)情境6學(xué)習(xí)目