利用APDiv布局頁面.ppt

21世紀(jì)職業(yè)教育數(shù)字藝術(shù)規(guī)劃教材,網(wǎng)頁設(shè)計與制作技能案例教程,第 四 章,利用AP Div布局頁面,:21世紀(jì)職業(yè)教育數(shù)字藝術(shù)規(guī)劃教材:,學(xué) 習(xí) 目 標(biāo),使學(xué)生熟悉AP Div的創(chuàng)建和選擇。 使學(xué)生熟悉AP Div的移動和改變大小。 使學(xué)生熟悉AP 元素面板的使用。,:21世紀(jì)職業(yè)教育數(shù)字藝術(shù)規(guī)劃教材:,本 章 重 點,掌握AP Div的屬性設(shè)置。 掌握AP Div的定位。,:21世紀(jì)職業(yè)教育數(shù)字藝術(shù)規(guī)劃教材:,4.1 創(chuàng)建AP Div,1創(chuàng)建普通AP Div一般有以下3種方法： （1）將插入點放置在頁面中。選擇【插入記錄】【布局對象】【AP Div】，插入AP Div。 （2）單擊“布局”插入欄中的【繪制AP Div】按鈕，在文檔窗口中通過拖動鼠標(biāo)即可繪制一個AP Div。 （3）單擊“布局”插入欄中的【繪制AP Div】按鈕，按住【Ctrl】鍵并拖動鼠標(biāo)即可連續(xù)繪制多個AP Div。,2選擇AP Div一般都有一下4種方法。 （1）將插入點放置在AP Div中，單擊文檔窗口左下角標(biāo)簽，即可選擇AP Div。 （2）在“AP元素”面板中單擊AP Div的名稱，即可選擇AP Div。 （3）按住【Shift+Ctrl】組合鍵并單擊AP Div，即可選擇AP Div。 （4）按住【Shift】鍵，分別單擊要選擇的各AP Div的內(nèi)部或邊框線，可以選擇多個AP Div。,:21世紀(jì)職業(yè)教育數(shù)字藝術(shù)規(guī)劃教材:,AP Div的屬性面板主要選項含義如下： （1）【CSS-P元素】：用來指定AP Div的名稱，用于識別不同的AP Div。 （2）【左】：用來指定AP Div的左邊 瀏覽器窗口左邊界的距離。 （3）【上】：用來指定AP Div的上邊 瀏覽器窗口上邊界的距離。 （4）【寬】：用來指定AP Div的寬。 （5）【高】：用來指定AP Div的高。 （6）【Z軸】：用來指定AP Div的Z軸順序（即堆疊順序）。,4.2 AP Div屬性面板,:21世紀(jì)職業(yè)教育數(shù)字藝術(shù)規(guī)劃教材:,（7）【可見性】：用來指定AP Div的顯示狀態(tài)，其中主要選項含義如下。 default：表示為默認(rèn)值。 inherit：表示繼承其父AP Div的屬性。 visible：表示AP Div及其內(nèi)容為可見方式，與父AP Div無關(guān)。 hidden：表示AP Div及其內(nèi)容為隱藏方式，與父AP Div無關(guān)。 （8）【背景圖像】：用來指定AP Div的背景圖像。單擊“瀏覽文件”按鈕， 在彈出的“選擇圖像源文件”對話框中選擇圖像，或者直接在文本框中輸入圖像的路徑。 （9）【背景顏色】：用來指定AP Div的背景顏色。,4.2 AP Div屬性面板,:21世紀(jì)職業(yè)教育數(shù)字藝術(shù)規(guī)劃教材:,（10）【溢出】：如果AP Div里面的文字太多或圖像太大，AP Div的大小不足以全部顯示的時候，就需要設(shè)置該功能，其中主要選項的含義如下。 visible：當(dāng)AP Div中的內(nèi)容超出AP Div的范圍時，AP Div自動向右，向下擴大以顯示AP Div的全部內(nèi)容。 hidden：當(dāng)AP Div中的內(nèi)容超出AP Div的范圍時，AP Div的大小不變，只顯示與AP Div大小相同的內(nèi)容，其他的內(nèi)容將不顯示。 scrool：不論AP Div是否能完全顯示的其中內(nèi)容，都將會在AP Div中顯示滾動條。 auto：當(dāng)AP Div中的內(nèi)容超出AP Div的范圍時，AP Div的大小保持不變，但AP Div的左端或下端會出現(xiàn)滾動條，使AP Div中超出范圍的內(nèi)容能夠通過拖動滾動條來查看。 （11）【剪輯】：用來指定AP Div的哪一部分是可見的，輸入的數(shù)值是距離AP Div的4個邊界的長度。,4.2 AP Div屬性面板,:21世紀(jì)職業(yè)教育數(shù)字藝術(shù)規(guī)劃教材:,在文檔窗口中插入AP DIV后，在操作過程中常常會根據(jù)需要，對AP DIV的屬性進行適當(dāng)?shù)恼{(diào)整，如移動AP DIV、改變AP DIV的大小和對齊AP DIV等操作。,4.3 調(diào)整AP Div,:21世紀(jì)職業(yè)教育數(shù)字藝術(shù)規(guī)劃教材:,4.3 調(diào)整AP Div,（1）移動AP DIV 移動AP DIV有以下3種方法： 選中AP DIV，當(dāng)光標(biāo)靠近AP DIV的縮放手柄時，鼠標(biāo)指針就會變成十字箭頭形狀，按住鼠標(biāo)左鍵拖動，AP DIV將跟著光標(biāo)的移動而發(fā)生改變。 選中AP DIV，按鍵盤上的方向鍵，一次可以將其移動一個像素。 選中AP DIV，按住【shift】鍵，然后按鍵盤上的方向鍵，一次可以將其移動10個像素。,:21世紀(jì)職業(yè)教育數(shù)字藝術(shù)規(guī)劃教材:,4.3 調(diào)整AP Div,（2）改變AP DIV大小 改變AP DIV的大小有以下3種方法： 將鼠標(biāo)指針移動到AP DIV邊框上的小黑方框上，當(dāng)它變?yōu)榇怪彪p向箭頭時，按住 鼠標(biāo)左鍵向下或向上拖動鼠標(biāo)，則可以調(diào)整AP DIV的高度；當(dāng)鼠標(biāo)指針變?yōu)樗诫p向箭頭時，按住鼠標(biāo)左鍵向左或向右拖動鼠標(biāo)，則可以調(diào)整AP DIV的寬度。 當(dāng)鼠標(biāo)指針變?yōu)樾毕螂p箭頭時，按住鼠標(biāo)左鍵斜上或斜下拖動鼠標(biāo)，則可以調(diào)整AP DIV的高度或?qū)挾取?在【屬性】面板中輸入寬度和高度值來改變AP DIV的大小。,:21世紀(jì)職業(yè)教育數(shù)字藝術(shù)規(guī)劃教材:,4.3