Web Page Guide

"We end up with everything we are composed of in a lattice, a grid, a mesh. 

- Doris Lessing

By this point, you have learned almost everything that you need to know to create a basic web page.  There's still publishing, but we'll get there in a sec.  The one slightly-more-than-basic thing we're going to go over is tables.  Why?  Because they are, as the title indicates, your friend and mine.  Seriously: tables are wonderful, marvelous, versatile things, that can organize information and even aid in your design.

Notice there's no link there.  Why?  Because this very page has two separate tables on it: a large, four cell table that creates the color blocks and a smaller table along the left side that creates the navigation bars.  If you hit the little Front Page icon on the browser toolbar, you'll see what I mean.

Tables in Front Page work in similar ways to tables in Word, with a few added complexities.  let's dive in.

You can insert a table in two ways:

Go to the "Tables" menu across the top.  Select "Insert," then "Table."  You may want to glance at the other things you can insert as well, as this will be one way to add columns or rows later.

A box will come up that lets you select table features.  Let's take a sec to explore these.

• Across the top, you select the number of rows and columns.  You can always add or delete these later, so don't feel too pressured.
• Then you choose the layout.  This includes:
  • "Alignment" lets you indicate how you want your table vertically aligned in the larger unit (page or cell of another table).  It defaults to left. I almost always choose center.
  • "Specify width" determines how wide your table will be, either in pixels or as a percentage of the larger unit.  Please note that even 100% tends to leave a margin on the page.
  • "Border width" indicates how wide you want your border to be, or if you want one at all.  You will want to include a border if  (a) your information needs to be in clear boxes and/or (b) you don't intend to use a different background color for individual cells (we'll get to that in a sec).  The trend in design these days is for solid blocks of color with no border.  However, on things like a schedule, I prefer to have a visible chart.
  • "Cell padding" indicates how much space you want between the content of a cell and the wall of the cell.  I usually put at least 5 pixels for visual ease.
  • "Cell Spacing" is the space between cells.  If you have a border, this will tend to increase its size.  Mostly cell space is useful if you are going to make your cells large blocks of color with no border.

Any of these can be changed at any time, so again, don't feel pressured.

And we have tableage!

(Note: if you choose not to have borders, a faint dotted line will appear in Front Page.  This will not appear on the published web page).

The second way to insert a table is much the same way you do in MS Word.  Click on the table icon across the toolbar.  Choose the number of rows and columns by selecting the same number of horizontal and vertical boxes.  You can always add rows later if four is not enough.

If you do this, your table will show up with the default settings, so we'll need to change these.  To do this, with your cursor in the box, go to "Table."  Select "Properties," then "Table."

In addition to the familiar properties like alignment and cell padding, there are a few more:

• Border color.  Front page defaults to a kind of 3D border.  If you want a plain black border, change the border color to black.
• Background color.  If you want your background color to be something other than that of the larger unit, change the color here.  Note that this will change the background of the entire table rather than just the individual cells.

A few other notes:

You can change column width simply by moving the mouse arrow until a double-arrow appears, then dragging the border to the appropriate width.  Row height pretty much requires hitting "return."

To change the background color of individual cells, select the cell or cells.  Click on "Table," select "Properties," then "Cell."  Change the color in "Background."

To get what appear to be solid blocks of color against the page background, change the table background to the same color as the page background.  Then change the individual cell backgrounds to the desired color.  The greater your cell spacing, the more space between the blocks.

To add rows, simply go to the last cell in the table and hit "Tab."  To add columns, click on "Table," select "Insert," then select "Rows and Columns."  You can add columns to the left or the right.

Class Web Page Notes

• As I have indicated in the links, tables are particularly useful for schedules.
• I like to use tables to create a navigation bar along the left hand side that appears on every page of the site.  To to this, I create a two-column table, making the left-hand column smaller.  Within the left-hand column, I create another table for the different links.  By including this on every page of the site, I ensure that my students cannot get "lost" in the site.  Note: you can simply create the smaller table once, then copy and paste it on each site.

And finally, we get to Publishing Your Web Page