上期講到促銷欄的制作，提到準備把客服區(qū)改到左側(cè)。那我們就開始做客服區(qū)吧！為了有拓展版的效果，在尺寸上和右側(cè)的促銷欄要統(tǒng)一。

打開ps新建圖層190*410

調(diào)處標尺線，把圖層分為上270 下140.

用文字工具寫上‘客服中心service’ 和‘請按功能點擊以下亮燈客服’。注意這里的字體和促銷欄保持一致

寫好文字，同樣用混合選項做投影。右鍵點擊相應的文字圖層，在彈出的選項框了點混合選項

做好投影及其他相關(guān)選項后，點擊“好”

再用矩形工具選個矩形框，并填上營業(yè)時間

下面我們再到網(wǎng)上搜索個關(guān)于“熱賣”的圖片并把他拖拽到我們需要制作的圖片里，再寫上熱賣字樣

也按上面的方法做混合選項，同時也給上半部分描邊。這樣是為了給人感覺這不是在一個圖層里，更多的是為了能和右側(cè)的自定義模塊融為一體

好了，我們下一步就進入切片。就選定我們需要在里面輸入信息的（也就是下面的切片3）其他的就由它自動生成，這里一共有5個切片

儲存為web所用格式，

存儲好后得到一個文件夾和html文件

打開DW

文件-打開

選擇拆分

接下來我們上傳這個文件夾里的所有切片到圖片空間里

選擇全選-上傳

上傳好后不要關(guān)閉，小化。因為接下來我們要用到這5個圖片的網(wǎng)絡(luò)地址

雙擊DW中的圖片區(qū)域的切片1

彈出下面這個界面

在圖片空間里找到對應切片的地址，填到URL地址欄并覆蓋原有的地址

覆蓋后點確定。同樣的方法換掉所有切片，這里有5個。上期也講到怎么樣尋找對應的切片，這里就不多說了

5個切片都更換完成后，再單擊這里。DW代碼區(qū)相應的地址會藍底顯示，此時再單擊藍底代碼前的<td>

點住td后DW的底部會彈出以下這個界面

此時需注意上面的3個紅圈，填入寬和高 還有背景地址，這個背景地址就是這個切片的網(wǎng)絡(luò)地址

填好后需要再次單擊這個切片，并刪除這個切片

現(xiàn)在代碼區(qū)就變成這樣顯示

換好后，這個區(qū)域就成虛線框了。我們就可以在里面輸入文字或圖片

這里我們就要插入旺旺的頭像了，怎么獲得呢？

首先打開淘寶網(wǎng)首頁

在淘寶首頁的左側(cè)會有這樣一個頁面，點擊‘阿里旺旺’

單擊它選擇‘賣家專用版’

選旺遍天下

在紅圈里輸入你的賬號名再點生成網(wǎng)頁代碼

這樣我們就獲得旺旺的頭像和“和我聯(lián)系”的代碼，下面我們繼續(xù)

點擊插入的下拉菜單中的‘圖像’

把URL地址改成剛才在旺遍天下獲得的圖片地址，點擊確定

確定后就自動生成啦

同樣的方法做多個旺旺頭像

單擊和我聯(lián)系圖片，底下會出現(xiàn)個鏈接框，在里面填上在旺遍天下獲得的另一個代碼

填好所有E客服的頭像和鏈接后，這就算完成了。 關(guān)閉DW，在提示里選‘是’

用記事本的方式打開全部復制下來。

店鋪裝修-左側(cè)添加自定義模塊-編輯-選html-粘貼-保存-發(fā)布

大功告成

展示下綜合效果

樂發(fā)網(wǎng)超市批發(fā)網(wǎng)提供超市貨源信息,超市采購進貨渠道。超市進貨網(wǎng)提供成都食品批發(fā),日用百貨批發(fā)信息、微信淘寶網(wǎng)店超市采購信息和超市加盟信息.打造國內(nèi)超市采購商與批發(fā)市場供應廠商搭建網(wǎng)上批發(fā)市場平臺,是全國批發(fā)市場行業(yè)中電子商務(wù)權(quán)威性網(wǎng)站。

本文內(nèi)容整合網(wǎng)站：百度百科、知乎、淘寶平臺規(guī)則

本文來源： 圖解教程教你淘寶店鋪左側(cè)客服模塊代碼