Hello and welcome to my guide that will show you how to make a jazzed up webpage from the starters to the advanced. First off let me explain how this guide in itself will be formatted. First part will be for the people who have no clue how to make a webpage and are just starting out. The seconded part teaches the more advance people how to use more advanced commands. The third part is advanced use of dhtml on your website and at the very bottom I include some dhtml codes for you to start off with.
Here are a few tips with this guide <> means start </> meant stop <ad> means advanced <beg> means beginners
Part 1. For the beginners I recommend using FrontPage for this, you can download off your favorite file sharing place. If you do not wish to use such a program I recommend using geocities.com and use there site builder and skip the rest of what I am about to say. As I was saying get your FrontPage up and running. Then open it up and start new page. For most peoples needs you are going to need a table use the table button on the top. Then drag how ever many you want and delete/merge what you don’t need. (For the more advanced user I recommend a frame in the main part to save on time) Ok so you got a basic layout now. Now lets set up the page settings. Right click and scroll down to page settings.Make your settings on how you want them to be. Now that that is done if you have images use the image button on top and hyperlinks same way.Set up the page like you want it but leave the middle of the page blank where you would input text. (Advanced people put frame here). <Beg.>Now you are going to what to save this SAME page as every link you are going to want to have. Then after you are done doing that Go ahead and use the hyperlink to link all the pages together. Now save over all the files you just saved.</beg> <ad>Now you will want to open a new page for each hyperlink. Then input the text you want to see inside the frame. DO NOT put it in tables unless you want tables inside the frame! Now go back to your index page and hyperlink each page but where it says target pick the frame you made. This will open it inside frame. Now save</ad>Now you have a basic page if done right!
Part 2. Getting fancy with front page! <moving text> go to insert->web component->dynamic effects->marquee then edit it to what you want </moving text>
<Hover pictures> To make a picture change when there is a mouse over do this Click the picture you want to change Then click on format-> dhtml effects Then pick on mouse over then pick the picture you want it to swap with. </Hover picture>
ok so you can mess around a bit with the web componats but now I enter the html world.
Here is a basic forum of a html page <html> <head> <title></title> </head> <body> </body> </html>
<html> means its made from html <head> is the header of the page <title> is page title seen at the top <body> contains what ppl see <p> paragraph <font> tag that has variables after it </> tag means end of what’s in tag
so that is basic html I will be talking a lot about putting Stuff into the header tag here is what it would look like If I say put hp tv into the header tag heres what it looks like <head> hp tv </head> same with body tag
part 3.
you must change everything in the red yourself!
here is a basic script to get your title to type! This must go into your <head> part of the page also dont forget to change title to your own
Code:
<script language="JavaScript1.2">
// *******************************************************************
// script by drevil_nz, Michael Dillon, Christchurch New Zealand.
// Permission granted to use this script provided this credit
// remains intact. Visit my homepage [Only registered and activated users can see links. ]
// Script written for Internet Explorer 4.0+.
// *******************************************************************
var message="Michael Dillon's dynamic title script" //specifys the title
var message=message+" " //gives a pause at the end,1 space=1 speed unit, here I used 10 [Only registered and activated users can see links. ] each = 1.5seconds.
i="0" //declares the variable and sets it to start at 0
var temptitle="" //declares the variable and sets it to have no value yet.
var speed="150" //the delay in milliseconds between letters
function titler(){
if (!document.all&&!document.getElementById)
return
document.title=temptitle+message.charAt(i) //sets the initial title
temptitle=temptitle+message.charAt(i) //increases the title by one letter
i++ //increments the counter
if(i==message.length) //determines the end of the message
{
i="0" //resets the counter at the end of the message
temptitle="" //resets the title to a blank value
}
setTimeout("titler()",speed) //Restarts. Remove line for no-repeat.
}
window.onload=titler
</script> For a cool looking firwork thing use this
Code:
<script language="JavaScript1.2">
/*
Document firework script (By Kurt Gregg, [Only registered and activated users can see links. ])
Modified/ perm. granted to Dynamic Drive to feature script in archive
For full source and 100's more DHTML scripts, visit [Only registered and activated users can see links. ]
*/
var ns=document.layers?1:0
var ie4=document.all?1:0
var ns6=document.getElementById&&!document.all?1:0
amount=14;
if (ns){
for (i=0; i < amount; i++)
document.write("<LAYER NAME='nsstars"+i+"' LEFT=0 TOP=0 BGCOLOR='#FFFFF0' CLIP='0,0,1,1'></LAYER>");
}
else if (ie4||ns6){
document.write("<div id='ieCov' style='position:absolute;top:0px;left:0px'>");
document.write("<div style='position:relative'>");
for (i=0; i < amount; i++)
document.write("<div id='iestars"+i+"' style='position:absolute;top:0px;left:0px;width:1;height:1;background:#ffffff;fo nt-size:1;z-index:10'></div>");
document.write("</div></div>");
}
Clrs=new Array('ff0000','00ff00','ffffff','ff00ff','ffa500','ffff00','00ff00','ffffff','f f00ff')
sClrs=new Array('ffa500','00ff00','FFAAFF','fff000','fffffF')
Xpos=300;
Ypos=150;
initialStarColor='00ff00';
step=5;
currStep=0;
explosionSize=120;
function Fireworks(){
var WinHeight=(ns||ns6)?window.innerHeight-100:window.document.body.clientHeight-100;
var WinWidth=(ns||ns6)?window.innerWidth-100:window.document.body.clientWidth-100;
var Yscroll=(ns||ns6)?window.pageYOffset:document.body.scrollTop;
for (i=0; i < amount; i++){
if (ie4||ns6)
var layer=ns6?document.getElementById("iestars"+i).style : eval("iestars"+i).style;
else if (ns)
var layer=document.layers["nsstars"+i]
var randCol=Math.round(Math.random()*8);
var randSz=Math.round(Math.random()*2);
layer.top = Ypos + explosionSize*Math.sin((currStep+i*5)/3)*Math.sin(currStep/100)
layer.left= Xpos + explosionSize*Math.cos((currStep+i*5)/3)*Math.sin(currStep/100)
if (currStep < 110){
if (ns){layer.bgColor=initialStarColor;layer.clip.width=1;layer.clip.height=1}
else{layer.background=initialStarColor;layer.width=1;layer.height=1;layer.fontSi ze=1}
}
else{
if (ns){layer.bgColor=Clrs[randCol];layer.clip.width=randSz;layer.clip.height=randSz}
else{layer.background=Clrs[randCol];layer.width=randSz;layer.height=randSz;layer.fontSize=randSz}
}
}
if (currStep > 220)
{
currStep=0;
Ypos = 50+Math.round(Math.random()*WinHeight)+Yscroll;
Xpos = 50+Math.round(Math.random()*WinWidth);
for (i=0; i < sClrs.length; i++)
{
var newIcol=Math.round(Math.random()*i);
}
initialStarColor=sClrs[newIcol];
explosionSize=Math.round(80*Math.random()+100);
}
currStep+=step;
setTimeout("Fireworks()",20);
}
Fireworks();
// -->
</script> It would take days to teach you all of these so i bid you farewell with a few short notes a. dont forget to make it your own b. look good but be great c. Dynamicdrive.com and javascriptkit.com have more dhtml d. Post likes to your site here to show off what you have done
P.s. if you feel i have missed somthing please let me know!
Awsome Html Guide
Awsome Html Guide -
06-12-2008
