 |
Design
By Renee
FirstSteps2Alottafun
Lesson Six Part Two
Please Note***These
pages will be graphic intense, they will take a while to fully download.
Use your refresh button to reload the page to check for updates on this
page. ...Renee
The Script
This script is a double horizontal scroll. The difference from Lesson 5 is
the additional scroll at the bottom. Landscape positioned graphics work
best for this script.
FirstStepper's
Download
Script Here
**Note, The screen captures for how to get your copy of the script are the same as
previous lessons.. They are still the same for lesson six.
Please follow these directions step by step.
1. Click above for script.
2. It will open to a blank html page that will be showing a white background and
scrolling boxes that have a red x in them.

Next click view/source.

This will open up Notepad with the text version of the script.

We will need to save this to the firststeps scripts folder we created.
Click file/save as and open the path to your folder, and save the text file.

You can now close the windows. We are going to go to that same folder and re-open
that text file that we just saved. Go to start/program files/windows
explorer/c:/firststeps scripts/ and double click on the file you just saved to open it. It
will open in Notepad. We are going to make a copy of this text file to enter
our stationery in. Make it a rule to Never work on the original.
Now, right click anywhere inside the Notepad window and click on select all...
This will highlight all the text a dark blue. Now right click again in the window and
click copy...

This places a copy of the text file on your clipboard. Close the windows. Now click
the shortcut to Notepad that we created at the beginning. This will open up a clean file.
Right click anywhere inside the window and click paste.

You should now have a copy of the script.

Ok, with that all done we are ready to enter our stationery
into the script!
Just follow the directions. Remember this, there is NO room for error in scripts.
Even a dot in the wrong place will create a script error window. You must become familiar
with the script and where you are making the changes. Go step by step and change where I
have instructed you to do. This should begin to feel a little more familiar to you.
So if you are ready, let's do it!!
The Script
<HTML><HEAD>
<STYLE>
body {
The font family describes the font you want to use and
see in your stationery. But know this, if the receiver does not have the same font in
their fonts folder, they will only see their "default" font on your stationery.
font-family: "Comic Sans MS";
Font size is determined by what font you choose, some
fonts at 14pt are really small, and some are a normal reading size. Determine this by the
font you are choosing. If you change the font size here, since 14pt is "normal"
there is sometimes a place down in the script you will need to change to match or it will
not change. It is in this script. If you change the font size here, scroll
down below and change it also.
font-size: 14pt;
It is not necessary to change the margin unless you
would like the left margin over some.
margin-left:10;
margin-right:0;
This section tells you what color is the first loaded
into the computers viewer. It is actually the color behind your stationery. I put mine at
the main color I chose for my background. Most computers will show this color before the
actual stationery.
background-color: #ffffff;
This is the color you want your font to be seen on
your stationery.
color: #EFB81C}
</STYLE>
</HEAD>
Your background image is what will cover the whole
background.
<BODY background="file://C:\Program Files\Common Files\Microsoft
Shared\Stationery\BACKGROUND IMAGE HERE.JPG">
This is where your top border scroll image goes. Be
sure and put in the correct width and height of the image. If it is a
transparent gif, you will need to use the .gif instead of .jpg file
extension.
<IMG id=bkg1 src="file://C:\Program Files\Common Files\Microsoft
Shared\Stationery\TOP IMAGE HERE.JPG"
style="position:absolute;top:0;left:-1800;height:100;width:300">
This is where your bottom border scroll image goes. Be
sure and put in the correct width and height of the image. If it is a
transparent gif, you will need to use the .gif instead of .jpg file
extension.
<IMG id=bkg2 src="file://C:\Program Files\Common Files\Microsoft Shared\Stationery\BOTTOM IMAGE HERE.JPG"
style="position:absolute;top:0;left:-1800;height:100;width:300">
Have your midi in your stationery folder and making
sure the titles are exact enter your midi here.
<BGSOUND src="file://C:\Program Files\Common Files\Microsoft
Shared\Stationery\YOUR MIDI HERE.MID" loop=99 style="display:none">
<SCRIPT language=VBScript>
REM Edgar V. Poirier
REM [email protected]
REM Thanks to Tar'Hom for the idea ; )
REM Revised August 21, 1999
Dim w, wW, wH, sH, wx, pW(2), pH(2), myTimer, x(2), xD(2), Res
Dim picX, picY, bxW(2), bxH(2), numPics(2), borders
Set w=document.body
borders=2
In the section below it determines which direction you
want your scroll to go. A number one (1) scrolls from left to right. A
number minus one (-1) scrolls from left to right.
REM ************* MAKE CHANGES HERE *************
xD(1)=-1
xD(2)=1
REM *********************************************
REM Initialize
sub setUp()
REM Set margins
w.style.marginTop=pH(1)
w.style.marginBottom=pH(2)
REM Get window dimensions
wW=w.clientWidth
wH=w.clientHeight
REM Repeat to fix an OE bug
wW=w.clientWidth
wH=w.clientHeight
sH=w.scrollHeight
bH=wH
if sH>wH then bH=sH
for i=1 to borders
REM Limit visible area
document.all("container"&i).style.width=wW
document.all("container"&i).style.height=pH(i)
if i=1 then
document.all("container"&i).style.top=0
else
document.all("container"&i).style.top=bH-pH(i)
end if
document.all("container"&i).style.left=0
REM Set the size of the scrolling area
document.all("box"&i).style.height=pH(i)
document.all("box"&i).style.width=wW+3*pW(i)
document.all("box"&i).style.left=-(pW(i))
document.all("box"&i).style.top=0
next
REM Start the scroll.
SF
end sub
REM universal scrolling routine.
sub SF()
ClearTimeOut(myTimer)
for i=1 to borders
x(i)=x(i)+xD(i)
if xD(i)>0 and x(i)>=0 then x(i)=-(pW(i))
if xD(i)<0 and x(i)<-(pW(i)) then x(i)=0
REM Position the background image.
document.all("box"&i).style.left = x(i)
next
REM repeat (larger numbers give slower scroll below)
myTimer=SetTimeOut("SF",24)
end sub
REM Everything starts here
sub Window_OnLoad()
REM Get window dimensions
wW=w.clientWidth
wH=w.offsetHeight
REM Repeat to fix an OE bug
wW=w.clientWidth
wH=w.offsetHeight
REM Get users screen resolution
wx=window.screen.width
REM and adjust font size to match.
Res=INT(wx/128)
If you changed the font size above from 14, change
it here also.
w.style.fontSize = 14+Res
for i=1 to borders
x(i)=0
REM Get dimensions of background image.
pW(i)=document.all("bkg"&i).style.posWidth
pH(i)=document.all("bkg"&i).style.posHeight
REM Number of images across
numPics(i)=INT((wx)/pW(i))+3
REM "Tile" the background (NOTE: Image is not positioned.)
for j=1 to numPics(i)
data=""
data="<IMG src='" & document.all("bkg"&i).src & "'>"
document.all("box"&i).insertAdjacentHTML "beforeEnd", data
next
next
REM Lets get started.
setUp
end sub
REM This runs if the window size is changed.
sub Window_OnResize()
setUp
end sub
</SCRIPT>
<!-- This is the top border made up of a SPAN inside a DIV - DO NOT CHANGE OR MOVE THE FOLLOWING -->
<DIV id=container1 style="position:absolute;top:0;left:-1400;width:800;height:600;z-index:-1;filter:BlendTrans(Duration=0)">
<SPAN id=box1 style="HEIGHT: 4000px; POSITION: absolute; WIDTH: 3000px"></SPAN>
</DIV>
<!-- This is the bottom border made up of a SPAN inside a DIV - DO NOT CHANGE OR MOVE THE FOLLOWING -->
<DIV id=container2 style="position:absolute;top:0;left:-1400;width:800;height:600;z-index:-1;filter:BlendTrans(Duration=0)">
<SPAN id=box2 style="HEIGHT: 4000px; POSITION: absolute; WIDTH: 3000px"></SPAN>
</DIV>
The higher the number the slower your ticker script
will scroll. ((I like mine at 450))
</DIV>
</BODY>
<script language="JavaScript">
<!--
ScrollSpeed = 450; // milliseconds between scrolls
ScrollChars = 4; // chars scrolled per time period
Enter your ticker script message here. Can be the name
of your stationery, have a nice day, your name, anything you would like others to see.
Keep your message in between the quotation marks, do not put any other quotation marks in
the ticker script. Leave some space between the first set of quotation marks and your
message so that it is not up against the wall of your computer.
function SetupTicker() {
// add space to the left of the message
msg = " . .
. . Your Message Here . . . . ";
RunTicker();}
function RunTicker() {
window.setTimeout('RunTicker()',ScrollSpeed);
window.status = msg;
msg = msg.substring(ScrollChars) + msg.substring(0,ScrollChars);}
SetupTicker();
<!-- end -->
</script>
<!--VERMEER BOT=HTMLMarkup EndSpan -->
</HTML>
Well you are almost there!
Screen Captures are the same as lesson one. This part of your
scripting does not change.
After you have entered in all your information, your Notepad text will need to be
saved. The same script has to be saved two ways.
#1. Click file/Save As
When the Save As window pops up, put a name in for your
stationery
The bottom window has as Text document, that is correct
so save it to your stationery folder.

We still have to Save As a HTML file so our computers
can read the script. So click SAVE/AS AGAIN but this time
open the drop down window, and make ALL FILES as the save as type.
Then using your cursor take the .txt file extension off of the
end of your stationery name and type in .html (make sure the dot is there) and click
save again.

You should now have two files for your stationery, one is stationery name.txt
and the other is stationery name.html
Leave your html notepad open.. we are now going to look at the stationery.
Are you getting a little more familiar with the steps?
OK... now open your Outlook Express, click Message/click New message using/click
select stationery.
In the stationery view window move the scroll bar till you see your stationery. You
will only see the html version. Click on it, and click ok.
Now your stationery should have opened up in the New Message Window.
**You will notice that your image is not in the edit
window. Click on the preview tab to view the scrolling
gif or .jpg, your font size and colors. If you need to make any
changes, close the window, make your changes in your notepad, save, then open your
stationery again in your Outlook Express. Don't Forget to
save your changes in both the HTML and TXT versions.
Click on the preview tab to see the scroll and ticker and hear the music.

Is everything working? Do you see the scroll? Is your ticker displaying your message?
Do you hear your midi playing?
If you did NOT get an error window CONGRATULATIONS!!!! YOU DID
IT!!!
Now click back to the edit tab and test your font, is the color dark enough? Is it
too close to the graphic or too far away? Is it large enough or too large? Do you want to
change anything? If you do, close the stationery, maximize the notepad html and make the
changes, click save (since it is still active and open you can make changes) and open your
stationery again to view the changes.
If you made changes you must save as both html and txt again
If you are quite happy with everything then send the stationery to yourself to verify its
working correctly. If it is, and you have saved both your html and txt, then close your
Notepad you are done with lesson six!
If in the future you want to make changes in this stationery, open
up the txt file, make your changes, save as both .txt and html again.
Click
Here To View Finished Stationery
This will take a moment to load, as I have placed it as a txt version, This way you can
click on View/Source so that you can see the actual stationery changes that I made. You
can see the names and sizes and colors. Use your "back" button to return to this
page
Please Sign my Guest
Book!
I Would Love To Know You Were Here!
Proud Member Of

All Backgrounds And Images Created In

Site Designed And Maintained With
Backgrounds
and Site Design
Created By
Design By Renee
RD
Copyright 1999-2000-2001 Renee Davis

Welcome
Home Lesson
Index Lesson
One
Lesson One-Part Two Lesson Two
Lesson Two-Part Two Lesson
Three Lesson Three Part-Two
Lesson Four Lesson
Four Part-Two Lesson
Five Lesson
Five Part-Two Lesson Six
Lesson Six Part-Two
Lesson Seven Lesson
Seven Part-Two Lesson Eight Lesson
Eight Part-Two
Lesson
Nine Lesson Nine Part-Two
Lesson Ten Lesson
Ten Part-Two
PSP View
Links
|