Site Design: Figuring the Table

STEP FIVE: ROUGH TABLE LAYOUT

Using your storyboard, you want to try and figure out how to break that overall layout down into a series of table rows and columns. In the end, tables are essential to layout on the web. While there are some alternatives (like layers), they're not very good alternatives just yet. Tables do it all.

One decision you'll need to make is how many tables you'll need. Remember that tables can be nested (I'll be demonstrating this at the start of class), can be aligned center or default, and can have their cells aligned top/middle/bottom and left/center/right. So you're going to have a lot of options in realizing your storyboard, and, in fact, there are always multiple ways to create your design in DW. The trick to becoming a good designer is seeking the most elegant of ways, which means thinking about using the fewest tables needed, with the fewest cells.

Here's a second sketch of this site. I've superimposed red lines to show you that I was trying to work out where the table rows and columns would be. You can also see in the blue-highlighted box that I was starting to think about graphics I would need to make:

So I was thinking three rows and then as many columns as I had options. Here's a shot of the final design of the main page. I've turned on the table borders so you can see how it turned out:

I added a row up top to create spacing, and then needed to add a row to contain my info. If you total up the rows and columns, you'll find I started with a table that's 5 rows and 7 columns, then I did a lot of cell merging. If you look closely, you'll also see that the graphic and the news are contained in their own tables, nested within the larger table. That just gives me more control about their spacing and display.

So, by now you have all your Hex values, and a storyboard, and you've started thinking about how that storyboard can be reduced to table rows and cells. Now it's time to start thinking about some graphical elements.