Basic Web Development

A. Claris HomePage Introduction

Claris HomePage is a very user-friendly Web page editor. Once you become familiar with its interface, you'll be creating Web pages in no time. This page is intended to give you a brief introduction to the Claris HomePage interface and the shortcut buttons and their functions.

Upon opening the Claris HomePage program, you begin with an untitled HTML document, as you see below. The icon buttons serve as shortcuts for editing your new Web page. An icon chart below shows the name and function of the shortcut buttons. This page can be printed to use as a quick reference.

Claris Shortcut Buttons and Their Functions

ICON
NAME / FUNCTION

*Edit Page. This button puts the document in the edit mode so that you can make changes to your document. New documents will open automatically in this mode.

*Preview Page. This button is for previewing your document in Claris and testing links. No editing can be done when you are in the preview mode.

*Edit HTML Source. Use this button to view the HTML source of your document. You can edit the HTML source while in this mode.

*Preview in Browser. This button will automatically save your document and open it up in your designated Web browser (Netscape, Microsoft Explorer,...) This mode allows you to see exactly how your Web page will appear after it is posted on the Web. No editing can be done in this mode.

*Object Editor. This opens up a window that allows you to set the parameters of a selected object such as images, horizontal rules, tables, and forms.

*Link Editor. This button opens up a window that allows you to create a link to another file, an external link, an e-mail link, and more. Examples of links are available from this window.

*Document Options. This opens up a window that allows you to set the options for your entire document: text color, link colors, background colors and images, document title, and more.

Anchor. An anchor is a link created within a document or to a particular place in another document. This button inserts an anchor in the selected section of your document.Use the Link Editor to create a link to the anchor.

Link to File. This button opens a window that allows you to browse your files for another file to which you can insert a link. The name of the file is displayed as a hyperlink in your document.

*Image. This allows you to browse your files for an image you want to insert into your document. Only GIF and JPEG image files can be added to a Web page.

Horizontal Rule. This button inserts a horizontal rule, or bar, into your document to separate sections of text.

Table. This buttons inserts a table into your document and opens the object editor window so that you can edit your table.

Align Text Left, Center, Right. These buttons allow you to align your text as left, centered, or right.

Paragraph Format. From this pull-down button, you can select the following paragraph formats: normal, preformatted, address, Headings 1-6, bullet list, numbered list, term, or definition.

Numbered List Entry, Bullet List Entry. These buttons make list entries within your text. When you are in the "edit" mode of your document the numbered list will be preceded by this symbol, #. . However, when you view your document in the Claris viewer or the browser viewer, the numbered list will display as such, 1.

Indent, Outdent. Use these buttons to indent or outdent your text. The "tab" key on the keyboard will not indent your text.

Smaller Text, Larger Text. These two buttons are used to decrease or increase the size of selected text.

Bold, Italic, Teletype. These buttons are used for character formatting of selected text. Text can be bold, italics, or teletype.

Text Color. Allows you to select the color of selected text: red, blue, green, yellow, black, or other... (this displays a color wheel from which you can choose from a variety of color options.)

*These buttons are usually used the most while you're developing your Web pages

|| Basic Web Development ||

This page was created by Katie Beedon.

Revised July 16, 1997

ICON	NAME / FUNCTION
	*Edit Page. This button puts the document in the edit mode so that you can make changes to your document. New documents will open automatically in this mode.
	*Preview Page. This button is for previewing your document in Claris and testing links. No editing can be done when you are in the preview mode.
	*Edit HTML Source. Use this button to view the HTML source of your document. You can edit the HTML source while in this mode.
	*Preview in Browser. This button will automatically save your document and open it up in your designated Web browser (Netscape, Microsoft Explorer,...) This mode allows you to see exactly how your Web page will appear after it is posted on the Web. No editing can be done in this mode.
	*Object Editor. This opens up a window that allows you to set the parameters of a selected object such as images, horizontal rules, tables, and forms.
	*Link Editor. This button opens up a window that allows you to create a link to another file, an external link, an e-mail link, and more. Examples of links are available from this window.
	*Document Options. This opens up a window that allows you to set the options for your entire document: text color, link colors, background colors and images, document title, and more.
	Anchor. An anchor is a link created within a document or to a particular place in another document. This button inserts an anchor in the selected section of your document.Use the Link Editor to create a link to the anchor.
	Link to File. This button opens a window that allows you to browse your files for another file to which you can insert a link. The name of the file is displayed as a hyperlink in your document.
	*Image. This allows you to browse your files for an image you want to insert into your document. Only GIF and JPEG image files can be added to a Web page.
	Horizontal Rule. This button inserts a horizontal rule, or bar, into your document to separate sections of text.
	Table. This buttons inserts a table into your document and opens the object editor window so that you can edit your table.
	Align Text Left, Center, Right. These buttons allow you to align your text as left, centered, or right.
	Paragraph Format. From this pull-down button, you can select the following paragraph formats: normal, preformatted, address, Headings 1-6, bullet list, numbered list, term, or definition.
	Numbered List Entry, Bullet List Entry. These buttons make list entries within your text. When you are in the "edit" mode of your document the numbered list will be preceded by this symbol, #. . However, when you view your document in the Claris viewer or the browser viewer, the numbered list will display as such, 1.
	Indent, Outdent. Use these buttons to indent or outdent your text. The "tab" key on the keyboard will not indent your text.
	Smaller Text, Larger Text. These two buttons are used to decrease or increase the size of selected text.
	Bold, Italic, Teletype. These buttons are used for character formatting of selected text. Text can be bold, italics, or `teletype`.
	Text Color. Allows you to select the color of selected text: red, blue, green, yellow, black, or other... (this displays a color wheel from which you can choose from a variety of color options.)