# 電子報網頁版型設計建議

由於 Outlook 2007 的一個[嚴重缺失](/post/2007/10/27/When-read-HTML-format-email-in-Outlook-2007-that-some-css-attribute-does-not-support "Outlook 2007 讀取 HTML 格式的 Email 時有些 CSS 屬性不支援 ")，又讓電子報設計的創意再更少一些了，由於能用的CSS屬性實在不多，光是「背景圖」就很惱人了，設計師只能用簡單的背景色彩鋪陳網頁的版面，至於許多創意的背景圖設計就只能用單張圖片顯示了。

以下是依我個人經驗對設計的建議：

1.  因為現在許多人都使用像 Gmail, Hotmail 等 WebMail 的方式收信，所以郵件中若是有使用太多會影響 WebMail 原有版面的部分應該全部都會被刪除，導致版型亂七八糟的。  
    這篇文章有完整且詳細的對照表：[A Guide to CSS Support in Email: 2007 Edition](https://www.campaignmonitor.com/css/ "A Guide to CSS Support in Email: 2007 Edition")  
    或你可以下到[這裡](https://web.archive.org/web/20150310205339/https://www.campaignmonitor.com/blog/archives/2007/06/windows_live_mail_drops_a_litt_1.html "Windows Live Mail drops a little more CSS support")下載 PDF 檔回去列印。  
    
2.  盡量不要用 CSS 來排版，用傳統的 TABLE 排版方式是比較安全的作法！  
    注意：DIV標籤在 Outlook 2007 中「竟然不支援 CSS 中的 width 這個屬性」，所以你用 DIV 包網頁是沒用的！  
    
3.  版型最外層最好用一個 TABLE 包裹住整個網頁，並設定固定的寬度，建議寬度為 700px 以內。  
    
4.  如果網頁的頁首部分會用到漂亮而複雜的底圖，建議將整塊頁首都做成一張圖片，缺點是這裡就無法再貼上什麼動態的文字了。  
    
5.  不要在電子報的網頁中放入「表單」，因為 Outlook 2007 不支援，且在 Outlook 2003 中使用表單也無法用快速鍵（如用 TAB 切換欄位），實在不方便又不實用。有很多人會在電子報中嵌入「問卷」實在不夠明智，都不知道填寫的人很痛苦，不小心按下空白鍵，Outlook會自動跳到下一封信去了，再回來的時候所有輸入的東西都消失了。=.=''  
    
6.  文字與圖片的地方盡量切乾淨，版面設計的時候就不要設計「疊在一起的樣子」。  
    
7.  如果要將電子報的版型加上圖片的外框，就用TABLE設計九宮格把圖放在四邊的 TD 裡，但如果電子報的長度不固定的話，建議不用做這樣的設計。  
    
8.  盡量少用 GIF 動畫，因為在 Outlook 2007 中看不到這些動畫。
9.  不要用 PNG 圖檔做透明背景。
    

另外，以下是一些「非常強烈建議不要用」的設計方式：

1.  不要使用任何 JavaScript 或任何像 onclick, onkeypress, onmouseover 等等的事件(event)！  
    
2.  不要在電子報網頁中嵌入 Flash 動畫。  
    
3.  不要用 IFRAME 嵌入其他網頁。
    

**相關連結**

-   [A Guide to CSS Support in Email: 2008 Edition](http://www.campaignmonitor.com/css/) 
    
-   [A Guide to CSS Support in Email: 2007 Edition](https://www.campaignmonitor.com/css/)
    
-   [A Guide to CSS Support in Email: 2006 Edition](https://www.campaignmonitor.com/css/)
    
-   Email Standards Project