1、Dreamweaver CS5網頁制作基礎教程 本章將介紹使用CSS+DIV布局網頁的基本知識和方法。 第5章 旅游網站CSS和DIV布局設計學習目標了解常用的頁面布局類型和技術。掌握插入和編輯Div標簽的基本方法。掌握使用CSS+DIV布局頁面的基本方法。掌握創建和設置AP Div的基本方法。掌握使用Spry布局構件的基本方法。5.1設計思路本章將以“嶗山旅游”主頁“index.htm”為例介紹使用CSS+DIV標簽布局頁面的基本方法，同時介紹AP Div和Spry布局構件的基本知識和使用方法。 5.2 了解頁面布局頁面布局類型 頁面布局技術 一字型結構 左右結構 川字型結構 二字型結構 三

2、字型結構 廠字型結構 匡字型結構 同字型結構 回字型結構 5.2.1 頁面布局類型CSS+DIV是目前網頁頁面布局的主流技術，它具有諸多優點。 頁面載入速度更快 修改設計更有效率 保持視覺的一致性 更好地被搜索引擎收錄 對瀏覽者和瀏覽器更具親和力 5.2.2 頁面布局技術5.3 使用CSS+DIV布局頁面CSS的盒子模型 id與class的區別 使用預設計的CSS+DIV布局 使用CSS+DIV自主布局頁面 在使用CSS+DIV技術進行頁面布局的過程中，會經常用到內容、填充、邊框、邊界等屬性，這些都是盒子模型的基本要素，進行頁面布局時必須明白這些術語之間的關系。 5.3.1 CSS的盒子模型

3、5.3.2 id與class的區別class在程序中稱“類”，在CSS中也叫“類”。class在同一個頁面可以無數次調用相同的類樣式，這就像調用函數一樣，不用在一個頁面里重復配置一個“類”屬性。 id是表示標簽的身份，在JS腳本中會用到id，當JS要修改一個標簽的屬性時，JS會將id名作為該標簽的唯一標識進行操作。 Dreamweaver CS5通過提供16個可以在不同瀏覽器中工作的事先設計的布局，使讀者可以輕松地使用CSS+DIV布局構建頁面。通過這些預設計的CSS+DIV布局，也可以很好地學習CSS+DIV布局的方法和技巧。 5.3.3 使用預設計的CSS+DIV布局使用Dreamweav

4、er CS5提供的預設計CSS+DIV布局是創建CSS+DIV布局頁面的最簡便方法，如果讀者是高級用戶，還可以自行使用CSS+DIV技術來布局網頁。 在菜單欄中選擇【插入】/【布局對象】/【Div標簽】命令插入Div標簽，同時設置CSS樣式。5.3.4 使用CSS+DIV自主布局頁面Div標簽是用來定義網頁內容的邏輯區域標簽，可以使用Div標簽創建列效果以及不同的顏色區域等。如果使用class或id來標記Div標簽，那么該標簽的作用會變得更加有效。在Dreamweaver CS5中，可以手動插入Div標簽并對它們應用CSS定位樣式來創建頁面布局。Div標簽以一個框的形式出現在文檔中并帶有占位符

5、文本。當將指針移到該框的邊緣上時，Dreamweaver CS5會高亮顯示該框。 頁面使用了固定寬度的布局，要使Div標簽等塊元素居中顯示，將它的左邊界和右邊界均設置為“自動”即可，這樣在瀏覽器窗口中瀏覽時，頁面將居中顯示。 5.4 創建AP Div理解基本概念 創建AP Div 編輯AP Div 使用AP Div布局頁面 1、AP元素：是分配有絕對位置的HTML頁面元素，例如，Div標簽、Table標簽等，只要為其定義了絕對位置屬性，就是AP元素，所有AP元素都將顯示在【AP 元素】面板中。2、AP Div：是具有絕對定位的Div，由于AP Div是一種能夠隨意定位的頁面元素，因此可以將AP

6、 Div放置在頁面的任何位置，頁面中所有的AP Div都會顯示在【AP元素】面板中。3、Div標簽：是具有相對定位的Div，用來定義頁面內容中的邏輯區域，可以使用Div標簽將內容塊居中，創建列效果以及創建不同的顏色區域等。 5.4.1 理解基本概念使用【首選參數】對話框的【AP元素】分類可指定新建AP Div的默認設置。 5.4.2 創建AP Div插入默認大小的AP Div：選擇【插入】/【布局對象】/【AP Div】命令插入一個默認大小的AP Div，也可將【插入】/【布局】面板上的【繪制AP Div】按鈕拖曳到文檔窗口來插入一個默認大小的AP Div。 繪制自定義大小的AP Div：在【

7、插入】/【布局】面板上單擊【繪制AP Div】按鈕，然后將鼠標指針移至文檔窗口中，當指針變為+形狀時，按住鼠標左鍵并拖曳，到適合位置釋放鼠標左鍵，將繪制一個自定義大小的AP Div 。選擇AP Div。單擊文檔中的 圖標來選定AP Div。將光標置于AP Div內，然后在文檔窗口底邊的標簽條中選擇相應的HTML標簽。單擊AP Div的邊框線，按住Shift鍵不放依次單擊AP Div的邊框線可以選定多個AP Div。 在【AP元素】面板中單擊AP Div的名稱。5.4.3 編輯AP Div縮放AP Div 選定AP Div，然后拖曳縮放手柄（AP Div周圍出現的小方塊）來改變AP Div的尺寸

8、。拖曳上或下手柄改變AP Div的高度，拖曳左或右手柄改變AP Div的寬度，拖曳4個角的任意一個縮放點同時改變AP Div的寬度和高度。選定AP Div，然后按住Ctrl鍵，每按一次方向鍵，AP Div就被改變一個像素值。選定AP Div，然后同時按住ShiftCtrl組合鍵，每按一次方向鍵，AP Div就被改變10個像素值。選定AP Div，在【屬性】面板的【寬】和【高】文本框內輸入數值（要帶單位，如100px），并按Enter鍵確認。如果同時對多個AP Div的大小進行統一調整，通常有以下兩種方法。1、選定多個AP Div，在【屬性】面板的【寬】和【高】文本框內輸入數值，并按Enter鍵

9、確認，此時文檔窗口中所有AP Div的寬度和高度全部變成了指定的寬度。2、選定多個AP Div，選擇菜單命令【修改】/【排列順序】/【設成寬度相同】或【設成高度相同】來統一寬度或高度，利用這種方法將以最后選定的AP Div的寬度或高度為標準。移動AP Div 1、選定AP Div后，當鼠標指針靠近縮放手柄，變為 形狀時，按住鼠標左鍵并拖曳，AP Div將跟著鼠標的移動而發生位移。2、選定AP Div，然后按4個方向鍵，向4個方向移動AP Div。每按一次方向鍵，將使AP Div移動1個像素值的距離。3、選定AP Div，按住Shift鍵，然后按4個方向鍵，向4個方向移動AP Div。每按一次方

10、向鍵，將使AP Div移動10個像素值的距離。4、選定AP Div，在【屬性】面板的【左】和【上】文本框內輸入數值（要帶單位，如150px），并按Enter鍵確認。對齊AP Div 對齊功能可以使兩個或兩個以上的AP Div按照某一邊界對齊。對齊AP Div的方法是，首先將所有AP Div選定，然后選擇菜單命令【修改】/【排列順序】中的相應選項即可。如選擇【對齊下緣】命令，將使所有被選中的AP Div的底邊按照最后選定AP Div的底邊對齊，即所有AP Div的底邊都排列在一條水平線上。 在本例中，所有AP Div的【左】和【上】參數設置都是相對其上層容器Div標簽“container”左上角

11、的，而且都是水平和垂直方向上的絕對值，這也是絕對定位的特點。這與Div標簽使用相對位置定位，后一個Div標簽要參照前一個Div標簽的位置來決定自己的位置是不一樣的。在使用AP Div布局頁面的過程中，設置好【屬性】面板的【左】和【上】以及【寬】和【高】參數特別重要，它們決定著頁面的布局效果。 5.4.4 使用AP Div布局頁面5.5 使用Spry布局構件Spry菜單欄構件 Spry選項卡式面板構件 Spry菜單欄構件是一組可導航的菜單按鈕，當將鼠標指針懸停在其中的某個按鈕上時，將顯示相應的子菜單。在菜單欄中選擇【插入】/【Spry】/【Spry菜單欄】命令，打開【Spry菜單欄】對話框進行設置即可。5.5.1 Spry菜單欄構件Spry選項卡式面板構件用來將內容存儲到緊湊空間中，站點訪問者可通過單擊要