項(xiàng)目九Div布局搜索網(wǎng)

Dreamweaver8中文版

網(wǎng)頁(yè)制作基礎(chǔ)王占成第一頁(yè)，共二十五頁(yè)。項(xiàng)目九 Div──布局搜索網(wǎng)頁(yè)任務(wù)一布局頁(yè)眉任務(wù)二布局主體實(shí)訓(xùn)使用Div布局“神搜”網(wǎng)頁(yè)任務(wù)三布局頁(yè)腳第二頁(yè)，共二十五頁(yè)。層和Div標(biāo)簽這兩個(gè)布局工具具有非常獨(dú)特的功能，即可以顯示、隱藏及自由浮動(dòng)。由于層和Div標(biāo)簽使用的是同一個(gè)標(biāo)簽“<div>”，故本項(xiàng)目統(tǒng)稱Div布局。本項(xiàng)目以搜索網(wǎng)頁(yè)為例，介紹使用Div布局網(wǎng)頁(yè)的基本方法。第三頁(yè)，共二十五頁(yè)。

第四頁(yè)，共二十五頁(yè)。任務(wù)一布局頁(yè)眉

需要掌握的內(nèi)容主要有：1、創(chuàng)建層2、【層】面板3、選定層4、層【屬性】面板5、移動(dòng)層6、調(diào)整層的大小7、層的對(duì)齊操作第五頁(yè)，共二十五頁(yè)。

可以通過(guò)以下途徑來(lái)創(chuàng)建層。（1）在主菜單中選擇【插入】／【布局對(duì)象】／【層】命令。（2）將【插入】／【布局】面板上的（繪制層）按鈕拖曳到文檔窗口松開(kāi)鼠標(biāo)。（3）在【插入】／【布局】面板中單擊（繪制層）按鈕，在文檔窗口中按住鼠標(biāo)左鍵并拖曳可繪出一個(gè)自定義大小的層。如果按住Ctrl鍵不放，按住鼠標(biāo)左鍵拖曳可在文檔窗口中連續(xù)繪制多個(gè)層。

1、創(chuàng)建層第六頁(yè)，共二十五頁(yè)。在【層】面板中可以實(shí)現(xiàn)以下操作。（1）雙擊層的名稱，可以對(duì)層進(jìn)行重命名。（2）單擊層后面的數(shù)字可以修改層的z軸順序，數(shù)字大的將位于上層。（3）勾選【防止重疊】復(fù)選框可以禁止層重疊。（4）在層的名稱前面有一個(gè)眼睛圖標(biāo)，單擊眼睛圖標(biāo)可顯示或隱藏層。（5）單擊層名稱可以選定層，按住Shift鍵不放，依次單擊層可以選中多個(gè)層。2、【層】面板第七頁(yè)，共二十五頁(yè)。選定層還有以下幾種方法：（1）在【層】面板中單擊層的名稱選定層。（2）單擊文檔中的圖標(biāo)來(lái)選定層。如果沒(méi)有顯示該圖標(biāo)，可以在【首選參數(shù)】對(duì)話框的【不可見(jiàn)元素】分類中勾選【層錨記】復(fù)選框。（3）將光標(biāo)置于層內(nèi)，然后在文檔窗口底部標(biāo)簽條中選擇“<div>”標(biāo)簽。（4）單擊層的邊框線來(lái)選定層。（5）如果要選定兩個(gè)以上的層，只要按住Shift鍵，然后逐個(gè)單擊層手柄或在【層】面板中逐個(gè)單擊層的名稱即可。3、選定層第八頁(yè)，共二十五頁(yè)。

根據(jù)需要設(shè)置層【屬性】的相關(guān)參數(shù)。其中【Z軸】用來(lái)設(shè)置在垂直平面的方向上層的順序號(hào)，【溢出】用來(lái)設(shè)置層內(nèi)容超過(guò)層大小時(shí)的顯示方式，【剪輯】用來(lái)設(shè)置層的哪一部分是可見(jiàn)的。4、層【屬性】面板第九頁(yè)，共二十五頁(yè)。層具有很強(qiáng)的靈活性，可以隨意移動(dòng)到頁(yè)面中的任何位置。移動(dòng)層的方法有很多：（1）可以使用鼠標(biāo)進(jìn)行拖曳；（2）也可以先選中層然后按鍵盤(pán)上的方向鍵進(jìn)行移動(dòng)（每按1次方向鍵移動(dòng)1個(gè)像素，如果按住Shift鍵1次移動(dòng)10個(gè)像素）；（3）還可以在【屬性】面板的【左】和【上】文本框中輸入數(shù)值進(jìn)行精確定位。5、移動(dòng)層第十頁(yè)，共二十五頁(yè)?？梢愿鶕?jù)需要調(diào)整層的大小，其方法有：（1）使用鼠標(biāo)直接拖曳；（2）在【屬性】面板的【寬】和【高】文本框中輸入精確數(shù)值；（3）還可以將所有選擇層的寬度和高度變?yōu)樽詈筮x擇的層的寬度和高度。當(dāng)選擇多個(gè)層時(shí)，最后選擇的層四周的控制點(diǎn)將以實(shí)心顯示，其他的層四周的控制點(diǎn)將以空心顯示。6、調(diào)整層的大小第十一頁(yè)，共二十五頁(yè)。如果需要對(duì)多個(gè)層進(jìn)行對(duì)齊操作，直接用鼠標(biāo)拖動(dòng)層可能不太精確，通常需要使用對(duì)齊層的功能來(lái)實(shí)現(xiàn)。方法是：首先選擇需要對(duì)齊的層，然后在主菜單的【修改】／【排列順序】中選擇【左對(duì)齊】、【右對(duì)齊】【對(duì)齊上緣】或【對(duì)齊下緣】命令，即可將所有選擇的層以最后選擇的層為標(biāo)準(zhǔn)進(jìn)行對(duì)齊操作。7、層的對(duì)齊操作第十二頁(yè)，共二十五頁(yè)。任務(wù)二布局主體

需要掌握的內(nèi)容主要有：1、插入Div標(biāo)簽的方法2、層與Div標(biāo)簽的轉(zhuǎn)換3、Div標(biāo)簽居中顯示的方法第十三頁(yè)，共二十五頁(yè)。在主菜單中選擇【插入】／【布局對(duì)象】／【Div標(biāo)簽】命令，或在【插入】／【布局】面板中單擊（插入Div標(biāo)簽）按鈕打開(kāi)【插入Div標(biāo)簽】對(duì)話框進(jìn)行設(shè)置插入即可。1、插入Div標(biāo)簽的方法第十四頁(yè)，共二十五頁(yè)。在【插入】／【布局】面板中有兩個(gè)按鈕，一個(gè)是（插入Div標(biāo)簽）按鈕，另一個(gè)是（繪制層）按鈕。在源代碼中，它們使用的是同一個(gè)標(biāo)簽──“<div>”。在繪制層時(shí)，層同時(shí)被賦予了CSS樣式，而插入Div標(biāo)簽時(shí)，需要再單獨(dú)創(chuàng)建CSS樣式對(duì)它進(jìn)行控制。實(shí)際上，層與Div標(biāo)簽是同一個(gè)網(wǎng)頁(yè)元素不同的表現(xiàn)形態(tài)，通過(guò)CSS樣式可使兩者間相互轉(zhuǎn)換。例如，在【CSS規(guī)則定義】對(duì)話框的【定位】分類中，將【類型】選項(xiàng)設(shè)置為“絕對(duì)”，即表示層，否則即為Div標(biāo)簽，這是層與Div標(biāo)簽轉(zhuǎn)換的關(guān)鍵因素。

2、層與Div標(biāo)簽的轉(zhuǎn)換第十五頁(yè)，共二十五頁(yè)。使用Div標(biāo)簽布局網(wǎng)頁(yè)，它的對(duì)齊方式只有“左對(duì)齊”和“右對(duì)齊”，如果要使Div標(biāo)簽居中顯示，可以將它的邊界，特別是左邊界和右邊界設(shè)置為“自動(dòng)”即可。3、Div標(biāo)簽居中顯示的方法第十六頁(yè)，共二十五頁(yè)。任務(wù)三布局頁(yè)腳

需要掌握的內(nèi)容主要有：1、改變層的z軸順序2、層的重疊和嵌套3、層與表格的轉(zhuǎn)換第十七頁(yè)，共二十五頁(yè)。1、改變層的z軸順序

改變層的z軸順序方法：（1）可以在【屬性】面板中設(shè)置z軸值；（2）也可以在【層】面板中直接修改z軸值；（3）還可以用鼠標(biāo)指向需要改變序號(hào)的層，并按下鼠標(biāo)左鍵向上或向下進(jìn)行拖曳，當(dāng)拖曳到希望插入的兩層之間時(shí)會(huì)出現(xiàn)一條橫線，釋放鼠標(biāo)左鍵，各個(gè)層的z軸順序會(huì)做相應(yīng)的改變。第十八頁(yè)，共二十五頁(yè)。2、層的重疊和嵌套

層可以重疊，層的重疊是有次序的，這個(gè)次序通常用z軸順序來(lái)表示。其值可為正可為負(fù)，也可以是“0”，數(shù)值最大的在最頂層。層的重疊為制作一些特殊效果提供了非常方便的途徑。第十九頁(yè)，共二十五頁(yè)。

層還可以嵌套。但嵌套和重疊是不一樣的。嵌套的子層與父層是有一定關(guān)系的，而重疊的層除視覺(jué)上會(huì)有一些聯(lián)系外，沒(méi)有其他關(guān)系。創(chuàng)建嵌套層首先必須有一個(gè)父層，然后將光標(biāo)置于層當(dāng)中，再插入一個(gè)層就是嵌套層。也可以按住Ctrl鍵，在【層】面板中將某一層拖曳到另一層上面，形成嵌套層。在【層】面板中可以看到，嵌套層是呈樹(shù)狀結(jié)構(gòu)表示的，而且子層與父層的z軸順序是一樣的。層嵌套時(shí)并不意味著子層必須在父層里面，它不受父層的限制。當(dāng)子層發(fā)生位移時(shí)，父層并不發(fā)生任何變化，但是當(dāng)父層發(fā)生位移時(shí)，子層卻會(huì)隨著父層也發(fā)生位移，并且位移量都一樣，也就是說(shuō)兩者的相對(duì)位置不發(fā)生變化。第二十頁(yè)，共二十五頁(yè)。3、層與表格的轉(zhuǎn)換

在主菜單中選擇【修改】／【轉(zhuǎn)換】／【層到表格】命令，可以將層轉(zhuǎn)換為表格，如果選擇【修改】／【轉(zhuǎn)換】／【表格到層】命令，也可以將現(xiàn)有表格轉(zhuǎn)換為層。第二十一頁(yè)，共二十五頁(yè)。實(shí)訓(xùn)使用Div布局“神搜”網(wǎng)頁(yè)本項(xiàng)目主要介紹了使用層和Div標(biāo)簽布局網(wǎng)頁(yè)的基本方法，本實(shí)訓(xùn)將讓讀者進(jìn)一步鞏固所學(xué)的基本知識(shí)。要求：把“項(xiàng)目實(shí)訓(xùn)\素材”文件夾下的內(nèi)容復(fù)制到站點(diǎn)根文件夾下，然后創(chuàng)建網(wǎng)頁(yè)并使用層和Div標(biāo)簽對(duì)如圖所示的網(wǎng)頁(yè)進(jìn)行布局。制作“送孟浩然之廣陵”網(wǎng)頁(yè)

第二十二頁(yè)，共二十五頁(yè)。

制作“送孟浩然之廣陵”網(wǎng)頁(yè)

第二十三頁(yè)，共二十五頁(yè)。小結(jié)本項(xiàng)目通過(guò)搜索網(wǎng)頁(yè)的制作過(guò)程，介紹了使用層和Div標(biāo)簽進(jìn)行網(wǎng)頁(yè)布局的基本方法。熟練掌握層和Div標(biāo)簽的基本操作將會(huì)給網(wǎng)頁(yè)制作帶來(lái)極大的方便，是需要重點(diǎn)學(xué)習(xí)的內(nèi)容之一，希望讀者能夠在具體實(shí)踐中認(rèn)真領(lǐng)會(huì)并加以掌握。第二十四頁(yè)，共二十五頁(yè)。內(nèi)容總結(jié)Dreamweaver8中文版

網(wǎng)頁(yè)制作基礎(chǔ)。（3）在【插入】／【布局】面板中單擊（繪制層）按鈕，在文檔窗口中按住鼠標(biāo)左鍵并拖曳可繪出一個(gè)自定義大小的層。（2）單擊層后面的數(shù)字可以修改層的z軸順序，數(shù)字大的將位于上層。（4）在層的名稱前面有