TOT - Web pages design question

[Another Dave]

I've got a web site (anti wind turbine) which consists of 5 pages with a standard header with navigation buttons across the top. When a button is clicked the appropriate page is loaded, complete with header and navigation buttons. Obviously a change to the header requires 5 pages changing.

I'm setting up a new site (anti solar farm - same landowning family) and would like the pressing of a navigation button to load a new body only, not the whole page i.e leave the header and, if possible, footing alone.

I can't figure out how to do this. I'm comfortable with CSS but I don't want to faff about with javascript.

Any ideas, search terms, very simple example pages etc?

Another Dave

[spuorgelgoog]

1. Use CSS and DHTML to open/close the relevant part of the page
2. Use a server side include on each of the 5 pages to bring in the header and footer from a separate file, which only has to be updated once
3. Use a content management system to handle all the menu updating

Owain

[Allan]

+1

[Brian Gaff]

Be careful, as if the page changes out of view of a screenreader we would not know it had changed.

Brian

[Mike Barnes]

There are ways to do literally what you ask for, but I wouldn't recommend any of them. Better is to arrange things so that each page contains exactly the same header and footer, that way it will *look* as if only the body has changed. If you want to avoid changing every page when the menu (etc) changes, you need the server to pull the common elements from separate shared files.

There are several ways to do this. I'd use PHP.

sample.php:

(stuff) (page contents)

PHP is easy to learn and very useful. What you see above doesn't begin to scratch the surface of what you can do with it if you have a mind to.

It's important to understand that whatever method you choose, you're using what might be called an advanced server feature, and you're dependant on the hosting company providing that feature (PHP in the example above).

[John Rumm]

What the others have said, and some additional options:

Use a frame set - so that clicking a link in the top frame loads something new only into the lower frame,

or

Use a web authoring package that supports either template pages or library regions / inserts. That way you tell it that however many pages are based on a common template, and then any time you update the template (i.e. the common stuff) it will automatically update the template sections in any other pages that use them.

[Dave W]

I would use frames, with the header as a frame at the top, and the body as a frame filling the rest of the screen. Frames are "deprecated", but I haven't seen a convincing reason why.

See

for example. No javascript involved.

[polygonum]

Pleaaaaaasssssee not frames...

[Gordon Henderson]

I used to use a nice bit of css with server-side includes and a bit of php to keep things all together.

Then I gave up and moved to wordpress. The only downside is chosing the theme to use...

Gordon

[Tim Streater]

Nothing wrong with frames (cue argument in which I will not participate).

[Mike Barnes]

You say you haven't seen a convincing reason why not. When I bookmark the events page, and then use the bookmark, I actually get the home page. Does that begin to convince you?

[The Natural Philosopher]

1. use frames or iframes

[polygonum]

Totally agreed.

An organisation I am involved with had a frame-based site. The inability to send useful links was a major issue. It might have seemed OK when it first started and only had a few pages, when it had grown a bit it was a complete pain. And it was very much the sort of site where links to individual pages were very much needed.

[Tim+]

It's perfectly possible to bookmark a framed page, just not as easy.

Tim

[Mike Barnes]

That's true in theory but it doesn't address the reality of the situation for most users.

[DICEGEORGE]

And if someone follows a link to the page within your frame they wont see the header links, or know that its supposed to be there.

I once wrote javascript to put in headers and tailers for me, but its so complicated I cant remember how it works or how to edit it.

Much easier and quicker to copy and paste the header and tailer HTML into each of the 5 pages. Or to tweak it so the current pages menu item is highlighted.

[George]

[Huge]

And now you have two problems.

[Mike Barnes]

Are you going to keep us in suspense?

[The Natural Philosopher]

I've done this using php and a master include for all pages.

It works pretty well and due to the fact that what takes times is loading images and so on, which get cached, its also pretty fast

Happy to help out with source for drop down menus and generic header type stuff.

[Dave Liquorice]

My site(s) basically have single index page and it loads the relevant content into the "content " based on a "query string" in the URL.

Yep, even though you are effectively reloading the entire page, most of it is already on screen and cached so things are very quick.

I've got menu buttons that do the normal mouse over colour change and highlight for active page all in CSS. Not investigated dropdown menus in CSS but I believe it's possible. I detest javascript...