網(wǎng)店管理軟件
當(dāng)前位置：工程項(xiàng)目OA系統(tǒng) > 領(lǐng)域應(yīng)用 > 零售管理系統(tǒng) > 網(wǎng)店管理軟件
手把手教你做寶貝描述頁的尺寸表格
對于服裝淘寶店主，在寶貝描述中增加寶貝尺碼表是很有必要的。但是，純文字列舉是不是有點(diǎn)粗糙呢，如果能在寶貝描述中插入表格就好了。今天我們就詳細(xì)介紹下如何用DREAM在寶貝描述中插入表格。
普通的文字形式
這種形式應(yīng)該是最原始的一種尺碼數(shù)據(jù)列舉方式，在這里，我們只需要在編輯寶貝描述時(shí)，直接用文字鍵入，方便易行。這種方式也是很多小賣家正在使用的方式。
如果數(shù)據(jù)發(fā)生變化，我們可以隨時(shí)進(jìn)行修改，而不會增加任何操作，但這種形式對于我們店鋪形象的推廣沒有多大的益處，畢竟不太美觀。
第二種形式，圖片列舉。如圖2所示。
這種形式就是先用一些輔助軟件，制作表格，并在表格當(dāng)中填充數(shù)據(jù)，其次將這個(gè)表格處理成圖片，然后把這個(gè)圖片上傳到自己的圖片空間當(dāng)中，最后在編輯寶貝描述時(shí)，直接將這個(gè)圖片從空間當(dāng)中插入就行了。
這種形式可操作性不強(qiáng)，因?yàn)橐坏┪覀兊膶氊惓叽a數(shù)據(jù)發(fā)生變化，我們只能重新制作表格，生成圖片，上傳圖片，最后編輯修改。如果店鋪當(dāng)中的寶貝數(shù)量多的話，那這種表格的制作任務(wù)就會令人望而生畏。這也是為什么有那么多的小賣家寧愿選擇文字列舉形式的一個(gè)非常重要的原因，畢竟店小，沒有那么多的人手來處理這種事情，只有大賣家才會富余的人手來進(jìn)行這種表格的處理。
這種形式雖然麻煩一點(diǎn)，但從表現(xiàn)形式上看，這種方式顯得很專業(yè)，至少在版面上很美觀。并且利用這種方式，還可以根據(jù)自己的需要，創(chuàng)造性的設(shè)計(jì)出很精美的表格，從而能更好的美化自己的店鋪。如圖3所示。
對比一下，當(dāng)然很明顯，第三種的效果要美觀大方。下面我們就一起來做一個(gè)吧。
首先，打開DREAM，新建一個(gè)基本的HTML文件。
在這里，我們要插入表格。如何插入呢？我們只需要點(diǎn)擊上圖紅色方框所示位置，就可以找到表格的插入哦！大家可以自己試一試，不管是從那里插入表格，點(diǎn)擊之后，都會出現(xiàn)如圖8所示的界面。
在這里，根據(jù)設(shè)計(jì)，我們需要一個(gè)6行5列的表格，寬度為740像素，表格的寬度為1px。那么我們就如圖8所示，對行、列、寬度及參數(shù)進(jìn)行設(shè)置，其他的參數(shù)就不要調(diào)整，直接按圖8所示就行。設(shè)置完畢之后，直接點(diǎn)擊“確定”按鈕即可。
點(diǎn)擊之后，在Dw CS4的界面當(dāng)中，就會出現(xiàn)如圖9所示的表格了。
這樣一個(gè)表格的雛形就展現(xiàn)在我們面前了，我們下面將按照我們的設(shè)計(jì)將表格中的文字分別輸入，并對表格作一下調(diào)整。這里的調(diào)整主要是將單元格的對齊方式都設(shè)置為水平和垂直居中，文字大小及顏色變化，最后一行單元格進(jìn)行合并。
從這里，我們可以看到，一個(gè)表格的雛形已經(jīng)被我們建立起來了，但總覺得有些美中不足，這個(gè)美中不足主要體現(xiàn)在三個(gè)地方。
第一個(gè)地方就是表格的邊框，我們在前面插入表格時(shí)，已經(jīng)設(shè)定表格的寬度為1px，但現(xiàn)在展現(xiàn)在我們面前的邊框?qū)挾仁?px的，怎么解決呢？
造成這種現(xiàn)象的原因是單元格的之間有默認(rèn)間距，為了處理這一點(diǎn)，我們就要把這個(gè)默認(rèn)間距取消，取消的方法很簡單，只需要我們在代碼編輯窗口當(dāng)中，將style="border-collapse:collapse;"這個(gè)代碼放在表格的Table標(biāo)簽當(dāng)中。
加完之后，保存一下，我們再用瀏覽器看一看效果。
怎么樣，是不是消除了呢？但又出現(xiàn)了一個(gè)問題，那就是表格的邊框線的顏色是系統(tǒng)默認(rèn)的淺灰色，顯示時(shí)不是很明顯，能不能把邊框顏色加深一些呢？答案當(dāng)然是肯定的。我們還是再次回到Dw CS4的代碼編輯窗口當(dāng)中，將鼠標(biāo)定位到Table標(biāo)簽當(dāng)中，按一下空格鍵，此時(shí)代碼區(qū)就會自動彈出表格的屬性選擇框，我們在其中選擇“bordercolor”屬性。
雙擊此屬性，此時(shí)就會彈出邊框顏色選擇面板，在其中我們選擇自己需要的顏色。
在這里，我們選擇一種深灰色，選擇之后，保存文件，再次在瀏覽器中預(yù)覽，看看效果的變化。
表格的背景是單純的白色，給人的感覺不是很好，是否可以處理掉表格的純白背景呢？答案也是肯定的哦！接下來，我們就著手解決這個(gè)問題吧！
在DW的設(shè)計(jì)窗口當(dāng)中，用鼠標(biāo)拖選一行。
選擇之后，我們就可以在設(shè)計(jì)區(qū)看到實(shí)時(shí)效果了。
按照同樣的方式，我們將其他各行的背景顏色全部設(shè)置完畢，并保存下來。最后我們再來預(yù)覽一下，看看最后的效果吧。
想學(xué)習(xí)更多的網(wǎng)店裝修技巧，請關(guān)注網(wǎng)店管理軟件及其官方論壇（http://bbs.kaitao.cn/）。
推薦閱讀：利用新版微博做個(gè)店鋪促銷海報(bào)
http://www.kaitao.cn/taobaotuiguang/20130117113438.htm
普通的文字形式
這種形式應(yīng)該是最原始的一種尺碼數(shù)據(jù)列舉方式，在這里，我們只需要在編輯寶貝描述時(shí)，直接用文字鍵入，方便易行。這種方式也是很多小賣家正在使用的方式。
如果數(shù)據(jù)發(fā)生變化，我們可以隨時(shí)進(jìn)行修改，而不會增加任何操作，但這種形式對于我們店鋪形象的推廣沒有多大的益處，畢竟不太美觀。
第二種形式，圖片列舉。如圖2所示。
這種形式就是先用一些輔助軟件，制作表格，并在表格當(dāng)中填充數(shù)據(jù)，其次將這個(gè)表格處理成圖片，然后把這個(gè)圖片上傳到自己的圖片空間當(dāng)中，最后在編輯寶貝描述時(shí)，直接將這個(gè)圖片從空間當(dāng)中插入就行了。
這種形式可操作性不強(qiáng)，因?yàn)橐坏┪覀兊膶氊惓叽a數(shù)據(jù)發(fā)生變化，我們只能重新制作表格，生成圖片，上傳圖片，最后編輯修改。如果店鋪當(dāng)中的寶貝數(shù)量多的話，那這種表格的制作任務(wù)就會令人望而生畏。這也是為什么有那么多的小賣家寧愿選擇文字列舉形式的一個(gè)非常重要的原因，畢竟店小，沒有那么多的人手來處理這種事情，只有大賣家才會富余的人手來進(jìn)行這種表格的處理。
這種形式雖然麻煩一點(diǎn)，但從表現(xiàn)形式上看，這種方式顯得很專業(yè)，至少在版面上很美觀。并且利用這種方式，還可以根據(jù)自己的需要，創(chuàng)造性的設(shè)計(jì)出很精美的表格，從而能更好的美化自己的店鋪。如圖3所示。
對比一下，當(dāng)然很明顯，第三種的效果要美觀大方。下面我們就一起來做一個(gè)吧。
首先，打開DREAM，新建一個(gè)基本的HTML文件。
在這里，我們要插入表格。如何插入呢？我們只需要點(diǎn)擊上圖紅色方框所示位置，就可以找到表格的插入哦！大家可以自己試一試，不管是從那里插入表格，點(diǎn)擊之后，都會出現(xiàn)如圖8所示的界面。
在這里，根據(jù)設(shè)計(jì)，我們需要一個(gè)6行5列的表格，寬度為740像素，表格的寬度為1px。那么我們就如圖8所示，對行、列、寬度及參數(shù)進(jìn)行設(shè)置，其他的參數(shù)就不要調(diào)整，直接按圖8所示就行。設(shè)置完畢之后，直接點(diǎn)擊“確定”按鈕即可。
點(diǎn)擊之后，在Dw CS4的界面當(dāng)中，就會出現(xiàn)如圖9所示的表格了。
這樣一個(gè)表格的雛形就展現(xiàn)在我們面前了，我們下面將按照我們的設(shè)計(jì)將表格中的文字分別輸入，并對表格作一下調(diào)整。這里的調(diào)整主要是將單元格的對齊方式都設(shè)置為水平和垂直居中，文字大小及顏色變化，最后一行單元格進(jìn)行合并。
從這里，我們可以看到，一個(gè)表格的雛形已經(jīng)被我們建立起來了，但總覺得有些美中不足，這個(gè)美中不足主要體現(xiàn)在三個(gè)地方。
第一個(gè)地方就是表格的邊框，我們在前面插入表格時(shí)，已經(jīng)設(shè)定表格的寬度為1px，但現(xiàn)在展現(xiàn)在我們面前的邊框?qū)挾仁?px的，怎么解決呢？
造成這種現(xiàn)象的原因是單元格的之間有默認(rèn)間距，為了處理這一點(diǎn)，我們就要把這個(gè)默認(rèn)間距取消，取消的方法很簡單，只需要我們在代碼編輯窗口當(dāng)中，將style="border-collapse:collapse;"這個(gè)代碼放在表格的Table標(biāo)簽當(dāng)中。
加完之后，保存一下，我們再用瀏覽器看一看效果。
怎么樣，是不是消除了呢？但又出現(xiàn)了一個(gè)問題，那就是表格的邊框線的顏色是系統(tǒng)默認(rèn)的淺灰色，顯示時(shí)不是很明顯，能不能把邊框顏色加深一些呢？答案當(dāng)然是肯定的。我們還是再次回到Dw CS4的代碼編輯窗口當(dāng)中，將鼠標(biāo)定位到Table標(biāo)簽當(dāng)中，按一下空格鍵，此時(shí)代碼區(qū)就會自動彈出表格的屬性選擇框，我們在其中選擇“bordercolor”屬性。
雙擊此屬性，此時(shí)就會彈出邊框顏色選擇面板，在其中我們選擇自己需要的顏色。
在這里，我們選擇一種深灰色，選擇之后，保存文件，再次在瀏覽器中預(yù)覽，看看效果的變化。
表格的背景是單純的白色，給人的感覺不是很好，是否可以處理掉表格的純白背景呢？答案也是肯定的哦！接下來，我們就著手解決這個(gè)問題吧！
在DW的設(shè)計(jì)窗口當(dāng)中，用鼠標(biāo)拖選一行。
選擇之后，我們就可以在設(shè)計(jì)區(qū)看到實(shí)時(shí)效果了。
按照同樣的方式，我們將其他各行的背景顏色全部設(shè)置完畢，并保存下來。最后我們再來預(yù)覽一下，看看最后的效果吧。
想學(xué)習(xí)更多的網(wǎng)店裝修技巧，請關(guān)注網(wǎng)店管理軟件及其官方論壇（http://bbs.kaitao.cn/）。
推薦閱讀：利用新版微博做個(gè)店鋪促銷海報(bào)
http://www.kaitao.cn/taobaotuiguang/20130117113438.htm