第5章 旅游網(wǎng)站CSS和DIV布局設(shè)計

1、Dreamweaver CS5網(wǎng)頁制作基礎(chǔ)教程 本章將介紹使用CSS+DIV布局網(wǎng)頁的基本知識和方法。 第5章 旅游網(wǎng)站CSS和DIV布局設(shè)計學(xué)習(xí)目標(biāo)了解常用的頁面布局類型和技術(shù)。掌握插入和編輯Div標(biāo)簽的基本方法。掌握使用CSS+DIV布局頁面的基本方法。掌握創(chuàng)建和設(shè)置AP Div的基本方法。掌握使用Spry布局構(gòu)件的基本方法。5.1設(shè)計思路本章將以“嶗山旅游”主頁“index.htm”為例介紹使用CSS+DIV標(biāo)簽布局頁面的基本方法，同時介紹AP Div和Spry布局構(gòu)件的基本知識和使用方法。 5.2 了解頁面布局頁面布局類型 頁面布局技術(shù) 一字型結(jié)構(gòu) 左右結(jié)構(gòu) 川字型結(jié)構(gòu) 二字型結(jié)構(gòu) 三

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

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

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

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

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

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

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

9、確認(rèn)，此時文檔窗口中所有AP Div的寬度和高度全部變成了指定的寬度。2、選定多個AP Div，選擇菜單命令【修改】/【排列順序】/【設(shè)成寬度相同】或【設(shè)成高度相同】來統(tǒng)一寬度或高度，利用這種方法將以最后選定的AP Div的寬度或高度為標(biāo)準(zhǔn)。移動AP Div 1、選定AP Div后，當(dāng)鼠標(biāo)指針靠近縮放手柄，變?yōu)?形狀時，按住鼠標(biāo)左鍵并拖曳，AP Div將跟著鼠標(biāo)的移動而發(fā)生位移。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，在【屬性】面板的【左】和【上】文本框內(nèi)輸入數(shù)值（要帶單位，如150px），并按Enter鍵確認(rèn)。對齊AP Div 對齊功能可以使兩個或兩個以上的AP Div按照某一邊界對齊。對齊AP Div的方法是，首先將所有AP Div選定，然后選擇菜單命令【修改】/【排列順序】中的相應(yīng)選項即可。如選擇【對齊下緣】命令，將使所有被選中的AP Div的底邊按照最后選定AP Div的底邊對齊，即所有AP Div的底邊都排列在一條水平線上。 在本例中，所有AP Div的【左】和【上】參數(shù)設(shè)置都是相對其上層容器Div標(biāo)簽“container”左上角

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