Now you can write on your page

WebMaSter' s page!

"First try!"

	Sign In Sign-Up

How to work with " FrontPage"

Start the program.
It opens with a grey field in the middle,

In the left upper corner you see the icon of an empty page, click on it.

Now you have a new empty page.
You can work with it as if it's a "word" document.

At the left under corner of the new page. you see "normal, HTML, Preview"

Click on html and look at the page, you can see the codes., go back to Normal.

Now go to the top of the screen , to "format" click on format, a list opens, in the list go to back ground, click on back ground, a new window has opened, in there click on brows, now look for a back ground, any thing is ok for now.

Click on ok , now see that your white page is not white any more it shows the picture you found in your computer.

Now you can write on the back ground. look for a nice fonts and colour for your text...works the same as in the program "Word" I hope you used to using Word..

Try making a page with a text and a nice back ground, using a picture from your "my pictures" file.

Write test in red fonts, big...now open the html page again...

And look for this line: <p align="center"><font size="6" color="#FF0000">test</font></p> we are going to play with that line... Put "#FFFF36" in in place of "#FF0000".... and change 6 into 9...

Now go back to " normal" as you can see the size and colour has changed.

In the middle of the upper bar there are two small bent arrows, you can use these to undo any thing you did if you Want to, so try that out, change something and change it back with the undo button.

Try dragging a picture from your pictures file unto the page.... if it's to big go to html...and look for it there..

<p align="center">
<img border="0" src="file:///C:/Documents/mypicture.jpg" width="239" height="183"></p>

It'll look something like this.

Now play with the height and width numbers and look what happens on the normal page.

Try aligning every thing right left or middle middle upper bar has a button for that, you first highlight the bit you want to move around, with the mouse cursor.

Go to the html page and put this code in : ( copy and paste!!) from the note pad!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML xmlns="http://www.w3.org/TR/REC-html40" xmlns:v =
"urn:schemas-microsoft-com:vml" xmlns:o =
"urn:schemas-microsoft-com:office:office" xmlns:w =
"urn:schemas-microsoft-com:office:word"><HEAD><TITLE></TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1256">
<META content=FrontPage.Editor.Document name=ProgId>
<META content="Microsoft FrontPage 5.0" name=GENERATOR>
<META content="Microsoft Word 9" name=Originator>
<link rel="File-List" href="clock_files/filelist.xml">

<LINK
href="./Index1_files/editdata.mso" rel=Edit-Time-Data>
<STYLE>@font-face {
font-family: Anaconda;
}
@page Section1 {size: 595.3pt 841.9pt; margin: 1.0cm 14.2pt 39.7pt 14.2pt; mso-header-margin: 35.45pt; mso-footer-margin: 35.45pt; mso-header: url("./Index1_files/header.htm") h1; mso-even-footer: url("./Index1_files/header.htm") ef1; mso-footer: url("./Index1_files/header.htm") f1; mso-paper-source: 0; }
P.MsoNormal {
FONT-SIZE: 12pt; FONT-FAMILY: "Times New Roman"; mso-style-parent: ""; mso-pagination: widow-orphan; mso-fareast-font-family: "Times New Roman"; mso-ansi-language: EN-US; mso-bidi-language: AR-SA; margin-left:0cm; margin-right:0cm; margin-top:0cm; margin-bottom:0pt
}
LI.MsoNormal {
FONT-SIZE: 12pt; FONT-FAMILY: "Times New Roman"; mso-style-parent: ""; mso-pagination: widow-orphan; mso-fareast-font-family: "Times New Roman"; mso-ansi-language: EN-US; mso-bidi-language: AR-SA; margin-left:0cm; margin-right:0cm; margin-top:0cm; margin-bottom:0pt
}
DIV.MsoNormal {
FONT-SIZE: 12pt; FONT-FAMILY: "Times New Roman"; mso-style-parent: ""; mso-pagination: widow-orphan; mso-fareast-font-family: "Times New Roman"; mso-ansi-language: EN-US; mso-bidi-language: AR-SA; margin-left:0cm; margin-right:0cm; margin-top:0cm; margin-bottom:0pt
}
P.MsoHeader {
FONT-SIZE: 12pt; MARGIN: 0cm 0cm 0pt; FONT-FAMILY: "Times New Roman"; mso-pagination: widow-orphan; mso-fareast-font-family: "Times New Roman"; mso-ansi-language: EN-US; mso-bidi-language: AR-SA; tab-stops: center 207.65pt right 415.3pt
}
LI.MsoHeader {
FONT-SIZE: 12pt; MARGIN: 0cm 0cm 0pt; FONT-FAMILY: "Times New Roman"; mso-pagination: widow-orphan; mso-fareast-font-family: "Times New Roman"; mso-ansi-language: EN-US; mso-bidi-language: AR-SA; tab-stops: center 207.65pt right 415.3pt
}
DIV.MsoHeader {
FONT-SIZE: 12pt; MARGIN: 0cm 0cm 0pt; FONT-FAMILY: "Times New Roman"; mso-pagination: widow-orphan; mso-fareast-font-family: "Times New Roman"; mso-ansi-language: EN-US; mso-bidi-language: AR-SA; tab-stops: center 207.65pt right 415.3pt
}
P.MsoFooter {
FONT-SIZE: 12pt; MARGIN: 0cm 0cm 0pt; FONT-FAMILY: "Times New Roman"; mso-pagination: widow-orphan; mso-fareast-font-family: "Times New Roman"; mso-ansi-language: EN-US; mso-bidi-language: AR-SA; tab-stops: center 207.65pt right 415.3pt
}
LI.MsoFooter {
FONT-SIZE: 12pt; MARGIN: 0cm 0cm 0pt; FONT-FAMILY: "Times New Roman"; mso-pagination: widow-orphan; mso-fareast-font-family: "Times New Roman"; mso-ansi-language: EN-US; mso-bidi-language: AR-SA; tab-stops: center 207.65pt right 415.3pt
}
DIV.MsoFooter {
FONT-SIZE: 12pt; MARGIN: 0cm 0cm 0pt; FONT-FAMILY: "Times New Roman"; mso-pagination: widow-orphan; mso-fareast-font-family: "Times New Roman"; mso-ansi-language: EN-US; mso-bidi-language: AR-SA; tab-stops: center 207.65pt right 415.3pt
}
P.MsoBodyText {
FONT-SIZE: 24pt; MARGIN: 0cm 0cm 0pt; FONT-FAMILY: "Times New Roman"; mso-pagination: widow-orphan; mso-fareast-font-family: "Times New Roman"; mso-ansi-language: NL; mso-bidi-language: AR-SA; mso-bidi-font-size: 12.0pt
}
LI.MsoBodyText {
FONT-SIZE: 24pt; MARGIN: 0cm 0cm 0pt; FONT-FAMILY: "Times New Roman"; mso-pagination: widow-orphan; mso-fareast-font-family: "Times New Roman"; mso-ansi-language: NL; mso-bidi-language: AR-SA; mso-bidi-font-size: 12.0pt
}
DIV.MsoBodyText {
FONT-SIZE: 24pt; MARGIN: 0cm 0cm 0pt; FONT-FAMILY: "Times New Roman"; mso-pagination: widow-orphan; mso-fareast-font-family: "Times New Roman"; mso-ansi-language: NL; mso-bidi-language: AR-SA; mso-bidi-font-size: 12.0pt
}
P.MsoBodyText2 {
FONT-SIZE: 14pt; MARGIN: 0cm 0cm 0pt; FONT-FAMILY: Anaconda; TEXT-ALIGN: center; mso-pagination: widow-orphan; mso-fareast-font-family: "Times New Roman"; mso-ansi-language: EN-US; mso-bidi-language: AR-SA; mso-bidi-font-size: 12.0pt; mso-bidi-font-family: "Times New Roman"
}
LI.MsoBodyText2 {
FONT-SIZE: 14pt; MARGIN: 0cm 0cm 0pt; FONT-FAMILY: Anaconda; TEXT-ALIGN: center; mso-pagination: widow-orphan; mso-fareast-font-family: "Times New Roman"; mso-ansi-language: EN-US; mso-bidi-language: AR-SA; mso-bidi-font-size: 12.0pt; mso-bidi-font-family: "Times New Roman"
}
DIV.MsoBodyText2 {
FONT-SIZE: 14pt; MARGIN: 0cm 0cm 0pt; FONT-FAMILY: Anaconda; TEXT-ALIGN: center; mso-pagination: widow-orphan; mso-fareast-font-family: "Times New Roman"; mso-ansi-language: EN-US; mso-bidi-language: AR-SA; mso-bidi-font-size: 12.0pt; mso-bidi-font-family: "Times New Roman"
}
A:link {
COLOR: blue; TEXT-DECORATION: underline; text-underline: single
}
SPAN.MsoHyperlink {
COLOR: blue; TEXT-DECORATION: underline; text-underline: single
}
A:visited {
COLOR: purple; TEXT-DECORATION: underline; text-underline: single
}
SPAN.MsoHyperlinkFollowed {
COLOR: purple; TEXT-DECORATION: underline; text-underline: single
}
DIV.Section1 {
page: Section1
}
</STYLE>

</HEAD>
<BODY lang=EN-GB style="tab-interval: 36.0pt" vLink=#800080 link=#0000FF
background=desktop/luxor/fly.gif>
<DIV class=Section1 style="WIDTH: 901px; HEIGHT: 1007px">
<P class=MsoNormal></DIV>
<SCRIPT language=JavaScript>
dCol='000000';//date colour.
fCol='000000';//face colour.
sCol='000000';//seconds colour.
mCol='000000';//minutes colour.
hCol='000000';//hours colour.
ClockHeight=40;
ClockWidth=40;
ClockFromMouseY=0;
ClockFromMouseX=100;

//Alter nothing below! Alignments will be lost!

d=new Array("SUNDAY","MONDAY","TUESDAY","WIMSDAY","THURSDAY","FRIDAY","SATURDAY");
m=new Array("JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE",

"JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER");
date=new Date();
day=date.getDate();
year=date.getYear();
if (year < 2000) year=year+1900;
TodaysDate=" "+d[date.getDay()]+" "+day+" "+m[date.getMonth()]+" "+year;
D=TodaysDate.split('');
H='...';
H=H.split('');
M='....';
M=M.split('');
S='.....';
S=S.split('');
Face='1 2 3 4 5 6 7 8 9 10 11 13';
font='Arial';
size=1;
speed=0.6;
ns=(document.layers);
ie=(document.all);
Face=Face.split(' ');
n=Face.length;
a=size*10;
ymouse=0;
xmouse=0;
scrll=0;
props="<font face="+font+" size="+size+" color="+fCol+"><B>";
props2="<font face="+font+" size="+size+" color="+dCol+"><B>";
Split=360/n;
Dsplit=360/D.length;
HandHeight=ClockHeight/4.5
HandWidth=ClockWidth/4.5
HandY=-7;
HandX=-2.5;
scrll=0;
step=0.06;
currStep=0;
y=new Array();x=new Array();Y=new Array();X=new Array();
for (i=0; i < n; i++){y[i]=0;x[i]=0;Y[i]=0;X[i]=0}
Dy=new Array();Dx=new Array();DY=new Array();DX=new Array();
for (i=0; i < D.length; i++){Dy[i]=0;Dx[i]=0;DY[i]=0;DX[i]=0}
if (ns){
for (i=0; i < D.length; i++)
document.write('<layer name="nsDate'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props2+D[i]+'</font></center></layer>');
for (i=0; i < n; i++)
document.write('<layer name="nsFace'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+Face[i]+'</font></center></layer>');
for (i=0; i < S.length; i++)
document.write('<layer name=nsSeconds'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+sCol+'><center><b>'+S[i]+'</b></center></font></layer>');
for (i=0; i < M.length; i++)
document.write('<layer name=nsMinutes'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+mCol+'><center><b>'+M[i]+'</b></center></font></layer>');
for (i=0; i < H.length; i++)
document.write('<layer name=nsHours'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+hCol+'><center><b>'+H[i]+'</b></center></font></layer>');
}
if (ie){
document.write('<div id="Od" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < D.length; i++)
document.write('<div id="ieDate" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props2+D[i]+'</B></font></div>');
document.write('</div></div>');
document.write('<div id="Of" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < n; i++)
document.write('<div id="ieFace" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+Face[i]+'</B></font></div>');
document.write('</div></div>');
document.write('<div id="Oh" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < H.length; i++)
document.write('<div id="ieHours" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+hCol+';text-align:center;font-weight:bold">'+H[i]+'</div>');
document.write('</div></div>');
document.write('<div id="Om" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < M.length; i++)
document.write('<div id="ieMinutes" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+mCol+';text-align:center;font-weight:bold">'+M[i]+'</div>');
document.write('</div></div>')
document.write('<div id="Os" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < S.length; i++)
document.write('<div id="ieSeconds" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+sCol+';text-align:center;font-weight:bold">'+S[i]+'</div>');
document.write('</div></div>')
}
(ns)?window.captureEvents(Event.MOUSEMOVE):0;
function Mouse(evnt){
ymouse = (ns)?evnt.pageY+ClockFromMouseY-(window.pageYOffset):event.y+ClockFromMouseY;
xmouse = (ns)?evnt.pageX+ClockFromMouseX:event.x+ClockFromMouseX;
}
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
function ClockAndAssign(){
time = new Date ();
secs = time.getSeconds();
sec = -1.57 + Math.PI * secs/30;
mins = time.getMinutes();
min = -1.57 + Math.PI * mins/30;
hr = time.getHours();
hrs = -1.575 + Math.PI * hr/6+Math.PI*parseInt(time.getMinutes())/360;
if (ie){
Od.style.top=window.document.body.scrollTop;
Of.style.top=window.document.body.scrollTop;
Oh.style.top=window.document.body.scrollTop;
Om.style.top=window.document.body.scrollTop;
Os.style.top=window.document.body.scrollTop;
}
for (i=0; i < n; i++){
var F=(ns)?document.layers['nsFace'+i]:ieFace[i].style;
F.top=y[i] + ClockHeight*Math.sin(-1.0471 + i*Split*Math.PI/180)+scrll;
F.left=x[i] + ClockWidth*Math.cos(-1.0471 + i*Split*Math.PI/180);
}
for (i=0; i < H.length; i++){
var HL=(ns)?document.layers['nsHours'+i]:ieHours[i].style;
HL.top=y[i]+HandY+(i*HandHeight)*Math.sin(hrs)+scrll;
HL.left=x[i]+HandX+(i*HandWidth)*Math.cos(hrs);
}
for (i=0; i < M.length; i++){
var ML=(ns)?document.layers['nsMinutes'+i]:ieMinutes[i].style;
ML.top=y[i]+HandY+(i*HandHeight)*Math.sin(min)+scrll;
ML.left=x[i]+HandX+(i*HandWidth)*Math.cos(min);
}
for (i=0; i < S.length; i++){
var SL=(ns)?document.layers['nsSeconds'+i]:ieSeconds[i].style;
SL.top=y[i]+HandY+(i*HandHeight)*Math.sin(sec)+scrll;
SL.left=x[i]+HandX+(i*HandWidth)*Math.cos(sec);
}
for (i=0; i < D.length; i++){
var DL=(ns)?document.layers['nsDate'+i]:ieDate[i].style;
DL.top=Dy[i] + ClockHeight*1.5*Math.sin(currStep+i*Dsplit*Math.PI/180)+scrll;
DL.left=Dx[i] + ClockWidth*1.5*Math.cos(currStep+i*Dsplit*Math.PI/180);
}
currStep-=step;
}
function Delay(){
scrll=(ns)?window.pageYOffset:0;
Dy[0]=Math.round(DY[0]+=((ymouse)-DY[0])*speed);
Dx[0]=Math.round(DX[0]+=((xmouse)-DX[0])*speed);
for (i=1; i < D.length; i++){
Dy[i]=Math.round(DY[i]+=(Dy[i-1]-DY[i])*speed);
Dx[i]=Math.round(DX[i]+=(Dx[i-1]-DX[i])*speed);
}
y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
for (i=1; i < n; i++){
y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);
}
ClockAndAssign();
setTimeout('Delay()',20);
}
if (ns||ie)window.onload=Delay;
</SCRIPT>
</BODY></HTML>

Now look what that bit of code did to your page... in preview..

Well try changing colours, font'. back grounds a bit more so that you get used to it.

Now save the page in your computer. left upper corner of the screen , it says file, click on that, go to "save as" name it and store it where you can find it...on the desktop or in my files? Or make a new map with "My website".. save and close the program.

Now you got a web page. But you don't have a web site yet...for that you can go to geocities, on the yahoo search page. or go to this page:

http://edit.yahoo.com/config/eval_register?.intl=us&new=1&.

done=http%3a//geocities.yahoo.com/reg%3f.state=0&.src=geo&.

v=0&.u=613lfagvj1u1i&partner=&.p=&promo=&.last=

And fill in the form there, now you can upload your page....I 'll talk you through that too.. you'll find that any pictures you put in, plus the back grounds....have to be uploaded too, and given the right names.,

You can help yourself by putting the pictures you want to put in the page, and the background page, and the sound bits...all in one map on the desk top.

In the html page your back ground looks like this, if you use the paper as back ground, or if you use something else or the tile as back ground... You'll see tiles.

<body background="bond_paper.jpg">
<body background="milll.gif">

The pictures you insert in the page have an address like this:

I used the mill as inserted picture, because I put all the files in one map, the address is simple.

So when I upload it, I don't have to rename all the addresses...I hope.

More next time after you tried and have 8000 questions...I probably forgot to explain a few steps...

Have fun with it!

Wim.