|
Layouts, the most essential thing when it comes to designing a website. The most basic of all layouts is a three-columned layout made of tables (or Divs). It is fairly easy to make and is very mangable. The layout can handle a large amount of contents, including a banner and disclaimer. Knowing how to make one is the first step in creating an image based layout, so if you're planning to make one and don't know how a lot about tables, I suggest you read this section first! ^_^ 1) The Banner First, in the <body> part of your HTML document, create a table, also include the table row and table cell. With style=border: 1px solid #000;" we've just defined the border style of the table. I recommend you put this into the CSS because the table style will be more convenient to edit later on. Don't worry about anything else for now; this is only the banner xD To add the banner image, you can either set it as a TD background or an image by itself. Add background="IMAGE URL HERE" width="775px" height="100px" to the <td> tag if you want the banner image to be a background, or use <img src="IMAGE URL HERE">. Layout Preview 1 - View Source for the full HTML. 2) Left Menu - Content - Right Menu Let's close the table that contains the banner and create a new table. The new table will be for the left menu, content and right menu. Layout Preview 2 - View Source for the full HTML. 3) Menu Headers Headers are used to divide your menu links in an organized fashion. They're most useful when they're visible, not blended with the other links so visitors can easily spot them. The most convenient way to make headers is using tables. Include the code below in the left/right menu to add a header. Hehe the header code is kinda of long isn't it? ^-^; You can use images too, but with tables the layout will load faster. Layout Preview 3 - View Source for the full HTML. 4) The Disclaimer/Copyright The final piece of the layout, the disclaimer! :D *spazz* To avoid messing up the entire layout, the disclaimer should probably be put in a new layout instead of a TD. Layout Preview Final - View Source for the full HTML. And there you have it - a simple, three-columned layout! ^__^ If you have questions or problems with the layout, feel free to contact me. |
