在一些特別的節日裡大家是否會想用簡單的方式來傳遞祝福與關心呢?
今天就分享如何用html製作專屬個人特色的賀卡!
Step.1 規劃版型架構
首先在製作前建議先想好基本的版型架構，但考量到一般收件信箱的格式，基本上建議寬度應保持在500-650px，過長的寬度反而不易瀏覽。
Step.2 製作元素圖片
製作前可以先決定要頁面要放置的圖片並加以裁切成需要的尺寸
建議軟體：FastStone(可免費試用30天)
相關教學：海芋小站─FastStone Capture 的使用教學
Step.3 編輯Html、置入圖片
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<table width="500" cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" align="center"> <table width="500" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" > <tr> <td width="110" height="72" border="0" colspan="2"> <img src="i/baby-image.jpg" width="500" height="384" alt="可愛的彤寶寶"/></td> </tr> <tr> <td width="282" border="0" > <p style="color:#0075F8; margin:15px 15px; font-size:12px; line-height:20px"> 最卡哇依的彤寶寶與好友小鹿鹿<br />來給大家拜個早年囉!<br />祝大家在兔兔年都<b style="color:#F39">朝氣滿滿</b>、<b style="color:#F39">相親相愛</b>唷! </p> </td> <td width="218" height="72" border="0"rowspan="2" valign="bottom"> <img src="i/rabbit.jpg" width="218" height="85" alt="兔子" /></td> </tr> <tr> <td width="282" height="25" border="0" ><img src="i/line.jpg" width="282" height="25" alt="裝飾線" /></td> </tr> </table> |
Step.4 進行細部樣式調整
在文字部分可以具個人的巧思更改內容與樣式，以下就簡單介紹如何來進行更改：
原先的原始碼為：
1 2 3 4 |
<p style="color:#0075F8; margin:15px 15px; font-size:12px; line-height:20px"> 最卡哇依的彤寶寶與好友小鹿鹿<br />來給大家拜個早年囉!<br />祝大家在兔兔年都 <b style="color:#F39">朝氣滿滿</b>、<b style="color:#F39">相親相愛</b>唷! </p> |
更改文案的方式：
- <p>指的就是段落，若您的文字有多個段落，複製貼上<p>~</p>即可增加段落
- <br />是指折行，在文字想折行的地方加上<br />即可達成折行的效果
- <b>會使文字呈現粗體，<i>會使文字呈現斜體，<u>會使文字呈現底體，將文字放在<b>~</b>、<i>~<i>、<u>~<u> 中間即可。
- <p style="color:#0075F8; margin:15px 15px 15px 15px; font-size:12px; line-height:20px"> 裡的style是針對段落內的文字樣式進行調整：
color指的是文字的顏色，您可參考對照的色碼表來替換顏色。
margin指的是邊界的距離，4個數字分別依序代表上、中、下、左。
line-height指的是行距。
依據上述的方式就能簡單的製作出簡易的電子賀卡囉～
如何將完成的電子報發送給親朋好友們，請參考使用outlook與IE發送電子賀卡
相關文章 Related posts:
