電商設(shè)計(jì)第五式-實(shí)戰(zhàn)篇（品牌店鋪后臺(tái)代碼裝修實(shí)操）
時(shí)間：2022-08-03 05:45:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2022-08-03 05:45:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)
大伙們的DW準(zhǔn)備好了么？這一式池子要給你們放實(shí)操大招。用最少操作步驟帶來(lái)最優(yōu)效果的方式，小板凳坐好，小本本拿好，操練起來(lái)。
前面的理論講解一個(gè)頁(yè)面制作出來(lái)后，實(shí)際想要上到店鋪后臺(tái)實(shí)現(xiàn)使用效果，就要使用代碼工具，一般都使用DW，或者醉語(yǔ)言，六月設(shè)計(jì)等相關(guān)代碼裝修工具，我這里就講最基礎(chǔ)的使用工具，其余工具原理一模一樣，很多人看到代碼都頭疼，其實(shí)簡(jiǎn)直不要太簡(jiǎn)單，因?yàn)殡娚痰赇伌a不用自己去寫(xiě)，基本都有現(xiàn)成的代碼直接套用，只要記住粘貼復(fù)制的位置就行。這么一說(shuō)，你還害怕么？
使用代碼工具之前，需要先熟悉天貓官方裝修配套的【圖片空間】，自己設(shè)計(jì)保存好的頁(yè)面圖片通常都是直接上傳到這里來(lái)的，才會(huì)有圖片鏈接和代碼生成，有了鏈接和代碼后，才能使用接下來(lái)要講解的DW，老規(guī)矩，上圖?。?！
看圖片位置，點(diǎn)擊進(jìn)入就可以了。
出現(xiàn)圖片空間界面了，
上傳圖片到圖片空間，這個(gè)步驟玩過(guò)QQ空間相冊(cè)的人都知道。（是不是暴露年齡了？嘿嘿嘿）
等到圖片上傳完成后，每個(gè)圖片底下會(huì)有如圖所示的標(biāo)示，選擇你要做鏈接效果的圖片，點(diǎn)擊第三個(gè)按鈕（復(fù)制代碼）就可以有復(fù)制到的代碼到DW里了（任何圖片都是這個(gè)原則，
一定要記清楚）
打開(kāi)DW，出現(xiàn)如下界面，鼠標(biāo)雙擊新建HTML
會(huì)看到以下界面，剛才是不是在圖片空間里頭已經(jīng)點(diǎn)擊復(fù)制代碼按鈕了？那么現(xiàn)在請(qǐng)粘貼到如圖所示的位置（一般我們?cè)趶?fù)制粘貼代碼的時(shí)候直接放在<body>后面就可以了）
池子這里復(fù)制了一段第三方全屏代碼，仔細(xì)看我復(fù)制到的位置，
如果不想記位置的，還有一個(gè)簡(jiǎn)單粗暴的方式，直接全選新建HTML模板里頭的所有代碼，然后刪除，在空白的模板里頭直接粘貼復(fù)制自己要做的第三方代碼就行。
代碼復(fù)制進(jìn)來(lái)后，我們要開(kāi)始進(jìn)行編輯，繼續(xù)看，點(diǎn)擊途中紅框【設(shè)計(jì)】位置，
就會(huì)看到此界面，看截圖紅框位置顯示有【地圖】【鏈接】【目標(biāo)】以及底下的黑箭頭鼠標(biāo)，咱們一個(gè)個(gè)講解，
第一步【黑箭頭】
這個(gè)就是點(diǎn)選熱點(diǎn)區(qū)域的（熱點(diǎn)區(qū)域就是專(zhuān)門(mén)用來(lái)做鏈接的，最終的展示效果就是你用鼠標(biāo)點(diǎn)擊畫(huà)面，就會(huì)有新的頁(yè)面跳出來(lái)），右邊還有矩形 圓形 異形之類(lèi)的圖案，就是畫(huà)熱點(diǎn)選區(qū)使用的，根據(jù)設(shè)計(jì)的頁(yè)面內(nèi)容來(lái)看，最常用的就是矩形和圓形啦，鼠標(biāo)隨便點(diǎn)擊一個(gè)形狀選區(qū)，然后在畫(huà)面中央拖動(dòng)畫(huà)你想要做的點(diǎn)擊區(qū)域，然后松開(kāi)鼠標(biāo)，畫(huà)面就會(huì)出現(xiàn)
點(diǎn)擊確定，那么你想要做的一個(gè)熱點(diǎn)選區(qū)就做好了，
第二步【地圖】
開(kāi)始建立地圖名稱(chēng)，默認(rèn)的名稱(chēng)會(huì)導(dǎo)致熱區(qū)做好放入頁(yè)面裝修模板里頭鼠標(biāo)點(diǎn)擊后彈出的頁(yè)面都是紊亂或者點(diǎn)擊沒(méi)反應(yīng)的現(xiàn)象，所以地圖名稱(chēng)一定要固定使用，相當(dāng)于給鏈接做個(gè)固定標(biāo)簽，名稱(chēng)命名原則一般都是單個(gè)字母+任意數(shù)字的組合就行了，看圖中示意。
第三步【鏈接】
可以添加你想要讓這個(gè)鼠標(biāo)點(diǎn)擊后蹦出的新畫(huà)面鏈接，添加的位置在此，直接粘貼復(fù)制你想要添加的頁(yè)面鏈接到這里就行了，記住一定要把默認(rèn)的#字刪除
第四步，【目標(biāo)】
常用的直接選取_blank就行了，這個(gè)代表點(diǎn)擊頁(yè)面后，會(huì)有彈出新窗口的效果，其余的效果使用較少，所以一般不做太多考慮。
完成以上4步后，一個(gè)完整的頁(yè)面鏈接就做好了，這個(gè)時(shí)候回到【代碼】界面中去把所有做好的代碼復(fù)制，如圖，
畫(huà)紅框的就是需要復(fù)制的部分了，記住從<body>這一行的位置開(kāi)始選取復(fù)制
然后把復(fù)制的所有代碼粘貼到店鋪后臺(tái)【自定義區(qū)域】模塊就可以了 （還記得么？）
就是這個(gè)界面，復(fù)制進(jìn)去后點(diǎn)擊確定，
一個(gè)完整的頁(yè)面鏈接就做好了
然后點(diǎn)擊【預(yù)覽】,用鼠標(biāo)點(diǎn)擊下是否鏈接出現(xiàn)錯(cuò)誤，最后點(diǎn)擊發(fā)布站點(diǎn)就完成了。
以上，便是店鋪PC端后臺(tái)基礎(chǔ)裝修的所有流程，有些同學(xué)可能就會(huì)疑問(wèn)了，手機(jī)端的裝修流程呢？那個(gè)實(shí)在是太過(guò)簡(jiǎn)單，就跟玩QQ空間一樣，對(duì)后臺(tái)不熟悉的小伙伴們，請(qǐng)往回看上一篇，手機(jī)端裝修的入口界面就在里頭，然后讓你們的老板一定要記得買(mǎi)“美切智能模塊”，這樣可以省去不少設(shè)計(jì)上的麻煩，現(xiàn)在基本每個(gè)店鋪必備，（我前幾個(gè)月接一店鋪的時(shí)候居然發(fā)現(xiàn)店鋪老板沒(méi)有買(mǎi)這個(gè)模塊，都9012了……）
熟練掌握好，爭(zhēng)做老板的一塊寶，哈哈。心動(dòng)的趕緊操練吧。
接下來(lái)的招式也會(huì)逐步加大難度， 池子會(huì)加快進(jìn)程更新。最近有不少私信池子的童鞋們，其中有直接跟池子要設(shè)計(jì)教程的，池子要明確說(shuō)明一下，池子這里是解答設(shè)計(jì)疑難雜癥共同交流的地方，你沒(méi)有說(shuō)明自己的設(shè)計(jì)疑問(wèn)，就直接要教學(xué)教程，好比病人沒(méi)有說(shuō)明自己生的啥病就跟醫(yī)生直接要藥方一樣的性質(zhì)，池子是不會(huì)直接給的，怕你自己練習(xí)的走火入魔。要的話(huà)請(qǐng)各位明確說(shuō)明自己現(xiàn)有的疑問(wèn)和實(shí)際水平，池子肯定熱心解答。
還有任何后臺(tái)裝修疑問(wèn)的，也可以直接私信池子，本站一般都看。
關(guān)鍵詞：后臺(tái),店鋪,裝修,設(shè)計(jì),實(shí)戰(zhàn)
在線(xiàn)咨詢(xún)