Claris Homepage Tutorial

Doug Peterson
Greater Essex County District School Board

This tutorial is designed to introduce the workshop participant to the various formatting features of Claris Homepage, a Web Authoring tool for both the Macintosh and Windows.

Using Claris Homepage
If you can use a wordprocessor, you can use Claris Homepage. The environment is very similar and basic functions such as fonts, colours, character attributes, etc. work in much the same manner as your typical wordprocessor.

Using the Tutorial
You can use this tutorial in a number of ways.

1. Print the tutorial. If your learning style is such that you like to follow along with a printed copy next to your computer, send this document to the printer.
2. More than one window. Claris Homepage will let you have more than one web page open at once. Since this tutorial was created with Claris Homepage, you can open this in one window and work through the examples in another. Just remember which is which!
3. Multitask. If you are comfortable with switching between applications on your computer, open this tutorial in your favourite browser and open Claris Homepage to work through the examples.

When You're Done
At the completion of this tutorial, you will have created a webpage for the Dowswell Teaching and Learning with Computers Centre. In the webpage, we will have an index page (front door to the site) and a linking page with the names of those people who regularly conduct professional development activities at Dowswell. Our "site" will include graphics, a picture, tables, and other various formatting techniques.

Here We Go...

Viewing Modes

Claris Homepage lets you have three ways of looking at any document. From the toolbar

you'll notice that the edit mode is the default.  This will be the mode that you use most frequently. From this mode, all of the WYSIWYG editing options are directly available. (bolding, bullets, styles, etc.) However, Claris Homepage also lets you preview your work as it will appear in an Internet browser by selecting the browser mode.  In browser mode, links that jump within your computer are made active. Finally, there may be times when you wish to edit the raw HTML code directly. HTML source mode  lets you look directly at the code "behind the scenes" should you wish to edit or add instructions in that manner.

Try it Now. Switch between the three modes to get a feel for how it's done. Return to edit mode.

Creating Our Index Page

From the File Menu, select "New Page". Just as you would expect in a wordprocessor, you are presented with a blank page and a toolbar for editing. Unlike a wordprocessor, however, you won't find rulers and page gutters. The purpose of HTML is to get information as quickly as possible from the webserver to your desktop. As a rule of thumb, HTML conserves space and tries to get most of the document against the left side of the screen.

Our website needs a title. In the body of the window, type "Dowswell Teaching and Learning with Computers Centre". You'll notice that the text is left justified, and black on a white background. Let's change that.

First, highlight the entire text by holding down your left mouse button and selecting the text. By clicking on the Bold, Italics, and text larger button, we can convert this text into a suitable title. By selecting the palette button, you can also choose a colour for your text. In the example, the colour yellow was chosen.

Yellow on a white background just doesn't cut it! Our title would stand out more if the title was on a blue background! From the Edit Menu, select Document Options. Here, we can choose options that will apply to the entire web page.

In the right pane, click on the button to choose a background colour from a palette. Select a nice dark blue colour, click on OK and the change is made immediately. The webpage is starting to take shape.

Inserting an Image
Next, let's insert a picture of the Centre so that visitors to our webpage can get a sense as to what it's all about. From the toolbar, select the image icon. You'll be prompted to locate the file. Find the picture that you wish to use for your webpage. For this tutorial, we'll use the picture dowswell.jpg which is a rear shot of a teacher hard at work during a workshop. At Dowswell, it will be in the SCANNING directory or folder. To make sure that the picture stands out from your webpage, let's put a border around it of 5 pixels.

Drawing a Horizontal Line (or Rule)
In order to make the next piece of information stand out from the rest of the document, we'll next insert a horizontal rule. It's located next to the image button on the toolbar.  This one is easy; there are no options!

Add Some Text
Next step: Some information about our location for those who visit it on the Internet. We'll add some information about the location of the Dowswell TLCC. Type the following:

Dowswell Teaching and Learning with Computers Centre

32 Russell Street

Essex, Ontario, Canada

N8M 1G3

(519)776-9353

Using the techniques described above, make your text centred, bold, and white to stand out from the blue background.

Graphics
Visitors to our site will undoubtedly be attracted to the next section if we insert a graphic. Claris Homepage comes with a number of graphic images. It's also almost mandatory that we have animated or moving images on webpages these days.

Click on the image button and navigate to the content, animations, and globes folders. Inside, you'll find a couple of animated globes. Let's use the one called spinglob.gif. Once it's inserted into the document, it doesn't exactly spin....yet. It will once we view it in an Internet browser.

Links
To finish off our index page, we're going to add two links. One will take us to the staff list and the other to the Greater Essex County District School Board website.

Staff List
Type the text "Staff List" and highlight the entire text. We are going to link it to another file entitled "staff.htm" which will be located in the same folder as our index page. Once the text is highlighted, click on the Link Editor button. You will be asked to provide the name of the page that we will link this page to. Because it is in the same folder as our index page, we need only provide the name of the page, staff.htm.

Close this window and the link has been created.

Link to the Board Website
In a similar fashion, type the text "Greater Essex County District School Board", highlight the text and click on the Link Editor button. This time, the page that we're linking to resides on the Internet. Our link now includes the entire Internet address as shown below.

Congratulations! If you've got this far, you've created your first webpage with Claris Homepage.

Your images, however, may be located at various locations on your hard drive. Claris Homepage offers a handy utility entitled "Consolidate" which checks to make sure that everything is in one spot so that there are no lost images. Click on the consolidate button  to bring everything together in the same folder.

This will ensure perfection in the final product.

From the File Menu, select Save and the first time through, you'll be reminded that you don't have a title for your page. Give it one!

This title will appear at the top of your page window. Of course, you'll have to give your page a real filename and that's the next step. A convention used on the Internet is that the first page of a web site is entitled index.htm or index.html.

Your file has now been saved to your hard drive.

The Staff Page
Our index page links to a second page that we've already hard coded as staff.htm. Let's create that page now. From the File Menu, select a New File.

Let's give the new page a title "Dowswell Staff". You know the tools required to make the text big, bold, in colour and you can also change the background colour. While you're at it, insert a graphic from Claris Homepage's library!

Our staff list will be placed into a table. You'll recall that earlier we talked about HTML placing text on the left side of the screen. One way to change that formatting is to place it in a table. In this case, we will have a table of eight rows and two columns. In the first column, we will place the name of the staff, and in the second column their email address.

To select a table, use the table tool. 

As with most objects, Claris Homepage allows you complete control over what the table is ultimately going to look like. We'll chose mostly default values and changed the colour of the table to yellow. Let's go with the default border of 1. If you don't want the border to appear, change it to 0. This can be a very handy way to format a webpage! In the table, enter the information as it appears below.
 

A handy feature for those visitors to your website is the ability to click on the email addresses and have a new email message pop up on their browser screen. (Please note that this does work with First Class if you make it your default mail program.). To make this work, highlight an entire email address and click the link editor.

In the box that appears next, we use a new command mailto. This is an HTML code that indicates to web browsers that we're looking to send an email message. Once you complete the address and close the dialog window, you'll notice that the text has now taken the form of an Internet link.

One Final Link
We're just about done. The final step is to link the staff.htm file back to our index.htm file so that visitors to our website aren't "stranded" at the staff page.

Enter the text "Return to Dowswell TLCC". Highlight the text and click on the link editor.  Since the index.htm file is in the same folder/directory as the staff.htm file, we just indicate the filename.

Consolidate your webpage and save your work as staff.htm.

It can get better. Suppose that you would like to add additional clipart to your creation. Claris Homepage certainly comes with a great selection. However, the Internet does provide all kinds of additional sources of clipart.

Copyright
Be kind to original artists and authors before you take the next step. There is a wealth of Internet websites that provide clipart for free. To take and use clipart from sites where permission to use it has not been given is wrong.

One great place to find clipart in the public domain is Barry's Clipart Server. The webmaster has done a fantastic job of collecting and organizing clipart, and animations. The site is also part of a webring devoted providing clipart to webmaster. You'll never be without clipart again!

Follow the links on Barry's Clipart Server to locate a piece of clipart that will do the trick for you. Once you find the clipart, place your cursor over the graphic and right-click (Windows) or click and hold (Macintosh) on the graphic. A "save" window opens on your computer. Select the location where you'd like to save the graphic, change the filename if desired, and click the save button. That image is now on your hard drive and can be imported by clicking on the button.

Congratulations!

You can load the index.htm file into your internet browser and check out your masterpiece locally from your computer's hard drive. If this was a website that you now wanted to share with the world, you would now upload to a webserver.

Your website has just started. As it develops, you will add many more pages, links, graphics, and content. Successful websites are constantly updated with new and interesting information.

Click here to see what it should look like