Tutorial This tutorial introduces the basics of Claris Home Page. It is a hands-on, step-by-step tutorial that you can complete in one session or one lesson at a time. Claris Home Page provides three modes for working with Web pages: Edit Page mode, Preview Page mode, and Edit HTML Source mode. In this mode You can To switch to this mode Edit Page Make changes to the page such as Choose Edit Page from the adding text, graphics, and links Window menu or click the Edit Page button Preview Page View the page as it might appear Choose Preview Page from the in a Web browser Preview Page button Edit HTML Source Edit, delete, add, or customize Choose Edit HTML Source from the HTML code Window menu or click the Edit HTML Source button Edit Page mode button Preview Page mode button Edit HTML Source mode button Macintosh Edit Page mode button Preview Page mode button Edit HTML Source mode button Windows Note As you position the pointer over a button, the button’s name appears to the right of the toolbar or under the tool. 2 Claris Home Page Creating a Web page In this lesson, you learn how to: 1 create a new Web page 1 save a Web page Starting Claris Home Page Double-click the Claris Home Page folder on your system to display its contents, and then double-click the Claris Home Page 2.0 application icon. Macintosh: You can also double-click a fi le that was created in Claris Home Page to open the application. Windows: Click the Start button and then point to ...
Tutorial
This tutorial introduces the basics of Claris Home Page. It is a hands-on,
step-by-step tutorial that you can complete in one session or one lesson
at a time.
Claris Home Page provides three modes for working with Web pages:
Edit Page mode, Preview Page mode, and Edit HTML Source mode.
In this mode You can To switch to this mode
Edit Page Make changes to the page such as Choose Edit Page from the
adding text, graphics, and links Window menu or click the
Edit Page button
Preview Page View the page as it might appear Choose Preview Page from the
in a Web browser
Preview Page button
Edit HTML Source Edit, delete, add, or customize Choose Edit HTML Source from the
HTML code Window menu or click the
Edit HTML Source button
Edit Page mode button
Preview Page mode button
Edit HTML Source mode button
Macintosh
Edit Page mode button
Preview Page mode button
Edit HTML Source mode button
Windows
Note As you position the pointer over a button, the button’s name
appears to the right of the toolbar or under the tool.
2 Claris Home Page
Creating a Web page
In this lesson, you learn how to:
1 create a new Web page
1 save a Web page
Starting Claris Home Page
Double-click the Claris Home Page folder on your system to display its
contents, and then double-click the Claris Home Page 2.0 application icon.
Macintosh: You can also double-click a fi le that was created in Claris
Home Page to open the application.
Windows: Click the Start button and then point to Claris Home Page or
double-click the Claris Home Page program icon from the Program
Manager.
When you open Claris Home Page, a new untitled Web page appears.
Creating a new Web page
To create a new, blank Web page when Claris Home Page is running,
choose New Page from the File menu.
Because you are creating Web pages that will be uploaded to a Web
server, you must pay attention to the organization of the pages and the
objects used in the pages (image files, and so on). Place all the pages and
objects used by the pages in the same folder. A folder has already been
created for the pages you will be creating in this tutorial—the Tutorial
folder. The Tutorial folder also contains an Images folder which
contains all the images that will be used by the tutorial and additional
files that you will use in the tutorial.
Saving a Web page
To save a Web page, you must give it a title and a filename. The title
appears in the title bar in most browsers and in Claris Home Page when
you’re working in Preview Page mode. The filename is the name of the
page as it appears in your operating system. The filename appears in the
title bar in Claris Home Page when you’re working in Edit Page mode.
Tutorial 3
First save your blank Web page with the title Espresso Cafe Company.
Then save it with the filename ecc.htm in the Tutorial folder.
1. Choose Save from the File menu.
The Enter Title dialog box appears.
2. Type the title of your Web page, Espresso Cafe Company.
3. Click OK.
Next, you are prompted for a filename for your new Web page.
4. Type ecc.htm in the Save file as text box.
Save the file in the
Tutorial folder
Important Be sure to save your Web page in the Tutorial folder.
5. Click Save.
Your new Web page has the title Espresso Cafe Company when in
Preview Page mode. The filename appears as ecc.htm in the title bar
and in the Window menu in Edit Page mode.
Closing the lesson
1 If you want to take a break, choose Quit (Macintosh) or Exit
(Windows) from the File menu.
1 If you want to continue with the tutorial, choose Close from the File menu.
4 Claris Home Page
Inserting images
In this lesson, you learn how to:
1 insert images
1 change the placement of images
One of the exciting aspects of the World Wide Web is the ability to integrate
graphics with text. A few graphics will spice up the look of the Espresso
Cafe Company Web page. First, add the logo to the top of the page.
Double-click the Image.htm file, located in the Tutorial folder inside the
Claris Home Page 2.0 folder. The Image.htm file opens and you’re ready
to insert an image.
1. Choose Image from the Insert menu.
2. Select the image to insert—in this case logo.gif. The logo.gif image
is in the Images folder in the Tutorial folder.
3. Click Open.
The image appears before the title. You can add a space after the
image to make the title more readable.
4. To shrink the image proportionally, click it to select it, hold down the
Shift key, and then drag the lower-right handle toward the center.
5. Select the right column or cell of the table and follow the instructions
in steps 2 through 4 to add the coffee1.gif image.
6. Shrink the coffee1.gif image so the entire image fits in the column.
7. To center the image in the table cell, choose Alignment from the
Format menu and then choose Align Center.
Closing the lesson
If you want to take a break, choose Quit (Macintosh) or Exit
1
(Windows) from the File menu. Do not save the Images.htm file if
you want to reuse the tutorial file.
1 If you want to continue with the tutorial, choose Close from the File
menu. Do not save the Images.htm file if you want to reuse the
tutorial file.
Tutorial 5
Applying styles to text
In this lesson, you learn how to:
1 apply a heading style
1 create a bulleted list
1 insert a list entry
You can apply styles to text in Web pages to add emphasis. Adding
styles to the Espresso Cafe Company Web page will make it more
appealing to your audience. You can use the predefined styles included
with Claris Home Page.
Double-click the Style.htm file, located in the Tutorial folder inside the
Claris Home Page 2.0 folder. The Style.htm file opens and you’re ready
to apply styles.
1. Select the title, Espresso Cafe, and choose Heading 1 (Largest) from the
Format menu.
2. Select the items listed in the table cell, Kenya through Flavors, and
choose Bullet List from the Format menu.
You can add items to an existing list without having to reapply the
list’s style.
1. Place the insertion point just after the item Flavors.
2. Choose List Entry from the Insert menu or press the Return of Enter key.
3. Type Specialty Teas after the bullet symbol.
Closing the lesson
1 If you want to take a break, choose Quit (Macintosh) or Exit
(Windows) from the File menu. Do not save the Style.htm file if
you want to reuse the tutorial file.
1 If you want to continue with the tutorial, choose Close from the File
menu. Do not save the Images.htm file if you want to reuse the
tutorial file.
6 Claris Home Page
Creating horizontal rules
In this lesson, you learn how to:
1 insert horizontal rules
1 customize horizontal rules
You can add horizontal rules to your pages to emphasize or separate
information. Follow these steps to add horizontal rules to the Espresso
Cafe Web page.
Double-click the Rules.htm file, located in the Tutorial folder in the
Claris Home Page 2.0 folder. The Rules.htm file opens and you’re ready
to insert a horizontal rule.
1. Place the insertion point after the title, Espresso Cafe, at the top of
the page.
2. Choose Horizontal Rule from the Insert menu.
3. Open the Horizontal Rule Object Editor by double-clicking the
horizontal rule.
4. In the Horizontal Rule Object Editor, type 60 for Width. This adjusts
the size of the rule so that it only fills 60% of the window width.
5. Close the Horizontal Rule Object Editor by clicking its close box in
the upper-left corner (Macintosh) or upper-right corner (Windows).
Closing the lesson
1 If you want to take a break, choose Quit (Macintosh) or Exit
(Windows) from the File menu. Do not save the Rules.htm file if you
want to reuse the tutorial file.
1 If you want to continue with the tutorial, choose Close from the File menu.
Do not save the Rules.htm file if you want to reuse the tutorial file.
Tutorial 7
Creating links and anchors
In this lesson, you learn how to create a link to:
1 other Web pages
1 specific locations
1 email addresses
One of the most useful features of the World Wide Web is its support of
hypertext links. Claris Home Page allows you to create links to other
pages and to specific places within a page.
Create a link from the Espresso Cafe Company Web page to the
Mail.htm Web page, which contains more information on the items
available for mail order from the Espresso Cafe Company.
Double-click the Links.htm file, located in the Tutorial folder in the
Claris Home Page 2.0 folder. The Links.htm file opens and you’re ready
to insert links.
1. Select the text Mail Order Items.
2. Choose Link to File from the Insert menu.
3. Select the Mail.htm file in the dialog box.
The Mail.htm file is
in the Tutorial folder
4. Click Open.
The text Mail Order Items is underlined and turns blue to indicate that
it is now a link.8 Claris Home Page
You can also use links to go to specific locations within a Web page. To
do this, you insert an anchor. In this example, you insert anchors in the
Mail.htm file next to the mail order items.
1. Open the Mail.htm file, located in the Tutorial folder in the Claris
Home Page 2.0 folder.
2. Place the insertion point in the Mail.htm file between the first bullet
and Kenya.
3. Choose Anchor from the Insert menu.
4. Type the text Kenya in the Anchor Name dialog box.
It is a good idea to have meaningful anchor names. This makes it
easier to link to the appropriate anchor.
5. Click OK.
You see an anchor symbol in the text. The symbol does not appear
in Preview Page mode.
6. Place the insertion point in the Mail.htm file between the second
bullet and Costa Rican.
7. Click the Insert Anchor button in the toolbar.
8. Type the text Costa Rican in the Anchor Name dialog box.
9. Click OK.
10. Follow the instructions in steps 6 through 9 to create anchors for the
remaining mail order varieties: French Roast, Mocha Java, Sumatra,
Kona, Blends, and Flavors.
11. Choose Save As from the File menu and save the file as Test.htm in
the Tutorial folder.
Now that you have inserted anchors in the M