recommend strategy to implement this design

Question

I'm trying to build a website (html only) for a design studio and I am trying to figure out what is the best way to go about it.

Layour of a webpage is like this:

• A page is divided into two spaces (think of it as a vertical column like this: L | R where L = left side and R = right side)
• R page will have images for menu options. For simplicity, let's say we have "Home" and "Contact Us"
• L page behaves like a state machine. For e.g., when user clicks on Contact Us: L is updated with contact us contents and clicking on Home updates the content with home contents

I'm trying to figure out what would be a good way to deal with this kind of a situation. Please let me know if you need me to be clear or provide more details.

Thanks

Answer 1

I think you have two choices. You could use javascript to modify the contents of the left hand side when the right is clicked on, so that the page never refreshes. This is quick, but doesn't work for people who don't have javascript enabled.

Or you could just create a series of pages with the same text on the right - though you may want to highlight the "Home" or "Contact Us" text so that the user knows which page they're on.

Answer 2

I would just make 2 divs, one for the navigation and one for the main content. since the navigation generally has the same amount of stuff in it i would make it fixed width. just basically a tiny css file defining 2 divs with absolute position, one with fixed width.

div.navigation {width: 250px; position: absolute; right: 0px;}
div.content {position: absolute; right: 250px;}

css3 has a nav tag for navigation that you could use instead of the div.navigation.

Answer 3

Have a look at using a CSS Framework to simplify laying out your webpages. Some popular ones to look at are Blueprint, YUI and 960. These will make it easy for your to make the two column layout you are looking for.

If you use only html, then you have to repeat the html of the design on every page of the website. This is fine for a small website but if the site gets large, and you want to make a change to the template, then you have to edit every single page.

Most html editors (such as Dreamweaver) have a template system where you can save the layout and navigation (without content) as a template file and then use that to build all your pages. If you want to make a change, you just edit the template file and all the pages change.

A more advanced option would be to use some kind of server side include or some very basic php to join together several files that contain your template and content.