大家好,我是一個(gè)淘寶新掌柜,對(duì)于淘寶有很多需要學(xué)習(xí)的地方,沒(méi)事的時(shí)候喜歡去逛逛大賣家的店鋪,學(xué)習(xí)別人的裝修,促銷活動(dòng),尋思著自己也搞個(gè)活動(dòng),那么要做活動(dòng)的第一步就是要有一張精美的活動(dòng)圖片,可是問(wèn)題來(lái)了, 圖會(huì)做,可是如何做到一張圖片有多個(gè)鏈接,點(diǎn)擊不同的寶貝進(jìn)入不同的鏈接。于是我就到處去轉(zhuǎn)論壇看帖子學(xué)習(xí)一圖多鏈接的制作方法,現(xiàn)把我學(xué)到的做成教程,希望可以幫助更多的新手賣家……
剛開(kāi)始看到有的朋友說(shuō)直接用“dreamweaver 8.0”軟件就可以完成,于是就自己做了店招,在店招里面添加“店鋪收藏”按鈕,果然是可以,可是當(dāng)我要制作促銷活動(dòng)圖片的時(shí)候,問(wèn)題來(lái)了,相同的操作試了十幾次都不行,在網(wǎng)絡(luò)上預(yù)覽可以,可一添加到店鋪里面就不行,最后只得再找資料。原來(lái)如果用DW的熱點(diǎn)工具一張圖片一個(gè)鏈接是可以,但是如果多個(gè)鏈接就容易出現(xiàn)錯(cuò)位。最好的方法是用PS和DW結(jié)合起來(lái)操作。
好了,廢話有點(diǎn)多了,獻(xiàn)上教程,請(qǐng)大家耐心學(xué)習(xí),有不懂的可以跟帖問(wèn)。
1. 必備軟件
Photoshop和dreamweaver
2. 準(zhǔn)備好需要插入鏈接的圖片,如圖例
3. 用PS打開(kāi)
4. 選擇切片工具,紅色框框就是切片工具
5. 將自己需要添加鏈接的地方切出來(lái)
這里注意了:因?yàn)榍衅J(rèn)為長(zhǎng)方形切割,當(dāng)你把需要添加鏈接的地方切割出來(lái)的時(shí)候,其他的地方會(huì)被PS自動(dòng)切成長(zhǎng)方形,從而導(dǎo)致一張圖被切的很碎很多,因此切割的時(shí)候盡量大方塊切割,下面演示兩種切割方法:
圖1
圖2
從上面兩張圖大家可以看到圖1被切割成12塊,藍(lán)色數(shù)字表示是我們切的,灰色的是PS自動(dòng)切的,
而圖2被切成了8塊,圖2切的比較大,空隙少,減少了PS自動(dòng)生成的方塊
接下去就以圖2繼續(xù)操作
6.右鍵點(diǎn)擊需要加入鏈接的切片,選擇“編輯切片選項(xiàng)”
在對(duì)話框中,紅色框里面的URL里填入寶貝鏈接,其余要加入鏈接的切片操作方法同上
7.點(diǎn)擊PS右上角“文件”在下拉菜單中選擇“存儲(chǔ)為Web和設(shè)備所用格式”
在下拉菜單中選擇“存儲(chǔ)為Web和設(shè)備所用格式”生成對(duì)話框,注意紅色框的地方,選擇你要保存的圖片格式gif或jpg
點(diǎn)存儲(chǔ),生成對(duì)話框,選一個(gè)文件夾保存,紅色框部分注意要選擇“HTML和圖像(*.html)”
會(huì)生成一個(gè)對(duì)話框,不用管,直接點(diǎn)擊確定
保存好后,你的文件夾里會(huì)出現(xiàn)以下兩個(gè)文件
8.“images”文件夾里是生成的切片,把里面的圖片全部上傳到淘寶的圖片空間,注意不要修改圖片名稱
上傳前
上傳后
9. 用dreamweaver軟件打開(kāi)
10.打開(kāi)后可以看到右上角有代碼、拆分、設(shè)計(jì)三個(gè)按鈕
“代碼”就是顯示代碼,“設(shè)計(jì)”就是顯示圖片,“拆分”就是一半代碼,一半圖片
代碼中<img src=后面雙引號(hào)部分就是圖片的本地鏈接,但是圖片是不能直接從本地硬盤(pán)里面直接映射到網(wǎng)絡(luò)上,所以我們必須把圖片的地址換成剛才上傳到淘寶圖片空間里面的切片地址,就是紅色框里面的部分,我們剛才圖片有8個(gè)切片,這邊就有8個(gè)鏈接地址
圖3
圖4
必須要一個(gè)個(gè)替換圖片鏈接地址,點(diǎn)擊圖片空間里面對(duì)應(yīng)的圖片“鏈接”,就是紅色框部分,就可復(fù)制相對(duì)應(yīng)圖片的地址,復(fù)制好后,直接替換圖3紅色框里面的內(nèi)容,必須要一一對(duì)應(yīng) 。
11.如需圖片放在店鋪后,點(diǎn)擊圖片,在新的頁(yè)面打開(kāi),還需進(jìn)行一步操作:
點(diǎn)擊右上角的“設(shè)計(jì)”按鈕
選中其中一個(gè)切片,在底下目標(biāo)欄三角下拉菜單里面選中“-blank”,就可設(shè)置在新頁(yè)面打開(kāi)寶貝,紅色框部分
每個(gè)切片都如此操作即可。
12.待全部設(shè)置好后,點(diǎn)擊右上角“代碼”按鈕,即可獲取代碼,ctrl+A全選代碼,復(fù)制
13.復(fù)制好代碼后,進(jìn)入淘寶店鋪裝修頁(yè)面,在你需要加入圖片的地方,添加“自定義內(nèi)容區(qū)”
14.添加好自定義模塊后,點(diǎn)擊“編輯”后再點(diǎn)擊雙箭頭圖標(biāo)“源碼”進(jìn)入到代碼模式,將剛才復(fù)制好的代碼粘貼進(jìn)去。再次點(diǎn)擊雙箭頭圖標(biāo)“源碼”可切換回示圖模式,點(diǎn)擊“確定”,預(yù)覽沒(méi)問(wèn)題后即可發(fā)布。
看完以后跟著操作一遍就會(huì)了,沒(méi)實(shí)際操作不行哦!怕忘記就把此帖收藏哦!~
用PS切片來(lái)做是比較復(fù)雜一點(diǎn),后期切的圖片也怕會(huì)失幀,但是目前沒(méi)找到更好的辦法,大家跟著操作下,會(huì)了都不用請(qǐng)美工了。
樂(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)源: 大玩店鋪促銷:一圖多鏈接