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?
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.
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
echo isset($pageName) ? $pageName.' - ' : ''
<span><!-- image replacement --></span>
<div id="contentWrapper"><div id=content">
and everything after your unique content in a footer.php
<!-- #content, #contentWrapper --></div></div>
SideBar Content Here
<!-- #sideBar --></div>
© Whoever, All rights reserved.
<!-- #footer --></div>
<!-- #pageWrapper --></div>
Each of your unique pages would then be built using php thus:
$pageName='Unique Page Name';
Unique page content here
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.
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.
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.
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.
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.
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.
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.
This topic is now closed. New replies are no longer allowed.