Click the logo to add
this site to your Favourites
Search:
Quick Links
Subscribe to my Newsletter
Books presented in association with:
Your Free E-Mail
Account:
Send me mail!
Borders & Margins
Introduction
Borders
Left Borders
Notepad
Arach
FrontPage 98
FrontPage Express
Top Borders
Right Borders
Bottom Borders
Custom Position
Margins
Watermarks
Compatibility: The information on this page applies to both Outlook
Express 4 and Outlook Express 5
As you saw on the Making Stationery page, I mentioned that Left border stationery was the most prevalent. That of course implies that there are other border options... well, the window has four sides, doesn't it?
That's right, there are actually several border options you can use, so on this page we'll look at all the different border options you can use, as well as how to set a margin for each. We'll also have a look at Watermarks, Repeats and Custom Positioning.
The purpose of stationery is to enhance your messages by making them more attactive and fun to read. It should also make your message easier and more enjoyable to read. If the text of your message is displayed on top of a busy, or brightly coloured background graphic it will be neither easy nor enjoyable to read. What is needed, therefore is a way to be able to use interesting graphics and yet still retain the readability of the message. Borders allow us to do this.
Consider this web page for a moment, this could easily be stationery instead. When I designed this site, I wanted to use an interesting background image, so I came up with the image you see at the left. However, if that image were tiled across the entire window, just imagine how difficult it would be to read this text... right, darn near impossible. Therefore, I used a border so that I could retain my interesting image, but also have a plain area where I could write, and more importantly where people can read what I write.
This is, of course a left border. It is by far the most common type of border employed both in stationery, the web, and even in print publications. Left borders are not the only option however, I could easily have made that a top border, a Right border, a bottom border, or even a stripe down the middle if I had wanted. When it comes to stationery, you can place your background image anywhere you choose.
Since it is the most common, let's look at the left border first. In order to set a border of any type, it needs to be done in the stylesheet of your document. You can find a brief discussion of style sheets on the Making Stationery page.
A left border will obviously keep your image aligned with the left side of your window. The exact way of accomplishing this will of course depend on what program you are creating your stationery in. As usual, I'll cover how to do it in Arach, FPE, FP98, as well as the straight HTML for those doing it by hand.
Let's start with the straight HTML. For those of you using Notepad or otherwise hand-coding your stationery, the code for a left border, looks like this:
background-repeat: repeat-y;
This of course goes into your style sheet:
<style>
body {
background-repeat: repeat-y;
}
</style>
Let me guess, you expected to see something like border: left, and aren't really sure what's going on here. Remember, by default the background image of your stationery will tile itself all over in order to fill the entire window. In order to set a border, you have to tell it not to do this, so in this case you are telling the background image of your document to only repeat down the y-axis of your document, in other words, the left border.
If you are using Arach (with my toolbars), setting a left border is very simple. All you have to do is make sure that the cursor is located in the Style section, then Right-Click and pick Border (Left) off the menu.
In FrontPage 98, it is nearly as easy. In this program you need to go to the Format Menu then Pick Stylesheet. The resulting window will have the following code displayed in it:
<style>
<!--
-->
</style>
One important aspect of stylesheets is that they need to know which aspect of your total document the code in the stylesheet works upon. So in this case, since we want to affect the background image which is visible through out the entire body of the document, we'd tell it that we wnat to work with the body, like so:
<style>
<!-- body
-->
</style>
Notice the space before and after the word body. WIth that done, click on the Style button at the bottom, then switch to the Colors tab (not the Borders tab as you might expect). On the Repeat drop down menu you'll see 4 option, choose the repeat-y option, then hit Okay.
When you do, you'll be returned to the original window which now displays the following code:
<style>
<!-- body { background-repeat: repeat-y }
-->
</style>
Pklease note, you may not see the effect of your style changes in the Normal editing window of FP98. Be sure to preview your stationery to see what it really looks like.
Now, if you happen to be using FrontPage Express, things are a little different. FPE has no built in support for Stylesheets of the type shown above. For that mater, FPE has no built in way to create a style sheet of any description. So you have two choices, you can either switch to FPE's HTML view (View | HTML) and enter the proper code manually, or you can delve through a myriad of windows and dialog boxes, and still end up entereing the code manually, but in a slightly different format.
If you choose to enter the stylesheet in teh HTML window, jsut use the code shown above in the examples and remember that style info is best placed in the head section fo the document (between the <head> and </head> tags).
If you choose to do it the other way, then here's how to go about it: Right Click your document and pick Page Properties. In the resulting dialog box, near the bottom, click on the Extended button. In the New dialog box clikc on the Add button at the right.
Now in the next dialog box to appear, you'll see 2 text entry fields, in the top one (Name), enter "style" (without the quotes). In the lower (value) box, enter the left border code shown above "background-repeat: repeat-y", again, without the quotes. Then press OK 3 times. As with FrontPage 98, you won't see the effects of your changes in the FPE window. Save your work then preview it to see what it really looks like.
There you have it, how to create Left borders in stationery. In a lot of cases, you can create a left border without even bothering to set one. It all depends on your image. When many people create images for stationery, they make them of sufficuent width that a left border is "implied" and is created by default because there is no room on the screen to tile the image anywhere else. However, even with such an image it is considered sloppy coding to not set a border of some sort directly in the code because there will always be someone with a larger monitor and a higher resolution, you don't want your stationery to lok weird on their system because you neglected to set a margin.
Next to Left Borders in popularity is the Top border. As you just saw, the left border caused the background image of a document to only repeat itself along the y-axis of the window. The top border is very similar. Instead of the y-axis, a top border repeats along the x-axis of the window.
The code for this is nearly identical to that of the Left border, the only different being the axis specification in the repeat statement:
<style>
body {
background-repeat: repeat-x;
}
</style>
The methods of producing this is nearly identical in all the rest of the covered HTML editors as well. In Arach, pick Border (Top) off the Right-Click Menu. In FP98, choose the repeat-x option on the repeat drop down of the colors tab of the Stylesheet dialog. Finally in FPE, simply replace the "y" with an "x" when entering the style info.
There are a few other issues affecting Top Borders, be sure to check out the Top Border page to learn about these (but only after you finish this page of course, there's some important stuff below...)
asdf
asd
asdf