第4章網(wǎng)頁設(shè)計(jì)實(shí)戰(zhàn)案例

第4章

網(wǎng)頁設(shè)計(jì)實(shí)戰(zhàn)案例內(nèi)容簡介本章將向讀者介紹實(shí)際網(wǎng)頁設(shè)計(jì)時所需掌握的各種技能。例如，首先需要了解網(wǎng)頁設(shè)計(jì)的流程、選擇一款合適的開發(fā)工具以及了常見的網(wǎng)頁布局結(jié)構(gòu)。接下來，需要掌握如何設(shè)計(jì)布局、使布局標(biāo)準(zhǔn)化的方法以及布局時的理論知識。最后通過3個實(shí)戰(zhàn)案例講解HTML中使用DIV結(jié)合CSS實(shí)現(xiàn)網(wǎng)頁常見效果的方法。本章重點(diǎn)：了解網(wǎng)頁設(shè)計(jì)流程熟悉常用的網(wǎng)頁設(shè)計(jì)工具掌握Dreamweaver的基本操作熟悉常見網(wǎng)頁布局結(jié)構(gòu)掌握居中和自適應(yīng)布局的設(shè)計(jì)了解網(wǎng)站重構(gòu)的意義和方法理解區(qū)塊的概念及定義方法掌握定位區(qū)塊的方法了解空白邊疊加產(chǎn)生的原因及解決方法4.1網(wǎng)頁設(shè)計(jì)流程

為了加快網(wǎng)站建設(shè)的速度和減少失誤，應(yīng)該采用一定的制作流程來策劃、設(shè)計(jì)、制作和發(fā)布網(wǎng)站。通過使用制作流程確定制作步驟，以確保每一步順利完成，而不影響下一步的進(jìn)行。理想的制作流程能幫助設(shè)計(jì)者解決策劃網(wǎng)站的繁瑣性，減小項(xiàng)目失敗的風(fēng)險(xiǎn)。制作流程的第一階段是規(guī)劃項(xiàng)目和采集信息，接著是網(wǎng)站規(guī)劃和設(shè)計(jì)網(wǎng)頁，最后是上傳和維護(hù)網(wǎng)站階段。4.2網(wǎng)頁設(shè)計(jì)工具

“工欲善其事，必先利其器。”

使用不同的網(wǎng)頁設(shè)計(jì)工具并不會影響設(shè)計(jì)網(wǎng)頁質(zhì)量的好壞。但是，如果擁有一款功能強(qiáng)大、使用簡單的網(wǎng)頁設(shè)計(jì)工具往往會使我們的工作變得事倍功半，提高網(wǎng)頁開發(fā)效率。下面介紹幾款比較常用的網(wǎng)頁設(shè)計(jì)工具。4.2.1記事本

使用Windows系統(tǒng)自帶的記事本也可以編輯網(wǎng)頁。只需要在保存文檔時，以.html或者.htm為后綴名進(jìn)行保存即可。使用記事本編輯網(wǎng)頁，沒有語法檢查、沒有代碼格式化、沒有自動提示，使網(wǎng)頁開發(fā)非常困難，因此并不推薦使用，如圖4-2所示。

圖4-2記事本編輯HTML文檔4.2.2FrontPage

FrontPage是微軟公司出品的一款網(wǎng)頁制作入門級軟件。FrontPage作為一款中低端網(wǎng)頁制作軟件擁有廣泛的用戶群，F(xiàn)rontPage的特點(diǎn)是簡單、易學(xué)、易用，正是這些特點(diǎn)吸引了絕大多數(shù)的網(wǎng)頁設(shè)計(jì)初學(xué)者的眼光。FrontPage的多個版本中FrontPage2003被用戶使用最廣泛，其主界面如圖4-3所示。4.2.3DreamweaverDreamweaver是Adobe公司的產(chǎn)品，它與Flash、Fireworks并稱網(wǎng)頁三劍客，是網(wǎng)頁制作工具界的霸主。Dreamweaver是集網(wǎng)頁制作和管理網(wǎng)站于一身的所見即所得網(wǎng)頁編輯器，它是第一套針對專業(yè)網(wǎng)頁設(shè)計(jì)師特別開發(fā)的視覺化網(wǎng)頁開發(fā)工具，利用它可以輕而易舉地制作出充滿動感的網(wǎng)頁。Dreamweaver的主界面如圖4-4所示。4.2.3Dreamweaver

圖4-4Dreamweaver主界面Dreamweaver主要有以下優(yōu)點(diǎn)：最佳的制作效率Dreamweaver可以使用鼠標(biāo)拖拽的方式快速的放入頁面元素，它的智能提示的功能使你更加愜意的編寫代碼網(wǎng)站管理Dreamweaver使用網(wǎng)站地圖可以很方便的管理站點(diǎn)資源和文件無可比擬的控制能力Dreamweaver是惟一提供RoundtripHTML、視覺化編輯與原始碼編輯同步的設(shè)計(jì)工具集成動態(tài)開發(fā)語言Dreamweaver還集成了動態(tài)程序開發(fā)語言，完全支持對ASP、.NET、PHP、JS的基本語言和連接操作數(shù)據(jù)庫的功能4.2.4實(shí)戰(zhàn)——制作個人主頁

在設(shè)計(jì)個人主頁時，可以使用表格來控制頁面的版式，再使用圖文混排的方式進(jìn)行布局。除此之外，還可以通過設(shè)置文本的大小、顏色、對齊方式等屬性，使網(wǎng)頁更加美觀，并對一些文本可以突出顯示。另外可以使用圖片和CSS樣式來進(jìn)行修飾效果。具體步驟如下：（1）打開Dreamweaver新建一個空白的HTML文件，保存為index.html。（2）在【標(biāo)題】文本框中輸入“歡迎光臨我的主頁”，按Ctrl＋S保存文檔。在空白頁面中右擊，選擇【頁面屬性】命令打開【頁面屬性】對話框，在對話框中設(shè)置【左邊距】、【右邊距】、【上邊距】和【下邊距】都為0，單擊【確定】按鈕，如圖4-5所示。4.2.4實(shí)戰(zhàn)——制作個人主頁

圖4-5設(shè)置頁面屬性和標(biāo)題（3）單擊【常用】選項(xiàng)卡中的【表格】按鈕

，打開【表格】對話框，設(shè)置【行數(shù)】和【列數(shù)】均為1，【表格寬度】為100％，【邊框?qū)挾取繛?像素，單擊【確定】創(chuàng)建第一個表格，如圖4-6所示。

圖4-6插入1行1列表格

圖4-7設(shè)置表格背景圖片4.2.4實(shí)戰(zhàn)——制作個人主頁（4）單擊選中這個單元格，在【屬性】面板上設(shè)置單元格的高度為100。進(jìn)入【拆分】視圖，輸入代碼“background="images/header.gif"”為單元格設(shè)置一張背景圖片，如圖4-7所示。（5）在單元格中輸入“我的個人主頁”，然后在【屬性】面板中設(shè)置【字體】為“黑體”，【大小】為28，【文本顏色】為#FDFDE0，如圖4-8所示。圖4-8設(shè)置標(biāo)題文字的字體屬性

圖4-9設(shè)置1行6列表格屬性4.2.4實(shí)戰(zhàn)——制作個人主頁(6）接下來制作導(dǎo)航欄目。單擊【常用】選項(xiàng)卡中的【表格】按鈕，創(chuàng)建第二個表格，設(shè)置為6列、間距為1。選擇表格，在【屬性】面板中設(shè)置表格的【行】、【列】、【寬】、【間距】、【邊框】以及【背景顏色】為#006600，如圖4-9所示。（7）單擊第二個表格，然后單擊標(biāo)記<tr>選中該行，在【屬性】面板中，設(shè)置【高】為18、【背景顏色】為#669900、【水平】對齊方式為“居中對齊”，【垂直】為“底部”、字體【大小】為12、【字體顏色】為#EFF6D6，如圖4-10所示。

圖4-10設(shè)置單元格屬性

圖4-11設(shè)置菜單文字4.2.4實(shí)戰(zhàn)——制作個人主頁（8）選中前5個單元格，設(shè)置它們的寬度為120，分別輸入文字“我的日記”、“我的收藏”、“我的相冊”、“我的朋友”和“給我留言”。（9）打開【頁面屬性】對話框，設(shè)置頁面的【背景顏色】為#FDFDE0。單擊【常用】選項(xiàng)卡中的【表格】按鈕

，設(shè)置參數(shù)為1行2列，【邊框粗細(xì)】、【單元格邊距】、【單元格間距】均為0，單擊【確定】按鈕，創(chuàng)建第三個表格。（10）將光標(biāo)置于右邊的單元格中，單擊【常用】選項(xiàng)卡中的【圖像】按鈕，在打開的【選擇圖像源文件】對話框中，選擇圖像tree.jpg，單擊【確定】按鈕返回。（11）將光標(biāo)置于左邊的單元格，在【屬性】面板中設(shè)置它的【垂直】對齊方式為“頂端”。單擊【常用】選項(xiàng)卡中的【表格】按鈕

，設(shè)置參數(shù)為4行1列，【表格寬度】為90%，【邊框粗細(xì)】、【單元格邊距】、【單元格間距】均為0，單擊【確定】按鈕，創(chuàng)建第四個表格。（12）將光標(biāo)置于第一個單元格，輸入文章標(biāo)題，在【屬性】面板中設(shè)置文字的大小、顏色、對齊方式以及單元格的高度、對齊方式等參數(shù)。（13）在第二個單元格中輸入文章的正文，在【屬性】面板中設(shè)置文字的大小和顏色。（14）將光標(biāo)置于第3個單元格中，設(shè)置它的高度為50。單擊【常用】選項(xiàng)卡中的【表格】按鈕

，設(shè)置參數(shù)為1行7列，【邊框粗細(xì)】、【單元格邊距】、【單元格間距】均為0，單擊【確定】按鈕，創(chuàng)建一個嵌套表格。4.2.4實(shí)戰(zhàn)——制作個人主頁（15）將光標(biāo)置于第4個單元格中，設(shè)置它的高度為50，輸入版權(quán)信息。（16）至此個人網(wǎng)站的首頁制作完成，按Ctrl＋S保存文檔，再按F12就可以在IE窗口中預(yù)覽網(wǎng)頁效果了。4.3網(wǎng)頁布局

網(wǎng)頁設(shè)計(jì)已經(jīng)漸漸走向成熟，毫無修飾的網(wǎng)站必定會很快地被人遺忘，所以在制作網(wǎng)站之前，首先要考慮網(wǎng)站的整體視覺效果。在網(wǎng)站整體視覺效果中，主要是網(wǎng)頁的色彩搭配與網(wǎng)頁布局。前者決定了瀏覽該網(wǎng)站的第一印象；而后者則決定網(wǎng)站中的信息是否為合理的安排。

下面向讀者介紹常見的網(wǎng)頁布局結(jié)構(gòu)，設(shè)計(jì)居中和自適應(yīng)網(wǎng)頁布局的方法，以及DIV+CSS布局網(wǎng)頁的內(nèi)容。4.3.1常見網(wǎng)頁布局結(jié)構(gòu)網(wǎng)頁設(shè)計(jì)也屬于平面設(shè)計(jì)，所以平面設(shè)計(jì)中的構(gòu)成原理同樣適用于網(wǎng)頁設(shè)計(jì)。網(wǎng)頁布局可以從兩方面理解，一種是結(jié)構(gòu)布局，另一種是藝術(shù)布局。在介紹網(wǎng)頁結(jié)構(gòu)布局之前，先來了解網(wǎng)頁布局的基本概念。頁面尺寸與顯示器大小及分辨率有關(guān)系，網(wǎng)頁的局限性就在于網(wǎng)頁無法突破顯示器的范圍，而且因?yàn)闉g覽器也將占去不少空間，留下給網(wǎng)頁的頁面范圍變得越來越小。1．“國”字型網(wǎng)頁布局“國”字型也可以稱為“同”字型，是一些大型網(wǎng)站所喜歡的類型，即最上面是網(wǎng)站的標(biāo)題以及橫幅廣告條，接下來就是網(wǎng)站的主要內(nèi)容，左右分列一些兩小條內(nèi)容，中間是主要部分，與左右一起羅列到底，最下面是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明等。2．拐角型網(wǎng)頁布局拐角型結(jié)構(gòu)與上一種只是形式上的區(qū)別，其實(shí)是很相近的，上面是標(biāo)題及廣告橫幅，接下來的左側(cè)或者右側(cè)是一窄列鏈接等，正文是在很寬的區(qū)域中，下面也是一些網(wǎng)站的輔助信息。3．左右框架型網(wǎng)頁布局這是一種左右為分別兩頁的框架結(jié)構(gòu)，一般左面是導(dǎo)航鏈接，有時最上面會有一個小的標(biāo)題或標(biāo)致，右側(cè)是正文。4．封面型網(wǎng)頁布局這種類型基本上是出現(xiàn)在一些網(wǎng)站的首頁，大部分為一些精美的平面設(shè)計(jì)結(jié)合一些小的動畫，放上幾個簡單的鏈接或者僅是一個“進(jìn)入”的鏈接甚至直接在首頁的圖片上做鏈接而沒有任何提示。4.3.2設(shè)計(jì)居中布局

布局的居中設(shè)計(jì)在目前網(wǎng)頁布局中的應(yīng)用非常廣泛。所以，如何在CSS中設(shè)計(jì)居中的頁面布局也是大多數(shù)開發(fā)人員首先要學(xué)的技能之一。要使用CSS實(shí)現(xiàn)讓頁面居中主要有兩個基本方法：一個方法是使用自動空白邊；另一個方法是使用定位和負(fù)值的空白邊。1．使用自動空白邊設(shè)計(jì)居中這種方法適用于讓頁面上的div容器在屏幕上水平居中。2．使用定位和負(fù)值的空白邊設(shè)計(jì)居中與第一種方法類似，這種方法同樣要定義容器的寬度。然后，將容器的position屬性設(shè)置為“relative”，將left屬性設(shè)置為“50%”，就會把容器的左邊緣定位在頁面的中間。4.3.3設(shè)計(jì)自適應(yīng)布局

顧名思義，自適應(yīng)布局是指頁面中容器的大小會隨著瀏覽器的大小自動調(diào)整。自適應(yīng)布局可以分為浮動布局、流體布局和彈性布局三種。1．浮動布局在基于浮動的網(wǎng)頁布局中，需要設(shè)置希望定位元素的寬度，然后再控制他們在調(diào)整時是向左或者向右進(jìn)行浮動。浮動布局的經(jīng)典應(yīng)用分為兩種情況：兩列和三列的浮動布局。2．流體布局在浮動布局中都是使用像素為單位來定義寬度，因此這種布局類型又稱為固定布局。在使用流體布局時，尺寸是使用百分?jǐn)?shù)而是像素設(shè)置的。這樣可以使流體布局能夠相對于瀏覽器容器進(jìn)行伸縮。3．彈性布局彈性布局是相對于字號（而不是瀏覽器寬度）來設(shè)置元素寬度的。通過以em為單位設(shè)置寬度，可以確保在字號增加時整個布局也跟著擴(kuò)大。這可以將行保持在可閱讀范圍內(nèi)，對于視力弱或有認(rèn)知障礙的人尤其有用。4.3.4DIV+CSS重構(gòu)網(wǎng)站布局

網(wǎng)站的重構(gòu)可以理解為改變舊的HTML表格布局，使用新的符合Web標(biāo)準(zhǔn)的網(wǎng)站結(jié)構(gòu)及代碼改良的方式。將現(xiàn)有網(wǎng)站轉(zhuǎn)向Web標(biāo)準(zhǔn)設(shè)計(jì)可以稱之為網(wǎng)站重構(gòu)。網(wǎng)站重構(gòu)的意義在于建立良好的可擴(kuò)充性，通過DIV布局來進(jìn)行數(shù)據(jù)結(jié)構(gòu)的設(shè)計(jì)便于以后更多DIV數(shù)據(jù)的擴(kuò)充，而CSS對ID、CLASS這些元素的樣式定義也使得可維護(hù)性大大提高。

與傳統(tǒng)的表格布局頁面相比，DIV+CSS方式的最大優(yōu)勢就是結(jié)構(gòu)清晰、維護(hù)簡單和易于理解。在這種方式中，DIV（層）負(fù)責(zé)在頁面中表現(xiàn)內(nèi)容的層次和結(jié)構(gòu)，CSS則來控制內(nèi)容表現(xiàn)方式和位置。4.4布局理論

所有CSS布局技術(shù)都是依賴于三個基本概念：定位、浮動和空白邊的操作。不同的技術(shù)其實(shí)沒有本質(zhì)的差異，而且如果理解了這些概念，那么創(chuàng)建自己的布局和理解網(wǎng)頁的結(jié)構(gòu)也是相當(dāng)容易的。通過上節(jié)對網(wǎng)布布局的介紹，本節(jié)詳細(xì)介紹布局時所需掌握的理論知識。4.4.1區(qū)塊的概念

理解區(qū)塊的概念是理解DIV+CSS制作頁面的基礎(chǔ)，他控制頁面中元素的安排和顯示方式。需要注意區(qū)塊的實(shí)際應(yīng)用以及絕對定位和相對定位，掌握如何控制頁面中的每個元素。

通常在使用CSS設(shè)計(jì)頁面布局時，所有的頁面元素都包含在一個矩形框內(nèi)，稱為元素框。元素框描述了元素及其在頁面布局中所占的空間大小，因此元素框可以影響其他元素的位置及大小。例如，頁面中第一個元素框?yàn)?0px，那么下一個元素框就處于離頂部10px距離的位置。如果第一個元素框增加為20px，則下一個元素框就要再下移10px。而整個頁面就是由這些個大大小小，但不會重疊的元素框形成的。4.4.2定義區(qū)塊

我們知道，區(qū)塊由內(nèi)容、邊距、填充及邊框共同構(gòu)成。除內(nèi)容外，其他都是可選的，這就會產(chǎn)生一個問題。例如，對于div標(biāo)記在IE6瀏覽器中會有2像素的邊距，而其他瀏覽器則沒有問題。解決方法是可以通過將元素的margin和padding設(shè)置為0來覆蓋這個瀏覽器的默認(rèn)值。實(shí)現(xiàn)時，可以分別進(jìn)行，也可以使用通用選擇器對所有元素進(jìn)行設(shè)置。下面給出的是使用通用選擇器時的CSS樣式：*{ margin:0; padding:0;}

另外，在CSS中的width和height屬性指的是內(nèi)容區(qū)域的寬度和高度。增加邊框、邊距和填充不會影響內(nèi)容區(qū)域的大小，但是會增加區(qū)塊的總大小。假設(shè)，區(qū)塊的每個邊上有30像素的邊距和20像素的填充，如果希望這個區(qū)塊的寬度達(dá)到500像素，就需要將內(nèi)容的寬度設(shè)置為400像素，CSS樣式如下：4.4.2定義區(qū)塊#Page{ width:400px; margin:30px; padding:20px;}

使用上述CSS樣式后，Page容器所定義的區(qū)塊寬度即達(dá)到500像素，圖4-28中給出上述CSS樣式的作用示意圖。

圖4-28定義區(qū)塊4.4.3定位定位是CSS設(shè)計(jì)頁面中的重要概念之一，用于控制頁面元素的顯示方式。如果習(xí)慣于用表格來控制布局，那么這些概念最初可能有點(diǎn)復(fù)雜，不宜理解?？赏ㄟ^在實(shí)際使用過程中逐漸掌握區(qū)塊的復(fù)雜性，定位分為絕對定位和相對定位兩種類型。1．絕對定位如果元素的定位類型為絕對定位，那么其顯示的位置將參照瀏覽器左上角為開始點(diǎn)，其偏移方向及距離將配合邊偏移屬性的設(shè)定進(jìn)行定位，并且是浮動正常元素之上的。定義了絕對定位的元素將固定于頁面中的某個區(qū)域，而且不會隨著頁面變化而變化。

如果元素中還包含有邊距和間隙，則元素的定位是在元素總的區(qū)域內(nèi)根據(jù)絕對定位的邊偏移屬性值而設(shè)定的，如圖4-29所示。圖中的灰色區(qū)域顯示了包含邊距和間隙的元素塊應(yīng)用偏移屬性在頁面中的絕對定位。4.4.3定位2．相對定位

相對定位是以上級元素的原始點(diǎn)為參照點(diǎn)，然后再配合偏移屬性對元素塊進(jìn)行定位。如果元素?zé)o上級元素，則以body元素為參照點(diǎn)；如果上級元素有邊距或間隙屬性，則參照點(diǎn)以上級元素的內(nèi)容區(qū)域?yàn)樵键c(diǎn)進(jìn)行定位，如圖4-30所示。圖中顯示了設(shè)定了邊偏移屬性的元素塊，在應(yīng)用相對定位之后是相對其上級元素的內(nèi)容來進(jìn)行定位的。圖4-30相對定位示意圖4.4.4實(shí)戰(zhàn)——具有固定位置的廣告框

很多網(wǎng)站通常會在頁面中放置一些廣告框，當(dāng)然如果將廣告作為頁面模塊顯得不夠醒目。所以很多站長喜歡把廣告做成一直懸停在頁面的側(cè)邊欄上。這樣可以彌補(bǔ)頁面的空白，也可以使廣告更加醒目。

要實(shí)現(xiàn)上面的效果，通常做法是使用JavaScript控制廣告模塊的位置，這種做法有一種拖拽的延遲效果。其實(shí)利用布局中的絕對定位也可以使廣告框固定在瀏覽器窗口的某一位置。這樣在瀏覽器中頁面滾動的時候廣告似乎和窗口是渾然一體的，完全不會晃動。具體步驟如下：（1）創(chuàng)建一個名為position.html的HTML文件。（2）在文件所在目錄下新建imgs目錄存放網(wǎng)頁的圖片素材，新建css目錄存放樣式表文件。（3）在css目錄中創(chuàng)建一個CSS樣式表文件，命名為position.css。（4）修改position.css文件，添加樣式表代碼，如下所示：4.4.4實(shí)戰(zhàn)——具有固定位置的廣告框@charset"utf-8";/*CSSDocument*/#ad{ background-image:url(../imgs/ad_bg.gif); height:126px; width:211px; bottom:0; right:0; position:fixed; padding:9px; font-family:"宋體",Arial;}#adspan{ margin:00015px; font-size:14px; font-weight:700; color:#FFF;}#adulli{ color:#FFF; font-size:12px; padding:5px;4.4.4實(shí)戰(zhàn)——具有固定位置的廣告框<linkrel="stylesheet"type="text/css"href="css/position.css"/>

（5）打開position.html文件，在head部分引入剛才創(chuàng)建的CSS樣式表文件，代碼如下：（6）在頁面body部分添加顯示QQ群號信息的頁面元素，代碼如下：<divid="ad"><span>窗內(nèi)QQ群號</span><ul><li>QQ群1：33925615</li><li>QQ群2：45368980</li><li>QQ群3：107423140</li><li>QQ群4：7858178</li></ul></div>4.4.4實(shí)戰(zhàn)——具有固定位置的廣告框（7）在position.html文件中添加其他的頁面內(nèi)容，最后保存文件。（8）在Chrome瀏覽器中運(yùn)行position.html頁面，運(yùn)行結(jié)果如圖4-31所示。

圖4-31固定定位廣告框運(yùn)行結(jié)果4.4.5空白邊疊加

簡單來說，當(dāng)兩個垂直空白邊相遇時，他們將形成一個空白邊。這個空白邊的高度等于兩個發(fā)生疊加的空白邊中的較大者。

當(dāng)一個元素出現(xiàn)在另一個元素上面時，第一個元素的低空白邊與第二個元素的頂空白邊發(fā)生疊加。例如，下面的CSS樣式代碼：#Box1{ height:40px; border:1pxsolid#000; margin:30px; background-color:#CCC;}#Box2{ margin:30px; border:1pxsolid#000; background-color:#CCC; height:40px;4.4.5空白邊疊加

兩個元素的空白邊疊加效果如圖4-32所示。

圖4-32空白邊疊加

當(dāng)一個元素包含在另一個元素中時（假設(shè)沒有填充或邊框?qū)⒖瞻走叿指糸_），他們的頂和底空白邊也會發(fā)生疊加。還有一種情況，假設(shè)有一個空元素，他有空白邊，但是沒有邊框和填充。在這種情況下，頂空白邊與底空白邊就碰到了一起，此時也會發(fā)生疊加。4.5實(shí)戰(zhàn)——制作網(wǎng)頁導(dǎo)航條

每個網(wǎng)頁都有一個導(dǎo)航條，它通常位于頁面Logo的下方，呈水平方向顯示。導(dǎo)航條可以使網(wǎng)站的結(jié)構(gòu)比較清晰，更容易閱讀和維護(hù)。本次實(shí)戰(zhàn)將使用HTML中的ul列表元素配合CSS實(shí)現(xiàn)一個漂亮的網(wǎng)頁導(dǎo)航條。具體步驟如下：（1）創(chuàng)建一個名為menu.html的HTML文件（2）打開menu.html文件并進(jìn)行編輯，添加如下的導(dǎo)航條代碼：（3）在HTML文件下創(chuàng)建css目錄，并在css目錄中創(chuàng)建一個名為style.css的文件。（4）編輯style.css文件，添加如下樣式代碼：（5）在menu.html頁面的head部分中添加對CSS樣式表文件style.css的引用，代碼如下：（6）在Chrome瀏覽器中運(yùn)行menu.html頁面，運(yùn)行結(jié)果如圖4-34所示。4.6實(shí)戰(zhàn)——制作文本環(huán)繞圖片像很多報(bào)紙上的版塊一樣，一篇新聞往往附帶一張或多張圖片，這些圖片多是對新聞內(nèi)容的一個說明。為了將適當(dāng)?shù)膱D片放置到適當(dāng)?shù)奈恢蒙?，而且又美觀又節(jié)省頁面資源，往往會使用文字環(huán)繞的效果布局頁面。當(dāng)然，很多網(wǎng)站或博客也大量使用這種方式布局網(wǎng)頁。環(huán)繞效果節(jié)省了頁面中大量的空白，使頁面顯得更加緊湊。下面我們利用布局的浮動實(shí)現(xiàn)一個文字環(huán)繞的圖片效果。具體步驟如下：（1）創(chuàng)建一個名為index2.html的HTML文件。（2）打開index2.html文件并進(jìn)行編輯，添加如下的頁面代碼：<divid="content"><imgsrc="imgs/15.jpg"class="box"/><p>下載是指通過網(wǎng)絡(luò)進(jìn)行傳輸文件，把互聯(lián)網(wǎng)或其他電子計(jì)算機(jī)上的信息保存到本地電腦上的一種網(wǎng)絡(luò)活動。下載可以顯式或隱式地進(jìn)行，只要是獲得本地電腦上所沒有的信息的活動，都可以認(rèn)為是下載，如在線觀看視頻。</p><p>下載是指通過網(wǎng)絡(luò)進(jìn)行傳輸文件，把互聯(lián)網(wǎng)或其他電子計(jì)算機(jī)上的信息保存到本地電腦上的一種網(wǎng)絡(luò)活動。下載可以顯式或隱式地進(jìn)行，只要是獲得本地電腦上所沒有的信息的活動，都可以認(rèn)為是下載，如在線觀看視頻。</p><p>下載是指通過網(wǎng)絡(luò)進(jìn)行傳輸文件，把互聯(lián)網(wǎng)或其他電子計(jì)算機(jī)上的信息保存到本地電腦上的一種網(wǎng)絡(luò)活動。下載可以顯式或隱式地進(jìn)行，只要是獲得本地電腦上所沒有的信息的活動，都可以認(rèn)為是下載，如在線觀看視頻。</p></div>4.6實(shí)戰(zhàn)——制作文本環(huán)繞圖片（3）在css目錄中創(chuàng)建一個CSS文件，命名為box.css。（4）編輯box.css文件，添加如下CSS樣式代碼：@charset"utf-8";body{ background-image:url(../imgs/float_bg.gif); padding:70px0050px;}#content{ font-size:13px; font-family:"宋體",Arial; color:#666; width:550px; line-height:21px;}#content.box{ float:right; width:173px; height:192px; margin:10px; border:2pxsolid#999;4.6實(shí)戰(zhàn)——制作文本環(huán)繞圖片（5）在index2.html頁面的head部他引入box.css文件，代碼如下：<linkrel="stylesheet"type="text/css"href="css/box.css"/>（6）在Chrome瀏覽器中運(yùn)行index2.html頁面，運(yùn)行結(jié)果如圖4-35所示。

圖4-35文字環(huán)繞效果4.7實(shí)戰(zhàn)——制作三列博客頁面

我們曾經(jīng)在網(wǎng)頁設(shè)計(jì)中大量地運(yùn)用表格來進(jìn)行布局，而學(xué)習(xí)了DIV+CSS布局之后，我們要思考的是如何不用表格，而用DIV容器以及CSS和XHTML來控制實(shí)現(xiàn)一個不但文件體積小而且內(nèi)容和頁面更具親和力的效果。本次實(shí)戰(zhàn)我們來一步一步學(xué)習(xí)如何基于CSS建立一個包含三列的博客頁面。為了方便講解示例中使用了Dreamweaver工具，主要步驟如下：（1）執(zhí)行【文件】|【新建】命令，打開【新建文檔】對話框，選擇【空白頁】選項(xiàng)卡，【頁面類型】選擇HTML，【布局】選擇“無”，在【文檔類型】下拉列表框中選擇XHTML1.0Transitional，單擊【創(chuàng)建】按鈕，如圖4-36所示。4.7實(shí)戰(zhàn)——制作三列博客頁面

圖4-36【新建文檔】對話框（2）在【文檔】工具欄【標(biāo)題】文本框中輸入“我的個人博客”，保存文檔。首先創(chuàng)建基本的HTML結(jié)構(gòu)，切換到代碼視圖和設(shè)計(jì)視圖，在【文檔】窗口中<body>標(biāo)記內(nèi)輸入如下代碼，如圖4-37所示?；镜牟季职鍌€div，即標(biāo)題、頁腳和三欄。標(biāo)題和頁腳占據(jù)整個頁寬。<divid="header"></div><divid="left"></div><divid="right"></div><divid="middle"></div><divid="footer"></div>4.7實(shí)戰(zhàn)——制作三列博客頁面

圖4-37定義頁面標(biāo)題和結(jié)構(gòu)

圖4-38設(shè)置博客標(biāo)題文字（3）在id為header的標(biāo)記中輸入文字，設(shè)為１級標(biāo)題作為網(wǎng)頁的標(biāo)題內(nèi)容，如圖4-38所示。（4）在id為left的標(biāo)記中輸入“網(wǎng)站目錄”，設(shè)為3級標(biāo)題，然后插入無序列表，輸入網(wǎng)站目錄作為網(wǎng)頁的左側(cè)邊欄，代碼如下，如圖4-39所示。<h3>網(wǎng)站目錄</h3><ul><li><ahref="#">日志</url></a></li><li><ahref="#">相冊</url></a></li><li><ahref="#">收藏</url></a></li><li><ahref="#">好友</url></a></li><li><ahref="#">群組</url></a></li><li><ahref="#">我參與</url></a></li><li><ahref="#">個人資料</url></a></li></ul>4.7實(shí)戰(zhàn)——制作三列博客頁面

圖4-39設(shè)置左側(cè)欄目內(nèi)容

圖4-40設(shè)置右側(cè)欄目內(nèi)容（5）在id為right的標(biāo)記中輸入“最近發(fā)表”，設(shè)為3級標(biāo)題，然后插入無序列表，輸入最新發(fā)表文章列表，作為網(wǎng)頁的右側(cè)邊欄，如圖4-40所示。（6）在id為middle的標(biāo)記中輸入文章的正文，標(biāo)題設(shè)為2級標(biāo)題，如圖4-41所示。

圖4-41設(shè)置文章標(biāo)題和正文內(nèi)容

圖4-42設(shè)置頁腳內(nèi)容（7）在id為footer的標(biāo)記中輸入版權(quán)信息作為頁腳，如圖4-42所示。（8）現(xiàn)在我們有了一個完整的、沒有經(jīng)過修飾的XHTML文檔，下面可以運(yùn)用CSS來控制它的布局了。首先是調(diào)整<body>，設(shè)置邊距和填充都為0，背景顏色為#BEBFC1，字體大小為12像素，行高為20像素。將文檔切換到代碼窗口，在<head>標(biāo)記中輸入如下代碼，如圖4-43所示。4.7實(shí)戰(zhàn)——制作三列博客頁面<styletype="text/css"><!--body{ margin:0px; padding:0px; background-color:#BEBFC1; font-size:12px; line-height:20px;--></style>

圖4-43定義body樣式4.7實(shí)戰(zhàn)——制作三列博客頁面div#header{ clear:both; height:50px; background-color:#D01F3C; padding:20px; vertical-align:middle; color:#FFFFFF;（9）接下來調(diào)整標(biāo)題部分，用clear的屬性確保浮動部分不會占據(jù)標(biāo)題空間，標(biāo)題部分的高度為50像素，背景顏色為#D01F3C，填充為20像素，并且設(shè)置字體顏色為白色和垂直居中顯示。在style標(biāo)記中加入如下代碼，如圖4-44所示。4.7實(shí)戰(zhàn)——制作三列博客頁面div#left{ float:left; width:150px; background-color:#FFFFFF; margin-top:20px; padding:5px; margin-left:5px;}

圖4-44定義標(biāo)題部分樣式

圖4-45定義左側(cè)欄目樣式（10）然后調(diào)整<left>使它浮動在頁面左方，寬度為150像素，背景顏色為白色，上端距標(biāo)題20像素，左邊距5像素，填充5像素。在style標(biāo)記中加入如下代碼，如圖4-45所示。

（11）調(diào)整<right>使它浮動在頁面右方，寬度為150像素，背景顏色為#E9EBEF，上邊距20像素，右邊距5像素，填充5像素。在style標(biāo)記中加入如下代碼，如圖4-46所示。div#right{float:right;width:150px;background-color:#E9EBEF; margin-top:20px; margin-right:5px; padding:5px;4.7實(shí)戰(zhàn)——制作三列博客頁面

圖4-46定義右側(cè)欄目樣式

圖4-47定義正文樣式（12）此時已經(jīng)可以看初步效果了，我們再來調(diào)整middle使布局看起來更合理一些。設(shè)置它的邊距為0，上方填充0像素，下方填充5像素，左邊和右邊填充175像素。在style標(biāo)記中加入如下代碼，如圖4-47所示。div#middle{ padding-top:0px; padding-right:175px; padding-bottom:5px; padding-left:175px; margin:0px;4.7實(shí)戰(zhàn)——制作