Can I use a template html page within another html page

[Vicksley]

Hi all,

What I am trying to achieve, but have no idea how to go about it, is

I want to use a template banner/navbar/ that I have created myself for all pages on my site.

Is it possible to add a "include file" into my html pages so that if I need to change one thing on the navbar or banner page I should only have to do it once via the template page instead of having to do it on every page in the website.

I am hoping to do this without using a database or frames, maybe using javascript instead.

I am using dreamweaver 8 to create my site and I wanted to first get this right before I get on with the whole site.

I was also hoping to make the page load quicker by achieving this, so that it looks as though only the content is changing......

I am not sure how to go about this ....

Can anyone help me out by maybe shooting me in the right direction with some javascript code....where to place it and the call function to achieve it..

Do I have to save the template file as a js file??

Anyway I will leave it out there and see what you guys can come up with for me....

Thanks

Vick

[FC Jamison]

I use javascript for this.

I have a menu.js file that wil update my menu links sitewide. I do the same for my footer as well.

[Vicksley]

Yea.....that is kind of what I was hoping to do.....

Is it possible that you could help me with some of the coding for adding that page.......

as I do know that it can be done......Just not HOW to do it......... Could someone point me in the right direction of where to find the correct coding....as I am lost to the amount of info to look through on the net...

Thanks Vickie

[The Geeky Kid]

PHP Include, I think this is what you're looking for, basically, you give this script, and you have index.php but that ONLY has the template, and the PHP Include script, PHP Include is easy to learn, and there is a GREAT tutorial at xndesigns.com, anyways, you say what your layout looks like, give all the coding, ect. but where you type text, you put in the script, and you say what the main page is gonna be, and what all the other pages are (you MUST have whatever.php if you want that to be a page, and it MUST be a PHP extension) , and now you have it so the links could be ?go=whatever or ?page=whatever, you get to decide that part too, i know, im confusing, Just go to XNDesigns already, lol

[FC Jamison]

php is beyond my little brain at the moment...

for a banner...the quick and dirty javascript is

document.write('<a href="bannerLink.htm"><img src="yourImage.jpg" /></a>');

basically whatever you would put on the html page, you enclose in document.write(' '); in the javascript file.

You the just relace your html code with <<script type="text/javascript" src="yourScript.js"></script> Let me know if you need more detail.

[Vicksley]

Arggggg......

Thanks Deacon.....

that was sort of what I was after...and I did get some results with what you gave me.....

But not the result I was hoping for....I did get the images to load using the javascript...But I have CSS attatched to the html banner page and was kind of hoping that the whole page would load with the CSS attatched to it....Not just the images....

Thanks also to The geeky kid....but I havent had much experiance as yet with PHP......maybee I need to look into more of that....But I think that may include databases doesnt it?

Back to punching in more code for me....

Thanks guys.....any other help you may think of I would be glad to recieve the advice..

Vick

Never mind....I will try and play with it a bit more to hopfully get the result I need....

Thanks again for the codeing though......It did help....I could always just creat one image file instead of using three images and CSS....

[FC Jamison]

The css should kick in once the page is written.

Give the banner image an id and write the css for it.

[The Geeky Kid]

WHAT?!?! What happened to xndesiGns? Well, they basically gave a thing that I would've edited for you, PHP Include is barely PHP :P

[Vicksley]

The css should kick in once the page is written.

Give the banner image an id and write the css for it.

Ahhhh......I must not be getting it .....actually it is doing the one thing I wanted.....Giving me the banner page across every page on the site....and giving me the one file to edit if I need to.....But I am thinking now javascript may not be what I am after as it still shows the page reloading around the same time that a normal html page does.....ie.as in flashing the banner rather than giving the affect of not moving at all...

I know I am not making much sense....but I know what I want to do....I just am not explaining it well enough......I just like to be difficult...and have it all work the way I want....and expect all to know what I am on about...lol

What I really wanted is the whole banner html page to load into the other html with all the content still in it....such as the banner Css and all the banner graphics that are attatched to the banner.html....

But I have a feeling that it wont all write into it.....

Dont worry...I will work it out....I wont sleep till I can get it right...LMAO...

Thanks Deac....Youve been a gem

Vick

[rus]

The best way to do what you need is either with PHP if you are on a Linux server or ASP if you are on a WIN based server.

They both work in the same way, without using a database. You simply create your header/navigation as a seperate file. Then in each of your pages you place the include code where you want the header/nav to appear.

This is the broad explanation of how it works, but hopfully it will lead you in the right direction. There are tons of tutorials online that will tell you exactly how to do this.

Good luck!

[FC Jamison]

Yeah...without some type of server-side programming, the only way I know of to do that is with frames.

[rus]

It's actually pretty simple. I found a good tutorial that will help:
http://www.tizag.com/phpT/include.php

[FC Jamison]

It's actually pretty simple. I found a good tutorial that will help:
http://www.tizag.com/phpT/include.php

That does look pretty simple...

...and this doesn't reload the menu.php file every time a new page is loaded?

[rus]

I'm not an expert, but I don't think it does. One thing it doesn't make clear is that the file that you want included should be stripped of the all tags except what is needed to format the page. So the example they show you would remove the HTML and BODY tags.
In other words, remove all tags before Body and after /Body except any JavaScript that controls mouse over, etc.

[Rhyan]

Hi all,

What I am trying to achieve, but have no idea how to go about it, is

I want to use a template banner/navbar/ that I have created myself for all pages on my site.

Is it possible to add a "include file" into my html pages so that if I need to change one thing on the navbar or banner page I should only have to do it once via the template page instead of having to do it on every page in the website.

I am hoping to do this without using a database or frames, maybe using javascript instead.

I am using dreamweaver 8 to create my site and I wanted to first get this right before I get on with the whole site.

I was also hoping to make the page load quicker by achieving this, so that it looks as though only the content is changing......

I am not sure how to go about this ....

Can anyone help me out by maybe shooting me in the right direction with some javascript code....where to place it and the call function to achieve it..

Do I have to save the template file as a js file??

Anyway I will leave it out there and see what you guys can come up with for me....

Thanks

Vick

Hi there.
All solutions for your problem listed below seem to be OK, however, the easiest way to do it is using css. If the banner you want to place shows the same way on every page, you should just make something like this :

<div id="banner">&nbsp;</div>
and add the following css to an external file
#banner {
width=banner width;
height=banner height;
background-image: src"path/to/your/banner.jpg";
backgrount-repeat: no repeat;
}
then just copy the <div> element on every of your pages.

The second way is to create a template in dreamweaver. Dreamweaver has its own template engine, so once you setup your template and apply it to all of your pages, once you change the template, all your pages will update.

If you don't know how to do a template, there is a tutorial in Dreamweaver and it is really good and simple.

The last option is using javascript or php to set it up, however I see that other guys have already explained it.
Good luck!

[Vicksley]

Thanks...

But I have done all that...using css...

nevermind......what I was tryin to acheive I think I need to use php....but dont want to.....lol

So...I will just stick to the css I think.....

thanks anyhow...

[Beshur]

Hi! I had the same problem sometime ago.
Then I just found a PHP book and there are some appropriatable functions as guys have already said: they are

include

and

readFile

.

E.g.: I have the main page index.php with the code in it:

<?php
 if (empty($c)) {
    readFile("a.htm");
    } else {
    readFile("$c");
} ?>

I use it in my own site. It's pretty simple and works. Minus - title of page is unchangable. But I coped with this.

[webdesign buddy]

Hey guys,

Here is a PHP solution for that from Alistapart, check this link: http://www.alistapart.com/articles/keepingcurrent/

This is not just for navigation. PHP include or require_once function can also be used to insert external HTML file (code of your navigation, footer, banner, etc.) in your markup. With this, updating menus, footer, banner, etc. in your pages can be done by just editing one file -- no database, no javascript, only simple PHP function and HTML. Hope this would help.

Your web design buddy,
web design | web usability | information architecture | CSS | XHTML

[azzu5]

Hi,

why don't you try JavaScript and XML..

Put your all content in xml file then load this xml file through javascript where you want on your page.

Look for some tutorial how to read xml file you will get lots of resources....

Cheers

[Tonupunuri]

hi, thanks for the suggestion. Can you please give more details on the code you have provided. Can you show a sample page how we can use it.