Flower Web

Topics:
Creating and managing web sites,  formatting and style sheets,  creating tables,  hyperlinks,  thumbnail images, importing images and documents.

Go to Flowers Web Example

1) Front Page 2000 Environment

Start the Front Page 2000 program and let's look at the various parts.
Go to View / Views Bar and click it on and off to see it how it works. The Views Bar has some handy features for expert webmasters. Close it for now.
Go to View / Task Pane (not Tasks) and click it on and off a few times. We'll use Task Pane a lot because that's where you need to go to make a new Web, or a Page Template (frame page, style sheet or form page). Close it for now.

Go to the  Toolbar  and find the Folder List icon and click it a few times. If you don't see the Toolbar, select View / Toolbars / Standard to bring it up. Right now there is nothing in your Folder List because you have not made a Web yet, but we'll do that in a second.

Go to View / Toolbars and select by checking off some of the selections like DrawingsDHTML Effects, etc... You can anchor or un-anchor a panel from the top or bottom bar by grabbing (anywhere on the gray area) and dragging it around. Try it.

We'll use a lot of these panels later, but right now close them all but just make sure Standard, Formatting and Picture are still selected.
 

2) Working with Webs

Let's make our first Web. A Web is simply a folder where you are going to keep all your files and images you'll need for the Web you are working on. You can have multiple webs and every time you start a new project, you should make a new one.

Besides making it convenient to have everything in the same place, working with a Web will enable FrontPage 2000 to add and keep track of extensions and web components that come exclusively with this program.

To crate a new Web, go to the Task Panel on the right (open it up by View / Task Panel if you have to).  Select Empty Web to open the Web Site Template window.  In the Options field Browse around for your folder on the student server.

When you see your folder in your advisors folder, click it once to select it and then press OK.  Don't write anything where is says Web Name.  Back in the Web Site Template window, in the "Specify the location of the new web" field, add at the end the name the web flowerweb  Don't delete anything, just add it to the end. When done, it might say something like: K:/mjurcic/yourname/flowers.

Your Folder List will now have two folders, images and private, indicating that you are working in a Web. It is important to place all your files and images in these folders. The html files should be in the top directory and the images in the images folder. Notice also the web name and location path at the top of your Folder List.

It would be convenient to have the last Web you were working on open automatically when you start the program. In Tools / Options, make sure "Open last Web automatically when Front Page starts" is checked.
 

3) New Documents

Open a new document by clicking on the "Create a new normal page" icon on your  Toolbar  (If you don't see it, select View / Toolbars / Standard). Save the page and name it practice. It will appear in your Folder List with a htm suffix, practice.htm. A htm or html suffix in a file name indicates that it is a web page document and can be edited by FrontPage 2000.

Place some text on the page and experiment with some of the Text Formatting tools. (If you don't see them, select View / Toolbars / Formatting) Select some text and play around with the different Fonts, text colors, and paragraphs settings. It's not very different than Word or Claris Works.

4) Images and Clip Art:

Clip Art:
Lets put some images on the page. Go to Insert / Picture / Clip Art.  In the Task Bar search for "flowers" and press Search. If the search is taking too long, you can limit it by checking off some of the folders in the fields Search in and Results should be. When the search completes, simply take an image and drag it over to your document. 

Clip Art Online:
A more extensive library of clip art is available on Microsoft's Clip Library Online. On the Task Bar, select Clips Online. This will eventually, after some contract agreement pages,  take you to Microsoft's site on the Internet. There you have available thousands of photographs, clip art, sounds and animations.  Experiment with this for a while. 

One limitations is that you have to restart the whole process, from the Task Bar, every time you need another image.

Images in a  network folder:
To place an image that has already been saved somewhere on the network, go to Insert / Picture / From File and use the drop-down menu to find some images. I have some saved in a folder on commononkerr / webmastering / personalweb. Select one image, and click Insert. It should appear on the page.

Background image:
You can also use an image for the page background.  Right Click anywhere on the page and select Page Properties. Here, you can give the page a new Title and change the background; choosing either a color or an image.

If you check on  "Background picture" and then Browse, you'll find two background images I saved on commononkerr/ webmastering / personalweb;  back1.jpg and back2.jpg.  Try it out.

Saving images to Web:
Let's save your work (even though it's just practice) by File / Save. It will ask you about the images you placed on the page. Just because they are on the page, it does not mean that they are in your Web. If you don't see them in the Folder List, they are not part of your Web.

First, change the name of each image. Later, it would be hard to figure what ERTE454534.gif is when you are looking for a particular image. Make sure you do not alter the suffix-the gif or jpg ending after the dot. Just change the left part. To keep things organized, use "Change Folder" to put all your images in the folder "images".

That is the way we are going to do it: Images in the images folder, and htm documents outside.

 

 

Folder List Icon

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Normal Page Icon

 
 
 Path:  Main  / Webmastering / Flowers Web Example  

page  [1] [2] [3]