How to Create HTML Email with Dreamweaver

Article by Tutorial-Writer (12,987 pts ) , published Oct 16, 2009

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

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

Jul 28, 2009 4:14 AM
Des McKenzie
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.
Jul 9, 2009 7:23 AM
Salvio
Very helpful
It is very helpful to me..Thank you very much.
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!
Jun 25, 2009 1:06 PM
email design
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.
Jun 10, 2009 9:43 AM
affordable web design services
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.
 
Subscribe to Web Development
RSS
Get free weekly updates, directly to your inbox.
Browse Web Development