So far, you have learned how to format text, create links, insert images, and work on tables and cells. In this lesson, you will apply what you have learned from the previous lessons to create an ePortfolio home page. The step-by-step instructions will walk you through the whole process.

Downloading the Files

You need to save the following images and templates to your disk. If you are working on your own computer, you can save them to your hard drive. If you are working in the computer lab, create a new folder on the desktop and save the files in the new folder.
 

Creating an ePortfolio Home Page

Instead of building a text-only Web page, we can build an ePortfolio home page like the following. This page serves as a table of contents and guides the reader to additional information on subsequent pages. In this page, a background image and two (invisible) tables are used. Take a look at this page.

Now follow the instructions to work on your own ePortfolio home page. If you forget how to do certain tasks, just click on the Hint to refer to the lessons containing those concepts and skills.

1. Launch Compose with a new blank page. (Hint: Lesson 2)

2. Choose Format > Page Colors and Properties from the menu bar. Click on the General tag to set up the title (for example, Rong-Ji Chen's ePortfolio) and author. Do not click OK yet. (Hint: Lesson 5)

3. Click the Colors and Background tag and use "eport_bg.gif" (you should have downloaded it at the top of this page) as the background image for the page. Hit OK. (Hint: Lesson 5)

4. Save the file to your disk. Give it an appropriate name such as eport.html or your_Name_initial_eport.html.

5. Click the  button to insert a 1x 2 table with width = 90 % of window as shown below. Align the table to the center. The table border, cell spacing, and cell padding are set to 0, 5, 8, respectively. The other options are kept unchanged. Hit OK. (Hint: Lesson 6)

Note:
If you didn't make it right at the first time, you have to bring up the Table Properties window again and make your changes. To do so, right-click anywhere in the table and select Table Properties from the pop-up menu.

6. You will see a dotted table. Right-click in the left cell and choose Table Properties from the pop-up menu. Set the cell width = 30 % of table. Hit OK. (Hint: Lesson 6)

7. Likewise, set the width of the right cell as 70 % of table.

8. You'll type some text into the cells of the table. However, to reduce your frustration, click here to learn how to get around in a table.
 

9. In the left cell, type your name or other appropriate title for this Web page. Format the title as you wish, including font, size, color, alignment, etc. (Hint: Lesson 3)

Note:
In a table, sometimes it is hard to see where the cursor is. You have to look very carefully to locate the blinking cursor.

10. In the right cell, type the menu items (Curriculum Vita, Teacher Education Program Courses, etc.) as showed at the top of this page. Notice that there is a blank line between two items. Format the text, including font, size, color, etc.

. 11. We want to insert a tiny image beside each item. Place the cursor on the left side of "Curriculum Vita."

12. Then click the  button. Locate and choose the image file called "pen_papr.gif" (You should have downloaded this image). (Hint: Lesson 7)

13. As shown below, set the Solid border as 0 and set a 10-pixel space to the left and right of the image. Also, it is a good practice to offer alternate text for the image, for example, "pen_paper bullet".

14. Hit OK.

15. You don't have to insert the same image again and again. Just use the copy-and-paste method to do the rest. Specifically, click on the "pen_paper" image. A border will appear around it, indicating that you have selected it. Click the Copy button to copy the image Place the cursor on the left side of "Teacher Education Program Courses." Finally, hit the Paste button. Likewise, paste the image to the left of every menu item.

16. We want to put a horizontal line below the table. To do this, place the cursor right below the table and hit the button.

17. You will see a horizontal line. Move your cursor on the line until it changes its shape to a double-headed arrow. Right-click on the line and choose Horizontal Line Properties.

18. You will see the following dialogue window. Set the height of the line as 2 pixels and width as 90% of window as shown below. Also, align the line to the center.

19. Add a 1x1 table below the horizontal line. Align the table to the left. Again, set the border as 0 pixel. Also set the width of the table as 80 % of the window. (Hint: Lesson 6)

20. In the table, type your e-mail address and align it to the right. Make the e-mail link as mailto:your_e-mail_address. (Hint: Lesson 4)

21. Finally, make the following links. (Hint: Lesson4 )

1. Curriculum Vita --> vita.html
2. Teacher Education Program Courses --> coursesliist.html
3. Philosophy, Standards, Projects, & Lesson Plans --> psplp.html
4. Favorite Educational Links --> links.html
5. Personal Interests --> Your personal home page if you have one.

Note:
If you have not downloaded the above files, go back to the top of this page and follow the instructions to download these files to your disk.

22. Save your work and you are done.

Back to top

Prev

Tutorial Home

Next