PDA

View Full Version : Html Email


orso
01-18-2007, 02:15 AM
Does anyone have or know of a tutorial on how to make a html email from using dreamweaver to emailing it out. Or suggestion and tips of them. I know some emails sometimes block it so anything else would be great. thanks.

chriskq
01-18-2007, 02:34 AM
Ok so u have to use VERY basic table layout with a doctype of

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


to make it work in all email clients heres a few things u cant really do
1. no colspans or rowspans
2. no background images (apart from on body (wrapper) table shown in mine below)
3. no inline css or referencing any css classes etc.
things u have to do
1. give a width and height to every image
2. give each <td> a width

im currently doing the email template for this dreamweaverClub, and even i've run into a few problems becoz of the design. Ill post the first half of the code to give u an idea of how u code an email


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html;charset=UTF-8" http-equiv="Content-Type">
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center" background="http://www.dreamweaverclub.com/newsletter/2006-11/bg.gif">
<tbody><tr>
<td width="100%">
<!-- start html email //-->
<table width="624" cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffffff">
<tr>
<td width="624" height="2"><img src="http://www.massarcade.com/chris_testing/misc/blueBorder.gif" width="624" height="2" alt=" " title="" /></td>
</tr>
</table>
<table width="624" cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffffff">
<tr>
<td width="2"><img src="http://www.massarcade.com/chris_testing/misc/blueBorder.gif" width="2" height="57" alt=" " title="" /></td>
<td width="620" align="left"><img src="http://www.dreamweaverclub.com/newsletter/2006-11/logo.png" alt="logo (2K)" height="57" width="476"></td>
<td width="2"><img src="http://www.massarcade.com/chris_testing/misc/blueBorder.gif" width="2" height="57" alt=" " title="" /></td>
</tr>
</table>
<table width="624" cellspacing="0" cellpadding="0" border="0" bgcolor="#719eb9" align="center">
<tr>
<td width="2"><img src="http://www.massarcade.com/chris_testing/misc/blueBorder.gif" width="2" height="19" alt=" " title="" /></td>
<td width="10"></td>
<td width="610" height="19"><font size="2" face="arial, verdana, helvetica, sans-serif" color="#ffffff" style="font-size:12px;">Tutorials and new from the Dreamweaver Club</font></td>
<td width="2"><img src="http://www.massarcade.com/chris_testing/misc/blueBorder.gif" width="2" height="19" alt=" " title="" /></td>
</tr>
</table>
<table width="624" cellspacing="0" cellpadding="0" border="0" bgcolor="#dfe9f0" align="center">
<tr>
<td width="2"><img src="http://www.massarcade.com/chris_testing/misc/blueBorder.gif" width="2" height="19" alt=" " title="" /></td>
<td width="10"></td>
<td width="610" height="19"><font size="1" face="arial, verdana, helvetica, sans-serif" color="#000" style="font-size:11px;">To unsubscribe to this newsletter, look at the bottom of this email.</font></td>
<td width="2"><img src="http://www.massarcade.com/chris_testing/misc/blueBorder.gif" width="2" height="19" alt=" " title="" /></td>
</tr>
</table>
<!-- start left hand colum //-->
<table width="452" cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" align="center">
<tr valign="top">
<td width="2"><img src="http://www.massarcade.com/chris_testing/misc/blueBorder.gif" width="2" height="161" alt=" " title="" /></td>
<td width="10"></td>
<td width="114" align="middle"><font size="1"><br></font><img src="http://proxy.mi.vresp.com/359d8acc5/www.dreamweaverclub.com/newsletter/2006-11/muscle2.jpg" height="105" width="100" alt="Muscle (4k)" title="Muscle (4k)" /></td>
<td width="326"><font size="1"><br></font><font size="3" face="arial, verdana, helvetica, sans-serif" color="#000000" style="font-size:15px;"><strong>Great new tutorials to muscle up your website</strong></font><br>
<font size="2" face="arial, verdana, helvetica, sans-serif" color="#000000" style="font-size:12px;">We've added some great tutorials lately, so if it's been some time since you've visited the <a href="http://r.vresp.com/?DreamweaverClub/ff9be78597/768933/6bbec44443/cab98c8" style="text-decoration:underline;color:#719eb9;"><font size="2" face="arial, verdana, helvetica, sans-serif" color="#719eb9" style="font-size:12px;">Dreamweaver Club</font></a>, now it's the time to come back for a peek. Noticeable contributions comes from Davidj, who's made a full <a href="http://r.vresp.com/?DreamweaverClub/21fbafb4dd/768933/6bbec44443/cab98c8" style="text-decoration:underline;color:#719eb9;"><font size="2" face="arial, verdana, helvetica, sans-serif" color="#719eb9" style="font-size:12px;">video series</font></a> on how to use PHP and databases with Dreamweaver, and Jon Harrison with a look on what it takes to professionally <a href="http://r.vresp.com/?DreamweaverClub/f121f16e89/768933/6bbec44443/cab98c8" style="text-decoration:underline;color:#719eb9;"><font size="2" face="arial, verdana, helvetica, sans-serif" color="#719eb9" style="font-size:12px;">crop images in Photoshop</font></a>. <em style="font-size: 11px; display: block; text-align: right;">Ove Klykken, DreamweaverClub.com</em></font><font size="1"><br></font></td>
</tr>
</table>
<table width="452" cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" align="center">
<tr valign="top">
<td width="2"><img src="http://www.massarcade.com/chris_testing/misc/blueBorder.gif" width="2" height="37" alt=" " title="" /></td>
<td width="10"></td>
<td width="440"><div style="border:2px solid #dfe9f0; width:440px; height:33px; background:#719eb9;"><img src="http://www.massarcade.com/chris_testing/misc/article1img.gif" width="27" height="29" alt=" " title="" /><font size="3" face="arial, verdana, helvetica, sans-serif" color="#ffffff" style="font-size:15px;"><img src="http://www.massarcade.com/chris_testing/misc/spacer.gif" width="13" height="1" alt=" " title="" /><strong>Video Tutorial</strong></font></div></td>
</tr>
</table>
<!-- end left hand colum //-->
<table width="624" cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffffff">
<tr>
<td width="624" height="2"><img src="http://www.massarcade.com/chris_testing/misc/blueBorder.gif" width="624" height="2" alt=" " title="" /></td>
</tr>
</table>
<!-- end html email //-->
</td>
</tr></tbody>
</table>
</body>
</html>

edbr
01-18-2007, 05:06 AM
Have a look at this thread.

http://www.dreamweaverclub.com/forum/showthread.php?t=24717&highlight=mail

I now use foxmail to make and send html, I have found there is a better success rate for getting through. Hotmail will put it into junk mail, yahoo accepts them (generally) and pop3 will accept them unless there is strict spam assasain rules applied.
If you intend to mass mail Mail king has been recommended to me for a good success rate if you use their server, they have a free trial.

orso
01-18-2007, 12:15 PM
Great. I cant wait till I finally understand code.

orso
01-18-2007, 12:42 PM
Question. After you save the .htm page and are ready to throw it in a email what do you do then. Is it a simple drag and drop or do you need the pics to link to something on your server.

edbr
01-19-2007, 01:35 AM
Depends on your mail agent for oE or outlook it was answered in this thread

http://www.dreamweaverclub.com/forum/showthread.php?t=24717&highlight=mail

for fox mail it is automatically saved as a template

chriskq
01-19-2007, 02:28 AM
Orso,
notice in my code provided above u link to reference ur images absolutly. So yes u need to upload all ur images to a server, and then update ur links beforeu test the email

edbr
01-19-2007, 02:29 AM
In foxmail images are added as an attachment