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

Advanced

[講義] EDM/Newsletter製作

網頁設計與語法（HTML/CSS） 文章列表 發表文章 PDF 列印（下載）
JinJin [ 站內寄信 / PM ]
[講義] EDM/Newsletter製作

分類標籤: 網頁設計與語法（HTML/CSS）  106-2《中國》竹視傳二B-進階網頁設計  106-2《中國》竹視傳二C-進階網頁設計
  1. 1. EDM設計原則
  2. 2. HTML與CSS寫在同一個檔案裡
  3. 2.0.1 範例：
  4. 2.1 將css寫在head裡
  5. 2.2 css inline
  6. 2.2.1 範例：
  7. 2.2.2 css inline範例：
  8. 2.2.3 圖片絕對路徑：
  9. 2.3 EDM/Newsletter免費版型
  10. 2.4 課堂範例
  11. 2.5 講義影音

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。

[url=http://zurb.com/ink/inliner.php]Inline 小工具[/url]



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



推薦 / 評論　 分享到Facebook     回應文章 Quote
1045445134 [ 站內寄信 / PM ]
Re: [講義] EDM/Newsletter製作

分類標籤: 網頁設計與語法（HTML/CSS）
http://127.0.0.1:52249/preview/app/index.html

設計概念：我希望為自己喜歡的遊戲做一個推廣
製作心得:雖然自己電腦版本是cc版，全是英文看不太懂，但我還是做完啦，英文真的是我人生中的一大阻礙

推薦 / 評論　 分享到Facebook     回應文章 Quote
Newer Topic Older Topic