|
|
Start Copy Here
| Your Title Here | | | Your body text goes here.
A graphic perhaps?
|
More body text and page components ...
There are three main tables in this page: The outermost table with the wide border, an inner one with the narrow purple border and the innermost one which contains the cells to hold the page content. There are also many sub-tables used to create specific effects and custom changes. All tables are set to 100% width to make use off all the available space.
In this innermost table, the link column at left is set to 20% width while this wider column is set to 80%. The title cell at top of this table and links cell at bottom, are set to 100% width and span both columns. You can safely set the borders of this innermost table to zero, or change the border width or cell padding (set to 2 in this example) without affecting anything else.
Note that the links to the left are held in a separate table of their own - you can use graphic buttons or hypertext links (or alternative content) in the cells of the table. You can even copy the links table to add other sections down the side.
Cell Padding for the outermost table has been set to 50 pixels. Border width is 10 pixels. You will probably want to vary the cell padding depending on your graphical border pattern.
The Cell Padding for the middle table has been set to 8 pixels so you will have the narrow border some distance away from the innermost table. You can change this without affecting the innermost table.
There is a 4-column, 1-row, table holding the links below this text containing area. The table and cell widths for that table have not been specified, so you can add as many as you need and it will self adjust.
Each link is in its own 1-celled table, within a cell of the outer table, and that table's width has been set to 100%. This way you can change the color for each link without editing the HTML code. If you do not want the inner 1-celled tables, simply select them and delete.
If you just want to hide the dividing lines, set all the borders in the lower link table to zero and they will just be well spaced hypertext links.
| | | |
End Copy Here
Web Design Example
|
|
Same Template, Different Settings.
The links table to the right has been repeated 3 times and a logo header was added to each section.
The links table at the bottom was set to border=0 and the borders of each individual table within were set to either glaring green or orange to mimic a different coloured image link border.
Cell padding values and cell spacing values were heavily changed to buffer various sections and to provide false margins as the template was adapted and different concerns presented themselves.
While this (all our) template(s) appear unpretty or downright glarish with their colour schemes, they are used to show contrasted areas in a more obvious way: it is important to see beyond the simple display and be creative with the underlying forms. |
Some clickable buttons or logos:
| | |
|
|
