很多賣家在裝修自家店鋪的時候，不能隨意的在喜歡的圖片指定部位加上鏈接。如果你們想把自家的店鋪裝修出獨特的風味，鏈接想放哪兒就放哪兒，那么今天這個淘寶店鋪裝修自由添加圖片鏈接，和你不得不不說的故事！

淘寶店鋪裝修自由添加圖片鏈接第一部分用Photoshop切片成圖。

一、選圖

選擇好你要裝修店鋪所使用的圖，為了直接有效果，我使用的是我們親自設計的裝修圖片。由于我用的是店鋪直接裝修用的圖，放在尾頁部分的，所以尺寸為950長度。親們要事先選好圖片，做好哦。為了你的店鋪更美，圖片設計很重要哦。

二、打開Photoshop界面，把圖片放進去。

三、選擇切片工具，如下圖

切片工具在ps中具有非常強大的功能，甚至可以通過ps的切片工具來精確的做出網站，需要深入學習的可以了解下。這些之需要了解如何切片就行。

四、開始切片（分兩步說明）

1、選中切片工具后，會出現一把像鋼筆一樣的小刀形狀的圖標，用鼠標按住，在圖片上畫出你想要鏈接的部位。（簡單說明：運用方法和矩形選框工具一樣，選擇你想要的部分即可）

選中了后，右上角會出現數字，有01、02. 看下圖。藍色的小框你的01，是你選中的圖片的編號，剩下的02，是你切除選中的部分剩余圖片的編碼，這個是自動生成的，不用管。

2、一張圖，如果你需要有一個地方需要鏈接，就切一次，需要兩個地方鏈接，就要切兩次。例子中的圖，第一張的四月新，是需要鏈接的，所以切出了01編號的圖；“自由渡購物手冊”是我需要鏈接的第二個地方，所以再次選中后面一張圖，切下來。

看見最后一個紅圓圈了嗎，是和前面01一樣的藍色圖標，編號：03。意思就是這張圖被切下來了，編號是03.為什么會有兩個藍色，一個灰色的編號呢?

解釋說明：藍色圖標中的編號，代表的是你手工切下來的圖，灰色02圖標，就是兩張圖的中間圓圈部分，是你切除了整張圖后自動生成的編號，是剩余的圖片。

這樣整張圖就切割成了3張圖，其中有兩張是你想要鏈接的地方。 大家明白了嗎

五、保存格式（很重要）

點擊ps文件，選擇“存儲為Web所用格式”，一定要用這個保存，后面才會用的上，親們一定記得哦！

六，存儲。（一）注意事項：一是存儲的格式，在紅色方框的JPEG地方，根據你要的圖片格式來選擇，一般是用JPEG格式的圖。 二是品質問題，從0——100，任意選擇。品質越高，圖片越清晰，一般80到100即可，當然數值越高圖片占用空間越大。

（二）存儲格式

存儲的時候，保存在你想要保存的地方。我這里保存的地址是我設定的第一個話題文件夾里。文件名和保存類型自動生成，不用修改。 即使你不懂HTML，也沒有關系的。照樣點擊就像。

（三）意外提醒：如果出現下面這個對話框，沒有關系，照樣點擊確認即可。不要擔心任何問題哦！繼續(xù)前進！

七、保存建立文件夾

好了，圖片的切片部分就保存好了，保存出來的格式，就是我們平時看見的網頁格式HTML，另外還有一個專門儲存我切下來三張圖片的文件夾，名稱叫“images”，就是圖片的意思。這個也是自動生成的。不用怪異。

這個就是自動生成的“images”里的圖片，是和我上面在ps里切片的圖一樣的吧，而且會自動產生圖片名稱，按住順序來的。

在下圖這個地方大家就可以很清晰的看見我在上圖所切片的位置，0003_01 就是第一張四月新要鏈接的圖，藍色編碼為01；0003_02是ps自動為剩下的圖編碼，灰色02；0003_03是第三張“自由渡手冊”想鏈接的地方，所以切的是第三張圖。

八、上傳空間

把這三張圖上傳到淘寶圖片空間里，目的是獲取圖片的有效鏈接，這樣才能在制作完成后在淘寶店鋪中顯示。這個大家都熟悉的了，不多說了。

淘寶店鋪裝修自由添加圖片鏈第二部分：用Dearmweaver制作超鏈接，形成代碼!

九、打開Dreamweaver，創(chuàng)建新項目.點擊創(chuàng)建新項目下面的紅色框內HTML標記，這樣就新建了一個對話框。

十、打開網頁，點擊文件下的“打開”菜單，找到上面你保存的html格式的文件，直接打開就行。

十一、熟悉界面，找到源文件。最開始我在ps里切的三張圖，就到DW里面來了，而且尺寸和高度都是一樣的。 同時各位親們要注意我畫了三個紅色框，分別代表01圖、02圖和03圖。可以點擊試試看哦。在這張圖的下面，有一個紅框，大家注意了呢。 文字是"源文件",里面就是這個圖片在你的電腦里的地址。為了圖片在店鋪里顯示出圖片，我們的地址需要更換成空間里你上傳的圖片。

十二、返回到你的圖片空間里，復制圖片鏈接，獲取圖片地址

就像這樣的復制就行，裝修過店鋪的人都知道的，不清楚的看圖說話哦

十三、更改圖片地址，添加超鏈接

（一）、復制好圖片鏈接地址后，返回到Deramweaver頁面，找到源文件下面的鏈接的地方，選中空白框，直接復制進行即可。（圖一）

（二）當你把圖片地址換好了后，再次獲得你想鏈接的地址，比如你的店鋪首頁“http://******.taobao.com/”，復制這個地址，到源文件下面的鏈接的空白框里，這樣你的圖片和你的首頁關系就建立了。 我需要的是四月新品的總鏈接地址，所以找的是個人所需要的。（圖二）

圖一

復制進去了后，下面有一個目標空白框，選擇“blank”，意思就是當你點擊這個圖片獲得鏈接地址的時候，是在新的網頁打開你的首頁。

圖二

十四、第二個鏈接添加

根據以上步驟，再用同樣的方法獲得02和03的圖片地址，分別點擊選中DW中的源文件地址，修改過來。在這個步驟需要說明的是：02是空白的剩余圖，是我不需要點擊鏈接的地方。所以只是更換了空間地址，而不需要有圖片鏈接地址。由于最開始的時候圖片地址是本地電腦的地址，為了在店鋪中顯示，依然要在圖片空間中獲得0003_02圖片的地址，更換源文件。 這一點大家明白了吧。

我想要03圖片可以點擊鏈接到我的自由渡手冊的頁面，所以在更換了03圖片空間的地址以外，也要獲得自由渡手冊的店鋪頁面地址，放到源文件下面的 “鏈接”空白框里。 鏈接成功！以下示例根據圖片的順序來進行講解說明。

圖一：獲取03圖片的鏈接地址

圖二，找到源代碼

圖三：根據圖一獲得的圖片地址，更換圖二中紅色框“源代碼”地址，就完成了圖三（即本圖）中的鏈接地址更換

圖四：把你想要鏈接處的鏈接地址復制后粘貼在“鏈接”后面的框內，即紅色框內，圖片點擊鏈接成功

圖五：選擇鏈接下面的 目標為blank，即在新窗口打開網頁

十五、獲取代碼，復制。點擊圖片中的小紅色框“拆分”，拆分的意思，就是把圖片和代碼同時可以觀看。大紅色框的，就是圖片和鏈接形成的代碼。我們可以寫不出來，只要會用就行了。我現在也是只能用，不會寫。靠寫代碼來生成程序，太復雜了。 然后全選上面代碼層里所有的代碼，復制出來。

十六、進入店鋪后臺，復制源代碼。進入你的店鋪裝修后臺，新建一個模板，點擊源代碼的地方，把剛剛復制的代碼都放進去

再點擊源代碼的標簽，你做的圖片和鏈接，就到店鋪的后臺去了。到了這一步，你的店鋪裝修也就完成了2/3了，剩下的就是查看效果，修改效果了。點擊保存

十七、發(fā)布產品去吧，看看你的勞動成果

圖一

圖二

終于成功了，去查看我的店鋪去嘍！

在裝修店鋪的時候，自定義模板的主要意義，就是實現店家自己的意愿，發(fā)揮你的想象力和創(chuàng)造力吧，能給你店鋪帶來更多的裝修空間。

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

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

本文來源： 淘寶店鋪裝修自由添加圖片鏈接