Creating a Web Page Using MicroSoft FrontPage 1.0 on the PowerPC

Basic Instructions:

·        What is a Web Page?

It is actually several files. In your projects you should have at least seven files. The basic page is a "html" document, that links to each photo, movie, sound or any other item. That means that with your three photos will add 3 files. With your 2 animated gifs you add two more. And your background image will add one more.

·        Open Microsoft FrontPage. Then, Go to the File Menu and select the New command. From options window that opens select,  "Normal Page"

·        Once the new untitled page opens,  select Format Menu ñ  and the Background command.

·        Next select the "Background Image" box. Next click on "Browse", then "Clip Art". Under clip art, select the category "backgrounds". Scroll through your choices, then select your favorite. When you click the "OK" button you will return to the previous box. Click "OK"   once more to return to your document.

·        Next click the Center button on your format toolbar. Type in the name of your page (Your Schoolís Home Page). Now select (by highlighting) the words you just typed. Hold down the "control" key on the keyboard, and click the mouse on the selected type. (This opens commands that apply only to the area you are working.)

·        Select the "paragraph properties", then "Heading 1". The headings are listed in order of importance with 1 as the most important, and 6 as the lowest"  Heading 1 is the largest, going down to heading 6 as the smallest.

·        Press the "Return Key" several times to move down the page. Type: "Student Information". use the Control key +  mouse click and select "paragraph properties", but this time select "Heading 2".

·        Press the return key once, then start typing some general information about yourself. If you wish you can use creative license. While typing information, don't type a return until you finish a paragraph.

·        Click with the mouse button and release. You will see a flashing cursor, just like you would in any word processing program.

·        To insert a picture, first click the mouse at the point you want to start. Then click the "Insert Image" icon on the standard toolbar. A window opens that allows you to find the picture you want to insert. If the picture is in clip art, select that tab. Otherwise, select "other Location" and follow the filepath back to the folder or disk where you saved your picture.

·        When you bring in a picture, you can resize it by dragging the handles. In addition, you can create a frame around the picture. A picture can be set on a page so that type wraps around it on either side. Many images will allow you to select a single color in the photo that will be transparent so that you see the page background through it.

·        Animated gifs are actually a series of still images saved in a single file that play one after another like a movie. You can insert them just like any still image.  The animation will only show when you view the web page in a browser like Netscape Communicator of Microsoft Internet Explorer.

·        You can select any text on the page and change its color by clicking on the "Text Color" icon on the format toolbar. The icon look like an artistís palette.

·        To create hypertext links (a link to any other site on the web), you first type text that will identify the site to the viewer. Then select the type and click on the "create or edit hyperlink" icon on the standard toolbar (this tool looks like a globe with  chain links). A window opens that allows you to select or type the URL address for that link. When you click "OK" you return to the page, and the text is now underlined and color-coded to show that it links to a new location.

·        Note: you will need to browse the internet or use some of the references given to you on the Project 3 Grade Sheet.  Be sure to use the full URL that starts with the http://wwwÖ . This helps to avoid problems later locating your file.

 

·        Hyperlinks can also be created with pictures. In that case you would select an existing image on your page, then go to the linking tool (globe) and click on that image.

 

·        There is even a special kind of hyperlink called an "Image Map" that allows you to make several links on one photo. You have a special tool to draw ovals or polygons in various parts of the image an assign separate links to each part. These shapes become invisible in the browser.



Saving your file

·        Select File Menu  ñ Save command. Name the file your first name + the first four letters of your last name, then a dot + htm.   For example, my file would be called:
"Davidhask.htm".

·        Save the file in the Web Folder located inside our class folder "EME2040, E005".

·        Remember; put no spaces in the file name. I have created a special folder in our class folder for "web pages". Please save your file in this location.

 

Sources of Graphics

 

http://www.firn.edu/webtools.html#graphics

 

FIRN Graphics Archive

http://www.firn.edu/graphic.html

 

Animated Gifs

http://www.firn.edu/gifs/anim-gifs/

 

Small Gifs

http://www.firn.edu/gifs/small-gifs/

 

Backgrounds

http://www.firn.edu/gifs/backgrounds/

 

Arrows

http://www.firn.edu/gifs/arrows/

 

Bullets

http://www.firn.edu/gifs/bullets/

 

Buttons

http://www.firn.edu/gifs/buttons/

 

Lines

http://www.firn.edu/gifs/lines/

 

Other

http://www.firn.edu/gifs/other/

 

 

HTML Guides & References

 

http://www.firn.edu/webtools.html#guides

 

A Beginner's Guide to HTML

http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html

 

HTML Design & Style

http://www.eborcom.com/webmaker/html/#des

 

HTML Forms

http://www.eborcom.com/webmaker/html/#for

 

HTML Quick Reference

http://www.cc.ukans.edu/info/HTML_quick.html