Creating your First Stationery... [Toolbars]

Creating your First Stationery...:

I bet you thought we'd never get here didn't you? Well, before we can dive into making stationery, there is one small matter we have to take care of first. As I noted above, for stationery purposes, it is impractical to use the New HTML Page button to create a new document.

Instead, we're going to create a blank HTML "template" that we'll use as a basis for all stationery. Start off by pressing the New HTML Page button mentioned above.

That will bring up the dialog box mentioned above. It allows you to pre-set the background colour, title, text colour and link colour of the HTML page. This gives us the opportunity to easily set several options that govern how our new page will work. Unfortunately, as previously mentioned, for stationery we can’t use most of that information, and the few items that are useful will be set elsewhere via my toolbars, so this dialog is completely useless to us, and is almost a hindrance.

As is the case with many other HTML editors, Arachnophilia was not designed with stationery in mind, so there is no way to create a new HTML page in Arachnophilia without going through this dialog. Just hit the "OK" button to go on.

Now in the main Arachnophilia window, you will see the following code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

<HTML>

<HEAD>
<TITLE>(Type a title for your page here)</TITLE>
<META NAME="GENERATOR" CONTENT="Arachnophilia 3.9">
<META NAME="FORMATTER" CONTENT="Arachnophilia 3.9">
</HEAD>

</BODY>
</HTML>

As we’ve already discussed, this code is useless to us, so let’s get rid of it. Press CTRL-A to highlight all the text on the screen. Now press ENTER to get rid of it. Note that it is important to erase that text by pressing ENTER rather than DELETE or any other key because in order to automate as much as possible in my toolbars, I call the programs built in Find/Replace dialog several times. When the current document is completely empty, the Find/Replace simply does not work. But having one empty line (pressing enter to delete the highlighted text) allows the function to operate properly.

The window should be completely empty and your cursor should be on the second line. This is our template - an empty HTML file. Since this is going to be a vitally important file for us - it is the most basic building block of stationery in Arach, let's take some steps to protect it. On the File Menu, choose Properties, now in the Attributes section, put a check mark beside Read-only. This makes it so that we can't later accidentally over write this file.

Now that our template is complete, let's save it. Save this blank file by pressing the Save button, or by picking Save on the File menu. When the Save As... dialog box appears, navigate to your Stationery folder and save this file there. I recommend leaving the default name of Untitled1.html alone as we will need this file again and you are unlikely to confuse this file with anything else.

Now, when ever you make stationery in Arachnophilia, simply load this Untitled1.html file first and you will not have to bother with the HTML Page Setup dialog.

That’s all well and good, but I’m sure you’re wondering why I had you create and then save a completely empty file. Don’t worry, I had a good reason. It has to do with the way Arachnophilia works.

With most of the Stationery Toolbar items I’ve added, I set it up so that the program will automatically prompt you to insert a graphic or sound. However, this only functions properly when the file you are working on is saved. Creating and saving a new file each time you wish to use it is a pain, so now whenever you wish to create stationery, load this Untitled1.html file first and you don’t have to go through the bother of presaving the file whenever you insert a graphic. For easy access, Untitled1 will be on the "Recently Used" section of the File menu.

One extremely important thing you must keep in mind is to always save your finished stationery into the same folder as Untitled1.html. Since we are using that as our base file, all pathnames to graphics or sound files that you insert are based on the location that Arachnophilia found Untitled1 at. If you change that location when you save, then Outlook Express will not be able to find your graphics or sounds.

Thus, the location where you save this file becomes of paramount importance. Looking back at the organizational structures I mentioned on the Organizing your Stationery page, if you use either the "All in one" or the "Subfolders by File type" strategies, then simply save this untitled1.html file into your stationery folder.

If you are using the "Subfolders by Theme" strategy, then things could get a bit more complicated. You might think that you'd need a copy of this file in each theme subfolder where you might wish to create stationery. That of course would be ridiculous. If you use this strategy I'd instead recommend that you use the Stationery folder as a Temporary folder and create your stationery there, moving the files to the appropriate subfolder when done. By using the Autocopy feature this presents no problem, so once again you can save your untitled1.html file to the stationery folder.

The reason we deleted the automatically generated code by pressing ENTER is because in order to automate as much as possible in my toolbars, I call the programs built in Find/Replace dialog several times. When the current document is completely empty, the Find/Replace simply does not work. But having one empty line (pressing enter to delete the highlighted text) allows the function to operate properly.

By this time I’m sure you’re wondering if we’ll ever get into making stationery. Don’t worry, that’s the end of the setup and background information, I promise. Now, let's make some stationery:

You may have noticed as you installed the toolbars that the following three files: background.jpg, button.gif, and music.mid went into the C:\Program files\sven\arach folder. We’re going to use these to make some stationery, it won’t be the most attractive stationery in the world as I just picked the first three files I ran across, but you’ll get the idea of how this all works.

First of all, the way you work with these files will once again depend on your organizational structure. If you are keeping your graphics and music files in separate subfolders (Subfolders by file type approach) then move these files to the appropriate places now - otherwise you can just leave them where they are.

With that done, we're ready to start: Close any open documents in Arachnophilia. We want to start off bare. Now, go to the File menu and pick Untitled1.html off the bottom in the "recently used files" section (see above for information on creating and using this file). It will open as an empty screen.

Now, on the centre Stationery toolbar, click the Basic button. A widow will pop up asking if you want to have all files used automatically copied to your working directory. Please read the Auto-Copy section above for further information on this feature. Make the choice appropriate for your organizational structure.

Once that is done, a window will appear asking you to pick a colour. This is the background colour for the document in case the background file you’ve chosen doesn’t fill the window completely. Pick the "coral" colour in the upper left corner.

After you have done that, another new window will appear giving you the opportunity to choose a graphic file. First, you must navigate to the folder where the Graphics reside. Once you’ve found the correct folder, pick the background.jpg file. Now click Open. Once you click on Open, the following code will appear in the main window:

<html>
<head>
<!-- This stationery Created with:
/* Sven's Custom Arachnophilia Toolbars ver 3.0

- create stunning stationery at the click of a button -

https://members.tripod.com/servais
*/
-->
<style>
body {
background-color: #ff8080 /* This sets the Background Colour for your stationery */

}
</style>
</head>

</body>
</html>

Please note - the path for the background.jpg may vary from that shown depending on your organizational structure and whether you use Auto-Copy.

As you'll notice, the cursor is also positioned just above the </body> tag.

So, what do we have? At the moment we have some very basic stationery. If we were to preview this, the background image would be tiling itself to fill the entire window. So let’s add a few things and make this stationery more attractive.

First, let’s change this stationery so that the graphic only tiles down the left margin. Left-Border stationery being the most common. In the style section of the document (between the <style> tags, near the top), position the cursor (by clicking) anywhere between the { and the }.

Right-Click anywhere on the main window, and pick Border (Left) off the resulting context menu. As you can see, background-repeat: repeat-y; /* Left Border - Image repeats down the left side of the screen */ has now been added at the cursors position.

Now, let’s set a margin so that any text we add doesn’t go over our border. The cursor should be one line below our just added Border (Left) code. If, for some reason, it isn’t - press the Down Arrow button on the keyboard to move it to the correct position. Now, with the cursor positioned correctly, right-click again. This time, choose Margin (Left) off the menu. You should now see margin-left: 250; /* Left Margin - Sets the margin in from the left side of the screen */ added to that line. I set the default margin to 250 pixels. We’ll get into how to change it a little later.

To recap, we now have some stationery where the graphic runs down the left-hand side of the window, and the text margin is set to 250 pixels.

This is perfectly functional stationery as it is, but let’s add a bit more to it. Press the Down Arrow key several times (or click in the appropriate spot) to move the cursor to a blank line within the body section of the document (between the <body> tags near the bottom). Now click on the Email button on the centre Stationery toolbar, not to be confused with the Mail button on the first Stationery toolbar.

IMPORTANT NOTE: Do not confuse the body section of the document with the style section (which also contains the word "body"). They are completely separate areas and can not be used interchangeably.

Whenever I mention the Body section in these instructions, I am referring to that part of the HTML document which resides between the <body> and </body> tags:

<body BACKGROUND="Graphics/Background.jpg">

...This is the Body section....

</body>

This is not to be confused with the Style section:

<head>
<style>
body {
...This is the Style Section...
}
</style>
</head>

If you experience problems with your stationery, please double check that you have things in the correct location. If an item which is supposed to go in the body section is instead placed in the style section your document will not work properly.

After clicking on the Email button, you will once again see a window asking you to pick a graphic, but this time it should be pointing to the correct folder already. Find button.gif and open it. Once that is done, a new window appears. This is the Search / Replace window (See Replace above for more information). In the Search For: field, type "replace" (without the quotes). Then in the Replace With: field type your email address. Make sure that the Search Entire Document box is checked and then click on Replace All. The program will do its thing and eventually tell you that it replaced "replace" with your e-mail address once. Press Okay, then Close the Replace Window.

Now, back in the main program window, the following has been added to the code:

This is a linked e-mail button. Don’t let all those Search / Replace steps scare you. Most of that only has to be done once. Now that you’ve filled it in, the program will remember it for you. Also, remember that the actual path in your code may differ from that shown depending on your setup.

Finally, let’s add one more thing to our stationery. Perhaps there is a certain musical selection that you always want to use with this stationery.

Once again, press the down arrow key to move the cursor to a blank line, then press the Sound4 button on the toolbar (or the Sound5 button, if you have OE5 - though this should be placed immediately after the <body> tag instead). You will again see the familiar window asking you to pick a file. Navigate to your Music folder, and find the music.mid file. Once you click open, the sound embedding script will be added to the code in the main window.

This is a good spot to look at what we have. Before we preview, however, there is one thing we should do to make it easier to evaluate our stationery. With the cursor on a blank line in the Body section of the document, press the Sample button. This will insert a paragraph of sample text which will allow us to easily determine if our margin is set correctly. For best results, this sample text should probably be placed above the email button.

Press the Preview button (the paint palette button on the right of the default toolbar). Once your browser opens you can see (and hear) what you have created. As you can see, that background colour doesn’t quite work with our background picture, you can tell by the position of the sample text that the margin needs to be decreased a little, and wouldn't it be cool if we added a little animation and made that background scroll... Use ALT-TAB to return to Arach, you do not need to close your browser.

Let’s start with the background colour. We’ll change that to a nice white. In the Style section of the code find the section that reads: background-color: #ff8080 /* This sets the Background Colour for your stationery */. Position the cursor, by clicking within the #ff8080 section and then right click. A window will appear allowing you to pick a new colour. Pick white (or another colour if you prefer).

Now to fix the margin. Still in the Style section of the code (near the top), find the part that reads margin-left: 250; and change the 250 to a lower number number. Let’s try 225. Click on the preview button again to see what the changes look like.

Much Better, that actually looks rather good, but as the piece de resistance, let's add in the background scroll I mentioned earlier. Once again, position the cursor in the body section of the document - on a blank line somewhere, maybe at the bottom. Now press the Scroll button on the middle stationery toolbar. As you might expect, this will add the scroll script to your stationery.

Let's preview this stationery one last time to see the effect of the scroll script. Wow - ain't that cool? Congratulations, you've just made stationery and learned nearly everything you need to know to use Arachnophilia and my toolbars effectively.

Now that the stationery has been fixed, you can delete the sample text again. Click in the margin to the immediate left of the line of sample text in the code to highlight it (or you can Click and drag if your prefer). Press the DELETE key.

Click here to see what the finished stationery should look like (sample text left in to demonstrate the Margin).

If you want to save that stationery, use the Save As... command on the file menu because we’ll want to save this under a different file name than Untitled1.

Tip: You can ensure that you never accidentally overwrite your Untitled1.html file by making it a Read Only file. With Untitled1.html open in Arach go to File | Properties. On the properties sheet, in the Attributes section (near the bottom) put a checkmark beside Read Only. Click Okay and you're done.

Does that sound complicated? I hope not, once you get used to how the program works I’m sure you’ll find this to be a simple way to create stationery. Just to recap, here are the steps taken, without any of the other explanations:

	Open Untitled1.html
	Click "Basic" button
	Pick appropriate option on auto-copy screen
	Pick background image
	Pick Background colour
	Position cursor, right-click – Border (left)
	Right-click – Margin (left)
	Position cursor, click email button
	Pick button image
	Replace address
	Position Cursor, click JSound button
	Pick music
	Insert Background Scroll
	Preview
	Save

By contrast, let’s look at what you would have to go through to produce the same thing in Front Page Express:

	Format menu - Background
	Check Background Image
	Browse
	Check From File
	Browse
	Find background image
	Pick background colour off menu
	Okay
	View menu - HTML
	Position cursor in head section
	Press enter to make a bit of room
	type:
	<style>
	<!--
	body { background-repeat: repeat-y; margin-left: 225;
	}
	–>
	</style>
	Okay
	Enter three times
	Insert picture button
	From File
	Browse
	Find & insert Button image
	Click button to highlight
	Click hyperlink button
	Pick Mail: off of hyperlink type menu
	Enter email address in URL field
	Click beneath button to position cursor
	Insert menu - File
	Navigate to your music embed script (you do have one don’t you?)
	Insert it
	View Menu - HTML
	Find appropriate <img> tag
	Enter correct path and filename for file to embed
	Ok
	Insert Menu - File
	Navigate to your Background Scroll Script (hope you have one...)
	Insert it
	Save
	As file
	Find proper folder and assign file name.

Whew! After reading that, which program would you rather use? Also remember that FPE doesn’t have a preview option, so you can’t even see what your creation really looks like. I’ll take 15 steps over 42 any day.