Making Your Phone List

1.    Open Dreamweaver. Choose File> Open new file.

2.    In the Title window type the following:

            Your Name Contacts

Save as Tutorial10 (to your folder)

3.    Type the text below at the top of the page in Format Heading 1 and Aligned Centered:

            Friend Phone Numbers and E-Mail Addresses

4.    Click the Enter key.

5.    Now change the setting Format to None and select Left Aligned.

6.    Choose Insert Table from the Common Palette

7.    Make the following changes:

  • Rows    11
  • Columns    3
  • Border    3
  • In the Constraints Table width change from Pixels to Percent;   Choose 80 Percent

InsertTable.JPG (23881 bytes)

8.    Choose OK

9.    Click on the tables top corner cell.

10.    Type words below in the cells of the top row:

  • Name in the first cell
  • Phone Number in the 2nd cell
  • E-mail Address in the 3rd cell

11.    Then fill out the form with Full NamePhone Number with Area Code, and E-mail Address - if no address type the word None.

12.    After entering all 33 spaces click the bottom right corner of the table until you see that the entire table is selected. 

13.    Click on the left side of the top row of cells so that only that row is highlighted.

HighlightedCell.JPG (37590 bytes)

14.    You should see in your Properties palette change.

15.    Make the following changes to the cell that is highlighted:

  • Background color (Bg) – Yellow (ffff00)
  • Put a check mark in the box next to Header Cell
  • Change Horz align to “Center”

CellInspector.JPG (56949 bytes)

16.    Now click at the top of each Column where it highlights the column:


Then change the Width in the Properties palette to 33%

17.    Now click off of the table.

18.    Click either the bottom or right side of the table until you see that the entire table is selected. 

SelectedLeft.JPG (57841 bytes)

19.    Change the Align option in the Properties palette to Center


20. Change to Split to mode.

21. Next highlight each phone number individually.

22. Within the code area place the following alink tag in front with <a href=”tel://1-234-567-8910″>

23. Change the number within the tag to match phone number.

24. After changing the number place an alink closing tag at the end </A>


25.    Save and Print (from the internet) when you are finished.

Click Here to see an Example

To make the e-mail address a link,  highlight the address and choose the Insert E-mail Link from your Common Palette.

In the E-mail window type that persons e-mail address.