Learn How to Create HTML Email Using Dreamweaver

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="https://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.

This post is part of the series: Dreamweaver Tutorials

This collection of articles is aimed at providing education about the software program Dreamweaver.
  1. Beginner’s Guide to Creating and Saving an HTML Document in Dreamweaver
  2. Dreamweaver Tutorial: Tips for Link Management
  3. Creating a New CSS Text Style in Dreamweaver
  4. Creating a Jump Menu in Dreamweaver
  5. Create a Photo Album for Your Website in Dreamweaver
  6. Dreamweaver Tutorial: Mapping and Linking Images
  7. Use CSS Styles to Create Solid Color Rollover Buttons in Dreamweaver
  8. Incorporating Flash Buttons Into Your Dreamweaver Designs
  9. Creating a Rollover Button in Dreamweaver Without Using CSS
  10. Dreamweaver Tutorial: Creating and Inserting Flash Text into Your Document
  11. Dreamweaver Tutorial: Inserting and Editing a Horizontal Line
  12. How to Modify Your Page Properties in Dreamweaver
  13. Adding Guestbook to Your Site Using Dreamweaver
  14. Applying Pop Up Messages to Links In Dreamweaver
  15. A Guide to Understanding the Properties Panel in Dreamweaver
  16. Create a Tab Menu in Dreamweaver
  17. Creating a List Menu in Dreamweaver
  18. How to Create HTML Email with Dreamweaver