之前我們已經(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、劃參考線，把阿里旺旺在線圖標的區(qū)域框選出來，如圖所示
3、去掉圖中所有阿里旺旺圖標，并且保留該圖片，Background，如圖所示
4、切換到切片工具，基于參考線的切片，會把他們?nèi)壳懈铋_，如圖所示
5、儲存為web所用格式，保存，僅存html文件，如何僅存html文件之前說過，全部保存也可以，用到的只有html文件，需要里面的表格
6、使用Dreamweaver打開保存的html文件，進入到設(shè)計模式下，會發(fā)現(xiàn)所有圖片全部是裂開狀態(tài)，原因是因為剛剛沒有保存圖片文件，挨個點擊圖片，刪除，如圖
7、開始添加步驟2保存的無旺旺的背景圖，回到代碼模式下，在第一個table標簽最后邊，敲下空格鍵，輸入background，如圖位置
8、在你沒有敲完代碼的時候，他就會自動出現(xiàn)background了，敲回車，又是插入圖片的頁面，之前見過，URL位置，輸入步驟2中保存圖片的網(wǎng)絡(luò)地址。
插入完成后回到設(shè)計模式下效果如圖
9、開始添加阿里旺旺圖標，使用淘寶提供的旺遍天下或者其他輔助軟件都可以，本例使用輔助軟件獲取代碼，軟件很簡單，一看就明白，輸入ID生成代碼后復(fù)制，如圖所示：
把這段代碼，復(fù)制到剪貼板，Ctrl+C。
10、點擊拆分模式，在右側(cè)點擊該盛放圖標的位置，然后查看左側(cè)代碼，找到光標位置，把原有代碼 刪掉，替換廣告復(fù)制的代碼，如圖
11、替換過后，查看設(shè)計模式，圖標已經(jīng)上去了，測試使用的US淘寶學(xué)院ID，未登錄狀態(tài)，所以是灰色圖標顯示，如圖
12、接下來還是復(fù)制到之間的所有代碼，到自定義內(nèi)容區(qū)，這一個案例就又已經(jīng)完成了，經(jīng)過前幾次課的實例演示，相信大家對切片已經(jīng)有了很深的認識，相信細心的學(xué)員，應(yīng)該已經(jīng)注意到table標簽了，接下來請大家在看一下《淘寶店鋪裝修系列課程之表格的嵌套使用》以便更為深入的了解表格的使用。
申請創(chuàng)業(yè)報道，分享創(chuàng)業(yè)好點子。點擊此處，共同探討創(chuàng)業(yè)新機遇！
