我知道網(wǎng)店裝修最大的特點(diǎn)就是圖片設(shè)計(jì)排版過(guò)程,但是需要實(shí)現(xiàn)圖片上的效果,我們需要根據(jù)網(wǎng)頁(yè)設(shè)計(jì)要求排版圖片,也就是給每一張圖片添加相關(guān)的鏈接地址。如果是一張圖片的話,添加鏈接地址是非常簡(jiǎn)單的;如果是一張整體設(shè)計(jì)圖需要同時(shí)添加多個(gè)鏈接呢?根據(jù)美工經(jīng)驗(yàn),裝修宅分享多種圖片添加鏈接地址的方法,輕松玩轉(zhuǎn)淘寶設(shè)計(jì)。
圖片添加超級(jí)鏈接地址的方法有幾種,分別是PS切圖、熱點(diǎn)鏈接、CSS定點(diǎn)等,可以實(shí)現(xiàn)圖片添加多個(gè)鏈接功能。
切圖
切圖就是使用Photoshop軟件進(jìn)行具體圖片切圖。就是先使用Photoshop把效果圖設(shè)計(jì)好,然后使用其切圖工具進(jìn)行具體圖片切割。具體需要怎么切是根據(jù)自己的產(chǎn)品排版來(lái)定的。下面根據(jù)實(shí)際例子來(lái)說(shuō)明切圖工具使用:
這是已經(jīng)使用切圖工具切好的圖片效果,我們可以看出,每張寶貝圖都是切成獨(dú)立一張效果圖,然后存儲(chǔ)為WEB格式即可。使用切圖能夠使一張大圖變成一張張獨(dú)立的小圖,然后使用DW表格編輯做成頁(yè)面效果。
使用Photoshop切圖可以實(shí)現(xiàn)添加多種圖片鏈接效果,但是實(shí)現(xiàn)起來(lái)比較慢,而且需要掌握DW基本語(yǔ)言。裝修宅介紹另一種實(shí)現(xiàn)多圖鏈接效果:
熱點(diǎn)切圖
熱點(diǎn)切圖就是使用DW中的熱點(diǎn)工具,實(shí)現(xiàn)可視化的多圖鏈接編輯工作,操作非常簡(jiǎn)單,推薦新手使用,具體步驟如下:
將自己設(shè)計(jì)好的圖片導(dǎo)入DW中,實(shí)現(xiàn)熱點(diǎn)切圖效果。首先是打開(kāi)Dreamweaver軟件,新建一個(gè)HTML文件,然后單擊選中圖片,
這是選中圖片后的數(shù)據(jù),紅色線框內(nèi)的就是熱點(diǎn)工具,選中具體的熱點(diǎn)工具實(shí)現(xiàn)切圖鏈接,如果是規(guī)矩的方形圖片,可以現(xiàn)在第一個(gè)正方形熱點(diǎn)工具;如果是需要切割圓形效果,可以選擇第二個(gè)圓形熱點(diǎn)工具,第三個(gè)就是不規(guī)則圖片熱點(diǎn)鏈接工具。具體效果可以根據(jù)自己的需要選擇,多多操作才能更好的選擇。
這是使用熱點(diǎn)切圖工具后的具體效果,然后查看代碼,修改具體寶貝的鏈接即可。主要代碼如下:
以上就是熱點(diǎn)切圖可視化使用后的代碼,我們需要做下具體修改才能使用的,就是修改下鏈接地址。
1、“imgsrc="1.jpg"”是原圖片地址,把你需要切圖的圖片首先上傳自己的空間,然后插入即可。
2、“href="#"”這是圖片鏈接地址,其中把#符號(hào)代替你的寶貝鏈接地址。
提示:一個(gè)頁(yè)面不能使用多張圖片使用熱點(diǎn)切圖功能,就是你的店招使用熱點(diǎn)效果,如果您的首頁(yè)的其他地方還使用熱點(diǎn)切圖效果的話,會(huì)產(chǎn)生熱點(diǎn)功能不能使用,錯(cuò)位等。裝修宅建議大家在dreamwear中添加連接。
結(jié)語(yǔ):一張圖片實(shí)現(xiàn)多圖鏈接效果可以使用CSS定位鏈接實(shí)現(xiàn),但是由于淘寶限制個(gè)人CSS使用功能,所有一般只能使用切圖或者熱點(diǎn)來(lái)實(shí)現(xiàn),其中熱點(diǎn)可以實(shí)現(xiàn)可視化鏈接編輯,較為簡(jiǎn)單。切圖鏈接較為復(fù)雜,但是排版效果是最好的。具體操作需要根據(jù)自己的需求多多操作,才能更好的使用,實(shí)現(xiàn)多圖鏈接效果淘寶美工必須掌握的技能之一,具體練習(xí)才能更好的提高排版水平。
樂(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)源: 淘寶店鋪設(shè)計(jì)切割圖片并添加熱點(diǎn)連接教程