logo

Click the logo to add
this site to your Favourites


Search:

This Site The Web


Quick Links

  


Subscribe to my Newsletter


Books presented in association with:

Chapters.ca


Your Free E-Mail
Account:


   


Send me mail!

Send Me Mail


 

 


Making Stationery


 

Introduction
Creating Stationery
Style Sheets
    FrontPage 98
    FrontPage Express
    Notepad
    Arachnophilia

Adding a border
The next step

 

Compatibility:  The information on this page applies to both Outlook Express 4 and Outlook Express 5

 

Introduction:

So, you want to make stationery do you?  Well get ready, you're about to embark on an arduous journey.  You need a degree in graphic design as well as excellent programming skills, and thousands of dollars in software . . .

Wait a minute - it seems my evil side took over as I typed that sentence because you don't need any of that.  With a bit of time, a text editor, and some instructions from a helpful website - you too can make beautiful stationery.   ... starting to sound like an infomercial here ...

Without any further ado...

 

Creating Stationery:

At it's heart, stationery is a small HTML file that loads a background image.

<html>
<head></head>
<body background="some image.file">
</body>
</html>

This is all you need for completely useable stationery.  In a graphical HTML editor, such as FrontPage Express or FrontPage 98 it is even easier.  Start a new page.  Format | Background, browse to the file you want to use, click OK twice and save.  Voila - stationery.  Note, when doing this in Notepad, be sure to include the full path to the graphic of your choice.  If you've downloaded Arachnophilia and my toolbars for it, then creating simple stationery is even easier.  Merely click the Basic button - that'll prompt you for a graphic and write the HTML for you.

As I said, that makes for completely useable stationery.  Depending on the background image you choose that can either be a rather boring plain background or an exciting piece of electronic art - it all depends on the graphic.

When you select a graphic as a background it will automatically tile (repeat itself to fill the page), but what do you do if the graphic you choose is not a good candidate for tiling?  Imagine I want to use the graphic at right for stationery.  If I were to just use the method described above, my stationery would probably look awful as that graphic would not tile very well.  Also when designing stationery you must keep in mind how text will look against the background you choose.  Against the background at right, text will be difficult to read.

So, since this graphic will not look good when tiled across the screen (see example at left), does that mean you should give up - not at all, it is quite easy to change a background so that it does not tile itself all over the screen.

What you need to do is add a style sheet so that the graphic knows not to repeat itself at all, or to only repeat itself in the direction you wish. 

 

 

Style Sheets:

As I just mentioned, the Style sheet can be used to control how the background image will display in stationery.  It can also control many other important items of stationery:  Margins, fonts, etc.

There are two basic methods of implementing style sheets in stationery.   There is the "inline" style in which the style information is entered in the HTML tag it affects:

<head></head>
<
body background="some graphic.file" style="background-repeat: repeat-y" bgcolor="#FFFFFF">

As you can see in the example above, the style has been added directly to the HTML tag.

There is also the Style Sheet, or "Block Level" style.  In that case, the style information is added in a Style "block" at the Head section of the document.

<head>
<style>

body {
background-repeat: repeat-y;
background-color: #FFFFFF;
}
</style>
</head>

<body background="some graphic.file">

This example does exactly the same thing as the inline style example.

So what's the difference?  Aside from the location, there isn't much. However, the one difference there is, is an important one. If you use the Outlook Express feature "Save as Stationery" it will save a "Block Level" style and not an "inline" style.

What this means to you is if you find a stationery you like somewhere and wish to save it, if it has been coded with "inline" styles it will not save properly.  All you will get is the background image and nothing else, when you want to use it, the margins, all tiling information, and even the background colour will be gone.   However, that same stationery, if coded with "Block" styles will save properly.

This doesn't mean that Save as Stationery will save everything - that option still has some serious limitations, but when "block" styles are used, the Save as Stationery option at least does something.  Be sure to read my page on Saving Stationery for further information on this option.

That being the case, you're probably wondering why anyone would ever use an inline style.  Well, the inline method is easier to code, and when looking at the code, you can see immediately how an element will appear.  It is worth the effort to learn the "block" styles, however as they are ultimately more powerful and more useful.

So, how do you make one of these Block stylesheets?  As you have probably surmised, that depends on the program you are using to create your HTML.

If you're lucky enough to have a copy of FrontPage 98, then creating a block style is a walk in the park for you.  Simply go to Format | Stylesheet.   A window will appear that has the following code in it:

<style>
<!--
-->
</style>

Position your cursor immediately after the <!-- then press the Style button at the bottom of the window.  A new dialog box will appear that has many tabs and options.   I recommend playing with these options for a while as there are many of them.   Try them out and see what they do.  The most commonly used ones for stationery will be covered below.

When you've picked a few options and pressed OK, you are returned to the first widow (the one with that little snippet of code.  The code for the options you have chosen have been added.  You'll notice the the code now reads:

<style>
<!-- {style options here}
-->
</style>

Before you press okay, there is one final thing to do.  You have to indicate to FP98 what element of your HTML this style is for.  You can assign this style to many different elements in your HTML, in the case of stationery, 98% of the time you will wish to indicate that this style is to affect the entire body of the document.  You indicate this by adding the element name to the style code immediately before the {style options here} part. When finished, your style sheet will look like this:

<style>
<!-- body {style options here}
-->
</style>.

Press the Okay button and FP98 will automatically add your style to the current HTML document.  Please be aware that because of the way these graphical HTML editors work, the style may not display properly in the editing view.  Preview your document to see it as it will display.

On the other hand if you're using FrontPage Express - just give up now.  You can not use FPE to write a block level style sheet, unless you're willing to switch into it's excuse for an HTML view and type it there (assuming you know the code).  Furthermore, since FPE has a predilection for altering perfectly valid code, if you don't enter the style in exactly the way it thinks it should be, it will change your code on you.

This really stupefies me and makes me wonder if the various program teams at Microsoft ever talk to each other, and just where were the project supervisors?  Let's see, both Outlook Express and FrontPage Express come bundled with Internet Explorer 4.  OE needs a style to be in a certain format to save it properly, and yet FPE is incapable of producing this.

Of course, you can use FPE to create an inline style.  You're probably thinking: "well it's not as good as a block style, but it's good enough."  Wrong.   In any other program I might agree with you, but not FPE.  You see, even creating an inline style in FPE is a tedious process which requires you to know the codes and to go through 4 or 5 different dialog boxes to even get to the one where you can add this style.   Considering the limitations of inline styles discussed above, it isn't worth the effort. Even my "toolbars" for FPE can do nothing about this limitation.

My advice if you're using FPE?  Switch to a different program.  In the long run you'll find it much easier.  If you insist on using FPE - create your stationery, then save and re-open the file in a program like Notepad and enter the style there.   You'd need to manually enter the style in FPE anyway, and Notepad has a friendlier interface and is more forgiving. 

In Notepad you have to type the style information yourself, but as there are only a couple things that you really need to know for stationery, you'll quickly memorize them [see below].  When entering the style into your HTML document, be sure to put it in the Head section (between the <head> and </head> tags).

Finally, users of Arachnophilia and my Custom Toolbars have it easy.  When creating stationery in Arach, the <style> tags will be written for you.  All you need to do is fill them in. This can be accomplished by right-clicking and picking the appropriate item off the context menu.  See the instructions for my Arach toolbars for more details.

 

Adding a border:

Oh yes, before I went on that Style Sheet digression, we were about to fix our image so that it would not tile all over the place.  We wanted to make it into a left border stationery.

Depending on the program you're using, the exact method will vary.  In FP98 you pick the repeat-y option off the repeat pick list on the colours tab of the stylesheet editor.  In Arach, you pick Border (left) off the context menu and in FPE or Notepad you type it yourself.   However you get there, the style should look like this:

<head>
<style>

body {
background-repeat: repeat-y;
background-color: #FFFFFF;
}
</style>
</head>

<body background="some graphic.file">

The background-repeat: repeat-y lets your program (in this case Outlook Express) know that the image should only repeat itself down the y-axis, (up and down the left margin of the page). When setting this attribute, you can also choose to set the background-repeat to repeat-x or no-repeat to cause the image to tile across the top or not to tile at all, respectively.

Pay attention to the background-color item.  When using either FP98 or FPE it is ridiculously easy to set the background colour of the document - on the same dialog box where you choose your background picture, you can also set a background colour from the pick list.  However, this approach renders the background colour "inline". As with the other style items when someone tries to save your stationery this inline colour specification is lost.  Instead in FP98 the background colour should be set via the stylesheet editor (on the Colours tab).  Unfortunately you can't do this in FPE so you might as well use the inline colour there.

However you set your colour, you'll notice that the code for the colour itself doesn't make much sense - it appears as a weird looking code. The "#FFFFFF" shown in the examples above is a hexadecimal code that sets the background colour of the window to white, thus any part of the window that is not covered by the graphic will be white.  This is useful to ensure that your stationery appears as intended for people who have a non-white default colour.   Of course you don't have to worry about the code in a program like Front Page Express or FP98, just pick the colour off the pick list and the program will automatically fill it in.  In Arach, you are prompted to pick a colour.  If you're using Notepad, you can use my Colour Preview Utility to learn the colour codes if you don't already know them.

One thing to keep in mind; if you go against all advice and reason and enter the style using FPE please be aware that even though you may have set the repeat option, in the main FPE window, your background will still seem to be tiled all over the screen.  This is just an oddity of the way that program works.   If you have set it correctly, it will display properly in Outlook Express.

As you can see, by merely setting the repeat option and the background colour, we now have far more attractive stationery.   With a bit of finesse using a Graphics Editing Program we could turn this image into a true work of art, but that is beyond the scope of this page.

Next, there is another option I wish to introduce to you here.  A nice, "professional" looking effect to use with stationery is when the background image remains motionless, and the text alone moves when you scroll within a message.   I hope that explanation is clear because there is no way I can demonstrate with a screen shot.  For a mental picture of this effect, imagine the credits at the end of a movie.  The picture remains still and the text scrolls over it.  Of course, the text does not scroll by itself, but you get the picture - hopefully.  In stationery circles this effect is known as a "watermark".

Setting this option can be a bit confusing.  You'll no doubt notice that both FPE and FP98 include a handy Watermark check box on the screen where you pick your background image.  Although this option will work - don't use it.  You're probably wondering why?  Well, once again, that would create this option as an inline style option and thus it won't get saved along with your stationery if people use the Save As... option.  If you're going through all the bother of learning to create stationery you might as well create it in such a way that people who see and like it can save it...

So, we need to find a way to duplicate this effect as a block level style option.   Don't worry, it's easy.  If you're using FP98, simply pick the Fixed option off the Attachment pick list on the Colours tab of the style dialog.  In Arach, you have merely to pick Watermark off the Context menu.  If you're using FPE or Notepad, you'll have to type:  background-attachment: fixed; into the style section.

However you get there, our code now looks like this:

<html>
<head>
<style>

body {
background-repeat: repeat-y;
background-color: #FFFFFF;
background-attachment: fixed;

}
</style>
</head>

<body background="some graphic.file">
</body>
</html>

To recap, that code will set the background image of your stationery to your chosen file.  It will only tile down the left hand border leaving the rest of the page white. If this stationery is used to compose a long message, when the recipient scrolls through the message, the graphics will remain stationary (get it?) while the text moves.

Finally, there is one more thing you need to know to make stationery - margins.  If you do not set a margin, when you type on your stationery, the text will go over the graphics - not a desirable result.  So how does one set a margin?  Once again, it's easy.  You guessed it, this is yet another attribute that needs to be added to our style section.

In FP98, simply type a value into the "Left" text area on the Alignment tab of the stylesheet dialog box.  In Arach, pick Margin (left) off the Right-Click Menu.  In FPE or Notepad, once again you'll have to enter it manually.

The code looks like this: margin-left: 170;   "170" represents the number of pixels in from left side of the window that the text and cursor will appear.  Of course the exact number of pixels will vary depending on the graphic used and your own taste.  Setting this is a matter of trial and error.  If you know how wide your graphic is to begin with then it becomes much easier.

You FP98 and FPE users may be saying "Hold on a minute.  What about the margins tab on the page properties dialog?"  Well, once again that option does work but it will be created as another inline option so it won't get saved by OE.  You're best to add this to our Style block.

The code for the whole stationery that we just made will look like this:

<html>
<head>
<style>

body {
background-repeat: repeat-y;
background-color: #FFFFFF;
background-attachment: fixed;
margin-left: 170;

}
</style>
</head>

<body background="some graphic.file">
</body>
</html>

As you can see, stationery is ridiculously easy to do and can produce some stunning work.  If you've never dabbled in code before and don't have a program like FP98 then give it a try.  I promise you won't be forced to wear a pocket protector or put tape on your glasses, hand coding stationery is just not that dangerous...

If the idea of writing the code yourself seems foreign to you then I heartily recommend Arachnophilia and my custom toolbars.  Since it is a code based interface, you're working with the code itself and you can't help but learn some HTML as you go along; but as it writes the code for you, you don't have to worry about memorizing all these obscure tags and stuff.  Just hit the proper button and it will create the code for you.

No matter how you got there - congratulations, you've just made stationery.

Now, you've designed this lovely stationery, now what.  Well as you might imagine, you need to save it before you can use it.   Saving is fairly straight forward, just ensure that you save it under a name you'll recognize and in a folder you'll be able to find again.  If you've been working in Notepad, ensure that you save the file as an htm file.  Notepad's default file extension is txt, so you'll need to specify the htm extension to have it saved properly.

 

The Next Step:

The instructions above have familiarized you with some of the basic techniques in making stationery.  You can make perfectly good stationery with just those instructions, and many people will be satisfied with that. However there is a lot more that can be done with stationery.  On the pages that follow I will attempt to familiarize you with some of the most popular effects employed by stationery creators.

 

Home | FAQ | Download | TroubleShooter | Discussion | PSP | MIC | WET Retrospect | Feedback

 

© 1998, 1999 sven All content designed and written by sven, except where noted.

Disclaimer:  I am not affiliated in any way, shape or form with Microsoft Corporation.  All opinions expressed on this web site are mine alone and may not represent those of the majority of Outlook Express users.  All brand and product names are trademarks or registered trademarks of their respective owners.  No animals were harmed in the creation of this website.  All characters and situations portrayed on this website are completely fictional.  Any resemblance to actual persons or events is purely coincidental.  Your mileage may vary.  Past performance is not a reliable indicator of future gain. No purchase necessary.