Pin Me

How to Create HTML Email with Dreamweaver

written by: Amanda Presley•edited by: Michele McDonough•updated: 6/21/2010

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

  • slide 1 of 5

    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.

  • slide 2 of 5

    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.

  • slide 3 of 5

    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="" 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.

  • slide 4 of 5

    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.

  • slide 5 of 5

    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.