How to Make a Portfolio Web with FrontPage 2000

Onekama Students: Log in with your user name and password. Go to the Book Shelf. Choose FrontPage 2000, Start. Click on the down arrow next to the new page symbol in the upper left hand corner of the menu bar. Choose "Web". More choices. Choose "one-page web". (There are many, many ways to make a web. For this class, we will use THIS method. Later you may try other methods on your own.) Grading Rubric

Teachers Start your Windows program. In "Programs" choose Microsoft FrontPage 2000. It will take you to the "getting started page". Click on the down arrow next to the new page symbol in the upper left hand corner of the menu bar. Choose "Web". More choices. Choose "one-page web".

On the right side, decide where your web will be stored. Take note of the full name FP gives your web as it indicates where the web will be stored on your HD. Mine says C:\MyDocuments\MyWebs\beldridg because I chose to save all my webs in "MyDocuments" on the C drive of my computer. Teachers will probably save to their own hard drive.. Onekama Students: you will be saving to the H drive followed by your log in name. Example: H:\detheridge Please name your web with your user name as I did. Later I will put them on the Internet.

You are now in the "Page View". (The various "views" are shown in the frame along the left of your screen) You will see one page called "Navigation View" with "Home Page" in the center. Double Click on it. (It's called index.htm--don't change that) but you want to give it a title. You will see a box with the title in it. FrontPage has called it homepage or new_page_1. Boring names. You change it by clicking on change. The name you choose will appear on top of your index page. Make it a good name. Try "Home Page of Al Smith" , "Bill's Portfolio". See how it looks on your index page. You may need to shorten the title so it fits. Just your name may be all you want. You can also change the name by clicking on the rectangle in "Navigation View" and then using your "right click button" to choose "rename".

Onekama Students, you will want at least four pages for your Portfolio:

• Index Page This is the first page people will see. It will hyperlink to your other main pages. It may also have a "mailto hyperlink" if you wish to allow viewers to write to you. Its URL will be index.htm
• Examples of your written work (for our purposes you need to insert two or more pieces of typed work which you have saved on the file server since sixth grade) as you add more than four or five you may want to bookmark the title of each written piece, and add a "table of contents" at the top which will hyperlink to the bookmarked pages below. You might call this page something like writing.htm You may prefer, as time goes by to have a page for each of your high school years.
• Examples of your other accomplishments (this could include sports metals, awards for academic achievement or service, church or scout activities: anything that tells something positive about you. You might call this awards.htm
• Information about yourself could be added to the Index page, or you might have your fourth page for biographical data and call this bio.htm . If you choose not to have a bio page, make a fourth page and call it photo.htm for photographs, or additional.htm and put whatever additional material you have on the page.

How to add new pages. There are many ways. This is my way. I choose "new page". Then I "save as", naming it one of those listed above as the URL. Also I give each page a meaningful title related to the URL. For instance the URL might be award.htm, but the title would be "My Awards". Later, in "Navigation View", I add the page I just made to the index page by dragging. I add each page by dragging it from the folder side to the Navigation side. As you begin to drag you will see a line extending from the top. Connect this line to the bottom of the Index (home) page. Connect the three pages (writing, awards, bio) to the home page. The three you add should be parallel to each other, all connected to the Index (Home) page. It works. For this class we will do it my way. Sample page: http://www.onekama.k12.mi.us/portfolio

Be sure to give each page a meaningful title. This title will show up as the name of your "automatic links" created by Front Page. It will also be on top of the page if you print it. Some search engines look just at the title on a page so giving it a meaningful title is important.

Now comes the fun part: Applying a Theme. It is not necessary to add themes, but if you want them, they can be found under "Format" on the menu bar. Choose "Themes" from the pull down menu. Click "Use selected themes" and then Preview the various options by clicking on them. Do not hit "Apply" until you find what you want. You may click "Vivid color" if you like colors to be brighter. When you have chosen, click "Apply" and FP will do its thing. This may take a minute. CHOOSE YOUR THEME WELL AND STAY WITH IT ONCE YOU LAUNCH. Also, it is best to make all your pages at the start. It's more difficult to add pages to an already existing web. (changing page content --text and pictures--is easy enough)

Shared borders: The shared borders contain the "automatic linking" that FrontPage does for you. For this class, we will have top and left borders for the index.htm page, and top only for the other pages. Later as you add pages below your writing page you may want to add a left border. --but that's later, not now.

About that Left Hand frame... (not the left hand border) It is called "Views" and provides you with several useful views of your web. Click on each of these to discover what they do. In "folder View" you will see pages you just made. In "navigation view" you can see a graphic view of your web. In "hyper links" you can see if all your pages are linked the way you want.

To find out what all the buttons on the menu bar are for, slowly run your mouse over the button without clicking. The function of the button is displayed. This is true for most word processing type programs. You will see that this programs is similar to Microsoft Word. (FrontPage is part of the Microsoft Office family.)

Make it YOUR homepage: In the middle of your home page write a message, add a photograph, tell about yourself. (you may prefer to have your bio here and not have a bio page) Invite viewers to look at the pages listed to the left. This is the first page viewers will see. Create it so they will want to stay and browse.

Saving your work should be done often. The first time you save a page, choose "save as" under the file menu. Give the page a Title and also a URL. The title is what you will see when you print the page. You get to change the title by clicking on change. Do give it a meaningful title. The URL is what the browsers use to locate your page on the web. From now on you can save this page just by choosing "save". (If you don't name the page yourself, FrontPage 2000 will do the naming for you, but it will be a boring new_page_two.htm type of name.) Back to the top

When you want to work on a different page, choose "open" from the pull down "File" menu, or just click on "Folder View". This will show all the pages you currently have on your web. Choose the page you wish to work with. Double click on it. Always "Save" when you are done.

Many of the typical Word Processing features are available such as a Bulleted List, Numbered List, Center Text, Bold, Italic, Insert, etc. You can use Copy (control C) & Paste (control V) when you want more than one of an item, or Delete (control X) and Paste when you wish to move an item. You can change the size & color of your text easily. I suggest sticking with the very basic fonts such as Times. A viewer of your web will only be able to see a font if it is installed on their hard drive. This page uses "comic san". Is that what you see on your computer? It is best not to use underline, because that signals a hyperlink.

Using "Insert" from the Editor's tool bar can add interest. You can "Insert" graphics such as horizontal bars or little gif's. You can also insert photographs (jpg's) and text typed in other programs. All you need to know is how to navigate on your machine to find these items. Graphic hints

Inserting Text written in a word processing program can be done easily. For instance, choose "file" from FrontPage's "Insert" menu which is on the Editor's tool bar. Navigate to your personal server space. You can gather your files from the file server and put them on a your web page directly. Check Mrs. McCarthy's pages from last year: that's how she did it. Perhaps you will find some of your writings on her page. Of course, you can always just type in text yourself! (Hint: to eliminate the "extra space" between lines when you hit return, use "return" while holding down the "shift key". This works especially well for poetry. The printer command which you see in FrontPage will not show on your web. Caution: when adding text you may accidentally be adding imbedded printer commands that change your web. html does not support as many options as your regular word processing program. What you saw in Microsoft Word may not be what you get when you pull it into FrontPage. Learn to delete and try again.

Inserting Photographs you have taken with your digital camera, scanned, or brought in from another source is also easy. Just know where you saved them after you brought them into your PC. The same is true of "gif's" you create in Microsoft Image Composer or another source. (Hint: it is best if your digital images are less than 25K --less than 10K is even better! If they are too big it will take a long time for them to show up on the browser. Your viewer will probably be using a modem connection which will likely be much slower than what you are using at school. They may not want to wait!) And if you forgot where you put something, use FIND to search for it. Formatting your photo: You don't have to format ahead, you can do it in FrontPage. Just bring in the photo (jpg image), click on it, and a photo menu shows up. Slowly slide your cursor over this menu to see what each icon does. One will crop. One will resize. Best of all, one will "resample" or reduce the resolution of the photo so that the page will load more quickly. Love it! Be sure to "resample" and save. jpg's save as a separate file.

Hyperlinks can be added in several ways. You can click on the hyperlink icon on the Editor's toolbar. You can choose "insert hyperlink" from the Insert menu on the Editor's toolbar. You can also just type in a URL and FP will automatically make it a hyperlink (just like Word and PowerPoint do.) If you do this and press "enter", you can highlight the URL that you typed and give it a descriptive name instead of the URL. It will still be a hyperlink. You can add your e-mail address in the same way. (And, of course, FP does a great job of hyperlinking pages when you create them in the Navigation View.)

• Try this to make your own hyperlink: type "Onekama School".
• Run your mouse over the words to highlight them.
• Go to "insert>hyperlink"
• Choose World Wide Web
• Type in the URL for Onekama School
• http://www.onekama.k12.mi.us

You can preview your pages by choosing "Preview in Browser" under the file menu. This will show you what your page will look like on the Internet --even though it is still only on your hard drive. (be sure you have saved first) This is a good way to check and make sure your hyperlinks work.

Organizing Information can be done in several ways.

1. Numbered and Bulleted Lists work well. Just click on their icons to begin. Click on the icon to end. If you have a theme for your web, the bullets will likely have their own personal touch.
2. Another method, which is my personal favorite, is adding a table. Select "Insert a table" from the Table menu on the Editor's toolbar. Fill in the information concerning the number of rows and columns you would like to have. If you do not want a border, enter 0. You can add text or images to each cell. You will want to format the cells as you go. Select "cell properties" from the Table menu. (Use the pull down menu or right click. You will need to BE IN the cell or table you want to work with) You will probably want to change the horizontal and vertical alignment(for essays, you will probably choose "top" and "left justify", for photographs you may prefer to "center"). You can change the width of the cell (and also change all cells in that column) for an interesting look. Each cell may be given its own background color, or you may use the page default color. If you choose to have borders, they can also be thick or thin or colored. (Almost every page in Onekama School's several thousand-page web site starts with a table.) Back to the top

To close Microsoft FP, choose File > Exit FP will remind you to save unsaved pages. When you start up again, Explorer will most likely start in at the web you worked on just before closing. If it does not, select "Open FP Web" under the file menu. This will give you a list of the existing FP webs on your computer.

What if I want to have more pages than just the three-four you made? Pages can be created at any time. Go to the New Page icon on the menu bar. Be sure to "save as" giving the page a reasonable title and URL. Pages are best linked in the "Navigation View" of the Explorer. For instance you might want to add two more pages to the "Writing" page. Create two pages. Give the new pages meaningful names such as "My Letters to Santa" and "Interviews with Classmates". Then in "Navigation View" drag the new pages and connect them UNDER your writing page. Once again, this is what Mrs. McCarthy did. Mrs. McCarthy's pages

Be sure to tell FP if you want to have shared borders. (You certainly do, at least in the beginning) You may choose to eliminate the left hand shared border, but choose "this page only". (keep the top shared border--it has your hyperlinks) OH and do leave the left hand shared border on your INDEX page. The Index page has its hyperlinks in the left border. All other pages have their hyperlinks in the top border (or left) depending on what you choose. Later you may choose to do your own linking. For now use shared borders.

In the hierarchy of things your Home Page (usually called index.htm --or html --on most webs, but called default.htm in FP98) is the top page. The hyperlink titles of pages linked directly to the Home Page show up on the side bar of the Home Page and are on each directly linked page. However, when you go down a third level, those hyperlink titles only show up on the side bar of the page to which they are directly linked. It actually does make sense. If you keep the shared borders, you will always have the option to return to the Home Page or just go up one level in the hierarchy.

Where can I get ideas for my portfolio pages?

• One good way is to browse the Internet. Are you able to find places where students have uploaded their portfolio? Please share them with the class. We are curious about what other students do. beldridg@manistee-net.com / debf@manistee.org / bjbrown@manistee.org
• A Links to the WWW Page might be nice to have. You could create a page with links related to your curriculum. Remember this is your portfolio. Consider carefully the appropriateness of the site to which you are linking. You want your portfolio to be a positive reflection.
• Using photographs with your comments is nice. A good way to do this is to make a table two columns wide. It is possible to have text wrap around a photo, but this is considerably more difficult.
• Below is Mrs. Brown's index page. She is using an older version of FrontPage on a Macintosh Computer. http://www.onekama.k12.mi.us/bjbrown/ She has been making her own web pages for three years. Most of the elementary webs are made on Mac Computers.

Could I make a web without "Themes"? Yes, when you start a new web choose "this web does not use themes". You will still have the top and side borders. If you want to manage your own linking, eliminate them. Golly, it will be just like FP 97! You can also remove "themes" from an individual page. Go to "Theme" under "Format" on the Editor's toolbar. You can remove the Theme but leave the shared border on a page. That keeps your hyperlinks but allows you the freedom to use other background ideas.

Could I write text on a photograph (jpg)? Yes, click on the photo and you will see the graphics tool bar. You can make the outer border transparent. You can resize the photo so it will fit. You can add hotspots/hyper links, and you can add text. To add text click on the letter A. A box will appear on the selected photograph. Type in your text. You can change the size and font. FP tells you that this will be saved as a gif now, instead of a jpg and may have less colors and be a larger size file. So my answer is, yes, you can write on a photo, but I don't suggest it. I would suggest putting your text as a caption under the photo. (a gif can only have 256 colors or shades of grey. a jpg can have thousands. a new form, called ping is available and combines the best qualities of gif and jpg, but only a few browsers can read it. Until ping works most everywhere, use jpg or gif.) Back to the top

May I borrow a camera? Yes, you will need at least one of yourself. We will have a Ricoh plugged in. Have a friend take several photos of you. Delete any you don't want. We will get the one you want on a floppy for you. REMEMBER, this is your portfolio: no bunny ears.

What if I added a photograph and didn't like the way it looked? You can resize a photograph. When you click on it, small handles appear. Move them in or out with the diagonal arrows on the corners. This preserves the proportions. You can make the photograph load faster by "resampling" it. After you resize, click on "resample". I was able to turn a 32 K photo into one with just 8 K. Wow! You can also crop, brighten or add contrast to a photo right in FP. And if you hate the changes you can always click "restore" on the Image Toolbar. (Remember that if you forget what individual icons stand for just run your mouse over it slowly and the description will appear. Even FP didn't expect you to memorize the 100 or so icons it uses!)

Could I put my art work on a web page?

• Yes, scan it. Save it as a gif. Insert it into your web. I have seen some really nice pages where the student also writes describing his drawing.
• You can also take a digital photographs of your art project. Once again the digital image can be cropped and brightened right in Front Page. I strongly urge you to "resample" all images after you have worked with them and before they are saved. This will provide the correct resolution for the web.
• You can also use your art as a background on a page where you have chosen to have no themes. Pull the gif in under Format > Backgrounds instead of under Insert > Image. This will tile the image across the page. When it is in, you will want to have it lighter. Under Views choose Image Toolbar. On the toolbar click the Icon for Wash. It will give the image a "washed out look". For an example of how this looks, check the S.A.D.D. CHAPTER page on the Onekama High School Web. Their LOGO is washed and tiled in the background. I think Rick VanIttersum made it. http://www.onekama.k12.mi.us/y98-99/saddpeer.htm

How can I show my awards and metals? You can take photographs of both. For the metals, I would suggest positioning them on a pleasant colored fabric, wood top table, or carpet work well.

Could I add my PowerPoint or HyperStudio presentations? Yes and No. PowerPoint can be added but not all the parts work the way you expect. We'll have to keep working on that. HyperStudio can be added, but only viewers with certain plug-ins can see them. With the plug-ins they do work perfectly.

Could I make up my personal Logo? Yes, in Microsoft Image Composer (It came on the CD with FrontPage) you can create all kinds of logos and page headers. Below is one I made for my Arc web sites using Image Composer. After you make a logo, save it as a gif. Then you can insert it into your web. You can also draw a Logo and scan it. The middle school page, as well as other pages, has a gif on the top made in Image Composer http://www.onekama.k12.mi.us/m2001/index.htm

Looking Back to 1997-1998: Yes, you were once fifth graders. You were there when I was learning to make my first full web site. http://www.onekama.k12.mi.us/onekama97-98/gr5.htm was our fifth grade homepage. Browse it to see how cute you were (of course, you are even better looking now) and how well you wrote. (Sorry, but you were in Mrs. Brown's fourth grade B.W.--before web)

E-mail us
Barb Eldridge, Fifth Grade Teacher, Onekama School
Bonnie Brown, Fourth Grade Teacher, Onekama School
Deb French, Media Specialist, Onekama School

Return to Barb's Help Page / Back to the top

January 2001 / http://www.onekama.k12.mi.us