綜合案例—兒童用品網(wǎng)上商店

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

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

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

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

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

6、則無論網(wǎng)站多漂亮和花哨，都不能算是成功的作品；4.2 4.2 內(nèi)內(nèi) 容容 分分 析析圖圖13.4 卓越亞馬遜網(wǎng)站的首頁卓越亞馬遜網(wǎng)站的首頁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）賬號登錄與購物車）賬號登錄與購物車（6 6）今日推薦商品（）今日推薦商品（1 1種）種）（7 7）最受歡迎商品（）最受歡迎商品（1 1種）種）（8 8）分類推薦商品（）分類推薦商品（3 3種）種）（9 9）搜索框）搜索框（1010）類別菜單）類別菜單（1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

22、典型的“1-2-11-2-1”布局。布局。 4.7 4.7 細(xì)細(xì) 節(jié)節(jié) 設(shè)設(shè) 計計 4.7.1 4.7.1 頁頭部分頁頭部分 1.h11.h1標(biāo)題用圖像替換標(biāo)題用圖像替換 2. 2.設(shè)置賬號區(qū)的樣式設(shè)置賬號區(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 頁頁 頭頭 部分部分1.1.進(jìn)行進(jìn)行h1h1標(biāo)題的圖像替換。準(zhǔn)備一副圖片如下（標(biāo)題的圖像替換。準(zhǔn)備一副圖片如下（

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

24、ay屬性將文字隱藏。屬性將文字隱藏。4-11.html4-11.html。4.7 .1 4.7 .1 頁頁 頭頭 部分部分1.1.設(shè)置賬號區(qū)的樣式。準(zhǔn)備兩副圖片如下：設(shè)置賬號區(qū)的樣式。準(zhǔn)備兩副圖片如下：2.2.修改修改HTMLHTML，對兩個鏈接分別設(shè)置了類別名稱，同時注意利用，對兩個鏈接分別設(shè)置了類別名稱，同時注意利用spanspan標(biāo)記隱藏標(biāo)記隱藏文字。文字。 4-12.html 4-12.html。 13.7 .1 13.7 .1 頁頁 頭頭 部分部分 13.7 .1 13.7 .1 頁頁 頭頭 部分部分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 頁頁 頭頭 部分部分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)前頁的菜單項有圓角背景，而其他菜單項則欄的區(qū)別是，這里只有表示當(dāng)前頁的菜單項有圓角背景，而其他菜單項則沒有背景圖像，因此，背景設(shè)置在針對沒有背景圖

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

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

28、img-left-left；中間的中間的“最受歡迎最受歡迎”欄目，再增加類別欄目，再增加類別imgimg-right-right；下面的下面的“分類推薦分類推薦”欄目，內(nèi)容分為欄目，內(nèi)容分為3 3列，增加類別列，增加類別multiColumnmultiColumn；文件見；文件見4-16.html。 4.7 .3 4.7 .3 左側(cè)的主要內(nèi)容列左側(cè)的主要內(nèi)容列2.2.可以看到，可以看到，3 3種欄目分別增加了一個類別名稱：種欄目分別增加了一個類別名稱：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è)置為左浮動，為了避免下面的左列主要內(nèi)容設(shè)置為左浮動，為了避免下面的divdiv受到上面受到上面divdiv的浮動影響，的浮動影響，添加代碼如下：添加代碼如下：4.4.接下來對左側(cè)內(nèi)容的接下來對左側(cè)內(nèi)容的h2h2標(biāo)題做一些設(shè)置，使其更精致：標(biāo)題做一些設(shè)置，使其更精致： 代碼主要設(shè)置了字體、顏色、增加了下劃線以及右端的一個裝飾花圖像。代碼主要設(shè)置了字體、顏色、增加了下劃線以及右端的一個裝飾花圖像。 4.7 .3 4.7 .3 左側(cè)的主要內(nèi)容列左側(cè)的主要內(nèi)容列5. 5. “分類推薦分類推薦”欄目中的文

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

31、以實現(xiàn)所有divdiv的圓角效果：的圓角效果： 4.7 .4 4.7 .4 右邊欄右邊欄4.4.對圓角框中的對圓角框中的h2h2標(biāo)題進(jìn)行統(tǒng)一設(shè)置：標(biāo)題進(jìn)行統(tǒng)一設(shè)置： 4.7 .4 4.7 .4 右邊欄右邊欄5.5.對搜索框進(jìn)行設(shè)置，使文本輸入框和按鈕都居中對齊。對搜索框進(jìn)行設(shè)置，使文本輸入框和按鈕都居中對齊。 4.7 .4 4.7 .4 右邊欄右邊欄6.6.設(shè)置分類目錄的列表樣式：設(shè)置分類目錄的列表樣式：整個頁面的視覺設(shè)計完畢，頁腳部分比較簡單，不再贅述。整個頁面的視覺設(shè)計完畢，頁腳部分比較簡單，不再贅述。 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)是非常靈活，可以方便地擴(kuò)展和調(diào)整?？梢苑奖愕財U(kuò)展和調(diào)整。 例如，當(dāng)網(wǎng)站隨著業(yè)務(wù)的發(fā)展，需要在頁面例如，當(dāng)網(wǎng)站隨著業(yè)務(wù)的發(fā)展，需要在頁面中增加一些內(nèi)容，那么不需要修改中增加一些內(nèi)容，那么不需要修改CSSCSS樣式，只需樣式，只需要簡單地在要簡單地在HTMLHTML中增加相應(yīng)的模塊就可以了。中增加相應(yīng)的模塊就可以了。 圖圖4.174.17所示的就是對頁面擴(kuò)展了內(nèi)容以后的所示的就是對頁面擴(kuò)展了內(nèi)容以后的效果，在效果，在“主要內(nèi)容主要內(nèi)容”部分增加了部分增加了“特色促銷特色促銷”和和“優(yōu)中選優(yōu)優(yōu)中選優(yōu)”兩個模塊，在右側(cè)欄中增加了兩個模塊，在右側(cè)欄中增加了“送貨服務(wù)送貨服

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

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

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

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

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