Design By Renee
Lesson One 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
Almost sounds scary huh?
It's really not that bad once you become familiar with scripts. In these lessons you will
learn what goes where, and before long it will become much easier!
You have already made your graphic to enter into the script so you're halfway to creating
a scrolling stationery. If your ready then lets get started!
This script is a basic whole page scroll. You can make it scroll 2 different directions. Not at once! You can only have it scroll one direction per stationery. The graphic you created in part one is for either an up or down scroll. For this lesson we will have it scroll up, but you are free to choose down also.
FirstStepper's Click
here for script
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!! Now we are getting to the easy parts!! Yes, Really!
We are going to start entering our stationery in 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.
Ready?... of course you are!!! You are almost done!
The Script
<HTML><HEAD>
<STYLE>
BODY {
BACKGROUND-REPEAT: repeat-y;
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.
COLOR: #ffffff;
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 weight means if you want the font Bold, or Regular..
FONT-WEIGHT: Regular;
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. Its not like that in this script, but I will point it out to you in a script it is
in.
FONT-SIZE: 14pt;
This is the color you want your font to be seen on your
stationery. This is where you enter the HTML code we made a note of in making our
stationery.
color: #000000;
This determines where we want our text to start writing,
usually put it at the width of your graphic. Some scripts you cannot change due to the
script itself. You can in this one.
MARGIN-LEFT: 300px;
This is where you want your text to start from the top, 30px
down from the top of your stationery. This number is not in all scripts. It is here and
30px is alright.
MARGIN-TOP: 30px;
}
</STYLE>
</HEAD>
Body background means the whole page background you want viewers to
see. Since we only have one image for this stationery it will be put in place of \your
image here.jpg Make sure it is exact. put the dot before the jpg and make sure it is a jpg
you created and not a gif. If you made a .gif that's the file extension you would put in
there. Our paths to our stationery folder must be exact, spaces where there are spaces.
Back slashes \ where they are supposed to be. And most of all, make sure your graphic is
in the stationery folder. The bgColor=#ffffff
is the same # that you used above to tell what color is behind your stationery.
<BODY background="c:\program files\common files\microsoft shared\stationery\your image here.jpg" bgColor=#ffffff>
This is where you will put your music. Its best to work with midi
files now, as you learn more you will be able to learn about .wav files (which are very
huge compared to a midi file) Make sure you put your midi in your stationery folder and
copy the title exactly as it is supposed to be.
<BGSOUND balance=0 loop=infinite src="c:\program files\common files\microsoft
shared\stationery\your midi here.mid" volume=0>
<DIV id=imageholder
style="LEFT: 0px; POSITION: absolute; TOP: 0px; Z-INDEX: -1">
<SCRIPT language=VBScript>
Below is where we determine which direction we want our scroll
to go... up or down... For this lesson we can leave it at up.
<!--
direction="up" ' change the
direction of the scroll here:
"up" or "left" or "down" or "right"
This is most important, you must enter the width and height
correctly or your stationery will jump and not scroll correctly. We made ours 1024px wide
x 300px height so the numbers will not need changed. But if you use a smaller height be
sure to change it here also. 1024px wide is a standard that most designers use.
sizew=1024 ' enter the width of the
scrolling image here
sizeh=300 ' enter the height of the
scrolling image here
Do not change anything between here and the notation I have
below. Scroll down for more information.
nail=0
source=document.body.background
tall=((screen.height\sizeh)+1)*2
wide=(screen.width\sizew)+1
if direction="up" then
max=tall
axis=sizeh
placement=0
reset=0
elseif direction="left" then
max=wide
axis=sizew
placement=0
reset=0
elseif direction="down" then
max=tall
axis=0
placement=-sizeh
reset=-sizeh
elseif direction="right" then
max=wide
axis=0
placement=-sizew
reset=-sizew
end if
document.write "<pre>"
for temp=0 to max
if direction="up" then
document.write "<img
id=pics"&temp&" src><br>"
elseif direction="left" then
document.write "<img
id=pics"&temp&" src>"
elseif direction="down" then
document.write "<img
id=pics"&temp&" src><br>"
elseif direction="right" then
document.write "<img
id=pics"&temp&" src>"
end if
document.all("pics"&temp).src=source
next
document.write "</pre>"
document.body.background=" "
sub scroll()
if nail=1 then
exit sub
end if
if placement < axis then
setTimeout "move", 1
else
placement=reset
setTimeout "move", 1
end if
end sub
sub move()
if direction="up" then
imageholder.style.top=-placement
elseif direction="left" then
imageholder.style.left=-placement
elseif direction="down" then
imageholder.style.top=placement
elseif direction="right" then
imageholder.style.left=placement
end if
placement=placement+1
setTimeout "scroll", 1
end sub
sub imageholder_onclick()
if nail=0 then
nail=1
else
nail=0
end if
scroll()
end sub
scroll()
-->
</SCRIPT>
</DIV>
<script language="JavaScript">
<!--
ScrollSpeed = 275; // milliseconds between scrolls
ScrollChars = 4; // chars scrolled per time period
Below is where you place a message that runs across the bottom of
your viewing window. You can use any message you like. Do not put any other Quotation
marks in the message. Everything must be contained between the quotation marks that are
already there. If your message is real close to the quotation marks on the left, your
message is right up against the wall of your viewer. That is why I have placed a space
between the first quotation marks and the first period. the period is for "decoration
purposes only, it is not necessary" Put your message in the pink area.
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>
</BODY></HTML>
Well you are almost there! Now here comes the only scary
stuff!!
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 squirmy???
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.
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 one!
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.
I know the saving as to both is overwhelming, in a few more lessons it will become so
very easy for you and it will just fall into place.
Click Here To View Finished Example
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