weballey logo
left Layout - my layout backnext right
homesearchsite mape-mail
title bars
faster pages
< my layout >
      Now that you've learnt all the tags and their use, you'll want to build your pages with them. You should know how do this with what you know after reading this tutorial. But there still are a few potholes to be avoided. To help you out a bit, I'll try to explain how I built my pages. First have a look at this page with borders showing. You can go back to this page without borders. Then read on for the explanation. You'll need it, trust me.
    First you should have a look at the width. Since a lot of computers still have standard VGA screens, you should limit the width of your pages to fit them. VGA is 640x480 pixels, and cutting off some room for window borders and scroll bars, leaves you about 600 pixels to work with.
    I like a layout with a narrow menu bar on the left and body text and images on the right hand side. There are several other options, but this scheme is widely used and appreciated. I mostly use a width of 150 pixels for the bar, sometimes smaller, depending on what I want to put in there. I did not want my logo any smaller, so that's about the determining factor here. The cyan background color is done with the BGCOLOR attribute of the TD tag. I added a VALIGN to push the menu to the top of the page.
    Right next to it is a strip of white, separating the text blocks from the bar. I use an empty cell to do this, 25 pixels wide, with just a non breakable space (&nbsp;) in it, to prevent collapsing. This could also be done with a higher setting of cell spacing, but that would also cut off the top of the page. This cell needs to be a bit wider (50 or so) if you are using a background image for the bar. Just because not all browsers put the page contents in the same position in the browsing window. Leave a bit of margin to compensate for this behaviour.
    Last is the text cell on the right. 400 pixels wide, vertically aligned to the top. I specified all the widths, for both table and cells, to prevent unwanted expanding of table cells. Sometimes a cell is not entirely filled in width, leaving slack for the other cells to expand. To further constrain the behaviour of the table I set cellpadding and cellspacing to zero. Otherwise I would get a cyan line around the rounded corners of my logo. By the way: all rounded edges are done with graphics, no html there. Some older browsers display the border by default, so I set that to zero also. The resulting table looks like this.

<table width="575" border="0" cellspacing="0" cellpadding="0">
Put logo and menu here...
<td width="25">&nbsp;</TD>
<td valign="top" width="400">
Put page contents here...

    With this setup you can do most pages just fine. If you have long pages or lots of graphics, you will want to chop up the page into several tables. Normally a table won't display untill it is downloaded and interpreted entirely. So untill the closing </TABLE> tag is found. The page will remain blank untill then. I used several tables on this site, one for the logo and top menu and bar, one for the side menu and page body, and one for lower bars. The top appears almost right away, even on big pages. The page itself (second table) doesn't have to wait for the credits (third table) to load.
    Now look again at this page with borders on and then off again. It should make a lot more sense to you now. If you look at the source, you'll notice I used tables for the top and bottom bars. This way I can use text on the bars and add the arrow buttons without resorting to lots of images or image maps.

goto top  
leftCopyright © Gerben Hoekstra - All rights reserved backnext right