Layout Techniques

Layout Techniques - a look at making page layout more sophisticated

Table & Columns Advanced Index Dreamweaver Index Site Index

HTML makes it difficult to achieve the sort of layout you will find in magazines. It is much easier in art manipulation programs and DTP to make layout with box borders, vertical, curved and horizontal lines, columns etc, not to mention things like text wrap around graphics.
It is however possible to achieve good web page design layout using HTML without resorting to to much graphical input.

Boxes on Web Pages

Boxes can be achieved in a variety of ways. Two of these are shown on this page.

(1) Give the underlying table a border and make it the same colour as the background to the table.
Overide the colour with a darker one for your cell and this will give you a box. This doesn't work well with cells that but up against each other and have different colours!

(2) Overlay a table onto the base table(don't overlap the sides). Give this a black border of 1. Insert a cell into the table and you have a box

(3) Overlay two tables. Give the first a black background and no border. Make the second table in standard view. (make this 100% with one row and one column, a cell spacing of 1and a black border of 1. You now have a double border as here.

(4) Create a cell to hold the box and colour it black (or whatever). Insert a table into the box with the following characteristics (100%, 1px spacing and 5px padding) Colour the cell in the table with an appropriate light colour.

See examples of this on Boxes Page

Lines on HTML Pages

Horizontal lines are easy to insert, but boring to look at. Go to Insert menu/Horizontal Line and you get a line as below.

You can get coloured lines from art packages that specialize in web graphics. See the following below from the program Xara Webstyle.

Vertical Lines are much more difficult.

(1) You can insert a thin cell vertically between text cell and colour it to create a divider. If you make the cell 1px and colour it black or whatever you will have a divider. You will need to insert a 1*1px spacer gif into the cell first or Dreamweaver may collapse the cell. Look at this in action in Layout 2

(2) You can layout your page in cells. The margins of one of the cells (either left or right) can be made to have a coloured line down it. This will act as a vertical divider between the left and right side of the page and give a column effect. This is done by overlaying a table over a cell that is slightly smaller than its carrier cell. See an example of this on the boxes page.

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.

All these techniques can be seen on the Graphical Layout page