《網(wǎng)頁設(shè)計(jì)與制作（第二版）》09 使用 Div 標(biāo)簽和 AP Div

網(wǎng)頁設(shè)計(jì)與制作（第二版）目錄DIRECTORY01DreamweaverCS5入門05插入圖像02創(chuàng)建站點(diǎn)06插入多媒體03設(shè)置首頁07建立網(wǎng)頁鏈接04DreamweaverCS5編輯文本08表格目錄DIRECTORY09使用Div標(biāo)簽和APDiv10框架11表單12CSS樣式13行為14資源15模板和庫16站點(diǎn)上傳和維護(hù)09使用Div標(biāo)簽和APDiv1.在Dreamweaver中能使用Div和APDiv。2.掌握在Dreamweaver中編輯Div和APDiv的方法。3.引導(dǎo)學(xué)生樹立大局意識。任務(wù)目標(biāo)1任務(wù)實(shí)施一、層綜合案例項(xiàng)目利用層制作的頁面，如圖9-1所示。一、層綜合案例項(xiàng)目【操作步驟】步驟1：新建一個(gè)HTML文檔，保存為“index.html”。單擊屬性面板上的“頁面屬性”按鈕，設(shè)置文字大小為12，文本顏色為“#FFFFFF”，背景圖像為“images/bg.gif”，左、右、上、下邊距為0。步驟2：按照設(shè)計(jì)的布局，在相應(yīng)位置繪制出描繪層，結(jié)果如圖9-2所示。步驟3：將已存儲在網(wǎng)站文件下的圖片插入到層中。步驟4：在頁面下方繪制出兩個(gè)描繪層，分別插入文本框與文本。（一）插入<div>標(biāo)簽（1）將鼠標(biāo)放在要插入<div>標(biāo)簽的位置上，然后點(diǎn)擊“插入”菜單，選擇“布局對象”命令，在彈出的子菜單中選擇“Div標(biāo)簽”項(xiàng)?；蛘咴凇安迦搿泵姘逯羞x擇“布局”項(xiàng)，點(diǎn)擊“插入Div標(biāo)簽”圖標(biāo)，如圖9-5所示。（2）點(diǎn)擊圖標(biāo)后，打開“插入Div標(biāo)簽”對話框，如圖9-6所示。二、插入<div>標(biāo)簽二、插入<div>標(biāo)簽02040103（二）在<div>標(biāo)簽內(nèi)輸入內(nèi)容在該標(biāo)簽的框線內(nèi)單擊鼠標(biāo)左鍵，將光標(biāo)定位到框線內(nèi)就可以輸入內(nèi)容了。（三）刪除<div>標(biāo)簽在“設(shè)置”視圖中選中<div>標(biāo)簽，按Delete鍵即可刪除。（四）<div>標(biāo)簽嵌套單擊鼠標(biāo)左鍵，將光標(biāo)定位到<div>標(biāo)簽內(nèi)，可以繼續(xù)插入<div>標(biāo)簽。（五）Div+CSSDiv+CSS是網(wǎng)站標(biāo)準(zhǔn)中的常用術(shù)語之一，是為了與HTML網(wǎng)頁中的表格（table）定位方式加以區(qū)分。在XHTML網(wǎng)站設(shè)計(jì)標(biāo)準(zhǔn)中，主要采用Div+CSS的方式來實(shí)現(xiàn)網(wǎng)頁內(nèi)容的定位，而不再使用表格的定位方式。（六）激活A(yù)PDiv（1）激活A(yù)PDiv以后，才能在APDiv中插入內(nèi)容或?qū)ο蟆Ｒ苿?dòng)鼠標(biāo)把光標(biāo)移到APDiv內(nèi)任何位置后單擊左鍵，即可激活A(yù)PDiv。（2）此時(shí)，光標(biāo)被放在APDiv內(nèi)，就可以輸入內(nèi)容或?qū)ο罅恕Ｈ鐖D9-10所示。（3）被激活的APDiv邊框會(huì)突出顯示，并且同時(shí)會(huì)顯示出“選擇手柄”，在“AP元素”面板中，此APDiv的ID名稱apDiv1也會(huì)高亮度顯示，表示此APDiv已被激活。這時(shí)在光標(biāo)所在的位置就可以輸入內(nèi)容或?qū)ο罅?。二、插?lt;div>標(biāo)簽（七）選擇APDiv1.選擇一個(gè)APDiv的步驟（1）點(diǎn)擊“編輯”菜單，選擇“首選參數(shù)”項(xiàng)，彈出“首選參數(shù)”對話框，如圖9-11所示。（2）點(diǎn)擊“查看”菜單，選擇“可視化助理”項(xiàng)，在彈出的子菜單中選擇“不可見元素”項(xiàng)，給此項(xiàng)打上對號（√）。2.選擇多個(gè)APDiv的步驟（1）在文檔的“設(shè)計(jì)”視圖中按住Shift鍵，然后在兩個(gè)或多個(gè)AP元素的邊框內(nèi)或邊框邊界上單擊。（2）在“AP元素”面板中，按住Shift鍵，然后單擊兩個(gè)或更多個(gè)AP元素名稱。3.刪除APDiv在文檔的“設(shè)計(jì)”視圖中，或者在“AP元素”的面板中，選擇要?jiǎng)h除的一個(gè)或者多個(gè)APDiv以后，按Delete鍵即可刪除。二、插入<div>標(biāo)簽層中可以包含文本、圖像、動(dòng)畫等所有可直接插入網(wǎng)頁的對象及如表格、層等排版工具?！叭⒃趯又胁迦雽ο螅ㄒ唬┛刹迦雽拥膶ο箢愋臀谋?、圖像、動(dòng)畫、視頻、表格等一切在網(wǎng)頁中可以插入的對象，在層中都可以插入。插入的方法也基本相同。只要將鼠標(biāo)定位于層內(nèi)，再執(zhí)行插入對象的操作就可以了。（二）層的嵌套創(chuàng)建嵌套層就是在一個(gè)層內(nèi)插入另外的層。因?yàn)閷邮强梢灾丿B的所以層的嵌套不像表格嵌套那么直接。只有當(dāng)一個(gè)層的標(biāo)記被放在另一個(gè)層內(nèi)才是真正的嵌套層。我們用下面兩圖來比較一下非嵌套層與真正嵌套層的區(qū)別。21四、層的絕對定位與相對定位在Dreamweaver中，插入的層雖然都是使用的絕對（absolute）定位方式，但是插入的方式不同，帶來的效果是不同的。使用菜單插入的層是沒有定位的坐標(biāo)的，而使用鼠標(biāo)拖動(dòng)該層改變其位置后，就會(huì)寫入坐標(biāo)值。而拖拽拉出來的層的初始位置坐標(biāo)就是鼠標(biāo)開始動(dòng)作時(shí)的坐標(biāo)。相對定位可以這樣操作，先在頁面內(nèi)插入表格且設(shè)置居中，鼠標(biāo)在某單元格內(nèi)點(diǎn)一下，讓光標(biāo)在此定位，然后通過菜單插入一個(gè)層，這個(gè)層就相對與這個(gè)單元格定位了。插入一個(gè)層之后，不要修改它的位置，但是可以更改它的大小，比如把它的高與寬都改成“0”，讓它不再影響對其他內(nèi)容的編輯；如果修改位置這個(gè)層的left與top屬性出現(xiàn)之后就成了絕對定位了，變成絕對定位后可以把它的left與top屬性去掉，就恢復(fù)成相對定位了。變成“0”之后，有時(shí)子層會(huì)看不見，可以按F11鍵恢復(fù)編輯。五、使用“層”浮動(dòng)面板管理層在層的浮動(dòng)中可以進(jìn)行如圖9-16所示操作：●顯示/隱藏層：更改層的可見性?！穹乐怪丿B：若勾選這個(gè)選項(xiàng)，則層之間將不能重疊，而只能并行排列。●名稱：層的名稱?！馴軸：單擊Z軸列，輸入想要改變的數(shù)值來調(diào)整層的位置。六、APDiv與表格的相互轉(zhuǎn)換（二）將表格轉(zhuǎn)換成APDiv點(diǎn)擊“修改”菜單，選擇“轉(zhuǎn)換”命令，在彈出的子菜單中選擇“將表格轉(zhuǎn)換為APDiv”項(xiàng)，彈出“將表格轉(zhuǎn)換為APDiv”對話框。（一）將APDiv轉(zhuǎn)換成表格點(diǎn)擊“修改”菜單，選擇“轉(zhuǎn)換”命令，在彈出的子菜單中選擇“將APDiv轉(zhuǎn)換為表格”項(xiàng)，彈出“將APDiv轉(zhuǎn)換為表格”對話框。設(shè)置完成后單擊“確定”按鈕即可將選定的APDiv轉(zhuǎn)換為一個(gè)表格。七、設(shè)置層的首選參數(shù)要設(shè)置層的首選參數(shù)，可以執(zhí)行菜單欄中的“編輯/首選參數(shù)/層”命令，在彈出的對話框中選擇左側(cè)的“層”分類，此時(shí)對話框右側(cè)顯示的即為可以設(shè)置的一些新建層的選項(xiàng)，如圖9-19所示?！耧@示：確定層在默認(rèn)情況下是否可見。其選項(xiàng)為“默認(rèn)”“繼承”“可見”和“隱藏”。●寬和高：指定使用“插入層”創(chuàng)建的層的默認(rèn)寬度和高度（以像素為單位）。●背景顏色：可以指定默認(rèn)的層顯示一種背景顏色。●背景圖像：可以指定默認(rèn)的層顯示一種背景圖像?！袂短祝喝绻趯又袆t使用嵌套：指定從現(xiàn)有層邊界內(nèi)的某點(diǎn)開始繪制的層是否應(yīng)該是嵌套層。在繪制層時(shí)，按住鍵盤上的Alt鍵可暫時(shí)更改此設(shè)置。2項(xiàng)目實(shí)訓(xùn)項(xiàng)目要求：利用圖9-20及層制作網(wǎng)頁yybd.html。效果如圖9-21所示。操作提示：1.插入Div。2.創(chuàng)建內(nèi)部和外部CSS。3.應(yīng)用CSS樣式于選中的文本、圖像、表格等網(wǎng)頁元素。