教您利用表格打造促銷style,再續(xù)視覺營(yíng)銷

2013-02-01|HiShop
導(dǎo)讀很多的賣家在逛淘寶店時(shí)會(huì)發(fā)現(xiàn)很多的店鋪裝修很美觀,如打折模塊和團(tuán)購(gòu)模塊,現(xiàn)在就跟大家分享一下: ...

很多的賣家在逛淘寶店時(shí)會(huì)發(fā)現(xiàn)很多的店鋪裝修很美觀,如打折模塊和團(tuán)購(gòu)模塊,現(xiàn)在就跟大家分享一下:

     【準(zhǔn)備工作】:DW CS5版本、PS CS5版本(DW全稱Dreamweaver,PS全稱Photo Shop,CS5為軟件的版本,不同的版本所擁有的的功能也不同,建議學(xué)習(xí)本帖的同學(xué)還是下載相同版本的軟件,如果您遇到問題,我才能很好的幫您解決)、紙筆等。

     【第一步:前期籌劃】:在制作表格促銷模塊時(shí),我們得先考慮好表格大小,以用來鏈接大小合適的圖片,所以此時(shí)【紙筆】必不可少。首先,通欄的尺寸為950,所以表格的寬度定為950,具體的高度還是按照您自己要設(shè)置的大小來確定。我選擇的表格大小是950*580,具體表格分布為5行7列。先弄出一個(gè)大概圖給大家看看:

 

教您利用表格打造促銷style,再續(xù)視覺營(yíng)銷

 

       圖中的白色部位占據(jù)一行或一列,彩色模塊為圖像占位符,用來鏈接圖片的。

      【第二步:打開DW設(shè)計(jì)軟件】:新建一個(gè)HTML頁(yè)面,快捷鍵為Ctrl+N,如圖

教您利用表格打造促銷style,再續(xù)視覺營(yíng)銷  

 

       布局選擇【無】,點(diǎn)擊右下角的【創(chuàng)建】,這樣一個(gè)html頁(yè)面就新建成功了。

教您利用表格打造促銷style,再續(xù)視覺營(yíng)銷

 

       因?yàn)槭莿偨ê?,沒有添加任何的內(nèi)容,所以此時(shí)的操作界面是白色的,如上圖。

       接著,我們點(diǎn)擊【插入】菜單,這是可以看到【表格】項(xiàng)目,點(diǎn)擊,在表格中輸入【5行,7列,表格寬度950,邊框粗細(xì)0,單元格邊框、間距0,標(biāo)題選擇“無”】,如下圖

教您利用表格打造促銷style,再續(xù)視覺營(yíng)銷

 

       這樣,一個(gè)5行7列的表格就只做而成了,大家先看看效果圖

教您利用表格打造促銷style,再續(xù)視覺營(yíng)銷

 

       自動(dòng)生成的表格是不居中的,所以選擇右下角的【對(duì)齊:居中對(duì)齊】,這樣表格就會(huì)呈現(xiàn)在頁(yè)面的中央。大家這時(shí)是不是還覺得表格這么小,怎樣將圖片插入進(jìn)去啊?呵呵,酸儒先傻笑一下……這樣當(dāng)然不能直接插圖啊,首先要確定好各個(gè)單元格的大小,然后再將相應(yīng)的圖片插入,大家注意力集中啦,往下看:

       在前面的大概圖中,我已經(jīng)標(biāo)出了相應(yīng)單元格大小了,左邊的小方塊為240*260的像素大小,右邊的長(zhǎng)方形為390*540的像素大小,其余白色部分的寬度或高度都是20px,這個(gè)只是教程中的大小,具體數(shù)據(jù)大小各位賣家可以自己設(shè)置的。切勿照葫蘆畫瓢,更多的還是需要自己多揣摩?。?!

       又有人會(huì)問,單元格的大小設(shè)置到底該怎么設(shè)置呢?各位親,請(qǐng)別急,酸儒我先去喝口水!

       首先,將鼠標(biāo)定位在一個(gè)單元格中,此時(shí)在下面的【屬性】欄中,會(huì)出現(xiàn)相應(yīng)的屬性,我先示范左邊方格大小的設(shè)置,其他的設(shè)置雷同。

教您利用表格打造促銷style,再續(xù)視覺營(yíng)銷

 

       在下面的【屬性】欄中輸入【寬:240】、【高:260】,呈現(xiàn)出的效果如上圖紅色部分(紅色是因?yàn)槲以凇颈尘邦伾恐羞x擇了顏色,方便大家查看區(qū)別,并無實(shí)際用處)。

       按照,我的方法,將所有的表格大小確定好后,接著要做的工作就是將相應(yīng)的促銷圖片放入表格中。這時(shí)先不著急插入圖片,而是先插入一個(gè)【圖像占位符】,主要是為了大家以后可以再次利用這個(gè)模塊。

       大家,還是先看到左上角的菜單欄【插入】,點(diǎn)擊,選擇【圖像對(duì)象】→【圖像占位符】,點(diǎn)擊鼠標(biāo),出現(xiàn)如圖對(duì)話框

教您利用表格打造促銷style,再續(xù)視覺營(yíng)銷

 

       在【寬度】、【高度】中輸入相應(yīng)的尺寸大小,接著在【顏色】項(xiàng)目中添加上顏色,這個(gè)步驟的主要作用是為了區(qū)分各個(gè)單元格的圖像占位符,如此一個(gè)圖像占位符就做成了。

教您利用表格打造促銷style,再續(xù)視覺營(yíng)銷

 

       接下來,將各個(gè)需要插入圖像的單元格插入相應(yīng)大小的圖像占位符,寫入您的促銷廣告,一個(gè)表格的促銷模塊就做好了。

       有時(shí)候,你要制作的表格模塊,邊框是沒有顏色的,選擇的底色又是白色,沒法區(qū)分開背景,此時(shí)你只需在【頁(yè)面屬性】中選擇【背景顏色】,此時(shí)制作出來的表格就很刺眼了,看出了整體的布局。什么??不信??那你還是試試吧……

教您利用表格打造促銷style,再續(xù)視覺營(yíng)銷

教您利用表格打造促銷style,再續(xù)視覺營(yíng)銷

 

       我選擇的是黑色,大家看看表格的輪廓是不是鮮明多了!

       哇咔咔!別太高興了,圖片還沒教會(huì)大家怎么插入呢!往下看……

       在剛做好的表格中,點(diǎn)擊任意一個(gè)【圖像占位符】,下面的【屬性】欄中會(huì)出現(xiàn)相應(yīng)的屬性,在【源文件】一項(xiàng)中填入促銷寶貝的圖片,【鏈接】出填上相應(yīng)的寶貝詳情地址,【目標(biāo)】處選擇“_blank”,這個(gè)選項(xiàng)的作用是使被鏈接的寶貝能在新的窗口打開。

教您利用表格打造促銷style,再續(xù)視覺營(yíng)銷

 

       最后,插入事先做好的圖片,最終的效果就出來了!

教您利用表格打造促銷style,再續(xù)視覺營(yíng)銷

 

       看看,表格的魅力就是這么大,想怎么變就怎么變!

 

【本站聲明】 1、本網(wǎng)站發(fā)布的該篇文章,目的在于分享電商知識(shí)及傳遞、交流相關(guān)電商信息,以便您學(xué)習(xí)或了解電商知識(shí),請(qǐng)您不要用于其他用途; 2、該篇文章中所涉及的商標(biāo)、標(biāo)識(shí)的商品/服務(wù)并非來源于本網(wǎng)站,更非本網(wǎng)站提供,與本網(wǎng)站無關(guān),系他人的商品或服務(wù),本網(wǎng)站對(duì)于該類商標(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é),僅系客觀性描述,如您需要了解該類商品/服務(wù)詳細(xì)的資訊,請(qǐng)您直接與該類商品/服務(wù)的提供者聯(lián)系。
重磅推薦:淘寶學(xué)院目錄

第一部分:極速推

第三部分:微詳情

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

第五部分:淘金幣

第六部分:天天特賣

第七部分:淘寶直播

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

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