姬小光前端興趣班【第008期】- 真正的切圖大法

上一期我們使用了 word 轉存大法來生成網頁，主要是為了幫助大家理解表格佈局的原理。那麼今天我們就來學習一下真正的切圖大法。

切圖大法之真正的切圖大法

首先讓我們來看一個基本的營銷郵件設計稿，設計稿可能是 PSD（PhotoShop自己的檔案格式）格式，也可能是 jpg,，png 等其他的圖片格式。

一般情況下，我們從設計師手裡拿到的都是 PSD 檔案，當然，大家也可以隨便找一張圖片，把它想象成網頁設計稿，來模擬今天的課程練習。

注意，上一期我請大家預先安裝 PhotoShop，不知道大家有沒有安裝，雖然其他軟體也可以切圖，但是學會了 PS，沒事還可以 P 個圖樂呵一下不是？言歸正傳，我這裡使用的 Adobe PhotoShop CC，其他版本的介面略有差異，不影響使用。

首先選擇 檔案->開啟 ，找到一個 PSD 檔案，或者從網上下載一個圖片即可。這裡我們使用一個示例設計稿（為節省大家流量，圖片已縮小）：

在左側工具欄中找到裁剪工具，或者下圖中的一種，並切換到切片工具：

如果你的設計稿是 PSD 檔案，建議開啟檔案後直接 Ctrl+A 全選，Ctrl+Shit+C 合併拷貝，Ctrl+N 新建，Ctrl+V 貼上，這樣就得到了一張合併後的圖片，方便切割。

在合併後的圖片上，使用切片工具劃分割槽域，你所圈出來的區域，即將成為一張獨立的圖片，並作為網頁的一部分內容存在（可以新增連結，動作等），目前我們先不管需求如何，憑感覺隨意切割即可：

圖中有編號的部分，就是所謂的切片了。

下面最關鍵的一步來了，估計有的同學已經想到了，不會又是另存為吧？！對！只差一點點！Ctrl+Alt+Shift+S 或者 檔案->儲存為 web 所用格式：

這些引數你可以先不用修改，直接點選右下角“儲存”：

在 格式 處，選擇 “HTML 和影像” 儲存到桌面，即可得到一個初步的網頁了！

我們雙擊開啟這個網頁，你會發現，又一個網頁就這樣誕生了。

這就是傳統的切圖方法，也是十年前的頁面仔切圖仔都在做的事情。目前這種方法在平臺型的頁面開發中已經完全淘汰了，也沒有所謂的“切圖”一說了。

不過，在一些郵件營銷頁面中，為了保持最好的相容性，還是會使用這種方法來開發頁面，此時這個技能就非常有用了。

好了，這節課就到這裡。下一節，我們將基於本次課程生成的程式碼，做一些整理和加工，使之成為真正可以使用的網頁。