姬小光前端興趣班【第009期】- 切圖大法之程式碼的整理

姬光發表於2015-07-08
前端

enter image description here

上一期我們已經學會了使用 PS 切圖並生成網頁，那麼這一期我們看看生成後的程式碼如何處理，才能變成一個合格的網頁。

切圖大法之程式碼的整理

由於我們上一期使用的是一個郵件營銷活動的頁面，也就是說要通過郵件的形式傳送給使用者，在使用者的郵箱裡開啟瀏覽的網頁。

郵件客戶端或者網頁版的郵箱系統，對網頁都有諸多限制，比如不能用絕對定位，不能用內聯樣式（後續課程講解）等。

所以表格佈局再加上一點行內樣式（回覆 003），是最穩妥的方式。

讓我們用第四期（回覆 004）讓大家下載的編輯器，或者其他可以編輯文字的軟體，開啟上一期生成的 htm 檔案：

enter image description here

大家可以看到，這裡面的程式碼我們已經基本能看懂了。

我們之前學過文件型別只需要寫 <!doctype html> 即可，那麼首先我們把頭部的文件型別改掉。再把多餘的註釋刪掉，並整理程式碼：

enter image description here

現在我們開啟頁面看一下：

enter image description here

你會發現頁面內容是在視窗的左側，這是由於頁面內容比視窗的寬度窄，而我們又沒有設定居中樣式造成的。

那麼，頁面的主體內容是 table 元素，我們就在 table 上新增一個居中的樣式： enter image description here

儲存並重新整理頁面，可以看到內容已經可以居中了： enter image description here

此處的 margin 代表元素的外邊距，第一個 0 代表上下的外邊距是 0，第二個 auto 代表左右的外邊距是 auto 自動，所以可以左右居中。

對於一個營銷郵件，一定是要有連結來引導使用者去我們真正的網站的，所以下面，我們來給頁面加一些連結。

程式碼中的五個 img 就是我們上一期切出的切片，假設我麼要在優惠券上加一個連結，那麼按順序可以知道這是第三個 img，故我們在第三個 img 外面套上一層超連結，假設連結到百度首頁：

enter image description here

再次儲存後，當我們點選優惠券區域時候，頁面就跳轉到了百度首頁。

有了以上這些步驟，這個營銷郵件基本上就可以使用了。

不過還有一些小細節要處理，比如 img 標籤在某些郵件客戶端裡會有藍色邊框，底部也會有一個小間距。這時我們需要給所有的 img 邊框加上如下的樣式：

enter image description here

或者：

enter image description here

最終的效果是一樣的，之所以用 display 和 vertical-align 的區別，是因為 img 元素本身是行內元素，在一行之中是以基線對齊的，所以基線之下的部分會有一個小空隙，關於這些細節知識，我們以後再慢慢講解。

另外還有一個問題是，我們的圖片都是相對路徑：

enter image description here

如果傳送郵件時沒有以附件形式帶過去，這些圖片在客戶端是無法顯示的，所以我們必須找到一個可以上傳圖片的地方，把它們釋出到網上去，然後得到一個絕對路徑的地址，再嵌入的頁面中就可以了。

沒有了解過伺服器和虛擬主機的同學，可以使用又拍雲之類的上傳圖片，得到的地址替換這個相對地址即可。

好了，到這一期為止，切圖大法就講完了。產品和運營同學可以按照這些步驟獨立完成郵件營銷頁面了。

enter image description here

相關文章