網(wǎng)頁設(shè)計與布局項目化教程04課件

網(wǎng)頁設(shè)計與布局項目化教程04課件1第4章教育公司網(wǎng)站布局本章簡介：在前面兩章中，分別重點介紹了“絕對定位”和“相對定位”兩種重要的定位方式，以及如何使用“浮動”的方法進行頁面布局。請讀者務(wù)必真正理解上述的基礎(chǔ)概念和原理，它們將貫穿在實際工作的每一個細節(jié)中。本章中將使用這些基本的方法，制作一個兩列布局的案例，作為對上兩章內(nèi)容的復(fù)習(xí)。希望讀者通過本案例熟練掌握這些基礎(chǔ)內(nèi)容。第4章教育公司網(wǎng)站布局本章簡介：2課堂學(xué)習(xí)目標掌握在CSS中使用背景圖像的方法理解實現(xiàn)圓角設(shè)計的技巧課堂學(xué)習(xí)目標掌握在CSS中使用背景圖像的方法3教育公司網(wǎng)站布局效果效果圖教育公司網(wǎng)站布局效果效果圖44.1兩列布局如果讀者經(jīng)常在網(wǎng)上瀏覽，就會發(fā)現(xiàn)，兩列布局是各種布局形式中使用最普遍的一種，而且其表現(xiàn)形式也非常靈活。例如，兩個頁面，二者的HTML內(nèi)容是相同的，但使用了兩套完全不同的CSS設(shè)計，從而得到完全不同的設(shè)計風(fēng)格。左邊使用了相當(dāng)簡潔舒適的風(fēng)格，而右邊則使用了相當(dāng)華麗的風(fēng)格。兩個頁面盡管風(fēng)格不同，但都很漂亮。4.1兩列布局如果讀者經(jīng)常在網(wǎng)上瀏覽，就會發(fā)現(xiàn)，兩列布局54.2案例描述本案例的學(xué)習(xí)從研究開始，研究的對象就是“Adobe實驗室”的網(wǎng)站。相信本書的大多數(shù)讀者對Adobe公司應(yīng)該都不陌生，著名的Photoshop，F(xiàn)lash，Illustrator和Dreamweaver等眾多軟件都是該公司的產(chǎn)品。Adobe實驗室網(wǎng)站4.2案例描述本案例的學(xué)習(xí)從研究開始，研究的對象就是“A6仍然像第3章的案例一樣，先來明確首頁上要展示的內(nèi)容是什么。我們直接列出了需要在頁面上放置的內(nèi)容，讀者也可以從中清楚地看出搭建這個頁面的HTML結(jié)構(gòu)。該網(wǎng)頁在沒有使用任何CSS設(shè)置的情況下，使用瀏覽器觀察的效果，用綠色半透明的區(qū)塊表明了各個部分。4.3內(nèi)容分析基本的HTML結(jié)構(gòu)仍然像第3章的案例一樣，先來明確首頁上要展示的內(nèi)容是什么。我7上面列出的是單純的HTML結(jié)構(gòu)，按照工作流程，下面應(yīng)該設(shè)計出一個網(wǎng)頁的原型線框圖。原型設(shè)計可以使自己對各個部分的位置關(guān)系一目了然。從這個圖中可以看出，內(nèi)容要比上一張復(fù)雜不少，更為重要的一點是，我們必須要考慮每一個部分的擴展情況，例如主菜單以后有可能會增加菜單項目，因此不能把主菜單部分的高度固定死。如果讀者使用過表格布局就會知道，使各個部分的高度可以變化是很麻煩的一個問題，那么在CSS布局中，又會如何呢？4.4原型設(shè)計為本案例設(shè)計的原型線框圖上面列出的是單純的HTML結(jié)構(gòu)，按照工作流程，下面應(yīng)該設(shè)計出84.5CSS技術(shù)準備——在CSS中使用背景圖像

設(shè)置平鋪方式設(shè)置背景圖像的位置背景的簡寫圖像的固定設(shè)置4.5CSS技術(shù)準備——在CSS中使用背景圖像設(shè)置平9背景圖像在默認情況下，會自動向水平和豎直兩個方向平鋪。如果不希望平鋪，或者只希望沿著一個方向平鋪，可以使用background-repeat屬性來控制。該屬性可以設(shè)置為以下4種之一。

repeat：沿水平和豎直兩個方向平鋪，這也是默認值。

no-repeat：不平鋪，即只顯示一次。

repeat-x：只沿水平方向平鋪。

repeat-y：只沿豎直方向平鋪。4.5.1設(shè)置平鋪方式水平方向平鋪背景圖像的效果設(shè)置背景顏色后的效果背景圖像在默認情況下，會自動向水平和豎直兩個方向平鋪。如果不10下面來研究一下背景圖像的位置，假設(shè)將網(wǎng)頁的body元素設(shè)置如下CSS樣式。4.5.2設(shè)置背景圖像的位置設(shè)置背景圖像不重復(fù)并精確定位設(shè)置背景圖像不重復(fù)并放置在右下角設(shè)置背景圖像不重復(fù)下面來研究一下背景圖像的位置，假設(shè)將網(wǎng)頁的body元素設(shè)置如11就如同font，border等屬性在CSS中可以簡寫一樣，背景樣式的CSS屬性也可以簡寫。例如下面這段樣式使用了4條CSS規(guī)則。4.5.3背景的縮寫縮寫方式正常書寫方式就如同font，border等屬性在CSS中可以簡寫一樣，背12當(dāng)在網(wǎng)頁上設(shè)置背景圖像時，隨著滾動條的移動，背景圖片也會跟著一起移動。拖動滾動條時，背景圖像一起移動。4.5.4圖像的固定設(shè)置效果圖代碼顯示當(dāng)在網(wǎng)頁上設(shè)置背景圖像時，隨著滾動條的移動，背景圖片也會跟著13這個設(shè)計需要的美工配合也不多，例如網(wǎng)站Logo和網(wǎng)頁標題使用一個圖像做文字的圖像替換，這個方法在前兩個案例中已經(jīng)多次使用。注意本案例的一個特殊之處在于使用了深色背景，這時制作標題圖像的時候，為了使圖像的顏色更好地融合到背景中，可以將圖像制作為透明背景的圖像。當(dāng)背景的深灰色變透明以后，圖像和文字周圍會出現(xiàn)一些鋸齒，這是邊緣的過渡色。4.6制作標題圖像標題圖像這個設(shè)計需要的美工配合也不多，例如網(wǎng)站Logo和網(wǎng)頁標題使用14接下來介紹本案例中的一個重點問題。讀者可以看到，這個方案中使用了圓角的設(shè)計，因此需要一定的美工配合來實現(xiàn)各個部分的圓角效果。效果圖中共有3個部分使用了圓角框，一個是上側(cè)的主菜單，另外兩個分別是左右兩列。從最簡單的想法出發(fā)，我們可以設(shè)想給一個矩形區(qū)域設(shè)置一個固定的圓角矩形的背景圖像，就可以產(chǎn)生圓角效果。但是這樣做的結(jié)果是這個區(qū)域的高度會固定，不能擴展，因為背景的圓角矩形已經(jīng)固定。因此，我們可以考慮使用兩個背景圖像來實現(xiàn)一個圓角框。將一個圓角矩形分為3個部分，然后把上下兩個部分導(dǎo)出為圖像文件。如果中間部分是純色，那么中間部分就不需要導(dǎo)出為圖像了，因為可以在CSS中設(shè)置背景顏色。4.7CSS技術(shù)準備——實現(xiàn)圓角設(shè)計一個圓角框由3個部分組成接下來介紹本案例中的一個重點問題。讀者可以看到，這個方案中使154.8制作頁頭部分

搭建頁頭部分的HTML結(jié)構(gòu)頁面標題的圖像替換主菜單搜索框頁頭部分的圓角框4.8制作頁頭部分搭建頁頭部分的HTML結(jié)構(gòu)16下面先來解決header部分，header部分的HTML代碼如下。4.8.1搭建頁頭部分的HTML結(jié)構(gòu)HTML代碼顯示下面先來解決header部分，header部分的HTML代碼17對于h1標題的文字替換，也已經(jīng)多次使用了，這里僅列出代碼，不再詳細解釋。4.8.2頁面標題的圖像替換CSS代碼顯示對于h1標題的文字替換，也已經(jīng)多次使用了，這里僅列出代碼，不18接下來設(shè)置頂部菜單。使用絕對定位，可以把它固定在標題的右側(cè)。具體代碼如下：4.8.3頂部菜單CSS代碼顯示效果圖接下來設(shè)置頂部菜單。使用絕對定位，可以把它固定在標題的右側(cè)。19接下來，就要設(shè)置主菜單部分了。主菜單部分需要實現(xiàn)圓角效果，在實現(xiàn)圓角效果之前，我們先來把菜單和搜索框的內(nèi)容布置好，然后再給它設(shè)置圓角。在主菜單區(qū)域包括左右兩部分，左邊是菜單，右邊是搜索框。首先設(shè)定菜單部分的寬度和文字顏色，這個菜單是使用ul列表實現(xiàn)的。代碼如下：4.8.4主菜單CSS代碼顯示效果圖接下來，就要設(shè)置主菜單部分了。主菜單部分需要實現(xiàn)圓角效果，在20設(shè)置好主菜單以后，再來設(shè)置搜索框。為了使搜索框靠右對齊，使用向右浮動的設(shè)置。代碼如下：4.8.5搜索框CSS代碼顯示效果圖設(shè)置好主菜單以后，再來設(shè)置搜索框。為了使搜索框靠右對齊，使用21下面的任務(wù)就是要給主菜單和搜索框外面套一個圓角框。這里需要使用兩個背景圖像，因此必須要有兩個HTML元素，我們使用兩層div。代碼如下：4.8.6頁頭部分的圓角框HTML代碼顯示下面的任務(wù)就是要給主菜單和搜索框外面套一個圓角框。這里需要使224.9制作主體部分結(jié)構(gòu)分析面包屑導(dǎo)航設(shè)置正文標題設(shè)置頁腳添加頁面內(nèi)容4.9制作主體部分結(jié)構(gòu)分析23通常來說，對于上面有頁頭、下面有頁腳、中間分兩列的布局，可以使用的布局形式。為了使中間的div#content和div#sideBar并列，可以先把它們放入一個div中（這里id為“#content”），然后對其使用浮動方式。如果在HTML中，#content寫在#sideBar的前面，那么使#content向左浮動，然后#sideBar向左或者向右浮動都可以。4.9.1結(jié)構(gòu)分析常見的兩列布局形式使用的兩列布局形式通常來說，對于上面有頁頭、下面有頁腳、中間分兩列的布局，可以24什么是面包屑型網(wǎng)站導(dǎo)航鏈接呢？讀者可能沒有聽說過這個名字，但是一定看到過。在很多網(wǎng)站上都會有一串指示訪問者當(dāng)前位置的文字，例如“首頁>科技>互聯(lián)網(wǎng)>Web2.0>CSS>盒子模型”，這就表示訪問者正在瀏覽的網(wǎng)頁處于整個網(wǎng)站的哪個細分類別中。通常訪問者可以點擊這一系列詞語中的任何一個，以跳轉(zhuǎn)到相應(yīng)的頁面。4.9.2面包屑導(dǎo)航什么是面包屑型網(wǎng)站導(dǎo)航鏈接呢？讀者可能沒有聽說過這個名字，但25接下來，對正文的標題進行一些設(shè)置。代碼如下：4.9.3設(shè)置正文標題CSS代碼顯示接下來，對正文的標題進行一些設(shè)置。代碼如下：4.9.3設(shè)26最后設(shè)置#footer。設(shè)置清除屬性、背景以及上側(cè)的padding，這個padding的值正是背景圖像的高度，以保證#footer中的內(nèi)容不會壓在背景圖像上面。4.9.4設(shè)置頁腳CSS代碼顯示效果圖最后設(shè)置#footer。設(shè)置清除屬性、背景以及上側(cè)的padd27到這里，實際上頁面布局已經(jīng)完成，剩下的就是向#content，#sideBar和#footer中添加內(nèi)容了。隨著內(nèi)容的增加，這兩列的高度自然就會增加，圓角框始終會保持正確的狀態(tài)。4.9.5添