項目九Div布局搜索網

Dreamweaver8中文版

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

第四頁，共二十五頁。任務一布局頁眉

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

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

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

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

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

2、層與Div標簽的轉換第十五頁，共二十五頁。使用Div標簽布局網頁，它的對齊方式只有“左對齊”和“右對齊”，如果要使Div標簽居中顯示，可以將它的邊界，特別是左邊界和右邊界設置為“自動”即可。3、Div標簽居中顯示的方法第十六頁，共二十五頁。任務三布局頁腳

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

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

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

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

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

第二十二頁，共二十五頁。

制作“送孟浩然之廣陵”網頁

第二十三頁，共二十五頁。小結本項目通過搜索網頁的制作過程，介紹了使用層和Div標簽進行網頁布局的基本方法。熟練掌握層和Div標簽的基本操作將會給網頁制作帶來極大的方便，是需要重點學習的內容之一，希望讀者能夠在具體實踐中認真領會并加以掌握。第二十四頁，共二十五頁。內容總結Dreamweaver8中文版

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