Links for K-12 Teachers | Assessment Assistance | On-Line Practice Modules | Daily Dose of the Web

Using Claris HomePage
to Design a Web Page

Graphics | Guidelines | HTML | JavaScript

 

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:

Claris HomePage icon

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.

Document Options window

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:

Looking at HTML code automatically written by Claris Home Page

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.

Object Editor window

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

reduced size window showing HTML code wrippen by Claris HomePage

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:

Remote Open window from Claris HomePage

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

Templates are provided to help you get started on your school web page
Click here to get to the templates
School Web Page Templates - pre-designed layouts that can be used to create page layouts

 

 

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

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


 Enter text in the search box
Search the Internet4Classrooms site


Visitors since November 2000
Click for Memphis, Tennessee Forecast
Memphis, TN
Internet4Classrooms is a collaborative effort by Susan Brooks and Bill Byles

Return to Internet4Classrooms home