學(xué)習(xí)單元十付費(fèi)版店鋪裝修任務(wù)三分類導(dǎo)航設(shè)計(jì)

1、店鋪裝修整頁(yè)設(shè)計(jì)授課教師：姓名移動(dòng)商務(wù)視覺(jué)設(shè)計(jì)Contents任務(wù)二旺鋪促銷區(qū)設(shè)計(jì)任務(wù)三分類導(dǎo)航設(shè)計(jì)任務(wù)一旺鋪店招設(shè)計(jì)任務(wù)2 淘寶旺鋪版整頁(yè)設(shè)計(jì)3. 分類導(dǎo)航設(shè)計(jì)3.1 認(rèn)識(shí)店鋪分類導(dǎo)航店鋪導(dǎo)航設(shè)計(jì)- 淘寶網(wǎng)為每一位旺鋪賣家都提供了一塊導(dǎo)航區(qū)域，類似網(wǎng)站的導(dǎo)航一樣，每一個(gè)鏈接都可以訪問(wèn)一個(gè)完整的頁(yè)面。頁(yè)面可以是賣家自定義編輯的，也可以是通過(guò)淘寶所提供的固定選項(xiàng)進(jìn)行顯示。用戶在訪問(wèn)頁(yè)面時(shí)，都是無(wú)序且缺乏耐心的，那店鋪導(dǎo)航就更需要主動(dòng)地幫助用戶對(duì)店鋪信息提煉，提高顧客的訪問(wèn)效率就是提高賣家的數(shù)錢效率。任務(wù)2 淘寶旺鋪版整頁(yè)設(shè)計(jì)3. 分類導(dǎo)航設(shè)計(jì)3.2 旺鋪與普店分類導(dǎo)航的區(qū)別【旺鋪】【普鋪】任務(wù)2

2、 淘寶旺鋪版整頁(yè)設(shè)計(jì)3. 分類導(dǎo)航設(shè)計(jì)3.3 店鋪分類導(dǎo)航設(shè)計(jì)技巧【小竅門(mén)】：店鋪導(dǎo)航設(shè)計(jì)技巧 （1）店鋪介紹。 （2）特殊說(shuō)明。 （3）寶貝推薦。 （4）慎用固定頁(yè)面。 任務(wù)2 淘寶旺鋪版整頁(yè)設(shè)計(jì)3.2 分類導(dǎo)航承載的信息內(nèi)容應(yīng)該有哪些？3. 分類導(dǎo)航設(shè)計(jì)【導(dǎo)航】【導(dǎo)航】突出易用的主題色彩文字的對(duì)比理性消費(fèi)者加深新用戶印象 平衡老用戶需求感性用戶 任務(wù)2 淘寶旺鋪版整頁(yè)設(shè)計(jì)3.4 分類導(dǎo)航制作3. 分類導(dǎo)航設(shè)計(jì)通過(guò)圖片分解的形式對(duì)旺鋪導(dǎo)航進(jìn)行制作與設(shè)置，需要的軟件有Photoshop和Dreamweaver8。打開(kāi)Ps新建950*270像素的新圖片，利用標(biāo)尺和參考線將圖片分割，確定出導(dǎo)航分布

3、：任務(wù)2 淘寶旺鋪版整頁(yè)設(shè)計(jì)3. 分類導(dǎo)航設(shè)計(jì)3.4 分類導(dǎo)航制作通過(guò)畫(huà)筆工具沿著參考線畫(huà)出布局圖任務(wù)2 淘寶旺鋪版整頁(yè)設(shè)計(jì)3. 分類導(dǎo)航設(shè)計(jì)3.4 分類導(dǎo)航制作使用文字工具將文字添加進(jìn)去，通過(guò)修改文字樣式使文字到想要的效果 打開(kāi)eamweaver8軟件，利用熱點(diǎn)工具畫(huà)出需要添加鏈接的區(qū)域，添加完后點(diǎn)擊代碼，然后復(fù)制代碼到文本文檔中。任務(wù)2 淘寶旺鋪版整頁(yè)設(shè)計(jì)3. 分類導(dǎo)航設(shè)計(jì)3.5 分類導(dǎo)航設(shè)置進(jìn)入店鋪后臺(tái)，點(diǎn)擊店鋪裝修，進(jìn)入后在自定義區(qū)點(diǎn)擊編輯按鈕，出現(xiàn)界面任務(wù)2 淘寶旺鋪版整頁(yè)設(shè)計(jì)3. 分類導(dǎo)航設(shè)計(jì)3.5 分類導(dǎo)航設(shè)置勾選編輯源代碼，將剛制作好的代碼粘貼進(jìn)去，點(diǎn)擊確定，預(yù)覽沒(méi)問(wèn)題后進(jìn)行發(fā)布。任務(wù)2 淘寶旺鋪版整頁(yè)設(shè)計(jì)3. 分類導(dǎo)航設(shè)計(jì)3.6 分類導(dǎo)航css代碼設(shè)置進(jìn)入到店鋪的裝修頁(yè)面，將鼠標(biāo)放在導(dǎo)航上面會(huì)出現(xiàn)“編輯”字樣，單擊，選擇“顯示設(shè)置”選項(xiàng)卡。任務(wù)2 淘寶旺鋪版整頁(yè)設(shè)計(jì)3. 分類導(dǎo)航設(shè)計(jì)3.5 分類導(dǎo)航設(shè)3.6 分類導(dǎo)航css代碼設(shè)置(1) 修改導(dǎo)航分類下面的背景色，代碼如下：.skin-box-bd .linkbackground:#000000;將代碼粘貼到框內(nèi)：效果圖：任務(wù)2 淘寶旺鋪版整頁(yè)設(shè)計(jì)3. 分類導(dǎo)航設(shè)計(jì)3.6 分類導(dǎo)航css代碼設(shè)置（2）修改整個(gè)導(dǎo)航的背景色，代碼如下：.skin-b