Y拍店舖首頁 美工問題(想有"行銷廣告大圖") - 網賣

雖然有點久了..但趁著放假回一下這篇推文
希望能幫到大家

如果對敘述不清楚，可以搜尋我的賣場PGS7
避免廣告嫌疑我就不PO連結了

拍賣基本上只接受HTML和部分的CSS語法所以較網頁來說限制很多
但也因為這樣，相對的簡單很多
我自己就是完全沒有基礎(我是念土木的)
從美工、語法、伺服器都是自己摸索的

原PO有買YAHOO商店的話
應該可以看到編輯HTML的選項
總共分為三個區域
上方(原PO要的首頁廣告區) 左方(商品分類的地方)
和下方(通常是用來放聯絡資訊/廣告用)

基本上做法都一樣
首先先將要放上去的廣告圖準備好
HTML將圖片插入的語法是
<img src="圖片網址">
舉例來說，圖片的網址是http://xxx.com/test.jpg
要將圖片放入拍賣中的語法就是
<img src="http://xxx.com/test.jpg">
這樣，拍賣上方的欄位就會出現這張圖片了
然後依序把廣告圖語法崁入就好

但是這樣做會有一個問題，對於大螢幕的人來說
因為銀幕夠大，所以會變成兩張圖片併排的狀況
這時可以在每一張圖片語法的後放加上<br>
這樣就可以強制換行，讓每一張照片垂直併排了

接下來就是給圖片加上連結，讓客人可以直接點圖片連結到廣告商品
連結的語法是
<a href="目的網址">連結內容</a>
連結內容可以是圖片、可以是文字
例如我們要做一個連結回首頁
我們可以這樣做
<a href="http://yahoo.com.tw">回首頁</a>
這樣就會產生一個可以點選的"回首頁"三個字
點下去後就回連結到奇摩首頁

而要將廣告變成連結的話 就只要把上方範例中的回首頁三個字換成圖片的語法
就會變成<a href="http://yahoo.com.tw><img src="http://xxx.com.tw/test.jpg></a>
這樣就會變成一張可以連結首頁的圖片了

另外
如果本身有使用Photoshop的話
Photoshop中有一個切片功能
將製作好的圖片使用切片區分好區域之後
選擇檔案->輸出為網頁用 並選擇輸出成html
Photoshop就會將這張圖片切成設定的樣子
並自動產生html語法
先把切好的圖片放上圖床後
將html檔中的圖片網址逐一更換回圖床的網址
並把需要做連結的圖片加上<a href=""></a>的語法
最後把修改好的html語法直接複製貼上就搞定了
非常簡單

最後回應一下推文的幾個問題
首先是圖床
一般比較常用的圖床有imgur、imageshack等
好處是免費，而且在台灣圖片開啟的速度都不錯
但我用了半年左右之後就因為流量太大圖片被砍
由於是無預警的，所以會出現死圖的狀況但不會被通知到
一開始是可以這樣使用，但有考慮要做大
或拍賣已經成長到一定程度的時候就要考慮一下是否要換付費圖床了

我自己是直接租一台虛擬主機
放圖片只是其中一個功用，其他諸如企業信箱、官網等都是很適合網拍業者的
主機一年的租金約3200台幣，空間、流量、企業信箱使用者數都無上限
再加上購買網址的費用800/year
一年約4000元的支出，依照虛擬主機商不同價錢也會有所變動
供大家參考

再來是有板友提到的大銀幕部分
這邊我的建議是
與其去滿足大銀幕的客人
不如去滿足"大部分"的客人
並不是每個人都有大銀幕，當你把圖片寬度做得太大的時候
小銀幕的客人包含行動裝置、在公司辦公室逛網拍的上班族等
都會受到限制沒辦法一眼就看清楚整個版面
如果因為圖片太大，就算沒有傳輸速度上的問題
需要左右移動卷軸這件事本身就是很不利購物的一件事
所以我們都是固定將圖片寬做成1000px
這樣可以滿足所有的瀏覽者



※ 引述《hotaru (開心過每一天)》之銘言：
: 各位前輩好
: 今年一月開始把YAHOO賣場升級為店舖了
: 目前版面是用YAHOO提供的範例
: 但是發現 沒有辦法像一些店舖首頁一樣
: 有放 大圖海報的欄位(應該都是花錢請專人設計CSS/HTML吧)
: 我才剛經營半年左右 也沒有很多預算可以請專業人才設計
: 本身有一點點程式/網頁設計的基礎
: (部分看得懂 下載範例做網站可以改部分的程度XD)
: 想請問有沒有人知道那邊有一些教學或是素材資源
: 可以讓我自學一下，我不要求要弄得跟專業大賣家一樣漂亮
: 只求可以在店舖首頁上方，可以弄出幾個放行銷廣告的大圖欄位
: 類似這樣的版面：http://ppt.cc/XUKo
: (一開始可以不用做得這麼漂亮沒關係 QQ)
: 因為YAHOO自定HTML編輯，有分區塊來編輯HTML。
: 無法直接套用一般網站範例
: 請有經驗的前輩可以指點一下小妹
: 如果我是要有圖片的欄位的話 是要改哪些區塊呢?
: 或是給予任何相關建議~~
: 感激不盡~~~謝謝^_^
: 連絡方式：站內信 / email:[email protected]
: 祝大家生意興隆喔~~~~~~

--