Welcome! 登入 註冊
專區首頁 專區百科 專區論壇 專區部落格 專區地圖

Advanced

[講義] EDM/Newsletter製作

1. EDM設計原則


EDM/Newsletter可將最新的活動訊息或欲發佈的消息,以網頁設計的設計內容,透過email寄送給指定對象。

但因為必須同時考慮各種郵件軟體(如outlook)、及各家線上郵件平台(如Google Gmail, Yahoo! Mail)的呈現, 加上郵件平台及軟體對css 的支援性較差、會強制剝除某些css設定,因此需考慮以下設計原則:

1.只需單一html檔案。
2.將css直接寫入html。

JavaScript、iFrame、Flash 等語言,大部分都是不支援的。
3.圖片使用絕對路徑。圖片需要上傳至網路空間,再將圖片網址貼上。
4.一般的情況下,建議使用單欄設計。



2. HTML與CSS寫在同一個檔案裡


1. 範例:

http://mepopedia.com/~jinjin/webclass/edm-3.html

1. 將css寫在head裡


<head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>[2018年全國校際設計行銷創意競賽活動]</title> <style type=“text/css”> 此部分寫css語法 </style> </head>
<style type="text/css"> body {background: #ffffff; font-family:"微軟正黑體", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size:16px; line-height:150%; color:#444; margin:0; padding:0;} p,li {margin-bottom:14px; margin-top:0; font-family:"微軟正黑體","Helvetica Neue", Helvetica, Arial, sans-serif; font-size:16px; color:#999999; line-height:150%;} td, div {font-family:"微軟正黑體", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:13px; } a {color:#013275; text-decoration: none; font-weight: bold;} a:hover{color: #3695B0;} h1 {margin-top:15px; padding:0; color:#D70000; font-size:25px; font-weight:bolder; line-height:34px; font-family:"微軟正黑體", Arial, sans-serif;} h2 {margin-top:0; color:#D70000; font-size:18px; font-family:"微軟正黑體", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight:normal;} h3 {margin:0; font-family:"微軟正黑體", "Helvetica Neue", Helvetica, Arial, sans-serif;} </style>


2. css inline



由於部分 email clients 會無視電子郵件中的 head 和 style 標籤,因此如果你在測試時發現內容設定不符合預期,或是有跑版的情況,可以試著將 css inline。

Inline 小工具



html

<h1>三、競賽辦法</h1>


css

h1 { margin-top:15px; padding:0; color:#D70000; font-size:25px; font-weight:bolder; line-height:34px; font-family:"微軟正黑體","Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; }
合併

<h1 style=“color:#D70000; font-family:'微軟正黑體','Helvetica Neue’,Helvetica, Arial, sans-serif; font-size:25px; font-weight:400; line-height:34px; margin-top:15px; padding:0">三、競賽辦法</h1>

1. 範例:

http://mepopedia.com/~jinjin/webclass/edm1.html

以表格作為框架
<table width="100%" border="0" cellspacing="0" cellpadding=“0"> …. </table>

2. css inline範例:


<tr> <td align="center" valign="middle" style=“font-family:微軟正黑體; color:#E19D00; font-size:24px;”> <i>第十二屆威尼斯拉古納藝術獎</i></td> </tr>

3. 圖片絕對路徑:


先將圖片上傳至網路空間。
如上傳至hw02資料夾後,貼上圖片絕對路徑。

如:http://mepopedia.com/~web106-2b/hw02/hw02-105/img/001.jpg 



<tr> <td align="center" valign="middle" style="padding-top:15px;"><img src="http://www.cute.edu.tw/dvcd/master/img/mainpic.jpg" width="573" height="243" style="display:block;"></td> </tr> <tr> <td align="center" valign="middle" style="padding-bottom:15px; padding-top:15px;"><img src="http://www.cute.edu.tw/dvcd/master/img/divider.gif" width="573" height="28"></td> </tr>


3. EDM/Newsletter免費版型


可從免費版型中挑選適合的版型修改。
1.Free newsletter templates 
http://templates.cakemail.com
2.Free Newsletter Templates 
https://www.templatesbox.com/newsletters/index.htm



4. 課堂範例


(1) http://mepopedia.com/~jinjin/webclass/edm1.html
(2) http://mepopedia.com/~jinjin/webclass/edm2.html
(3) http://mepopedia.com/~jinjin/webclass/edm-3.html



5. 講義影音


https://youtu.be/y26OtUmRBUM