終於被三小發現如何使出這招了。。。。。
尤其是賣衣服的，如果想來個"當季特賣"（多件一起折扣）的話，勢必在同一畫面上會出現多款商品，這時候很便利的就是隨便任點圖上的商品，就連到介紹此單品的商品資料頁。
（如點上圖的粉紅色洋裝就會另開視窗到此洋裝的詳細介紹）
很吐奶的是有些自訂功能似乎只有付費的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. 使用軟體
露露通上傳圖片到露天圖庫很便利喔～
"相簿式上架"可以直接把圖檔拉到中間白色這一塊，再按"全部上傳"就可以了～
另外三小建議大家裝個Dreamweaver來用用（下載），這個阿多伯（Adobe）的網頁軟體很不錯喔，而且使用起來一點也不困難，可以很清楚看到網頁呈現的樣子，這比你在露天直接打一堆html再按下一步來得容易許多～也比較不會白忙一場。你在Dreamweaver設計成想要的樣子後，只要把那邊的程式碼複製貼到露天上，就可以輕鬆完成了。
---------------------------------------
好啦，那我們要開鼠囉～（阿美上身）
目標：製造一個"春天特賣：任兩件$199"的商品頁，裡面有9款商品供選擇，買家可從這頁面連到9個商品各自的商品資料頁。
1. 準備事項
注意這9件商品的各自商品頁，都是之前就已經存在自己的賣場了，看起來也都ok。現在只是把9個商品一起整理到這個特賣的頁面上而已。
2. 如何進行
利用表格和貼圖的方式，讓每張圖外連到對應的商品頁面。
（方法二：編排設計一張有這些商品的特賣圖片，再運用image map的方式，分割圖上區塊外連到商品頁面。）
Dreamweaver打開後點選 " Create New" 的 "HTML"。
三小要用最簡單的方法--- 就是做一個3 x 3的九宮格，每格放一張商品圖。加表格的原因是比較好控制圖片大小和位置。
按下去"Insert"選擇"Table"-----
三小這邊要做 3 x 3的表格，還要符合露天800 pixels的規則，所以設定"Table width: 800 pixels"。。。。還有Border thickness最好改成0，這樣就不會出現表格的線條了～
然後就是把你的商品圖片直接拉到剛剛弄好的表格裡（從電腦的檔案直接拖拉到Dreamweaver即可），一格放一張圖。注意我的圖檔指的是存在自己電腦上的檔案，現在還不需要抓網路的圖檔喔～因為這樣在製作的時候才可以順利調整大小，觀察哪一張圖放在哪裡比較美之類的。（注意表格的大小加圖後也要盡量維持在800喔）
接下來要設定一下每張圖的外連網站：
你先點一下表格中想要設定的圖片，如我點的是牛仔裙(小圖出現在最左邊，PROPERTIES字樣下面)，
注意"Src" 後面那一長串是這張圖檔從哪裡來（圖的位址），這個不用自己打，只要把圖片拖到Dreamweaver的視窗裡就會自動出現......
"Link"後面是這張圖要接去哪裡（可以把牛仔裙的露天商品頁的網址複製貼在這兒），
"Target" 後面指的是連結要另開視窗還是在原來的視窗，一般我們都要另開視窗所以會選擇 "_blank"，
"Alt" 是說人家滑鼠滑過這張圖片時會出現什麼說明文字，這最好還是寫一下比較親民。(如牛仔裙)
"Border" 如果不希望圖片設定連結之後會多出藍色的邊框，就請設定成0吧。
每張圖大約都要設定這些東西，這樣弄一弄之後就可以直接copy程式碼到露天了：
注意你是從"Design" 切換到" Code"，看看Dreamweaver已經都幫你把Html寫好了，我們複製的話只要copy（點選之後按Ctrl + C） <body>和</body>之間的東東就可以了，當然你爽的話也可以整個copy過去，露天會自動幫你只留下中間的部分。
（最好要加減 save 一下Dreamweaver的檔案喔）
然後我們再去露天賣東西！
切換到HTML很奇怪的是要按"文字模式"，然後把剛剛co到都貼上去（Ctrl + V），
注意：這個轉換HTML和文字的按鈕現在已經變成 "<>"，同樣在物品說明的旁邊，按下<>會有新視窗跳出來，讓妳可修改原始碼喔。
這時候因為我們之前在Dreamweaver都是用電腦的圖檔在看的，所以現在你必須改一下圖檔 "Src" 後面的位址，讓它連到圖片在網路上的位置（如露天圖庫），才能看的見圖圖喔～
首先你可以到露天的照片圖庫上去找商品的照片，找到後點選它會自動另開視窗出現大張的原圖：
按右鍵"複製圖片網址"，取得圖片在網路空間上的位址之後咧，再回到露天po文的編輯器，
改一下 src = "後面那一串東東"，貼上你剛取得的網址。(如果你剛才alt都有注解每件商品是什麼的話，現在就能很快的找到每件商品的對應src)
記住如果你要貼多張圖的話，只要有那張圖片的網路位址，就可以用:
<img src= "http://........jpg">
這樣的語法就可以無限貼圖了～
這樣逐一改完後就大功告成囉～～！！
(在露天的網站成功出現! )
快來看三小的賣場吧。
延伸閱讀：
猩猩之我心: 露天拍賣新手之基本編排教學
留言列表
三小食記 (1)
{{ article.title }}
