Step 1. Decide who your audience is to be. That will determine the
content of your page and will help to keep you focused. It may also help you
to see how other schools are serving their audience. You could go to Web
66, the International School Web Site Registry, to find other school web
pages.
Step 2. Before you launch Claris HomePage, establish a folder on your
computer, or on your disk, where you will store all web page documents and
graphics used for your school web page(s). Use only one folder and store everything
in the same folder. Everything!
Step 3. Become familiar with the buttons.
Keyboard commands given are Windows 95 commands. Macintosh commands are in
parentheses.
Step 4. Launch Claris HomePage. If you don't have
a shortcut (Win '95) or alias (Mac) on your desktop you would find it useful.
The shortcut on my desktop looks like this:
A caution before you begin to create a web page. Keep it simple. Keep in
mind your purpose in creating a web page is to communicate some message to
a specific audience. Anything you try should be done with that in mind. Do
not try to impress visitors to your web page with all the fancy things that
you can do. Blinking text, MIDI files that play as long as someone is viewing
the page, or too many animated GIFs can drive viewers away from your page.
You should also think about how you can get someone to want to come back
to your page over and over. If they know they can find assignment information,
local weather forecasts, or an easy link to Doppler radar, they may tend to
keep visiting your page. Be creative, but keep in mind who your audience is
and try to serve them.
Step 5. Use Document Options to define the background
color of your new page. If you do not remember document options, go
check it out.
Now that you are back, decide on a color for the background. Remember the
"keep it simple" rule. If you want people to read your page, don't make it
hard to read.
Default color- The default color is gray. To change that click on
the gray square to the right of the word background and you will be able to
select another color. I like white as a background color, your own preference
will determine what you choose but make it easy to read.
Text Color- You can also change text color here. Your first consideration
should be how easy the text will be to read. There is another important consideration.
On most browsers the color of a link will be blue and it will be underlined.
That can be changed on an individual's computer, but most people don't make
changes to link color. If your text is the same color as a link you will confuse
people viewing your page.
Before you make any other changes to the web page you should see what Claris
HomePage has done for you. In a WYSWYG editor, What
You See
is What You
Get. In order to do that HomePage takes
what you type and converts it to HTML code, it's just not visible. Take just
a minute and see what Claris has done. Go to Edit HTML Source. If you don't
remember how, just check here. Back?
Good! When you select Edit HTML Source you should see:
All of that code is necessary just to provide a white background on which
to type. If you know about HTML code you can modify the page, but you can
write a web page without ever seeing this code. When something happens in
Claris that you did not expect to happen, it is most usually because of the
HTML codes in the background. As you work with the application, you will learn
ways to trick Claris.
Another HTML tip- If you are looking at a web page that did something
neat and you want to see how they did it, just ask for a copy of their document
source. Go to the View menu in Netscape and select Document Source. You will
see the HTML document that was used to produce the web page. Copy this document,
open a new page in Claris HomePage, select Edit HTML Source, and paste the
document into Claris. When you find how something is done you can copy the
HTML codes and past them into your page.
Step 6. Learning how to trick Claris HomePage to
do what you want it to do.
Tab- Don't waste time using the tab key. Claris takes what you type
on the page and converts it to HTML. Since there is not an HTML code for tab
Claris can do nothing with it. You can use the Indent button rather than the
Tab.
Space- Claris can handle a space between letters, but there is no
code for several spaces. If you try spacing to put text or images exactly
where you want them, you will be disappointed when you view your page in a
browser. You can use a table with a border that is 0 pixels wide [invisible]
to appear to space items on a page.
Text beside an image- When you place an image on the page you have
only three choices as to where the image goes; left, center, or right. Similarly,
if you want to enter text next to an image, one line of text will be placed
at the top, middle, or bottom of the image. If you continue to type word wrap
will put the second line below an image, regardless of how large or small
the image is. Only one line of text is allowed on the same line as the image.
To trick Claris insert a table, use
object editor to make the border 0 pixels wide and you can have several
lines of text beside an image.
Step 7- Some things to keep in mind about Claris HomePage
Use the Spell Checker- Remember question 6 in the test in Step 1?
After you have finished your web page go to the Edit Menu and select Check
Spelling. If you are producing a school web page you do not want spelling
errors on your page.
Using Object Editor- Use this window to set parameters for an object
such as an image, table, or horizontal rule. As an example I will use this
to change the size of an image at the bottom of step 6.
In the window above I can do several things
- Alt Label - Use this block to name the image, the name will be displayed
instantly while the image downloads
- Alignment- Define the placement of text in relation to the image.
- Transparency- If the background of an image is not the same color as the
background of your web page use this button to make the background transparent.
- Width & Height- I am going to use these two blocks to cut the size
of the image down to 1/4 its original size. To do this I will highlight
each number and cut it in half. Compare the image below to the original
image
Using Link Editor- Use this editor to make a link to another web page
that you have written, or a page posted on the web. You also use this to make
an anchor to another spot on the web page or a mailto: link.
- Link to a URL- Highlight the word(s) you want to make a link, open the
Link Editor, and paste the URL into the block. It is much better to copy
a URL to paste into the editor. If you try to type it in there is a chance
of a keystroke error.
- Link to another page you have stored on your computer- Highlight the word(s)
you want to make a link, open the Link Editor and Browse Files to locate
the other page.
- Making a Mailto: link- Highlight the word(s) you want to make a link,
open the Link Editor and type in mailto: plus the Email address.
- Link to an anchor- First place the cursor where you want to make an anchor,
click on the anchor button, and name the anchor. Copy the name of the anchor.
If you are going to have a large number of anchors, develop some naming
scheme. Highlight the word(s) you want to make a link to the anchor, open
the Link Editor and type #anchorname.
Carriage return- Hitting Enter or Return is known as a carriage return.
In Claris it is the equivalent of hitting Return twice on a word processor,
or hitting the carriage return lever of a typewriter (remember those) twice.
If you really want to go to the next line to type, but do not want the extra
line choose Line Break from the Insert menu rather than hitting Return/Enter.
The first example below is without Line Break and the second is with.
Bill Byles
Teaching and Learning Academy
Memphis City Schools
Bill Byles
Teaching and Learning Academy
Memphis City Schools
Inserting images- Claris prefers GIF or jpeg images, but will convert
PICT files to GIF. When you scan images or when you process digital camera
images, check to see if you can save the images as either GIF or jpeg. If
neither choice is available save in PICT format. You will make things easier
on yourself if everything is in one folder. Claris will actually help you
here. When it is time to upload the web page to the server HomePage will send
all of the images, even those in other files.
Uploading your web page- When you have finished your web page it is
time to upload it to the server.
Making Changes to your web page- Under the File menu you will find
a very useful item; Remote. You use Remote Save to upload the web page as
explained in the instructions referred to above. When changes are necessary,
Open Claris HomePage on any computer that is on-line and choose Remote Open:
You don't need to have a copy of your web page on the computer, Claris will
get a copy for you. After you finish making changes save it back to the server
using the same procedure you followed the first time. If you are only making
changes to text you do not need to save the web page to your hard drive. However,
if you add any image you will first need to save the page to your computer
before uploading it to the server.
Give your audience a reason to come back to your page- If all you
have on your web page is a picture of the school, faculty and staff, and your
mission statement, after visiting you once there will not be much incentive
to return. Here are some things that other schools have done to serve their
audience:
- Community links- provide links to community resources; library,
newspaper, TV and radio,
- Weather- "Everybody talks about it..." and if you provide links
to local or even national weather services parents and students might visit
you often.
- Homework resources- There are a lot of places on the web to help
students. If they are connected at home, provide this valuable resource
for them.
- Research and reference materials- Would a dictionary or encyclopedia
on line be useful to people visiting your site? There are plenty of them
out there.
- Be creative- Keep people coming back to your web page.
On-Line courses related to Claris HomePage
Links
for Web Page Development
Graphics- Caution!
A common mistake of first time school web page developers is to try to load
the page down with graphics. The function of a graphic should be to make your
page more appealing or to call attention to something on the page. Avoid using
graphics just because they are pretty.
- Andy's Art Attack! - Free animated
GIFs, backgrounds, buttons, Photoshop tips, Illustrator tutorials,HTML tips,
graphic tips, web design secrets & more! Be patient, this site is slow
to load, but that's true of all graphic intensive sites.
- Animated GIF library
- an A to Z listing (actually A to Y) that is quick to download and view.
- Animation
Factory. All the clip art animations there were created by Eclipse Digital
Imaging and are FREE* for your use on personal web pages
- Make, or modify, your own graphics
- Animated Bannermaker
- Choose an effect, create your banner, save it to your computer.
- Buttonmaker - Turn any GIF
into a button.
- GifOptimizer is a FREE,
online tool that reduces the file size of any GIF image up to 75%, allowing
web pages to load faster.
- Clip Art - This page is
put together by the Mining Company. They mine the web so you won't have
to.
- Cool Archive has fonts, icons,
clip art, animated graphics and more. Make sure you see their logo
generator.
- CoolText.com has a title generator
that is really easy to use.
- HTML How To, Icons, Graphics
& FAQ Web Sites Includes quite a few links to graphic sites.
- Redman's GIF Animation
Resources - Stop looking for graphics sites, you can find them all here!
- Rick's Web Tools
Tools for creating and adding to your web page. Includes a large number
of graphics site links
- SINOPE'S
ICON DEPOT: free icons, graphics, music and more to add to your web
page!
- Web Clip Art
- a huge list of links pulled together by a guide from about.com
- Web Graphics: Animated
GIFs This site explains how to make animated GIFs and has links to download
sites for GIF Construction Set 32 for Windows 95 computers. Follow the link
to the home page of Paint Shop Pro's Web Graphics site for more general
graphics information.
- Web
Page Background Graphics - This is a set of links on this category pulled
together by the Go.com network. You will find much more than backgrounds
on these pages
Guidelines for page development and
other help
- Claris Home Page Talk
- An Email Discussion Group for Users of Claris Home Page
- Claris
HomePage Tutorials posted by SanDiego Schools as part of their staff
development effort.
- Developing
Web Page Policies or Guidelines by Mary Alice Anderson, Media Specialist
Winona (MN) Middle School, Technology Connection, May/June 1997.
This article offers some excellent suggestions of factors to consider when
designing your school web page.
- Help with Claris
Home Page, Part 1 - For help understanding HTML and graphics placement
- Help with Claris
Home Page, Part 2 - Information on graphic location and links
- Java
Script - examples and script sites. Caution, use Internet Explorer when
viewing the source document, Netscape does not display all of the script
components.
- On-Line Tutorials
from Media Builder to help you with all aspects of web page development
- Response-o-Matic:
a free form processor. Add forms to your web page with no programming.
- School Web Page
Templates - pre-designed layouts that can be used to create page layouts
- Search the web for resources for your web page
- Tips on Web Development.
Read this there are some excellent ideas here. For example: "'coding HTML'
has about as much to do with creating meaning on the Web as changing a typewriter
ribbon has to do with writing a novel."
HTML
- Dirk's HTML
Page HTML resources and other web page assistance
- Essential HTML
Tips and Links several HTML tutorials and other reference links
- HTML for Non-Beginners
This collection of short articles is intended for people who already know
the basics of HTML. If that does not describe you go there to find a link
for HTML Crash Course for Educators
- HTML How To, Icons, Graphics
& FAQ Web Sites One of many places on the web where you can find
HTML help.
- HTML Testbed
- Type any HTML code in the box on this page. When you click on "Show Me!"
it will be displayed in a pop-up browser window
- HTML Tips and Tricks
from c|net, includes links to advanced topics
- Web Monkey guide to all
facets of web page development. Provides "monkey see, monkey do" instruction
tutorials.
Java Script
