對于在寶貝描述中僅使用圖片，或大部分使用圖片對寶貝進行說明的賣家來說，減少純圖片，轉(zhuǎn)而用圖文混排的方法，將更符合淘寶對寶貝描述的要求。

　　圖文混排的寶貝詳情頁：圖文結(jié)合的寶貝詳情頁，能用文字的部分便用文字，圖片作為輔助信息，不將文字介紹轉(zhuǎn)化為圖片。

　　純圖片的寶貝詳情頁：詳情頁絕大多數(shù)內(nèi)容均為圖片，甚至連文字說明也做成圖片。

　　名詞解釋

　　div是網(wǎng)頁中經(jīng)常用來進行網(wǎng)頁布局的一個標(biāo)簽，它本身就是一個容器，可以用來放置其它的元素。

　　CSS是用來進行網(wǎng)頁風(fēng)格設(shè)計的，可以使人更能有效地控制網(wǎng)頁外觀，可以擴充精確指定網(wǎng)頁元素位置，外觀以及創(chuàng)建特殊效果的能力。

　　圖文混排的思路

　　把圖片做為div的背景，然后用CSS控制文字在DIV中的位置，從而來實現(xiàn)圖文混排。

　　使用div+CSS進行圖文混排的好處

　　使代碼量比使用表格實現(xiàn)的圖文混排更少，便于一淘搜索引擎和其它搜索引擎順利收錄寶貝描述的內(nèi)容，對后期修改寶貝描述、進行SEO優(yōu)化都有很在大的好處。

　　注意事項

　　設(shè)計效果圖時，盡管使文字區(qū)域為矩形。如果把文字整體排成圓形，那么將來純文本將很難用CSS。

　　矩形文字區(qū)塊示意

　　處理圖片

　　在進行混排之前需要用大部分賣家都會選用的圖像加工軟件Adobe Photoshop對圖片進行處理，將需要進行混排的圖片導(dǎo)出為JPG格式，便于混排時候的編輯。如果賣家有別的工具能夠?qū)⑿枰幚淼膱D像生成JPG格式，也可以選用其他工具。

　　第一步：使用PS的切片工具對需要導(dǎo)出的圖形進行切片。

　　第二步：正式導(dǎo)出之前，點擊圖層前的小眼圖標(biāo)，取消選中，將文字層隱藏，只留下需要處理的圖片層。

　　第三步：使用Ctrl+shift+alt+S的快捷鍵，或者點擊“文件?存儲為web格式”打開“存儲為web格式”，選中切片后導(dǎo)出，將圖片格式設(shè)置為JPG，然后存儲切片。

　　將圖片插入網(wǎng)頁

　　在進行圖文混排前，先將進行圖文混排的JPG圖片上傳到淘寶后臺的圖片空間，然后再進入寶貝描述的編輯頁面。

　　第一步：在寶貝描述中插入div 標(biāo)簽，并加入樣式。在寶貝描述編輯框中點選第一個“源碼”按鈕，輸入div標(biāo)簽。div這個標(biāo)簽是成對出現(xiàn)，且放在符號“<>”中，結(jié)尾的標(biāo)簽要在“<>”中加入“/”，來表示標(biāo)簽結(jié)束。如一對div標(biāo)簽，寫法就是<div>…</div>（…是指div中具體的內(nèi)容）。

　　第二步：用CSS設(shè)置div的高度和寬度為圖片的寬度和高度，高度和寬度的樣式放在div中格式為“style=”你的樣式””，并以空格隔開。如圖片像素為750px*406px，則格式為“width:750px, height:406px”，代碼會變?yōu)?ldquo;<div style=”width:750px; height:406px”></div>”。

　　第三步：用CSS設(shè)置div的背景為剛剛上傳到空間的圖片，格式為“background: (圖片的地址)”。

　　設(shè)置完了之后，回到正常視圖可以看到設(shè)置后的效果。

　　加入文本并定位

　　圖片設(shè)置好后，便需要將文字排入網(wǎng)頁。

　　第一步：在<div>和</div>之間插入p標(biāo)簽，p標(biāo)簽在HTML中是指段落，用它來放置屬于同一個段落的文本。同div類似，它的寫法是“<p>…</p>”。

　　第二步：在<p>和</p>之間插入文本內(nèi)容。如果需要換行，可以將</br>放置在需要換行的文字中間來實現(xiàn)。</br>在HTML中表示換行，不同于div和p標(biāo)簽，它不是成對出現(xiàn)的。

　　第三步：在p標(biāo)簽中加入文字后，默認情況下這些文字是對齊左上角的，而在設(shè)計稿中這些文字是偏右的，這時需要用CSS樣式中的padding屬性將文本的定位到右邊。Padding是用來控制標(biāo)簽內(nèi)部的空白空間的一個樣式，它的寫法是：“”padding:top right bottom left;”” top、right、bottom和left分別代表當(dāng)前標(biāo)簽的上右下左四個方向的留白大小，將這些文字的留白大小定為上80px， 右和下為0px，左為380px會比較合適。

　　第四步：文字的字體、字號、顏色等樣式，可返回編輯視圖直接用文字工具來設(shè)置。

　　完成的效果

　　最后：保存已經(jīng)編輯好的寶貝。如有其它需要做圖文混排的地方，以上步驟。

　　重點提示：

　　不過用div+CSS它也有它的不足之處，那就是在網(wǎng)頁中的字體受消費者所用PC系統(tǒng)中的安裝字體限制。因此建議賣家在進行寶貝描述編輯時選用大部分消費者電腦中都安裝的字體，比如Windows XP的系統(tǒng)自帶常用字體是宋體、黑體、仿宋、楷體和隸書，而Windows Vista、Windows 7和Windows 8中，系統(tǒng)自帶常用字體多了一個微軟雅黑。

樂發(fā)網(wǎng)超市批發(fā)網(wǎng)提供超市貨源信息,超市采購進貨渠道。超市進貨網(wǎng)提供成都食品批發(fā),日用百貨批發(fā)信息、微信淘寶網(wǎng)店超市采購信息和超市加盟信息.打造國內(nèi)超市采購商與批發(fā)市場供應(yīng)廠商搭建網(wǎng)上批發(fā)市場平臺,是全國批發(fā)市場行業(yè)中電子商務(wù)權(quán)威性網(wǎng)站。

本文內(nèi)容整合網(wǎng)站：百度百科、知乎、淘寶平臺規(guī)則

本文來源： 告別純圖片：打造完美詳情頁