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

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

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

　　名詞解釋

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

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

　　圖文混排的思路

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

　　使用div+CSS進(jìn)行圖文混排的好處

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

　　注意事項(xiàng)

　　設(shè)計效果圖時，盡管使文字區(qū)域?yàn)榫匦巍Ｈ绻盐淖终w排成圓形，那么將來純文本將很難用CSS。

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

　　處理圖片

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

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

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

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

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

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

　　第一步：在寶貝描述中插入div 標(biāo)簽，并加入樣式。在寶貝描述編輯框中點(diǎn)選第一個“源碼”按鈕，輸入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>放置在需要換行的文字中間來實(shí)現(xiàn)。</br>在HTML中表示換行，不同于div和p標(biāo)簽，它不是成對出現(xiàn)的。

　　第三步：在p標(biāo)簽中加入文字后，默認(rèn)情況下這些文字是對齊左上角的，而在設(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)編輯好的寶貝。如有其它需要做圖文混排的地方，以上步驟。

　　重點(diǎn)提示：

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

樂發(fā)網(wǎng)超市批發(fā)網(wǎng)提供超市貨源信息,超市采購進(jìn)貨渠道。超市進(jìn)貨網(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ī)則

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