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

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

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

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

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

 

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

 

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

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

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

 

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

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

 

       因為是剛建好,沒有添加任何的內(nèi)容,所以此時的操作界面是白色的,如上圖。

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

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

 

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

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

 

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

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

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

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

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

 

       在下面的【屬性】欄中輸入【寬:240】、【高:260】,呈現(xiàn)出的效果如上圖紅色部分(紅色是因為我在【背景顏色】中選擇了顏色,方便大家查看區(qū)別,并無實際用處)。

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

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

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

 

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

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

 

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

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

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

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

 

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

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

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

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

 

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

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

 

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

 

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

第一部分:極速推

第三部分:微詳情

第四部分:百億補貼

第五部分:淘金幣

第六部分:天天特賣

第七部分:淘寶直播

第八部分:淘寶特價版

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