Main Page. VBA, ASP, Visual Basic 6.0, and VB.net. Visual C++, C#, C++, C. HTML and maybe javascript. Forum,Games and Jokes, other stuff. Submit a Tutorial Today!
Lesson 7: Musical Chairs.

By now, you should know the basics of table design. If you don't remember how to create a table, then refer to Lesson 6: Tables and Chairs.

Making Web Site Layouts with Tables.

Many web site designers these days are using tables to make website designs. In the past, the big thing used to be FRAMES for making web sites. Frames are outdated nowadays, but I will cover them in the next lesson.

In this lesson, I will teach you a simple way of organizing your websites, known as the two column method for its use of two columns.

Two Column Layout Method.

In the two column method you need to create a basic table arrangement like so:

<TABLE>

<TR>

     <TD>This is the toolbar column</TD>

     <TD>This is the main information column.</TD>

</TR>

</TABLE>

As you can see, this is not that complicated, and it does not yield many results in your design. What you need to do is to make your toolbar column (the left one) smaller than the information column (the right one). This will make it look more appealing. You might want to put all your links on the left side so that users will have a consistent way to browse through your site. Remember consistency is key to building a site, if you can keep the user from being confused while browsing your site, you can keep them there longer and get more out of each one.

Let's try this next example.

Two Column Layout Method (More Advanced).

<TABLE>

<TR>

     <TD width="25%">Toolbar<BR><A href="http://www15.brinkster.com/anman/index.html">Binary Central</TD>

     <TD>This is my site, I like it a lot, it has many things to offer consumers. blah blah blah yackity smackity you get the point.</TD>

</TR>

</TABLE>

It looks a lot better, but you might want to put a border around it or something.

Once you have this basic table structure down, you can do a lot of sites like this. Remember, you can also change background colors/pictures in tables just like you can for the BODY tag. You can even change backgrounds of individual cells/rows.

I hope you had fun with tables! I plan on covering more tables in the advanced section of the tutorials, but now let's turn our heads over to frames,one of the older methods of page design.


<-Previous Lesson Next Lesson->
 

Binary Central by Anman: "http://www15.brinkster.com/anman/"