第15章-網(wǎng)頁布局綜合案例-寶貝

第15章網(wǎng)頁布局綜合案例——寶貝屋網(wǎng)上商店在本章中，我們將結合前面所學知識，分析、策劃、設計并制作一個完整的案例。這個案例是為一個名為“BabyHousing”（寶貝屋）的兒童用品網(wǎng)上商店制作一個網(wǎng)站。通過這個網(wǎng)站的學習，讀者不僅可以更進一步了解我們前面所學過的所有知識，而且能夠掌握一套遵從Web標準的網(wǎng)頁設計流程。15.1案例分析在本章，我們只介紹“BabyHousing”（寶貝屋）網(wǎng)站首頁的制作過程。在首頁豎直方向分為上中下3部分，其中上下2個部分的背景會自動延伸，中間的內容區(qū)域分為左右兩列，左列為主要內容，右列由若干個圓角框構成。網(wǎng)站首頁效果如圖15.1所示。15.1案例分析

15.1案例分析此外，這個頁面具有很好的交互提示功能。例如，在頁頭部分的導航菜單具有鼠標指針經過時發(fā)生變化的效果，如圖15.2所示。15.2內容分析在設計網(wǎng)頁之前，首先要想清楚這個網(wǎng)站的內容是什么，通過一個網(wǎng)頁要傳達給訪問者什么信息，這些信息中哪些是最重要的，哪些是相對重要的，以及這些信息應該如何組織。也就是說，設計一個網(wǎng)頁的第一步根本不是這個頁面的樣子，而是頁面的內容。現(xiàn)在以這個“寶貝屋網(wǎng)上商店”的首頁為例進行一些說明。15.3原型設計網(wǎng)頁內容分析完后，還要有一個構思的過程，對網(wǎng)站的完整功能和內容進行更全面的分析。如果有條件，應該制作出線框圖，這個過程專業(yè)上稱為“原型設計”。例如，在具體制作網(wǎng)頁之前，我們就可以先設計一個如圖15.3所示的網(wǎng)頁原型。15.3原型設計

15.3原型設計網(wǎng)頁原型設計也是分步驟完成的。例如首先要考慮，把一個頁面從上至下依次分為3個部分，如圖15.4所示。15.3原型設計然后再將每個部分逐漸細化，例如頁頭部分，可以細化為如圖15.5所示的樣子。15.3原型設計中間的內容部分分為左右兩列，如圖15.6（左邊）所示。然后再進一步細化為如圖15.7（右邊）所示的樣子。15.4布局設計下面我們就可以根據(jù)原型設計圖來進行網(wǎng)頁的設計了。這里我們先進行整體樣式的設計，然后再進行頁頭部分、內容部分和頁腳部分的設計。15.4.1整體樣式設計首先對整個頁面進行一個整體設計，這里我們根據(jù)圖15.3給出頁面設計的基本結構代碼。代碼共分為3部分，一部分是頁頭部分，一部分是內容部分、一部分是頁腳部分，每一部分用一個<div>元素進行劃分。15.4.2頁頭部分下面開始對頁頭部分的設計進行詳解。根據(jù)圖15.4中設定的頁頭的各個部分來進行HTML代碼的編寫。1.設置頭部樣式2.設置h1標題樣式設置完成后h1標題效果如圖15.8所示。3.網(wǎng)站logo網(wǎng)站logo設置完成后效果如圖15.9所示。4.頂部導航欄頂部導航欄設置完成的效果如圖15.10所示。5.主導航欄樣式至此，主導航欄就設置完成了，效果如圖15.11所示。6.賬號與購物車賬號與購物車設計的效果如圖15.12所示。15.4.2頁頭部分至此，網(wǎng)頁頁頭部分就設計完成，頁頭部分整體效果如圖15.13所示。15.4.3內容部分下面開始設計網(wǎng)頁中間的內容區(qū)域。根據(jù)圖15.6我們將內容區(qū)域分為“主要內容”和“側邊欄”兩個部分，每個部分用<div>元素進行劃分。然后在每個<div>元素中分別設置里面的詳細內容。1.主要內容根據(jù)圖15.7，我們使用<div>元素將“主要內容”部分劃分為“今日推薦”、“最受歡迎”、“分類推薦”3部分。（1）HTML設計部分在“今日推薦”中，首先使用<h2>設置標題，然后插入了一張圖片鏈接，最后使用<p>元素來顯示“今日推薦”的文字內容。（2）CSS樣式設置接下來設置“主要部分”的CSS樣式。首先設置“主要內容”的寬度并設置為左浮動。然后，為“主要內容”中展示的圖片設置邊框樣式，這樣可以使圖像看起來更精致。這時，內容區(qū)域中的圖像就增加了一個邊框，如圖15.15所示。（2）CSS樣式設置接著，設置“今日推薦”的樣式，可以看出“今日推薦”中圖片是在文字的左邊，要使圖片向左浮動，并使圖像和文字之間間隔10像素。對于“最受歡迎”的樣式，要使圖片向右浮動，也使圖像和文字之間間隔10像素。對于“分類推薦”的樣式，是將“分類推薦”分為3列的欄目，要設定每一個列表項目的固定高度，然后使用浮動排列方式。接下來，我們對“主要內容”中的<h2>標題的樣式再做一些設置，使它顯得更精致一些。這里我們設置了標題的字體、顏色、下劃線，以及在標題的最右端插入一個裝飾花的圖片。1.主要內容至此，“主要內容”的設計就完成了，效果如圖15.15所示。2.側邊欄接下來進行內容部分的“側邊欄”的設計。根據(jù)圖15.7，我們仍然使用<div>元素將“側邊欄”部分劃分為“搜索”、“分類”、“特別提示”3部分。（1）HTML設計部分在“搜索”中，我們插入了一個表單<form>元素，然后在<form>元素中添加了一個文本框和一個顯示“查詢商品”的按鈕，用來搜素商品。在“分類”中，我們插入了一個表示標題的<h2>元素和一個顯示分類內容的<ul>元素。在“特別提示”中，插入了一個表示標題的<h2>元素和一個顯示特別提示內容的<p>元素。（2）CSS設計部分下面開始設置“側邊欄”的CSS樣式，首先設置“側邊欄”的整體樣式。這時圓角框已經實現(xiàn)了，但是圓角框內部的樣式還沒有詳細設計。接下來就來具體設置圓角框中的樣式。首先，對“側邊欄”中的<h2>標題進行統(tǒng)一設置，設置了邊距、字體、顏色和居中顯示。然后對搜索框進行設置，使文本輸入框和按鈕都居中對齊，并設置間距。最后，設置分類目錄的列表樣式。設置了列表的字體、高度、行高和上邊框的樣式，然后還設置了列表中鏈接<a>元素的樣式，在每個鏈接前面插入了一張蝴蝶形狀的裝飾圖。2.側邊欄至此，“側邊欄”就設計完成了，效果如圖15.17所示。15.4.4頁腳部分頁腳部分的設置非常簡單，就是在<div>元素中添加了兩個<p>元素，來顯示鏈接和版權信息。頁腳部分的CSS樣式設計也非常簡單。在頁腳部分插入了一張背景圖片，設置頁腳部分的文字顏色為白色，并設置了行高和邊距。15.4.4頁腳部分頁腳部分的設計效果如圖15.18所示。15.5交互效果設計接下來我們進行一些交互性的動態(tài)設計，這里主要是為網(wǎng)頁元素增加鼠標指針經過時的效果。當鼠標指針經過主導航欄、頂部導航欄和賬號與購物車圖像時，會有不同的效果，這是為了提示用戶所進行的選擇。15.5.1頂部導航欄為頂部導航欄增加鼠標指針經過效果，首先準備一個和原有背景圖片的形狀相同，但是顏色不同的新圖像top-navi-hover.gif。如圖15.19所示。然后為頂部導航欄中的鏈接元素增加“:hover”偽類，在其中更換背景圖像，同時更換“:hover”包含的<span>元素的背景圖片，此外適當修改文字的顏色。設置完成后，當鼠標指針經過頂部導航欄時效果如圖15.20所示。15.5.2主導航欄主導航欄的做法和頂部導航欄的一樣，準備背景圖片main-navi-hover.gif，如圖15.21所示。然后為主導航欄中的鏈接元素增加“:hover”偽類，在其中更換背景圖像，同時更換“:hover”包含的<span>元素的背景圖片，此外適當修改文字的顏色。設置完成后，當鼠標指針經過主導航欄時效果如圖15.22所示。15.5.3賬號區(qū)接下來實現(xiàn)“登錄賬號”和“購物車”圖像的鼠標經過效果。實際上，這里同樣是更換背景圖像，不過這里介紹一種略有變化的方法。這種方法就是把鼠標經過前和鼠標經過時的兩張圖片用同一張圖片表示。只是在鼠標經過時，通過對背景圖像位置的改變來實現(xiàn)交互效果?！暗卿涃~號”和“購物車”圖像的鼠標經過效果，如圖15.23所示。15.5.4圖像邊框在接下來實現(xiàn)的那個鼠標指針經過某個展示的圖片時，邊框發(fā)生變化的效果，如圖15.24所示。15.5.5產品分類最