1丶不想要規規矩矩的排版布局方式?
2丶想在詳情描述里插入類似以下帶有熱點超鏈接的推薦模塊圖?
(可點擊進入1-5副小圖商品頁面,實現更高的客單價)
使用工具:photoshopcs5丶dreamweavercs5
PS操作步驟:
1丶用PS打開你已經做好的整體效果圖,開始切片。
2丶用切片工具,把上圖切成5個小圖(具體情況根據個人需要)。
3丶文件-儲存為Web和設備所用格式-儲存
4.點儲存之后,出現一個保存對話框,在格式選項卡上選擇“HTML和圖像”--保存
5丶點保存后,桌面將生成一個images的文件夾和一個HTML網頁(打開images文件夾,看到有5張商品圖和一張“分隔符”圖)。
6丶把這6張圖上傳到淘寶圖片空間商,包括分隔符圖片。
7丶右鍵剛才保存的HTML頁面---打開方式----記事本----復制包括<table></table>這對標簽之間的所有代碼。
8丶打開需要裝修的淘寶裝修頁面,在你需要插入該不規則布局的地方插入該代碼。(點
<。。。>源碼按鈕,進入源碼輸入頁面,粘貼剛才復制的代碼)
9丶到圖片空間復制圖片地址,然后到源碼界面替換src里面的圖片地址。
10丶把所有的圖片地址替換后,點《。。。》源碼按鈕,返回圖形界面,左鍵點一張圖片---點編輯---出現圖片的編輯界面----在“鏈接網址”上填上該寶貝的詳情頁面鏈接。
OK!完事!!!
DW操作步驟:
1丶打開Dreamweaver,新建HTML新頁面----插入--圖像(或者快捷鍵Ctl+Alt+I)
2丶左鍵點擊圖片---在軟件最底部會出現圖片屬性-----點左下角多邊形熱點工具
3丶點了多邊形熱點工具后,在你需要設置超鏈接的區域點4個點圍起該區域,在鏈接地址欄填上鏈接。
4丶設置其他熱點(如上操作)。
5丶文件-另存為
6丶右鍵HTML文件---打開方式--記事本---復制代碼..............................(其余操作類似上述PS法)
結尾:貌似寫得有點亂!只是寫給那些不懂代碼的人,歡迎吐槽!!希望能幫助到人。
樂發網超市批發網提供超市貨源信息,超市采購進貨渠道。超市進貨網提供成都食品批發,日用百貨批發信息、微信淘寶網店超市采購信息和超市加盟信息.打造國內超市采購商與批發市場供應廠商搭建網上批發市場平臺,是全國批發市場行業中電子商務權威性網站。
本文來源: 無需懂代碼!教你PS+DW打造精美排版!