網(wǎng)頁制作：項(xiàng)目09使用Div布局搜索引擎頁-ppt.ppt

《網(wǎng)頁制作：項(xiàng)目09使用Div布局搜索引擎頁-ppt.ppt》由會員分享，可在線閱讀，更多相關(guān)《網(wǎng)頁制作：項(xiàng)目09使用Div布局搜索引擎頁-ppt.ppt（19頁珍藏版）》請?jiān)谘b配圖網(wǎng)上搜索。

主講：,網(wǎng)頁設(shè)計(jì)與制作——Dreamweaver8,項(xiàng)目九使用Div布局搜索引擎頁,任務(wù)一制作頁眉“TopLayer”,任務(wù)二制作主體“MainLayer”,,,項(xiàng)目九：使用Div布局搜索引擎頁,任務(wù)一,任務(wù)二,任務(wù)三制作頁腳“FootLayer”,,小結(jié),任務(wù)三,實(shí)訓(xùn),,本任務(wù)主要介紹使用層布局索引擎頁頁眉的基本方法。通過本任務(wù)的學(xué)習(xí)，應(yīng)該掌握的內(nèi)容主要有：,1.層的功能,層主要有以下幾方面的功能：由于層是絕對定位的，可以游離在文檔之上，可以利用層來浮動定位網(wǎng)頁元素。它可以包含文本、圖像甚至其他層。層的z軸屬性可以使多個(gè)層發(fā)生堆疊，也就是多重疊加的效果。層在時(shí)間軸的作用下，可以按照時(shí)間有序地發(fā)生位移和變換，從而實(shí)現(xiàn)動畫的效果。,任務(wù)一制作頁眉“TopLayer”,項(xiàng)目九：使用Div布局搜索引擎頁,制作頁眉“TopLayer”操作動畫,任務(wù)一,任務(wù)二,小結(jié),任務(wù)三,實(shí)訓(xùn),,2.通過【首選參數(shù)】對話框設(shè)置【層】默認(rèn)屬性的方法,選擇主菜單中的【編輯】／【首選參數(shù)】命令，打開【首選參數(shù)】對話框，在其中的【分類】列表框中選擇【層】選項(xiàng)，根據(jù)需要對其中的參數(shù)進(jìn)行設(shè)置。如果勾選【如果在層中則使用嵌套】復(fù)選框則指定從現(xiàn)有層邊界內(nèi)繪制的層是嵌套層。按住Alt鍵可在取消與選擇該復(fù)選框之間轉(zhuǎn)換。,任務(wù)一制作頁眉“TopLayer”,項(xiàng)目九：使用Div布局搜索引擎頁,任務(wù)一,任務(wù)二,小結(jié),任務(wù)三,實(shí)訓(xùn),,3.插入層的方法,（1）將光標(biāo)置于文檔窗口頂部，然后選擇主菜單中的【插入】／【布局對象】／【層】命令來創(chuàng)建一個(gè)層。（2）將【插入】／【布局】面板上的【繪制層】按鈕拖曳到文檔窗口，松開鼠標(biāo)后就在文檔窗口中插入了一個(gè)層。（3）在【插入】／【布局】面板中單擊【繪制層】按鈕，在文檔窗口中按住鼠標(biāo)左鍵并拖曳，也可繪出一個(gè)自定義大小的層。另外，在【插入】／【布局】面板中單擊【繪制層】按鈕，然后按住Ctrl鍵不放，按住鼠標(biāo)左鍵并拖曳可在文檔窗口中連續(xù)繪制多個(gè)層。,任務(wù)一制作頁眉“TopLayer”,項(xiàng)目九：使用Div布局搜索引擎頁,任務(wù)一,任務(wù)二,小結(jié),任務(wù)三,實(shí)訓(xùn),,4.認(rèn)識【層】面板,選擇主菜單中的【窗口】／【層】命令或者直接按F2鍵打開【層】面板。在【層】面板中可以實(shí)現(xiàn)以下操作。雙擊層的名稱，可以對層進(jìn)行重命名。單擊層后面的數(shù)字可以修改層的z軸順序，數(shù)字大的將位于上層。勾選【防止重疊】復(fù)選框可以禁止層重疊。在層的名稱前面有一個(gè)眼睛圖標(biāo)，單擊眼睛圖標(biāo)可顯示或隱藏層。單擊層的名稱可以選定該層，按住Shift鍵不放，單擊想選擇的層可以將多個(gè)層選中。,任務(wù)一制作頁眉“TopLayer”,項(xiàng)目九：使用Div布局搜索引擎頁,任務(wù)一,任務(wù)二,小結(jié),任務(wù)三,實(shí)訓(xùn),,任務(wù)一制作頁眉“TopLayer”,5.選定層的方法,在【層】面板中單擊層的名稱來選定該層。單擊文檔中的圖標(biāo)來選定層。如果沒有顯示該圖標(biāo)，可以在【首選參數(shù)】對話框的【不可見元素】分類中勾選【層錨記】復(fù)選框。將光標(biāo)置于層內(nèi)，然后在文檔窗口底邊標(biāo)簽條中選擇“”標(biāo)簽。單擊層的邊框線。如果要選定兩個(gè)以上的層，只要按住Shift鍵，然后逐個(gè)單擊層手柄或在【層】面板中逐個(gè)單擊層的名稱即可。,項(xiàng)目九：使用Div布局搜索引擎頁,任務(wù)一,任務(wù)二,小結(jié),任務(wù)三,實(shí)訓(xùn),,6.設(shè)置層屬性的方法,選定層后在層的【屬性】面板中設(shè)置層的大小和位置等參數(shù)。,任務(wù)一制作頁眉“TopLayer”,項(xiàng)目九：使用Div布局搜索引擎頁,任務(wù)一,任務(wù)二,小結(jié),任務(wù)三,實(shí)訓(xùn),,任務(wù)一制作頁眉“TopLayer”,7.層的嵌套,層也可以進(jìn)行嵌套。在某個(gè)層內(nèi)部創(chuàng)建的層稱為嵌套層或子層，嵌套層外部的層稱為父層。子層的大小和位置不受父層的限制，子層可以比父層大，位置也可以在父層之外，只是在移動父層時(shí)，子層會隨著一起移動，同時(shí)父層的顯示屬性會影響子層的顯示屬性。,8.移動層的方法,層最大的優(yōu)點(diǎn)就是具有很強(qiáng)的靈活性，可以隨意移動到頁面中的任何位置。移動層的方法通常有：（1）使用鼠標(biāo)進(jìn)行拖曳。（2）先選中層然后按鍵盤上的方向鍵進(jìn)行移動（每按1次方向鍵移動1個(gè)像素，如果按住Shift鍵1次移動10個(gè)像素。（3）在【屬性】面板的【左】和【上】文本框中輸入數(shù)值進(jìn)行精確定位。,項(xiàng)目九：使用Div布局搜索引擎頁,任務(wù)一,任務(wù)二,小結(jié),任務(wù)三,實(shí)訓(xùn),,任務(wù)一制作頁眉“TopLayer”,9.調(diào)整層大小的方法,（1）使用鼠標(biāo)直接拖曳調(diào)整層的大小。（2）在【屬性】面板的【寬】和【高】文本框中輸入數(shù)值。另外，還可以將所有選擇的層的寬度和高度變?yōu)樽詈筮x擇的層的寬度和高度。當(dāng)選擇多個(gè)層時(shí)，最后選擇的層四周的控制點(diǎn)將以實(shí)心顯示，其他的層四周的控制點(diǎn)將以空心顯示。,10.層的對齊方法,首先選擇需要對齊的層，然后在主菜單的【修改】／【排列順序】中選擇【左對齊】、【右對齊】【對齊上緣】或【對齊下緣】命令，即可將所有選擇的層以最后選擇的層為標(biāo)準(zhǔn)進(jìn)行對齊操作。,項(xiàng)目九：使用Div布局搜索引擎頁,任務(wù)一,任務(wù)二,小結(jié),任務(wù)三,實(shí)訓(xùn),,本任務(wù)主要介紹使用層和Div標(biāo)簽布局搜索引擎頁主體內(nèi)容的基本方法。通過本任務(wù)的學(xué)習(xí)，應(yīng)該掌握的內(nèi)容主要有：,1.插入Div標(biāo)簽的方法,在主菜單中選擇【插入】／【布局對象】／【Div標(biāo)簽】命令或在【插入】／【布局】面板中單擊【插入Div標(biāo)簽】按鈕打開【插入Div標(biāo)簽】對話框，在【插入】選項(xiàng)中選擇插入位置，如“在插入點(diǎn)”，在【ID】選項(xiàng)中輸入名稱，如“NavDiv”。單擊【新建CSS樣式】按鈕可以同時(shí)創(chuàng)建Div標(biāo)簽的CSS樣式，也可以單擊【確定】按鈕直接插入Div標(biāo)簽，以后再創(chuàng)建CSS樣式。,任務(wù)二制作主體“MainLayer”,項(xiàng)目九：使用Div布局搜索引擎頁,制作主體“MainLayer”操作動畫,任務(wù)一,任務(wù)二,小結(jié),任務(wù)三,實(shí)訓(xùn),,2.在Div標(biāo)簽之后繼續(xù)插入Div標(biāo)簽的方法,在【插入】／【布局】面板中單擊【插入Div標(biāo)簽】按鈕，打開【插入Div標(biāo)簽】對話框，在【插入】選項(xiàng)中選擇“在標(biāo)簽之后”，并選擇對應(yīng)的標(biāo)簽名稱，如“”，在【ID】選項(xiàng)中輸入ID名稱，如“InputDiv”，這樣在上一個(gè)Div標(biāo)簽之后創(chuàng)建了一個(gè)新Div標(biāo)簽。,任務(wù)二制作主體“MainLayer”,項(xiàng)目九：使用Div布局搜索引擎頁,任務(wù)一,任務(wù)二,小結(jié),任務(wù)三,實(shí)訓(xùn),,任務(wù)二制作主體“MainLayer”,3.層與Div標(biāo)簽的區(qū)別與相互轉(zhuǎn)換,在【插入】／【布局】面板中有兩個(gè)按鈕，一個(gè)是（插入Div標(biāo)簽）按鈕，另一個(gè)是（繪制層）按鈕。在源代碼中，它們使用的是同一個(gè)標(biāo)簽──“”。在繪制層時(shí)，層同時(shí)被賦予了CSS樣式，而插入Div標(biāo)簽時(shí)，需要再單獨(dú)創(chuàng)建CSS樣式對它進(jìn)行控制。實(shí)際上，層與Div標(biāo)簽是同一個(gè)網(wǎng)頁元素不同的表現(xiàn)形態(tài)，通過CSS樣式可使兩者間相互轉(zhuǎn)換。如在【CSS規(guī)則定義】對話框的【定位】分類中，將【類型】選項(xiàng)設(shè)置為“絕對”，即表示層，否則即為Div標(biāo)簽，這是層與Div標(biāo)簽轉(zhuǎn)換的關(guān)鍵因素。,項(xiàng)目九：使用Div布局搜索引擎頁,任務(wù)一,任務(wù)二,小結(jié),任務(wù)三,實(shí)訓(xùn),,任務(wù)二制作主體“MainLayer”,4.Div標(biāo)簽居中顯示的方法,使用Div標(biāo)簽布局網(wǎng)頁，它的對齊方式只有“左對齊”和“右對齊”，如果要使Div標(biāo)簽居中顯示，可以將它的邊界，特別是左邊界和右邊界設(shè)置為“自動”即可。Div標(biāo)簽【屬性】面板比較簡單，只有【DivID】和【類】兩個(gè)下拉菜單項(xiàng)和一個(gè)（編輯CSS）按鈕。使用Div標(biāo)簽布局網(wǎng)頁必須和CSS相結(jié)合，它的大小、背景等內(nèi)容需要通過CSS來控制。,項(xiàng)目九：使用Div布局搜索引擎頁,任務(wù)一,任務(wù)二,小結(jié),任務(wù)三,實(shí)訓(xùn),任務(wù)三制作頁腳“FootLayer”,本任務(wù)主要介紹使用層布局搜索引擎頁頁腳的基本方法。通過本任務(wù)的學(xué)習(xí)，應(yīng)該掌握的內(nèi)容主要有：,1.層的重疊,層與表格相比，最大的優(yōu)勢在于層可以重疊，而表格只能嵌套。層的重疊是有次序的，這個(gè)次序通常用z軸順序來表示。其值可正可負(fù)，也可以是“0”，數(shù)值最大的在最頂層。層的重疊為制作一些特殊效果提供了非常方便的途徑。,2.改變層的z軸順序的方法,改變層的z軸順序方法很簡單，可以在【屬性】面板中設(shè)置z軸值，也可以在【層】面板中直接修改z軸值，還可以用鼠標(biāo)指向需要改變序號的層，并按下鼠標(biāo)左鍵向上或向下進(jìn)行拖曳，當(dāng)拖曳到希望插入的兩層之間時(shí)會出現(xiàn)一條橫線，釋放鼠標(biāo)左鍵，各個(gè)層的z軸順序會做相應(yīng)的改變。,項(xiàng)目九：使用Div布局搜索引擎頁,任務(wù)一,任務(wù)二,小結(jié),任務(wù)三,實(shí)訓(xùn),任務(wù)三制作頁腳“FootLayer”,3.層的嵌套,層的嵌套和重疊是不一樣的。嵌套的子層與父層是有一定關(guān)系的，而重疊的層除視覺上會有一些聯(lián)系外，其他根本沒有什么關(guān)系。創(chuàng)建嵌套層的方法：首先必須有一個(gè)父層，然后將光標(biāo)置于層當(dāng)中，再插入一個(gè)層就是嵌套層。也可以按住Ctrl鍵，在【層】面板中將某一層拖曳到另一層上面，形成嵌套層。在【層】面板中可以看到，嵌套層是呈樹狀結(jié)構(gòu)表示的，而且子層與父層的z軸順序是一樣的。層嵌套時(shí)并不意味著子層必須在父層里面，它不受父層的限制。當(dāng)子層發(fā)生位移時(shí)，父層并不發(fā)生任何變化，但是當(dāng)父層發(fā)生位移時(shí)，子層卻會隨著父層也發(fā)生位移，并且位移量都一樣，也就是說兩者的相對位置不發(fā)生變化。,項(xiàng)目九：使用Div布局搜索引擎頁,任務(wù)一,任務(wù)二,小結(jié),任務(wù)三,實(shí)訓(xùn),實(shí)訓(xùn)使用層和Div標(biāo)簽布局網(wǎng)頁,本項(xiàng)目著重介紹了使用層和Div標(biāo)簽布局網(wǎng)頁的基本方法。實(shí)訓(xùn)將使用層和Div標(biāo)簽對如圖9-31所示網(wǎng)頁進(jìn)行布局，以進(jìn)一步鞏固層和Div標(biāo)簽的基本操作。,項(xiàng)目九：使用Div布局搜索引擎頁,實(shí)訓(xùn)結(jié)果文件見“項(xiàng)目結(jié)果”文件夾中的“shixun.htm”。,【實(shí)訓(xùn)目的】進(jìn)一步鞏固創(chuàng)建層的方法。進(jìn)一步鞏固設(shè)置層屬性的方法。進(jìn)一步鞏固插入Div標(biāo)簽及創(chuàng)建CSS樣式的方法。進(jìn)一步鞏固使用層和Div標(biāo)簽布局頁面的方法。,任務(wù)一,任務(wù)二,小結(jié),任務(wù)三,實(shí)訓(xùn),實(shí)訓(xùn)使用層和Div標(biāo)簽布局網(wǎng)頁,項(xiàng)目九：使用Div布局搜索引擎頁,任務(wù)一,任務(wù)二,小結(jié),任務(wù)三,實(shí)訓(xùn),小結(jié),本項(xiàng)目通過搜索引擎頁面的制作過程，著重介紹了使用層和Div標(biāo)簽進(jìn)行網(wǎng)頁布局的基本方法。熟練掌握層和Div標(biāo)簽的基本操作將會給網(wǎng)頁制作帶來極大的方便，是需要重點(diǎn)學(xué)習(xí)的內(nèi)容之一，希望讀者能夠在具體實(shí)踐中認(rèn)真領(lǐng)會并加以掌握。,項(xiàng)目九：使用Div布局搜索引擎頁,任務(wù)一,任務(wù)二,小結(jié),任務(wù)三,實(shí)訓(xùn),