Q. How can I send a web page as an e-mail?

A. First, you'll need to create your page with absolute links, and then send it as HTML through Outlook Express.

Sending HTML E-mail

Author: Daniel Short
Author's Site: Web-Shorts.com

Considerations

Creating a page to send through e-mail is only slightly different from creating a standard web page. The only differences are you'll need to pay more attention to image size and use. You'll also need to make all your image src links into absolute URL references, e.g., http://www.mysite.com/images/foo.gif.

Why do we need to watch image size you may ask? HTML e-mails aren't the same as a website. If I've chosen to view your website, I'm prepared for a possible wait because I chose to view your site. If I receive an HTML e-mail, I may or may not have chosen to receive it. So I'm going to have to use my (oftentimes limited) bandwidth to view your advertisement or newsletter. The faster your fancy HTML e-mail opens, the less likely I am dump it into the recycle bin.

Creating your page

First, build your web page as you normally would. I always recommend to place all the images for your HTML e-mail in the same directory. This will make it easier when we get to the search and replace.

Make sure you put a DOCTYPE declaration and a META CONTENT-TYPE declaration in your page. This will ensure that HTML capable newsreaders know how to display your page. The first few lines of your page should look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

Search and replace

Now you'll need to do a search and replace to make all your images and links absolute. For this example, we're going to assume that your images are in a directory called /images, and all your links to pages on your site are in a directory called /links. Right now your image and page links look like this:

<a href="links/page1.htm">Link 1</a>
<a href="links/page2.htm">Link 2</a>
<img src="images/myimage.gif">
<img src="images/myimage2.gif">

Choose Edit » Find and Replace (or Ctrl+H on your PC) to bring up the find and replace box. You want to choose the following options:

Find in: Current Document
Search For: Source Code

Next, type href=" in the Search For field, and href="http://www.yourdomain.com/ in the Replace With field. This will replace all occurrences of href="links/ with href="http://www.yourdomain.com/links/.

Next, we'll do the same for your images. Replace src=" with src="http://www.yourdomain.com/.

Now that our Find and Replace is complete, our page looks a mess, with broken images everywhere. Here's where you need to preview your page in a browser, to make sure that all your images and CSS styles are displaying properly. Once you've double checked your page it's time to send this baby out.

Sending your e-mail

First, we need to open a new e-mail window in Outlook Express, choose File » New » Mail Message. Once your mail window is open, make sure the format is set to Rich Text (HTML) by choosing Format and making sure there is a highlight next to the Rich Text (HTML) line.

Once your e-mail is set to Rich Text, choose View > Source Edit and you should see three tabs at the bottom of your mail message, like this:

Click the Source tab, and you'll see the HTML source for your default e-mail message. Open your web page in Dreamweaver, and switch to the HTML code view by pressing F10. Press Ctrl+A to select all your HTML code, and then copy and paste it into your Outlook Express Source view.

After you've pasted your HTML code, you can click the Preview tab to see how it will look in Outlook Express. Now all you have to do is type in your recipient's addresses, and click "Send".

::back to top::

Additional Reference and Resources

Web Shorts HTML E-mailer
http://www.web-shorts.com/mm/HTMLEmail/default.asp

::back to top::

::This page last modified 8/13/2013 at 03:37::

Copyright © 2001-2024 DreamweaverFAQ.com All Rights Reserved.
All brands, trademarks, tutorials, extensions, code, and articles are the property of their respective owners.
A production of Site Drive Inc.
Legal Notice | Privacy Policy | Disclaimer & Notice