There are a couple ways to design the layout of your web page. The quickest and easiest way to start off with is using tables. There are others ways, like not using tables at all, like with the ever increasingly popular CSS, another way is just having a Flash site, etc.
To make it easy and keep it simple, we'll start off with using tables to help us design the layout of our website. This is a very common practice and probably most of the sites out there do use tables for their layout.
Once we have the tables setup, then we can simply just add the header, navigation and content very easily.
1) Open Nvu, if it isn't already.
2) In reviewing our site layout sketch we did, we want to layout our website based on the sketch.
So we are going to use a couple tables to achieve this layout. It's a good idea to use at least two tables for your site. One for your header, and the other for the rest of your site. That way you can modify your header information with effecting the rest of your site.
3) In Nvu, click on the table button or table option in the menu and select a table 1 row by 1 column.
4) Next select how many rows and columns. In our example above, for our first table which will contain the header, we just want one row by one column. After selecting just 1 x 1, then hit ok.
5) You'll get something that looks like this...
Select inside the newly created table, and right click to get a menu of options. Click Table Cell Properties...
6) This gives you a whole new menu....now click on the Table Tab as shown below
7) This brings up the table properties menu...where you see the height, set that to 90 and then click on the blue down arrow and set that to pixels.
For the width, make it 100, then select the blue down arrow and select % of window..
Also go ahead and make the borders, spacing, padding all set to 0 (zero).
8) Next change the background color by selecting the box next to it, and select a green color, by moving the mouse over a green color and click it, then click OK.
9) Now go back and look at your screen. You will something that now looks like this....Congratulations, you've inserted your first table.
Please continue with part two of using tables...
