Workshop Two: So You Want To Be Web Designer....

Goals: To understand the function of tables in Web design, to become familiar with the WYSIWYG Web editors available on Polaris, and to gain experience with manipulating layouts. 

Rationale: You’ll probably do most of your site design and management using these tools. They do have limitations and you want to be aware of them.

Part One: Tables

Exercise One: You may know from doing other design work elsewhere that page layout through the use of grids is essential to maintaining control over your composition. Unless you are working extensively with graphics, the table is really the only tool you have in HTML to create such compositional grids.

What is a table? It's simply a series of rows and columns (specified by you) in HTML to "chunk" up your page. Each cell within the table can have its own contents and style elements. 

Here are two simple tables I made:

I put no "cell padding" in this table so the text goes right up to the edge  of it.

I made the big cell below 100 pixels high--enough toaccomodate a "tiled" image for a background.

I made this table three columns wide with eight pixels between columns. But notice that you can't see the borders around the cells--I made them the same colour as the page background, so you get the effect of series of columns in a newspaper.

I could put an image in the background of any one of these cells or, as in this case, use another colour to set it off from the others.

I can control font characteris- tics in each cell Indepen- dently. One other thing: This table has been set at exactly "450 pixels" wide, whereas Table one has been set at "100%" of the Page. If you shrink the window you're viewing this page in, i think you'll understand the difference. (question: Why do you suppose most designers Like to set pixel widths themselves?)

Here's the upshot: you can do quite a bit simply by laying out your page with tables. You can put tables inside of tables, merge cells of tables to create big blocks, and fill them with text and image.  In fact, for the purposes of this course, I'll be happy if you stick to a mixture of tables, texts, and images.

Now, if you want to learn more about and practice the underlying HTML tags for tables, go to another Web Monkey tutorial.

If you want to jump ahead to the joys of table creation in WYSIWYG, go to Part Two of this workshop.