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

綜合案例—兒童用品網(wǎng)上商店Web標準化技術(shù)本課將分析、策劃、設(shè)計、制作一個完整的網(wǎng)頁，通過對案例的講解，介紹一套遵從Web標準的設(shè)計流程。

案例概述1內(nèi)容分析2HTML結(jié)構(gòu)設(shè)計3原型設(shè)計4頁面方案設(shè)計5

布局設(shè)計6細節(jié)設(shè)計7CSS布局的優(yōu)點8交互效果設(shè)計9遵從Web標準的設(shè)計流程101案例概述

完成后的首頁網(wǎng)頁的內(nèi)容包括：標題Logo主導(dǎo)航欄次導(dǎo)航欄帳號登錄和購物車今日推薦最受歡迎分類推薦搜索欄分類導(dǎo)航特別提示版權(quán)信息2內(nèi)容分析

卓越亞馬遜網(wǎng)站的首頁要有明確的網(wǎng)站名稱和標志要給訪問者了解和聯(lián)系這個網(wǎng)站所有者信息的途徑網(wǎng)站的目的是銷售商品，必須要有清晰的產(chǎn)品導(dǎo)航展示最受歡迎和重點推薦的產(chǎn)品方便用戶查找商品的站內(nèi)搜索版權(quán)信息3原型設(shè)計

下面要考慮的是如何合理地在頁面上放置這些內(nèi)容。在設(shè)計任何網(wǎng)頁之前都應(yīng)該有個構(gòu)思的過程，最好制作出線框圖，這個過程叫“原型設(shè)計”。原型設(shè)計也是分步驟實現(xiàn)的，首先考慮把網(wǎng)頁分成上中下3部分。再將每個部分逐步細化。網(wǎng)頁頭部細化：中間內(nèi)容細化：網(wǎng)站首頁原型線框圖確定布局的細分程度原則：細分到可以用某一特定標記表示。4頁面方案設(shè)計

這一步的核心是美工設(shè)計，就是要讓頁面更美觀，同時準備網(wǎng)頁的圖片素材。在Fireworks或PS軟件中完成頁面方案的設(shè)計5HTML結(jié)構(gòu)設(shè)計

現(xiàn)在完全不要管CSS，通過HTML搭建出網(wǎng)頁的內(nèi)容結(jié)構(gòu)。盡可能保證在不使用CSS的情況下，頁面依然保持良好的結(jié)構(gòu)和可讀性，這不但便于閱讀和修改，還有助于被搜索引擎了解和收錄。13.3HTML結(jié)構(gòu)設(shè)計

標題標志主導(dǎo)航帳號今日推薦最受歡迎分類推薦搜索框產(chǎn)品分類特別提示版權(quán)信息次導(dǎo)航網(wǎng)頁的內(nèi)容包括：標題Logo主導(dǎo)航欄次導(dǎo)航欄帳號登錄和購物車今日推薦最受歡迎分類推薦搜索欄分類導(dǎo)航特別提示版權(quán)信息實例home-01將網(wǎng)頁的標題分級，分別用h1、h2、h3…標記，層次清晰。當有若干項目并列時<ul>是很好的選擇，它可以使頁面的邏輯關(guān)系清晰。代碼中沒有出現(xiàn)<div>標記，因為<div>是不具有語義的標記，在最初搭建HTML時只考慮語義相關(guān)的內(nèi)容。6布局設(shè)計

這一步的任務(wù)是把內(nèi)容放到適當?shù)奈恢?，暫時不涉及非常細節(jié)的因素。6.1整體樣式設(shè)計首先對整個頁面的共有屬性進行設(shè)置。

實例home-02body{ margin:0; padding:0; background:whiteurl('images/header-background.png')repeat-x; font:12px/1.6arial;/*字大小12px行高1.6em字體arial*/ }ul{ margin:0; padding:0; list-style:none;}a{ text-decoration:none; color:#3D81B4;}p{ text-indent:2em;}6.2頁頭部分根據(jù)原型線框圖設(shè)定的各個部分，對HTML進行加工。實例home-02將整個頭部放入一個div中，id名為header；將標志圖像放入一個div中，id名為logo；為各個導(dǎo)航欄設(shè)定id名稱。<divid="header"><h1>BabyHousing</h1><divid="logo"><imgsrc="images/logo.gif"/></div><ulid="mainNavigation"> <liclass="current"><ahref="#"><strong>網(wǎng)站首頁</strong></a></li> <li><ahref="#"><strong>產(chǎn)品介紹</strong></a></li> <li><ahref="#"><strong>信息</strong></a></li> <li><ahref="#"><strong>暢銷排行榜</strong></a></li></ul><ulid="topNavigation"> <li><ahref="#"><span>關(guān)于我們</span></a></li> <li><ahref="#"><span>聯(lián)系方式</span></a></li> <li><ahref="#"><span>意見建議</span></a></li></ul><ulid="accountBox"> <li><ahref="#"class="login"><span>登錄帳號</span></a></li> <li><ahref="#"class="cart"><span>購物車</span></a></li></ul></div>設(shè)置相應(yīng)的CSS樣式為了方便觀察，先臨時給div、ul、h1增加一個邊框，以確定各個元素是否放到了正確的位置。#headerdiv,#headerul,#headerh1{border:1pxredsolid;}設(shè)置整個頁頭的樣式：#header{ position:relative; width:760px; height:138px; margin:0auto; font:14px/1.6arial;}將header設(shè)置為相對定位，目的是使子元素使用絕對定位時將其作為包含塊。將logo設(shè)置為絕對定位：#header#logo{ position:absolute; top:10px; left:0px;}將次導(dǎo)航的列表設(shè)置為絕對定位，右上角對齊到header的右上角。#header#topNavigation{ position:absolute; top:0; right:0;}將次導(dǎo)航的列表項目設(shè)置為左浮動，使他們水平排列。#header#topNavigationli{ float:left; padding:02px;}同理，將主導(dǎo)航的列表設(shè)置為絕對定位，放置到合適的位置。#header#mainNavigation{ position:absolute; color:white; font-weight:bold; top:88px; left:0;}#header#mainNavigationli{ float:left; padding:5px;}將登錄賬號的列表設(shè)置為絕對定位，放置到合適的位置。#header#accountBox{ position:absolute; top:44px; right:10px;}#header#accountBoxli{ float:left; width:93px; height:110px; text-align:center;}效果如圖。雖然還需要進一步細化，但從布局的角度已經(jīng)實現(xiàn)了原型設(shè)計的要求。6.3內(nèi)容部分根據(jù)原型線框圖設(shè)定的各個部分，對HTML進行加工。實例home-02<divid="content"> <divid="mainContent"> <divclass="recommendation"> <h2>今日推薦</h2> …… </div> <divclass="recommendation"> <h2>最受歡迎</h2> …… </div> <divclass="recommendation"> <h2>分類推薦</h2> …… </div> </div> <divid="sideBar"> <divclass="searchBox"> <form>……</form> </div> <divclass="menuBox"> <h2>產(chǎn)品分類</h2> …… </div> <divclass="extraBox"> <h2>特別提示</h2> …… </div> </div></div>用CSS實現(xiàn)兩列布局：#contentdiv{ border:1pxgreensolid;}#content{ width:760px; margin:0auto;}#mainContent{ float:left; width:540px;}#sideBar{ float:right; width:186px; margin-right:10px; margin-top:20px;}6.4頁腳部分為頁腳增加一個div：<divid="footer"> <pclass="p1"><ahref="#">網(wǎng)站首頁</a>|<ahref="#">產(chǎn)品介紹</a>|<ahref="#">信息</a>|<ahref="#“>暢銷榜</a></p> <pclass="p2">版權(quán)屬于前沿科技</p></div>設(shè)置CSS：#footer{ clear:both; height:53px; margin:0; background:transparenturl('images/footer-background.png')repeat-x; text-indent:0px; text-align:center;}清除浮動問題另一種解決方法（較常用，經(jīng)典）：當一div盒子里有浮動盒子div時，在該div盒子里最后添加一空div盒子，將該空div盒子的樣式只設(shè)置一條代碼：clear:both;Html:<divclass=“cleardiv”></div>CSS:.cleardiv{clear:both;}7細節(jié)設(shè)計

7.1頁頭部分1.網(wǎng)頁標題在PS中切出標題圖像，如圖，用其替換h1標題。為h1標題設(shè)置CSS：#headerh1{ background:transparenturl('images/title.png')no-repeatbottomleft; height:63px; margin:0; margin-left:40px;}實例home-03隱藏原來的標題。在h1文字兩邊套上標記span:<h1><span>BabyHousing</span></h1>設(shè)置CSS樣式：

#headerh1span{ display:none;}2.登錄賬號在PS中切出“登錄賬號”和“購物車”圖像，如圖：對相應(yīng)的HTML作一些修改：<ulid="accountBox"><li><ahref=“#”class=“l(fā)ogin”><span>登錄帳號</span></a></li><li><ahref="#"class="cart"><span>購物車</span></a></li></ul>

為a設(shè)置類別的目的是為了分別設(shè)置樣式，加span的目的是為了隱藏文字。#header#accountBoxspan{ display:none;}#header#accountBoxa{ display:block; height:110px; width:93px;}#header#accountBox.login{ background:transparenturl('images/account-left.jpg')no-repeat;}#header#accountBox.cart{ background:transparenturl('images/account-right.jpg')no-repeat;}3.頂部導(dǎo)航欄為了實現(xiàn)適應(yīng)不同寬度的圓角效果，可以使用滑動門技術(shù)。為文字增加span標記，以便使用a和span分別設(shè)置左右兩側(cè)的背景圖像。對相應(yīng)的HTML作修改：

<ulid="topNavigation"> <li><ahref="#"><span>關(guān)于我們</span></a></li> <li><ahref="#"><span>聯(lián)系方式</span></a></li> <li><ahref="#"><span>意見建議</span></a></li></ul>

準備好背景圖，設(shè)置CSS樣式：#header#topNavigationa{ display:block; line-height:25px; padding:00014px; background:transparenturl('images/top-navi-white.gif')no-repeat;}#header#topNavigationaspan{ display:block; padding:014px00; background:transparenturl('images/top-navi-white.gif')no-repeatright;}4.主導(dǎo)航欄對相應(yīng)的HTML作修改：<ulid="mainNavigation"> <liclass="current"><ahref="#"><strong>網(wǎng)站首頁</strong></a></li> <li><ahref="#"><strong>產(chǎn)品介紹</strong></a></li> <li><ahref="#"><strong>信息</strong></a></li> <li><ahref="#"><strong>暢銷排行榜</strong></a></li></ul>用strong代替span，突出重點。這里與頂部導(dǎo)航不同的是當鼠標經(jīng)過時顯示圓角框。#header#mainNavigationa{ display:block; line-height:25px; padding:00014px; color:white;}#header#mainNavigationastrong{ display:block; padding:014px00;}#header#mainNavigation.currenta{ color:white; background:transparenturl('images/main-navi.gif')no-repeat;}#header#mainNavigation.currentastrong{ color:white; background:transparenturl('images/main-navi.gif')no-repeatright;}5.刪除紅色線框。7.2內(nèi)容部分

為所有圖片設(shè)置邊框樣式：#contentaimg{ padding:5px; background:#BDD6E8; border:1px#DEAF50solid;}左側(cè)分為上、中、下3個部分，特點：上面的“今日推薦”欄目：圖像居左、文字居右；中間的“最受歡迎”欄目：圖像居右、文字居左；下面的“分類推薦”欄目分為3列。7.3左側(cè)內(nèi)容列

對相應(yīng)的HTML作修改：<divid="mainContent"> <divid="img-left"> <h2>今日推薦</h2> …… </div> <divid="img-right"> <h2>最受歡迎</h2> …… </div> <divid="multiColumn"> <h2>分類推薦</h2> …… </div></div>#img-leftimg{ float:left; margin-right:10px;}#img-rightimg{ float:right; margin-left:10px;}#multiColumnli{ float:left; width:160px; margin:010px; text-align:center;}對標題做設(shè)置：#mainContenth2{ padding-top:20px; color:#069; border-bottom:1px#DEAF50solid; font:bold22px/24px楷體_GB2312; background:transparenturl('images/rose.png')no-repeatbottomright;}將圖像與下面的文字間距調(diào)整下：#multiColumnlip{ margin:0010px0;}7.4右邊欄

右邊是3個圓角框，對相應(yīng)的HTML作修改：<divid="sideBar"> <divid="searchBox"><span> …… </span> </div> <divid="menuBox"> <span> <h2>產(chǎn)品分類</h2> ……</span> </div> <divid="extraBox"> <span> <h2>特別提示</h2> …… </span> </div></div>#sideBardiv{ margin-top:20px; background:transparenturl('images/sidebox-bottom.png')no-repeatbottom; width:100%;}#sideBardivspan{ display:block;background:transparenturl('images/sidebox-top.png')no-repeat; padding:10px;}#sideBar#searchBox{ text-align:center;}#sideBarinput{ margin:5px0;}#sideBarh2{ margin:0px; font:bold22px/24px楷體_GB2312; color:#069; text-align:center;}#sideBar#menuBoxli{ font:14px宋體; height:25px; line-height:25px; border-top:1pxwhitesolid;}#sideBar#menuBoxlia{ display:block; padding-left:35px; background:transparenturl('images/menu-bullet.png')no-repeat10pxcenter; height:25px;}8CSS布局的優(yōu)點

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

方便靈活地增加網(wǎng)頁中的內(nèi)容

設(shè)計合理的頁面可以非常靈活地修改樣式，例如，只需要將兩列布局的浮動方向交換，就可以立即得到一個新的頁面，如圖所示，可以看到左右兩列交換了位置。9交互效果設(shè)計

設(shè)置不同位置的鼠標指針經(jīng)過效果9.1頂部導(dǎo)航#header#topNavigationa:hover{ color:white; background:transparenturl('images/top-navi-hover.gif')no-repeat;}#header#topNavigationa:hoverspan{ background:transparenturl('images/top-navi-hover.gif')no-repeatright;}9.2主導(dǎo)航欄#header#mainNavigationa:hover{ background:transparenturl('images/main-navi-hover.gif')no-repeat;}#header#mainNavigationa:hoverstrong{ background:transparenturl