Exploring Claris Home Page

Creating a New Web Page

1. When you start the Home Page software it automatically presents you with a new, blank page.

2. At the top of the page the main menu, a toolbar and a stylebar are displayed.

Main Menu

Toolbar

Style Toolbar

As you move the cursor across the tool bar, the purpose of each of the tool buttons is displayed to the right of the line.

3. To save your work, select File -> Save As from the Main Menu. Enter a name, such as mypage, when prompted. Then choose a location to save the page. It is recommended that you save all of the pages and graphics for one site in one folder. One you have save a file with a name, the next time you want to save your work you select File -> Save from the Main Menu. Save your web page frequently.

Exiting Home Page

1. To exit Home Page, select File -> Exit from the Main Menu.

Reopening a Web Page

1. Start the Home Page software.

2. Select File -> Open from the Main Menu. Browse through the files until you find your page. Click the name, for example mypage.htm, then click the Open button.

Starting a New Page without Closing Home Page

1. Select File -> Close from the Main Menu.

2. Select File -> New Page. Saving Web Pages in a Web Site Folder

Most of the time you want to create a web site that is made up of individual web pages that are linked together. The pages will have pictures and perhaps videos and sound. To make the eventual uploading of the site easier, create a folder that will hold all of the information (pages, images, sounds, videos) .

1. Select File -> New. 2. Select Empty Site. Click OK. 3. Find the location in which you will store your new folder. 4. Give the new folder a name such as your school’s name if you are creating a school web site. Click Save. A Site Editor dialog box displays showing that a new file called site_definition.wst has been added to the folder. This file tracks the information about the pages you store in this site folder. 5. When creating new pages be sure to save them in the site folder.

Working with the Web Site Folder

1. Start Claris Home Page. 2. Select File -> Select Folder as Site. Find the web site folder, then click the Select site button shown at the bottom of the dialogue box.

3. The site editor opens. Click on the page you want to work with, for example, mypage, or choose File -> New to create a new web page. Remember to save new pages in the site folder. The new page will be added to the Site Editor list.

4. As you work with pages, adding images, click the Consolidate button in the Site Editor toolbar. This will make sure that copies of your images are placed automatically in the folder as well so that when you upload your site later, all required information has been consolidated in one folder. Working with Text

There are two sets of formatting tools, those used with paragraphs and those used with characters (such as letters, numbers and punctuation).

1. Key in the text shown below.

2. Drag your cursor to highlight all of the lines.

a. Click the Align Right button on the stylebar.

b. Click the Align Center button.

c. Click the Align Left button.

3. Place the cursor somewhere in the first line. Select the Paragraph Styles drop-down menu from the stylebar.

Select Heading 1. You do not need to highlight the entire text because a paragraph style is applied to the entire paragraph. Continue formatting the other three lines choosing the appropriate Heading styles.

4. Change the paragraph style for all lines back to Normal by highlighting the text then selecting the Normal paragraph style. Lists

There are three types of lists: bullet lists, numbered lists and definition lists.

Bullet Lists 1. Highlight all of the lines of text. (These will be the items in your list.)

2. Click the Bullet List button on the stylebar.

Bullets appear at the start of every line.

Move your cursor to the end of line 2. Press Enter. A new line will be added with a bullet.

Click the Increase Indent button. Add the sentence: This is an example of a nested bullet list. Press Enter, then click the Increase Indent button again and type and so on.

Place the cursor on the fourth line and click the Decrease Indent button.

Numbered Lists 1. Highlight all of the lines in the bullet list.

Click the Numbered List button. Notice that the lines start with # symbols. Highlight all of the lines in the numbered list. Select Format -> Numbered List Style -> A, B... . Notice that the lines now start with X symbols. To see the page the way it will look in your browser, click the Preview Page button on

the toolbar.

To continue working on the web page, click the Edit page button.

Definition Lists Definition Lists

1. Press Enter a few times after the numbered list. Notice that the X symbols appear at the beginning of each line, continuing the numbered list format. Highlight those new lines. Click the Paragraph Styles drop-down menu and select Type.

2. Add the lines of text show below to the page, pressing Enter after each line.

Notice that Home Page keeps the paragraph format that you choose. To change back to the normal format, press Enter then select the Normal paragraph style.

Viewing the Source Code

To see the HTML codes that are being created as you design your web page, click the Edit

HTML Source button. . Markup tags, enclosed in < > brackets are the commands that tell the Internet browser how to format the text. For example,

stands for “start the ordered/numbered list”.
1. stands for “list item”. There are many books and online tutorials that will teach you how to create web pages by using HTML codes. The Home Page software allows you to create web pages without knowing the meanings of the HTML codes that Home Page generates for you behind the scenes.

   Click the Edit Page button to continue working on the web page.

   Horizontal Rules

   Enhance the appearance of a page that has a lot of text by inserting a horizontal rule.

   1. Place the cursor after the last line of text. Make sure the paragraph style is normal.

   2. Click the Horizontal Rule button . 3. Double click the horizontal rule. Notice the height of the line and the alignment. Make sure the Shade option is not selected. Close the properties box. 4. Click the horizontal rule once. Drag the stretch handle at the bottom down. 5. Double click the horizontal rule and see how the height has changed. 6. You can also change the length of the line by changing the percentage. Character Formatting

   Changing Text Size

   1. Highlight a character or word.

   2. Click the Larger Text button. Click the Smaller Text button.

   Changing Text Colour

   1. Highlight a character or word.

   2. Click the Text Colour button. Select a colour from the pop-up colour palette.

   Adding Blank Lines

   1. Move to the position of the first line. 2. Hold down the shift key and press the Enter key. The carriage return symbol will appear.

   Page Backgrounds

   You can use a colour or an image as a background for a page. The image you use can be a graphic that is already on your disk, one that you have download from the web (being sure not to infringe on copyrights), a digital photo you took with a camera or a picture that you scanned and saved as a file. The image must be in a .GIF or .JPG format.

   You can display text and images on top of page backgrounds.

   Background Colours

   1. Click the Document Options button.

   2. Select the Color button in the Background panel. Pick a colour from the palette. Click OK.

   Background Images

   1. Click the Document Options button.

   2 Click the Set button in the Background panel. Find a picture. Click OK. A small image will be repeated so that it covers the entire page. This effect is called tiling. Choose images carefully so that the page does not look too cluttered and so that text and other images are easy to read and see. Images on Web Pages

   Most browsers will support two types of images, GIFs and JPGs. You can make your own images or use ones that exist.

   To make your own images create one in a paint or graphics program, use a digital camera, scan a picture you have drawn or capture a frame from a video tape or video camera.

   Ready made images exist in clipart folders of many software packages such as Appleworks, Word. Graphics packages such as Corel Draw and paint have images. Images can be downloaded from Internet sites. To save an image that you see on a site, right click the image (on a PC) or press the mouse (on a Mac). A pop-up menu will display options. Select the Save Image as (PC) or Save Picture as Image (Mac) option.

   Inserting an Image

   1. Click the Insert Image button. 2. Find the folder in which the graphic is located. Select the image. Click Open. The image will appear on the page.

   3. An image has many properties that you can change. For example, you can add a border, align it on a page, change its height and width and display text if.

   To change the properties of an image double click on it to open the Image Editor dialog.

   Add a border to the image by increasing the number of pixels in the border field. If an image is large it will take a long time to show up on a web page. Set the interfacing option so that a rough image is displayed immediately and the rest is added gradually. If an old browser is used the image may not display at all. Add some text describing the image in the Alt Label field. Consolidating Images

   . When you are satisfied with the appearance of the image, click the Consolidate button. If you have not named the page you are working with, you will be asked to give it a name. Then you will be asked to find the folder in which you are storing the web pages that make up your web site. During the consolidation, a copy of all images is made and stored in the folder that you are working with. You can view the content of this folder by selecting File -> Open Folder as Site. All of the images and pages can be viewed by opening the Site Editor. The Site Editor is a tool, used in conjunction with the Consolidate option, to help you organize all site elements in one folder. Jumps and Links

   There are three types of links:

   Internal links that jump from one page in a site to another page in the same site External links that jump from one page in one site to another page in another site Anchors links used within one long page to move quickly from one part of it to another part of the same page

   Turning an Image into an Internal Link

   1. Click once on the image to select it.

   2. Click the Link Editor button. 3. Click the Browse File button displayed in the Link Editor dialog.

   4. Locate the name of the page you want to jump to. 5. Close the Link Editor dialog. The graphic will now have a blue border.

   6. Click the Preview Page button. 7. Click the image to test the link.

   Turning Text into an Internal Link

   1. Highlight the text on the page that you wish to turn into a link.

   2. Click the Link Editor button. 3. Click the Browse File button displayed in the Link Editor dialog. 4. Locate the name of the page you want to jump to. 5. Close the Link Editor dialog. The text will now be underlined in blue.

   6. Click the Preview Page button. 7. Click the text to test the link.

   External Links

   To turn an image or text into a link that, when you click on it, jumps to a web page on another site, follow the above instructions. The only difference is that instead of finding the name of the page as in step 4, you type in the full URL of the web site you want to visit. An example is shown below.

   http://www.geocities.com/SiliconValey/Heights/1272/

   Since it is easy to make typing mistakes with a site address you may want to use your browser and go to the actual site you are interested in. Then highlight the address, copy it and return to Home Page to paste it directly into the Link Editor URL box. Anchors

   In general it is a good idea to make pages small enough that the user does not have to do much scrolling to see the content of the page. Long pages also take a longer time to load. If you find that your site is full of very long pages, you should reconsider the design of the site. Shift the information on one long page into several shorter pages.

   On a long page, clicking an anchor link will move the anchored location to the top of the screen so that the text and images below the anchor are easily viewed.

   To create jumps within one page, you need to: - identify spots in the page that will become target anchors - create the links that will let you jump to those spots

   Create an Anchor

   1. Move the cursor to just before where you want an anchor.

   2. Click the Anchor button. 3. Give the Anchor a name. Click OK. 4. A small anchor icon will appear in Edit mode. It will not show in the browser.

   Create a Link to the Anchor

   1. Highlight the text or picture that will serve as a link.

   2. Click the Link Editor button.

   3. Select the drop-down menu button to the right of the URL box. 4. Select Link to Open File -> the current file name -> the anchor name. 5. Close the Link Editor dialog. The text should be underlined.

   6. Click the Preview Page button. 7. Test the link by clicking it. Tables

   Tables are used to present information in rows and columns. Each cell of a table can contain text, images and or links. The text and background of each cell can be formatted individually. Tables can be framed with borders. Captions can be placed above or below the table.

   Creating a Table 1. Move the cursor to the desired location. 2. Click the Insert Table button. 3. The Table dialog will display. Specify the number or rows and columns. To add a border, specify its width in pixels, for example, 3. 4. Close the dialog box. 5. Key in values in the cells. Use the Tab key to move between cells. Or use the Insert Image button to add a picture to a cell.

   Changing the Table Format

   1. Click the table once. The Table dialog will display. Choose from the format options.

   Changing a Table Cell Format

   1. Double click inside the cell of the table. The Cell page of the Table dialog will display. Choose from the format options.

   Changing the Format of Group of Cells

   1. Click on the first cell . 2. Hold down the Shift key. 3. Click on the last cell in the group. 4. Click the Object Editor. 5. Select the Cells page of the Table dialog. Choose from the format options.

   Adding a Table Caption

   1. Double click the table to display the Table dialog. 2. Select Add Row. Close the dialog. 3. Double click inside the first cell of the new row. The cells page of the Table dialog should appear. 4. In the Spans specify the number of columns in your table. Close the dialog 5. Key the caption text in the new row.