Multiple pages without repeating the site structure

HTML & CSS
1

I have multiple pages on a site I’m working on. Each page has the same header, menu, and footer. The only thing that changes is the content. Presently, I have to copy and paste the page layout for each page. It’s a pain, especially when I want to make changes. I know it is possible to build a site and “load” the content into a content section of the page. That way, changing the layout in one file, changes all the pages.

What is this technique called and how is it accomplished? Is it possible without server-side scripting?

2

Some web editors will allow you to define common pieces of the page as a template and so will apply any changes to that template to all of the pages when next you open them in that editor. It still needs to regenerate all of the HTML for every page of your site for you to upload to your site before anyone sees the change in that case.

There are two alternative server side alternatives. One is to use server side includes which allows you to include one HTML file inside another. It does require SSI to be enabled on the server for the includes to work and the files using the include statements usually need a .shtml extension for the includes to be processed by the server.

The other server side alternative is to use a programming language that generates the HTML for each page and which allows for a lot of other things as well as being able to share common HTML.

Things that you can share between all of your pages without needing any of the above are all the CSS to define how the pages look and all the JavaScript to define how the pages behave. You can upload a single file for each of these and link the CSS into the head of each page with a single HTML tag and the JavaScript to the very bottom of the body of each page - also with just a single HTML tag.

3

Which is the approach I’d suggest you learn… using PHP since it’s the most commonly available on servers.

Let’s just say you have everythign before your unique content in header.php

header.php:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
<?php
	echo isset($pageName) ? $pageName.' - ' : ''
?>
	Site Name
</title>

</head><body>

<div id="pageWrapper">

	<h1>
		Site Name
		<span><!-- image replacement --></span>
	</h1>
	
	<ul id="mainMenu">
		<li><a href="#">Home</a></li>
		<li><a href="#">Forums</a></li>
		<li><a href="#">Links</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
	
	<div id="contentWrapper"><div id=content">

and everything after your unique content in a footer.php

footer.php


	<!-- #content, #contentWrapper --></div></div>

	<div id="sideBar">
		SideBar Content Here
	<!-- #sideBar --></div>
	
	<div id="footer">
		&copy Whoever, All rights reserved.
	<!-- #footer --></div>
	
<!-- #pageWrapper --></div>

</body></html>

Each of your unique pages would then be built using php thus:


<?php
$pageName='Unique Page Name';
include('header.php');
?>

	<h2>Unique Page</h2>
	<p>
		Unique page content here
	</p>

<?php
include('footer.php');
?>

That’s the simple way. I would actually probably use functions for the header and footer using echo statements, but I tend to pass more unique data to the page – this was just a quick example. (Normally I don’t advocate even using <?php ?> more than once in a file – but this is likely simpler for you to follow just starting out)

I threw in the $pageName variable so you could start to see how those work as well. That way you can pass a unique TITLE tag to each sub-page. More advanced you could “trap” that variable when building the menu to highlight the current page.

4

Unfortunately, the IT department doesn’t let gearheads like me mess with ASP or PHP for department websites, so Server-side scripting isn’t an option for me. Most of our department websites are very basic single page sites generated using MS Word.

I used an XSLT template to generate en employee directory on one page using javascript to insert the content. I suppose I could do the same thing with the whole page layout. Although, visualizing the page layout using XSLT isn’t very intuitive. Opinions?

A web editor with the option to define a common portion of a layout sounds like a viable option. Can anyone recommend a web editor with this functionality? I’ve tried komodo edit and coffeecup html editor and I don’t think it’s possible in these editors.

5

Bluefish has a facility to create templates, which might be what you’re after. I use Bluefish on Linux, but there are instructions for installing it on Mac or Windows.

6

Ok, sounds like they have no business being your IT department.

So utterly useless web pages with zero accessibility, wasting endless bandwidth on disastrously bad markup, no implementation of caching, and worst of all doesn’t work properly in anything but IE6? OUCH.

Which doesn’t gracefully degrade when .js isn’t present making the page an accessibility nightmare.

“Web editors” – half assed garbage that only teach you how NOT to build a website. Do yourself a favor, get in the IT departments face about letting you use server side includes, and start building real websites instead of output from Word. It will save the company money in the long run, open up the site in question to a larger audience, STOP pissing on the companies reputation the moment anyone opens up the site in a modern browser, and maybe get some real traffic through it since I very much doubt what you currently have makes any sense to search engines – much less accessibility aids like screen readers.

It might sound harsh - but you last post has all the warning signs of “maybe it’s time to hire a real web developer” since it sounds like the typical “Internet, what’s that” approach to having a web presence.

7

Well, the website that I am trying to setup is an internal department website. They are usually generated by the respective departments by someone from that department with little to no experience in web development. They are not publicly accessible and for the most part they accomplish what they need to, giving a little bit of information about the department. I’d like to make my departments site a little better than that. I know more than the average person about building a website, but I wouldn’t call myself a web developer.

Most of the sites are total garbage, that don’t even work in ie6. Even more unfortunate is that 99% of the workforce is using ie6. So I’ve been build a website and learning the joys of fixing it for ie6.

I spoke with the IT supervisor and they said that although they can’t give me access to setup or configure a directory that can use ASP and a database, they should be able to set it up for me. Of course, now I have to learn ASP.NET.

8

I would ask if their setup supports SSI (server side includes). It’s a very simple system to use, no real programming involved, and works on most servers.