How to Create HTML Email with Dreamweaver

Written by:  • Edited by: Michele McDonough
Updated Jun 21, 2010
• Related Guides: Dreamweaver | HTML | Outlook Express

Do you want to send HTML email using Dreamweaver and Outlook Express? The process is simple and effective.

Design Email, Newsletters, and Flyers

You can use Dreamweaver to write HTML email and send it through Outlook Express. This is a great way to send newsletters, flyers, and other emails. This tutorial will show you how to create the HTML email in Dreamweaver and then send it in Outlook Express.

Creating HTML Email using Dreamweaver

You will first need to open your Dreamweaver program and create a new HTML page to work on. In the new document you will create the email, add photos or images, change font sizes and colors and customize the HTML email to your exact specs.

For more tips on how to create HTML in Dreamweaver, please read my beginner's guide on how to create HTML in Dreamweaver.

Using Images in Your Email

If you are using images in your email, you will need to upload those images to the web and then place the link in the code. Here is an example.

  • In your HTML code, it will look something like this:

<img src=**file:///C|/Documents and Settings/Compaq_Owner/Desktop/ graphics/icons/love23122.jpg** width="85" height="60" />

  • You will need to remove everything in between the ** ** and replace it with the url of the graphic you uploaded. Your code should now look something like this:

<img src="http://www.yourdomainname.com/uploadedgraphicname.jpg" width="85" height="60" />

Any images or graphics that you use will need to be replaced in the same way. That way when you send it through email, the images and graphics will be viewable.

Bringing the HTML Email Into Outlook

After you have created your email, you will need to:

  1. Copy all of the code in the code window.
  2. Then you will need to open your Outlook Express program and click the Create New Mail icon.
  3. In the window that opened, you will need to click View > Source Edit. That will turn the new mail message window into a window capable of handling the HTML code.
  4. At the bottom of your window, you will see three tabs. Click the Source tab and paste your code in this window.
  5. Then click the Preview tab to preview it.
  6. When you have your email the way that you want, click the send button.

When creating these HTML emails, it is a good idea to send a trial email to your email address before sending them out to other people. This way, you will know what the emails will look like before you send them out.

More on Dreamweaver

That’s how you send HTML email using Dreamweaver. Here’s a tip, it is best to use the split screen in Dreamweaver so you can see the code and the email that you are working on.

To learn more about how to use Dreamweaver, read my tips and tricks to creating HTML in Dreamweaver.


Comments

Showing all 12 comments
 
Dumisani Luthango Aug 11, 2010 11:45 AM
Problem
Thanks 4 the info but I've got a problem in that Outlook 2007 still doesn't wanna read my images even if I use the correct URL to the image. Other e-mail services like G-mail can read the images though. So how can I sort that out. Can someone please let me know?

Blessings.
Dumisani Luthango
Johannesburg, South Africa
Neil Aug 6, 2010 9:23 AM
email design
I tend to use frontpage to design emails and dreamweaver for websites. Dreamweaver is good, but like someone said earlier, most email readers do not support CSS unless they use a browser to render. Frontpage is very simple to use and you can create a decent looking table based email in minutes.

Outlook is a major pain in the preverbial for email marketers because there is no scope for dynamic content because it uses word to render the emails. Microsoft have also decided to stick with this for outlook 2010 which means more boring image based emails for the next 5 years, unless microsoft go bust, we can only hope
Tonny Teuwisse Jul 17, 2010 3:51 PM
html email
I like to send an email like a newsletter.
I made a html-page in Dreamweaver.
This is the page: http://www.ttgv.nl/timor.html
Now I don't want to see the link but the real page in the email. I have a mac-book.
Can you please help me.
Thank you, Tonny
Sam Gallo Apr 16, 2010 7:17 PM
table in e-mail
I need to insert text from a form textarea into the-mail that is mailed. The text in the form wraps but when it is reproduced in the e-mail, it's one long string off to the right. I would like to place a texbox on the e-mail so that the text is constrained by the $variable.

How? Using Dreamweaver or anything else.
Lenin Rodriguez Mar 22, 2010 6:31 PM
Thanks for the info
Thanks for the info, I was hoping to find some type of code but I guess there is not such thing yet, than use a third party for my newsletter. Thanks everyone and Lucinda for the information.
Goldie Mar 8, 2010 1:03 PM
html email in thunderbird
how can I bring and html page that I've created in dreamweaver into thunderbird?
Lenin Rodriguez Dec 2, 2009 11:52 AM
Img src as Web Beacon
Outlook 2003 and up sees
<img src="http://www.yourdomainname.com/uploadedgraphicname.jpg" width="85" height="60" /> method as a Web Beacon and blocks the graphics, letting the user the avility to download the graphic. Is there a different method so outlook shows it whithout the need of user to click on the graphic and download it?
Des McKenzie Jul 28, 2009 4:14 AM
CSS in Emails
Dreamweaver CS4 is very CSS focused - but many crucial CSS properties aren't supported by all of the email readers (especially Outlook '07 - what were they thinking?!). If you do a bit of searching online you'll see most people suggest you use good old tables and inline html styles instead of CSS for email design. It would be prudent to mention this here.
Salvio Jul 9, 2009 7:23 AM
Very helpful
It is very helpful to me..Thank you very much.
Lucinda Watrous Jun 25, 2009 2:04 PM
@email design re: Question
Hi! Thanks for asking this question. You can use a free service such as PhotoBucket to upload your file online. It takes only a few minutes to sign up, and you'll see instructions on screen for uploading the file. Once it's been uploaded, it will provide you a URL to use.

Hope this helps you!
email design Jun 25, 2009 1:06 PM
Question
this is very helpful - one question though. you explain that images need to be uploaded to the web in order to have a URL in the email. where do you upload these images in order to get the URL? are you uploading them to a separate website? im not sure i understand how to get around this step so that i have a working URL but haven't created a whole new site. please advise.
affordable web design services Jun 10, 2009 9:43 AM
RE: How to Create HTML Email with Dreamweaver
for a long time i have been thinking that dreamweaver is just for saving time to normalize hard coding but you have cleared all my doubts.
 
blog comments powered by Disqus
Email to a friend