• Image Credits
    • Background images Angelfish by Eos Developers. This set of backgrounds if offered in four different color combinations.
    • The decorative image in the masthead is one available for Microsoft clipart.

<h1> tag - Triple Layered Background Layout

Download the Triple Layered Background Template in zipped format

The triple layered look is obtained by using two <div> tags with style rules applied. The outermost background is styled within the body style rules. The 2nd layer is a <div> tag with style rules in the container id. The third layer is styled using the style rules with the id inner. The entire content of the page is within a set of tables. This is just a sample of what you can do with this type of layout. Some things you should remember:

  • You are giving up a lot of "real estate" by limiting the area where you could include information.
  • Keep your graphics simple and limited. You don't want to increase the load time and you want the viewer to get to the "meat" of your site without having to scroll down.
  • Set up your navigation so you can include it on every page. Use an include page - either FrontPage or Expression Web include  or ssi (server side include).
  • Remember that no matter how "pretty" it looks, your viewer is looking for information.
  • If you are using someone else's graphics, give them credit and a link back. Make sure that whatever you use for the innermost section - I prefer just a color - is not so busy you can't read the text.

<h2> tag - A Subheading

The masthead of the layout is a table with two cells. The table has an id of masthead with the two cells have classes applied. logoright uses a background image for the site name and is 475 x 140 pixels. You can create your own image but make sure it is not too wide so the image fits when viewed at 800x600 resolution. logoleft also uses a background image sized at 180 x 180 pixels.

The left navigation, main content area and footer are all one table with style rules applied.

The side menu is simply a styled list. Image Credits MUST be retained if you use the images provided. Classes have also been created for floating images within the content area left or right.

Changes to the "look" or presentation of the page should be made within the external style sheet. Additional styles should be created as you need them.

The links are all styled in the same manner. If you want them to be different for each of the elements - left side menu, content are and footer, then you will need to create additional styles.

Some Information in list format

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Quisque tempor enim ac sem.
  • Vestibulum posuere tincidunt purus.
  • Integer posuere lacus sed nibh.
  • Ut tristique turpis ut sem.

 

A plain ole horizontal line