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