Layout Techniques Boxes lines and graphics

- a look at making page layout more sophisticated
Table & Columns | WebDevonline Extra |  Site Index

Boxes on Web Pages

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

•  Examples 1 and 2
Give the underlying cell a border and make it the same colour as the background to the table. – in the example this is black
Nest a table on top of the base table cell Give this a lighter background and this will give you a box if you have cell spacing of 1! Thicker margin with bigger cell spacing

•  Example 3
Overlay a table onto the base table, Give this a black border of 1. Insert a cell into the table and you have a box

•  Example 4
Overlay two tables. Make an underlying table containing no cell and a black background.
Make the overlying table have white backgound and a cell spacing of 1
The result is a double box

•  You could of course just give the cell a coloured margin!! However you will need to give the table a border and work on all the other cells that you don't wish to have margins by giving them the same border colours as the page background. – avoid

(5) Example 6 - Use CSS
Create a custom style and use border panel and apply the style to a table cell. Here you can make each border a different colour, a different thickness and style!


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 or make your own in an art package. See the following below from the program Xara Webstyle.



coloured line


Vertical Lines

These 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 Table Set Up

(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.