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

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

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

repeat：沿水平和豎直兩個(gè)方向平鋪，這也是默認(rèn)值。

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

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

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

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