返回列表

作者:巨人電商

如何用DW做出漂亮的促銷表格模板

POST TIME:2020-10-25

    很多的賣家在逛淘寶店時會發(fā)現(xiàn)很多的店鋪裝修很美觀,如打折模塊和團購模塊,自己想去問店主怎么制作,但是有幾個淘寶賣家會告訴你呢,不過不要著急,下面讓為你詳解一番吧。今天我們講的是如何用DREAMWEAVER做促銷表格。     準(zhǔn)備工作:DW CS5版本、PS CS5版本(DW全稱Dreamweaver,PS全稱Photo Shop,CS5為軟件的版本,不同的版本所擁有的的功能也不同,建議學(xué)習(xí)本帖的同學(xué)還是下載相同版本的軟件,如果您遇到問題,我才能很好的幫您解決)、紙筆等。     第一步:前期籌劃:在制作表格促銷模塊時,我們得先考慮好表格的大小,以用來鏈接大小合適的圖片,所以此時【紙筆】必不可少。首先,通欄的尺寸為950,所以表格的寬度定為950,具體的高度還是按照您自己要設(shè)置的大小來確定。我選擇的表格大小是950*580,具體表格分布為5行7列。先弄出一個大概圖給大家看看:
     
    圖中的白色部位占據(jù)一行或一列,彩色模塊為圖像占位符,用來鏈接圖片的。     第二步:打開DW設(shè)計軟件:新建一個HTML頁面,快捷鍵為Ctrl+N,如圖
    布局選擇【無】,點擊右下角的【創(chuàng)建】,這樣一個html頁面就新建成功了。
    因為是剛建好,沒有添加任何的內(nèi)容,所以此時的操作界面是白色的,如上圖。     接著,我們點擊【插入】菜單,這是可以看到【表格】項目,點擊,在表格中輸入【5行,7列,表格寬度950,邊框粗細0,單元格邊框、間距0,標(biāo)題選擇“無”】,如下圖
     這樣,一個5行7列的表格就只做而成了,大家先看看效果圖

    自動生成的表格是不居中的,所以選擇右下角的【對齊:居中對齊】,這樣表格就會呈現(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è)置雷同。
    在下面的【屬性】欄中輸入【寬:240】、【高:260】,呈現(xiàn)出的效果如上圖紅色部分(紅色是因為我在【背景顏色】中選擇了顏色,方便大家查看區(qū)別,并無實際用處)。     按照,我的方法,將所有的表格大小確定好后,接著要做的工作就是將相應(yīng)的促銷圖片放入表格中。這時先不著急插入圖片,而是先插入一個【圖像占位符】,主要是為了大家以后可以再次利用這個模塊。
    大家,還是先看到左上角的菜單欄【插入】,點擊,選擇【圖像對象】→【圖像占位符】,點擊鼠標(biāo),出現(xiàn)如圖對話框
    在【寬度】、【高度】中輸入相應(yīng)的尺寸大小,接著在【顏色】項目中添加上顏色,這個步驟的主要作用是為了區(qū)分各個單元格的圖像占位符,如此一個圖像占位符就做成了。
    接下來,將各個需要插入圖像的單元格插入相應(yīng)大小的圖像占位符,寫入您的促銷廣告,一個表格的促銷模塊就做好了。     有時候,你要制作的表格模塊,邊框是沒有顏色的,選擇的底色又是白色,沒法區(qū)分開背景,此時你只需在【頁面屬性】中選擇【背景顏色】,此時制作出來的表格就很刺眼了,看出了整體的布局。什么??不信??那你還是試試吧……
9
    在剛做好的表格中,點擊任意一個【圖像占位符】,下面的【屬性】欄中會出現(xiàn)相應(yīng)的屬性,在【源文件】一項中填入促銷寶貝的圖片,【鏈接】出填上相應(yīng)的寶貝詳情地址,【目標(biāo)】處選擇“_blank”,這個選項的作用是使被鏈接的寶貝能在新的窗口打開。
    最后,插入事先做好的圖片,最終的效果就出來了!
     這樣操作之后,你也就擁有了自己的促銷表格,是不是很簡單呢,更多精彩內(nèi)容請關(guān)注及其官方論壇(https:///)。     推薦閱讀:"裝修大師"讓視覺營銷立馬出彩 https:///zhuangxiujingyan/20130201113800.htm