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

1、Dreamweaver CS5網(wǎng)頁制作基礎(chǔ)教程 本章將介紹使用CSS+DIV布局網(wǎng)頁的基本知識(shí)和方法。 第5章 旅游網(wǎng)站CSS和DIV布局設(shè)計(jì)學(xué)習(xí)目標(biāo)了解常用的頁面布局類型和技術(shù)。掌握插入和編輯Div標(biāo)簽的基本方法。掌握使用CSS+DIV布局頁面的基本方法。掌握創(chuàng)建和設(shè)置AP Div的基本方法。掌握使用Spry布局構(gòu)件的基本方法。5.1設(shè)計(jì)思路本章將以“嶗山旅游”主頁“index.htm”為例介紹使用CSS+DIV標(biāo)簽布局頁面的基本方法，同時(shí)介紹AP Div和Spry布局構(gòu)件的基本知識(shí)和使用方法。 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)點(diǎn)。 頁面載入速度更快 修改設(shè)計(jì)更有效率 保持視覺的一致性 更好地被搜索引擎收錄 對(duì)瀏覽者和瀏覽器更具親和力 5.2.2 頁面布局技術(shù)5.3 使用CSS+DIV布局頁面CSS的盒子模型 id與class的區(qū)別 使用預(yù)設(shè)計(jì)的CSS+DIV布局 使用CSS+DIV自主布局頁面 在使用CSS+DIV技術(shù)進(jìn)行頁面布局的過程中，會(huì)經(jīng)常用到內(nèi)容、填充、邊框、邊界等屬性，這些都是盒子模型的基本要素，進(jìn)行頁面布局時(shí)必須明白這些術(shù)語之間的關(guān)系。 5.3.1 CSS的盒子模型

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

4、er CS5提供的預(yù)設(shè)計(jì)CSS+DIV布局是創(chuàng)建CSS+DIV布局頁面的最簡便方法，如果讀者是高級(jí)用戶，還可以自行使用CSS+DIV技術(shù)來布局網(wǎng)頁。 在菜單欄中選擇【插入】/【布局對(duì)象】/【Div標(biāo)簽】命令插入Div標(biāo)簽，同時(shí)設(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)簽的作用會(huì)變得更加有效。在Dreamweaver CS5中，可以手動(dòng)插入Div標(biāo)簽并對(duì)它們應(yīng)用CSS定位樣式來創(chuàng)建頁面布局。Div標(biāo)簽以一個(gè)框的形式出現(xiàn)在文檔中并帶有占位符

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

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

7、插入】/【布局】面板上單擊【繪制AP Div】按鈕，然后將鼠標(biāo)指針移至文檔窗口中，當(dāng)指針變?yōu)?形狀時(shí)，按住鼠標(biāo)左鍵并拖曳，到適合位置釋放鼠標(biāo)左鍵，將繪制一個(gè)自定義大小的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的邊框線可以選定多個(gè)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個(gè)角的任意一個(gè)縮放點(diǎn)同時(shí)改變AP Div的寬度和高度。選定AP Div，然后按住Ctrl鍵，每按一次方向鍵，AP Div就被改變一個(gè)像素值。選定AP Div，然后同時(shí)按住ShiftCtrl組合鍵，每按一次方向鍵，AP Div就被改變10個(gè)像素值。選定AP Div，在【屬性】面板的【寬】和【高】文本框內(nèi)輸入數(shù)值（要帶單位，如100px），并按Enter鍵確認(rèn)。如果同時(shí)對(duì)多個(gè)AP Div的大小進(jìn)行統(tǒng)一調(diào)整，通常有以下兩種方法。1、選定多個(gè)AP Div，在【屬性】面板的【寬】和【高】文本框內(nèi)輸入數(shù)值，并按Enter鍵

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

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

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