很多賣家在裝修自家店鋪的時候,不能隨意的在喜歡的圖片指定部位加上鏈接。如果你們想把自家的店鋪裝修出獨特的風味,鏈接想放哪兒就放哪兒,那么今天這個淘寶店鋪裝修自由添加圖片鏈接,和你不得不不說的故事!
淘寶店鋪裝修自由添加圖片鏈接第一部分用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,也沒有關系的。照樣點擊就像。
(三)意外提醒:如果出現下面這個對話框,沒有關系,照樣點擊確認即可。不要擔心任何問題哦!繼續前進!
七、保存建立文件夾
好了,圖片的切片部分就保存好了,保存出來的格式,就是我們平時看見的網頁格式HTML,另外還有一個專門儲存我切下來三張圖片的文件夾,名稱叫“images”,就是圖片的意思。這個也是自動生成的。不用怪異。
這個就是自動生成的“images”里的圖片,是和我上面在ps里切片的圖一樣的吧,而且會自動產生圖片名稱,按住順序來的。
在下圖這個地方大家就可以很清晰的看見我在上圖所切片的位置,0003_01 就是第一張四月新要鏈接的圖,藍色編碼為01;0003_02是ps自動為剩下的圖編碼,灰色02;0003_03是第三張“自由渡手冊”想鏈接的地方,所以切的是第三張圖。
八、上傳空間
把這三張圖上傳到淘寶圖片空間里,目的是獲取圖片的有效鏈接,這樣才能在制作完成后在淘寶店鋪中顯示。這個大家都熟悉的了,不多說了。
淘寶店鋪裝修自由添加圖片鏈第二部分:用Dearmweaver制作超鏈接,形成代碼!
九、打開Dreamweaver,創建新項目.點擊創建新項目下面的紅色框內HTML標記,這樣就新建了一個對話框。
十、打開網頁,點擊文件下的“打開”菜單,找到上面你保存的html格式的文件,直接打開就行。
十一、熟悉界面,找到源文件。最開始我在ps里切的三張圖,就到DW里面來了,而且尺寸和高度都是一樣的。 同時各位親們要注意我畫了三個紅色框,分別代表01圖、02圖和03圖。可以點擊試試看哦。在這張圖的下面,有一個紅框,大家注意了呢。 文字是"源文件",里面就是這個圖片在你的電腦里的地址。為了圖片在店鋪里顯示出圖片,我們的地址需要更換成空間里你上傳的圖片。
十二、返回到你的圖片空間里,復制圖片鏈接,獲取圖片地址
就像這樣的復制就行,裝修過店鋪的人都知道的,不清楚的看圖說話哦
十三、更改圖片地址,添加超鏈接
(一)、復制好圖片鏈接地址后,返回到Deramweaver頁面,找到源文件下面的鏈接的地方,選中空白框,直接復制進行即可。(圖一)
(二)當你把圖片地址換好了后,再次獲得你想鏈接的地址,比如你的店鋪首頁“http://******.taobao.com/”,復制這個地址,到源文件下面的鏈接的空白框里,這樣你的圖片和你的首頁關系就建立了。 我需要的是四月新品的總鏈接地址,所以找的是個人所需要的。(圖二)
圖一
復制進去了后,下面有一個目標空白框,選擇“blank”,意思就是當你點擊這個圖片獲得鏈接地址的時候,是在新的網頁打開你的首頁。
圖二
十四、第二個鏈接添加
根據以上步驟,再用同樣的方法獲得02和03的圖片地址,分別點擊選中DW中的源文件地址,修改過來。在這個步驟需要說明的是:02是空白的剩余圖,是我不需要點擊鏈接的地方。所以只是更換了空間地址,而不需要有圖片鏈接地址。由于最開始的時候圖片地址是本地電腦的地址,為了在店鋪中顯示,依然要在圖片空間中獲得0003_02圖片的地址,更換源文件。 這一點大家明白了吧。
我想要03圖片可以點擊鏈接到我的自由渡手冊的頁面,所以在更換了03圖片空間的地址以外,也要獲得自由渡手冊的店鋪頁面地址,放到源文件下面的 “鏈接”空白框里。 鏈接成功!以下示例根據圖片的順序來進行講解說明。
圖一:獲取03圖片的鏈接地址
圖二,找到源代碼
圖三:根據圖一獲得的圖片地址,更換圖二中紅色框“源代碼”地址,就完成了圖三(即本圖)中的鏈接地址更換
圖四:把你想要鏈接處的鏈接地址復制后粘貼在“鏈接”后面的框內,即紅色框內,圖片點擊鏈接成功
圖五:選擇鏈接下面的 目標為blank,即在新窗口打開網頁
十五、獲取代碼,復制。點擊圖片中的小紅色框“拆分”,拆分的意思,就是把圖片和代碼同時可以觀看。大紅色框的,就是圖片和鏈接形成的代碼。我們可以寫不出來,只要會用就行了。我現在也是只能用,不會寫。靠寫代碼來生成程序,太復雜了。 然后全選上面代碼層里所有的代碼,復制出來。
十六、進入店鋪后臺,復制源代碼。進入你的店鋪裝修后臺,新建一個模板,點擊源代碼的地方,把剛剛復制的代碼都放進去
再點擊源代碼的標簽,你做的圖片和鏈接,就到店鋪的后臺去了。到了這一步,你的店鋪裝修也就完成了2/3了,剩下的就是查看效果,修改效果了。點擊保存
十七、發布產品去吧,看看你的勞動成果
圖一
圖二
終于成功了,去查看我的店鋪去嘍!
在裝修店鋪的時候,自定義模板的主要意義,就是實現店家自己的意愿,發揮你的想象力和創造力吧,能給你店鋪帶來更多的裝修空間。
樂發網超市批發網提供超市貨源信息,超市采購進貨渠道。超市進貨網提供成都食品批發,日用百貨批發信息、微信淘寶網店超市采購信息和超市加盟信息.打造國內超市采購商與批發市場供應廠商搭建網上批發市場平臺,是全國批發市場行業中電子商務權威性網站。
本文來源: 淘寶店鋪裝修自由添加圖片鏈接