如何用PS和DW讓促銷欄動(dòng)起來(lái),使您的店鋪更生動(dòng)!我們一起跟淘寶學(xué)堂來(lái)學(xué)習(xí)一下,這里附上制作步驟。
Photoshop(做圖軟件)和Dreamweaver(主要做代碼)!大家應(yīng)該很熟悉!為了照顧新新新手!我盡量寫詳細(xì)!別嫌我啰嗦哦!這次要介紹的是在促銷模板上做滾動(dòng)圖片效果!PS做圖過程我就文字簡(jiǎn)單說(shuō)一下!
先發(fā)一張?jiān)赑S理做好了的效果圖,滾動(dòng)圖片的效果圖可以到小店里看,因?yàn)閼械靡粡垙垖氊悎D修改,為了避免嫌疑,這里就不粘貼出來(lái)了!

當(dāng)然你需要展示多少個(gè)寶貝就制作多少?gòu)堖@樣的效果圖哦~
PS部分:
1、打開Photoshop做圖軟件,打開你需要展示的寶貝圖片!(文件→打開即可)
2、新建一個(gè)文檔,尺寸如下圖參數(shù)(尺寸可隨自己喜歡設(shè)定)

3、把寶貝圖片拉到新建文檔里,然后自由變換到適合大小(當(dāng)然,需要比新建文檔的邊緣要小一點(diǎn))
4、選擇選框工具在文檔上畫一個(gè)大小與寶貝圖片一樣的框(畫出來(lái)的是虛線),然后菜單上選編輯→描邊(參數(shù)如下圖)


5、最后在下面打上寶貝的名稱和價(jià)格(字體顏色隨自己喜歡),然后保存JPG格式,上傳到網(wǎng)絡(luò)相冊(cè)里備用!
DW部分:
Ceci原本做了一個(gè)頭尾接合無(wú)縫滾動(dòng),而且鼠標(biāo)放上去圖片就停下的那種效果代碼,因?yàn)樘詫毑恢С帜_本,所以最后只能放棄,就做了這個(gè)只能左右無(wú)限循環(huán)的效果代碼!
首先,我們需要用到的滾動(dòng)代碼:
<table height=“300” cellspacing=“0” cellpadding=“0” width=“750” border=“0”>
<tbody>
<tr>
<td width=“750”>
<p><marquee style=“relative: ” scrollamount=“1” behavior=“alternate” width=“750” height=“300”><img height=“300” width=“220” border=“0” alt=“” src=“圖片地址1” />
<img height=“300” width=“220” border=“0” alt=“” src=“圖片地址2” />
<img height=“300” width=“220” border=“0” alt=“” src=“圖片地址3” />
<img height=“300” width=“220” border=“0” alt=“” src=“圖片地址4” />
<img height=“300” width=“220” border=“0” alt=“” src=“圖片地址5” />
<img height=“300” width=“220” border=“0” alt=“” src=“圖片地址6” />
<img height=“300” width=“220” border=“0” alt=“” src=“圖片地址7” />
<img height=“300” width=“220” border=“0” alt=“” src=“圖片地址8” />
<img height=“300” width=“220” border=“0” alt=“” src=“圖片地址9” />
</marquee></p>
</td>
</tr>
</tbody>
</table>
方法:
1、打開DW軟件,新建一個(gè)HTML

2、點(diǎn)擊左上角,拆分按鈕,這時(shí)就會(huì)出現(xiàn)上面是代碼,下面是效果圖!

3、把滾動(dòng)代碼復(fù)制(ctrl+c),然后粘貼(ctrl+v)到上部分的代碼區(qū),把原有代碼覆蓋掉(或者先刪掉原有代碼)這時(shí)鼠標(biāo)輕輕點(diǎn)一下下半部分就會(huì)出現(xiàn)很多個(gè)框框

4、點(diǎn)擊第一個(gè)框框,上面代碼部分就會(huì)顯示同樣位置的代碼
5、把之前做好的寶貝圖片傳上的網(wǎng)絡(luò)相冊(cè)地址復(fù)制一下,然后粘貼到下方中間的源文件(圖片地址1)的地方,圖片就會(huì)顯示出來(lái),下面那個(gè)是填寫你寶貝購(gòu)買的地址(超鏈接)

6、后面的框子做法參照第5部。所有圖片做好后,可以點(diǎn)擊上方瀏覽效果,滿意后直接把上面的代碼復(fù)制到你的淘寶裝修促銷模板上就可以了!

下面簡(jiǎn)單解釋一下參數(shù),大家可以根據(jù)自己的要求更改:
height 這個(gè)是高,數(shù)值填寫的是之前做好圖片的尺寸
width這個(gè)是寬,顯示的750是放置在促銷模板上的那個(gè)寬
scrollamount這個(gè)是圖片滾動(dòng)的速度,數(shù)值越大速度越快
behavior這個(gè)是滾動(dòng)的方式,它的屬性值有scroll、slide和alternate三個(gè)
scroll表示滾動(dòng)內(nèi)容向同一方向重復(fù)滾動(dòng),slide表示滾動(dòng)內(nèi)容從一端向另一端滾動(dòng)并在另一端停止,alternate表示滾動(dòng)內(nèi)容在兩端之間來(lái)回往復(fù)滾動(dòng)!
樂發(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)源: 如何用PS和DW讓淘寶網(wǎng)店促銷欄動(dòng)起來(lái)