How to Create an Email Newsletter Using Dreamweaver
Creating an email newsletter is a great way to spice up your weekly emails, sent out to new or respected clients. Using Dreamweaver takes practice, so for this project give yourself at least an hour or more to finish. Most email interfaces (Outlook, Windows Mail, Gmail or Yahoo!) have the ability to recognize HTML coding. However, you may need to tinker around more than you would like to display everything properly.
Other People Are Reading
Instructions
-
-
1
Click on "File" and select "New." Click on "Blank Page" and then from the drop-down menu select the "HTML" button. Click on the "Insert Table" icon at the top of the screen and insert a "Table."
-
2
The Table dialog box pops up. Create a table with "Three Rows" and "Two Columns." The width of the table is 700 pixels. Click on "Center." This will center the table into the middle of the document.
-
-
3
Select the top two cells by dragging your mouse across both cells. Right-click the "Table" icon. Select "Merge Cells" from the menu. This creates a "Header." Repeat these steps for the bottom two cells. Doing this will create a "Footer."
-
4
Click inside the "Right Hand" cell (the middle row) and insert a table with "One Column" and "Six Rows." Set the width of this table to "100 Percent." Click inside the "Middle Row (the left cell ) and click the "Property Inspector" button. Select a width of "65 Percent."
-
5
Click inside the "Header Cell." At the bottom of the page, you will see "<body> <table> <tr> <td>." Click on the" <td>." This will highlight the element enabling the style function. Type the following:
"style=”background-color:#003399 [substitute for a color of your choice]; font: 1.5em arial [substitute for a font of your choice]; color:#FFFFFF [substitute for a color of your choice]; padding:5px;”
-
6
Click on the "Property Inspector" icon. Highlight "Vert" and then select "Top" from the drop-down menu. Repeat this for all cells. Click inside "Middle Cell" (located to the left). Click on the "<td>" coding at the bottom of the screen. Type the following:
"style=”font:.8em [change number for larger or smaller font] Arial, Helvetica, sans-serif (substitute for your fonts of choice); padding 5px;”
-
7
Click the "Top" (in the sidebar) and click on the coding " <td>." Type the following:
"style=”background-color:#FF9900 [substitute for your color of choice]; border:1px solid #FF8000; [substitute for your color of choice] color:#FFFFFF; [substitute for your color of choice] font: .75em [change value for larger or smaller font] arial;” [substitute for your font of choice]
Repeat this process for every "Second" cell inside that table.
-
8
Click inside the "Top" cell (up in the Header portion). Select the "<table>" and type "style=”margin-top:10px;”." This applies the selected margin size.
-
9
Click the cell below the sidebar. Locate the " <td>" HTML tag. Type "style=”font: .75em arial [substitute for font of your choice];”." Repeat this process for the "Footer."
-
1
Tips & Warnings
Remember not all email clients will necessarily display your newsletter correctly.
References
- Photo Credit Ciaran Griffin/Lifesize/Getty Images
