doudou (19).gif 終於被三小發現如何使出這招了。。。。。

網拍圖解1    

尤其是賣衣服的,如果想來個"當季特賣"(多件一起折扣)的話,勢必在同一畫面上會出現多款商品,這時候很便利的就是隨便任點圖上的商品,就連到介紹此單品的商品資料頁。

(如點上圖的粉紅色洋裝就會另開視窗到此洋裝的詳細介紹)

sophy0515 (21).gif吐奶的是有些自訂功能似乎只有付費的VIP會員才能使用,如在賣場上一連串的自製廣告頁面等等。

三小先澄清一下,以下內容都係三小實際try過,以免費露天會員的身分完成,100%新手,請多指教囉~ 

任務目標:製造一個"春天特賣:任兩件$199"的商品頁,裡面有9款商品供選擇,買家可從這頁面連到9個商品各自的商品資料頁(如9件商品裡有牛仔裙,那你點牛仔裙的照片就可以再開一個視窗看牛仔裙裙的詳細尺寸資料)。

 

開始前必須知道的規則:

1. 免費露天會員的貼圖限制

一篇文一般只能貼三張圖(當然如果你會運用html語法,先把圖片上傳到網路空間或露天圖庫的話,是可以貼多張圖片的,語法下面也會教喔),圖片大小限制在800 x 800 pixel 正方形(很多專業的賣家的圖片都是 800 x 4000 的那種長條大小,不過三小試過上傳這種長條,尺寸被自動縮小到 160 x 800,圖小看不清囉,可能是三小的是免費版吧)。 

2. 露天文章內容似乎無法用image map功能

image map的功能就是可以很輕鬆的在一張圖片上分割幾個點選區塊,然後你自己可以定外連的連結。是相當便利的功能喔~ 

三小有看到一些大賣家(有付費)的賣場廣告都是用這種image map在處理的,如上面那張圖片。可惜在內文裡面,都無法支援image map。。。。

沒關係啦,還是有辦法到達羅馬的~

3. 上傳照片的空間問題

露天圖庫可以提供大家一些網路空間,三小已經上傳了好多年了還有約2800的圖片張數空間。當然如果你已經賣掉的商品(也不會再賣了),建議也可以刪掉那些不必要的檔案。其他的好用網路圖片空間,三小想推薦的是Google出的picassa相簿,原因是。。。。啊就很好用啦~ 

4. 使用軟體

露露通上傳圖片到露天圖庫很便利喔~

網拍圖解2  

"相簿式上架"可以直接把圖檔拉到中間白色這一塊,再按"全部上傳"就可以了~ 

露露通下載

另外三小建議大家裝個Dreamweaver來用用(下載),這個阿多伯(Adobe)的網頁軟體很不錯喔,而且使用起來一點也不困難,可以很清楚看到網頁呈現的樣子,這比你在露天直接打一堆html再按下一步來得容易許多~也比較不會白忙一場。你在Dreamweaver設計成想要的樣子後,只要把那邊的程式碼複製貼到露天上,就可以輕鬆完成了。

 

---------------------------------------

sophy0515 (13).jpg 好啦,那我們要開鼠囉~(阿美上身)

目標:製造一個"春天特賣:任兩件$199"的商品頁,裡面有9款商品供選擇,買家可從這頁面連到9個商品各自的商品資料頁。

1.  準備事項

注意這9件商品的各自商品頁,都是之前就已經存在自己的賣場了,看起來也都ok。現在只是把9個商品一起整理到這個特賣的頁面上而已。

2. 如何進行

利用表格和貼圖的方式,讓每張圖外連到對應的商品頁面。

(方法二:編排設計一張有這些商品的特賣圖片,再運用image map的方式,分割圖上區塊外連到商品頁面。)

 

adobe-dreamweaver-cs5-5-38

Dreamweaver打開後點選 " Create New" 的 "HTML"。

三小要用最簡單的方法--- 就是做一個3 x 3的九宮格,每格放一張商品圖。加表格的原因是比較好控制圖片大小和位置。

按下去"Insert"選擇"Table"-----

網拍圖解3  

網拍圖解4

三小這邊要做 3 x 3的表格,還要符合露天800 pixels的規則,所以設定"Table width: 800 pixels"。。。。還有Border thickness最好改成0,這樣就不會出現表格的線條了~

網拍圖解5

然後就是把你的商品圖片直接拉到剛剛弄好的表格裡(從電腦的檔案直接拖拉到Dreamweaver即可),一格放一張圖。注意我的圖檔指的是存在自己電腦上的檔案,現在還不需要抓網路的圖檔喔~因為這樣在製作的時候才可以順利調整大小,觀察哪一張圖放在哪裡比較美之類的。(注意表格的大小加圖後也要盡量維持在800喔)

接下來要設定一下每張圖的外連網站:

網拍圖解6

你先點一下表格中想要設定的圖片,如我點的是牛仔裙(小圖出現在最左邊,PROPERTIES字樣下面),

注意"Src" 後面那一長串是這張圖檔從哪裡來(圖的位址),這個不用自己打,只要把圖片拖到Dreamweaver的視窗裡就會自動出現......

"Link"後面是這張圖要接去哪裡(可以把牛仔裙的露天商品頁的網址複製貼在這兒),

"Target" 後面指的是連結要另開視窗還是在原來的視窗,一般我們都要另開視窗所以會選擇 "_blank"

"Alt" 是說人家滑鼠滑過這張圖片時會出現什麼說明文字,這最好還是寫一下比較親民。(如牛仔裙) 

"Border" 如果不希望圖片設定連結之後會多出藍色的邊框,就請設定成0吧。  

每張圖大約都要設定這些東西,這樣弄一弄之後就可以直接copy程式碼到露天了:

 網拍圖解7    

注意你是從"Design" 切換到" Code",看看Dreamweaver已經都幫你把Html寫好了,我們複製的話只要copy(點選之後按Ctrl + C) <body>和</body>之間的東東就可以了,當然你爽的話也可以整個copy過去,露天會自動幫你只留下中間的部分。

(最好要加減 save 一下Dreamweaver的檔案喔)

然後我們再去露天賣東西

切換到HTML很奇怪的是要按"文字模式",然後把剛剛co到都貼上去(Ctrl + V),

 注意:這個轉換HTML和文字的按鈕現在已經變成 "<>",同樣在物品說明的旁邊,按下<>會有新視窗跳出來,讓妳可修改原始碼喔。

網拍圖解8  

這時候因為我們之前在Dreamweaver都是用電腦的圖檔在看的,所以現在你必須改一下圖檔 "Src" 後面的位址,讓它連到圖片在網路上的位置(如露天圖庫),才能看的見圖圖喔~

網拍圖解9 

 

首先你可以到露天的照片圖庫上去找商品的照片,找到後點選它會自動另開視窗出現大張的原圖:
網拍圖解10
按右鍵"複製圖片網址",取得圖片在網路空間上的位址之後咧,再回到露天po文的編輯器,


網拍圖解11  

改一下 src = "後面那一串東東",貼上你剛取得的網址。(如果你剛才alt都有注解每件商品是什麼的話,現在就能很快的找到每件商品的對應src) 

記住如果你要貼多張圖的話,只要有那張圖片的網路位址,就可以用:

<img src= "http://........jpg">

這樣的語法就可以無限貼圖了

這樣逐一改完後就大功告成囉~~!!

 

 cf (33).gif  

露天  

(在露天的網站成功出現! )

 

快來看三小的賣場吧。

 

延伸閱讀:

猩猩之我心: 露天拍賣新手之基本編排教學

  

tongolele 發表在 痞客邦 PIXNET 留言(18) 人氣()


留言列表 (18)

發表留言
  • 亞力士
  • 小三您好:
    看了您的此篇文章受益良多~
    想請教你一個問題:
    露天拍賣的商品~只要有人下標~
    所有的連結圖片及內容都無法修改~
    除了露天拍賣原本提供的那3張圖除外~
    若是內容的商品價位更改~
    只能用新增的方式加在最後~
    時間一長會有很多的更新內容~
    請問可有方法可更改之前的內容~不要用附加上去的方法~
    哪怕是只有更改圖片也可以~求您為我解惑~
    謝謝!
  • 這點老實說也是我的困擾耶~
    聽說是要"是留下買賣紀錄.如果賣家已經賣出東西.又改了商品頁說明.
    那遇到糾紛時.看不到原始網頁.買家就會吃虧了."
    所以有賣出去的商品就算下架又重上架, 還是無法修改商品資料! 哭哭啦!!!!!!!!
    您可參考這裡:http://forum.ruten.com.tw/replylist.php?article=6714367

    tongolele 於 2012/05/23 21:45 回覆

  • 王文忠
  • 請問我的露天功能沒有html編輯器

    也無文字功能編輯器

    也無法使用<img,也無法使用<a href

    是不是露天把這個功能關閉啦?
  • 喔.......要特別注意用"Maxthon"或"IE"的瀏覽器來上露天po文喔, 不然有些功能就跑不出來了.

    另外要用html編輯器時, 很怪的是要點選"文字模式(原始碼)"才能進入程式編寫喔~

    tongolele 於 2012/08/09 09:51 回覆

  • 悄悄話
  • jason chao
  • 請問在dw cs6中我只見到
    s 的原始檔
    T 的拍替代
    ID
    L 的連結
    M 地圖
    R 的目標
    C 的類別

    就是找不到妳說的

    "Alt" 是說人家滑鼠滑過這張圖片時會出現什麼說明文字,這最好還是寫一下比較親民。

    "Border" 還有這個如果不希望設定連結之後多出藍色的邊框,就請設定成0吧。

    請問去那找
    因為我門外漢
    還請相告
    謝謝!

  • hiiiiiii~~~~ 當您把圖片插入表格後, 點選任一張表格當中的圖片, 就會出現"alt" 等等的設定, 請您看我上面這篇文的第7張圖片~~

    重點是要先選取圖片, 才會出現這個properties視窗在下面, 讓您設定喔~ ^^


    tongolele 於 2013/05/21 14:33 回覆

  • V
  • 請問我也是用Dreamweaver把圖做分割後,依照您的教學複製</body>內的語法,想說放在商品內文外連圖的下面卻只有顯示圖卻沒有辦法點擊連結是什麼原因呢?
  • hi hi~~~

    1. 我以上是用表格插入圖的方式, 不是用單張圖分割的做法喔

    2. 插入圖後, 必須在圖片上加上連結, 之後才能點選.......

    您會在html碼會看到類似這樣:
    http://www.kkk.com.tw", target=blank>
    要有a href 這樣的語法才會有連結可選~

    可以檢查一下, 是否有這種語法. 3qqqqqqq~~~~

    tongolele 於 2013/06/25 17:13 回覆

  • soeasy121
  • 感恩小三老師

  • 不客氣捏~~~ ^^

    tongolele 於 2013/11/20 21:27 回覆

  • 露露
  • 請問有沒有單張圖片切割,
    不會有儲存格邊寬距離的方法
    我想一張圖片有多個連結><
  • HI HI~~ 可能要用image map的做法喔~~ 您可能要google一下了, 因為我也沒很厲害....>"<

    tongolele 於 2014/05/17 08:02 回覆

  • nina60531
  • 請問 我找您的方法做了
    可是我圖片在露天還是顯現不出來
    可是我是要用在露天的首頁拍賣圖
    是因為這樣才顯現不出來嗎
  • ?? 您是說第一張圖片嗎?? 那用原本的介面就可以加圖了喔. 用表格的方式最好設在內文(不是第一張圖), 這樣客人要點選也比較方便喔。

    tongolele 於 2014/07/04 20:25 回覆

  • Emily
  • 顯不出來,有可能是因為露天不支援map的功能吧~因為昨天用DW做好後,用代碼測試過,是可以的~但在露天那邊就是用不出來,沒有辦法做任何連結~哎...我也要求解,或許是我功力不夠...求解~要怎麼才能用得出image map的功能呢?拜託...
  • Emily
  • 今天再一提,大家不用MAP功能去試了~因為露天不支援MAP功能,因為今天用tr td表格的模式去試,結果是可以的~不要再想爆頭囉~

  • 謝謝告訴我們大家~~ ^^

    tongolele 於 2014/07/04 20:20 回覆

  • 訪客
  • 你好~請問一下~我露天沒有你的文字模式/原始碼這東西~該怎麼使用向你那個模式~
    我的原始碼的地方~只有<> 這2個符號~
  • hiiiiiiiiiii~~~~~ 謝謝你的提醒喔~~~~ 因為我這篇文比較久了, 現在他介面有改了, 直接點<> 那個符號就可以進入原始碼的修改視窗, 3q!!

    tongolele 於 2015/06/05 16:47 回覆

  • 君
  • 您好 我放了語法 <img src=" 圖片網址"> 為何還是跑不出來呢

    感謝您 ilovejeanpan@hotmail.com
  • HI HI~~ 因為有時候只要有個字母或符號打錯就會跑不出來喔...........
    主要就是要確認圖片網址的正確性........建議您可以用拷貝--貼上的比較不會錯喔~

    tongolele 於 2015/08/24 13:33 回覆

  • ㄚ之
  • 請問yahoo也可以這樣用嗎??
  • 只要是任何可以自己打HTML的都可以這樣用喔~~ ^^

    tongolele 於 2015/08/24 13:29 回覆

  • maple211053
  • 您的教學分享,幫助了我,感恩^^
  • 很高興可以幫到忙~~ ^^

    tongolele 於 2015/11/03 16:57 回覆

  • 子
  • 本來都只打打字,貼三張圖就上架.無意中看見了三小老師的無私教學,真的很清楚.要認真來學了.謝謝喔
  • 不會啦~~ 還好寫的可以看懂就好~ ^^

    tongolele 於 2015/11/03 16:58 回覆

  • 露天初學者
  • Dreamweaver 請問一下 , 這個軟體是需要付費購買的還是有免費下載?謝謝喔
  • 魚
  • 謝謝您的教學,真的很棒~~解決我圖片過大&圖片多張的問題^3^