《網(wǎng)站設(shè)計(jì)與開發(fā)》 課件 勞動(dòng) 項(xiàng)目5-7 電子商務(wù)網(wǎng)站設(shè)計(jì)開發(fā)項(xiàng)目實(shí)戰(zhàn)- 電子商務(wù)網(wǎng)站的推廣

項(xiàng)目五電子商務(wù)網(wǎng)站設(shè)計(jì)開發(fā)項(xiàng)目實(shí)戰(zhàn)任務(wù)一電子商務(wù)網(wǎng)站前期規(guī)劃任務(wù)二電子商務(wù)網(wǎng)站桌面端頁面制作任務(wù)三電子商務(wù)網(wǎng)站移動(dòng)端頁面制作任務(wù)四電子商務(wù)站點(diǎn)測試1項(xiàng)目引入在前面的項(xiàng)目中，已經(jīng)學(xué)習(xí)了網(wǎng)頁創(chuàng)建、頁面美化和網(wǎng)頁特效制作等內(nèi)容。本項(xiàng)目以一家虛擬的佳源集團(tuán)為例，通過項(xiàng)目實(shí)戰(zhàn)的方式，綜合應(yīng)用前面所學(xué)知識(shí)和技能，來學(xué)習(xí)電子商務(wù)網(wǎng)站的設(shè)計(jì)開發(fā)。2學(xué)習(xí)目標(biāo)知識(shí)目標(biāo)1.了解網(wǎng)站開發(fā)的準(zhǔn)備工作。2.理解網(wǎng)站原型圖的作用。技能目標(biāo)1.能夠依據(jù)客戶需求制定合理的網(wǎng)站開發(fā)方案。2.能夠設(shè)計(jì)制作網(wǎng)站原型圖。3任務(wù)分析互聯(lián)網(wǎng)時(shí)代，在網(wǎng)站上獲取信息、購買物品已經(jīng)成為現(xiàn)代人的主流生活方式。企業(yè)網(wǎng)站因此成為企業(yè)推廣宣傳自己和產(chǎn)品的重要渠道，它不僅是對外展示的窗口，也是與用戶交流的窗口。設(shè)計(jì)開發(fā)一個(gè)實(shí)用、優(yōu)質(zhì)的網(wǎng)站對企業(yè)而言至關(guān)重要，這其中，前期規(guī)劃是網(wǎng)站設(shè)計(jì)開發(fā)最基礎(chǔ)和最重要的環(huán)節(jié)，在這一過程中需要和客戶建立良好的溝通關(guān)系，制定合理的網(wǎng)站開發(fā)方案，為之后的開發(fā)奠定良好基礎(chǔ)。4一、準(zhǔn)備工作一個(gè)優(yōu)質(zhì)的網(wǎng)站在建設(shè)之前，一定做了充分的評估和準(zhǔn)備工作，并且制定了專業(yè)的網(wǎng)站開發(fā)方案。網(wǎng)站開發(fā)方案是網(wǎng)站開發(fā)的依據(jù)，是開發(fā)費(fèi)用和周期的評估基礎(chǔ)，是確定是否符合、滿足客戶需求的關(guān)鍵，也是評估網(wǎng)站質(zhì)量是否合格的標(biāo)準(zhǔn)。因此，網(wǎng)站開發(fā)最為重要的準(zhǔn)備工作是和客戶進(jìn)行反復(fù)溝通后制定網(wǎng)站開發(fā)方案。5網(wǎng)站開發(fā)前期，為保證網(wǎng)站開發(fā)的準(zhǔn)確性和有效性，開發(fā)人員需要和客戶不斷溝通，如“為什么創(chuàng)建這個(gè)網(wǎng)站”“需要展示哪些內(nèi)容”“訪問網(wǎng)站的都是哪些人”“需要多少個(gè)頁面”“網(wǎng)站是怎樣的結(jié)構(gòu)”等問題，并收集網(wǎng)站開發(fā)所需素材資源，明確網(wǎng)站整體架構(gòu)和內(nèi)容，撰寫網(wǎng)站開發(fā)方案。6二、網(wǎng)站原型設(shè)計(jì)一個(gè)好的網(wǎng)站誕生，必定離不開原型設(shè)計(jì)。無論是網(wǎng)頁設(shè)計(jì)人員還是UI設(shè)計(jì)人員，在設(shè)計(jì)效果圖的時(shí)候都要經(jīng)過構(gòu)思、草稿、初稿、定稿等步驟，在定稿以前的步驟就是原型設(shè)計(jì)。通過原型設(shè)計(jì)，設(shè)計(jì)人員可以將基本的設(shè)計(jì)理念和構(gòu)想形象化地呈現(xiàn)出來。原型設(shè)計(jì)是幫助網(wǎng)站設(shè)計(jì)最終完成標(biāo)準(zhǔn)化和系統(tǒng)化的最好手段。7設(shè)計(jì)人員可以依據(jù)客戶需求和方案對網(wǎng)站進(jìn)行設(shè)計(jì)，并制作一份網(wǎng)站原型圖。網(wǎng)站原型圖就是將頁面的排版布局和互動(dòng)流程展現(xiàn)出來，是網(wǎng)站初步構(gòu)思的可視化展示。網(wǎng)站原型圖可以讓客戶提前看到網(wǎng)站的界面樣式，各版塊的功能和效果，從而獲得比較直觀的感受。原型圖不是最終設(shè)計(jì)稿，如需求有變化，或者邏輯交互不符合需求時(shí)，修改比較方便，有利于在開發(fā)前發(fā)現(xiàn)和解決一部分潛在問題。佳源集團(tuán)業(yè)務(wù)涉及零售、科技、物流、健康等領(lǐng)域，為消費(fèi)者提供家電、手機(jī)、計(jì)算機(jī)、母嬰、服裝等十三大品類商品。為了更好地發(fā)展，現(xiàn)決定開通佳源線上購物商城，急需搭建一個(gè)秉承客戶為先的綜合型購物網(wǎng)站，其桌面端主頁原型圖如圖所示。89佳源集團(tuán)電子商務(wù)網(wǎng)站桌面端主頁原型圖任務(wù)實(shí)施1.請繪制佳源集團(tuán)電子商務(wù)網(wǎng)站總體結(jié)構(gòu)圖，確定該網(wǎng)站的框架結(jié)構(gòu)。2.請參考佳源集團(tuán)電子商務(wù)網(wǎng)站桌面端主頁原型圖，繪制佳源集團(tuán)電子商務(wù)網(wǎng)站移動(dòng)端主頁原型圖。3.請編制佳源集團(tuán)電子商務(wù)網(wǎng)站策劃書。10學(xué)習(xí)目標(biāo)知識(shí)目標(biāo)1.熟悉桌面端頁面配色、布局特點(diǎn)。2.掌握桌面端頁面制作的流程、方法。技能目標(biāo)1.能夠應(yīng)用<nav>、<div>、<ul>、<li>等標(biāo)簽進(jìn)行網(wǎng)頁布局。2.能夠應(yīng)用CSS樣式美化網(wǎng)頁。11任務(wù)分析桌面端網(wǎng)站相較于移動(dòng)端網(wǎng)站，網(wǎng)頁承載能力更大，網(wǎng)頁內(nèi)容更豐富，可以實(shí)現(xiàn)更多的交互功能。本任務(wù)以佳源集團(tuán)為例，學(xué)習(xí)桌面端頁面制作。一、搭建項(xiàng)目環(huán)境1.創(chuàng)建文件夾及文件網(wǎng)站開發(fā)是團(tuán)隊(duì)合作項(xiàng)目，需要提前將網(wǎng)站開發(fā)的文件夾及其存放內(nèi)容告知團(tuán)隊(duì)人員，避免開發(fā)過程中出現(xiàn)找不到文件或資源混亂等問題。以佳源集團(tuán)電子商務(wù)網(wǎng)站為例，需要?jiǎng)?chuàng)建以下文件夾。1213網(wǎng)站文件夾文件夾制作完成后，需要?jiǎng)?chuàng)建以下文件，見表。index.html文件需要引入樣式文件base.css，它作為項(xiàng)目的初始化樣式文件是必不可少的，其代碼可參考程序清單。14網(wǎng)站文件15初始化樣式文件代碼樣例16初始化樣式文件代碼樣例17初始化樣式文件代碼樣例2.模塊化開發(fā)模塊化是指解決一個(gè)復(fù)雜問題時(shí)自頂向下逐層把系統(tǒng)劃分成若干模塊的過程，有多種屬性，分別反映其內(nèi)部特性。模塊化可以將一個(gè)復(fù)雜的項(xiàng)目按照不同功能進(jìn)行劃分，一個(gè)功能就是一個(gè)模塊，各個(gè)功能或模塊獨(dú)立存在且互不影響。模塊化開發(fā)具有重復(fù)使用、更換方便等優(yōu)點(diǎn)。18在網(wǎng)站開發(fā)過程中，網(wǎng)頁樣式或網(wǎng)頁結(jié)構(gòu)可能會(huì)在很多頁面中出現(xiàn)，尤其是電子商務(wù)網(wǎng)站的頁面頭部區(qū)域和底部區(qū)域，此時(shí)，可以把重復(fù)出現(xiàn)的結(jié)構(gòu)或樣式作為一個(gè)模塊，編寫一次代碼。最典型的就是應(yīng)用common.css公共樣式文件寫好一個(gè)樣式，其余頁面直接調(diào)用即可。因此，在佳源集團(tuán)電子商務(wù)網(wǎng)站的主頁、列表頁、詳情頁都要引入common.css公共樣式文件，屬于公共樣式的代碼，如清除浮動(dòng)、頁面文字顏色等都可以放入common.css文件中。193.顯示網(wǎng)站圖標(biāo)每個(gè)網(wǎng)站都有自己的圖標(biāo)（favicon）。圖標(biāo)是縮略的網(wǎng)站標(biāo)志，便于識(shí)別與書簽收藏。瀏覽器可以將favicon顯示于地址欄中，也可置于書簽列表的網(wǎng)站名前，還可以放在標(biāo)簽式瀏覽界面的頁標(biāo)題前。目前主流瀏覽器都支持favicon.ico圖標(biāo)。顯示網(wǎng)站圖標(biāo)的步驟如下。首先，把確定好的圖片借助于第三方網(wǎng)站轉(zhuǎn)換為ico圖標(biāo)；其次，將生成的ico圖標(biāo)放入根目錄；最后，在HTML頁面里的<head></head>元素之間引入代碼，其代碼如下。204.準(zhǔn)備標(biāo)簽網(wǎng)站中T是指<title></title>，D是指<meta>標(biāo)簽的description和keyword。title是網(wǎng)站標(biāo)題，具有不可替代性，是搜索引擎了解網(wǎng)站的入口，建議可以寫成“網(wǎng)站名-網(wǎng)站的介紹”格式，方便后期SEO。description主要描述網(wǎng)站的功能，其內(nèi)容主要是由SEO工作人員填寫。keyword是頁面關(guān)鍵詞，是搜索引擎的關(guān)注點(diǎn)之一，關(guān)鍵詞之間要用英文逗號分開。前端開發(fā)人員只需要準(zhǔn)備好以上標(biāo)簽，具體內(nèi)容由SEO工作人員準(zhǔn)備。21二、制作桌面端主頁網(wǎng)站主頁是一個(gè)網(wǎng)站的入口網(wǎng)頁，應(yīng)易于瀏覽，并引導(dǎo)用戶瀏覽網(wǎng)站其他部分的內(nèi)容。大多數(shù)作為主頁的文件名是index、default、main或portal加上擴(kuò)展名，比如index.html、index.php等。依據(jù)效果圖，佳源集團(tuán)電子商務(wù)網(wǎng)站主頁包括頭部區(qū)域、主區(qū)域和底部區(qū)域，其中又包括shortcut區(qū)域、header區(qū)域、nav區(qū)域、footer區(qū)域、main區(qū)域等，其中header區(qū)域、footer區(qū)域在每個(gè)網(wǎng)頁都會(huì)出現(xiàn)，根據(jù)模塊化開發(fā)思路，只需要在common.css寫一次樣式即可，這樣在制作列表頁時(shí)，直接把主頁的頭部區(qū)域和底部區(qū)域引入即可。2223桌面端主頁效果1.主頁頭部區(qū)域?qū)崿F(xiàn)主頁是網(wǎng)站的門面，對全網(wǎng)站具有導(dǎo)航作用，它主要是通過宣傳文案、圖片、視頻等讓用戶迅速了解產(chǎn)品信息。主頁頭部區(qū)域在每個(gè)頁面都會(huì)出現(xiàn)，因此，頭部區(qū)域的樣式均保存至common.css樣式文件中。制作主頁之前需要先確定好版心，版心是頁面中主要內(nèi)容所在的區(qū)域，即每頁版面正中的位置，又稱節(jié)口，不可以隨意更改，案例中版心（類名為w）的寬為1200px。因此，在common.css文件中寫如下代碼。24（1）shortcut區(qū)域?qū)崿F(xiàn)shortcut（快捷導(dǎo)航）區(qū)域是用戶訪問網(wǎng)站的快捷通道，它是一個(gè)高為31px、背景顏色為#f1f1f1的盒子（.shortcut）。首先設(shè)置區(qū)域版心樣式（.w），然后使用div、ul、li存放登錄、注冊、商城首頁、我的訂單、會(huì)員商城、商品分類、賣家中心、客戶服務(wù)、網(wǎng)站導(dǎo)航等文字信息，如圖所示。shortcut區(qū)域可參考程序清單。25shortcut區(qū)域效果26shortcut區(qū)域代碼樣例27shortcut區(qū)域代碼樣例（2）header區(qū)域?qū)崿F(xiàn)header區(qū)域是具有相對定位和版心樣式修飾的盒子（.header），由logo（.logo）、商品搜索（.search）、熱點(diǎn)詞（.hotwords）、購物車（.shopcar）4個(gè)具有絕對定位的div組成，如圖所示，logo定位于左側(cè)，購物車定位于右側(cè)，商品搜索和熱點(diǎn)詞采用絕對定位并設(shè)置top、left的值就可以完成此區(qū)域的布局。header區(qū)域代碼可參考程序清單。28header區(qū)域效果29header區(qū)域代碼樣例30header區(qū)域代碼樣例31header區(qū)域代碼樣例32header區(qū)域代碼樣例33header區(qū)域代碼樣例（3）nav區(qū)域?qū)崿F(xiàn)nav區(qū)域顯示商品全部分類，是網(wǎng)頁的導(dǎo)航模塊，通過nav區(qū)域可以進(jìn)入商品列表頁或商品詳情頁，如圖所示。制作導(dǎo)航條一般選擇ul和li添加導(dǎo)航信息，其中左部導(dǎo)航條的分類信息部分，商品分類的文字大小為16px且背景顏色為#b1191a，其他文字大小為14px且背景顏色為#c81623。鼠標(biāo)移過后文字顏色變?yōu)?c81623，背景顏色變?yōu)榘咨?。頂部?dǎo)航條文字大小為16px且顏色為#c81623。nav區(qū)域代碼可參考程序清單。3435nav區(qū)域效果36nav區(qū)域代碼樣例37nav區(qū)域代碼樣例38nav區(qū)域代碼樣例39nav區(qū)域代碼樣例40nav區(qū)域代碼樣例2.主頁主區(qū)域?qū)崿F(xiàn)主頁的主區(qū)域是index.html網(wǎng)頁專有的，因此，需要新建一個(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)。主頁main區(qū)域代碼可參考程序清單。4142main區(qū)域效果43main區(qū)域代碼樣例44main區(qū)域代碼樣例45main區(qū)域代碼樣例46main區(qū)域代碼樣例47main區(qū)域代碼樣例48main區(qū)域代碼樣例49main區(qū)域代碼樣例50main區(qū)域代碼樣例（2）recom區(qū)域?qū)崿F(xiàn)recom區(qū)域制作較為簡單，只需要注意盒子之間的浮動(dòng)即可。recom區(qū)域代碼可參考程序清單。51recom區(qū)域效果52recom區(qū)域代碼樣例53recom區(qū)域代碼樣例54recom區(qū)域代碼樣例（3）floor區(qū)域?qū)崿F(xiàn)?oor區(qū)域主要展示某類商品信息，也稱樓層區(qū)域，主要由兩個(gè)盒子組成，第一個(gè)盒子放家用電器、熱門、大家電、生活電器等文字信息，需要設(shè)置一個(gè)高度和下邊框，第二個(gè)盒子主要放產(chǎn)品信息。?oor區(qū)域代碼可參考程序清單。55?oor區(qū)域效果56?oor區(qū)域代碼樣例57?oor區(qū)域代碼樣例58?oor區(qū)域代碼樣例59?oor區(qū)域代碼樣例60?oor區(qū)域代碼樣例61?oor區(qū)域代碼樣例62?oor區(qū)域代碼樣例3.主頁底部區(qū)域?qū)崿F(xiàn)主頁底部（footer）區(qū)域在不同頁面所呈現(xiàn)的效果是一樣的，是網(wǎng)頁設(shè)計(jì)中必不可少的部分，一般包含公司信息、幫助中心、友情鏈接、版權(quán)所屬、工商局備案等各種信息。此區(qū)域也屬于公共區(qū)域，所有的樣式應(yīng)該寫在common.css文件中，主要就是添加文字信息，一般多使用dl、dt、dd制作。底部區(qū)域代碼可參考程序清單。6364底部區(qū)域效果65底部區(qū)域代碼樣例66底部區(qū)域代碼樣例67底部區(qū)域代碼樣例68底部區(qū)域代碼樣例69底部區(qū)域代碼樣例70底部區(qū)域代碼樣例71底部區(qū)域代碼樣例三、桌面端列表頁制作列表頁就是把若干內(nèi)容以某個(gè)維度集合起來的聚合頁?？蛻艨梢酝ㄟ^電商平臺(tái)的列表頁快速找到想要購買的商品。佳源集團(tuán)電子商務(wù)網(wǎng)站的主頁已經(jīng)制作完成，所有商品都可以通過商品分類導(dǎo)航條找到相關(guān)信息，直接跳轉(zhuǎn)到對應(yīng)的列表頁，方便用戶查找商品。下面將以制作女裝列表頁為例進(jìn)行講解。72列表頁是新的頁面，需要新建頁面文件list.html。依據(jù)效果圖，可以發(fā)現(xiàn)列表頁的頭部、底部和主頁的頭部區(qū)域、底部區(qū)域基本一致，因此可以將主頁的頭部區(qū)域、底部區(qū)域結(jié)構(gòu)代碼復(fù)制到list.html中，并且在list.html中引入common.css樣式文件。此外，還需要新建一個(gè)列表頁專門的樣式文件list.css。7374列表頁效果1.列表頁頭部區(qū)域和底部區(qū)域?qū)崿F(xiàn)列表頁也需要在<head></head>標(biāo)簽寫T、D、K等網(wǎng)頁信息。首先，需要將主頁的T、D、K復(fù)制到列表頁的<head></head>標(biāo)簽內(nèi)，修改文字部分。其次，復(fù)制主頁的頭部區(qū)域和底部區(qū)域結(jié)構(gòu)代碼，修改頭部區(qū)域<nav></nav>模塊的文字信息。最后，引用base.css、common.css和list.css樣式。列表頁頭部區(qū)域nav模塊代碼可參考程序清單。7576列表頁頭部區(qū)域nav模塊代碼樣例2.列表頁主區(qū)域?qū)崿F(xiàn)列表頁主區(qū)域展示各類商品信息。主體部分放在sk_container盒子中，分為上下兩部分，上半部分放在sk_hd盒子中，是商品列表信息的頭部；下半部分放在sk_bd盒子中，展示各類商品詳細(xì)信息。列表頁主區(qū)域nav模塊代碼可參考程序清單。77列表頁主區(qū)域nav模塊代碼樣例78列表頁頭部區(qū)域nav模塊代碼樣例79列表頁頭部區(qū)域nav模塊代碼樣例80列表頁頭部區(qū)域nav模塊代碼樣例81列表頁頭部區(qū)域nav模塊代碼樣例學(xué)習(xí)目標(biāo)知識(shí)目標(biāo)1.熟悉移動(dòng)端頁面配色、布局特點(diǎn)。2.掌握移動(dòng)端頁面制作的流程、方法。技能目標(biāo)1.能夠根據(jù)原型設(shè)計(jì)圖實(shí)現(xiàn)移動(dòng)端網(wǎng)頁布局。2.能夠根據(jù)原型設(shè)計(jì)圖制作移動(dòng)端網(wǎng)頁樣式。82任務(wù)分析一、搭建項(xiàng)目環(huán)境開發(fā)移動(dòng)端網(wǎng)站可以有兩個(gè)選擇。一是單獨(dú)制作移動(dòng)端頁面，如京東商城手機(jī)版、淘寶觸屏版、蘇寧易購手機(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īng)不同終端，可以用媒體查詢、bootstrap等技術(shù)實(shí)現(xiàn)。83本任務(wù)按第一種方式為商城搭建專門的移動(dòng)端站點(diǎn)。在建設(shè)移動(dòng)端網(wǎng)站之前，需要考慮技術(shù)選型。移動(dòng)端網(wǎng)站開發(fā)中比較常見的布局方式為流式布局，就是百分比布局，也稱非固定像素布局，它是通過將盒子的寬度設(shè)置成百分比，從而根據(jù)屏幕的寬度來進(jìn)行伸縮，不受固定像素的限制，內(nèi)容向兩側(cè)填充。841.創(chuàng)建文件夾及文件創(chuàng)建移動(dòng)端網(wǎng)站開發(fā)的文件夾和文件與創(chuàng)建桌面端網(wǎng)站開發(fā)的文件夾和文件較為相似。常用的網(wǎng)站文件夾和文件見表。85網(wǎng)站文件夾和文件2.設(shè)置視口標(biāo)簽以及引入初始化樣式在桌面端網(wǎng)頁開發(fā)中，不使用<meta>標(biāo)簽設(shè)置視口，瀏覽器會(huì)按照默認(rèn)的布局視口寬度顯示網(wǎng)頁。如果希望網(wǎng)頁在瀏覽器中以理想視口的形式呈現(xiàn)，就需要使用<meta>標(biāo)簽設(shè)置視口。視口標(biāo)簽代碼如下。開發(fā)移動(dòng)端網(wǎng)頁，首先要理解<meta>標(biāo)簽的用法。移動(dòng)端網(wǎng)頁開發(fā)過程中，<meta>標(biāo)簽可以規(guī)定可視區(qū)域的寬度和高度，也可以定義是否對頁面進(jìn)行縮放以及縮放級別。86<meta>標(biāo)簽中“width=device-width”是指讓當(dāng)前viewport的寬度等于設(shè)備的寬度，如果不這樣設(shè)定，網(wǎng)頁中可能會(huì)出現(xiàn)橫向滾動(dòng)條；“user-scalable=0”表示不允許用戶手動(dòng)縮放，是否允許用戶縮放依據(jù)網(wǎng)站需求而定；“initial-scale=1.0”表示頁面首次被顯示是可視區(qū)域的縮放級別，取值1.0表示頁面按實(shí)際尺寸顯示，無任何縮放；“maximum-scale=1.0”表示用戶可將頁面放大，當(dāng)maximum-scale為1.0時(shí)，禁止用戶放大到實(shí)際尺寸之上；“minimum-scale=1.0”表示用戶可將頁面縮小，當(dāng)minimum-scale為1.0時(shí)，禁止用戶縮小到實(shí)際尺寸之下。873.引入初始化樣式移動(dòng)端CSS初始化可以使用normalize.css，這是一個(gè)可以定制的CSS文件，可以讓不同的瀏覽器在渲染網(wǎng)頁元素的時(shí)候形式更統(tǒng)一，在HTML元素樣式上提供了跨瀏覽器的高度一致性，它也具有模塊化功能，擁有詳細(xì)的文檔，其代碼可參考程序清單。88引入初始化樣式文件代碼樣例4.body的設(shè)置流式布局是一種等比例縮放布局方式，在CSS中使用百分比來設(shè)置寬度，也稱百分比自適應(yīng)寬度布局。流式布局實(shí)現(xiàn)方法是將CSS固定像素寬度換算為百分比寬度。因此，在開發(fā)過程中，需要考慮文件的主體即body元素的設(shè)置，其代碼可參考程序清單。8990body的設(shè)置代碼樣例二、制作移動(dòng)端主頁在制作移動(dòng)端主頁之前，需要依據(jù)效果圖分析頁面布局。本案例移動(dòng)端主頁包括頭部區(qū)域和主區(qū)域。1.主頁頭部區(qū)域?qū)崿F(xiàn)主頁頭部區(qū)域主要由提示用戶打開App模塊和搜索模塊組成，因?yàn)椴捎昧魇讲季?，頁面總寬度?00%，所以需要規(guī)劃每個(gè)盒子的寬度，并且以百分比的形式賦值。91移動(dòng)端主頁效果（1）提示用戶打開App模塊提示用戶打開App模塊，高度為45px，利用<ul></ul>和<li></li>將盒子劃分為4個(gè)區(qū)域，寬度從左至右分別為8%、10%、57%、25%，在相應(yīng)的區(qū)域填充內(nèi)容并設(shè)置好相關(guān)樣式，如圖所示。提示用戶打開App模塊的代碼可參考程序清單。92提示用戶打開App模塊效果93提示用戶打開App模塊的代碼樣例94提示用戶打開App模塊的代碼樣例（2）搜索模塊搜索模塊分為3個(gè)區(qū)域，左右兩個(gè)區(qū)域作為固定不變的模塊設(shè)置定位，中間的搜索框處理成標(biāo)準(zhǔn)流并加margin值，這樣能夠?qū)崿F(xiàn)搜索框自適應(yīng)屏幕寬度的效果，如圖所示。搜索模塊代碼可參考程序清單。95搜索模塊效果96搜索模塊代碼樣例97搜索模塊代碼樣例98搜索模塊代碼樣例99搜索模塊代碼樣例2.主頁主區(qū)域?qū)崿F(xiàn)主頁主區(qū)域主要包括輪播圖模塊、活動(dòng)模塊、導(dǎo)航欄模塊和新聞快報(bào)模塊等，依然采用流式布局，頁面總寬度為100%，所以需要規(guī)劃每個(gè)盒子的寬度，并且以百分比的形式賦值。（1）輪播圖模塊輪播圖的制作應(yīng)用網(wǎng)頁特效的制作方法，通過計(jì)算每張圖片的步長控制圖片的移動(dòng)，如圖所示。輪播圖模塊代碼可參考程序清單。100101輪播圖模塊效果輪播圖模塊代碼樣例102輪播圖模塊代碼樣例103輪播圖模塊代碼樣例104輪播圖模塊代碼樣例105輪播圖模塊代碼樣例106輪播圖模塊代碼樣例（2）活動(dòng)模塊活動(dòng)模塊可以實(shí)現(xiàn)點(diǎn)擊圖片不同區(qū)域跳轉(zhuǎn)至不同頁面的功能。以品牌日活動(dòng)為例，實(shí)現(xiàn)方式是在品牌日區(qū)域放置3個(gè)盒子，每個(gè)盒子寬度為33.33%，如圖所示。品牌日模塊代碼可參考程序清單。107品牌日模塊效果108品牌日模塊代碼樣例109品牌日模塊代碼樣例（3）導(dǎo)航欄模塊導(dǎo)航欄方便用戶分類查找信息，盒子的高度不用設(shè)置，由2行組成，每行5個(gè)小盒子，每個(gè)小盒子的寬度為20%，每個(gè)盒子由標(biāo)簽<a></a>組成，如圖所示。導(dǎo)航欄模塊代碼可參考程序清單。110導(dǎo)航欄模塊效果111導(dǎo)航欄模塊代碼樣例112導(dǎo)航欄模塊代碼樣例113導(dǎo)航欄模塊代碼樣例114導(dǎo)航欄模塊代碼樣例（4）新聞快報(bào)模塊新聞快報(bào)區(qū)域由3個(gè)盒子組成，第一個(gè)盒子寬度占50%，第二個(gè)盒子和第三個(gè)盒子的寬度分別占25%，如圖所示。新聞快報(bào)模塊代碼可參考程序清單。115新聞快報(bào)模塊效果116新聞快報(bào)模塊代碼樣例117新聞快報(bào)模塊代碼樣例三、移動(dòng)端列表頁制作移動(dòng)端主頁制作完成后，所有商品都可以通過商品分類導(dǎo)航條找到相關(guān)信息，直接跳轉(zhuǎn)到對應(yīng)的列表頁，方便用戶查找商品。下面將以制作女裝列表頁為例進(jìn)行講解。118列表頁效果1.列表頁頭部區(qū)域?qū)崿F(xiàn)列表頁是新的頁面，需要新建頁面文件list.html。依據(jù)效果圖，可以發(fā)現(xiàn)列表頁的頭部區(qū)域和主頁的頭部區(qū)域基本一致，因此可以將主頁的頭部區(qū)域結(jié)構(gòu)代碼復(fù)制到list.html中，并且在list.html中引入normalize.css樣式文件。此外，還需要新建一個(gè)列表頁專門的樣式文件list.css。列表頁頭部區(qū)域nav模塊代碼可參考程序清單。119列表頁頭部區(qū)域效果120列表頁頭部區(qū)域nav模塊代碼樣例121列表頁頭部區(qū)域nav模塊代碼樣例122列表頁頭部區(qū)域nav模塊代碼樣例123列表頁頭部區(qū)域nav模塊代碼樣例124列表頁頭部區(qū)域nav模塊代碼樣例125列表頁頭部區(qū)域nav模塊代碼樣例126列表頁頭部區(qū)域nav模塊代碼樣例127列表頁頭部區(qū)域nav模塊代碼樣例2.列表頁主區(qū)域?qū)崿F(xiàn)列表頁主區(qū)域展示各類商品信息，主體部分放在main-content盒子中，分為上、中、下三部分，分別為品牌活動(dòng)促銷（brand）、導(dǎo)航（nav）和產(chǎn)品信息（info），其中nav模塊和主頁的nav模塊一致，直接復(fù)制即可。列表頁主區(qū)域代碼可參考程序清單。128列表頁效果129列表頁主區(qū)域代碼樣例130列表頁主區(qū)域代碼樣例131列表頁主區(qū)域代碼樣例132列表頁主區(qū)域代碼樣例133列表頁主區(qū)域代碼樣例134列表頁主區(qū)域代碼樣例任務(wù)引入知識(shí)目標(biāo)1.理解判斷站點(diǎn)訪問者終端類型的方法。2.掌握站點(diǎn)測試與發(fā)布的方法。技能目標(biāo)能夠熟練使用軟件進(jìn)行站點(diǎn)的測試與發(fā)布。135任務(wù)分析在電子商務(wù)網(wǎng)站設(shè)計(jì)開發(fā)完成后，就要進(jìn)入網(wǎng)站的測試與發(fā)布環(huán)節(jié)。通過測試，找出系統(tǒng)中潛在的錯(cuò)誤和缺陷，驗(yàn)證系統(tǒng)的功能和性能是否滿足系統(tǒng)需求，檢驗(yàn)建設(shè)的網(wǎng)站是否實(shí)現(xiàn)了規(guī)劃的預(yù)期目標(biāo)、是否能夠滿足業(yè)務(wù)流程的要求、界面是否友好、操作是否簡單方便、輸入和輸出的數(shù)據(jù)信息是否準(zhǔn)確流暢等。網(wǎng)站測試完成后，就可以發(fā)布上線了。136一、判斷訪問者的終端類型在移動(dòng)互聯(lián)網(wǎng)時(shí)代，越來越多的企業(yè)不僅僅局限于桌面端網(wǎng)站的開發(fā)，也開始搭建移動(dòng)端網(wǎng)站，桌面端設(shè)備和移動(dòng)端設(shè)備的屏幕尺寸差異很大，展示的內(nèi)容有所差別。當(dāng)開發(fā)了滿足兩種設(shè)備的網(wǎng)站后，就會(huì)遇到一個(gè)問題，即服務(wù)器如何判斷當(dāng)前訪問者是用移動(dòng)端還是用桌面端打開網(wǎng)頁的。解決這個(gè)問題的方式有很多種，較為簡單的就是通過Navigator對象獲取終端類型信息。1371.Navigator對象Navigator對象用于獲得與瀏覽器相關(guān)的信息。Navigator對象的常用屬性有appName、appCodeName、appVersion、cookieEnabled、platform、userAgent等，其中userAgent屬性是一個(gè)只讀的字符串，給出瀏覽器在HTTP請求中使用的用戶代理首部的值。1382.判斷終端類型可以通過JavaScript檢查navigator.useragent中是否包含某些值來判斷終端類型。終端判斷代碼可參考程序清單。139終端判斷代碼樣例二、站點(diǎn)的測試與發(fā)布網(wǎng)站開發(fā)完成并不代表網(wǎng)站建設(shè)工作結(jié)束，后期還需要對網(wǎng)站的網(wǎng)頁、程序數(shù)據(jù)、服務(wù)器等進(jìn)行測試優(yōu)化，向相關(guān)部門申請域名和空間，上傳網(wǎng)站，網(wǎng)站發(fā)布后還要定時(shí)維護(hù)、更新網(wǎng)站。1401.站點(diǎn)的測試網(wǎng)站開發(fā)完成以后，需要檢測網(wǎng)頁的內(nèi)容、網(wǎng)頁鏈接是否正確，以及是否兼容主流瀏覽器等。此外，對站點(diǎn)中使用到的動(dòng)態(tài)網(wǎng)頁程序需要在本機(jī)上建立服務(wù)器環(huán)境，并測試程序是否能被正確執(zhí)行和使用，特別需要注意站點(diǎn)的數(shù)據(jù)庫安全性問題。對于個(gè)人的站點(diǎn)服務(wù)器，需要測試其穩(wěn)定性和安全性，以保證訪問者能夠順利地訪問站點(diǎn)內(nèi)容并保證站點(diǎn)的安全。141站點(diǎn)的檢查測試可以使用Dreamweaver軟件“站點(diǎn)”菜單中的“檢查站點(diǎn)范圍的鏈接”“改變站點(diǎn)范圍的鏈接”“報(bào)告”等命令執(zhí)行，如圖所示。142站點(diǎn)的檢查測試2.站點(diǎn)的發(fā)布網(wǎng)站開發(fā)檢測優(yōu)化完成后，使用Dreamweaver等軟件進(jìn)行網(wǎng)站的發(fā)布和管理。發(fā)布之前，需要先申請域名。域名申請成功之后，打開Dreamweaver工具，在“站點(diǎn)”菜單或文件管理面板中找到“管理站點(diǎn)”，如圖所示，選擇

進(jìn)入編輯頁面，選擇服務(wù)器連接方法，輸入服務(wù)器地址等信息，完成遠(yuǎn)程站點(diǎn)定義，如圖所示。最后，在文件管理面板中點(diǎn)擊上傳圖標(biāo)完成上傳。如果網(wǎng)站需要后期維護(hù)，可以在站點(diǎn)上單擊鼠標(biāo)右鍵，在彈出的菜單中選擇同步，如圖所示。143144管理站點(diǎn)145服務(wù)器設(shè)置146上傳同步謝謝Thanks147項(xiàng)目六響應(yīng)式電子商務(wù)網(wǎng)站開發(fā)任務(wù)一響應(yīng)式網(wǎng)站基礎(chǔ)知識(shí)任務(wù)二使用Bootstrap制作簡單的響應(yīng)式網(wǎng)頁148項(xiàng)目引入近幾年，隨著智能手機(jī)的普及，使用手機(jī)、平板電腦等設(shè)備上網(wǎng)的用戶越來越多。根據(jù)中國互聯(lián)網(wǎng)絡(luò)信息中心（CNNIC）發(fā)布的數(shù)據(jù)，截至2022年6月，我國網(wǎng)民規(guī)模為10.51億，其中使用手機(jī)等移動(dòng)設(shè)備上網(wǎng)的比例達(dá)99.6%。為了應(yīng)對移動(dòng)互聯(lián)網(wǎng)的快速發(fā)展，起初許多企業(yè)特地為移動(dòng)設(shè)備制作移動(dòng)端網(wǎng)站，但這種方式會(huì)造成企業(yè)在網(wǎng)站信息維護(hù)上的麻煩，容易造成移動(dòng)端和桌面端網(wǎng)站內(nèi)容不一致的情況，花費(fèi)較高人力資源成本卻效果欠佳。149為了解決這個(gè)問題，追求更好的用戶體驗(yàn)，“響應(yīng)式網(wǎng)頁設(shè)計(jì)”理念應(yīng)運(yùn)而生，即讓一個(gè)網(wǎng)站同時(shí)適配多種設(shè)備和多個(gè)屏幕，網(wǎng)站會(huì)自動(dòng)根據(jù)不同訪問設(shè)備（臺(tái)式計(jì)算機(jī)、筆記本電腦、平板電腦、智能手機(jī)）的屏幕尺寸進(jìn)行調(diào)整，以便用最佳瀏覽方式來顯示網(wǎng)頁內(nèi)容。響應(yīng)式電子商務(wù)網(wǎng)站可以讓網(wǎng)頁的布局和功能隨著用戶的使用環(huán)境（屏幕大小）而自動(dòng)變化，可以根據(jù)不同的終端呈現(xiàn)合理的頁面，實(shí)現(xiàn)一次開發(fā)、多處適用，因而得到了廣泛的應(yīng)用，并逐漸成為網(wǎng)頁設(shè)計(jì)的主流，有越來越多的人采用此方法設(shè)計(jì)網(wǎng)站。150學(xué)習(xí)目標(biāo)知識(shí)目標(biāo)1.了解響應(yīng)式網(wǎng)站、視口、媒體查詢、圖像適配的基本概念。2.熟悉響應(yīng)式布局的基本方法。技能目標(biāo)1.會(huì)使用媒體查詢語句確定訪問設(shè)備的屏幕尺寸情況。2.會(huì)使用響應(yīng)式布局進(jìn)行網(wǎng)頁構(gòu)建。151任務(wù)分析響應(yīng)式網(wǎng)站的出現(xiàn)打破了傳統(tǒng)的網(wǎng)頁布局思路，實(shí)現(xiàn)了一個(gè)網(wǎng)站在臺(tái)式計(jì)算機(jī)、平板電腦和手機(jī)等各種終端設(shè)備上瀏覽效果的流暢性，不僅能給用戶帶來更好的體驗(yàn)，同時(shí)也提高了網(wǎng)站的點(diǎn)擊率和轉(zhuǎn)化率。響應(yīng)式網(wǎng)站糅合了流式布局和彈性布局理念，通過媒體查詢、自適應(yīng)圖片等技術(shù)來實(shí)現(xiàn)自動(dòng)調(diào)整頁面元素布局，實(shí)現(xiàn)網(wǎng)頁內(nèi)容隨著訪問它的視口及設(shè)備的不同而呈現(xiàn)不同的布局樣式。本任務(wù)重點(diǎn)學(xué)習(xí)響應(yīng)式電子商務(wù)網(wǎng)站的開發(fā)技術(shù)。152相關(guān)知識(shí)一、響應(yīng)式網(wǎng)站簡介響應(yīng)式網(wǎng)站是指可以自動(dòng)識(shí)別屏幕寬度，并作出相應(yīng)調(diào)整的網(wǎng)頁站點(diǎn)。采用響應(yīng)式網(wǎng)頁設(shè)計(jì)，頁面有能力去自動(dòng)響應(yīng)用戶的設(shè)備環(huán)境，這樣一個(gè)網(wǎng)站能夠兼容多個(gè)終端，而不需要重新設(shè)計(jì)新設(shè)備的版本尺寸。1531.響應(yīng)式網(wǎng)站特點(diǎn)響應(yīng)式網(wǎng)站能夠提升用戶體驗(yàn)，也能讓桌面端和移動(dòng)端SEO和鏈接保持一致，進(jìn)而避免內(nèi)容重復(fù)或出錯(cuò)。響應(yīng)式網(wǎng)頁設(shè)計(jì)比較明顯的缺陷是，開發(fā)時(shí)間長、成本高，大大增加了架構(gòu)設(shè)計(jì)的復(fù)雜度，尤其是要構(gòu)建包含額外編程的復(fù)雜的自適應(yīng)網(wǎng)站，所需時(shí)間會(huì)更長。因此，對于已經(jīng)比較成熟的網(wǎng)站來說，如果要實(shí)現(xiàn)全站的響應(yīng)式，有可能需要全部推倒重來，所以更適合在移動(dòng)端實(shí)現(xiàn)響應(yīng)式布局設(shè)計(jì)。1542.響應(yīng)式網(wǎng)站設(shè)計(jì)要點(diǎn)（1）阻止移動(dòng)瀏覽器自動(dòng)調(diào)整頁面大小基于Webkit核心的IOS和Android瀏覽器以及其他眾多的瀏覽器都支持viewportmeta元素覆蓋默認(rèn)的畫布縮放設(shè)置，所以只需要在HTML的<head>標(biāo)簽中插入一個(gè)<meta>標(biāo)簽，設(shè)置具體的寬度（如像素值）或者縮放比例（設(shè)備實(shí)際尺寸的兩倍）即可。155（2）將網(wǎng)頁修改為百分比布局頁面瀏覽過程中超出了網(wǎng)頁所規(guī)定最大寬度或最小寬度值時(shí)，容易出現(xiàn)水平滾動(dòng)條，不方便用戶瀏覽，為防止這種情況發(fā)生，需要通過百分比布局進(jìn)行調(diào)整，使得頁面元素能夠根據(jù)窗口大小靈活修正樣式，具體而言，就是CSS不會(huì)將元素寬度定義為width：npx（n表示一個(gè)整數(shù)或小數(shù)），而是會(huì)以百分比形式定義寬度，如width：n%（n表示一個(gè)整數(shù)或小數(shù)），或者直接定義為自動(dòng)，如width：auto。156（3）網(wǎng)頁元素單位用em替換px通常網(wǎng)頁元素單位使用px，但響應(yīng)式網(wǎng)頁需要把單位px改為em。px、em都是計(jì)量單位，都能表示尺寸，但是有所不同，而且各有優(yōu)缺點(diǎn)。px是像素，它的大小是相對于顯示器屏幕分辨率而言的，利用px設(shè)置字體大小及元素寬高等比較穩(wěn)定和精確，但不能適應(yīng)瀏覽器縮放時(shí)產(chǎn)生的變化，因此一般不用于響應(yīng)式網(wǎng)站。em表示相對尺寸，它會(huì)繼承父級元素的字體大小，em可以較好地適應(yīng)設(shè)備屏幕尺寸的變化，但是在進(jìn)行元素設(shè)置時(shí)都需要知道父元素文本的font-size及當(dāng)前對象內(nèi)文本的font-size，如有遺漏可能會(huì)導(dǎo)致錯(cuò)誤。157（4）實(shí)現(xiàn)流動(dòng)布局流動(dòng)布局是指各個(gè)區(qū)塊的位置都要設(shè)置浮動(dòng)，其優(yōu)勢在于如果頁面寬度小，無法使網(wǎng)頁元素顯示在同一行，那么，后面的元素不會(huì)發(fā)生溢出，也不會(huì)出現(xiàn)水平滾動(dòng)條，它會(huì)自動(dòng)換行至下方顯示，大大提升了用戶的閱讀體驗(yàn)。158（5）MediaQuery技術(shù)的使用MediaQuery直譯過來就是媒體查詢，CSS3中的MediaQuery增加了更多的功能，可以添加不同媒體類型的表達(dá)式，用來檢查媒體是否符合某些條件，如果媒體符合相應(yīng)的條件，那么就會(huì)調(diào)用對應(yīng)的樣式表。因此，只需要設(shè)置不同的樣式表，通過判斷調(diào)用對應(yīng)的樣式就可以實(shí)現(xiàn)不同分辨率設(shè)備之間顯示相同網(wǎng)頁內(nèi)容。159二、屏幕可視區(qū)域1.視口的基本概念視口（Viewport）是移動(dòng)Web開發(fā)中非常重要的概念，指瀏覽器顯示頁面內(nèi)容的屏幕區(qū)域。在移動(dòng)端瀏覽器中，有布局視口、視覺視口和理想視口三類。（1）布局視口布局視口是指瀏覽器繪制網(wǎng)頁的視口，一般移動(dòng)端瀏覽器都默認(rèn)設(shè)置了布局視口的寬度，如圖所示。當(dāng)移動(dòng)端瀏覽器展示桌面端網(wǎng)頁內(nèi)容時(shí)，由于移動(dòng)端設(shè)備屏幕比較小，網(wǎng)頁在移動(dòng)端瀏覽器中會(huì)出現(xiàn)左右滾動(dòng)條，用戶需要左右滑動(dòng)滾動(dòng)條才能查看完整的一行內(nèi)容。160161布局視口（2）視覺視口視覺視口是指用戶正在看到的網(wǎng)站區(qū)域，這個(gè)區(qū)域的寬度等同于移動(dòng)設(shè)備的瀏覽器窗口的寬度。在手機(jī)中縮放網(wǎng)頁的時(shí)候，操作的是視覺視口，而布局視口仍然保持原來的寬度，如圖所示。162視覺視口（3）理想視口理想視口是指對設(shè)備來講最理想的視口，如圖所示。采用理想視口，可以使網(wǎng)頁在移動(dòng)端瀏覽器中獲得最理想的瀏覽和閱讀寬度，此時(shí)布局視口的大小和屏幕寬度一致，不需要左右滑動(dòng)頁面。163理想視口因?yàn)橐苿?dòng)設(shè)備的屏幕都不是很寬，所以那些為桌面瀏覽器設(shè)計(jì)的網(wǎng)站放到移動(dòng)設(shè)備上顯示時(shí)，必然會(huì)因?yàn)橐苿?dòng)設(shè)備的視覺視口太窄而擠作一團(tuán)，甚至布局被打亂。因此，當(dāng)設(shè)計(jì)移動(dòng)端網(wǎng)站時(shí)，必須有一個(gè)能完美適配移動(dòng)設(shè)備的視口。首先，不需要用戶縮放和使用橫向滾動(dòng)條就能正常查看網(wǎng)站的所有內(nèi)容。其次，顯示的文字及圖片的大小合適，如一段14px的文字，不會(huì)因?yàn)樵谝粋€(gè)高密度像素的屏幕里顯示太小而無法看清，在各種分辨率下，顯示大小都是差不多的。理想視口的意義就在于，無論在何種分辨率的屏幕下，那些針對理想視口而設(shè)計(jì)的網(wǎng)站，不需要用戶手動(dòng)縮放，也不需要出現(xiàn)橫向滾動(dòng)條，都可以完美地呈現(xiàn)給用戶。1642.視口的設(shè)置方法如果希望開發(fā)的網(wǎng)頁在瀏覽器中以理想視口的形式呈現(xiàn)，就需要利用<meta>標(biāo)簽設(shè)置視口。在HTML5中，將<meta>標(biāo)簽中的name屬性設(shè)為viewport，即可設(shè)置視口，其語法格式如下。該<meta>標(biāo)簽的作用是讓當(dāng)前視口的寬度等于設(shè)備的寬度，同時(shí)不允許用戶手動(dòng)縮放。是否允許用戶縮放，不同的網(wǎng)站可能有不同的要求，但讓視口的寬度等于設(shè)備的寬度，這是統(tǒng)一的規(guī)范。如果不這樣設(shè)定，很有可能出現(xiàn)橫向滾動(dòng)條，影響用戶的瀏覽效果。165viewport配置的相關(guān)參數(shù)及其含義見表。166viewport配置的相關(guān)參數(shù)及其含義三、媒體查詢1.媒體查詢的語法規(guī)則媒體查詢是實(shí)現(xiàn)響應(yīng)式網(wǎng)站的核心技術(shù)之一，可以用來根據(jù)窗口寬度、屏幕比例和設(shè)備方向等差異來改變頁面的顯示方式。使用媒體查詢能夠在不改變頁面內(nèi)容的情況下，為特定的輸出設(shè)備定制顯示效果，也就是讓不同終端設(shè)備采用符合該設(shè)備尺寸的CSS內(nèi)容。167常用的媒體查詢有兩種方法。一種是內(nèi)聯(lián)式，即在CSS文件中用@media語句來判斷用戶瀏覽器屏幕特征，選擇執(zhí)行相應(yīng)的CSS語句，其代碼如下。另一種是外聯(lián)式，即使用<link>標(biāo)簽中media屬性來判斷用戶瀏覽器屏幕特征，選擇載入相應(yīng)的CSS文件，其代碼如下。168mediatype是指設(shè)備類型，其主要取值見表。169mediatype主要取值mediafeature是指媒體特征，其主要取值見表。170mediafeature主要取值max-width是最常用的媒體特性之一，是指媒體類型小于或等于指定寬度時(shí)，樣式生效。min-width與max-width相反，是指媒體類型大于或等于指定寬度時(shí)，樣式生效。媒體查詢可以使用關(guān)鍵詞“and”將多個(gè)媒體特性結(jié)合在一起。也就是說，一個(gè)媒體查詢中可以包含0個(gè)或多個(gè)表達(dá)式，表達(dá)式又可以包含0個(gè)或多個(gè)關(guān)鍵字以及一種媒體類型。1712.媒體查詢常用的斷點(diǎn)在實(shí)際媒體查詢中，常使用斷點(diǎn)來區(qū)分手機(jī)、平板電腦、臺(tái)式計(jì)算機(jī)等主要瀏覽設(shè)備。但由于技術(shù)發(fā)展太快，各種不同屏幕尺寸的設(shè)備推陳出新，比如一些手機(jī)的屏幕尺寸已經(jīng)接近平板電腦的屏幕尺寸，所以斷點(diǎn)選擇可能會(huì)有所不同，沒有確切標(biāo)準(zhǔn)。以下是一些常用的斷點(diǎn)。320px～480px：移動(dòng)設(shè)備481px～768px：iPad，平板電腦769px～1024px：小屏幕，筆記本電腦1025px～1200px：臺(tái)式計(jì)算機(jī)，大屏幕1201px及以上：超大屏幕電視172如程序清單所示的媒體查詢代碼，實(shí)現(xiàn)當(dāng)瀏覽器畫面寬度在1024px以上，采用<CSS設(shè)置1>，當(dāng)瀏覽器畫面寬度在768px以上，采用<CSS設(shè)置2>，當(dāng)瀏覽器畫面寬度在480px以上，采用<CSS設(shè)置3>。173利用斷點(diǎn)進(jìn)行媒體查詢代碼樣例四、圖像適配1.通過srcset和sizes切換分辨率圖像是網(wǎng)頁中非常重要的元素。如果希望網(wǎng)頁中的圖像在所有設(shè)備上都能達(dá)到較好的顯示效果，那么在不同設(shè)備上所顯示的圖像文件應(yīng)有所區(qū)分。比如，高像素密度的屏幕，應(yīng)盡量以高像素的圖像顯示；反之，則顯示的圖像像素可低一點(diǎn)。實(shí)現(xiàn)響應(yīng)式圖像適配的方法有多種，最簡單的實(shí)現(xiàn)方式就是使用HTML5中<img>標(biāo)簽的srcset和sizes屬性。174（1）srcset屬性用于根據(jù)屏幕像素密度或屏幕寬度來匹配不同的圖像文件，其用法如下。上述語句表示在屏幕像素密度為3倍、2倍和1倍的時(shí)候，在這個(gè)圖像的位置分別下載對應(yīng)的圖像文件，可在iPhone5和iPhone6Plus設(shè)備中得到不同測試效果，如圖所示。175176響應(yīng)式圖像測試效果除了可以根據(jù)屏幕像素密度來進(jìn)行圖像適配，還可以根據(jù)屏幕寬度來實(shí)現(xiàn)，其用法如下。上述語句表示在屏幕寬度分別達(dá)到1280wpx和640wpx的時(shí)候，在這個(gè)圖像的位置分別下載對應(yīng)的圖像文件。177（2）sizes屬性可以使用類似媒體查詢語句來設(shè)置圖像大小，其作用就在于告訴瀏覽器根據(jù)屏幕尺寸和像素密度的計(jì)算值從srcset中選擇最佳的圖片源。首先瀏覽器會(huì)讀取sizes，然后根據(jù)媒體情況來選擇，用匹配到的值乘以屏幕像素密度，最終值再與srcset中的寬度描述匹配來選擇圖片，其用法如下。上述語句表示當(dāng)視區(qū)寬度不大于360像素時(shí)，圖片的寬度限制為340像素，其他情況下使用128像素。1782.背景圖片的縮放在電子商務(wù)網(wǎng)站開發(fā)中，除了使用插入的圖片，還經(jīng)常會(huì)用到背景圖片，在CSS3中提供了background-size屬性來定義背景圖片的尺寸，從而達(dá)到背景圖片的縮放效果，其基本語法格式如下。179background-size設(shè)置的寬度和高度可以是像素或百分比，例如背景圖片尺寸為500px×500px，設(shè)置<div>標(biāo)簽的樣式代碼，寬、高均為500px的情況下，圖片正好填充整個(gè)div區(qū)域，如圖左邊效果圖所示。通過添加background-size屬性將背景圖片的寬度、高度比例設(shè)置為60%，瀏覽器將會(huì)自動(dòng)等比例縮放背景圖片，如圖右邊效果圖所示。該代碼可參考程序清單。180181background-size屬性顯示效果182background-size屬性顯示代碼樣例183background-size屬性顯示代碼樣例除此之外，還可以用background-size的其他屬性值實(shí)現(xiàn)不同的縮放效果。184background-size屬性值學(xué)習(xí)目標(biāo)知識(shí)目標(biāo)1.了解Bootstrap的功能特性。2.理解Bootstrap中柵格系統(tǒng)的原理。3.掌握Bootstrap中導(dǎo)航條、輪播插件等組件的使用。

技能目標(biāo)1.能夠使用Bootstrap靈活布局網(wǎng)頁。2.能夠使用各組件組合成完整的網(wǎng)頁。185任務(wù)分析雖然使用CSS3的媒體查詢、流式布局等技術(shù)可以直接制作響應(yīng)式網(wǎng)頁，但必須分別設(shè)計(jì)適合于不同屏幕大小的頁面CSS樣式效果，代碼比較煩瑣。為此，網(wǎng)站開發(fā)人員通常借助Bootstrap框架進(jìn)行響應(yīng)式網(wǎng)頁設(shè)計(jì)。本任務(wù)重點(diǎn)學(xué)習(xí)使用Bootstrap制作簡單的響應(yīng)式網(wǎng)頁。186相關(guān)知識(shí)一、Bootstrap環(huán)境搭建1.Bootstrap功能特性Bootstrap是用于快速開發(fā)Web應(yīng)用程序的前端框架。Bootstrap基于HTML、CSS、JavaScript等技術(shù)，內(nèi)置了大量的頁面樣式、可重用的組件、JavaScript插件。用戶基于Bootstrap，可以快速構(gòu)建網(wǎng)站原型甚至是構(gòu)建企業(yè)級的網(wǎng)站。187CSS3使用媒體查詢技術(shù)實(shí)現(xiàn)響應(yīng)式布局，當(dāng)頁面縮放到某一指定寬度時(shí)，會(huì)根據(jù)用戶的設(shè)計(jì)來改變頁面樣式。Bootstrap使用柵格系統(tǒng)來支持響應(yīng)式布局，能更好地適應(yīng)臺(tái)式計(jì)算機(jī)、平板電腦和手機(jī)應(yīng)用的Web頁面開發(fā)，可以讓用戶獲得更好的瀏覽體驗(yàn)，充分體現(xiàn)了移動(dòng)設(shè)備優(yōu)先的理念。188Bootstrap包括以下內(nèi)容。①基本頁面結(jié)構(gòu)。包括網(wǎng)格系統(tǒng)、鏈接樣式、背景等。②全局的CSS設(shè)置。包括定義基本的HTML元素樣式、可擴(kuò)展的class以及網(wǎng)格系統(tǒng)。在標(biāo)簽中使用Bootstrap提供的CSS類，即可輕松實(shí)現(xiàn)多種已定義好的基本樣式。③可重用組件。Bootstrap包含了十幾個(gè)可重用的組件，用于創(chuàng)建圖像、下拉菜單、導(dǎo)航、警告框、彈出框等。④JavaScript插件。包含了十幾個(gè)自定義的jQuery插件。1892.Bootstrap下載安裝Bootstrap的文件和源代碼可以在其官方網(wǎng)站下載。打開網(wǎng)站的主頁，單擊“下載Bootstrap”按鈕，跳轉(zhuǎn)到下載頁面，會(huì)看到3個(gè)下載鏈接，如圖所示。190Bootstrap下載頁面選擇“下載Bootstrap”按鈕，該鏈接下載的內(nèi)容是Bootstrap編譯版的文件，即編譯并壓縮后的CSS、JavaScript和字體文件，不包含文檔和源代碼文件。下載成功后，解壓縮ZIP文件，將看到如圖所示的目錄結(jié)構(gòu)。191Bootstrap目錄結(jié)構(gòu)3.創(chuàng)建Bootstrap頁面在網(wǎng)站中使用Bootstrap，必須引入jquery.js、bootstrap.min.js和bootstrap.min.css文件。與引入其他CSS或JavaScript文件一樣，使用<script>標(biāo)簽引入JavaScript文件，使用<link>標(biāo)簽引入CSS文件。需要注意的是，Bootstrap的JavaScrip效果都是基于jQuery的，如果要使用Bootstrap的JavaScript動(dòng)態(tài)效果，需要先引入jQuery。使用Bootstrap的基本HTML模板代碼可參考程序清單。192193使用Bootstrap的基本HTML模板代碼樣例二、柵格系統(tǒng)1.柵格系統(tǒng)的原理Bootstrap內(nèi)置的柵格系統(tǒng)主要用于頁面布局。柵格是由一系列相交（垂直、水平）的直線組成的格子，用來承載網(wǎng)頁內(nèi)容。柵格系統(tǒng)通過一系列包含內(nèi)容的行和列來創(chuàng)建頁面布局。柵格布局主要使用以下類。（1）.container類和.container-fluid類在Bootstrap頁面布局中，這兩個(gè)類用來定義柵格容器。.container類用于固定寬度并支持響應(yīng)式布局；.container-?uid類用于設(shè)置100%寬度，占據(jù)全部視口的寬度。194（2）.row類.row類用來定義柵格中的一個(gè)行容器。（3）.col-[ScreenStyle]-[percent]類.col-[ScreenStyle]-[percent]類是組合類?？梢酝ㄟ^使用組合類名，來定義柵格行中的具體柵格。其中，ScreenStyle選項(xiàng)是設(shè)備類型，取值為xs、sm、md、lg，xs代表超小型設(shè)備，sm代表小型設(shè)備，md代表中型設(shè)備，lg代表大型設(shè)備；percent選項(xiàng)指明柵格在一行中占多少列，取值為1～12。1952.柵格系統(tǒng)的基本使用方法Bootstrap柵格系統(tǒng)的基本使用方法如下。（1）Bootstrap柵格系統(tǒng)為不同屏幕寬度定義了不同的類，使用非常方便，直接為元素添加類名即可。（2）行（row）必須包含在.container類或.container-?uid類中，這樣方便為其自動(dòng)設(shè)置外邊距和內(nèi)邊距。（3）通過行可以創(chuàng)建水平方向的列組，并且只有列（column）可以作為行的直接子元素。（4）內(nèi)容只能放置于列內(nèi)，列大于12時(shí)，將會(huì)另起一行排列。196由于柵格系統(tǒng)默認(rèn)將父元素分成12等份，所以可根據(jù)占據(jù)的份數(shù)來設(shè)置子元素的寬度。以下代碼說明了如何通過類前綴設(shè)置柵格系統(tǒng)每列寬度。上述代碼中，在設(shè)置列的寬度時(shí)，只需要在不同的類前綴后面加上柵格數(shù)量即可。例如，col-sm-4表示在平板設(shè)備下元素占4份。197三、Bootstrap的組件和插件組件是基于HTML基本元素設(shè)計(jì)的可重復(fù)使用的對象。插件是使用JavaScript或jQuery對組件更高層次的封裝，為組件賦予了動(dòng)態(tài)的“生命”。Bootstrap組件是Bootstrap框架的核心之一，可以利用Bootstrap組件構(gòu)建出絢麗的頁面。常用的組件有圖標(biāo)（glyphicon）、下拉菜單（dropdown）、輸入框（input-group）、導(dǎo)航（nav）與導(dǎo)航條（navbar）、縮略圖（thumbnail）與媒體對象（mediaobject）、列表組（listgroup）等。通過這些組件和插件，可以大大簡化網(wǎng)頁元素的設(shè)計(jì)并且制作出精美的網(wǎng)頁。下面重點(diǎn)介紹導(dǎo)航和導(dǎo)航條組件、輪播插件。1981.導(dǎo)航和導(dǎo)航條組件導(dǎo)航是網(wǎng)頁設(shè)計(jì)中必備的也是非常重要的一種元素，它可以方便地讓用戶快速找到所需要的功能及信息。Bootstrap中導(dǎo)航的相關(guān)模板存儲(chǔ)在.nav類中，屬于公共類。常見的導(dǎo)航類型有選項(xiàng)卡導(dǎo)航（nav-tabs）、膠囊式選項(xiàng)卡導(dǎo)航（nav-pills）、自適應(yīng)導(dǎo)航（nav-justi?ed）。選項(xiàng)卡導(dǎo)航頁面效果如圖所示。選項(xiàng)卡導(dǎo)航代碼可參考程序清單。199選項(xiàng)卡導(dǎo)航頁面效果200選項(xiàng)卡導(dǎo)航代碼樣例膠囊式選項(xiàng)卡導(dǎo)航和自適應(yīng)導(dǎo)航與選項(xiàng)卡導(dǎo)航的用法非常相似，將class="navnav-tabs"分別改成class="navnav-pills"和class="navnav-justi?ed"即可。膠囊式選項(xiàng)卡導(dǎo)航頁面效果如圖所示，自適應(yīng)導(dǎo)航頁面效果如圖所示。201膠囊式選項(xiàng)卡導(dǎo)航頁面效果202自適應(yīng)導(dǎo)航頁面效果導(dǎo)航條擁有一個(gè)統(tǒng)一的背景條，可囊括所有元素，并且對于不同大小的顯示設(shè)備，導(dǎo)航條會(huì)產(chǎn)生相應(yīng)的變化以適應(yīng)設(shè)備大小，即導(dǎo)航條可以進(jìn)行折疊，也可以水平展開。常見的導(dǎo)航條應(yīng)用有基礎(chǔ)導(dǎo)航條、導(dǎo)航條頂部固定或底部固定、響應(yīng)式導(dǎo)航條。基礎(chǔ)導(dǎo)航條頁面效果如圖所示。203基礎(chǔ)導(dǎo)航條頁面效果其代碼可參考程序清單。204基礎(chǔ)導(dǎo)航條代碼樣例此外，導(dǎo)航條還可以固定在頂部或者底部，其代碼可參考程序清單。205導(dǎo)航條頂部固定或底部固定代碼樣例桌面端的響應(yīng)式導(dǎo)航條默認(rèn)顯示所有內(nèi)容，頁面效果如圖所示。206桌面端響應(yīng)式導(dǎo)航條頁面效果移動(dòng)端的響應(yīng)式導(dǎo)航條只顯示網(wǎng)站標(biāo)志及折疊展開按鈕，頁面效果如圖所示。207移動(dòng)端響應(yīng)式導(dǎo)航條頁面效果響應(yīng)式導(dǎo)航條代碼可參考程序清單。208響應(yīng)式導(dǎo)航條代碼樣例2.輪播插件輪播（Carousel）插件可用于響應(yīng)式地向頁面添加滑塊式的顯示效果。輪播的內(nèi)容可以是圖像、內(nèi)嵌框架、視頻或者其他想要放置的任何類型的內(nèi)容。輪播插件是由Bootstrap提供的腳本文件carousel.js來實(shí)現(xiàn)的。使用Carousel插件實(shí)現(xiàn)輪播效果代碼可參考程序清單。209使用Carousel插件實(shí)現(xiàn)輪播效果代碼樣例210使用Carousel插件實(shí)現(xiàn)輪播效果代碼樣例Bootstrap默認(rèn)的輪播圖播放效果是橫向占滿整個(gè)瀏覽器窗口，可以通過設(shè)置外層容器的width值調(diào)整輪播圖的寬度，在<head>標(biāo)簽中添加樣式文件，頁面效果如圖所示。為輪播圖添加樣式代碼可參考程序清單。211桌面端響應(yīng)式導(dǎo)航條輪播頁面效果212為輪播圖添加樣式代碼樣例謝謝Thanks213項(xiàng)目七電子商務(wù)網(wǎng)站的推廣任務(wù)一電子商務(wù)網(wǎng)站推廣基礎(chǔ)知識(shí)任務(wù)二電子商務(wù)網(wǎng)站的搜索引擎優(yōu)化推廣214項(xiàng)目引入根據(jù)中國互聯(lián)網(wǎng)絡(luò)信息中心發(fā)布的數(shù)據(jù)，截止到2022年6月，我國網(wǎng)站數(shù)量為422萬個(gè)。然而在如此數(shù)量龐大的網(wǎng)站中，只有20%的網(wǎng)站會(huì)被網(wǎng)民經(jīng)常光顧。網(wǎng)站要想適應(yīng)互聯(lián)網(wǎng)行業(yè)的“二八定律”，除了遵守行業(yè)規(guī)則，做好網(wǎng)站推廣工作是其生存發(fā)展的重要途徑。電子商務(wù)網(wǎng)站的推廣隨著技術(shù)的進(jìn)步也在不斷發(fā)展，從互聯(lián)網(wǎng)到移動(dòng)互聯(lián)網(wǎng)，技術(shù)的更新迭代不但推動(dòng)商業(yè)模式的更新，也使電子商務(wù)網(wǎng)站的推廣方式不斷變化，新技術(shù)在電子商務(wù)網(wǎng)站推廣中的作用也越來越大。本項(xiàng)目主要從網(wǎng)站開發(fā)的技術(shù)角度來學(xué)習(xí)電子商務(wù)網(wǎng)站的推廣方法。215學(xué)習(xí)目標(biāo)知識(shí)目標(biāo)1.熟悉電子商務(wù)網(wǎng)站推廣的基本形式。2.掌握電子商務(wù)網(wǎng)站推廣的一般方法。3.熟悉電子商務(wù)網(wǎng)站在開發(fā)的各階段推廣時(shí)的注意事項(xiàng)。技能目標(biāo)1.能夠根據(jù)電子商務(wù)網(wǎng)站各種推廣方式的特點(diǎn)對電子商務(wù)網(wǎng)站推廣方案進(jìn)行評價(jià)。2.能夠根據(jù)電子商務(wù)網(wǎng)站推廣崗位能力要求分析自身的優(yōu)劣勢并實(shí)施改進(jìn)。216任務(wù)分析電子商務(wù)網(wǎng)站是企業(yè)開展?fàn)I銷活動(dòng)，與外部交流的重要平臺(tái)。企業(yè)需要整合各種資源對網(wǎng)站進(jìn)行推廣，以發(fā)揮其在企業(yè)經(jīng)營中的作用。本任務(wù)在了解電子商務(wù)網(wǎng)站推廣的一般方法和技巧的基礎(chǔ)上，學(xué)習(xí)在電子商務(wù)網(wǎng)站的設(shè)計(jì)開發(fā)、部署運(yùn)維等各階段，根據(jù)營銷推廣的需要對網(wǎng)站不斷進(jìn)行優(yōu)化和調(diào)整的方法。217相關(guān)知識(shí)一、電子商務(wù)網(wǎng)站推廣的含義與常用推廣形式1.電子商務(wù)網(wǎng)站推廣的含義電子商務(wù)網(wǎng)站推廣是指在電子商務(wù)網(wǎng)站的建設(shè)和發(fā)展過程中，為了提高網(wǎng)站的知名度和影響力，突出網(wǎng)站特色，提升網(wǎng)站訪問量和關(guān)注度，打造網(wǎng)站品牌并以此帶動(dòng)整個(gè)電子商務(wù)網(wǎng)站全部營銷活動(dòng)有效開展而進(jìn)行的全部推廣、宣傳以及網(wǎng)站延伸建設(shè)活動(dòng)。換言之，就是通過各種信息化技術(shù)手段，把網(wǎng)站展示在目標(biāo)受眾面前，讓更多的用戶知道、認(rèn)識(shí)并登錄網(wǎng)站，最終成為客戶。218網(wǎng)站推廣在網(wǎng)絡(luò)中隨處可見。例如，打開導(dǎo)航類網(wǎng)站，主頁展示各類網(wǎng)站站名，一旦點(diǎn)擊，便鏈接到相應(yīng)網(wǎng)站；使用搜索引擎時(shí)，搜索結(jié)果會(huì)將與搜索內(nèi)容相關(guān)的網(wǎng)站一一羅列出來，經(jīng)過網(wǎng)站推廣的網(wǎng)站一般排在前面。網(wǎng)站推廣的方式有很多種，但其基本目的都是讓用戶能訪問特定的網(wǎng)站，最終轉(zhuǎn)變?yōu)榫W(wǎng)站的客戶。網(wǎng)站推廣的目的是通過各種途徑來為網(wǎng)站引流，增加網(wǎng)站的流量、訪問量、注冊量，從而提高網(wǎng)站的知名度和影響力，最終提高網(wǎng)站的轉(zhuǎn)化率。219理解電子商務(wù)網(wǎng)站推廣的含義，應(yīng)把握以下幾點(diǎn)。（1）電子商務(wù)網(wǎng)站推廣工作貫穿電子商務(wù)網(wǎng)站建設(shè)的整個(gè)過程電子商務(wù)網(wǎng)站推廣是一項(xiàng)系統(tǒng)的、復(fù)雜的工程，必須在電子商務(wù)網(wǎng)站建設(shè)的各個(gè)階段做好工作，才能以較少的投入獲得較好的效果。在電子商務(wù)網(wǎng)站設(shè)計(jì)規(guī)劃階段，應(yīng)同時(shí)進(jìn)行網(wǎng)站推廣的策劃。在電子商務(wù)網(wǎng)站建設(shè)過程中，應(yīng)在策劃的基礎(chǔ)上，以利于網(wǎng)站推廣的方式進(jìn)行網(wǎng)站建設(shè)，如考慮如何使網(wǎng)站符合用戶瀏覽習(xí)慣、對搜索引擎友好等，以免在網(wǎng)站建設(shè)完成后再進(jìn)行網(wǎng)站結(jié)構(gòu)優(yōu)化重構(gòu)而返工。220（2）電子商務(wù)網(wǎng)站推廣必須有明確的目標(biāo)一般而言，電子商務(wù)網(wǎng)站推廣的目標(biāo)包括擴(kuò)大網(wǎng)站知名度、影響力，塑造企業(yè)品牌形象，提升企業(yè)品牌價(jià)值，提高網(wǎng)站流量、交易額等。（3）電子商務(wù)網(wǎng)站推廣是企業(yè)電子商務(wù)戰(zhàn)略的重要組成部分傳統(tǒng)企業(yè)在生產(chǎn)、經(jīng)營、銷售和客戶支持等環(huán)節(jié)開展電子商務(wù)活動(dòng)，建設(shè)企業(yè)網(wǎng)站是重中之重。而企業(yè)網(wǎng)站也只有在宣傳推廣之后，在具備一定流量、知名度的基礎(chǔ)上，才能發(fā)揮其在企業(yè)電子商務(wù)活動(dòng)中的特殊作用。221（3）電子商務(wù)網(wǎng)站推廣是企業(yè)電子商務(wù)戰(zhàn)略的重要組成部分傳統(tǒng)企業(yè)在生產(chǎn)、經(jīng)營、銷售和客戶支持等環(huán)節(jié)開展電子商務(wù)活動(dòng)，建設(shè)企業(yè)網(wǎng)站是重中之重。而企業(yè)網(wǎng)站也只有在宣傳推廣之后，在具備一定流量、知名度的基礎(chǔ)上，才能發(fā)揮其在企業(yè)電子商務(wù)活動(dòng)中的特殊作用。（4）電子商務(wù)網(wǎng)站推廣需要借助各種信息化技術(shù)手段和媒體電子商務(wù)網(wǎng)站推廣不同于傳統(tǒng)企業(yè)推廣，必須充分利用各種現(xiàn)代化信息技術(shù)手段和媒體，才能起到良好的宣傳推廣作用。2222.電子商務(wù)網(wǎng)站常用推廣形式電子商務(wù)網(wǎng)站推廣包括線下推廣和線上推廣，目前采取線上推廣的方式比較常見，根據(jù)其推廣是否需要付費(fèi)，又可分為免費(fèi)推廣和付費(fèi)推廣。（1）免費(fèi)推廣方式免費(fèi)推廣方式成本低，比較靈活，大都易于實(shí)施和實(shí)現(xiàn)，是大部分初涉電子商務(wù)企業(yè)的首選推廣方式。1）在搜索引擎和行業(yè)站點(diǎn)上注冊網(wǎng)站或網(wǎng)頁。各大搜索引擎如百度、360搜索、搜狗搜索、必應(yīng)（Bing）等大都提供了注冊或登錄免費(fèi)分類目錄的功能，及時(shí)提交網(wǎng)站和網(wǎng)頁可以增加搜索機(jī)會(huì)。2232）論壇和貼吧推廣。論壇是高人氣的平臺(tái)，充分利用論壇的人氣來宣傳網(wǎng)站，發(fā)一些與網(wǎng)站相關(guān)的內(nèi)容或軟文到各大論壇，如天涯、百度貼吧等，可以增加網(wǎng)站的點(diǎn)擊量和瀏覽量，但要注意發(fā)帖和回帖的數(shù)量、質(zhì)量等。3）微博推廣。利用微博的方式，向用戶傳遞有價(jià)值的信息而最終實(shí)現(xiàn)營銷信息的傳播，如在微博中寫相關(guān)專業(yè)的文章，介紹相關(guān)產(chǎn)品及服務(wù)的知識(shí)等。4）即時(shí)通信軟件推廣。自建或選擇加入一些相關(guān)用戶聚集的群（如微信群、QQ群等），是一種快速有效的宣傳推廣方法。2245）視頻直播推廣。目前網(wǎng)絡(luò)直播用戶越來越多，以網(wǎng)絡(luò)直播平臺(tái)為載體，開展?fàn)I銷推廣活動(dòng)，有利于達(dá)到提升企業(yè)品牌知名度或增加銷量的目的。6）互換鏈接推廣。互換鏈接是一種互惠互利的協(xié)作方式。在選擇要互換鏈接的站點(diǎn)時(shí)，要考慮該網(wǎng)站的知名度以及該網(wǎng)站的性質(zhì)和主題與自己的站點(diǎn)是否相關(guān)。7）許可E-mail推廣。通過郵件列表、新聞郵件、電子刊物等形式，在向用戶提供有價(jià)值信息的同時(shí)附帶一定數(shù)量的商業(yè)廣告信息。許可E-mail推廣有助于客戶在網(wǎng)上尋找產(chǎn)品，減少廣告對客戶的滋擾，增加潛在客戶定位的準(zhǔn)確度，增進(jìn)與客戶的關(guān)系，提升品牌忠誠度等。225（2）常用付費(fèi)推廣方式一般情況下，付費(fèi)推廣方式見效比較快，對于經(jīng)濟(jì)實(shí)力比較雄厚的公司或電子商務(wù)推廣人才緊缺的公司是一個(gè)不錯(cuò)的選擇。1）搜索引擎推廣。搜索引擎競價(jià)排名是目前比較流行的推廣服務(wù)，如百度競價(jià)排名等，它是一種按效果付費(fèi)的網(wǎng)絡(luò)推廣方式，其主要目標(biāo)是提升關(guān)鍵詞排名。關(guān)鍵詞廣告可提高網(wǎng)站在搜索結(jié)果中的自然排名，獲得更多的商機(jī)，從而達(dá)到提升企業(yè)銷售業(yè)績的效果。2）付費(fèi)廣告。通過互聯(lián)網(wǎng)來發(fā)布和傳播廣告，如在導(dǎo)航類網(wǎng)站主頁發(fā)布廣告等。3）網(wǎng)絡(luò)促銷。使用各種網(wǎng)絡(luò)促銷手段，如團(tuán)購網(wǎng)站推廣、免費(fèi)產(chǎn)品試用、網(wǎng)上有獎(jiǎng)促銷、網(wǎng)上折價(jià)促銷及會(huì)員制積分促銷等方式。226二、電子商務(wù)網(wǎng)站推廣的注意事項(xiàng)電子商務(wù)網(wǎng)站推廣貫穿于整個(gè)網(wǎng)站開發(fā)過程，在不同的階段體現(xiàn)出不同的特點(diǎn)，應(yīng)針對不同階段特點(diǎn)進(jìn)行有針對性的推廣。1.電子商務(wù)網(wǎng)站前期規(guī)劃階段在電子商務(wù)網(wǎng)站前期規(guī)劃階段，雖然網(wǎng)站還沒有正式發(fā)布，但這個(gè)階段的網(wǎng)站推廣也有十分重要的意義。該階段網(wǎng)站推廣工作需要注意以下幾點(diǎn)。227（1）避免網(wǎng)站推廣被忽視大多數(shù)網(wǎng)站在策劃和設(shè)計(jì)階段沒有考慮推廣方案，特別是如果網(wǎng)站設(shè)計(jì)開發(fā)和網(wǎng)站運(yùn)營推廣屬于不同部門時(shí)，這個(gè)問題往往比較嚴(yán)重，很可能在網(wǎng)站發(fā)布之后才重視推廣，再重新考慮推廣的需求和優(yōu)化設(shè)計(jì)等問題，不僅浪費(fèi)人力，也延誤了網(wǎng)站推廣的時(shí)機(jī)。（2）做好溝通與協(xié)調(diào)一般來說，網(wǎng)站的設(shè)計(jì)開發(fā)需要由技術(shù)、設(shè)計(jì)、市場等方面的人員共同完成，不同專業(yè)背景的人員對網(wǎng)站建設(shè)的理解會(huì)有所差異，對網(wǎng)站的成本投入、推廣實(shí)施會(huì)有分歧，需要做好溝通與協(xié)調(diào)工作。2282.電子商務(wù)網(wǎng)站發(fā)布初期在電子商務(wù)網(wǎng)站正式對外發(fā)布的初期階段，網(wǎng)站推廣需要注意以下幾點(diǎn)。（1）聚焦主要目標(biāo)——提高用戶關(guān)注認(rèn)知度電子商務(wù)網(wǎng)站發(fā)布初期階段的主要目標(biāo)是提高用戶的訪問量，讓更多的用戶知道并了解網(wǎng)站，獲得盡可能多的用戶認(rèn)知。在這個(gè)階段，產(chǎn)品推廣和銷售促進(jìn)通常居于次要位置。（2）避免推廣的盲目性在電子商務(wù)網(wǎng)站發(fā)布初期，要進(jìn)行準(zhǔn)確、客觀的市場定位，確立合理的推廣目標(biāo)，避免盲目推廣。2293.電子商務(wù)網(wǎng)站發(fā)展穩(wěn)定期經(jīng)過初期推廣，網(wǎng)站已經(jīng)擁有了一定的訪問量，這時(shí)一方面要保持網(wǎng)站推廣的力度，另一方面需要對初期推廣效果進(jìn)行分析，找到最適合本網(wǎng)站的推廣方法。（1）推廣目標(biāo)由用戶認(rèn)知到用戶認(rèn)可轉(zhuǎn)變通過初期推廣獲得的網(wǎng)站用戶，只有在認(rèn)可網(wǎng)站價(jià)值的基礎(chǔ)上，才會(huì)繼續(xù)訪問網(wǎng)站以獲得信息和服務(wù)。（2）加強(qiáng)推廣效果的管理通過對網(wǎng)站訪問量、轉(zhuǎn)化率等指標(biāo)的統(tǒng)計(jì)分析，可以發(fā)現(xiàn)哪些網(wǎng)站推廣方法有效，哪些推廣方法效果不佳，進(jìn)而充分發(fā)揮網(wǎng)站推廣的作用。230學(xué)習(xí)目標(biāo)知識(shí)目標(biāo)1.熟悉常用搜索引擎及其工作原理。2.掌握搜索引擎優(yōu)化（SEO）及相關(guān)術(shù)語的含義。3.熟悉關(guān)鍵詞優(yōu)化、網(wǎng)站結(jié)構(gòu)優(yōu)化的一般方法。

技能目標(biāo)能夠?qū)﹄娮由虅?wù)網(wǎng)站進(jìn)行SEO查詢，分析電子商務(wù)網(wǎng)站的SEO表現(xiàn)并提出優(yōu)化改進(jìn)建議。231任務(wù)分析搜索引擎是目前公認(rèn)的核心網(wǎng)絡(luò)推廣渠道之一。搜索引擎優(yōu)化（SearchEngineOptimization，SEO）是通過學(xué)習(xí)利用搜索引擎的搜索規(guī)則，提高網(wǎng)站在相關(guān)搜索引擎內(nèi)的排名，進(jìn)而獲得流量紅利，提升網(wǎng)站轉(zhuǎn)化率。在電子商務(wù)網(wǎng)站設(shè)計(jì)開發(fā)及運(yùn)維時(shí)，往往會(huì)進(jìn)行站點(diǎn)的SEO分析，并根據(jù)網(wǎng)站的SEO數(shù)據(jù)進(jìn)行關(guān)鍵字優(yōu)化、網(wǎng)站結(jié)構(gòu)優(yōu)化等具體調(diào)整。本任務(wù)重點(diǎn)學(xué)習(xí)搜索引擎優(yōu)化的關(guān)鍵技術(shù)和手段。232相關(guān)知識(shí)一、電子商務(wù)網(wǎng)站SEO分析SEO是指為了增加網(wǎng)站在搜索引擎中自然搜索結(jié)果（非商業(yè)性推薦結(jié)果）的收錄數(shù)量以及提升排序位置而做的優(yōu)化行為。SEO是在認(rèn)識(shí)與了解搜索引擎怎樣抓取和索引網(wǎng)頁、怎樣確定搜索關(guān)鍵詞等技術(shù)后，對網(wǎng)頁進(jìn)行有針對性的優(yōu)化，確保在不影響用戶習(xí)慣和網(wǎng)頁內(nèi)容的前提下，提升網(wǎng)站在搜索引擎中的自然排名，從而吸引更多的用戶訪問網(wǎng)站，提高網(wǎng)站的訪問量，最終提升網(wǎng)站宣傳能力和產(chǎn)品銷售能力的現(xiàn)代技術(shù)。233隨著網(wǎng)絡(luò)的發(fā)展，互聯(lián)網(wǎng)上的信息量呈爆炸式增長，加大了人們尋找目標(biāo)信息的難度，而搜索引擎的出現(xiàn)給人們尋找信息帶來極大的便利，已經(jīng)成為不可或缺的上網(wǎng)工具。根據(jù)人們的使用習(xí)慣和心理，在搜索引擎中排名越靠前的網(wǎng)站，被點(diǎn)擊的概率就越大；相反，排名越靠后，得到的搜索流量就越少。據(jù)統(tǒng)計(jì)，在全球500強(qiáng)企業(yè)中，有90%以上的企業(yè)在其網(wǎng)站中運(yùn)用了SEO技術(shù)。而有的企業(yè)因?yàn)槿狈I(yè)的營銷知識(shí)和理念，僅從技術(shù)的角度出發(fā)開發(fā)網(wǎng)站，這樣做出來的網(wǎng)站是有缺陷的，不符合搜索引擎的收錄要求，所以必須對網(wǎng)站進(jìn)行全面的、有針對性的優(yōu)化。2341.搜索引擎與搜索引擎優(yōu)化（1）搜索引擎及其工作原理搜索引擎是根據(jù)一定的策略、運(yùn)用特定的計(jì)算機(jī)程序搜集互聯(lián)網(wǎng)上的信息，在對信息進(jìn)行組織和處理后，為用戶提供檢索服務(wù)的系統(tǒng)。常見的中文搜索引擎有百度、搜狗、360搜索、頭條搜索、中國搜索、必應(yīng)等。235搜索引擎通過抓取網(wǎng)頁、建立索引、提供檢索服務(wù)3個(gè)主要功能工作。1）抓取網(wǎng)頁。每個(gè)獨(dú)立的搜索引擎都有自己的網(wǎng)頁抓取程序。網(wǎng)頁抓取程序順著網(wǎng)頁中的超鏈接，連續(xù)地抓取網(wǎng)頁。被抓取的網(wǎng)頁稱為網(wǎng)頁快照。由于互聯(lián)網(wǎng)中超鏈接的應(yīng)用很普遍，理論上講，從一定范圍的網(wǎng)頁出發(fā)，就能收集絕大多數(shù)的網(wǎng)頁。2362）建立索引。搜索引擎抓取到網(wǎng)頁后，還要做大量的預(yù)處理工作，才能提供檢索服務(wù)。其中，最重要的就是提取關(guān)鍵詞，建立索引文件。其他的還包括去除重復(fù)頁、分詞（中文）、判斷網(wǎng)頁類型、分析超鏈接、計(jì)算網(wǎng)頁的重要程度和豐富度等。3）提供檢索服務(wù)。用戶輸入關(guān)鍵詞進(jìn)行檢索，搜索引擎從索引數(shù)據(jù)庫中找到匹配該關(guān)鍵詞的網(wǎng)頁。為了便于用戶判斷，除了網(wǎng)頁標(biāo)題和URL外，還會(huì)提供一段來自網(wǎng)頁的摘要以及其他信息。237（2）搜索引擎優(yōu)化及其相關(guān)術(shù)語搜索引擎優(yōu)化是一種利用搜索引擎的搜索規(guī)則來提高網(wǎng)站在相關(guān)搜索引擎中排名的方法，其主要目的是提高特定關(guān)鍵字的曝光度，增加網(wǎng)站知名度，從而增加銷售機(jī)會(huì)。隨著互聯(lián)網(wǎng)營銷競爭愈發(fā)激烈，現(xiàn)在的獲客成本一直在節(jié)節(jié)攀升，而SEO是一種運(yùn)營成本較低的網(wǎng)絡(luò)推廣方式，如果做得好，能夠讓企業(yè)持續(xù)穩(wěn)定地獲得大量的免費(fèi)流量。所以，對于電子商務(wù)網(wǎng)站開發(fā)人員來說，掌握SEO基本概念以及相應(yīng)的優(yōu)化方法，是很有必要的。238SEO的相關(guān)術(shù)語如下。1）關(guān)鍵字/詞。關(guān)鍵字/詞就是用戶在使用搜索引擎時(shí)輸入的、能夠最大程度概括用戶所要查找的信息內(nèi)容的字或者詞，是信息的概括化和集中化。在SEO中談到的關(guān)鍵字/詞，往往是指網(wǎng)頁的核心和主要內(nèi)容。2392）目標(biāo)關(guān)鍵詞。目標(biāo)關(guān)鍵詞是指經(jīng)過關(guān)鍵詞分析確定下來的網(wǎng)站“主打”關(guān)鍵詞，也就是網(wǎng)站產(chǎn)品或服務(wù)的目標(biāo)客戶可能用來搜索的關(guān)鍵詞。目標(biāo)關(guān)鍵詞具有以下特征：一般作為網(wǎng)站主頁的標(biāo)題；一般由2～4個(gè)字構(gòu)成一個(gè)詞或詞組，以名詞居多；目標(biāo)關(guān)鍵詞在搜索引擎中有穩(wěn)定的日搜索量；搜索目標(biāo)關(guān)鍵詞的用戶往往對網(wǎng)站的產(chǎn)品或服務(wù)有需求，或者對網(wǎng)站的內(nèi)容感興趣；網(wǎng)站的主要內(nèi)容圍繞目標(biāo)關(guān)鍵詞展開。2403）網(wǎng)頁級別（PageRank，PR）值。PR值是搜索引擎排名運(yùn)算法則（排名公式）的一部分，是搜索引擎用來標(biāo)識(shí)網(wǎng)頁等級、重要性的一種方法，是搜索引擎用來衡量一個(gè)網(wǎng)站好壞的重要標(biāo)準(zhǔn)之一。4）頁面標(biāo)題（TitleTag）。頁面標(biāo)題是在瀏覽網(wǎng)頁時(shí)可以從瀏覽器最上方看到的網(wǎng)頁標(biāo)題文本，這也是搜索引擎排名算法中一個(gè)重要的參考。理論上講，頁面標(biāo)題要獨(dú)一無二并盡可能多地包含頁面內(nèi)容中的關(guān)鍵詞。2415）元標(biāo)簽（MetaTags）。元標(biāo)簽和頁面標(biāo)題一樣，主要用于為搜索引擎提供更多的關(guān)于本頁面內(nèi)容的信息。元標(biāo)簽位于HTML代碼的頭部，對瀏覽者不可見。6）Alt屬性。Alt屬性是HTML網(wǎng)頁中對圖片添加的描述性文本，其用法一般為<imgsrc="圖片路徑"alt="圖片說明"/>。在圖片Alt屬性中加入關(guān)鍵詞，能夠很好地幫助搜索引擎對圖片進(jìn)行索引，也能夠有效地提升頁面中的關(guān)鍵詞密度。2427）反向鏈接（Backlink）。反向鏈接又稱為回指鏈接或入鏈，是指從其他網(wǎng)站指向自己網(wǎng)站的一個(gè)超級鏈接。反向鏈接之所以對SEO異常重要，是因?yàn)樗鼈冎苯佑绊懸粋€(gè)網(wǎng)頁的PR值，以及這個(gè)頁面在搜索結(jié)果中的排名。8）IP、PV和UV。IP（InternetProtocol），反映的是24小時(shí)內(nèi)某網(wǎng)站被不同IP地址的計(jì)算機(jī)訪問的情況。相同IP地址只被計(jì)算一次，這種統(tǒng)計(jì)方式很容易實(shí)現(xiàn)，具有真實(shí)性，是衡量網(wǎng)站流量的重要指標(biāo)。9）排名算法（RankingAlgorithm）。排名算法是搜索引擎用來對其索引中的列表進(jìn)行評估和排名的規(guī)則，各搜索引擎會(huì)有所不同。243（3）搜索引擎優(yōu)化的一般內(nèi)容搜索引擎優(yōu)化是一項(xiàng)需要足夠耐心的細(xì)致工作。搜索引擎優(yōu)化一般包括以下六個(gè)方面內(nèi)容。1）關(guān)鍵詞分析，也稱關(guān)鍵詞定位。這是進(jìn)行SEO的重要一環(huán)。關(guān)鍵詞分析包括關(guān)鍵詞關(guān)注量分析、競爭對手分析、關(guān)鍵詞與網(wǎng)站相關(guān)性分析、關(guān)鍵詞布置、關(guān)鍵詞排名預(yù)測。2）網(wǎng)站架構(gòu)分析。網(wǎng)站架構(gòu)符合搜索引擎的爬蟲喜好，有利于SEO優(yōu)化。網(wǎng)站架構(gòu)分析包括剔除網(wǎng)站架構(gòu)不良設(shè)計(jì)、實(shí)現(xiàn)樹狀目錄結(jié)構(gòu)、網(wǎng)站導(dǎo)航與鏈接優(yōu)化。2443）網(wǎng)站目錄和頁面優(yōu)化。SEO不只是能讓網(wǎng)站主頁在搜索引擎中有好的排名，更重要的是能給網(wǎng)站的每個(gè)頁面都帶來流量。4）內(nèi)容發(fā)布和鏈接布置。搜索引擎喜歡網(wǎng)站內(nèi)容有規(guī)律地更新，所以合理安排網(wǎng)站內(nèi)容發(fā)布日程是SEO的重要技巧之一。鏈接布置則把整個(gè)網(wǎng)站有機(jī)地串聯(lián)起來，讓搜索引擎明白每個(gè)網(wǎng)頁的重要性和關(guān)鍵詞。同時(shí)，要開展友情鏈接建設(shè)。5）與搜索引擎對話。在搜索引擎看SEO的效果，通過site：域名，獲得站點(diǎn)的收錄和更新情況。6）網(wǎng)站流量分析。網(wǎng)站流量分析是從SEO的結(jié)果指導(dǎo)下一步的SEO策略，同時(shí)對網(wǎng)站的用戶體驗(yàn)優(yōu)化也有指導(dǎo)意義。2452.電子商務(wù)網(wǎng)站SEO查詢網(wǎng)站SEO查詢可以了解該網(wǎng)站在各大搜索引擎中的信息，包括網(wǎng)站權(quán)重、預(yù)估流量、收錄情況、反鏈及關(guān)鍵詞排名等，為后續(xù)搜索引擎優(yōu)化做好準(zhǔn)備。（1）查詢網(wǎng)站在各大搜索引擎中的收錄情況查詢網(wǎng)站在各大搜索引擎中的收錄情況，可以借助各大搜索引擎提供的站長工具，如百度搜索資源平臺(tái)、搜狗搜索資源平臺(tái)等。246247百度搜索資源平臺(tái)頁面也可以借助其他站點(diǎn)工具平臺(tái)，如站長之家進(jìn)行站點(diǎn)SEO綜合查詢。例如，使用站長之家查詢北京2022年冬奧會(huì)官網(wǎng)的SEO數(shù)據(jù)，如圖所示?？梢钥吹皆摼W(wǎng)站在百度、搜狗、360、神馬、谷歌等各大搜索引擎中的收錄情況，同時(shí)也可以看到其PC詞數(shù)為276（PC排名在50名內(nèi)的關(guān)鍵詞數(shù)量，越高越好）和移動(dòng)詞數(shù)為214（移動(dòng)排名前50名內(nèi)的關(guān)鍵詞數(shù)量，越高越好），首頁位置為1（在搜索引擎查詢該站點(diǎn)時(shí)主頁的位置，一般越小越好）。248249使用站長之家進(jìn)行SEO綜合查詢（2021年9月）（2）查詢網(wǎng)站Alexa排名Alexa排名是指網(wǎng)站的世界排名，包括綜合排名、分類排名等多個(gè)評價(jià)指標(biāo)，大多數(shù)人把它當(dāng)作較為權(quán)威的網(wǎng)站訪問量評價(jià)指標(biāo)。使用站長之家提供的Alexa查詢工具，可以很方便地查詢網(wǎng)站的Alexa排名。（3）網(wǎng)站友情鏈接檢測網(wǎng)站友情鏈接也是網(wǎng)站優(yōu)化的重要一環(huán)，友情鏈接的好壞能夠?qū)W(wǎng)站的排名造成很大的影響。查看其他網(wǎng)站是否添加了本網(wǎng)站的友情鏈接，是網(wǎng)站運(yùn)營管理人員的常規(guī)工作。使用站長之家友情鏈接查詢工具可以查詢網(wǎng)站的友情鏈接情況，如圖所示為中國奧委會(huì)官方網(wǎng)站的友情鏈接情況。250251中國奧委會(huì)官方網(wǎng)站的友情鏈接查詢情況（2021年4月）（4）關(guān)鍵詞查詢關(guān)鍵詞就是在搜索引擎中能搜索到本網(wǎng)站的詞。網(wǎng)站中涉及關(guān)鍵詞的3個(gè)重要的HTML標(biāo)簽為title（網(wǎng)頁標(biāo)題），description（對網(wǎng)頁描述的一個(gè)概述）和keywords（提取頁面中的主要關(guān)鍵詞，數(shù)量控制在3～6個(gè)）。此外，正文、導(dǎo)航、圖片Alt屬性、相關(guān)超鏈接也包含關(guān)鍵詞。作為網(wǎng)站運(yùn)營管理人員，在關(guān)心本網(wǎng)站關(guān)鍵詞分布的同時(shí)，往往還要查詢競爭對手網(wǎng)站的關(guān)鍵詞，再作出SEO推廣決策。252二、關(guān)鍵詞優(yōu)化根據(jù)相關(guān)數(shù)據(jù)統(tǒng)計(jì)，網(wǎng)站的訪問量大部分來自搜索引擎，而搜索引擎的用戶一般只會(huì)留意搜索結(jié)果第1頁的幾個(gè)站點(diǎn)，第2頁及之后的站點(diǎn)訪問率顯著降低。關(guān)鍵詞搜索引擎優(yōu)化就是利用搜索引擎的搜索規(guī)則來提高網(wǎng)站在有關(guān)搜索引擎內(nèi)的自然排名，從而獲得品牌或者直接客戶訂單的收益。網(wǎng)站的關(guān)鍵詞