Creating your Web Site using FrontPage 2000

Andrea Peach, Georgetown College
Monday, August 07, 2000

 

  1. Plan, Plan, Plan. Get an idea of the look and feel of the site, the structure, the contents of each page, the graphics you want to use, etc.
  2. Create a new  web on your PC:
    1. Open Front Page
    2. File/New/Web
    3. Choose Empty Web and type in path of where you want to put your files (i.e. y:\myweb).
    4. The first page of the new web site is created for you. However, we are going to create a template before we create or use this blank page.
    5. Create the folder structure of your site (refer to planning)

                                                              i.      Think about how your site will be organized (do you want to put each class in a separate folder or have everything in the main folder). Here is the organization that I frequently use:

In this example, I have 4 folders. The first 2, _private and images, are created for me by Front Page. I created the EDU 547 and EDU 570 folders to hold the information for each of these classes. The index.htm web page is my individual home page for all of my classes, and contains links to my class home pages. The links.htm page contains common links that any class may need to access. I also maintain a links page for each of my classes.

To create a folder, go to File/New/Folder and type in the folder name. You can go ahead and create all of your folders now, or you can create folders at any point while you are working on your web site.

 

    1. Now, we will create blank pages to put on our site

                                                              i.      Click on the Navigation tool.

                                                            ii.      You should already see a Home Page icon (if you don’t, click the New Page icon). We will be adding pages to go under this home page.

                                                          iii.      I’ll use my web site (above) as an example. Click on the New Page icon on the toolbar 3 times. This will create 3 pages (my index page=my home page, so I should have a home page with three pages underneath it). Then, right-click on each page (box) and choose Rename. This will allow you to give the pages a name (or, you can click on the text in the box for each page and give them names) (I choose links, EDU547, and EDU570). NOTE: You should create the number of pages you anticipate needing in your web site. You can also add more pages later).

                                                           iv.      Double-click on the home page. You should see your file list on the left and your blank home page on the right. You should also see files that end with html in the file list. These are the files that you just created.

                                                             v.      Now, we will finish our organization task.

1.      Click on a web page that belongs in one of the other folders and drag it under the correct folder. For example, if I created a page called EDU547.htm, I would click on that page and drag it to the EDU547 folder. Do this for each of your web pages that you need to move.

2.      After you have moved the pages, double-click on each folder, right-click on the name of the main file, and change the name (in my case, either EDU547.htm or EDU570.htm) to index.htm.
 
                Folder List
  
                                               Navigation

 


To put new pages on your site: Click on Navigation and then click on the box (page) that you want your pages to appear under and press the new page tool (or File/New/Page). For example, if I wanted to add a syllabus to my EDU570 web site, I would click on the EDU570 box (page) and then I would press the new page tool. Then, right-click on the box, choose Rename, and name the page syllabus. Now my navigation would look like this…

 

 

  1. Create a template for your pages.

                                                              i.      Go to navigation mode and double-click on the home page. You will get a blank screen on the right.

                                                            ii.      Right-mouse click on the page and select THEME. Scroll through the themes and select the one that you want to use. (NOTE: we can also customize themes, but that will be for another class!) Then click OK (and Yes if you get an additional dialog box).

                                                          iii.      Now, we will add some navigation buttons and headers/footers.

1.      First, right-click on the page and choose Shared Borders.

2.      Select “Apply to all pages”

3.      For the sake of this class, we are going to have a top border where the title of our page will be shown; a bottom border where we can put contact information; and a left border with navigation buttons. So, click the following options: Top, left (include navigation buttons) and bottom.

4.      Click OK

                                                           iv.      Now, in our top border, we are going to put a banner. So, click on the top border and choose Insert/Page Banner. Under properties, choose Picture (the text should already be entered). Then click OK.

                                                             v.      Let’s save our page now. (File/Save)

                                                           vi.      Next, let’s look at the navigation bar at the right. If you will double-click on the right part of your screen, you will get some options for customizing this bar.

1.      Under the hyperlinks to add to page section, choose child level. This will include all of the pages under the home page. You can change this option on other pages if you would like.

2.      Under the Orientation and Appearance, choose Vertical and Buttons.

3.      Press OK

                                                         vii.      Finally, let’s add some text in the bottom border. Click in the bottom part of the screen and type something like ‘This site is maintained by (your name) at Georgetown College.

1.      You may want to add a mail hyperlink to your name so visitors can click on your name and e-mail you. To do this, highlight your name, right-click on your name and choose the Hyperlink option (at the bottom of the menu). Then, click on the icon near the bottom right of the screen that looks like an envelope. Type your e-mail address in the box and click the OK button. Then, click the OK button on the current screen and you will have created your hyperlink!

2.      You also may want to create a hyperlink to Georgetown College. So, highlight the words Georgetown College (this is what the visitor will click on) and right-mouse click on the words Georgetown College. Choose the hyperlink option. On the screen, find the URL entry box and type in http://www.georgetowncollege.edu. Then, click OK.

Hyperlink Screen

 

                                                       viii.      Save your page. Then close it and click on the other pages. You should see the same settings on all pages now!

  1. Enter your content
    1. Using Front Page is much like using Word 2000. You can use tables, format text, insert images, and create hyperlinks. If you want to see what your page will look like on the web, click File/Preview in Browser and select either Internet Explorer or Netscape.
    2. If you have any images that you have collected to use in your web site, import them

                                                              i.      File/Import menu

                                                            ii.      If you created an entire folder of images, just click the Folder button. Otherwise, click the File button and you can import the images from different places on your hard drive.

                                                          iii.      Continue finding all of your images. When you have them listed, click OK. If you miss a few, or want to add more later, you can repeat these steps!

  1. Publish your web site
    1. When you are ready for your site to be LIVE, you will need to ‘publish’ it to spider (or prweb if you have access). To do this, follow these steps:

                                                              i.      Make sure you have space set up for you (by ITS) and that you know the address (i.e. http://spider.georgetowncollege.edu/music)

                                                            ii.      File/Publish Web. Type in the url (you can browse if you can’t remember the url)

                                                          iii.      Type in your id and password

                                                           iv.      After the operation is complete, it will ask if you want to view your web site. You can if you want!

  1. Making changes
    1. When you want to change something on your web site, first change it on your pc web site and then re-publish to spider.

                                                              i.      Open FrontPage

                                                            ii.      Go to File/Open Web. Click on Web Folders. If you folder doesn’t appear in the top of the box, click in the Folder Name boxand type y:/myweb (Open).

    1. If you want to delete a file from spider, first delete it on your personal web and then publish the web. It will delete it off of spider.
    2. If you want to delete a page from spider, but you don’t want to delete it from your work area (pc web site), you will need to:

                                                              i.      Close your pc web site

                                                            ii.      File/Open Web/ and select the http://spider.georgetowncollege.edu/yourwebsite

                                                          iii.      Delete the file.

                                                           iv.      File/Close Web

 

These web sites may be of use when designing and adding content to your site.

 

http://www.actden.com/fp2000/java/index.htm - Very cute and useful tutorial (from Actden)

http://www.microsoft.com/education/tutorial/classroom/fp2k/default.asp - In and Out of the Classroom with FrontPage2000 (from Microsoft)

http://www.microsoft.com/education/tutorial/workshop/fp_buildweb.asp - Creating a course web site with FrontPage2000 (from Microsoft)

http://spider.georgetowncollege.edu/AcademicSupport/tutorials/forms.htm - Computer Based Quizzing, Testing and Surveying (from Microsoft)