1丶不想要規(guī)規(guī)矩矩的排版布局方式?
2丶想在詳情描述里插入類似以下帶有熱點(diǎn)超鏈接的推薦模塊圖?
(可點(diǎn)擊進(jìn)入1-5副小圖商品頁(yè)面,實(shí)現(xiàn)更高的客單價(jià))
使用工具:photoshop cs5丶dreamweaver cs5
PS操作步驟:
1丶用PS打開(kāi)你已經(jīng)做好的整體效果圖,開(kāi)始切片。
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)頁(yè)(打開(kāi)images文件夾,看到有5張商品圖和一張“分隔符”圖)。
6丶把這6張圖上傳到淘寶圖片空間商,包括分隔符圖片。
7丶右鍵剛才保存的HTML頁(yè)面---打開(kāi)方式----記事本----復(fù)制包括<table> </table>這對(duì)標(biāo)簽之間的所有代碼。
8丶打開(kāi)需要裝修的淘寶裝修頁(yè)面,在你需要插入該不規(guī)則布局的地方插入該代碼。(點(diǎn)
<。。。>源碼按鈕,進(jìn)入源碼輸入頁(yè)面,粘貼剛才復(fù)制的代碼)
9丶到圖片空間復(fù)制圖片地址,然后到源碼界面替換src里面的圖片地址。
10丶把所有的圖片地址替換后,點(diǎn)《。。。》源碼按鈕,返回圖形界面,左鍵點(diǎn)一張圖片---點(diǎn)編輯---出現(xiàn)圖片的編輯界面----在“鏈接網(wǎng)址”上填上該寶貝的詳情頁(yè)面鏈接。
OK!完事!!!
DW操作步驟:
1丶打開(kāi)Dreamweaver,新建HTML新頁(yè)面----插入--圖像(或者快捷鍵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文件---打開(kāi)方式--記事本---復(fù)制代碼..............................(其余操作類似上述PS法)
結(jié)尾:貌似寫得有點(diǎn)亂!只是寫給那些不懂代碼的人,歡迎吐槽!!希望能幫助到人。