This set of instructions follows from:

• How to Create An Online Portfolio Part 1: Create Site Folders
• How to Create An Online Portfolio Part 2: Build a Home Page (Text, Tables, Images, Color)
• How to Create an Online Portfolio Part 3: Add Pages and Hyperlinks

1. Open Mozilla and then open "Benchmark Critique" in Composer.

Click on the Composer Icon at the bottom left of the browser window.

Click on (toolbar) File --> Open File, Navigate to your Portfolio folder and select username_benchmark_critique.html

2. Add a Table at Bottom of Page to Hold Navigation Links

Scroll down to the bottom of the page

Click on Insert --> Table

For Rows, enter: 3. For Columns, enter: 3. Width: 700. Border: 0

Click OK.

 

3. Add Navigation Text in the Top Two Rows

In the top row, enter "Portfolio Home" in the first cell, "Development Notes" in the second, and "Benchmark Critique" in the third.

In the second row, enter "Learning Activity #1 in the first cell, "Learning Activity #2" in the second, and "Learning Activity #3" in the third.

4. Merge Cells in the Bottom Row and Add Information

With your cursor, highlight all three cells in the bottom row

Right click, then select Join Selected Cells

In the bottom row, enter " © 2006 Your Name"

Note: To get the copyright symbol,

• Click on (Toolbar) Insert --> Characters and Symbols
• Select the "Common Symbols" radio button
• Click the arrow and scroll down to the © symbol
• Click Insert

5. Format the text and add color to the cells

A. With your cursor, highlight all the text in the table, use the Format tools and make it Verdana small.

B. Use the Align Center icon to center all text in all cells.

C. With your cursor inside the bottom cell:

• right click, select Table Cell Properties
• click on the Background Color check box
• click on the button next to "Background Color"
• Select the dark blue in second row from bottom third from left (#000099)

D. With your cursor, highlight all cells in the top two rows

• right click, select Table Cell Properties
• click on the Background Color check box
• click on the button next to "Background Color"
• Select the light gray that is in the second row, first column on left (#cccccc)

E. Highlight the text in the bottom cell:

• click on (Toolbar) Format --> Text Color
• select the color in the top row, second column from left (#ffcccc)

The bottom navigation table should now look something like this.

 

6. Add appropriate links to the text

Highlight the text "Portfolio Home" with your cursor and click on the link icon

Click on Choose File. (The Open HTML File should open automatically to your portfolio folder; if it doesn't, navigate there)

Select username_portfolio_home

Click Open Then OK

Do the same procedure for the other 5 pages, selecting appropriate files for each linking text.

7. Test the hyperlinks.

We are about to copy/paste the table we have built and insert it at the bottom of all interior pages in the portfolio. Before we do that, we should test to make certain everything works.

Click on the Browse icon on the toolbar. This opens the file in the browser (instead of Composer). Test out the links.

8. Copy the Navigation Table and Paste on the other 5 "Interior" Portfolio Pages

Copy/Pasting tables in Mozilla Composer isn't easy. You can't just select the table and click on Edit --> Copy.

You need to place your cursor on the line just above the table, then sweep to just below the table. Then Edit-->Copy (or Control +C).

Open each additional interior page, place your cursor at the bottom of the page, then Edit-->Paste. No need to do this on the Portfolio Home page.

Note #1. This only works because all pages we are copy/pasting to are in the same folder. So the paths are the same. If the pages were in any other directory, the hyperlinks would not work.

Note #2: Yes, it is bad practice to hyperlink to the page you are on. Once you copy/paste to all pages, then delete the hyperlink that goes to the actual page the navigation table is on.

Note #3. Yes, this is a workaround when using freeware. In most Web Development software packages, such reused items as navigation links are often contained in a library.