Lesson 2: Creating and formatting the home page

• Introduction
• Use a sample file to create the Espresso Cafe home page
• Apply styles to text
  • Make a heading title for the page
  • Make a small heading
  • Make a bulleted list
  • Enhance the bulleted list
  • Add an item to the list

Introduction

In this lesson, you learn how to:

• create a Web page and save it with a title and filename
  
• apply heading styles
  
• make manual changes to text format
  
• create a bulleted list
  
• add an item to a list

Note You can check your work against a completed Espresso Cafe home page whenever you want. To see the completed home page, open cafehome.htm in the completed_site folder in the tutorial folder.

Use a sample file to create the Espresso Cafe home page

To save time, the text for the home page has already been typed for you in a sample file.

Now open the first sample file and save it with a new name:

1. Choose Open from the File menu, locate the lesson2.htm file in the tutorial folder, and click Open.
   
   You see a page that contains a few paragraphs of unformatted text describing the Espresso Cafe and its products.
   
2. Arrange the lesson2.htm window and the Claris Home Page Tutorial windows so you can see them both as you work.

When you save a Web page, you give it a title (that shows in the window's title bar when the page is viewed with a browser) and a filename (which is how the page appears in your operating system and what you see in the window's title bar when you're working in Edit Page mode in Claris Home Page).

Now save a copy of the lesson2.htm page, titling it "Espresso Cafe" and naming it "cafehome.htm." (You might find it helpful to read through all of the steps before starting this procedure.)

1. Choose Save As from the File menu.
   
2. Type Espresso Cafe in the Enter Title dialog box, and click OK.
   
   Claris Home Page asks you to choose a location for the page, and give it a filename.
   
3. Type cafehome.htm in the File name text box (Windows), choose a location for the file, and click Save. If you're planning to continue the tutorial, save cafehome.htm in the ecc_site folder you created in lesson 1.

   
   Windows

   Tip In a real Web site, you might consider naming your home page index.htm because many Internet service providers require this name for home pages.

Apply styles to text

You can apply styles to text to add emphasis and interest to your page. Use the styles included with Claris Home Page to modify the appearance of the Espresso Cafe home page. Then learn how to customize the page further by reformatting text manually.

Make a heading title for the page

Now format the text at the top of your home page as a large heading:

1. Place the insertion point anywhere in the first line "Espresso Cafe" and choose Heading 1 (Largest) from the Format menu.
   
   You decide the heading's still not big enough. Claris Home Page makes it easy to make it even larger.
   
2. Select the entire text "Espresso Cafe," choose Size from the Style menu, and then choose 7 (Largest).
   
3. Choose Save from the File menu.

Make a small heading

Besides the page heading, there's other important text on the page that you'd like to emphasize. You can format it as a smaller heading to catch people's attention.

Now format a line near the bottom of the page as a small heading:

1. Place the insertion point anywhere in the line that begins with "Questions?" (Scroll down to the bottom of the page, if necessary.)
   
2. Choose Heading 4 from the pop-up menu on the toolbar. (This is another way you can quickly choose predefined text styles in Claris Home Page.)
   

    

3. Choose Save from the File menu.

Make a bulleted list

Now format your list of coffee products in a bulleted list:

1. Select the list of products from "Costa Rica" through "Sumatra."
   
2. Choose Bullet List from the Format menu.

Enhance the bulleted list

The list of coffee products on your home page is important. You think it would look better if it were bigger and bolder.

Now reformat the list title for emphasis and then change the size and style of the products in the list:

1. Select the text "Mail Order Product List" and choose Italic from the Style menu.
   
2. Select the list of products, choose Size from the Style menu, and then choose 4.
   
3. With the list still selected, choose Bold from the Style menu.
   
4. Choose Save from the File menu.

Add an item to the list

After you've formatted a list, you can add items to it without having to reapply the list style.

1. Place the insertion point to the right of the word "Sumatra" at the end of the list.
   
2. Press Enter (Windows).
   
   You see a bullet symbol for a new list item.
   
3. Type Zimbabwe.
   
4. Choose Save from the File menu.

Your home page is starting to take shape. Next you'll learn to use tables to align text and objects on your page. To continue the tutorial, click lesson 3, "Creating tables."

Back to the main contents