《網(wǎng)站設(shè)計(jì)與開(kāi)發(fā)》 課件 項(xiàng)目五 電子商務(wù)網(wǎng)站設(shè)計(jì)開(kāi)發(fā)項(xiàng)目實(shí)戰(zhàn)

項(xiàng)目五電子商務(wù)網(wǎng)站設(shè)計(jì)開(kāi)發(fā)項(xiàng)目實(shí)戰(zhàn)任務(wù)一電子商務(wù)網(wǎng)站前期規(guī)劃任務(wù)二電子商務(wù)網(wǎng)站桌面端頁(yè)面制作任務(wù)三電子商務(wù)網(wǎng)站移動(dòng)端頁(yè)面制作任務(wù)四電子商務(wù)站點(diǎn)測(cè)試215項(xiàng)目引入在前面的項(xiàng)目中，已經(jīng)學(xué)習(xí)了網(wǎng)頁(yè)創(chuàng)建、頁(yè)面美化和網(wǎng)頁(yè)特效制作等內(nèi)容。本項(xiàng)目以一家虛擬的佳源集團(tuán)為例，通過(guò)項(xiàng)目實(shí)戰(zhàn)的方式，綜合應(yīng)用前面所學(xué)知識(shí)和技能，來(lái)學(xué)習(xí)電子商務(wù)網(wǎng)站的設(shè)計(jì)開(kāi)發(fā)。216學(xué)習(xí)目標(biāo)知識(shí)目標(biāo)1.了解網(wǎng)站開(kāi)發(fā)的準(zhǔn)備工作。2.理解網(wǎng)站原型圖的作用。技能目標(biāo)1.能夠依據(jù)客戶需求制定合理的網(wǎng)站開(kāi)發(fā)方案。2.能夠設(shè)計(jì)制作網(wǎng)站原型圖。217任務(wù)分析互聯(lián)網(wǎng)時(shí)代，在網(wǎng)站上獲取信息、購(gòu)買(mǎi)物品已經(jīng)成為現(xiàn)代人的主流生活方式。企業(yè)網(wǎng)站因此成為企業(yè)推廣宣傳自己和產(chǎn)品的重要渠道，它不僅是對(duì)外展示的窗口，也是與用戶交流的窗口。設(shè)計(jì)開(kāi)發(fā)一個(gè)實(shí)用、優(yōu)質(zhì)的網(wǎng)站對(duì)企業(yè)而言至關(guān)重要，這其中，前期規(guī)劃是網(wǎng)站設(shè)計(jì)開(kāi)發(fā)最基礎(chǔ)和最重要的環(huán)節(jié)，在這一過(guò)程中需要和客戶建立良好的溝通關(guān)系，制定合理的網(wǎng)站開(kāi)發(fā)方案，為之后的開(kāi)發(fā)奠定良好基礎(chǔ)。218一、準(zhǔn)備工作一個(gè)優(yōu)質(zhì)的網(wǎng)站在建設(shè)之前，一定做了充分的評(píng)估和準(zhǔn)備工作，并且制定了專業(yè)的網(wǎng)站開(kāi)發(fā)方案。網(wǎng)站開(kāi)發(fā)方案是網(wǎng)站開(kāi)發(fā)的依據(jù)，是開(kāi)發(fā)費(fèi)用和周期的評(píng)估基礎(chǔ)，是確定是否符合、滿足客戶需求的關(guān)鍵，也是評(píng)估網(wǎng)站質(zhì)量是否合格的標(biāo)準(zhǔn)。因此，網(wǎng)站開(kāi)發(fā)最為重要的準(zhǔn)備工作是和客戶進(jìn)行反復(fù)溝通后制定網(wǎng)站開(kāi)發(fā)方案。219網(wǎng)站開(kāi)發(fā)前期，為保證網(wǎng)站開(kāi)發(fā)的準(zhǔn)確性和有效性，開(kāi)發(fā)人員需要和客戶不斷溝通，如“為什么創(chuàng)建這個(gè)網(wǎng)站”“需要展示哪些內(nèi)容”“訪問(wèn)網(wǎng)站的都是哪些人”“需要多少個(gè)頁(yè)面”“網(wǎng)站是怎樣的結(jié)構(gòu)”等問(wèn)題，并收集網(wǎng)站開(kāi)發(fā)所需素材資源，明確網(wǎng)站整體架構(gòu)和內(nèi)容，撰寫(xiě)網(wǎng)站開(kāi)發(fā)方案。220二、網(wǎng)站原型設(shè)計(jì)一個(gè)好的網(wǎng)站誕生，必定離不開(kāi)原型設(shè)計(jì)。無(wú)論是網(wǎng)頁(yè)設(shè)計(jì)人員還是UI設(shè)計(jì)人員，在設(shè)計(jì)效果圖的時(shí)候都要經(jīng)過(guò)構(gòu)思、草稿、初稿、定稿等步驟，在定稿以前的步驟就是原型設(shè)計(jì)。通過(guò)原型設(shè)計(jì)，設(shè)計(jì)人員可以將基本的設(shè)計(jì)理念和構(gòu)想形象化地呈現(xiàn)出來(lái)。原型設(shè)計(jì)是幫助網(wǎng)站設(shè)計(jì)最終完成標(biāo)準(zhǔn)化和系統(tǒng)化的最好手段。221設(shè)計(jì)人員可以依據(jù)客戶需求和方案對(duì)網(wǎng)站進(jìn)行設(shè)計(jì)，并制作一份網(wǎng)站原型圖。網(wǎng)站原型圖就是將頁(yè)面的排版布局和互動(dòng)流程展現(xiàn)出來(lái)，是網(wǎng)站初步構(gòu)思的可視化展示。網(wǎng)站原型圖可以讓客戶提前看到網(wǎng)站的界面樣式，各版塊的功能和效果，從而獲得比較直觀的感受。原型圖不是最終設(shè)計(jì)稿，如需求有變化，或者邏輯交互不符合需求時(shí)，修改比較方便，有利于在開(kāi)發(fā)前發(fā)現(xiàn)和解決一部分潛在問(wèn)題。佳源集團(tuán)業(yè)務(wù)涉及零售、科技、物流、健康等領(lǐng)域，為消費(fèi)者提供家電、手機(jī)、計(jì)算機(jī)、母嬰、服裝等十三大品類商品。為了更好地發(fā)展，現(xiàn)決定開(kāi)通佳源線上購(gòu)物商城，急需搭建一個(gè)秉承客戶為先的綜合型購(gòu)物網(wǎng)站，其桌面端主頁(yè)原型圖如圖所示。222223佳源集團(tuán)電子商務(wù)網(wǎng)站桌面端主頁(yè)原型圖任務(wù)實(shí)施1.請(qǐng)繪制佳源集團(tuán)電子商務(wù)網(wǎng)站總體結(jié)構(gòu)圖，確定該網(wǎng)站的框架結(jié)構(gòu)。2.請(qǐng)參考佳源集團(tuán)電子商務(wù)網(wǎng)站桌面端主頁(yè)原型圖，繪制佳源集團(tuán)電子商務(wù)網(wǎng)站移動(dòng)端主頁(yè)原型圖。3.請(qǐng)編制佳源集團(tuán)電子商務(wù)網(wǎng)站策劃書(shū)。224學(xué)習(xí)目標(biāo)知識(shí)目標(biāo)1.熟悉桌面端頁(yè)面配色、布局特點(diǎn)。2.掌握桌面端頁(yè)面制作的流程、方法。技能目標(biāo)1.能夠應(yīng)用<nav>、<div>、<ul>、<li>等標(biāo)簽進(jìn)行網(wǎng)頁(yè)布局。2.能夠應(yīng)用CSS樣式美化網(wǎng)頁(yè)。225任務(wù)分析桌面端網(wǎng)站相較于移動(dòng)端網(wǎng)站，網(wǎng)頁(yè)承載能力更大，網(wǎng)頁(yè)內(nèi)容更豐富，可以實(shí)現(xiàn)更多的交互功能。本任務(wù)以佳源集團(tuán)為例，學(xué)習(xí)桌面端頁(yè)面制作。一、搭建項(xiàng)目環(huán)境1.創(chuàng)建文件夾及文件網(wǎng)站開(kāi)發(fā)是團(tuán)隊(duì)合作項(xiàng)目，需要提前將網(wǎng)站開(kāi)發(fā)的文件夾及其存放內(nèi)容告知團(tuán)隊(duì)人員，避免開(kāi)發(fā)過(guò)程中出現(xiàn)找不到文件或資源混亂等問(wèn)題。以佳源集團(tuán)電子商務(wù)網(wǎng)站為例，需要?jiǎng)?chuàng)建以下文件夾。226227網(wǎng)站文件夾文件夾制作完成后，需要?jiǎng)?chuàng)建以下文件，見(jiàn)表。index.html文件需要引入樣式文件base.css，它作為項(xiàng)目的初始化樣式文件是必不可少的，其代碼可參考程序清單。228網(wǎng)站文件229初始化樣式文件代碼樣例230初始化樣式文件代碼樣例231初始化樣式文件代碼樣例2.模塊化開(kāi)發(fā)模塊化是指解決一個(gè)復(fù)雜問(wèn)題時(shí)自頂向下逐層把系統(tǒng)劃分成若干模塊的過(guò)程，有多種屬性，分別反映其內(nèi)部特性。模塊化可以將一個(gè)復(fù)雜的項(xiàng)目按照不同功能進(jìn)行劃分，一個(gè)功能就是一個(gè)模塊，各個(gè)功能或模塊獨(dú)立存在且互不影響。模塊化開(kāi)發(fā)具有重復(fù)使用、更換方便等優(yōu)點(diǎn)。232在網(wǎng)站開(kāi)發(fā)過(guò)程中，網(wǎng)頁(yè)樣式或網(wǎng)頁(yè)結(jié)構(gòu)可能會(huì)在很多頁(yè)面中出現(xiàn)，尤其是電子商務(wù)網(wǎng)站的頁(yè)面頭部區(qū)域和底部區(qū)域，此時(shí)，可以把重復(fù)出現(xiàn)的結(jié)構(gòu)或樣式作為一個(gè)模塊，編寫(xiě)一次代碼。最典型的就是應(yīng)用common.css公共樣式文件寫(xiě)好一個(gè)樣式，其余頁(yè)面直接調(diào)用即可。因此，在佳源集團(tuán)電子商務(wù)網(wǎng)站的主頁(yè)、列表頁(yè)、詳情頁(yè)都要引入common.css公共樣式文件，屬于公共樣式的代碼，如清除浮動(dòng)、頁(yè)面文字顏色等都可以放入common.css文件中。2333.顯示網(wǎng)站圖標(biāo)每個(gè)網(wǎng)站都有自己的圖標(biāo)（favicon）。圖標(biāo)是縮略的網(wǎng)站標(biāo)志，便于識(shí)別與書(shū)簽收藏。瀏覽器可以將favicon顯示于地址欄中，也可置于書(shū)簽列表的網(wǎng)站名前，還可以放在標(biāo)簽式瀏覽界面的頁(yè)標(biāo)題前。目前主流瀏覽器都支持favicon.ico圖標(biāo)。顯示網(wǎng)站圖標(biāo)的步驟如下。首先，把確定好的圖片借助于第三方網(wǎng)站轉(zhuǎn)換為ico圖標(biāo)；其次，將生成的ico圖標(biāo)放入根目錄；最后，在HTML頁(yè)面里的<head></head>元素之間引入代碼，其代碼如下。2344.準(zhǔn)備標(biāo)簽網(wǎng)站中T是指<title></title>，D是指<meta>標(biāo)簽的description和keyword。title是網(wǎng)站標(biāo)題，具有不可替代性，是搜索引擎了解網(wǎng)站的入口，建議可以寫(xiě)成“網(wǎng)站名-網(wǎng)站的介紹”格式，方便后期SEO。description主要描述網(wǎng)站的功能，其內(nèi)容主要是由SEO工作人員填寫(xiě)。keyword是頁(yè)面關(guān)鍵詞，是搜索引擎的關(guān)注點(diǎn)之一，關(guān)鍵詞之間要用英文逗號(hào)分開(kāi)。前端開(kāi)發(fā)人員只需要準(zhǔn)備好以上標(biāo)簽，具體內(nèi)容由SEO工作人員準(zhǔn)備。235二、制作桌面端主頁(yè)網(wǎng)站主頁(yè)是一個(gè)網(wǎng)站的入口網(wǎng)頁(yè)，應(yīng)易于瀏覽，并引導(dǎo)用戶瀏覽網(wǎng)站其他部分的內(nèi)容。大多數(shù)作為主頁(yè)的文件名是index、default、main或portal加上擴(kuò)展名，比如index.html、index.php等。依據(jù)效果圖，佳源集團(tuán)電子商務(wù)網(wǎng)站主頁(yè)包括頭部區(qū)域、主區(qū)域和底部區(qū)域，其中又包括shortcut區(qū)域、header區(qū)域、nav區(qū)域、footer區(qū)域、main區(qū)域等，其中header區(qū)域、footer區(qū)域在每個(gè)網(wǎng)頁(yè)都會(huì)出現(xiàn)，根據(jù)模塊化開(kāi)發(fā)思路，只需要在common.css寫(xiě)一次樣式即可，這樣在制作列表頁(yè)時(shí)，直接把主頁(yè)的頭部區(qū)域和底部區(qū)域引入即可。236237桌面端主頁(yè)效果1.主頁(yè)頭部區(qū)域?qū)崿F(xiàn)主頁(yè)是網(wǎng)站的門(mén)面，對(duì)全網(wǎng)站具有導(dǎo)航作用，它主要是通過(guò)宣傳文案、圖片、視頻等讓用戶迅速了解產(chǎn)品信息。主頁(yè)頭部區(qū)域在每個(gè)頁(yè)面都會(huì)出現(xiàn)，因此，頭部區(qū)域的樣式均保存至common.css樣式文件中。制作主頁(yè)之前需要先確定好版心，版心是頁(yè)面中主要內(nèi)容所在的區(qū)域，即每頁(yè)版面正中的位置，又稱節(jié)口，不可以隨意更改，案例中版心（類名為w）的寬為1200px。因此，在common.css文件中寫(xiě)如下代碼。238（1）shortcut區(qū)域?qū)崿F(xiàn)shortcut（快捷導(dǎo)航）區(qū)域是用戶訪問(wèn)網(wǎng)站的快捷通道，它是一個(gè)高為31px、背景顏色為#f1f1f1的盒子（.shortcut）。首先設(shè)置區(qū)域版心樣式（.w），然后使用div、ul、li存放登錄、注冊(cè)、商城首頁(yè)、我的訂單、會(huì)員商城、商品分類、賣(mài)家中心、客戶服務(wù)、網(wǎng)站導(dǎo)航等文字信息，如圖所示。shortcut區(qū)域可參考程序清單。239shortcut區(qū)域效果240shortcut區(qū)域代碼樣例241shortcut區(qū)域代碼樣例（2）header區(qū)域?qū)崿F(xiàn)header區(qū)域是具有相對(duì)定位和版心樣式修飾的盒子（.header），由logo（.logo）、商品搜索（.search）、熱點(diǎn)詞（.hotwords）、購(gòu)物車(chē)（.shopcar）4個(gè)具有絕對(duì)定位的div組成，如圖所示，logo定位于左側(cè)，購(gòu)物車(chē)定位于右側(cè)，商品搜索和熱點(diǎn)詞采用絕對(duì)定位并設(shè)置top、left的值就可以完成此區(qū)域的布局。header區(qū)域代碼可參考程序清單。242header區(qū)域效果243header區(qū)域代碼樣例244header區(qū)域代碼樣例245header區(qū)域代碼樣例246header區(qū)域代碼樣例247header區(qū)域代碼樣例（3）nav區(qū)域?qū)崿F(xiàn)nav區(qū)域顯示商品全部分類，是網(wǎng)頁(yè)的導(dǎo)航模塊，通過(guò)nav區(qū)域可以進(jìn)入商品列表頁(yè)或商品詳情頁(yè)，如圖所示。制作導(dǎo)航條一般選擇ul和li添加導(dǎo)航信息，其中左部導(dǎo)航條的分類信息部分，商品分類的文字大小為16px且背景顏色為#b1191a，其他文字大小為14px且背景顏色為#c81623。鼠標(biāo)移過(guò)后文字顏色變?yōu)?c81623，背景顏色變?yōu)榘咨?。頂部?dǎo)航條文字大小為16px且顏色為#c81623。nav區(qū)域代碼可參考程序清單。248249nav區(qū)域效果250nav區(qū)域代碼樣例251nav區(qū)域代碼樣例252nav區(qū)域代碼樣例253nav區(qū)域代碼樣例254nav區(qū)域代碼樣例2.主頁(yè)主區(qū)域?qū)崿F(xiàn)主頁(yè)的主區(qū)域是index.html網(wǎng)頁(yè)專有的，因此，需要新建一個(gè)CSS樣式文件，命名為index.css。（1）main區(qū)域?qū)崿F(xiàn)main區(qū)域左側(cè)的詳細(xì)商品分類已經(jīng)完成，所以需要將main的盒子寬度設(shè)置為980像素，距離左邊220px，main盒子里有焦點(diǎn)（focus）圖和新聞快報(bào)（news?ash）兩個(gè)模塊，其中焦點(diǎn)圖設(shè)置為左浮動(dòng)，新聞快報(bào)設(shè)置為右浮動(dòng)。主頁(yè)main區(qū)域代碼可參考程序清單。255256main區(qū)域效果257main區(qū)域代碼樣例258main區(qū)域代碼樣例259main區(qū)域代碼樣例260main區(qū)域代碼樣例261main區(qū)域代碼樣例262main區(qū)域代碼樣例263main區(qū)域代碼樣例264main區(qū)域代碼樣例（2）recom區(qū)域?qū)崿F(xiàn)recom區(qū)域制作較為簡(jiǎn)單，只需要注意盒子之間的浮動(dòng)即可。recom區(qū)域代碼可參考程序清單。265recom區(qū)域效果266recom區(qū)域代碼樣例267recom區(qū)域代碼樣例268recom區(qū)域代碼樣例（3）floor區(qū)域?qū)崿F(xiàn)?oor區(qū)域主要展示某類商品信息，也稱樓層區(qū)域，主要由兩個(gè)盒子組成，第一個(gè)盒子放家用電器、熱門(mén)、大家電、生活電器等文字信息，需要設(shè)置一個(gè)高度和下邊框，第二個(gè)盒子主要放產(chǎn)品信息。?oor區(qū)域代碼可參考程序清單。269?oor區(qū)域效果270?oor區(qū)域代碼樣例271?oor區(qū)域代碼樣例272?oor區(qū)域代碼樣例273?oor區(qū)域代碼樣例274?oor區(qū)域代碼樣例275?oor區(qū)域代碼樣例276?oor區(qū)域代碼樣例3.主頁(yè)底部區(qū)域?qū)崿F(xiàn)主頁(yè)底部（footer）區(qū)域在不同頁(yè)面所呈現(xiàn)的效果是一樣的，是網(wǎng)頁(yè)設(shè)計(jì)中必不可少的部分，一般包含公司信息、幫助中心、友情鏈接、版權(quán)所屬、工商局備案等各種信息。此區(qū)域也屬于公共區(qū)域，所有的樣式應(yīng)該寫(xiě)在common.css文件中，主要就是添加文字信息，一般多使用dl、dt、dd制作。底部區(qū)域代碼可參考程序清單。277278底部區(qū)域效果279底部區(qū)域代碼樣例280底部區(qū)域代碼樣例281底部區(qū)域代碼樣例282底部區(qū)域代碼樣例283底部區(qū)域代碼樣例284底部區(qū)域代碼樣例285底部區(qū)域代碼樣例三、桌面端列表頁(yè)制作列表頁(yè)就是把若干內(nèi)容以某個(gè)維度集合起來(lái)的聚合頁(yè)?？蛻艨梢酝ㄟ^(guò)電商平臺(tái)的列表頁(yè)快速找到想要購(gòu)買(mǎi)的商品。佳源集團(tuán)電子商務(wù)網(wǎng)站的主頁(yè)已經(jīng)制作完成，所有商品都可以通過(guò)商品分類導(dǎo)航條找到相關(guān)信息，直接跳轉(zhuǎn)到對(duì)應(yīng)的列表頁(yè)，方便用戶查找商品。下面將以制作女裝列表頁(yè)為例進(jìn)行講解。286列表頁(yè)是新的頁(yè)面，需要新建頁(yè)面文件list.html。依據(jù)效果圖，可以發(fā)現(xiàn)列表頁(yè)的頭部、底部和主頁(yè)的頭部區(qū)域、底部區(qū)域基本一致，因此可以將主頁(yè)的頭部區(qū)域、底部區(qū)域結(jié)構(gòu)代碼復(fù)制到list.html中，并且在list.html中引入common.css樣式文件。此外，還需要新建一個(gè)列表頁(yè)專門(mén)的樣式文件list.css。287288列表頁(yè)效果1.列表頁(yè)頭部區(qū)域和底部區(qū)域?qū)崿F(xiàn)列表頁(yè)也需要在<head></head>標(biāo)簽寫(xiě)T、D、K等網(wǎng)頁(yè)信息。首先，需要將主頁(yè)的T、D、K復(fù)制到列表頁(yè)的<head></head>標(biāo)簽內(nèi)，修改文字部分。其次，復(fù)制主頁(yè)的頭部區(qū)域和底部區(qū)域結(jié)構(gòu)代碼，修改頭部區(qū)域<nav></nav>模塊的文字信息。最后，引用base.css、common.css和list.css樣式。列表頁(yè)頭部區(qū)域nav模塊代碼可參考程序清單。289290列表頁(yè)頭部區(qū)域nav模塊代碼樣例2.列表頁(yè)主區(qū)域?qū)崿F(xiàn)列表頁(yè)主區(qū)域展示各類商品信息。主體部分放在sk_container盒子中，分為上下兩部分，上半部分放在sk_hd盒子中，是商品列表信息的頭部；下半部分放在sk_bd盒子中，展示各類商品詳細(xì)信息。列表頁(yè)主區(qū)域nav模塊代碼可參考程序清單。291列表頁(yè)主區(qū)域nav模塊代碼樣例292列表頁(yè)頭部區(qū)域nav模塊代碼樣例293列表頁(yè)頭部區(qū)域nav模塊代碼樣例294列表頁(yè)頭部區(qū)域nav模塊代碼樣例295列表頁(yè)頭部區(qū)域nav模塊代碼樣例學(xué)習(xí)目標(biāo)知識(shí)目標(biāo)1.熟悉移動(dòng)端頁(yè)面配色、布局特點(diǎn)。2.掌握移動(dòng)端頁(yè)面制作的流程、方法。技能目標(biāo)1.能夠根據(jù)原型設(shè)計(jì)圖實(shí)現(xiàn)移動(dòng)端網(wǎng)頁(yè)布局。2.能夠根據(jù)原型設(shè)計(jì)圖制作移動(dòng)端網(wǎng)頁(yè)樣式。296任務(wù)分析一、搭建項(xiàng)目環(huán)境開(kāi)發(fā)移動(dòng)端網(wǎng)站可以有兩個(gè)選擇。一是單獨(dú)制作移動(dòng)端頁(yè)面，如京東商城手機(jī)版、淘寶觸屏版、蘇寧易購(gòu)手機(jī)版等，通常情況下，它的網(wǎng)址域名前面需要加m（mobile）。在用戶輸入網(wǎng)址后，后臺(tái)判斷當(dāng)前設(shè)備，如果是移動(dòng)端設(shè)備則跳至移動(dòng)端網(wǎng)站，如果是桌面端設(shè)備則跳至桌面端網(wǎng)站。二是制作一個(gè)兼容移動(dòng)端的響應(yīng)式頁(yè)面，它是通過(guò)判斷屏幕寬度來(lái)改變樣式，以適應(yīng)不同終端，可以用媒體查詢、bootstrap等技術(shù)實(shí)現(xiàn)。297本任務(wù)按第一種方式為商城搭建專門(mén)的移動(dòng)端站點(diǎn)。在建設(shè)移動(dòng)端網(wǎng)站之前，需要考慮技術(shù)選型。移動(dòng)端網(wǎng)站開(kāi)發(fā)中比較常見(jiàn)的布局方式為流式布局，就是百分比布局，也稱非固定像素布局，它是通過(guò)將盒子的寬度設(shè)置成百分比，從而根據(jù)屏幕的寬度來(lái)進(jìn)行伸縮，不受固定像素的限制，內(nèi)容向兩側(cè)填充。2981.創(chuàng)建文件夾及文件創(chuàng)建移動(dòng)端網(wǎng)站開(kāi)發(fā)的文件夾和文件與創(chuàng)建桌面端網(wǎng)站開(kāi)發(fā)的文件夾和文件較為相似。常用的網(wǎng)站文件夾和文件見(jiàn)表。299網(wǎng)站文件夾和文件2.設(shè)置視口標(biāo)簽以及引入初始化樣式在桌面端網(wǎng)頁(yè)開(kāi)發(fā)中，不使用<meta>標(biāo)簽設(shè)置視口，瀏覽器會(huì)按照默認(rèn)的布局視口寬度顯示網(wǎng)頁(yè)。如果希望網(wǎng)頁(yè)在瀏覽器中以理想視口的形式呈現(xiàn)，就需要使用<meta>標(biāo)簽設(shè)置視口。視口標(biāo)簽代碼如下。開(kāi)發(fā)移動(dòng)端網(wǎng)頁(yè)，首先要理解<meta>標(biāo)簽的用法。移動(dòng)端網(wǎng)頁(yè)開(kāi)發(fā)過(guò)程中，<meta>標(biāo)簽可以規(guī)定可視區(qū)域的寬度和高度，也可以定義是否對(duì)頁(yè)面進(jìn)行縮放以及縮放級(jí)別。300<meta>標(biāo)簽中“width=device-width”是指讓當(dāng)前viewport的寬度等于設(shè)備的寬度，如果不這樣設(shè)定，網(wǎng)頁(yè)中可能會(huì)出現(xiàn)橫向滾動(dòng)條；“user-scalable=0”表示不允許用戶手動(dòng)縮放，是否允許用戶縮放依據(jù)網(wǎng)站需求而定；“initial-scale=1.0”表示頁(yè)面首次被顯示是可視區(qū)域的縮放級(jí)別，取值1.0表示頁(yè)面按實(shí)際尺寸顯示，無(wú)任何縮放；“maximum-scale=1.0”表示用戶可將頁(yè)面放大，當(dāng)maximum-scale為1.0時(shí)，禁止用戶放大到實(shí)際尺寸之上；“minimum-scale=1.0”表示用戶可將頁(yè)面縮小，當(dāng)minimum-scale為1.0時(shí)，禁止用戶縮小到實(shí)際尺寸之下。3013.引入初始化樣式移動(dòng)端CSS初始化可以使用normalize.css，這是一個(gè)可以定制的CSS文件，可以讓不同的瀏覽器在渲染網(wǎng)頁(yè)元素的時(shí)候形式更統(tǒng)一，在HTML元素樣式上提供了跨瀏覽器的高度一致性，它也具有模塊化功能，擁有詳細(xì)的文檔，其代碼可參考程序清單。302引入初始化樣式文件代碼樣例4.body的設(shè)置流式布局是一種等比例縮放布局方式，在CSS中使用百分比來(lái)設(shè)置寬度，也稱百分比自適應(yīng)寬度布局。流式布局實(shí)現(xiàn)方法是將CSS固定像素寬度換算為百分比寬度。因此，在開(kāi)發(fā)過(guò)程中，需要考慮文件的主體即body元素的設(shè)置，其代碼可參考程序清單。303304body的設(shè)置代碼樣例二、制作移動(dòng)端主頁(yè)在制作移動(dòng)端主頁(yè)之前，需要依據(jù)效果圖分析頁(yè)面布局。本案例移動(dòng)端主頁(yè)包括頭部區(qū)域和主區(qū)域。1.主頁(yè)頭部區(qū)域?qū)崿F(xiàn)主頁(yè)頭部區(qū)域主要由提示用戶打開(kāi)App模塊和搜索模塊組成，因?yàn)椴捎昧魇讲季?，?yè)面總寬度為100%，所以需要規(guī)劃每個(gè)盒子的寬度，并且以百分比的形式賦值。305移動(dòng)端主頁(yè)效果（1）提示用戶打開(kāi)App模塊提示用戶打開(kāi)App模塊，高度為45px，利用<ul></ul>和<li></li>將盒子劃分為4個(gè)區(qū)域，寬度從左至右分別為8%、10%、57%、25%，在相應(yīng)的區(qū)域填充內(nèi)容并設(shè)置好相關(guān)樣式，如圖所示。提示用戶打開(kāi)App模塊的代碼可參考程序清單。306提示用戶打開(kāi)App模塊效果307提示用戶打開(kāi)App模塊的代碼樣例308提示用戶打開(kāi)App模塊的代碼樣例（2）搜索模塊搜索模塊分為3個(gè)區(qū)域，左右兩個(gè)區(qū)域作為固定不變的模塊設(shè)置定位，中間的搜索框處理成標(biāo)準(zhǔn)流并加margin值，這樣能夠?qū)崿F(xiàn)搜索框自適應(yīng)屏幕寬度的效果，如圖所示。搜索模塊代碼可參考程序清單。309搜索模塊效果310搜索模塊代碼樣例311搜索模塊代碼樣例312搜索模塊代碼樣例313搜索模塊代碼樣例2.主頁(yè)主區(qū)域?qū)崿F(xiàn)主頁(yè)主區(qū)域主要包括輪播圖模塊、活動(dòng)模塊、導(dǎo)航欄模塊和新聞快報(bào)模塊等，依然采用流式布局，頁(yè)面總寬度為100%，所以需要規(guī)劃每個(gè)盒子的寬度，并且以百分比的形式賦值。（1）輪播圖模塊輪播圖的制作應(yīng)用網(wǎng)頁(yè)特效的制作方法，通過(guò)計(jì)算每張圖片的步長(zhǎng)控制圖片的移動(dòng)，如圖所示。輪播圖模塊代碼可參考程序清單。314315輪播圖模塊效果輪播圖模塊代碼樣例316輪播圖模塊代碼樣例317輪播圖模塊代碼樣例318輪播圖模塊代碼樣例319輪播圖模塊代碼樣例320輪播圖模塊代碼樣例（2）活動(dòng)模塊活動(dòng)模塊可以實(shí)現(xiàn)點(diǎn)擊圖片不同區(qū)域跳轉(zhuǎn)至不同頁(yè)面的功能。以品牌日活動(dòng)為例，實(shí)現(xiàn)方式是在品牌日區(qū)域放置3個(gè)盒子，每個(gè)盒子寬度為33.33%，如圖所示。品牌日模塊代碼可參考程序清單。321品牌日模塊效果322品牌日模塊代碼樣例323品牌日模塊代碼樣例（3）導(dǎo)航欄模塊導(dǎo)航欄方便用戶分類查找信息，盒子的高度不用設(shè)置，由2行組成，每行5個(gè)小盒子，每個(gè)小盒子的寬度為20%，每個(gè)盒子由標(biāo)簽<a></a>組成，如圖所示。導(dǎo)航欄模塊代碼可參考程序清單。324導(dǎo)航欄模塊效果325導(dǎo)航欄模塊代碼樣例326導(dǎo)航欄模塊代碼樣例327導(dǎo)航欄模塊代碼樣例328導(dǎo)航欄模塊代碼樣例（4）新聞快報(bào)模塊新聞快報(bào)區(qū)域由3個(gè)盒子組成，第一個(gè)盒子寬度占50%，第二個(gè)盒子和第三個(gè)盒子的寬度分別占25%，如圖所示。新聞快報(bào)模塊代碼可參考程序清單。329新聞快報(bào)模塊效果330新聞快報(bào)模塊代碼樣例331新聞快報(bào)模塊代碼樣例三、移動(dòng)端列表頁(yè)制作移動(dòng)端主頁(yè)制作完成后，所有商品都可以通過(guò)商品分類導(dǎo)航條找到相關(guān)信息，直接跳轉(zhuǎn)到對(duì)應(yīng)的列表頁(yè)，方便用戶查找商品。下面將以制作女裝列表頁(yè)為例進(jìn)行講解。332列表頁(yè)效果1.列表頁(yè)頭部區(qū)域?qū)崿F(xiàn)列表頁(yè)是新的頁(yè)面，需要新建頁(yè)面文件list.html。依據(jù)效果圖，可以發(fā)現(xiàn)列表頁(yè)的頭部區(qū)域和主頁(yè)的頭部區(qū)域基本一致，因此可以將主頁(yè)的頭部區(qū)域結(jié)構(gòu)代碼復(fù)制到list.html中，并且在list.html中引入normalize.css樣式文件。此外，還需要新建一個(gè)列表頁(yè)專門(mén)的樣式文件list.css。列表頁(yè)頭部區(qū)域nav模塊代碼可參考程序清單。333列表頁(yè)頭部區(qū)域效果334列表頁(yè)頭部區(qū)域nav模塊代碼樣例335列表頁(yè)頭部區(qū)域nav模塊代碼樣例336列表頁(yè)頭部區(qū)域nav模塊代碼樣例337列表頁(yè)頭部區(qū)域nav模塊代碼樣例338列表頁(yè)頭部區(qū)域nav模塊代碼樣例339列表頁(yè)頭部區(qū)域nav模塊代碼樣例340列表頁(yè)頭部區(qū)域nav模塊代碼樣例341列表頁(yè)頭部區(qū)域nav模塊代碼樣例2.列表頁(yè)主區(qū)域?qū)崿F(xiàn)列表頁(yè)主區(qū)域展示各類商品信息，主體部分放在main-content盒子中，分為上、中、下三部分，分別為品牌活動(dòng)促銷（brand）、導(dǎo)航（nav）和產(chǎn)品信息（info），其中nav模塊和主頁(yè)的nav模塊一致，直接復(fù)制即可。列表頁(yè)主區(qū)域代碼可參考程序清單。342列表頁(yè)效果343列表頁(yè)主區(qū)域代碼樣例344列表頁(yè)主區(qū)域代碼樣例345列表頁(yè)主區(qū)域代碼樣例346列表頁(yè)主區(qū)域代碼樣例347列表頁(yè)主區(qū)域代碼樣例348列表頁(yè)主區(qū)域代碼樣例任務(wù)引入知識(shí)目標(biāo)1.理解判斷站點(diǎn)訪問(wèn)者終端類型的方法。2.掌握站點(diǎn)測(cè)試與發(fā)布的方法。技能目標(biāo)能夠熟練使用軟件進(jìn)行站點(diǎn)的測(cè)試與發(fā)布。349任務(wù)分析在電子商務(wù)網(wǎng)站設(shè)計(jì)開(kāi)發(fā)完成后，就要進(jìn)入網(wǎng)站的測(cè)試與發(fā)布環(huán)節(jié)。通過(guò)測(cè)試，找出系統(tǒng)中潛在的錯(cuò)誤和缺陷，驗(yàn)證系統(tǒng)的功能和性能是否滿足系統(tǒng)需求，檢驗(yàn)建設(shè)的網(wǎng)站是否實(shí)現(xiàn)了規(guī)劃的預(yù)期目標(biāo)、是否能夠滿足業(yè)務(wù)流程的要求、界面是否友好、操作是否簡(jiǎn)單方便、輸入和輸出的數(shù)據(jù)信息是否準(zhǔn)確流暢等。網(wǎng)站測(cè)試完成后，就可以發(fā)布上線了。350一、判斷訪問(wèn)者的終端類型在移動(dòng)互聯(lián)網(wǎng)時(shí)代，越來(lái)越多的企業(yè)不僅僅局限于桌面端網(wǎng)站的開(kāi)發(fā)，也