很多的賣家在逛淘寶店時會發現很多的店鋪裝修很美觀，如打折模塊和團購模塊，現在就跟大家分享一下：
【準備工作】：DW CS5版本、PS CS5版本（DW全稱Dreamweaver，PS全稱Photo Shop，CS5為軟件的版本，不同的版本所擁有的的功能也不同，建議學習本帖的同學還是下載相同版本的軟件，如果您遇到問題，我才能很好的幫您解決）、紙筆等。
【第一步：前期籌劃】：在制作表格促銷模塊時，我們得先考慮好表格的大小，以用來鏈接大小合適的圖片，所以此時【紙筆】必不可少。首先，通欄的尺寸為950，所以表格的寬度定為950，具體的高度還是按照您自己要設置的大小來確定。我選擇的表格大小是950*580，具體表格分布為5行7列。先弄出一個大概圖給大家看看：
圖中的白色部位占據一行或一列，彩色模塊為圖像占位符，用來鏈接圖片的。
【第二步：打開DW設計軟件】：新建一個HTML頁面，快捷鍵為Ctrl+N，如圖
布局選擇【無】，點擊右下角的【創建】，這樣一個html頁面就新建成功了。
因為是剛建好，沒有添加任何的內容，所以此時的操作界面是白色的，如上圖。
接著，我們點擊【插入】菜單，這是可以看到【表格】項目，點擊，在表格中輸入【5行，7列，表格寬度950，邊框粗細0，單元格邊框、間距0，標題選擇“無”】，如下圖
這樣，一個5行7列的表格就只做而成了，大家先看看效果圖
自動生成的表格是不居中的，所以選擇右下角的【對齊：居中對齊】，這樣表格就會呈現在頁面的中央。大家這時是不是還覺得表格這么小，怎樣將圖片插入進去??？呵呵，酸儒先傻笑一下……這樣當然不能直接插圖啊，首先要確定好各個單元格的大小，然后再將相應的圖片插入，大家注意力集中啦，往下看：
在前面的大概圖中，我已經標出了相應單元格大小了，左邊的小方塊為240*260的像素大小，右邊的長方形為390*540的像素大小，其余白色部分的寬度或高度都是20px，這個只是教程中的大小，具體數據大小各位賣家可以自己設置的。切勿照葫蘆畫瓢，更多的還是需要自己多揣摩?。。?br />
又有人會問，單元格的大小設置到底該怎么設置呢？各位親，請別急，酸儒我先去喝口水！
首先，將鼠標定位在一個單元格中，此時在下面的【屬性】欄中，會出現相應的屬性，我先示范左邊方格大小的設置，其他的設置雷同。
在下面的【屬性】欄中輸入【寬：240】、【高：260】，呈現出的效果如上圖紅色部分（紅色是因為我在【背景顏色】中選擇了顏色，方便大家查看區別，并無實際用處）。
按照，我的方法，將所有的表格大小確定好后，接著要做的工作就是將相應的促銷圖片放入表格中。這時先不著急插入圖片，而是先插入一個【圖像占位符】，主要是為了大家以后可以再次利用這個模塊。
大家，還是先看到左上角的菜單欄【插入】，點擊，選擇【圖像對象】→【圖像占位符】，點擊鼠標，出現如圖對話框
在【寬度】、【高度】中輸入相應的尺寸大小，接著在【顏色】項目中添加上顏色，這個步驟的主要作用是為了區分各個單元格的圖像占位符，如此一個圖像占位符就做成了。
接下來，將各個需要插入圖像的單元格插入相應大小的圖像占位符，寫入您的促銷廣告，一個表格的促銷模塊就做好了。
有時候，你要制作的表格模塊，邊框是沒有顏色的，選擇的底色又是白色，沒法區分開背景，此時你只需在【頁面屬性】中選擇【背景顏色】，此時制作出來的表格就很刺眼了，看出了整體的布局。什么？？不信？？那你還是試試吧……
我選擇的是黑色，大家看看表格的輪廓是不是鮮明多了！
哇咔咔！別太高興了，圖片還沒教會大家怎么插入呢！往下看……
在剛做好的表格中，點擊任意一個【圖像占位符】，下面的【屬性】欄中會出現相應的屬性，在【源文件】一項中填入促銷寶貝的圖片，【鏈接】出填上相應的寶貝詳情地址，【目標】處選擇“_blank”，這個選項的作用是使被鏈接的寶貝能在新的窗口打開。
最后，插入事先做好的圖片，最終的效果就出來了！
看看，表格的魅力就是這么大，想怎么變就怎么變！
樂發網超市批發網提供超市貨源信息,超市采購進貨渠道。超市進貨網提供成都食品批發,日用百貨批發信息、微信淘寶網店超市采購信息和超市加盟信息.打造國內超市采購商與批發市場供應廠商搭建網上批發市場平臺,是全國批發市場行業中電子商務權威性網站。
本文來源： 打折團購模塊裝修視覺體驗
