DW制作促銷(xiāo)圖片鏈接

2013-01-30|HiShop
導(dǎo)讀今天想跟大家講講怎么用DW軟件做圖片上的鏈接,而且今天想跟大家說(shuō)一個(gè)困擾了我一個(gè)星期的一個(gè)難題,我想也有許多親會(huì)碰到這種問(wèn)題吧,在這里獻(xiàn)丑啦。大家看過(guò)許多店鋪的廣告圖吧,是不是很好看,這個(gè)不用花錢(qián)啦,我們小賣(mài)家也一樣能做出來(lái)哦! 為存在廣告嫌疑...

今天想跟大家講講怎么用DW軟件做圖片上的鏈接,而且今天想跟大家說(shuō)一個(gè)困擾了我一個(gè)星期的一個(gè)難題,我想也有許多親會(huì)碰到這種問(wèn)題吧,在這里獻(xiàn)丑啦。大家看過(guò)許多店鋪的廣告圖吧,是不是很好看,這個(gè)不用花錢(qián)啦,我們小賣(mài)家也一樣能做出來(lái)哦! 為存在廣告嫌疑,有關(guān)店內(nèi)的一切都把它描紅了哦。

在做鏈接之前我們先要做一張漂亮的圖片,可以自己做也可以偷偷懶去阿里巴巴模版市場(chǎng)下載圖片。下面的圖片是裝修模版里的圖哦,不是小店的圖片哦,不存在廣告哦

DW制作促銷(xiāo)圖片鏈接

這個(gè)怎么制作怎么修改我就不多說(shuō)啦,跟著提示把你想要修改的地方編輯一下

溫馨提示:記得要先登錄哦,如果不登錄的話在編輯過(guò)程中再登錄的話要重新制作的哦。

修改完成提交后把JPG的圖片下載下來(lái),然后用photoshop再次修改,現(xiàn)在我用我店里的一張圖來(lái)給大家展示一下怎么在圖片上加上鏈接

首先看一下PS的工作界面,打開(kāi)photoshop

DW制作促銷(xiāo)圖片鏈接

打開(kāi)圖片,寫(xiě)上店內(nèi)的活動(dòng),因?yàn)檫@張圖我沒(méi)在模版市場(chǎng)里修改,所以只能在PS里寫(xiě)點(diǎn)店內(nèi)的有關(guān)活動(dòng),雖然不是很漂亮,但是今天主要是講怎么添加鏈接

DW制作促銷(xiāo)圖片鏈接

接下來(lái)要保存啦,點(diǎn)擊存儲(chǔ)為web和設(shè)備所用格式(一定要這樣保存哦)跳出來(lái)下圖的樣子,選擇JPEG,再點(diǎn)擊確認(rèn)哦

DW制作促銷(xiāo)圖片鏈接

保存為HTML格式,點(diǎn)擊確認(rèn)

DW制作促銷(xiāo)圖片鏈接

保存后得到下圖兩個(gè)文件哦

DW制作促銷(xiāo)圖片鏈接

然后把另一個(gè)文件里的JPG圖片上傳到淘寶空間里,必須要上傳到空間哦,否則會(huì)顯示不正常的哦

DW制作促銷(xiāo)圖片鏈接

photoshop工作結(jié)束啦,現(xiàn)在DW閃亮登場(chǎng)啦

DW制作促銷(xiāo)圖片鏈接

現(xiàn)在我們來(lái)認(rèn)識(shí)一下DW,代碼區(qū)、設(shè)計(jì)區(qū)、屬性區(qū),沒(méi)接觸過(guò)的人可能會(huì)不明白,但是了解了學(xué)會(huì)了其實(shí)很簡(jiǎn)單的啦

DW制作促銷(xiāo)圖片鏈接

正式開(kāi)始啦

打開(kāi)剛剛保存的HTML格式的圖片DW制作促銷(xiāo)圖片鏈接

源文件是填圖片地址的地方,一定要改成剛剛上傳到淘寶空間的鏈接地址,現(xiàn)在上面顯示的是本地地址,如果不改的話到時(shí)候做的很辛苦結(jié)果還是無(wú)法正常顯示圖片的哦

DW制作促銷(xiāo)圖片鏈接

這個(gè)是已經(jīng)改成鏈接地址的嘍

DW制作促銷(xiāo)圖片鏈接

現(xiàn)在我們要用矩形框框出需要鏈接的地方,你想哪個(gè)地方有鏈接就杠出哪個(gè)地方好了,非常的簡(jiǎn)單

DW制作促銷(xiāo)圖片鏈接

看下圖,我想鏈接到新品上架,直接框出新品上架四個(gè)字,跳出來(lái)的框點(diǎn)確認(rèn)DW制作促銷(xiāo)圖片鏈接

下面要填被鏈接的地址啦,去你的店鋪點(diǎn)出新品上架的頁(yè)面,地址欄復(fù)制地址,粘貼到下圖上的鏈接部位,注意把“#”要去掉的哦

DW制作促銷(xiāo)圖片鏈接

看到下面還有個(gè)目標(biāo)的字樣,選第一個(gè)blank就好,意思是新窗口打開(kāi)

DW制作促銷(xiāo)圖片鏈接

做到這里基本上都制作完成了,接下來(lái)點(diǎn)擊保存,保險(xiǎn)一點(diǎn)我們還要預(yù)覽一下效果,點(diǎn)擊下圖上的小地球,預(yù)覽,下拉菜單中按照你的情況選擇瀏覽器進(jìn)行預(yù)覽

DW制作促銷(xiāo)圖片鏈接

預(yù)覽也完成了,現(xiàn)在代碼出場(chǎng)啦,點(diǎn)擊下圖中的代碼,選擇復(fù)制

DW制作促銷(xiāo)圖片鏈接

準(zhǔn)備完畢,現(xiàn)在我們要開(kāi)始裝修啦,點(diǎn)擊裝修此頁(yè)面

DW制作促銷(xiāo)圖片鏈接

點(diǎn)擊添加模塊

DW制作促銷(xiāo)圖片鏈接

點(diǎn)擊添加自定義內(nèi)容

DW制作促銷(xiāo)圖片鏈接

進(jìn)行編輯

DW制作促銷(xiāo)圖片鏈接

剛剛復(fù)制的代碼還記得嗎?代碼馬上出場(chǎng)嘍! 點(diǎn)擊下圖中的源碼

DW制作促銷(xiāo)圖片鏈接

粘貼,代碼就正式出場(chǎng)啦。

DW制作促銷(xiāo)圖片鏈接

親以為到這步就正式OK啦?如果你的店鋪中DW代碼只用一次的話點(diǎn)擊確認(rèn)就可以了,但是如果你的店鋪中需要多次用DW制作的話就沒(méi)這么簡(jiǎn)單嘍

曾經(jīng)也困惑了一個(gè)星期,為什么店招用DW制作運(yùn)用到店鋪后顯示完全正常,而接下來(lái)用DW制作促銷(xiāo)圖預(yù)覽時(shí)完全正常,運(yùn)用到店鋪就不正常了?左思右想,整整一個(gè)星期吃不好睡不好,肯定是哪里出問(wèn)題了,步驟完全一樣,那么問(wèn)題肯定出在代碼上了,對(duì)代碼不是很懂,可能是碰巧吧,問(wèn)題竟然被找到了,DW制作的代碼只有在店鋪中運(yùn)用一次,如果你想要多次使用的話,必須要修改代碼,其實(shí)很簡(jiǎn)單,要從第一張開(kāi)始修改的哦,找到代碼里MAP的英文字母,在后面添加1、2、3、4.。。。。第一張就用1、第二張就用2等等依次類(lèi)推下去,這樣親做的DW代碼在店鋪里就運(yùn)作正常嘍

再次點(diǎn)擊源碼,圖片就顯示啦,最后別忘記發(fā)布哦,大功告成啦DW制作促銷(xiāo)圖片鏈接

DW軟件就是這樣的簡(jiǎn)單,更加復(fù)雜一點(diǎn)的促銷(xiāo)圖也是一樣的制作過(guò)程,只是過(guò)程稍微多一點(diǎn)而已,大家只要知道怎么做了不管有多復(fù)雜的圖都能很快完成作品啦。

教程到這里就全部講完啦,講的并不是很好,語(yǔ)言也不漂亮,但是我們把知道的東西全都奉獻(xiàn)給大家。我們要利用網(wǎng)絡(luò)的一切資源加上自己的努力,我們小賣(mài)家也一定能成功的!

 

【本站聲明】 1、本網(wǎng)站發(fā)布的該篇文章,目的在于分享電商知識(shí)及傳遞、交流相關(guān)電商信息,以便您學(xué)習(xí)或了解電商知識(shí),請(qǐng)您不要用于其他用途; 2、該篇文章中所涉及的商標(biāo)、標(biāo)識(shí)的商品/服務(wù)并非來(lái)源于本網(wǎng)站,更非本網(wǎng)站提供,與本網(wǎng)站無(wú)關(guān),系他人的商品或服務(wù),本網(wǎng)站對(duì)于該類(lèi)商標(biāo)、標(biāo)識(shí)不擁有任何權(quán)利; 3、本網(wǎng)站不對(duì)該篇文章中所涉及的商標(biāo)、標(biāo)識(shí)的商品/服務(wù)作任何明示或暗示的保證或擔(dān)保; 4、本網(wǎng)站不對(duì)文章中所涉及的內(nèi)容真實(shí)性、準(zhǔn)確性、可靠性負(fù)責(zé),僅系客觀性描述,如您需要了解該類(lèi)商品/服務(wù)詳細(xì)的資訊,請(qǐng)您直接與該類(lèi)商品/服務(wù)的提供者聯(lián)系。
重磅推薦:淘寶學(xué)院目錄

第一部分:極速推

第三部分:微詳情

第四部分:百億補(bǔ)貼

第五部分:淘金幣

第六部分:天天特賣(mài)

第七部分:淘寶直播

第八部分:淘寶特價(jià)版

第九部分:相關(guān)推薦