|
Using Tables as a Layout Tool
Now I will share some techniques on turning your newfound table knowledge into quality page designs.
Before you begin designing your page, you must decide what your target will be. This will determine how your tables are formatted. You must also decide whether you would like the content of your page formatted by pixel width or percentage. If you specify pixel width, the page will not fill the entire screen at larger resolutions (this page is an example) and could cause horizontal scrolling at smaller resolutions..
I will walk you through the process of designing a page and will show you updated samples as we go.
Once you've decided the width of your page, you are ready to get started. Insert a table with the desired width. This will be the container table. Only use 1 row and 1 column with a cellpadding, cellspacing and border of 0. For the example we used a red table formatted at 100%.
Now we'll add a table where we can place the site's branding. Go ahead and insert another table nested within the container table. For the example I formatted the nested table at 98% so that the red background of the container table would appear to be a border. I added a three cell table, with the top and bottom cells having a red background. The nested table also had a cellpadding, cellspacing and border of 0, and the align was set to center so that it fit comfortable within the container table.
Now it's time to add navigation and content.Go ahead and select the first nested table. Once it is selected hit the right arrow key once. This will place the cursor within the container table just after the first nested table. Go ahead and add another table with 2 or 3 columns. For the example I added 3 columns and formatted the left and right columns at 20%. This leaves room for some right and left navigation and a content area. I made the background color of the content (middle) cell white.
Now it's time for some navigation. Add some text, graphics, or whatever you desire into one of the sidebars. You will need to set each cell's vertical alignment to Top. Once you have the navigation in place, you can insert your content in the middle cell. This is what I did for the example.
Now we have a working page. It might not be the most creative page in the world, but it's a good start. From here more images, colors and text could be added to spice the page up.
What I just shared with you was a technique. As you experiment with table designs more, you'll come up with your own techniques that will suit the type of pages you like. This is something that can only be established with practice.
Adobe Creative Suite and DreamWeaver are the perfect web design tools to build your new website with your AUSWEB Hosting.
Get your Adobe DreamWeaver designed website up and running today with an AUSWEB Hosting plan. Click the order button below and follow our signup page!
Newer news items:
|
