教您利用表格打造促銷style,再續(xù)視覺營(yíng)銷
很多的賣家在逛淘寶店時(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è)大概圖給大家看看:
圖中的白色部位占據(jù)一行或一列,彩色模塊為圖像占位符,用來鏈接圖片的。
【第二步:打開DW設(shè)計(jì)軟件】:新建一個(gè)HTML頁(yè)面,快捷鍵為Ctrl+N,如圖
布局選擇【無】,點(diǎn)擊右下角的【創(chuàng)建】,這樣一個(gè)html頁(yè)面就新建成功了。
因?yàn)槭莿偨ê?,沒有添加任何的內(nèi)容,所以此時(shí)的操作界面是白色的,如上圖。
接著,我們點(diǎn)擊【插入】菜單,這是可以看到【表格】項(xiàng)目,點(diǎn)擊,在表格中輸入【5行,7列,表格寬度950,邊框粗細(xì)0,單元格邊框、間距0,標(biāo)題選擇“無”】,如下圖
這樣,一個(gè)5行7列的表格就只做而成了,大家先看看效果圖
自動(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è)置雷同。
在下面的【屬性】欄中輸入【寬:240】、【高:260】,呈現(xiàn)出的效果如上圖紅色部分(紅色是因?yàn)槲以凇颈尘邦伾恐羞x擇了顏色,方便大家查看區(qū)別,并無實(shí)際用處)。
按照,我的方法,將所有的表格大小確定好后,接著要做的工作就是將相應(yīng)的促銷圖片放入表格中。這時(shí)先不著急插入圖片,而是先插入一個(gè)【圖像占位符】,主要是為了大家以后可以再次利用這個(gè)模塊。
大家,還是先看到左上角的菜單欄【插入】,點(diǎn)擊,選擇【圖像對(duì)象】→【圖像占位符】,點(diǎn)擊鼠標(biāo),出現(xiàn)如圖對(duì)話框
在【寬度】、【高度】中輸入相應(yīng)的尺寸大小,接著在【顏色】項(xiàng)目中添加上顏色,這個(gè)步驟的主要作用是為了區(qū)分各個(gè)單元格的圖像占位符,如此一個(gè)圖像占位符就做成了。
接下來,將各個(gè)需要插入圖像的單元格插入相應(yīng)大小的圖像占位符,寫入您的促銷廣告,一個(gè)表格的促銷模塊就做好了。
有時(shí)候,你要制作的表格模塊,邊框是沒有顏色的,選擇的底色又是白色,沒法區(qū)分開背景,此時(shí)你只需在【頁(yè)面屬性】中選擇【背景顏色】,此時(shí)制作出來的表格就很刺眼了,看出了整體的布局。什么??不信??那你還是試試吧……
我選擇的是黑色,大家看看表格的輪廓是不是鮮明多了!
哇咔咔!別太高興了,圖片還沒教會(huì)大家怎么插入呢!往下看……
在剛做好的表格中,點(diǎn)擊任意一個(gè)【圖像占位符】,下面的【屬性】欄中會(huì)出現(xiàn)相應(yīng)的屬性,在【源文件】一項(xiàng)中填入促銷寶貝的圖片,【鏈接】出填上相應(yīng)的寶貝詳情地址,【目標(biāo)】處選擇“_blank”,這個(gè)選項(xiàng)的作用是使被鏈接的寶貝能在新的窗口打開。
最后,插入事先做好的圖片,最終的效果就出來了!
看看,表格的魅力就是這么大,想怎么變就怎么變!