大家好,我是一個淘寶新手,以前學過一點DW(DW是dreamweaver的簡稱,是一款網頁設計軟件),沒想到如今在淘寶上用上了。想必大家都見過一些比較大的店鋪或是商城,人家做促銷時,怎么樣實現一張圖片可以多個不同的連接呢?可能有些朋友會說,人家都是用PS切片,一塊塊切出來分開再另做鏈接的。其實不是的,使用PS切片來制作比較繁瑣,最大的缺點就是切片出來的圖片會失幀。下面給大家介紹《dreamweaver 8.0》是怎么實現一圖多個連接。DW的高手們多多指教,別拋磚喲!沒有DW軟件的朋友可以到百度上搜《dreamweaver 8.0》安裝時須要序列號,百度上搜也非常多,下載、安裝就跳過。廢話不多說,上張圖,避廣告嫌疑,寶貝做模糊處理,只是圖片未上連接。
一、DW界面介紹
1、雙擊打開軟件,新建一個HTML網頁。如圖:
或是點擊《文件》——《新建》——《HTML》——《創建》如圖:
2、簡單介紹下面幾個模式
代碼模式:所有東西以代碼顯示
拆分模式:是上半部分顯示代碼,下半部分示圖
設計模式:是全示圖操作
制作完成后,點擊中間地球圖標是預覽,選擇瀏覽器預覽。此時會彈出問你是否保存,點擊確定保存即可預覽。如圖:
二、制作連接
1、點擊《設計》按鈕,進入設計模式。
2、點擊《插入》——《圖像》選擇之前做好的促銷圖片后點擊《確定》。如圖:
彈出的窗口直接確定,如圖:
3、圖片屬性介紹
插入圖片后,點擊一下圖片選中,底部將會顯示圖片的屬性,如圖:
3、本地圖片地址替換成網絡圖片地址。
本地地址:就是圖片保存在你電腦上的地址(只能在本機看到)
網絡地址:是上傳到網絡圖片空間里的地址(保存到服務器大家都可以看到)
凡是想在網絡上顯示的圖片,都必須先上傳到網上,所以將圖片傳到淘寶圖片空間里(上傳方法與其它圖片一樣)
點擊《賣家中心》——《圖片空間》——《圖片上傳》——《添加圖片》——《確定上傳》。如圖:
上傳完成后,點擊《連接》來復制地址 如圖:
復制好連接后回到DW軟件里,將之前的本地地址選中,把剛在空間里復制的地址,按《Ctrl + V》粘貼上去,再點一下其它地方或是按鈕,圖片地址就替換過來了。如圖:
4、在圖片上添加熱點(熱點就是連接區域)
點擊圖片選中,底部將出現圖片屬性后,點擊《矩形熱點工具》在你須要連接的寶貝上,拉動選取區域,畫上熱點。如圖:
熱點區域為有藍色(也有其它顏色)透明狀態區分,將其它寶貝都畫上熱點區域。點擊左下角的《指針熱點工具》可以選中,選中熱點區域時,4個角會出現圓點。此時可以調整區域的大小,如圖:
5、添加連接地址
點擊左下角的那個箭頭圖標《指針熱點工具》,點擊選中上面的熱點區域,熱點四個角會出現一個點,屬性下面連接處默認有個:#號(#號表示空連接)選中刪除掉,如圖:
此時找到你的寶貝連接地址(當點擊時連接到的地址)打開你的寶貝詳情頁,瀏覽器上出現的地址就是你的寶貝連接地址。選中地址,按《Ctrl +C》復制地址。如圖:
刪除掉連接處的:#號后,把剛才復制的寶貝連接按《Ctrl + V》粘貼上去,此時,點擊目標處的三角形按鈕,選擇第一個《_blank》(blank是在新窗口打開)如圖:
其它連接操作一樣,全部制作完成連接后。
點擊上面的地球圖標選擇瀏覽器預覽測試一下,如圖:
測試過沒問題后,點擊代碼按鈕,切換到代碼模式。按《Ctrl +A》全選后按《Ctrl+C》復制代碼,如圖:
復制好代碼后,進入你的賣家中心《店鋪裝修》里,在你須要放置的位置,新建一個自定義內容區。如圖:
添加好自定義模塊后,點擊《編輯》后再點擊雙箭頭圖標《源碼》進入到代碼模式,將剛才復制好的代碼,按《Ctrl +V》粘貼進去。再次點擊雙箭頭圖標《源碼》可切換回示圖模式。點擊保存。預覽沒問題后即可發布。如圖:
最后點擊發布操作:
樂發網超市批發網提供超市貨源信息,超市采購進貨渠道。超市進貨網提供成都食品批發,日用百貨批發信息、微信淘寶網店超市采購信息和超市加盟信息.打造國內超市采購商與批發市場供應廠商搭建網上批發市場平臺,是全國批發市場行業中電子商務權威性網站。
本文來源: 玩轉促銷圖HTML代碼