1丶不想要規(guī)規(guī)矩矩的排版布局方式？

2丶想在詳情描述里插入類似以下帶有熱點(diǎn)超鏈接的推薦模塊圖？

（可點(diǎn)擊進(jìn)入1-5副小圖商品頁面，實(shí)現(xiàn)更高的客單價(jià)）

使用工具：photoshopcs5丶dreamweavercs5

PS操作步驟：

1丶用PS打開你已經(jīng)做好的整體效果圖,開始切片。

2丶用切片工具，把上圖切成5個(gè)小圖（具體情況根據(jù)個(gè)人需要）。

3丶文件-儲(chǔ)存為Web和設(shè)備所用格式-儲(chǔ)存

4.點(diǎn)儲(chǔ)存之后，出現(xiàn)一個(gè)保存對(duì)話框，在格式選項(xiàng)卡上選擇“HTML和圖像”--保存

5丶點(diǎn)保存后，桌面將生成一個(gè)images的文件夾和一個(gè)HTML網(wǎng)頁（打開images文件夾，看到有5張商品圖和一張“分隔符”圖）。

6丶把這6張圖上傳到淘寶圖片空間商，包括分隔符圖片。

7丶右鍵剛才保存的HTML頁面---打開方式----記事本----復(fù)制包括<table></table>這對(duì)標(biāo)簽之間的所有代碼。

8丶打開需要裝修的淘寶裝修頁面，在你需要插入該不規(guī)則布局的地方插入該代碼。（點(diǎn)

<。。。>源碼按鈕，進(jìn)入源碼輸入頁面，粘貼剛才復(fù)制的代碼）

9丶到圖片空間復(fù)制圖片地址，然后到源碼界面替換src里面的圖片地址。

10丶把所有的圖片地址替換后，點(diǎn)《。。。》源碼按鈕，返回圖形界面，左鍵點(diǎn)一張圖片---點(diǎn)編輯---出現(xiàn)圖片的編輯界面----在“鏈接網(wǎng)址”上填上該寶貝的詳情頁面鏈接。

OK！完事！！！

DW操作步驟：

1丶打開Dreamweaver，新建HTML新頁面----插入--圖像（或者快捷鍵Ctl+Alt+I）

2丶左鍵點(diǎn)擊圖片---在軟件最底部會(huì)出現(xiàn)圖片屬性-----點(diǎn)左下角多邊形熱點(diǎn)工具

3丶點(diǎn)了多邊形熱點(diǎn)工具后，在你需要設(shè)置超鏈接的區(qū)域點(diǎn)4個(gè)點(diǎn)圍起該區(qū)域，在鏈接地址欄填上鏈接。

4丶設(shè)置其他熱點(diǎn)（如上操作）。

5丶文件-另存為

6丶右鍵HTML文件---打開方式--記事本---復(fù)制代碼..............................(其余操作類似上述PS法)

結(jié)尾：貌似寫得有點(diǎn)亂！只是寫給那些不懂代碼的人，歡迎吐槽！！希望能幫助到人。

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

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

本文來源： 無需懂代碼！教你PS+DW打造精美排版！