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

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

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

　　名詞解釋

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

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

　　圖文混排的思路

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

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

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

　　注意事項(xiàng)

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

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

　　處理圖片

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

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

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

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

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

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

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

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

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

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

　　加入文本并定位

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

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

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

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

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

　　完成的效果

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

　　重點(diǎn)提示：

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

樂(lè)發(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ī)則

本文來(lái)源： 告別純圖片：打造完美詳情頁(yè)