1、 網頁設計與制作網頁設計與制作第八章使用ap div布局網頁 本章學習要點：ap div的基本概念ap div的創建和基本操作ap div與表格的相互轉換ap div綜合應用網頁設計與制作網頁設計與制作8.1 學習任務：ap div基礎知識 所謂ap div，是指存放用div標記描述的html內容的容器，用來控制瀏覽器窗口中元素的位置、層次。在dreamweaver cs3環境下，可以利用ap div靈活方便的進行頁面布局。ap div最主要的特性就是它是浮動在網頁內容之上的。也就是說，可以在網頁上任意改變其位置，實現對ap div的準確定位。ap div可以相互堆疊，通過定義ap div的層

2、次關系，可以方便實現文字陰影等效果；網頁設計與制作網頁設計與制作8.1.2 創建ap div元素工具欄 在dreamweaver中可以通過“布局”工具欄方便的創建ap div元素 在菜單欄中，選擇“插入布局”命令，可以展開“布局”工具欄。在“標準”模式下，和ap div創建有關的是“插入div標簽”按鈕和“繪制ap div”按鈕。 “插入div標簽”按鈕：單擊此按鈕，在文檔中自動插入一個ap div元素。 “繪制ap div”按鈕：單擊此按鈕，將鼠標指針移到文檔窗口中，鼠標指針變為十字狀，按下鼠標并拖動，可以繪制一個ap div元素。網頁設計與制作網頁設計與制作8.1.3 ap div元素的“

3、屬性”面板ap div“屬性”面板中各項含義如下：css-p元素：為選中的ap div元素設置名稱。名稱由數字或字母組成，不能用特殊字符。每個ap div元素的名稱是唯一的。左、上：分別設置ap div元素左邊界和上邊界相對于頁面左邊界和上邊界的距離，默認單位為像素（px）。也可以指定為pc（pica）、pt（點）、in（英寸）、mm（毫米）、厘米（cm）或%（百分比）。寬、高：分別設置ap div元素高度和寬度，單位設置同“左”、“上”屬性。z軸：設置ap div元素的堆疊次序，該值越大，則表示其在越前端顯示。可見性：設置ap div元素的顯示狀態。“可見性”右側下拉列表框包括四個可選項：d

4、efault（缺省）：選中該項，則不明確指定其可見性屬性，在大多數瀏覽器中，該ap div會繼承其父級ap div的可見性。inherit（繼承）：選擇該項，則繼承其父級ap div的可見性。visible（可見）：選擇該項，則顯示ap div及其中內容，而不管其父級ap div是否可見。hidden（隱藏）：選擇該項，則隱藏ap div及其中內容，而不管其父級ap div是否可見。背景圖像：設置ap div元素的背景圖像。可以通過單擊“文件夾”按鈕選擇本地文件，也可以在文本框中直接輸入背景圖像文件的路徑確定其位置。背景顏色：設置ap div的背景顏色，值為空表示背景為透明。類：可以將css樣

5、式表應用于ap div。溢出：設置ap div中的內容超過其大小時的處理方法。“溢出”右側下拉列表框中包括四個可選項：visible（可見）：選擇該項，當ap div中內容超過其大小時，ap div會自動向右或者向下擴展。hidden（隱藏）：選擇該項，當ap div中內容超過其大小時，ap div的大小不變，也不會出現滾動條，超出ap div內容不被顯示。scroll（滾動）：選擇該項，無論ap div中的內容是否超出ap div的大小，ap div右端和下端都會顯示滾動條。auto（自動）：選擇該項，當ap div內容超過其大小時，ap div保持不變，在ap div右端和下端都出現滾動條

6、，以使其中的內容能通過拖動滾動條顯示。剪輯：設置ap div可見區域大小。在“上”、“下”、“左”、“右”文本框中，可以指定ap div可見區域上、下、左、右端相對于ap div邊界距離。ap div經過剪輯后，只有指定的矩形區域才是可見的。 網頁設計與制作網頁設計與制作8.1.4 ap元素面板 “ap元素”面板各選項含義如下： 防止重疊：選中此選項，可以防止ap div元素之間發生重疊。不選中此復選框，ap元素則可以相互重疊。該選項主要用在ap div和表格相互轉換時，當將ap div轉換為表格，為防止瀏覽器不兼容，選中該選項，以防止ap元素相互重疊。 圖標：如果某一個ap 元素左側有該圖標

7、，表示該ap 元素可見，如果圖標變成，則不可見。如果沒有該圖標，表示該層繼承其父級ap div元素的可見性。如果沒有父級ap div元素，則父級ap div元素可以看成其本身，通常情況下，這意味著是可見的。可以通過單擊圖標控制該ap div的可見屬性。 名稱：該屬性用來顯示和更改ap div元素的名稱。如果想更改該ap div元素的名稱，可以通過雙擊名字進行更改。 z：該屬性見“屬性”面板相關設置。可以通過雙擊ap div元素的z值屬性來更改其值。網頁設計與制作網頁設計與制作8.2 案例1 創建ap div元素并在其中添加文字和圖像 學習目標在dreamweaver cs3中，創建若干ap d

8、iv元素，在其內部添加文字和圖像，并設置其屬性。 知識要點ap div元素的添加；ap div屬性設置；在ap div中插入文字；在ap div中插入圖像；創建嵌套ap div；ap div的基本操作；設置ap div元素的排列次序等。利用ap div制作的圖文混排網頁效果如圖所示。 網頁設計與制作網頁設計與制作8.3 學習任務：ap div與表格相互轉換8.3.1 將ap div元素轉換為表格網頁設計與制作網頁設計與制作轉換步驟：1）選擇“修改轉換將ap div轉換為表格”菜單命令，彈出“將ap div元素轉換為表格”對話框中，從中進行相應設置，如圖8-11所示。 “將ap div元素轉換為

9、表格”對話框各選項含義如下： “最精確”單選按鈕：將所有ap div轉換為表格。 “最小：合并空白單元”單選按鈕：將一定距離以內的ap div元素創建為相鄰的單元格，即融合其間的間隙。 “使用透明gifs”復選框：將轉換后表格的最后一行中填充為透明的gif圖像，這樣可以確保在所有的瀏覽器中表格顯示結果一致。 “置于頁面中央”復選框：選中此復選框，則生成的表格在頁面居中位置；若取消此復選框，則生成的表格在頁面中左對齊。 “防止重疊”復選框：選中此復選框，可以防止ap div重疊。 “顯示ap元素面板”復選框：選中此復選框，在轉換完成后會顯示“ap元素”面板。 “顯示網格”復選框：選中此復選框，可

10、以在轉換后的文檔中顯示網格線。 “靠齊到網格”復選框：選中此復選框，可以將轉換后的文檔靠齊到網格。2）保持默認設置。單擊【確定】按鈕，將文檔中的ap div元素轉換為表格。網頁設計與制作網頁設計與制作8.3.2 將表格轉換為ap div元素8.3.2 將表格轉換為ap div元素網頁設計與制作網頁設計與制作操作步驟：操作步驟：1）打開一個用表格布局的網頁文件，選擇“修改轉換將表格轉換為ap div”菜單命令，彈出“將表格轉換為ap div”對話框， “將表格轉換為ap div”對話框各選項含義如下： “防止重疊”復選框：選中此復選框，可以在操作ap div元素時，防止ap div元素之間相互重

11、疊。 “顯示ap div元素面板”復選框：選中此復選框，在轉換完成后會顯示“ap元素”面板。 “顯示網格”復選框：選中此復選框，可以在轉換后的文檔中顯示網格線。 “靠齊到網格”復選框：選中此復選框，可以將轉換后的文檔同網格靠齊。2）選中“防止重疊”復選框和“顯示ap div元素面板”復選框，單擊【確定】按鈕，將文檔中的表格轉換為ap div元素。網頁設計與制作網頁設計與制作8.4 案例2 使用div制作網頁下拉菜單學習目標 使用ap div元素的“顯示”和“隱藏”屬性制作下拉菜單，并熟悉ap div標簽。知識要點ap div元素的基本操作；ap div標簽的html代碼規范；網頁中的行為；使用

12、“行為”面板設置行為的方法；ap div元素“可見性”屬性使用的技巧。案例效果：當鼠標移動到導航條的相關位置時，彈出下拉菜單，當鼠標移開時，下拉菜單隱藏。鼠標經過前和鼠標經過時的頁面效果分別如圖所示。網頁設計與制作網頁設計與制作鼠標經過前的頁面 網頁設計與制作網頁設計與制作鼠標經過文字時顯示的下拉菜單鼠標經過文字時顯示的下拉菜單 網頁設計與制作網頁設計與制作8.4.1 div標簽div標簽的基本格式為： content其中，property是div標簽的屬性，value是該屬性的值。div標簽的屬性及含義如表8-1所示。網頁設計與制作網頁設計與制作div標簽屬性及其含義標簽屬性及其含義 屬性屬

13、性含義含義positionpositionrelativerelative：該：該apap元素相對于其他元素相對于其他apap元素放置元素放置absoluteabsolute：該：該apap元素相對于其所在的窗口放置元素相對于其所在的窗口放置leftleft設置設置apap元素與窗口左邊距元素與窗口左邊距toptop設置設置apap元素與窗口上邊距元素與窗口上邊距widthwidth設置設置apap元素的寬度元素的寬度heightheight設置設置apap元素的高度元素的高度clipclipautoauto：設置：設置apap元素內方塊位置為默認屬性元素內方塊位置為默認屬性inheritinherit：設置：設置apap元素內方塊位置為繼承父級元素內方塊位置為繼承父級apap元素屬性元素屬性visibilityvisibilityvisiblevisible：設置：設置apap元素為可見元素為可見hiddenhidden：設置：設置apap元素為不可見元素為不可見inheritinherit：設置：設置apap元素為繼承父級元素為繼承父級apap元素可見性元素可見性marginmargin設置設置apap元素的頁邊距屬性元素的頁邊距屬性paddingpadding設置設置apap