Tutorial

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