上期講到促銷欄的制作,提到準(zhǔn)備把客服區(qū)改到左側(cè)。那我們就開始做客服區(qū)吧!為了有拓展版的效果,在尺寸上和右側(cè)的促銷欄要統(tǒng)一。
打開ps新建圖層190*410

調(diào)處標(biāo)尺線,把圖層分為上270 下140.
用文字工具寫上‘客服中心service’ 和‘請按功能點擊以下亮燈客服’。注意這里的字體和促銷欄保持一致

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


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

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

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

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

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

儲存為web所用格式,



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

打開DW

文件-打開

選擇拆分

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

上傳好后不要關(guān)閉,小化。因為接下來我們要用到這5個圖片的網(wǎng)絡(luò)地址
雙擊DW中的圖片區(qū)域的切片1

彈出下面這個界面

在圖片空間里找到對應(yīng)切片的地址,填到URL地址欄并覆蓋原有的地址


覆蓋后點確定。同樣的方法換掉所有切片,這里有5個。上期也講到怎么樣尋找對應(yīng)的切片,這里就不多說了
5個切片都更換完成后,再單擊這里。DW代碼區(qū)相應(yīng)的地址會藍(lán)底顯示,此時再單擊藍(lán)底代碼前的<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,在提示里選‘是’
用記事本的方式打開
全部復(fù)制下來。
店鋪裝修-左側(cè)添加自定義模塊-編輯-選html-粘貼-保存-發(fā)布
大功告成
展示下綜合效果

樂發(fā)網(wǎng)超市批發(fā)網(wǎng)提供超市貨源信息,超市采購進(jìn)貨渠道。超市進(jìn)貨網(wǎng)提供成都食品批發(fā),日用百貨批發(fā)信息、微信淘寶網(wǎng)店超市采購信息和超市加盟信息.打造國內(nèi)超市采購商與批發(fā)市場供應(yīng)廠商搭建網(wǎng)上批發(fā)市場平臺,是全國批發(fā)市場行業(yè)中電子商務(wù)權(quán)威性網(wǎng)站。
本文內(nèi)容整合網(wǎng)站:百度百科、知乎、淘寶平臺規(guī)則
本文來源: 圖解教程教你淘寶店鋪左側(cè)客服模塊代碼




