STEP TWO SKILLS
By the end of Skills Session Two, you should be able to:
  • use tables effectively
  • use text and text editing features effectively
  • make relative hyperlink using Point-to-File feature
  • make absolute hyperlink using Link Box feature

Estimated Time to Read and Apply: 60 Minutes

A.
Table Basics
B.
Text Basics
C.
Making Hyperlinks
A. TABLE BASICS

In designing a Web page, the first essential skill is the ability to use tables.

Tables are the central design components of Web pages.

Almost every well designed page is laid out in tables. Users don't see the tables, however, because in most cases, the borders are invisible.


Figure 2A-A

 


Figure 2A-B

To Create (or Insert) a Table
  • With the Common Tab selected on the Insert Inspector, click on the Table icon (Figure 2A-A)
  • Ignore the Tables Tab on the inspector: it is for advanced code use

An Insert Table dialog box will appear (Figure 2A-B)

The numbers that appear in the boxes will be the numbers last inserted when the Insert Table feature was last used.

Percent vs. Pixels

You will almost never have to worry about setting the height of your table.

Your problem will almost always be the table width.

  • Pixel settings provide absolute positions for items on your page
    • you should use pixel settings when you do not want your table or the items in it to move
  • Percent settings are relative
    • you should use percent settings when you want the page to adapt to different monitors / screen sizes, and are willing to allow some flexibility in the way your page will look

<-----------------A Table of 615 Pixels with a 4 pixel Border----------------------->

A Collection of Tables within a Table

100 pixels wide


200 pixels wide

300 pixels wide

400 pixels wide Two cells
Two cells

You are viewing a 400 pixel table with two cells:

  • CellPad of 5
  • CellSpace of 5

This cell has a gray background


You are viewing a table with two cells:

  • this cell has text in it
  • there is a photograph in the next cell -->
  • the table settings are 100 percent (so it fills out the table it is in
  • the border settings are 0, so you do cannot tell that the table exists when viewing it in a browser

You are viewing text in a table set at 100 percent.

 

You are viewing a 100 percent table with two cells:

  • Border 0
  • CellPad of 5
  • CellSpace of 5

This cell has a gray background


100 percent settings with borders and no cells

50 percent settings left aligned

50 percent settings center aligned


Figure 2A-C

 


Figure 2A-D

 


Figure 2A-E


Figure 2A-F


Figure 2A-G

Figure 2A-H

To Edit a Table

There are three ways to edit a table. Each method offers different features.

First Method: Simply look down at the Properties Inspector. If your cursor is in a table, by default the bottom half offers some table editing features. The features you will use most often:

  • changing the background color and border color: click your mouse in the appropriate cell, then click on the color swatch next to Bg or Brdr (Figure 2A-C)
  • making objects appear at the top of the cell: place your mouse cursor in the appropriate cell, click on the arrow next to VERT, and select "Top" (Figures 2A-D)

Second Method: Select the entire table with mouse cursor. Once selected, the table will have "handles" and the entire Properties inspector will change. The features you will use most often:

  • change width of table: enter numbers in appropriate boxes. (Figure 2A-E) Make certain you choose pixels or percent appropriately (see below)
  • change CellPad and Cell Space: enter numbers in appropriate boxes (Figure 2AF)
  • change table border: enter number in appropriate box (Figure 2A-G)

Third Method: Right Click with your cursor in a cell table and get the Table Editing Panel (Figure 2A-H). The features you will use most often with this method:

  • insert row(s) or column(s)
  • delete rows(s) or column(s)
  • split cells into additional columns or rows
  • merge cells (the merge cell feature will appear when two or more cells are selected with the mouse before right clicking)

The Bottom Line

It can be pretty boring simply reading instructions about editing tables. Best advice here is to click around and experiment.

You can edit tables through either the Properties Inspector, or by right clicking and getting the Table Dialog box.

Just about anything you can do with a table, you can do with the Dreamweaver tools.

Remember: ability using tables is a basic skill required for designing Web pages.

 

Step TWO Continued: B.Text Basics-->

 

|| Back to Five Basic Steps Home ||
|| Instructional Technology Services Home || McDaniel Homepage || Information Services ||
McDANIEL COLLEGE
(founded in 1867 as Western Maryland College)
Westminster, Maryland 21157-4390 USA / 410-848-7000

Questions? Comments? Contact
Steve Kerby (X 4686)


© 2002-2003 McDANIEL COLLEGE. All rights reserved