How to Create HTML Email in Dreamweaver

By Steve McDonnell

Dreamweaver, Adobe's Web development tool, enables you to create any kind of HTML document, such as a Web page or email message. If you're familiar with writing HTML markup, you can use the Code view to type an email with HTML tags. If you'd rather style the email visually, Dreamweaver provides most of the formatting capability that a word processing program provides. You can also select the Split view to see both the Code and Display views simultaneously on the same screen.

Establish Formatting

Step 1

Launch Dreamweaver, and then select "HTML" under the Create New column.

Step 2

Click the "Design" button at the top to change from Code view to Design view if Design is not already selected.

Step 3

Click the "Page Properties..." button in the Properties window at the bottom of the screen, and then select the default font and size, the color of the text, the background color or image, if any, and the page margins.

Step 4

Choose "Links (CSS)" in the Category column, and then select the font, size and color of links in the message based on the mouse position, such as rollover, and the link status, such as active or visited. Choose an underline style for links in the message.

Step 5

Click ":Headings (CSS)" from the Category column, and then choose the font, size and color for the different headings you want to use in your message.

Step 6

Select "Title (Encoding)" in the Category column, type a title for your document, such as the message subject, and then choose the document type, such as "HTML5" and the character encoding, such as "Unicode (UTF-8)." Select "OK" when done.

Type and Format Message

Step 1

Type your email message on the blank screen. Format the text by applying styles from the Properties window at the bottom of the screen as you type your message or after you've finished typing it.

Step 2

Select a heading type in the Format box of the Properties window to style text as a header. Click "B" to make the text boldface or "I" to make it appear in italics.

Step 3

Highlight text in your message that you want to style as an unordered or ordered list, and then click the "Unordered List" or the "Ordered List" button in the Properties window. Choose the "Blockquote" button to format the text as a block quote; choose the "Remove Blockquote" button to remove the formatting.

Step 4

Highlight text you want to turn into a clickable link, and then type the URL for the link in the Link box in the Properties window. Select how you want the link to open in the Target selection box. For example, choose "_blank" to force the link to open in a new window.

Step 5

Select "Insert," and then click "Table" to insert a table into your message. Select the number of rows and columns, specify the table width and enter the border thickness. Type the number of spaces you want to use to pad inside table cells and to space between table cells. Type a caption and a table summary if you want to include them, and then click "OK." Enter the text in the table that appears on the screen.

Step 6

Select "Insert," click "Image," and then select "Image" again to insert a picture. Locate and select the picture file to display. Adjust the placement of the picture in your message by dragging it with the mouse.

Preview and Transfer

Step 1

Select "File," click "Preview in Browser," and then choose a browser if you have multiple browsers installed to preview the email and its formatting. Click the hyperlinks you included in the message to make sure they resolve properly.

Step 2

Press "Ctrl-A" to select the entire message, and then press "Ctrl-C" to copy it. Switch to your email program, create a new email message, and then change the message type to "HTML," if necessary.

Step 3

Press "Ctrl-V" to paste the message into your email program. Address the message to your recipients, type a subject for the message, and then send it.

Tips & Warnings

  • Test the email by sending it to yourself before you send it to other people to ensure that the HTML was interpreted and sent correctly.
  • Information in this article applies to Dreamweaver CC. It may vary slightly or significantly with other versions or products.