上期講到促銷欄的制作,提到準(zhǔn)備把客服區(qū)改到左側(cè)。那我們就開(kāi)始做客服區(qū)吧!為了有拓展版的效果,在尺寸上和右側(cè)的促銷欄要統(tǒng)一。
打開(kāi)ps新建圖層190*410
調(diào)處標(biāo)尺線,把圖層分為上270 下140.
用文字工具寫(xiě)上‘客服中心service’ 和‘請(qǐng)按功能點(diǎn)擊以下亮燈客服’。注意這里的字體和促銷欄保持一致
寫(xiě)好文字,同樣用混合選項(xiàng)做投影。右鍵點(diǎn)擊相應(yīng)的文字圖層,在彈出的選項(xiàng)框了點(diǎn)混合選項(xiàng)
做好投影及其他相關(guān)選項(xiàng)后,點(diǎn)擊“好”
再用矩形工具選個(gè)矩形框,并填上營(yíng)業(yè)時(shí)間
下面我們?cè)俚骄W(wǎng)上搜索個(gè)關(guān)于“熱賣”的圖片并把他拖拽到我們需要制作的圖片里,再寫(xiě)上熱賣字樣
也按上面的方法做混合選項(xiàng),同時(shí)也給上半部分描邊。這樣是為了給人感覺(jué)這不是在一個(gè)圖層里,更多的是為了能和右側(cè)的自定義模塊融為一體
好了,我們下一步就進(jìn)入切片。就選定我們需要在里面輸入信息的(也就是下面的切片3)其他的就由它自動(dòng)生成,這里一共有5個(gè)切片
儲(chǔ)存為web所用格式,
存儲(chǔ)好后得到一個(gè)文件夾和html文件
打開(kāi)DW
文件-打開(kāi)
選擇拆分
接下來(lái)我們上傳這個(gè)文件夾里的所有切片到圖片空間里
選擇全選-上傳
上傳好后不要關(guān)閉,小化。因?yàn)榻酉聛?lái)我們要用到這5個(gè)圖片的網(wǎng)絡(luò)地址
雙擊DW中的圖片區(qū)域的切片1
彈出下面這個(gè)界面
在圖片空間里找到對(duì)應(yīng)切片的地址,填到URL地址欄并覆蓋原有的地址
覆蓋后點(diǎn)確定。同樣的方法換掉所有切片,這里有5個(gè)。上期也講到怎么樣尋找對(duì)應(yīng)的切片,這里就不多說(shuō)了
5個(gè)切片都更換完成后,再單擊這里。DW代碼區(qū)相應(yīng)的地址會(huì)藍(lán)底顯示,此時(shí)再單擊藍(lán)底代碼前的<td>
點(diǎn)住td后DW的底部會(huì)彈出以下這個(gè)界面
此時(shí)需注意上面的3個(gè)紅圈,填入寬和高 還有背景地址,這個(gè)背景地址就是這個(gè)切片的網(wǎng)絡(luò)地址
填好后需要再次單擊這個(gè)切片,并刪除這個(gè)切片
現(xiàn)在代碼區(qū)就變成這樣顯示
換好后,這個(gè)區(qū)域就成虛線框了。我們就可以在里面輸入文字或圖片
這里我們就要插入旺旺的頭像了,怎么獲得呢?
首先打開(kāi)淘寶網(wǎng)首頁(yè)
在淘寶首頁(yè)的左側(cè)會(huì)有這樣一個(gè)頁(yè)面,點(diǎn)擊‘阿里旺旺’
單擊它選擇‘賣家專用版’
選旺遍天下
在紅圈里輸入你的賬號(hào)名再點(diǎn)生成網(wǎng)頁(yè)代碼
這樣我們就獲得旺旺的頭像和“和我聯(lián)系”的代碼,下面我們繼續(xù)
點(diǎn)擊插入的下拉菜單中的‘圖像’
把URL地址改成剛才在旺遍天下獲得的圖片地址,點(diǎn)擊確定
確定后就自動(dòng)生成啦
同樣的方法做多個(gè)旺旺頭像
單擊和我聯(lián)系圖片,底下會(huì)出現(xiàn)個(gè)鏈接框,在里面填上在旺遍天下獲得的另一個(gè)代碼
填好所有E客服的頭像和鏈接后,這就算完成了。 關(guān)閉DW,在提示里選‘是’
用記事本的方式打開(kāi)全部復(fù)制下來(lái)。
店鋪裝修-左側(cè)添加自定義模塊-編輯-選html-粘貼-保存-發(fā)布
大功告成
展示下綜合效果
樂(lè)發(fā)網(wǎng)超市批發(fā)網(wǎng)提供超市貨源信息,超市采購(gòu)進(jìn)貨渠道。超市進(jìn)貨網(wǎng)提供成都食品批發(fā),日用百貨批發(fā)信息、微信淘寶網(wǎng)店超市采購(gòu)信息和超市加盟信息.打造國(guó)內(nèi)超市采購(gòu)商與批發(fā)市場(chǎng)供應(yīng)廠商搭建網(wǎng)上批發(fā)市場(chǎng)平臺(tái),是全國(guó)批發(fā)市場(chǎng)行業(yè)中電子商務(wù)權(quán)威性網(wǎng)站。
本文內(nèi)容整合網(wǎng)站:百度百科、知乎、淘寶平臺(tái)規(guī)則
本文來(lái)源: 圖解教程教你淘寶店鋪?zhàn)髠?cè)客服模塊代碼