Using a WYSIWYG Editor (Claris Home Page)

There are many software programs developed to make creating HTML
documents and web sites easier and less time consuming. Some are as
simple as a text editing program with an extra menu from which you
can select tags to add. Others such as Myrmidon can take nearly any
document you have and automatically convert it to HTML and gif
images. The WYSIWYG (What You See Is What You Get) Editors let you
type your documents just as you would in a word processor. The editor
then creates all the necessary HTML. When you don't have to worry
about the HTML, you can focus on the content, which is why you're
making the pages anyway.
There are two very popular WYSIWYG editors,
Adobe Page/Site Mill, and Claris Home Page. You can download demo
copies of each from their respective web sites, Adobe and Claris. The
Adobe demo has the save command disabled, so you can't save any of
your work. The Claris demo is fully functional for thirty days, you
can save as many documents as you wish in that time. After thirty
days you have an option to buy or the save command will be disabled.
I feel that the better buy is the Claris product for several
reasons:
- It has an intuitive feel for people familiar with word
processing with Word or ClarisWorks.
- You can easily and directly tweak the HTML source.
- If you paste Spreadsheet cells into a document, it converts
them into an HTML table.
- When you paste or open images into a document, it
automatically converts them to Gif format.
- You can use the program to open or save remote documents,
eliminating the need for separate FTP uploading.
- Version 3.0 makes it incredibly easy to access a FileMaker 4.0
database over the web.
Using Claris Home
Page
Claris Home Page is fairly simple to use. Basically you just type
your text in the window which comes up as you would in a word
processor. You then select the text you want to change and click a
button on the toolbar or select an item from a menu.
The image below is a snapshot of the Claris Home Page tool bar. In
the program, when you pass over each button, a message will tell you
what the button does. To use most of the tools, you need to have
selected the text you want formatted before clicking the button.
- The three buttons to the left are for Edit mode, Preview Mode,
and HTML Editing Mode. Usually you'll probably want to be in Edit
mode. The next button is for Preview in Browser. Claris Home Page
will open your page in Netscape or Explorer so you can see what
your page will really look like on the internet.
- The button with the wrench in it is the object editor. Click
on an object and then on this button to get a variety of options
such as size, Alternate Name, Transparency and Interlace options,
etc.
- The button with the arrow in it is the link editor. First
highlight some text (or an image) and click this button to get a
box where you can type in an internet address. (URL, i.e.,
http://www.netscape.com/)
- The button with the file in it is the document options button.
Click here to change background color, font color, and add a title
to your page, among other things.
- The anchor button lets you add an anchor to part of a page so
that you can link to that part of a page and not just the top of
the page. Just click the anchor button and enter a name for the
anchor. You can now select the anchor from the link editor.
- The next button is the Add Link to File button. This is a
shortcut button for adding links among files on a disk.
- The button with the square, circle and triangle on it is the
Add Image button. Click this button and then select an image.
Note: Make sure to put an image in the folder of your file
first.
- The button with the line on it is the Add Rule line button.
Use it to add horizontal rule lines to your document.
- The button with the grid on it is the Add Table button. Use it
to add a table to your document. You can change the number of rows
or columns using the object editor.
- The buttons with several lines are for left, center, and right
alignment.
- The pull down menu (reads Normal) allows you to set one of
several preset styles to selected text.
- If you have a group of paragraphs selected, you can number
them or put bullets in front of them by clicking on the Numbered
List or Bulleted List buttons. If your list is selected, you can
choose to change the format of the numbering (a,b, c or I, II,
III, etc.) by selecting the Number Style option from the Format
menu.
- The a+ and a- buttons allow you to
change the relative font size of selected text.
- The B and I buttons format text in Bold or
Italics, respectively.
- The T button formats text in a monospaced font
(Teletype), usually Courier in Netscape. This monospaced
font can be used for formulas, bits of code, and highlighting
certain words.
- The A with a color square button makes all selected text
whatever color is selected from the pull down menu. If the color
you want isn't listed, select other and make your own color.
Note: In Claris Home Page, when you double click on
anything an editor comes up from which you can change many aspects of
the object you clicked on. For example, when you double click on an
image you can set transparency and interlace options.
Let's try to make a page using Claris Home
Page:
- Open the Application Claris Home Page
- Select New Page from the File menu
- Click the document options button to set the title, text
color, link color, background color, etc.
- Add some text to the page (your favorite poem or
something)
- Use the previously mentioned buttons to format the text. Try
to add a rule line, center the text, make it colored, make it
bigger or smaller, add bullets, numbers, etc.
- Save your document as filename.html
- Open ClarisWorks, select new drawing document, make a nice
picture.
- Select Select All from the Edit menu
- Select Copy from the Edit menu.
- Switch to Claris Home Page, place the cursor where you want
the picture to go, and select paste from the Edit menu.
- Save the image in the same folder that your page is saved
in.
- Select Save from the File menu to save your document
again.
- Click the HTML editing view, and thank goodness you didn't
have to write all that out!
Web Page Creation for Educators--
A Beginner's Guide to Developing
Web Resources for Curricular Purposes
©1998 Burney
Productions
All Rights Reserved