適用場景

不懂 HTML/Dreamweaver 的淘寶賣家，利用 Photoshop 切片工具將設計稿切片、設定超連結、匯出 HTML+圖片，再上傳圖片至圖床、將 HTML 代碼貼入店鋪自定義區，零代碼實現可點擊的促銷海報/導航圖。

前置準備

• Photoshop CS6/CC 任意版本
• 圖床：QQ 相冊、淘寶圖片空間、或自建圖床（需支援外鏈）
• 店鋪後台：店鋪管理 → 自定義區域

操作流程

第一階段：設計與切片

1. 新建文件：寬 750px（淘寶自定義區寬度），高度自定，解析度 72dpi，RGB 模式。



2. 排版設計：完成海報/導航圖設計，圖層結構清晰。



3. 切片工具（C 切換至切片工具），像拉選框一樣框選熱區。建議切片越簡單越好，避免過多碎片。

第二階段：設定超連結

1. 瀏覽器打開目標商品/頁面，複製完整 URL。



2. 切片選取工具（切片工具下拉）雙擊切片，彈出「切片選項」。



3. 填入：
   • URL：貼上商品連結
   • 目標：_blank（新分頁開啟）或 _self（當前頁）
   • Alt 文字：輸入無障礙描述（如「女裝新品專區」）



4. 重複為所有切片設定對應連結。

第三階段：匯出 HTML 與圖片

1. 檔案 > 存儲為 Web 所用格式（Ctrl+Shift+Alt+S）。
2. 預設：JPEG 高品質 80%，或 PNG-24（含透明）。
3. 點擊「儲存」，格式選「HTML 和圖片」，儲存至本地資料夾。



4. 資料夾內會產生：xxx.html 與 images/ 資料夾（含所有切片圖片）。

第四階段：上傳圖片至圖床

1. 打開 QQ 空間相冊（或淘寶圖片空間），上傳 images/ 內所有圖片。
2. 上傳完成後，逐張右鍵圖片 → 「屬性」 → 複製圖片 URL（以 https:// 開頭）。

第五階段：替換 HTML 中的圖片路徑

1. 用記事本/代碼編輯器打開 xxx.html。
2. 選單 檢視 > 原始檔（或直接編輯），複製 <body> 到 </body> 之間的所有代碼。

第六階段：植入店鋪自定義區

1. 店鋪後台 → 店鋪管理 > 自定義區域 → 點擊編輯器左上角 「代碼」 模式（切換至 HTML 原始碼視圖）。



2. 將剛複製的 HTML 代碼貼入（頂端或底端）。再次點擊「代碼」切回可視模式，此時圖片顯示紅叉（路徑仍指向本地）。



3. 逐張右鍵紅叉圖片 → 「屬性」 → 將 src 屬性替換為 QQ 相冊對應圖片的外鏈 URL。



4. 切回可視模式確認圖片正常顯示，點擊「儲存」。

常見問題與解決

問題	原因	解決
切片邊緣有白縫/錯位	切片未貼合像素網格	視圖 → 對齊 → 像素網格；切片工具選項勾選「對齊至像素」
連結點擊無反應	URL 格式錯誤或目標屬性錯誤	確認 URL 含 https:// 或 https://；目標設 _blank
圖片上傳後顯示盜鏈圖示	圖床防盜鏈限制	改用淘寶官方圖片空間、或支援外鏈的圖床（如七牛云、又拍云）
手機端切片錯位	自定義區寬度固定 750px，手機自動縮放	設計稿嚴格按 750px 寬度；切片坐標以百分比或相對定位（需手動修改 HTML/CSS）

進階技巧

• 圖片懶加載：手動在 <img> 標籤加 loading="lazy"。
• 響應式適配：在 HTML 頭部加 <meta name="viewport" content="width=device-width, initial-scale=1.0">，CSS 設 img{max-width:100%;height:auto;}。
• 熱區圖替代切片：單張大圖配合 <map>+<area> 定義多邊形熱區，減少圖片請求數。