對(duì)于服裝淘寶店主,在寶貝描述中增加寶貝尺碼表是很有必要的。但是,純文字列舉是不是有點(diǎn)粗糙呢,如果能在寶貝描述中插入表格就好了。今天我們就詳細(xì)介紹下如何用DREAMWEAVER在寶貝描述中插入表格。
普通的文字形式
這種形式應(yīng)該是最原始的一種尺碼數(shù)據(jù)列舉方式,在這里,我們只需要在編輯寶貝描述時(shí),直接用文字鍵入,方便易行。這種方式也是很多小賣家正在使用的方式。
如果數(shù)據(jù)發(fā)生變化,我們可以隨時(shí)進(jìn)行修改,而不會(huì)增加任何操作,但這種形式對(duì)于我們店鋪形象的推廣沒有多大的益處,畢竟不太美觀。
第二種形式,圖片列舉。如圖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ù)就會(huì)令人望而生畏。這也是為什么有那么多的小賣家寧愿選擇文字列舉形式的一個(gè)非常重要的原因,畢竟店小,沒有那么多的人手來處理這種事情,只有大賣家才會(huì)富余的人手來進(jìn)行這種表格的處理。
這種形式雖然麻煩一點(diǎn),但從表現(xiàn)形式上看,這種方式顯得很專業(yè),至少在版面上很美觀。并且利用這種方式,還可以根據(jù)自己的需要,創(chuàng)造性的設(shè)計(jì)出很精美的表格,從而能更好的美化自己的店鋪。如圖3所示。
對(duì)比一下,當(dāng)然很明顯,第三種的效果要美觀大方。下面我們就一起來做一個(gè)吧。
首先,打開DREAMWEAVER,新建一個(gè)基本的HTML文件。
在這里,我們要插入表格。如何插入呢?我們只需要點(diǎn)擊上圖紅色方框所示位置,就可以找到表格的插入哦!大家可以自己試一試,不管是從那里插入表格,點(diǎn)擊之后,都會(huì)出現(xiàn)如圖8所示的界面。
在這里,根據(jù)設(shè)計(jì),我們需要一個(gè)6行5列的表格,寬度為740像素,表格的寬度為1px。那么我們就如圖8所示,對(duì)行、列、寬度及參數(shù)進(jìn)行設(shè)置,其他的參數(shù)就不要調(diào)整,直接按圖8所示就行。設(shè)置完畢之后,直接點(diǎn)擊“確定”按鈕即可。
點(diǎn)擊之后,在Dw CS4的界面當(dāng)中,就會(huì)出現(xiàn)如圖9所示的表格了。
這樣一個(gè)表格的雛形就展現(xiàn)在我們面前了,我們下面將按照我們的設(shè)計(jì)將表格中的文字分別輸入,并對(duì)表格作一下調(diào)整。這里的調(diào)整主要是將單元格的對(duì)齊方式都設(shè)置為水平和垂直居中,文字大小及顏色變化,最后一行單元格進(jìn)行合并。
從這里,我們可以看到,一個(gè)表格的雛形已經(jīng)被我們建立起來了,但總覺得有些美中不足,這個(gè)美中不足主要體現(xiàn)在三個(gè)地方。
第一個(gè)地方就是表格的邊框,我們?cè)谇懊娌迦氡砀駮r(shí),已經(jīng)設(shè)定表格的寬度為1px,但現(xiàn)在展現(xiàn)在我們面前的邊框?qū)挾仁?px的,怎么解決呢?
造成這種現(xiàn)象的原因是單元格的之間有默認(rèn)間距,為了處理這一點(diǎn),我們就要把這個(gè)默認(rèn)間距取消,取消的方法很簡(jiǎn)單,只需要我們?cè)诖a編輯窗口當(dāng)中,將style="border-collapse:collapse;"這個(gè)代碼放在表格的Table標(biāo)簽當(dāng)中。
加完之后,保存一下,我們?cè)儆脼g覽器看一看效果。
怎么樣,是不是消除了呢?但又出現(xiàn)了一個(gè)問題,那就是表格的邊框線的顏色是系統(tǒng)默認(rèn)的淺灰色,顯示時(shí)不是很明顯,能不能把邊框顏色加深一些呢?答案當(dāng)然是肯定的。我們還是再次回到Dw CS4的代碼編輯窗口當(dāng)中,將鼠標(biāo)定位到Table標(biāo)簽當(dāng)中,按一下空格鍵,此時(shí)代碼區(qū)就會(huì)自動(dòng)彈出表格的屬性選擇框,我們?cè)谄渲羞x擇“bordercolor”屬性。
雙擊此屬性,此時(shí)就會(huì)彈出邊框顏色選擇面板,在其中我們選擇自己需要的顏色。
在這里,我們選擇一種深灰色,選擇之后,保存文件,再次在瀏覽器中預(yù)覽,看看效果的變化。
表格的背景是單純的白色,給人的感覺不是很好,是否可以處理掉表格的純白背景呢?答案也是肯定的哦!接下來,我們就著手解決這個(gè)問題吧!
在DW的設(shè)計(jì)窗口當(dāng)中,用鼠標(biāo)拖選一行。
選擇之后,我們就可以在設(shè)計(jì)區(qū)看到實(shí)時(shí)效果了。
按照同樣的方式,我們將其他各行的背景顏色全部設(shè)置完畢,并保存下來。最后我們?cè)賮眍A(yù)覽一下,看看最后的效果吧。

普通的文字形式

如果數(shù)據(jù)發(fā)生變化,我們可以隨時(shí)進(jìn)行修改,而不會(huì)增加任何操作,但這種形式對(duì)于我們店鋪形象的推廣沒有多大的益處,畢竟不太美觀。
第二種形式,圖片列舉。如圖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ù)就會(huì)令人望而生畏。這也是為什么有那么多的小賣家寧愿選擇文字列舉形式的一個(gè)非常重要的原因,畢竟店小,沒有那么多的人手來處理這種事情,只有大賣家才會(huì)富余的人手來進(jìn)行這種表格的處理。
這種形式雖然麻煩一點(diǎn),但從表現(xiàn)形式上看,這種方式顯得很專業(yè),至少在版面上很美觀。并且利用這種方式,還可以根據(jù)自己的需要,創(chuàng)造性的設(shè)計(jì)出很精美的表格,從而能更好的美化自己的店鋪。如圖3所示。

首先,打開DREAMWEAVER,新建一個(gè)基本的HTML文件。


點(diǎn)擊之后,在Dw CS4的界面當(dāng)中,就會(huì)出現(xiàn)如圖9所示的表格了。
這樣一個(gè)表格的雛形就展現(xiàn)在我們面前了,我們下面將按照我們的設(shè)計(jì)將表格中的文字分別輸入,并對(duì)表格作一下調(diào)整。這里的調(diào)整主要是將單元格的對(duì)齊方式都設(shè)置為水平和垂直居中,文字大小及顏色變化,最后一行單元格進(jìn)行合并。

第一個(gè)地方就是表格的邊框,我們?cè)谇懊娌迦氡砀駮r(shí),已經(jīng)設(shè)定表格的寬度為1px,但現(xiàn)在展現(xiàn)在我們面前的邊框?qū)挾仁?px的,怎么解決呢?
造成這種現(xiàn)象的原因是單元格的之間有默認(rèn)間距,為了處理這一點(diǎn),我們就要把這個(gè)默認(rèn)間距取消,取消的方法很簡(jiǎn)單,只需要我們?cè)诖a編輯窗口當(dāng)中,將style="border-collapse:collapse;"這個(gè)代碼放在表格的Table標(biāo)簽當(dāng)中。





在DW的設(shè)計(jì)窗口當(dāng)中,用鼠標(biāo)拖選一行。



樂發(fā)網(wǎng)超市批發(fā)網(wǎng)提供超市貨源信息,超市采購(gòu)進(jìn)貨渠道。超市進(jìn)貨網(wǎng)提供成都食品批發(fā),日用百貨批發(fā)信息、微信淘寶網(wǎng)店超市采購(gòu)信息和超市加盟信息.打造國(guó)內(nèi)超市采購(gòu)商與批發(fā)市場(chǎng)供應(yīng)廠商搭建網(wǎng)上批發(fā)市場(chǎng)平臺(tái),是全國(guó)批發(fā)市場(chǎng)行業(yè)中電子商務(wù)權(quán)威性網(wǎng)站。
本文內(nèi)容整合網(wǎng)站:百度百科、知乎、淘寶平臺(tái)規(guī)則
本文來源: 手把手教你做寶貝描述頁的尺寸表格