1、 案例概述案例概述4.1內(nèi)容分析內(nèi)容分析4.2HTML結(jié)構(gòu)設(shè)計(jì)結(jié)構(gòu)設(shè)計(jì)4.3原型設(shè)計(jì)原型設(shè)計(jì)4.4頁(yè)面方案設(shè)計(jì)頁(yè)面方案設(shè)計(jì)4.5 布局設(shè)計(jì)布局設(shè)計(jì)4.6細(xì)節(jié)設(shè)計(jì)細(xì)節(jié)設(shè)計(jì)4.7CSS布局的優(yōu)點(diǎn)布局的優(yōu)點(diǎn)4.8交互效果設(shè)計(jì)交互效果設(shè)計(jì)4.9遵從遵從Web標(biāo)準(zhǔn)的設(shè)計(jì)流程標(biāo)準(zhǔn)的設(shè)計(jì)流程4.104.1 4.1 案案 例例 概概 述述 本章將分析，策劃，設(shè)計(jì)并制作一個(gè)完整的網(wǎng)站。本章將分析，策劃，設(shè)計(jì)并制作一個(gè)完整的網(wǎng)站。 網(wǎng)站主題是制作名為網(wǎng)站主題是制作名為“Baby HousingBaby Housing”的兒童用的兒童用品網(wǎng)上商店。通過(guò)對(duì)這個(gè)案例的講解，描述其中的技品網(wǎng)上商店。通過(guò)對(duì)這個(gè)案例的講解，

2、描述其中的技術(shù)細(xì)節(jié)，介紹一套遵從術(shù)細(xì)節(jié)，介紹一套遵從WebWeb標(biāo)準(zhǔn)的網(wǎng)頁(yè)設(shè)計(jì)流程。使標(biāo)準(zhǔn)的網(wǎng)頁(yè)設(shè)計(jì)流程。使用這樣的工作流程，可以使設(shè)計(jì)流程更加規(guī)范。用這樣的工作流程，可以使設(shè)計(jì)流程更加規(guī)范。 完成后的首頁(yè)如下圖所示。（完成后的首頁(yè)如下圖所示。（home.htmlhome.html）4.1 4.1 案案 例例 概概 述述圖圖4.1 完成后的首頁(yè)完成后的首頁(yè)4.1 4.1 案案 例例 概概 述述（1 1）頁(yè)面豎直方向分為上中下）頁(yè)面豎直方向分為上中下3 3個(gè)部分，上下部分背景會(huì)自動(dòng)延伸；個(gè)部分，上下部分背景會(huì)自動(dòng)延伸；（2 2）中間的內(nèi)容區(qū)域分為左右兩列，左列為主要內(nèi)容，右列由若干圓角）中間的內(nèi)

3、容區(qū)域分為左右兩列，左列為主要內(nèi)容，右列由若干圓角框構(gòu)成；框構(gòu)成；（3 3）頁(yè)面具有交互提示功能，例如頁(yè)頭的導(dǎo)航菜單具有鼠標(biāo)指針經(jīng)過(guò)時(shí)）頁(yè)面具有交互提示功能，例如頁(yè)頭的導(dǎo)航菜單具有鼠標(biāo)指針經(jīng)過(guò)時(shí)變色的效果變色的效果（4 4）菜單項(xiàng)圓角背景會(huì)自動(dòng)適應(yīng)菜單項(xiàng)的寬度，例如）菜單項(xiàng)圓角背景會(huì)自動(dòng)適應(yīng)菜單項(xiàng)的寬度，例如“網(wǎng)站首頁(yè)網(wǎng)站首頁(yè)”比比“信息信息”寬一些；寬一些；（5 5）“登錄賬號(hào)登錄賬號(hào)”和和“購(gòu)物車(chē)購(gòu)物車(chē)”兩個(gè)按鈕在鼠標(biāo)指針經(jīng)過(guò)時(shí)也會(huì)發(fā)生顏兩個(gè)按鈕在鼠標(biāo)指針經(jīng)過(guò)時(shí)也會(huì)發(fā)生顏色變化；色變化；4.2 4.2 內(nèi)內(nèi) 容容 分分 析析（1 1）設(shè)計(jì)一個(gè)網(wǎng)頁(yè)的第一步是明確這個(gè)網(wǎng)頁(yè)的內(nèi)容，如網(wǎng)頁(yè)需要傳達(dá)

4、給訪問(wèn)者）設(shè)計(jì)一個(gè)網(wǎng)頁(yè)的第一步是明確這個(gè)網(wǎng)頁(yè)的內(nèi)容，如網(wǎng)頁(yè)需要傳達(dá)給訪問(wèn)者的信息，各種信息的重要性，各種信息的組織架構(gòu)等；的信息，各種信息的重要性，各種信息的組織架構(gòu)等；（2 2）要有明確的網(wǎng)站名稱(chēng)和標(biāo)志；）要有明確的網(wǎng)站名稱(chēng)和標(biāo)志；（3 3）要給訪問(wèn)者方便地了解這個(gè)網(wǎng)站所有者自身信息的途徑，如關(guān)于我們，聯(lián)）要給訪問(wèn)者方便地了解這個(gè)網(wǎng)站所有者自身信息的途徑，如關(guān)于我們，聯(lián)系方式等鏈接；系方式等鏈接；（4 4）本網(wǎng)站目的是銷(xiāo)售商品，因此必須要有清晰的產(chǎn)品分類(lèi)結(jié)構(gòu)，并有合理的）本網(wǎng)站目的是銷(xiāo)售商品，因此必須要有清晰的產(chǎn)品分類(lèi)結(jié)構(gòu)，并有合理的導(dǎo)航欄；導(dǎo)航欄；（5 5）網(wǎng)上商店通常在首頁(yè)上會(huì)把一些最受

5、歡迎的和重點(diǎn)推薦的產(chǎn)品拿出來(lái)展示，）網(wǎng)上商店通常在首頁(yè)上會(huì)把一些最受歡迎的和重點(diǎn)推薦的產(chǎn)品拿出來(lái)展示，因?yàn)槭醉?yè)的訪問(wèn)量會(huì)明顯比其他頁(yè)面大得多，可以充當(dāng)廣告牌；如下圖亞馬因?yàn)槭醉?yè)的訪問(wèn)量會(huì)明顯比其他頁(yè)面大得多，可以充當(dāng)廣告牌；如下圖亞馬遜首頁(yè)，這個(gè)頁(yè)面雖然內(nèi)容很多，但簡(jiǎn)單來(lái)說(shuō)就分為兩大類(lèi)：分類(lèi)鏈接和推遜首頁(yè)，這個(gè)頁(yè)面雖然內(nèi)容很多，但簡(jiǎn)單來(lái)說(shuō)就分為兩大類(lèi)：分類(lèi)鏈接和推薦商品鏈接；薦商品鏈接；（6 6）對(duì)于一個(gè)網(wǎng)站，最重要的核心不是形式，而是內(nèi)容，必須真正了解這個(gè)網(wǎng)）對(duì)于一個(gè)網(wǎng)站，最重要的核心不是形式，而是內(nèi)容，必須真正了解這個(gè)網(wǎng)站的目的，否則無(wú)論網(wǎng)站多漂亮和花哨，都不能算是成功的作品；站的目的，否

6、則無(wú)論網(wǎng)站多漂亮和花哨，都不能算是成功的作品；4.2 4.2 內(nèi)內(nèi) 容容 分分 析析圖圖13.4 卓越亞馬遜網(wǎng)站的首頁(yè)卓越亞馬遜網(wǎng)站的首頁(yè)4.2 4.2 內(nèi)內(nèi) 容容 分分 析析這一網(wǎng)站大致要展示的內(nèi)容包括：這一網(wǎng)站大致要展示的內(nèi)容包括：（1 1）標(biāo)題）標(biāo)題（2 2）標(biāo)志；）標(biāo)志；（3 3）主導(dǎo)航欄）主導(dǎo)航欄（4 4）自身介紹）自身介紹（5 5）賬號(hào)登錄與購(gòu)物車(chē)）賬號(hào)登錄與購(gòu)物車(chē)（6 6）今日推薦商品（）今日推薦商品（1 1種）種）（7 7）最受歡迎商品（）最受歡迎商品（1 1種）種）（8 8）分類(lèi)推薦商品（）分類(lèi)推薦商品（3 3種）種）（9 9）搜索框）搜索框（1010）類(lèi)別菜單）類(lèi)別菜單（1

7、111）特別提示信息）特別提示信息（1212）版權(quán)信息）版權(quán)信息4.3 HTML4.3 HTML結(jié)構(gòu)設(shè)計(jì)結(jié)構(gòu)設(shè)計(jì)1.1.在理解了網(wǎng)站的基礎(chǔ)上開(kāi)始構(gòu)建網(wǎng)站的內(nèi)容結(jié)構(gòu)。在理解了網(wǎng)站的基礎(chǔ)上開(kāi)始構(gòu)建網(wǎng)站的內(nèi)容結(jié)構(gòu)。2.2.首先完全不考慮首先完全不考慮CSSCSS，而是從網(wǎng)頁(yè)的內(nèi)容出發(fā)，根據(jù)上面列出的要點(diǎn)，而是從網(wǎng)頁(yè)的內(nèi)容出發(fā)，根據(jù)上面列出的要點(diǎn)，通過(guò)通過(guò)HTMLHTML搭建出網(wǎng)頁(yè)的內(nèi)容結(jié)構(gòu)；搭建出網(wǎng)頁(yè)的內(nèi)容結(jié)構(gòu)；3.3.下圖所示是搭建的下圖所示是搭建的HTMLHTML在沒(méi)有使用任何在沒(méi)有使用任何CSSCSS設(shè)置下，使用瀏覽器觀察的設(shè)置下，使用瀏覽器觀察的效果。效果。P253P253文件文件4-1.h

8、tml4-1.html。 4.3 HTML4.3 HTML結(jié)構(gòu)設(shè)計(jì)結(jié)構(gòu)設(shè)計(jì)圖圖4.5 HTML結(jié)構(gòu)結(jié)構(gòu)4.3 HTML4.3 HTML結(jié)構(gòu)設(shè)計(jì)結(jié)構(gòu)設(shè)計(jì)注意：注意： 任何一個(gè)頁(yè)面，應(yīng)該盡可能保證在不使用任何一個(gè)頁(yè)面，應(yīng)該盡可能保證在不使用CSSCSS的情況下，依然保的情況下，依然保持良好的結(jié)構(gòu)和可讀性；持良好的結(jié)構(gòu)和可讀性； 這不僅對(duì)訪問(wèn)者很有幫助，而且有助于網(wǎng)站被這不僅對(duì)訪問(wèn)者很有幫助，而且有助于網(wǎng)站被GoogleGoogle，百度這，百度這樣的搜索引擎了解和收錄，這對(duì)于提升網(wǎng)站訪問(wèn)量是至關(guān)重要的；樣的搜索引擎了解和收錄，這對(duì)于提升網(wǎng)站訪問(wèn)量是至關(guān)重要的；文件文件4-1.html4-1.htm

9、l。 4.3 HTML4.3 HTML結(jié)構(gòu)設(shè)計(jì)結(jié)構(gòu)設(shè)計(jì)1.1.代碼比較簡(jiǎn)單，使用的都是最基本的代碼比較簡(jiǎn)單，使用的都是最基本的HTMLHTML標(biāo)簽，這些標(biāo)記都是具有一標(biāo)簽，這些標(biāo)記都是具有一定含義的定含義的HTMLHTML標(biāo)記。標(biāo)記。2.2.代碼中沒(méi)有出現(xiàn)任何代碼中沒(méi)有出現(xiàn)任何標(biāo)簽，因?yàn)樗粚儆诰哂姓Z(yǔ)義的標(biāo)簽，在最標(biāo)簽，因?yàn)樗粚儆诰哂姓Z(yǔ)義的標(biāo)簽，在最初搭建初搭建HTMLHTML的時(shí)候，要考慮語(yǔ)義相關(guān)的內(nèi)容。的時(shí)候，要考慮語(yǔ)義相關(guān)的內(nèi)容。3.3.標(biāo)簽在代碼中多次出現(xiàn)，當(dāng)有若干個(gè)項(xiàng)目并列時(shí)，它是一個(gè)很好標(biāo)簽在代碼中多次出現(xiàn)，當(dāng)有若干個(gè)項(xiàng)目并列時(shí)，它是一個(gè)很好的選擇。的選擇。4.4 4.4 原原

10、型型 設(shè)設(shè) 計(jì)計(jì)1.1.在設(shè)計(jì)任何一個(gè)網(wǎng)頁(yè)之前，都應(yīng)該有一個(gè)構(gòu)思的過(guò)程，對(duì)網(wǎng)站的完整在設(shè)計(jì)任何一個(gè)網(wǎng)頁(yè)之前，都應(yīng)該有一個(gè)構(gòu)思的過(guò)程，對(duì)網(wǎng)站的完整功能和內(nèi)容進(jìn)行全面的分析。功能和內(nèi)容進(jìn)行全面的分析。2.2.如果可以，應(yīng)該制作出線框圖，這個(gè)過(guò)程專(zhuān)業(yè)上成為如果可以，應(yīng)該制作出線框圖，這個(gè)過(guò)程專(zhuān)業(yè)上成為“原型設(shè)計(jì)原型設(shè)計(jì)”。3.3.例如，在具體制作頁(yè)面之前，可以設(shè)計(jì)一個(gè)下圖所示的網(wǎng)頁(yè)原型。例如，在具體制作頁(yè)面之前，可以設(shè)計(jì)一個(gè)下圖所示的網(wǎng)頁(yè)原型。4.4 4.4 原原 型型 設(shè)設(shè) 計(jì)計(jì)圖圖4.6 網(wǎng)站首頁(yè)原型線框圖網(wǎng)站首頁(yè)原型線框圖4.4 4.4 原原 型型 設(shè)設(shè) 計(jì)計(jì)1.1.網(wǎng)頁(yè)原型設(shè)計(jì)也是分步驟實(shí)現(xiàn)

11、的。比如首先可以考慮，把一個(gè)頁(yè)面從網(wǎng)頁(yè)原型設(shè)計(jì)也是分步驟實(shí)現(xiàn)的。比如首先可以考慮，把一個(gè)頁(yè)面從上至下依次分為上至下依次分為3 3個(gè)部分：個(gè)部分：4.4 4.4 原原 型型 設(shè)設(shè) 計(jì)計(jì)2.2.然后再將每個(gè)部分逐步細(xì)化，比如頁(yè)頭部分，細(xì)化如圖：然后再將每個(gè)部分逐步細(xì)化，比如頁(yè)頭部分，細(xì)化如圖：4.4 4.4 原原 型型 設(shè)設(shè) 計(jì)計(jì)3.3.中間的內(nèi)容部分分為左右兩列，細(xì)化如圖：中間的內(nèi)容部分分為左右兩列，細(xì)化如圖：4.4 4.4 原原 型型 設(shè)設(shè) 計(jì)計(jì)4.4.再進(jìn)一步細(xì)化主要內(nèi)容和側(cè)邊欄，細(xì)化如圖：再進(jìn)一步細(xì)化主要內(nèi)容和側(cè)邊欄，細(xì)化如圖：4.4 4.4 原原 型型 設(shè)設(shè) 計(jì)計(jì)5.5.頁(yè)腳部分比較簡(jiǎn)單

12、，不再贅述。將頁(yè)腳部分比較簡(jiǎn)單，不再贅述。將3 3個(gè)部分組合在一起，原型線框圖如下：個(gè)部分組合在一起，原型線框圖如下：4.4 4.4 原原 型型 設(shè)設(shè) 計(jì)計(jì)6.6.繪制原型線框圖軟件：繪制原型線框圖軟件：Axure RP,Fireworks,Photoshop,Axure RP,Fireworks,Photoshop,畫(huà)圖，畫(huà)圖，wordword或者或者其他都可以。其他都可以。4.5 4.5 頁(yè)面方案設(shè)計(jì)頁(yè)面方案設(shè)計(jì)1.1.接下來(lái)根據(jù)原型線框圖，在接下來(lái)根據(jù)原型線框圖，在PhotoshopPhotoshop或者或者FireworksFireworks軟件中設(shè)計(jì)真正的頁(yè)軟件中設(shè)計(jì)真正的頁(yè)面方案；

13、面方案；2.2.該步核心任務(wù)是美術(shù)設(shè)計(jì)，即美工的任務(wù)；該步核心任務(wù)是美術(shù)設(shè)計(jì)，即美工的任務(wù)；4.5 4.5 頁(yè)面方案設(shè)計(jì)頁(yè)面方案設(shè)計(jì)圖圖13.13 在在Fireworks軟件中完成頁(yè)面方案的設(shè)計(jì)軟件中完成頁(yè)面方案的設(shè)計(jì)4.6 4.6 布布 局局 設(shè)設(shè) 計(jì)計(jì)本節(jié)主要考慮把各種元素放到適當(dāng)?shù)奈恢茫鴷罕竟?jié)主要考慮把各種元素放到適當(dāng)?shù)奈恢茫鴷簳r(shí)不考慮細(xì)節(jié)。時(shí)不考慮細(xì)節(jié)。 4.6.1 4.6.1 整體樣式設(shè)計(jì)整體樣式設(shè)計(jì) 4.6.2 4.6.2 頁(yè)頭部分頁(yè)頭部分 4.6.3 4.6.3 內(nèi)容部分內(nèi)容部分 4.6.4 4.6.4 頁(yè)腳部分頁(yè)腳部分4.6 .1 4.6 .1 整體樣式設(shè)整體樣式設(shè) 計(jì)計(jì)1

14、.1.首先對(duì)整個(gè)頁(yè)面的共有屬性進(jìn)行一些設(shè)置，以保證這些內(nèi)容在各個(gè)瀏覽器首先對(duì)整個(gè)頁(yè)面的共有屬性進(jìn)行一些設(shè)置，以保證這些內(nèi)容在各個(gè)瀏覽器中有相同的表現(xiàn)。中有相同的表現(xiàn)。 文件文件13-02.html13-02.html。4.6 .2 4.6 .2 頁(yè)頭部分頁(yè)頭部分1.1.首先根據(jù)原型線框圖中設(shè)定的各個(gè)部分，對(duì)首先根據(jù)原型線框圖中設(shè)定的各個(gè)部分，對(duì)HTMLHTML進(jìn)行加工。紅線標(biāo)示部分進(jìn)行加工。紅線標(biāo)示部分是在原是在原HTMLHTML代碼基礎(chǔ)上新增加的內(nèi)容：文件代碼基礎(chǔ)上新增加的內(nèi)容：文件13-03.html13-03.html。主要操作：主要操作：1.1.將整個(gè)將整個(gè)headerheader部分

15、放入一個(gè)部分放入一個(gè)divdiv中，為該中，為該divdiv設(shè)定設(shè)定idid名稱(chēng)為名稱(chēng)為“headerheader”。2.2.將標(biāo)志圖像將標(biāo)志圖像( (茶杯茶杯) )放入一個(gè)放入一個(gè)divdiv中，取名為中，取名為“l(fā)ogologo”。3.3.為主導(dǎo)航欄的設(shè)定為主導(dǎo)航欄的設(shè)定idid名稱(chēng)為名稱(chēng)為“mainNavigationmainNavigation”。4.4.為主導(dǎo)航欄的第一個(gè)項(xiàng)目設(shè)定類(lèi)別名稱(chēng)為為主導(dǎo)航欄的第一個(gè)項(xiàng)目設(shè)定類(lèi)別名稱(chēng)為“currentcurrent”。5.5.為次導(dǎo)航欄的設(shè)定為次導(dǎo)航欄的設(shè)定idid名稱(chēng)為名稱(chēng)為“topNavigationtopNavigation”。6.6.為

16、登陸賬號(hào)設(shè)定為登陸賬號(hào)設(shè)定idid名稱(chēng)為名稱(chēng)為“accountBoxaccountBox”。4.6 .2 4.6 .2 頁(yè)頭部分頁(yè)頭部分4.6 .2 4.6 .2 頁(yè)頭部分頁(yè)頭部分1.1.為了方便觀察，臨時(shí)給為了方便觀察，臨時(shí)給div,uldiv,ul和和h1h1增加一個(gè)紅色的邊框，這樣可以確定各增加一個(gè)紅色的邊框，這樣可以確定各個(gè)元素是否放置到了適當(dāng)?shù)奈恢茫簜€(gè)元素是否放置到了適當(dāng)?shù)奈恢茫?.2.然后為整個(gè)頁(yè)頭部分設(shè)置樣式，代碼如下：文件然后為整個(gè)頁(yè)頭部分設(shè)置樣式，代碼如下：文件13-4.html13-4.html。說(shuō)明：說(shuō)明： 將將positonpositon設(shè)置為設(shè)置為relativere

17、lative，目的是使后面的，目的是使后面的 子元素使用絕對(duì)定位時(shí)，子元素使用絕對(duì)定位時(shí)，以頁(yè)頭而不是瀏覽器窗口為定位基準(zhǔn)；以頁(yè)頭而不是瀏覽器窗口為定位基準(zhǔn)； 4.6 .2 4.6 .2 頁(yè)頭部分頁(yè)頭部分1.1.設(shè)置設(shè)置h1h1標(biāo)題，將標(biāo)題，將marginmargin設(shè)置為設(shè)置為0 0，避免干擾其他元素的定位；，避免干擾其他元素的定位；2.2.將標(biāo)志圖片所在的將標(biāo)志圖片所在的divdiv設(shè)置為絕對(duì)定位，代碼如下：文件設(shè)置為絕對(duì)定位，代碼如下：文件13-5.html13-5.html。 4.6 .2 4.6 .2 頁(yè)頭部分頁(yè)頭部分1.1.將主導(dǎo)航的列表設(shè)置為絕對(duì)定位，并定位到適當(dāng)?shù)奈恢茫粚⒅鲗?dǎo)航

18、的列表設(shè)置為絕對(duì)定位，并定位到適當(dāng)?shù)奈恢茫?.2.將主導(dǎo)航的將主導(dǎo)航的ulul列表項(xiàng)目列表項(xiàng)目lili設(shè)置為左浮動(dòng)，從而使它們水平排列，并使得項(xiàng)目之間設(shè)置為左浮動(dòng)，從而使它們水平排列，并使得項(xiàng)目之間有一定的間隔；有一定的間隔；3.3.由于主導(dǎo)航的背景顏色比較深，因此把其中的鏈接文字顏色設(shè)置為白色，代碼如由于主導(dǎo)航的背景顏色比較深，因此把其中的鏈接文字顏色設(shè)置為白色，代碼如下：文件下：文件13-6.html13-6.html。 4.6 .2 4.6 .2 頁(yè)頭部分頁(yè)頭部分1.1.將次導(dǎo)航的列表設(shè)置為絕對(duì)定位，右上角對(duì)齊到將次導(dǎo)航的列表設(shè)置為絕對(duì)定位，右上角對(duì)齊到headerheader的右上角；

19、的右上角；2.2.將主導(dǎo)航的將主導(dǎo)航的ulul列表項(xiàng)目列表項(xiàng)目lili設(shè)置為左浮動(dòng)，從而使它們水平排列，并使得項(xiàng)設(shè)置為左浮動(dòng)，從而使它們水平排列，并使得項(xiàng)目之間有一定的間隔；目之間有一定的間隔； 文件文件13-7.html13-7.html。 4.6 .2 4.6 .2 頁(yè)頭部分頁(yè)頭部分1.1.賬號(hào)和購(gòu)物車(chē)的設(shè)置為絕對(duì)定位，并放到右側(cè)適當(dāng)位置；賬號(hào)和購(gòu)物車(chē)的設(shè)置為絕對(duì)定位，并放到右側(cè)適當(dāng)位置；2.2.將賬號(hào)的將賬號(hào)的ulul列表項(xiàng)目列表項(xiàng)目lili也設(shè)置為左浮動(dòng)，從而使得水平排列，并設(shè)置間隔；也設(shè)置為左浮動(dòng)，從而使得水平排列，并設(shè)置間隔； 文件文件13-8.html13-8.html。 4.6

20、 .3 4.6 .3 內(nèi)容部分內(nèi)容部分1.1.在原型線框圖中，內(nèi)容部分分為左右兩列首先對(duì)在原型線框圖中，內(nèi)容部分分為左右兩列首先對(duì)HTMLHTML代碼按照下圖進(jìn)行改代碼按照下圖進(jìn)行改造；文件造；文件13-9.html13-9.html。 4.6 .3 4.6 .3 內(nèi)容部分內(nèi)容部分1.1.在原型線框圖中，內(nèi)容部分分為左右兩列首先對(duì)在原型線框圖中，內(nèi)容部分分為左右兩列首先對(duì)HTMLHTML代碼按照下圖進(jìn)行改代碼按照下圖進(jìn)行改造；文件造；文件13-9.html13-9.html。 4.6 .3 4.6 .3 內(nèi)容部分內(nèi)容部分2.2.寫(xiě)出寫(xiě)出CSSCSS代碼，實(shí)現(xiàn)固定寬度的兩列布局：文件代碼，實(shí)現(xiàn)固

21、定寬度的兩列布局：文件13-9.html13-9.html。 4.6 .4 4.6 .4 頁(yè)頁(yè) 腳腳 部分部分1.1.為頁(yè)腳增加一個(gè)為頁(yè)腳增加一個(gè)divdiv，并將其設(shè)置類(lèi)別名稱(chēng)為，并將其設(shè)置類(lèi)別名稱(chēng)為footerfooter。2.2.設(shè)置相應(yīng)的設(shè)置相應(yīng)的CSSCSS樣式代碼如下：樣式代碼如下：3.3.特別注意不要忘記設(shè)定特別注意不要忘記設(shè)定clearclear屬性，以保證頁(yè)腳內(nèi)容在頁(yè)面的最下端，不受屬性，以保證頁(yè)腳內(nèi)容在頁(yè)面的最下端，不受中間部分中間部分floatfloat的影響；的影響；13-10.html13-10.html。至此布局設(shè)計(jì)完成了，這是一個(gè)典型的至此布局設(shè)計(jì)完成了，這是一個(gè)

22、典型的“1-2-11-2-1”布局。布局。 4.7 4.7 細(xì)細(xì) 節(jié)節(jié) 設(shè)設(shè) 計(jì)計(jì) 4.7.1 4.7.1 頁(yè)頭部分頁(yè)頭部分 1.h11.h1標(biāo)題用圖像替換標(biāo)題用圖像替換 2. 2.設(shè)置賬號(hào)區(qū)的樣式設(shè)置賬號(hào)區(qū)的樣式 3. 3.設(shè)置次導(dǎo)航欄的圓角效果設(shè)置次導(dǎo)航欄的圓角效果 4. 4.設(shè)置主導(dǎo)航欄圓角效果設(shè)置主導(dǎo)航欄圓角效果 4.7.2 4.7.2 內(nèi)容部分內(nèi)容部分 4.7.3 4.7.3 左側(cè)的主要內(nèi)容列左側(cè)的主要內(nèi)容列 4.7.4 4.7.4 右邊欄右邊欄4.7 .1 4.7 .1 頁(yè)頁(yè) 頭頭 部分部分1.1.進(jìn)行進(jìn)行h1h1標(biāo)題的圖像替換。準(zhǔn)備一副圖片如下（標(biāo)題的圖像替換。準(zhǔn)備一副圖片如下（

23、300px300px* *53px53px）：）：2.2.修改修改h1h1的的CSSCSS樣式代碼如下樣式代碼如下: :left(left(背景圖片靠對(duì)象左側(cè)開(kāi)始顯示背景圖片靠對(duì)象左側(cè)開(kāi)始顯示, , bottom(bottom(背景圖片靠對(duì)象緊貼底部開(kāi)始顯示背景圖片靠對(duì)象緊貼底部開(kāi)始顯示) )：4.7 .1 4.7 .1 頁(yè)頁(yè) 頭頭 部分部分3.3.可以看到圖像出現(xiàn)在正確位置，但是原來(lái)的標(biāo)題文字還在上面，為了隱藏可以看到圖像出現(xiàn)在正確位置，但是原來(lái)的標(biāo)題文字還在上面，為了隱藏原來(lái)的文字，在原來(lái)的文字，在HTMLHTML中再套一層中再套一層spanspan，然后用，然后用displaydispl

24、ay屬性將文字隱藏。屬性將文字隱藏。4-11.html4-11.html。4.7 .1 4.7 .1 頁(yè)頁(yè) 頭頭 部分部分1.1.設(shè)置賬號(hào)區(qū)的樣式。準(zhǔn)備兩副圖片如下：設(shè)置賬號(hào)區(qū)的樣式。準(zhǔn)備兩副圖片如下：2.2.修改修改HTMLHTML，對(duì)兩個(gè)鏈接分別設(shè)置了類(lèi)別名稱(chēng)，同時(shí)注意利用，對(duì)兩個(gè)鏈接分別設(shè)置了類(lèi)別名稱(chēng)，同時(shí)注意利用spanspan標(biāo)記隱藏標(biāo)記隱藏文字。文字。 4-12.html 4-12.html。 13.7 .1 13.7 .1 頁(yè)頁(yè) 頭頭 部分部分 13.7 .1 13.7 .1 頁(yè)頁(yè) 頭頭 部分部分1.1.設(shè)置次導(dǎo)航欄的圓角效果。準(zhǔn)備圖片如下：設(shè)置次導(dǎo)航欄的圓角效果。準(zhǔn)備圖片如下：

25、2.2.分別利用文字的分別利用文字的標(biāo)簽和標(biāo)簽和標(biāo)簽設(shè)置左右側(cè)的背景圖像。標(biāo)簽設(shè)置左右側(cè)的背景圖像。4-13.html4-13.html。 4.7 .1 4.7 .1 頁(yè)頁(yè) 頭頭 部分部分1.1.設(shè)置主導(dǎo)航欄的圓角效果。原理和次導(dǎo)航欄相同，準(zhǔn)備圖片如下：設(shè)置主導(dǎo)航欄的圓角效果。原理和次導(dǎo)航欄相同，準(zhǔn)備圖片如下：2.2.分別利用文字的分別利用文字的標(biāo)簽和標(biāo)簽和標(biāo)簽設(shè)置左右側(cè)的背景圖像。和次導(dǎo)航標(biāo)簽設(shè)置左右側(cè)的背景圖像。和次導(dǎo)航欄的區(qū)別是，這里只有表示當(dāng)前頁(yè)的菜單項(xiàng)有圓角背景，而其他菜單項(xiàng)則欄的區(qū)別是，這里只有表示當(dāng)前頁(yè)的菜單項(xiàng)有圓角背景，而其他菜單項(xiàng)則沒(méi)有背景圖像，因此，背景設(shè)置在針對(duì)沒(méi)有背景圖

26、像，因此，背景設(shè)置在針對(duì)“currentcurrent”類(lèi)中。類(lèi)中。4-14.html4-14.html。 4.7 .2 4.7 .2 內(nèi)內(nèi) 容容 部分部分1.1.目前頁(yè)頭的視覺(jué)細(xì)節(jié)部分調(diào)整完畢，下面開(kāi)始設(shè)計(jì)中間的內(nèi)容區(qū)域。首先目前頁(yè)頭的視覺(jué)細(xì)節(jié)部分調(diào)整完畢，下面開(kāi)始設(shè)計(jì)中間的內(nèi)容區(qū)域。首先為圖片設(shè)置邊框樣式，這樣圖片看起來(lái)更精致。為圖片設(shè)置邊框樣式，這樣圖片看起來(lái)更精致。4-15.html4-15.html。 4.7 .3 4.7 .3 左側(cè)的主要內(nèi)容列左側(cè)的主要內(nèi)容列1.1.左側(cè)分為上，中，下三個(gè)部分：左側(cè)分為上，中，下三個(gè)部分：上面的上面的“今日推薦今日推薦”欄目，圖像居左，文字居右；欄

27、目，圖像居左，文字居右；中間的中間的“最受歡迎最受歡迎”欄目，圖像居右，文字局左；欄目，圖像居右，文字局左；下面的下面的“分類(lèi)推薦分類(lèi)推薦”欄目，內(nèi)容分為欄目，內(nèi)容分為3 3列，每一列圖像居上，文字居下；列，每一列圖像居上，文字居下； 為上，中，下三個(gè)部分分別套上為上，中，下三個(gè)部分分別套上divdiv，類(lèi)別為，類(lèi)別為recommendationrecommendation，如下，如下圖所示：圖所示： 4.7 .3 4.7 .3 左側(cè)的主要內(nèi)容列左側(cè)的主要內(nèi)容列1.1.左側(cè)分為上，中，下三個(gè)部分：左側(cè)分為上，中，下三個(gè)部分：上面的上面的“今日推薦今日推薦”欄目，再增加類(lèi)別欄目，再增加類(lèi)別img

28、img-left-left；中間的中間的“最受歡迎最受歡迎”欄目，再增加類(lèi)別欄目，再增加類(lèi)別imgimg-right-right；下面的下面的“分類(lèi)推薦分類(lèi)推薦”欄目，內(nèi)容分為欄目，內(nèi)容分為3 3列，增加類(lèi)別列，增加類(lèi)別multiColumnmultiColumn；文件見(jiàn)；文件見(jiàn)4-16.html。 4.7 .3 4.7 .3 左側(cè)的主要內(nèi)容列左側(cè)的主要內(nèi)容列2.2.可以看到，可以看到，3 3種欄目分別增加了一個(gè)類(lèi)別名稱(chēng)：種欄目分別增加了一個(gè)類(lèi)別名稱(chēng)：img-left,img-img-left,img-right,multiColumnright,multiColumn，下面分別設(shè)置樣式：，下

29、面分別設(shè)置樣式： 4.7 .3 4.7 .3 左側(cè)的主要內(nèi)容列左側(cè)的主要內(nèi)容列3.3.左列主要內(nèi)容設(shè)置為左浮動(dòng)，為了避免下面的左列主要內(nèi)容設(shè)置為左浮動(dòng)，為了避免下面的divdiv受到上面受到上面divdiv的浮動(dòng)影響，的浮動(dòng)影響，添加代碼如下：添加代碼如下：4.4.接下來(lái)對(duì)左側(cè)內(nèi)容的接下來(lái)對(duì)左側(cè)內(nèi)容的h2h2標(biāo)題做一些設(shè)置，使其更精致：標(biāo)題做一些設(shè)置，使其更精致： 代碼主要設(shè)置了字體、顏色、增加了下劃線以及右端的一個(gè)裝飾花圖像。代碼主要設(shè)置了字體、顏色、增加了下劃線以及右端的一個(gè)裝飾花圖像。 4.7 .3 4.7 .3 左側(cè)的主要內(nèi)容列左側(cè)的主要內(nèi)容列5. 5. “分類(lèi)推薦分類(lèi)推薦”欄目中的文

30、字和圖像之間的距離微調(diào)一下。欄目中的文字和圖像之間的距離微調(diào)一下。 至此，左側(cè)列的設(shè)置完成。接下來(lái)設(shè)置右邊欄。至此，左側(cè)列的設(shè)置完成。接下來(lái)設(shè)置右邊欄。 4.7 .4 4.7 .4 右邊欄右邊欄1.1.實(shí)現(xiàn)圓角框。實(shí)現(xiàn)圓角框。13-17.html13-17.html。準(zhǔn)備兩幅圖片：。準(zhǔn)備兩幅圖片： 4.7 .4 4.7 .4 右邊欄右邊欄2.2.為了使圓角框能夠靈活適應(yīng)內(nèi)容的長(zhǎng)度，實(shí)現(xiàn)自動(dòng)伸縮。為每一個(gè)部分增為了使圓角框能夠靈活適應(yīng)內(nèi)容的長(zhǎng)度，實(shí)現(xiàn)自動(dòng)伸縮。為每一個(gè)部分增加一層加一層標(biāo)簽。標(biāo)簽。 4.7 .4 4.7 .4 右邊欄右邊欄3.3.設(shè)置設(shè)置CSSCSS代碼如下，以實(shí)現(xiàn)所有代碼如下，

31、以實(shí)現(xiàn)所有divdiv的圓角效果：的圓角效果： 4.7 .4 4.7 .4 右邊欄右邊欄4.4.對(duì)圓角框中的對(duì)圓角框中的h2h2標(biāo)題進(jìn)行統(tǒng)一設(shè)置：標(biāo)題進(jìn)行統(tǒng)一設(shè)置： 4.7 .4 4.7 .4 右邊欄右邊欄5.5.對(duì)搜索框進(jìn)行設(shè)置，使文本輸入框和按鈕都居中對(duì)齊。對(duì)搜索框進(jìn)行設(shè)置，使文本輸入框和按鈕都居中對(duì)齊。 4.7 .4 4.7 .4 右邊欄右邊欄6.6.設(shè)置分類(lèi)目錄的列表樣式：設(shè)置分類(lèi)目錄的列表樣式：整個(gè)頁(yè)面的視覺(jué)設(shè)計(jì)完畢，頁(yè)腳部分比較簡(jiǎn)單，不再贅述。整個(gè)頁(yè)面的視覺(jué)設(shè)計(jì)完畢，頁(yè)腳部分比較簡(jiǎn)單，不再贅述。 4.8 CSS4.8 CSS布局的優(yōu)點(diǎn)布局的優(yōu)點(diǎn) 使用使用CSSCSS進(jìn)行布局的最大優(yōu)

32、點(diǎn)是非常靈活，進(jìn)行布局的最大優(yōu)點(diǎn)是非常靈活，可以方便地?cái)U(kuò)展和調(diào)整。可以方便地?cái)U(kuò)展和調(diào)整。 例如，當(dāng)網(wǎng)站隨著業(yè)務(wù)的發(fā)展，需要在頁(yè)面例如，當(dāng)網(wǎng)站隨著業(yè)務(wù)的發(fā)展，需要在頁(yè)面中增加一些內(nèi)容，那么不需要修改中增加一些內(nèi)容，那么不需要修改CSSCSS樣式，只需樣式，只需要簡(jiǎn)單地在要簡(jiǎn)單地在HTMLHTML中增加相應(yīng)的模塊就可以了。中增加相應(yīng)的模塊就可以了。 圖圖4.174.17所示的就是對(duì)頁(yè)面擴(kuò)展了內(nèi)容以后的所示的就是對(duì)頁(yè)面擴(kuò)展了內(nèi)容以后的效果，在效果，在“主要內(nèi)容主要內(nèi)容”部分增加了部分增加了“特色促銷(xiāo)特色促銷(xiāo)”和和“優(yōu)中選優(yōu)優(yōu)中選優(yōu)”兩個(gè)模塊，在右側(cè)欄中增加了兩個(gè)模塊，在右側(cè)欄中增加了“送貨服務(wù)送貨服

33、務(wù)”和和“熱門(mén)信息熱門(mén)信息”兩個(gè)模塊。兩個(gè)模塊。 文件文件4-18.html4-18.html。 在前面的頁(yè)面基礎(chǔ)上，增加這些內(nèi)容很容易。在前面的頁(yè)面基礎(chǔ)上，增加這些內(nèi)容很容易。 圖圖4.17 方便靈活地增加網(wǎng)頁(yè)中的內(nèi)容方便靈活地增加網(wǎng)頁(yè)中的內(nèi)容 不但如此，設(shè)計(jì)得足夠合理的頁(yè)面可以非常靈活地修改樣式，例不但如此，設(shè)計(jì)得足夠合理的頁(yè)面可以非常靈活地修改樣式，例如，只需要將兩列布局的浮動(dòng)方向交換，就可以立即得到一個(gè)新的頁(yè)如，只需要將兩列布局的浮動(dòng)方向交換，就可以立即得到一個(gè)新的頁(yè)面，如圖面，如圖4.184.18所示，可以看到左右兩列交換了位置。所示，可以看到左右兩列交換了位置。4-19.html4

34、-19.html。 原來(lái)的代碼：原來(lái)的代碼： 修改后的代碼：修改后的代碼： 圖圖4.18 方便地調(diào)換左右兩列的位置方便地調(diào)換左右兩列的位置4.9 4.9 交互效果設(shè)計(jì)交互效果設(shè)計(jì)圖圖4.19 設(shè)置不同位置的鼠標(biāo)指針經(jīng)過(guò)效果設(shè)置不同位置的鼠標(biāo)指針經(jīng)過(guò)效果 接下來(lái)進(jìn)行交互性動(dòng)態(tài)設(shè)計(jì)，主要實(shí)現(xiàn)鼠標(biāo)指針經(jīng)過(guò)時(shí)的效果，涉及接下來(lái)進(jìn)行交互性動(dòng)態(tài)設(shè)計(jì)，主要實(shí)現(xiàn)鼠標(biāo)指針經(jīng)過(guò)時(shí)的效果，涉及到的網(wǎng)頁(yè)元素包括：到的網(wǎng)頁(yè)元素包括： （1 1）次導(dǎo)航）次導(dǎo)航欄欄 （2 2）主導(dǎo)航）主導(dǎo)航欄欄 （3 3）賬號(hào)區(qū)）賬號(hào)區(qū) （4 4）圖像邊框）圖像邊框 （5 5）產(chǎn)品分類(lèi)）產(chǎn)品分類(lèi)4.9 4.9 交互效果設(shè)計(jì)交互效果設(shè)計(jì) 1

35、.1.次導(dǎo)航欄次導(dǎo)航欄 4-20.html4-20.html。 為次導(dǎo)航欄增加鼠標(biāo)經(jīng)過(guò)效果，首先準(zhǔn)備一個(gè)和原背景圖像的形狀相同，只是把白色改為次導(dǎo)航欄增加鼠標(biāo)經(jīng)過(guò)效果，首先準(zhǔn)備一個(gè)和原背景圖像的形狀相同，只是把白色改為黃色的新圖像，如圖：為黃色的新圖像，如圖： 然后為鏈接元素增加然后為鏈接元素增加“:hover:hover”的偽類(lèi)別，在其中更換背景圖像，適當(dāng)修改文字顏色；的偽類(lèi)別，在其中更換背景圖像，適當(dāng)修改文字顏色； 注意也要更換注意也要更換“a:hovera:hover”包含的包含的spanspan元素的背景圖像：元素的背景圖像：4.9 4.9 交互效果設(shè)計(jì)交互效果設(shè)計(jì) 2.2.主導(dǎo)航欄主

36、導(dǎo)航欄 4-21.html4-21.html。 主導(dǎo)航欄的做法和次導(dǎo)航欄一樣，首先準(zhǔn)備一個(gè)和原背景圖像的形狀相同，只是修改了主導(dǎo)航欄的做法和次導(dǎo)航欄一樣，首先準(zhǔn)備一個(gè)和原背景圖像的形狀相同，只是修改了顏色的新圖像，如圖：顏色的新圖像，如圖： 然后為鏈接元素增加然后為鏈接元素增加“:hover:hover”的偽類(lèi)別，在其中更換背景圖像；的偽類(lèi)別，在其中更換背景圖像； 注意也要更換注意也要更換“a:hovera:hover”包含的包含的spanspan元素的背景圖像，此外適當(dāng)修改文字的顏色：元素的背景圖像，此外適當(dāng)修改文字的顏色：4.9 4.9 交互效果設(shè)計(jì)交互效果設(shè)計(jì) 3.3.賬號(hào)區(qū)賬號(hào)區(qū) 4-

37、22.html4-22.html。（1 1）“登錄賬號(hào)登錄賬號(hào)”和和“購(gòu)物車(chē)購(gòu)物車(chē)”圖像的鼠標(biāo)經(jīng)過(guò)效果，實(shí)際上可以用更換背景圖像技術(shù)；圖像的鼠標(biāo)經(jīng)過(guò)效果，實(shí)際上可以用更換背景圖像技術(shù)；（2 2）但當(dāng)訪問(wèn)者瀏覽頁(yè)面時(shí)，各個(gè)圖片下載有先有后，如果網(wǎng)絡(luò)速度慢，當(dāng)鼠標(biāo)指針經(jīng)過(guò)某）但當(dāng)訪問(wèn)者瀏覽頁(yè)面時(shí)，各個(gè)圖片下載有先有后，如果網(wǎng)絡(luò)速度慢，當(dāng)鼠標(biāo)指針經(jīng)過(guò)某個(gè)鏈接的時(shí)候，會(huì)出現(xiàn)短暫的停頓，等圖像下載完畢后才會(huì)出現(xiàn)，影響訪問(wèn)者體驗(yàn)；個(gè)鏈接的時(shí)候，會(huì)出現(xiàn)短暫的停頓，等圖像下載完畢后才會(huì)出現(xiàn)，影響訪問(wèn)者體驗(yàn)；（3 3）改進(jìn)方案：使用下面的圖片，把兩個(gè)圖像合并在一起，然后當(dāng)鼠標(biāo)指針經(jīng)過(guò)時(shí)，通過(guò)對(duì)）改進(jìn)方案：使用下面的圖片，把兩個(gè)圖像合并在一起，然后當(dāng)鼠標(biāo)指針經(jīng)過(guò)時(shí)，通過(guò)對(duì)背景圖像的位置的改變實(shí)現(xiàn)最終的效果；