很多賣(mài)家在裝修自家店鋪的時(shí)候，不能隨意的在喜歡的圖片指定部位加上鏈接。如果你們想把自家的店鋪裝修出獨(dú)特的風(fēng)味，鏈接想放哪兒就放哪兒，那么今天這個(gè)淘寶店鋪裝修自由添加圖片鏈接，和你不得不不說(shuō)的故事！
淘寶店鋪裝修自由添加圖片鏈接第一部分用Photoshop切片成圖。
一、選圖
選擇好你要裝修店鋪所使用的圖，為了直接有效果，我使用的是我們親自設(shè)計(jì)的裝修圖片。由于我用的是店鋪直接裝修用的圖，放在尾頁(yè)部分的，所以尺寸為950長(zhǎng)度。親們要事先選好圖片，做好哦。為了你的店鋪更美，圖片設(shè)計(jì)很重要哦。
二、打開(kāi)Photoshop界面，把圖片放進(jìn)去。
三、選擇切片工具，如下圖
切片工具在ps中具有非常強(qiáng)大的功能，甚至可以通過(guò)ps的切片工具來(lái)精確的做出網(wǎng)站，需要深入學(xué)習(xí)的可以了解下。這些之需要了解如何切片就行。
四、開(kāi)始切片（分兩步說(shuō)明）
1、選中切片工具后，會(huì)出現(xiàn)一把像鋼筆一樣的小刀形狀的圖標(biāo)，用鼠標(biāo)按住，在圖片上畫(huà)出你想要鏈接的部位。（簡(jiǎn)單說(shuō)明：運(yùn)用方法和矩形選框工具一樣，選擇你想要的部分即可）
選中了后，右上角會(huì)出現(xiàn)數(shù)字，有01、02. 看下圖。藍(lán)色的小框你的01，是你選中的圖片的編號(hào)，剩下的02，是你切除選中的部分剩余圖片的編碼，這個(gè)是自動(dòng)生成的，不用管。
2、一張圖，如果你需要有一個(gè)地方需要鏈接，就切一次，需要兩個(gè)地方鏈接，就要切兩次。例子中的圖，第一張的四月新，是需要鏈接的，所以切出了01編號(hào)的圖；“自由渡購(gòu)物手冊(cè)”是我需要鏈接的第二個(gè)地方，所以再次選中后面一張圖，切下來(lái)。
看見(jiàn)最后一個(gè)紅圓圈了嗎，是和前面01一樣的藍(lán)色圖標(biāo)，編號(hào)：03。意思就是這張圖被切下來(lái)了，編號(hào)是03.為什么會(huì)有兩個(gè)藍(lán)色，一個(gè)灰色的編號(hào)呢?
解釋說(shuō)明：藍(lán)色圖標(biāo)中的編號(hào)，代表的是你手工切下來(lái)的圖，灰色02圖標(biāo)，就是兩張圖的中間圓圈部分，是你切除了整張圖后自動(dòng)生成的編號(hào)，是剩余的圖片。
這樣整張圖就切割成了3張圖，其中有兩張是你想要鏈接的地方。 大家明白了嗎
五、保存格式（很重要）
點(diǎn)擊ps文件，選擇“存儲(chǔ)為Web所用格式”，一定要用這個(gè)保存，后面才會(huì)用的上，親們一定記得哦！
六，存儲(chǔ)。（一）注意事項(xiàng)：一是存儲(chǔ)的格式，在紅色方框的JPEG地方，根據(jù)你要的圖片格式來(lái)選擇，一般是用JPEG格式的圖。 二是品質(zhì)問(wèn)題，從0——100，任意選擇。品質(zhì)越高，圖片越清晰，一般80到100即可，當(dāng)然數(shù)值越高圖片占用空間越大。
（二）存儲(chǔ)格式
存儲(chǔ)的時(shí)候，保存在你想要保存的地方。我這里保存的地址是我設(shè)定的第一個(gè)話(huà)題文件夾里。文件名和保存類(lèi)型自動(dòng)生成，不用修改。 即使你不懂HTML，也沒(méi)有關(guān)系的。照樣點(diǎn)擊就像。
（三）意外提醒：如果出現(xiàn)下面這個(gè)對(duì)話(huà)框，沒(méi)有關(guān)系，照樣點(diǎn)擊確認(rèn)即可。不要擔(dān)心任何問(wèn)題哦！繼續(xù)前進(jìn)！
七、保存建立文件夾
好了，圖片的切片部分就保存好了，保存出來(lái)的格式，就是我們平時(shí)看見(jiàn)的網(wǎng)頁(yè)格式HTML，另外還有一個(gè)專(zhuān)門(mén)儲(chǔ)存我切下來(lái)三張圖片的文件夾，名稱(chēng)叫“images”，就是圖片的意思。這個(gè)也是自動(dòng)生成的。不用怪異。
這個(gè)就是自動(dòng)生成的“images”里的圖片，是和我上面在ps里切片的圖一樣的吧，而且會(huì)自動(dòng)產(chǎn)生圖片名稱(chēng)，按住順序來(lái)的。
在下圖這個(gè)地方大家就可以很清晰的看見(jiàn)我在上圖所切片的位置，0003_01 就是第一張四月新要鏈接的圖，藍(lán)色編碼為01；0003_02是ps自動(dòng)為剩下的圖編碼，灰色02；0003_03是第三張“自由渡手冊(cè)”想鏈接的地方，所以切的是第三張圖。
八、上傳空間
把這三張圖上傳到淘寶圖片空間里，目的是獲取圖片的有效鏈接，這樣才能在制作完成后在淘寶店鋪中顯示。這個(gè)大家都熟悉的了，不多說(shuō)了。
淘寶店鋪裝修自由添加圖片鏈第二部分：用Dearmweaver制作超鏈接，形成代碼!
九、打開(kāi)Dreamweaver，創(chuàng)建新項(xiàng)目.點(diǎn)擊創(chuàng)建新項(xiàng)目下面的紅色框內(nèi)HTML標(biāo)記，這樣就新建了一個(gè)對(duì)話(huà)框。
十、打開(kāi)網(wǎng)頁(yè)，點(diǎn)擊文件下的“打開(kāi)”菜單，找到上面你保存的html格式的文件，直接打開(kāi)就行。
十一、熟悉界面，找到源文件。最開(kāi)始我在ps里切的三張圖，就到DW里面來(lái)了，而且尺寸和高度都是一樣的。 同時(shí)各位親們要注意我畫(huà)了三個(gè)紅色框，分別代表01圖、02圖和03圖?？梢渣c(diǎn)擊試試看哦。在這張圖的下面，有一個(gè)紅框，大家注意了呢。 文字是"源文件",里面就是這個(gè)圖片在你的電腦里的地址。為了圖片在店鋪里顯示出圖片，我們的地址需要更換成空間里你上傳的圖片。
十二、返回到你的圖片空間里，復(fù)制圖片鏈接，獲取圖片地址
就像這樣的復(fù)制就行，裝修過(guò)店鋪的人都知道的，不清楚的看圖說(shuō)話(huà)哦
十三、更改圖片地址，添加超鏈接
（一）、復(fù)制好圖片鏈接地址后，返回到Deramweaver頁(yè)面，找到源文件下面的鏈接的地方，選中空白框，直接復(fù)制進(jìn)行即可。（圖一）
（二）當(dāng)你把圖片地址換好了后，再次獲得你想鏈接的地址，比如你的店鋪首頁(yè)“http://******.taobao.com/”，復(fù)制這個(gè)地址，到源文件下面的鏈接的空白框里，這樣你的圖片和你的首頁(yè)關(guān)系就建立了。 我需要的是四月新品的總鏈接地址，所以找的是個(gè)人所需要的。（圖二）
圖一
復(fù)制進(jìn)去了后，下面有一個(gè)目標(biāo)空白框，選擇“blank”，意思就是當(dāng)你點(diǎn)擊這個(gè)圖片獲得鏈接地址的時(shí)候，是在新的網(wǎng)頁(yè)打開(kāi)你的首頁(yè)。
圖二
十四、第二個(gè)鏈接添加
根據(jù)以上步驟，再用同樣的方法獲得02和03的圖片地址，分別點(diǎn)擊選中DW中的源文件地址，修改過(guò)來(lái)。在這個(gè)步驟需要說(shuō)明的是：02是空白的剩余圖，是我不需要點(diǎn)擊鏈接的地方。所以只是更換了空間地址，而不需要有圖片鏈接地址。由于最開(kāi)始的時(shí)候圖片地址是本地電腦的地址，為了在店鋪中顯示，依然要在圖片空間中獲得0003_02圖片的地址，更換源文件。 這一點(diǎn)大家明白了吧。
我想要03圖片可以點(diǎn)擊鏈接到我的自由渡手冊(cè)的頁(yè)面，所以在更換了03圖片空間的地址以外，也要獲得自由渡手冊(cè)的店鋪?lái)?yè)面地址，放到源文件下面的 “鏈接”空白框里。 鏈接成功！以下示例根據(jù)圖片的順序來(lái)進(jìn)行講解說(shuō)明。
圖一：獲取03圖片的鏈接地址
圖二，找到源代碼
圖三：根據(jù)圖一獲得的圖片地址，更換圖二中紅色框“源代碼”地址，就完成了圖三（即本圖）中的鏈接地址更換
圖四：把你想要鏈接處的鏈接地址復(fù)制后粘貼在“鏈接”后面的框內(nèi)，即紅色框內(nèi)，圖片點(diǎn)擊鏈接成功
圖五：選擇鏈接下面的 目標(biāo)為blank，即在新窗口打開(kāi)網(wǎng)頁(yè)
十五、獲取代碼，復(fù)制。點(diǎn)擊圖片中的小紅色框“拆分”，拆分的意思，就是把圖片和代碼同時(shí)可以觀看。大紅色框的，就是圖片和鏈接形成的代碼。我們可以寫(xiě)不出來(lái)，只要會(huì)用就行了。我現(xiàn)在也是只能用，不會(huì)寫(xiě)?？繉?xiě)代碼來(lái)生成程序，太復(fù)雜了。 然后全選上面代碼層里所有的代碼，復(fù)制出來(lái)。
十六、進(jìn)入店鋪后臺(tái)，復(fù)制源代碼。進(jìn)入你的店鋪裝修后臺(tái)，新建一個(gè)模板，點(diǎn)擊源代碼的地方，把剛剛復(fù)制的代碼都放進(jìn)去
再點(diǎn)擊源代碼的標(biāo)簽，你做的圖片和鏈接，就到店鋪的后臺(tái)去了。到了這一步，你的店鋪裝修也就完成了2/3了，剩下的就是查看效果，修改效果了。點(diǎn)擊保存
十七、發(fā)布產(chǎn)品去吧，看看你的勞動(dòng)成果
圖一
圖二
終于成功了，去查看我的店鋪去嘍！
在裝修店鋪的時(shí)候，自定義模板的主要意義，就是實(shí)現(xiàn)店家自己的意愿，發(fā)揮你的想象力和創(chuàng)造力吧，能給你店鋪帶來(lái)更多的裝修空間。
樂(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)源： 淘寶店鋪裝修自由添加圖片鏈接
