當(dāng)前位置:首頁 >  電商 >  電商新聞 >  正文

淘寶店鋪裝修系列課程切片工具的綜合使用

 2014-02-13 15:17  來源: 用戶投稿   我來投稿 撤稿糾錯

  域名預(yù)訂/競價,好“米”不錯過

之前我們已經(jīng)接觸過了簡單切片和《淘寶店鋪裝修系列課程復(fù)雜切片的使用》,希望大家多加練習(xí),這個內(nèi)容是為以后的店鋪裝修打下堅實的基礎(chǔ)。今天來做的案例是店鋪裝修切片工具、熱點工具的綜合使用。如圖

工具/原料

Adobe Photoshop CC

Adobe Dreamweaver CS6

方法/步驟

1、像這樣的圖片,在學(xué)過之前的切片熱點后,難點只有安裝阿里旺旺這一個了,因為我們要保證在線狀態(tài)旺旺是亮色,離線狀態(tài)是灰色狀態(tài)。

所以本文上半部分不講,不會的同學(xué)請百度經(jīng)驗檢索《 淘寶店鋪裝修系列課程》中熱點及簡單切片的使用,下面直接操作,旺旺在線位置

2、劃參考線,把阿里旺旺在線圖標(biāo)的區(qū)域框選出來,如圖所示

3、去掉圖中所有阿里旺旺圖標(biāo),并且保留該圖片,Background,如圖所示

4、切換到切片工具,基于參考線的切片,會把他們?nèi)壳懈铋_,如圖所示

5、儲存為web所用格式,保存,僅存html文件,如何僅存html文件之前說過,全部保存也可以,用到的只有html文件,需要里面的表格

6、使用Dreamweaver打開保存的html文件,進入到設(shè)計模式下,會發(fā)現(xiàn)所有圖片全部是裂開狀態(tài),原因是因為剛剛沒有保存圖片文件,挨個點擊圖片,刪除,如圖

7、開始添加步驟2保存的無旺旺的背景圖,回到代碼模式下,在第一個table標(biāo)簽最后邊,敲下空格鍵,輸入background,如圖位置

8、在你沒有敲完代碼的時候,他就會自動出現(xiàn)background了,敲回車,又是插入圖片的頁面,之前見過,URL位置,輸入步驟2中保存圖片的網(wǎng)絡(luò)地址。

插入完成后回到設(shè)計模式下效果如圖

9、開始添加阿里旺旺圖標(biāo),使用淘寶提供的旺遍天下或者其他輔助軟件都可以,本例使用輔助軟件獲取代碼,軟件很簡單,一看就明白,輸入ID生成代碼后復(fù)制,如圖所示:

把這段代碼,復(fù)制到剪貼板,Ctrl+C。

10、點擊拆分模式,在右側(cè)點擊該盛放圖標(biāo)的位置,然后查看左側(cè)代碼,找到光標(biāo)位置,把原有代碼 刪掉,替換廣告復(fù)制的代碼,如圖

11、替換過后,查看設(shè)計模式,圖標(biāo)已經(jīng)上去了,測試使用的US淘寶學(xué)院ID,未登錄狀態(tài),所以是灰色圖標(biāo)顯示,如圖

12、接下來還是復(fù)制到之間的所有代碼,到自定義內(nèi)容區(qū),這一個案例就又已經(jīng)完成了,經(jīng)過前幾次課的實例演示,相信大家對切片已經(jīng)有了很深的認識,相信細心的學(xué)員,應(yīng)該已經(jīng)注意到table標(biāo)簽了,接下來請大家在看一下《淘寶店鋪裝修系列課程之表格的嵌套使用》以便更為深入的了解表格的使用。

申請創(chuàng)業(yè)報道,分享創(chuàng)業(yè)好點子。點擊此處,共同探討創(chuàng)業(yè)新機遇!

相關(guān)文章

熱門排行

信息推薦