Here is a link to part 1 of the tutorial!
In the second part of this tutorial I will show you how to take your created email template and turn it into HTML that can actually be sent to subscribers. I will be using Dreamweaver if you don’t have that then you can use what you prefer.
The first thing we need to do is slice up the parts we want as images in the email newsletter. Before we export it as a .jpg file though, decide what parts you don’t need to include in the image. Like for instance I don’t want any of the text that I will be making real text in the image. So I will hide the layers for the date, “visit our website”, and all the fake text except for in the header because it won’t be real text.
I modified this tutorial a bit from the first one because the shadows would make it a little harder for beginners so I took the shadow from the top part and I shrunk the shadow on the bottom a bit too. Also I cropped the image so there is no space on the sides.
So export your document as a .jpg file at high quality and save it as whatever name you want. Open the image file and use your rectangle marquee tool to start cutting out the pieces you want.
First I am going to cut out the logo
I saved my logo as logo.gif and now moving to the header
Copy the header out and save it as header.jpg
Now copy all the little images out. The guy with the dollar sign, the icons in, the picture of the eye, and the footer with the social networking icons.
Now that we have all the parts it is time to start converting this into an html document. So I will open up my dreamweaver program and create a new file.
So either hit ctrl+n or file>>new.
After creating the new document dreamweaver already puts in this code in the top:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
|
Next we want to put a table in between the body tags. In my dreameweaver I have
a split screen with html code view and design view which is the actual newsletter.
So in the tools I am going to click the table…
In the window that pops up pick Rows: 2, Columns: 1 and Width: 558 pixels then hit ok.
And now you should have a table in the document with 2 rows.
Your code should look like this for the table:
<table width="558" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
|
Now the table isn’t centered and I want it to be when I send it out as an email
newsletter so for that I will take my mouse cursor into my "design view"
and highlight the table. My screencap shows the code view and design view
There should be a “properties” tab at the bottom of your dreamweaver so go down to that and in “align” pick “center”
Next I will click in the first row of the table and add another row except with 2 columns and only 1 row.
One great thing about using dreamweaver, is if you save your image files and html file in the same folder you can insert images in the code view and still see them in your design view without having to upload them to an images server or anything like that.
Click on the first column of the new table in design view and at the top in your tools click the icon in the next screencap. It is called “image placeholder”
When the popup window comes up just hit ok.
Go in your code view and delete the width and height. We can add this back later but its not needed really.
That section is where I will put the logo we have so the name of the logo is,
“logo.gif”. So put whatever your logo name is with .gif or .jpg or whatever file
format yours is where it says “src=”
Now you should be able to see your logo in the design view.
My logo is 157 pixels wide so I want to make the td the logo is sitting in that width. The td tag is just a cell within the table.
As you can see in the next screencamp I added width=”157″ in the td tag.
So far I have this code now:
<table width="558" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="157"><img name="" src="logo.gif" alt=""></td>
<td> </td>
</tr>
</table></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
|
On the right column now I want to go ahead and add a table within the other td. So pick table again and make it have 2 rows and in the width just make it 100%.
The new table with two rows we added will be used to put in the text for the date and “visit our website” text.
So in my design view I will go ahead and click in the top row and add, “May 14, 2010″. In the 2nd row I will add, “Visit Our Website”.
You will notice after you type those in they need to be aligned to the right. There are two ways you can do this you can either highlight the text in the design view and click the “align right” in the properties or in the td tag within the code you can add align=”right”. Either way you are good. I will just add align=”right” into the td tags in the code view.
Here is the code I have now:
<table width="558" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="157"><img name="" src="logo.gif" alt=""></td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="right">May 14, 2010</td>
</tr>
<tr>
<td align="right">Visit Our Website</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
|
This is what you should have in your design view:
Next I will go ahead and format the text for the date and the “visit our website” text.
For formatting the text I will use whats called inline styles. These are similar to how you would design a style sheet but you put them within td tags and other types of tags. I use these types of styles because some email clients do not render style sheets, such as outlook 2007 and some others. This has been an issue with clients in the past that still use Outlook 2007 and other outlook email clients so I keep the styles inline.
So after the align=”right” in the td tag I will hit the spacebar and type, style=”font-family: arial, helvetica, sans-serif; font-size: 14px; font-weight: bold;”. This will define a font type, which in this case will be arial but if for some reason someone cannot see arial or has it turned off they will see helvetica then sans-serif. If all those fonts are off it will automatically be times new roman. Then the font size is defined as well as the font being bold.
Here is the code just for the table we are working in:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="right" style="font-family: arial, helvetica, sans-serif; font-size: 14px; font-weight: bold;">May 14, 2010</td>
</tr>
<tr>
<td align="right">Visit Our Website</td>
</tr>
</table> |
Next use copy and paste the same thing we just put in that td tag to the one underneat with our, “visit our website” text.
Except after the font-weight=”bold;” part add padding-top: 4px;” … This will make some space in between the 2 rows.
This text should have a link on it so you can visit the website by clicking it so in your design view highlight the text and in the properties at the bottom at a web address or just type anything in to create an “a href” tag which is what makes a link in html code.
Now your font should have a link over it thats clickable
Font for a link will automatically be that same blue color you have seen before I am sure. I want the font to be the same color as what I designed in photoshop. This is easily done. In the code view you can see the “a href” tag around the text. Within that type style=”color: #005083;”
This will change the font color of the link.
Now before moving on to adding the header I just want to add a border to the top, left, and right of the main table so there is a border around it like in the photoshop design. This is easily done as well in the code.
At the bottom of the dreamweaver window you can see a lot of different information but I want you to focuz on the information that you see on the bar that show, “<body>, <table> <td>, <tr>, and so on… I will highlight the area I am talking about in the next screencap:
If you click on each one you can see how dreamweaver will highlight different parts in your code that correspond to those tags.
If you are following this you should click on the 4th tag over from the left which is the main td tag that contains our table with the logo and text. Within that tag I will show you what to put to create a border on the top, right, and left of the td tag.
Within that td tag type style=”border-top: solid 1px #b0b0b0; border-left: solid 1px #b0b0b0; border-right: solid 1px #b0b0b0; padding: 8px;”
I also adding some overall padding so the logo and text are not touching the border. If you preview the document you should see the border around the top, right and left of the email newsletter.
And the code I have now is:
<table width="558" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td style="border-top: solid 1px #b0b0b0; border-left: solid 1px #b0b0b0; border-right: solid 1px #b0b0b0; padding: 8px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="157"><img name="" src="logo.gif" alt=""></td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="right" style="font-family: arial, helvetica, sans-serif; font-size: 14px; font-weight: bold;">May 14, 2010</td>
</tr>
<tr>
<td align="right" style="font-family: arial, helvetica, sans-serif; font-size: 14px; font-weight: bold; padding-top: 4px;"><a href="fakesite" style="color: #005083;">Visit
Our Website</a></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
|
If you copy that code and put it within a new document you should see exactly what it looks like.
In the beginning I am going to be more detailed so you get an understanding of what I am doing but in the steps that follow I will be a little less detailed because I will be using the same techniqes I just showed you.
Finally to finish off this table I will be adding the header. Do the same technique shown before when adding the logo. Click in the row thats left and add the image in the td tag with the “image placeholder”. Once you do that you can see how this email newsletter is starting to come together.
Next I will add a new table underneath the current one in the code and wihin the td tag I will write style=”border-right: solid 1px #b0b0b0; border-left: solid 1px #b0b0b0; padding: 5px;”…
This will create the rest of the border on the left and the right of the email newsletter.
Within that add another table with 2 rows.
In the first row add this code which will the the section with the little guy and the dollar sign.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="74"><img src="moneyguy.jpg" alt=""></td>
<td width="472" valign="top" style="padding-left: 8px; padding-top: 8px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="font-family: arial, helvetica, sans-serif; font-size: 14px;"><strong>Lorem
ipsum dolor sit amet</strong></td>
</tr>
<tr>
<td style="font-family: arial, helvetica, sans-serif; font-size: 13px; padding-top: 5px;">Vivamus viverra, sapien vitae semper dapibus, erat erat
rhoncus metus, sed
hendrerit erat mi non lectus. Nunc venenatis blandit enim
et luctus. In tempus
posuere libero, ac sodales eros venenatis nec. Curabitur
sed purus</td>
</tr>
<tr>
<td style="padding-top: 5px; padding-right: 5px;"><div align="right"><a href="fakesite" style="color: #005083;"><strong>Find
Out More</strong></a></div></td>
</tr>
</table></td>
</tr>
</table>
|
This code should look like this
You should be familiar with everything I have done in this step except you will
see a piece I didn’t have in the first few steps which is valign=”top” .. basically
this means vertical align to the top. This is good to use sometimes when you want
to align an icon to the top of a td tag or align a table to the top of a td tag.
In the 2nd row of the new table I will add this code:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="280" valign="top" style="padding-right: 15px; padding-left: 10px; border-right: solid 1px #b0b0b0;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" style="font-family: arial, helvetica, sans-serif; font-size: 14px; padding-bottom: 8px;"><strong>Recent
News</strong></td>
</tr>
<tr>
<td valign="top"><a href="fakesite"><img src="icon1.jpg" alt="" border="0"></a></td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="font-family: arial, helvetica, sans-serif; font-size: 14px;"><strong>Lorem
ipsum dolor sit amet</strong></td>
</tr>
<tr>
<td style="font-family: arial, helvetica, sans-serif; font-size: 13px;">Vivamus
viverra, sapien vitae semper dapibus, erat erat
rhoncus metus, sed hendrerit erat mi non lectus.
Nunc...</td>
</tr>
<tr>
<td style="font-family: arial, helvetica, sans-serif; font-size: 13px;"><div align="right"><a href="fakesite" style="color: #005083;"><strong>Read
More</strong></a></div></td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top" style="padding-top: 14px;"><div align="center"><a href="fakesite"><img src="icon2.jpg" alt="" border="0"></a></div></td>
<td style="padding-top: 14px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="font-family: arial, helvetica, sans-serif; font-size: 14px;"><strong>Lorem
ipsum dolor sit amet</strong></td>
</tr>
<tr>
<td style="font-family: arial, helvetica, sans-serif; font-size: 13px;">Vivamus
viverra, sapien vitae semper
dapibus, erat erat rhoncus metus, sed hendrerit
erat mi non lectus. Nunc...</td>
</tr>
<tr>
<td style="font-family: arial, helvetica, sans-serif; font-size: 13px;"><div align="right"><a href="fakesite" style="color: #005083;"><strong>Read
More</strong></a></div></td>
</tr>
</table></td>
</tr>
</table></td>
<td valign="top" style="padding-left: 15px; padding-right: 10px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="font-family: arial, helvetica, sans-serif; font-size: 14px; padding-bottom: 8px;"><strong>Lorem
ipsum dolor sit amet</strong></td>
</tr>
<tr>
<td style="font-family: arial, helvetica, sans-serif; font-size: 13px;">Vivamus viverra, sapien vitae semper
dapibus, erat erat rhoncus metus, sed
hendrerit erat mi non lectus. Nunc venenatis
blandit enim et luctus. In tempus blandit enim et luctus.
In tempus </td>
</tr>
<tr>
<td style="padding-top: 15px;"><div align="left"><img src="eye.jpg" alt=""></div></td>
</tr>
</table></td>
</tr>
</table>
|
There are no new techniqes shown in this code.
Here is the screencap of what the code should look like in the design view:
Finally the last thing I will do is add a 1 row table underneath the last one we just made. In this I will put the footer image.
This step will show one new technique not shown in any other steps. To link each icon for rss feed, twitter, and facebook I will use what is called image mapping. As far as I know this has not been an issue in any email client testing I have done.
In your design view click on the image.
In your dreamweaver properties at the bottom you should see the mapping feature:
Choose the “rectangle hotspot tool”
With this tool you can drag little hotspots over your icons to make each one clickable.
Dreamweaver is helpful because it automatically adds the map coordinates so they will stay in place.
Now you can link each icon to your corresponding pages.
This is usually where I show the client a preview if they are ready to see what the template looks like. But before it is mailed out it needs what are called “alt tags” added to the images. Basically this is where you add text in case someone is blocking images or an image does not show up. I am sure you notice when you added your image placeholder’s you can see alt=”".. within those type what text you want. This text will be clickable if the image does not show up. Usually in the alt tags I put exactly what the text says on the image.
Here is the code for the entire newsletter just created:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Email Newsletter Design Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<table width="558" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td style="border-top: solid 1px #b0b0b0; border-left: solid 1px #b0b0b0; border-right: solid 1px #b0b0b0; padding: 8px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="157"><a href="fakecompany"><img src="logo.gif" alt="FakeLogo Company - Visit Our Site" border="0"></a></td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="right" style="font-family: arial, helvetica, sans-serif; font-size: 14px; font-weight: bold;">May 14, 2010</td>
</tr>
<tr>
<td align="right" style="font-family: arial, helvetica, sans-serif; font-size: 14px; font-weight: bold; padding-top: 4px;"><a href="fakesite" style="color: #005083;">Visit
Our Website</a></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td><a href="fakecompany"><img src="header.jpg" alt="Thanks for Joining! Fake information is right here! Visit Our Site!" border="0"></a></td>
</tr>
</table>
<table width="558" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td style="border-right: solid 1px #b0b0b0; border-left: solid 1px #b0b0b0; padding: 5px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="border-bottom: solid 1px #b0b0b0;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="74"><a href="fakecompany"><img src="moneyguy.jpg" alt="Title of this section" border="0"></a></td>
<td width="472" valign="top" style="padding-left: 8px; padding-top: 8px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="font-family: arial, helvetica, sans-serif; font-size: 14px;"><strong>Lorem
ipsum dolor sit amet</strong></td>
</tr>
<tr>
<td style="font-family: arial, helvetica, sans-serif; font-size: 13px; padding-top: 5px;">Vivamus viverra, sapien vitae semper dapibus, erat erat
rhoncus metus, sed
hendrerit erat mi non lectus. Nunc venenatis blandit enim
et luctus. In tempus
posuere libero, ac sodales eros venenatis nec. Curabitur
sed purus</td>
</tr>
<tr>
<td style="padding-top: 5px; padding-right: 5px;"><div align="right"><a href="fakesite" style="color: #005083;"><strong>Find
Out More</strong></a></div></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td style="padding-top: 10px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="280" valign="top" style="padding-right: 15px; padding-left: 10px; border-right: solid 1px #b0b0b0;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" style="font-family: arial, helvetica, sans-serif; font-size: 14px; padding-bottom: 8px;"><strong>Recent
News</strong></td>
</tr>
<tr>
<td valign="top"><a href="fakesite"><img src="icon1.jpg" alt="Title of this news" border="0"></a></td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="font-family: arial, helvetica, sans-serif; font-size: 14px;"><strong>Lorem
ipsum dolor sit amet</strong></td>
</tr>
<tr>
<td style="font-family: arial, helvetica, sans-serif; font-size: 13px;">Vivamus
viverra, sapien vitae semper dapibus, erat erat
rhoncus metus, sed hendrerit erat mi non lectus.
Nunc...</td>
</tr>
<tr>
<td style="font-family: arial, helvetica, sans-serif; font-size: 13px;"><div align="right"><a href="fakesite" style="color: #005083;"><strong>Read
More</strong></a></div></td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top" style="padding-top: 14px;"><div align="center"><a href="fakesite"><img src="icon2.jpg" alt="Title of this news" border="0"></a></div></td>
<td style="padding-top: 14px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="font-family: arial, helvetica, sans-serif; font-size: 14px;"><strong>Lorem
ipsum dolor sit amet</strong></td>
</tr>
<tr>
<td style="font-family: arial, helvetica, sans-serif; font-size: 13px;">Vivamus
viverra, sapien vitae semper
dapibus, erat erat rhoncus metus, sed hendrerit
erat mi non lectus. Nunc...</td>
</tr>
<tr>
<td style="font-family: arial, helvetica, sans-serif; font-size: 13px;"><div align="right"><a href="fakesite" style="color: #005083;"><strong>Read
More</strong></a></div></td>
</tr>
</table></td>
</tr>
</table></td>
<td valign="top" style="padding-left: 15px; padding-right: 10px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="font-family: arial, helvetica, sans-serif; font-size: 14px; padding-bottom: 8px;"><strong>Lorem
ipsum dolor sit amet</strong></td>
</tr>
<tr>
<td style="font-family: arial, helvetica, sans-serif; font-size: 13px;">Vivamus viverra, sapien vitae semper
dapibus, erat erat rhoncus metus, sed
hendrerit erat mi non lectus. Nunc venenatis
blandit enim et luctus. In tempus blandit enim et luctus.
In tempus </td>
</tr>
<tr>
<td style="padding-top: 15px;"><div align="left"><a href="fakecompany"><img src="eye.jpg" alt="Title of this section" border="0"></a></div></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
<table width="558" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="558"><img src="footer.jpg" alt="Join us on Facebook, Twitter, or Join our RSS Feed!" border="0" usemap="#Map"></td>
</tr>
</table>
<map name="Map">
<area shape="rect" coords="463,10,490,39" href="rss%20feed">
<area shape="rect" coords="492,11,518,39" href="facebook">
<area shape="rect" coords="522,12,547,38" href="twitter">
</map>
</body>
</html>
|
Here is a preview of the email newsletter and you can actually view source and copy the code from here.
Thanks reading this tutorial, I know I rushed this toward the end but I hope I gave you enough detail in the beginning to give you an idea on how to do this!
Please leave any questions or comments! Thanks!
Topics: Adobe, coding, Design, email newsletter, Graphics, html code, html coding, Photoshop, template, Web Design, Web Development
About the Author:
John Overbee is a graphic designer for the iEntry Network.
Submit Your Article
