Zelaron Gaming Forum - Help Needed for HTML

Zelaron Gaming Forum (http://zelaron.com/forum/index.php)

- Tech Help (http://zelaron.com/forum/forumdisplay.php?f=329)

- - Help Needed for HTML (http://zelaron.com/forum/showthread.php?t=42024)

Help Needed for HTML

What I need is help here I'm using Microsoft Expressions Web (FrontPage XP) and I need help to make a bar on the left side that navigates around the site without me having copy and paste it on each page. How would I go about doing this, this is the script I have

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<style type="text/css">
a {
color: #FF0000;
}
a:visited {
color: #0000FF;
}
a:active {
color: #000000;
}
a:hover {
color: #00FF00;
}
</style>
<script type="text/javascript">

</script>
</head>
<body style="color: #FFFFFF; background-color: #008000" onload="FP_preloadImgs(/*url*/'button22.jpg',/*url*/'button23.jpg',/*url*/'buttonA3.jpg',/*url*/'buttonB2.jpg',/*url*/'buttonD1.jpg',/*url*/'buttonE1.jpg',/*url*/'button24.jpg',/*url*/'button25.jpg',/*url*/'button26.jpg',/*url*/'button27.jpg',/*url*/'button28.jpg',/*url*/'button29.jpg',/*url*/'button30.jpg',/*url*/'button1A.jpg',/*url*/'button6.jpg',/*url*/'button8.jpg',/*url*/'button9.jpg',/*url*/'buttonB.jpg',/*url*/'buttonC.jpg',/*url*/'buttonE.jpg',/*url*/'buttonF.jpg',/*url*/'button11.jpg',/*url*/'button12.jpg',/*url*/'button13.jpg')">
<p> </p>
<p> </p>
<table border="0" id="table1" style="WIDTH: 103px; HEIGHT: 186px">
<tr>
<td><a href="index.htm">
<img onmouseup="FP_swapImg(0,0,/*id*/'img1',/*url*/'button22.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img1',/*url*/'button23.jpg')" id="img1" onmouseover="FP_swapImg(1,0,/*id*/'img1',/*url*/'button22.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img1',/*url*/'button31.jpg')" height="20" alt ="Home Page" src ="button31.jpg" width =100 border=0 fp-title="Home Page" fp-style ="fp-btn: Embossed Rectangle 2"></a></td>
</tr>
<tr>
<td>
<a href="Games%20Hosted.htm">
<img onmouseup="FP_swapImg(0,0,/*id*/'img7',/*url*/'buttonA3.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img7',/*url*/'buttonB2.jpg')" id="img7" onmouseover="FP_swapImg(1,0,/*id*/'img7',/*url*/'buttonA3.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img7',/*url*/'button32.jpg')" height="20" alt ="Games Hosted" src="button32.jpg" width=100 border=0 fp-title ="Games Hosted" fp-style ="fp-btn: Embossed Rectangle 2"></a></td>
</tr>
<tr>
<td>
<img onmouseup="FP_swapImg(0,0,/*id*/'img8',/*url*/'buttonD1.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img8',/*url*/'buttonE1.jpg')" id="img8" onmouseover="FP_swapImg(1,0,/*id*/'img8',/*url*/'buttonD1.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img8',/*url*/'buttonC1.jpg')" height="20" alt="FAQs" src="buttonC1.jpg" width="100" border="0" fp-title="FAQs" fp-style ="fp-btn: Embossed Rectangle 2"></td>
</tr>
<tr>
<td>
<img onmouseup="FP_swapImg(0,0,/*id*/'img9',/*url*/'button24.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img9',/*url*/'button25.jpg')" id="img9" onmouseover="FP_swapImg(1,0,/*id*/'img9',/*url*/'button24.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img9',/*url*/'buttonF1.jpg')" height="20" alt ="Site Links" src="buttonF1.jpg" width=100 border=0 fp-title ="Site Links" fp-style ="fp-btn: Embossed Rectangle 2"></td>
</tr>
<tr>
<td>
<img onmouseup="FP_swapImg(0,0,/*id*/'img10',/*url*/'button26.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img10',/*url*/'button27.jpg')" id="img10" onmouseover="FP_swapImg(1,0,/*id*/'img10',/*url*/'button26.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img10',/*url*/'button33.jpg')" height="20" alt ="RPG Maker" src="button33.jpg" width=100 border=0 fp-title ="RPG Maker" fp-style ="fp-btn: Embossed Rectangle 2"></td>
</tr>
<tr>
<td>
<img onmouseup="FP_swapImg(0,0,/*id*/'img11',/*url*/'button28.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img11',/*url*/'button29.jpg')" id="img11" onmouseover="FP_swapImg(1,0,/*id*/'img11',/*url*/'button28.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img11',/*url*/'button34.jpg')" height="20" alt ="Other Makers" src="button34.jpg" width=100 border=0 fp-title ="Other Makers" fp-style ="fp-btn: Embossed Rectangle 2"></td>
</tr>
<tr>
<td>
<img border="0" id="img12" src="button35.jpg" height="20" width="100" alt="Forums" onmouseover="FP_swapImg(1,0,/*id*/'img12',/*url*/'button30.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img12',/*url*/'button35.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img12',/*url*/'button1A.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img12',/*url*/'button30.jpg')" fp-style="fp-btn: Embossed Rectangle 2" fp-title="Forums"></td>
</tr>
</table>
</body>
</html>

If you know how to make it so that pages apear on the right of it please help. :haha:

You'll need to use some sort of server-side scripting. After you've figured out what server-side scripting language is available, you'll need to find out how to read a file into a string, and how to do a string replace. Once you've got that all figured out, all you need to do is put in placeholders for the title and the content, say {title} and {content}, save it in a file, then for each page, put the page content in a string, read the template from the file, and do a string replace to set the title and the content, then output the completed page (the string-replaced template).

The way I've done it on my sites is to have a javascript file separate from any page. Then, on each page, I've got:

<SCRIPT language="Java/HTML" src="/Java and CSS/menu.js" />

Or something like that.

The javascript menu's I've got are completely text, with things in the CSS to make it look pretty.

I'm sure you know that the great thing about this is that you don't have to change every single page if you need to add or delete links. Just change the .js file, and it will change on every page.

The .js file looks something like this, btw:

Code:

<!-- Begin

// NOTE: If you use a ' add a slash before it like this \'

document.write('<DIV id="menulocation">');

document.write('<TABLE cellpadding=0 cellspacing=0 border=0 width="150"><tr><td>');

 

// COPY AND PASTE THE NEXT TWO LINES TOO ADD A NEW LINK



document.write('</td></tr><tr><td nowrap>');

document.write('<a href="index.html" class="menu">Home</a>');

document.write('</td></tr><tr><td nowrap>');

document.write('<a href="about.html" class="menu">About Us</a>');



document.write('</td></tr><tr><td nowrap>');

document.write('<a href="contact.html" class="menu">Contact Us</a>');



document.write('</td></tr><tr><td nowrap>');

document.write('<a href="projects.html" class="menu">Future Projects</a>');



document.write('</td></tr><tr><td nowrap>');

document.write('<a href="ineffable.html" class="menu">Ineffable Lenny</a>');



document.write('</td></tr><tr><td nowrap>');

document.write('<a href="muldrum.html" class="menu">Muldrum</a>');



document.write('</td></tr><tr><td nowrap>');

document.write('<a href="brgs.html" class="menu">BRGS - Animated</a>');



document.write('</td></tr><tr><td nowrap>');

document.write('<a href="affiliate.html" class="menu">Affiliates</a>');



document.write('</td></tr><tr><td>');

document.write('</td></tr></table></DIV>');

//  End -->

In fact, that's the whole .js file for the menu on one of my sites.

I've seen all that you've done though I need a bit more help I am not as experianced with Java or CSS scripting languages as I am HTML.

To be honest, the only Java I can write is my menus! :p

I write all my own CSS, though, simply because it is the smplest thing in the world to write. It might look like a handful if you're not used to it, but after a while you'll be doing it without thinking.

For example:

Code:

body {

 background-color:#333333;

 margin:0 auto;

}

#around {

 margin:0 auto;

 width:600px;

 text-align:center;

 padding:5px 5px 5px 5px;

 background-color:#eeeeee;

}

#header {

 margin:0 auto;

 width:590px;

 background-image: url(http://ineffable.byethost31.com/imag...litbarblue.jpg);

 height:30px

BODY - the main body of the page. I've got a very dark grey background. The margin is in there simply because it works.

AROUND - margin in again because it works. Width speaks for itself, as does text-align and background-colour. Padding is basically space between the border and the writing in pixels.

HEADER - margin, again because it works. Width speaks for itself, as does height. And the background image is a link to an image.

So you see, when you break it down it really is simple.

Starting to Understand...there is hope.

I do understand that Lenny but I don't understand what you were doing in the other post with the

document.write('<DIV id="menulocation">');
document.write('<TABLE cellpadding=0 cellspacing=0 border=0 width="150"><tr><td>');

What is 'document.write' & 'menulocation' &, no wait, I know what Tables are? Well that is I don't understand how to incorperate it into my Site Pages.

document.write causes the browser to put the Javascript string into the HTML document at the time it is run. Basicly where you include the Javascript, it will insert all the HTML in the single quotes.

<DIV ID="menulocation">

In my CSS file I have part that is:

Code:

#menulocation {

 PADDING-RIGHT: 0px;

 PADDING-LEFT: 0px;

 PADDING-BOTTOM: 0px;

 WIDTH: 150px;

 PADDING-TOP: 0px;

 WHITE-SPACE: nowrap;

 POSITION: absolute;

 TOP: 225px

}

This basically tells the script where to put all the HTML into the page.

---

To incorporate it all into your site you write a script for the menu, and write a CSS file. The CSS file contains all the information for your webpage - colours, images, fonts, everything.

You then build your HTML page, using the CSS file to make it look prettyful. Once you've built the basic page, add in the menu using the script tags (<SCRIPT language="Java/HTML" src="/Java and CSS/menu.js" />) and add all the content to your page.

At least, that's how I do it. I set up the page so it looks nice, then add in the menu (and change parts of the page if it doesn't work just right), and then add in the content - if I add in the content first then I may end up having to change where it is etc due to things like the menu script.

I wish i knew what the hell you are talking about. The only HTML i know is #000000 and #ffffff, blsck and white.

Even more Help needed...

Okay, thank you Lenny and WetWired I finished setting up the css and the rest of the files.

Now I need even more help...
How do you set up a log in and log out and to add to this how do you set it up to where only members can download items on your site?

Well to do members, you definately need server scripting. You'll need a lot of server scripting.

Quote:

Originally Posted by WetWired

Well to do members, you definately need server scripting. You'll need a lot of server scripting.

Server Scripting? Could you please elaborate on this. I really need to set it up, Along with a joining area.

It's very complicated. It's easily two or three nights' work to write from scratch.

Aw...that was too much for me WetWired so I haven't gotten my website out there but I got a free forum instead, in which is becoming a hasle to work with. I now won't need people to log on to my site but instead the forum, where they can then download it. I'm going to work on it more as soon as I stop writing this. http://www.freepowerboards.com/nrgfu...ming/index.php