Layout techniques | Webdev Extra Index | Site Index

Graphical Layout Techniques
 

Use of Graphics for layout and Navigation

Image files are frequently used as layout aids and for navigation

  • Background images behind tables. Pages with background images are allowed to be viewed in 'white spaces' between tables
  • Divider lines and graphic bars are not simply used for horizontal rules but also to edge cells. This serves to separate cells
  • Images are used to build up a navigation element.

 

This page uses several common graphic layout techniques

(1) Background image behind tables
The page has a image set as background.
This image is quite small gradientgif 6*34 px.

The image cover the whole page as it tiles over and over again.
The image background can be seen as it overlaps the main table and shows through where the cells have no background colour set or where there are no cells set for the table.

 

(2) Background images to cells

The cell below the heading contains a background gif. Height of cell contrains the image. The cell above has a small coloured image that repeats itself.

These lines can be used as Divider lines
If the gif or jpg is too small to fill the cell (as in the top bar) the image will tile

 

(3) Images used to build up a navigation element.

Simply by put an internal link onto them so that the user clicks on the image to navigate.
However the image has to obviously be for navigation.

The images below are a good example.

toplineto top

A graphical Menu - hyperlinks would be attached to the images

 

Using CSS for background images

A common technique is to include background images in the styles.
A good way of doing this is to have a background CSS file which is called in the code with a <div> tag

See Graphical Lines which also shows the code