Back to the Home Page
 Stationary Tutorial Page
Back to the Tutorial Index Page
Back to the Stationary Home Page
 | Home | Graphics | Stationary | Tutorials | Links | Calendar | Actors on TV | Site Map |
Welcome to the Stationary tutorial page.

Here you will learn how to create your own custom stationary. This tutorial only describes how to create Microsoft Outlook Stationary.  In order to use stationary with Outlook, you must have a version that supports stationary.

To do this tutorial you will need either  "Word Pad", which is available on most computers that run Windows or a text editor. It might also be helpfulto go to the stationary page and down load the Marilyn Stationary. Make sure you down load both the Graphic and HTML. Right click on the image of Marilyn, Save as the image Marylin.jpg to  C:/Program Files/Common Files/Microsoft Shared/Stationary. Click on the image of Marilyn. This will open the stationary as an HTML page. It will not look correct because you are opening stationary with a Browser instead of Microsoft Outlook. From the tool bar, click on "file", "save as" and save the HTML file in the same folder as the image.

To open Word Pad, click "Start button/Programs/Accessories/Word Pad". Don't open the HTML file with Microsoft Word because it will change the formatting on the document.

Directly below is the HTML code for the Marilyn stationary. This is what it should look like, when you open it in Word Pad. Below that, is the same page page marked up with color. It identifies the various parts of the HTML code.


~~~~ HTML Code for Marilyn Stationary (Word Pad version)~~~~

<html>
<head>


<style><!-- body,P.msoNormal, LI.msoNormal { background-position: top left; background-repeat: repeat-y; background-color: "#CECABF";
margin-left: 9em;
margin-top: 0em;
margin-bottom: 0em;
color: "#000000";
font-size: 10pt;
font-weight: normal;
font-family: "Arial";
}
-->
</style>
  <title>MarylinInWhite</title>
</head>
<body background="Marylin.jpg">

</body>
</html>




HTML marked up with color identifiers

Marilyn Stationary with code identification


~~~~Now lets create your own custom Stationary. ~~~~

The Images:
You can use .jpg or .gif , I suggest that you keep the size small. This makes the page load faster and if the image is too large you might have to adjust the text area too far to the right. Most of the images that I use are 100 pixels wide. The height is not very important.  You need to consider the following when selecting an image.
** How far right or left do you have to move your text if you use this image?
** What color are you going to use as the background color on the right side of the image (where you will be writing your messages) It can either match the graphic or contrast with the graphic. I tried to match the graphic in this example. The Purple dance stationary, is a nice minor contrast to the graphic.
** What color of text are you going to use? This important because the wrong background and font color combination can make you message difficult or impossible to read.
** What font style and size? Is it readable? Does it match the style of the graphic? Does your reader have that font too on their computer?
** What is the name of the image? It makes it easier to edit and send a copy to your friends, if the name of your graphic matches the of your HTML file.

The HTML:
Once you have the HTML open in Word Pad, click "File" on your tool bar and click "Save as". Make sure to save the file under the NEW HTML name. I like to make the HTML file name match the graphic, but you don't have to do that.

You will have to modify the following parts the the HTML to customize your stationary. Below you will see the stationary code for the Remote stationary. It has the items bolded that you can change
** background-color: "#~~~~~~" (Black is #000000, White is #FFFFFF) You have to use the HTML codes to change it to specific color that you want. You will note that the Marilyn stationary does have some color because it is NOT pure white. I was trying to match the color on right side of the graphic. If you look at the Remote stationary below I did want the background to be white.
** margin-left: ~~em; (the smaller the number the farther left the text will start) The Marilyn stationary has a value of 9 because it is slightly over 100 pixels wide. The remote graphic is only 50 pixels wide so the value is 4.
** color: "#~~~~~~"; (Black is #000000, White is #FFFFFF) You have to use the HTML codes to change it to specific color that you want. In this example, the font color changed from Black (#FFFFFF) on the Marilyn stationary to Gray (#999999) on the remote stationary.
** font-size: ~~pt; (the larger the number, the larger the font)
**  font-family: "~~~~" Your only concern when selecting a font is that your audience also has the same font stored on their computer.
** <title> ~~~~~</title> This is where you name your stationary. It is the title that is displayed in Outlook when you select a stationary.
** <body background="~~~~"> This is where you assign the graphic to your stationary.

Make sure to save your work. You should now be able to select your custom stationary from Outlook.


<html>
<head>

 
  <style><!-- body,P.msoNormal, LI.msoNormal { background-position: top left; background-repeat: repeat-y; background-color: "#FFFFFF ";
margin-left: 4em;
margin-top: 0em;
margin-bottom: 0em;
color: "#999999";
font-size: 12pt;
font-weight: normal;
font-family: "Tahoma";
}
-->
</style>
  <title>Remote</title>
</head>
<body background="rem.jpg">

</body>
</html>





I hope you have as much fun creating your own stationary as I have.