編輯器製作點小圖變大圖   首頁＞網頁相關美編技巧教學＞製作點小圖變大圖

註：預防版面擴版的問題，詳細使用方式可參考操作手冊「網頁圖片美編處理」
功能說明    

圖縮小了，那產品怎麼看得仔細？網路購物的產品圖片是最重要的，所以也藉機來告訴大家「怎麼用編輯器製作點小圖變大圖的效果」！

此教學僅針對「怎麼用編輯器製作點小圖變大圖的效果」，若要查閱編輯器的其他功能，請點選操作手冊。

要做到點選小圖，另開視窗顯示大圖(或其它圖)有三個程序，分別為：

（一）於編輯器置入小圖 → （二）於小圖加上超連結，並指定連結至大圖的網址 → （三）將小圖框線設定為0
 
（一）於編輯器置入小圖
步驟一    
開啟「編輯器」畫面，開始編輯文字訊息。

如果您是使用購物商城版本的管理者，可由『訊息刊登』、『商品刊登』、『商城介紹說明』等幾個地方進入編輯器；企業網站版本的使用者，則可由『訊息刊登』、『自訂頁面登錄』、『商城介紹說明』等幾個地方進入編輯器。
 
步驟二    
點選「 插入/編輯影像」
 
步驟三    
點選「瀏覽已上傳的圖片或檔案」，上傳圖片
 
步驟四    
設立資料夾（若您要上傳的圖片，已經有建立的資料夾，可跳過此步驟），輸入名稱後，點選「新增資料夾」
 
資料夾名稱建立，請使用英文命名較佳(例：最新消息"news")，這樣程式判別才不會發生錯誤。
為防止檔案越傳越多，越傳越亂，新增資料夾管理是很重要的。建議可以依單元建立資料夾(例：最新消息"news")，再點進去上傳相關圖片及檔案。
要先建立完資料夾後，點選資料夾進入，再上傳圖片或檔案。已上傳的圖片及檔案是無法拖移進資料夾的！
 
步驟五    
選擇圖片要放置的資料夾
 
步驟六    
選擇要上傳的小圖和大圖，點選「上傳檔案」
 
步驟七    
選擇要插入的「小圖」
 
顯示在哪個資料夾。
該資料夾內的檔案。
 
步驟八    
選擇好圖片後，注意圖片的寬度不要太寬，以防止破版喔！若寬度超過530像素，建議可調整圖片的寬度，調整後按下確定。
 
步驟九    
圖片插入成功
【 TOP↑ 】
 
（二）於小圖加上超連結，並指定連結至大圖的網址
步驟十    
先取得已上傳大圖的「實體路徑」，取得「實體路徑」的方法如下：

同「步驟三、插入圖片」方式，選擇大圖後，可在影像屬性「URL」看到大圖的網址。
 
您可在畫面上紅色框框的地方，看到該圖片的網址，圈選後按下滑鼠右鍵「複製」，然後直接關閉視窗即可。
註：圖片網址路徑說明：
 
 
步驟十一    
建立超連結，先將圖片選取反白，然後點選『 插入/編輯超連結 』(一定要先反白選取，否則點選插入鈕會沒反應)
 
將圖片選取反白。
點選『 插入/編輯超連結 』。
 
步驟十二    
將大圖的「實體路徑」貼至(或輸入至)「URL」的欄位（不包含http://）
 
步驟十三    
選擇「目標」的「新視窗（blank）」，按下「確定」。
 
選擇「目標」。
「目標」的下拉式選單，選擇【新視窗（ _blank ）】。
選擇好後，目標框架名稱會自動選取【 _blank 】，按下「確定」即可。
【 TOP↑ 】
 
（三）將小圖框線設定為 0
步驟十四    
修改圖片框線，增加超連結後，會發現圖片周圍增加了藍色的框線，為了美觀，我們可以進一步的修改框線，將圖片的框線隱藏。

點選圖片，按下滑鼠右鍵，選擇「影像屬性」。
 
步驟十五    
將圖片編框設為「0」，此時可以看到預覽的畫面，圖片的編框已經不見了，然後按下確定。
 
將圖片編框設為「0」。
此時可以看到預覽的畫面，圖片的編框已經不見了，然後按下確定。
 
步驟十六    
完成圖片設定後，即可按下送出，完成訊息設定。
 
訊息內的小圖，點選後另開視窗為大圖。
另開視窗（大圖）。