Sapna Gupta, Associate Professor
Main Page | Personal Page | Park Pages |


Using Microsoft FrontPage to Design Web Pages

Dr. Sapna Gupta, 22 March 2000
Back to Park Pages


TOPICS TO BE COVERED

  1. Starting your own page
  2. Editing and saving
  3. Formatting
  4. Creating links - external and within the document
  5. Background themes
  6. Creating tables
  7. Inserting images
  8. How to maintain consistency in all your WebPages
  9. Basic syllabus
  10. Basic department homepage
  11. Additional templates
  12. Cool stuff: hit counter, updated date, feedback information etc.
  13. More help
1) How to start a Web Page at Park University {TOP}
URL ADDRESS: http://www.park.edu/firstinitiallastname
USERNAME: firstinitiallastname
PASSWORD: password
Call Wade Tripp to change password (NOTE: DO NOT SAVE PASSWORD)
Ask for FrontPage 2000 for your computer
 
Opening the Web
Go to "File" and "Open Web" and then the bottom icon – "Web Folders".
This is where your web directory should be. Click on it.
The URL should appear on the right box. Double click on it. You will be prompted for a username and password. This is what is given above.
Opening a File:
Go to "File" and "Import".
Click on "Add File". Chose "Floppy A" from the Look in Menu. Add the files provided in there (a total of 6, four HTML and two gifs). If you have your own diskette, this will be the time to upload your files.
Remember, you can upload pages to your website on campus from computers on campus i.e. from the same server.
You can import files from Text, Netscape Editor and Composer, HTML, Word, World Wide Web etc. into FrontPage
You should see three columns on your screen, the right one is the page you can edit, the center is the directory and left is the explorer, from which you can navigate and check links.
There are three ways you can view your web page: the bottom of the right screen has the three options:
a) the normal mode: which is what we are working in
b) the HTML mode: you can change or enhance the page by writing your own HTML codes
c) the preview mode: you cannot edit here, this gives you an idea of what the final page looks like

{TOP}

2) Editing and Saving  

Editing: Front Page is like Word, you can edit (copy or cut and paste) as you would in any word processor program.

Saving: To save go to "File" and then "Save" or "Save As" depending on if you have a new page. (remember to save your work often)

{TOP}

3) Formatting

Formatting (bold, italics, underlining, text color etc) can be done as in the word processor program. You can align your text to the center or left etc. Bullets and numbering is the same as in Word. You can also adjust the paragraphing and line spacing.

{TOP}

4) Creating Links

Linking to external site: type in the name of your site, the URL or another name if you wish. Highlight what you wish to link and go to "Insert" and "Hyperlink". Enter the URL in the space provided when the next screen opens.

Linking within the page: highlight the target (what you want the link to go to), go to "Insert" and chose "Bookmark".

A small box will ask if you want to add the bookmark, click ok and continue to Bookmark as you wish. When finished, you can highlight what you want to link to target and go to "Insert" and chose "Hyperlink". From the bottom of the box (below URL) is a small pull down menu of "Bookmarks" (this is where your bookmarks have been saved). Choose the targeted bookmark and click ok.

 {TOP}

5) Background Themes

FrontPage provides a wide variety of themes for the background with matching horizontal lines, bullets in various indentations and a banner. You can have a different theme for each page or the same one. You have to select it every time you make the page.

To chose a Theme go to "Format" and "Theme" and view the themes. Chose the theme you want and click ok. You can change the theme to your liking but at this point I will not recommend it. Alternatively you can use your own images for background.

 {TOP}

6) Tables

Tables are good ways of arranging all the information on your page. You can make a table visible or invisible.

Go to "Table" and "Insert Table". Fill in the blanks on how many rows and columns you want. Click ok. You can type inside the table. You can edit the table by going to "Table" and chosing "Properties" and "Table". (You can also edit each individual cell if you wish). You can adjust the borders of the table, spacing between the cells, color of cells, color of the border etc. It is best to leave the cell width in percents if you are not sure of the pixels.

To make a table invisible (without borders) select Cell border to be "0" in the "Table Properties".

 {TOP}

7) Images

You have to save the images in your folder. You can simply "drag and drop" images from the "Folder" section on the left of this screen to where you want on the right screen. Alternatively you may "Insert" a "Picture" or "Clip Art". You can change the size and position of the image from "Format" and "Properties".

Along with FrontPage you also get a software for images called the "Image Composer". This can be used to change the images – make them brighter, change colors, edit images etc. (Another workshop another day!!)

 {TOP}

8) Maintaining Consistency/ Shared Borders

This is to bring some uniformity to your pages, in case you do not want to type the same things over and over again in your pages like the department name.

Go to "Format" and "Shared Borders". You may chose the kind of border you want to keep constant (only the top, top and bottom or top and left. This page has top and bottom). Usually this is the default and you will have to change it if you want a different border for different page. Any information you type in these borders will be visible on all the pages.

 {TOP}

9) Basic Syllabus

The diskette provided has my syllabus for one of my courses. This is just to give an idea of what kind of links or page layout you need for a syllabus page.

10) Basic Department Homepage

I also have provided a sample of the Chemistry Department page. It still needs a lot of working on, but it gives the general idea of what you might want to include in your department homepage.

 {TOP}

11) Additional Templates

Frontpage has several pages already designed and saved for a variety of purposes. Go to "File" and "New Page". You will see a selection of templates ready for use. You can always edit them according to your requirements.

12) Cool Stuff

Hit Counter: "Insert" "Component" "Hit Counter"

Updating Date: "Insert" "Date and Time"

Feedback information: "Insert" "Form". Right click on the form and go to "Form Properties". Enter your email address. Your email address is not visible on the final screen. Click OK. You can give the heading on the form in the page itself.

Hoover Buttons: "Insert" "Component" "Hoover Button". Changes colors when you place your cursor on the button (Java button – may take more time to upload the page)

Reports: click on the "Reports" icon on the left screen. This gives a summary of all your pages, their links and size etc. A neat feature to make sure everything is connected.

 {TOP}

Internet Sources for Training and Help

ON THE WEB
1. FrontPage 2000 Tour:
http://office.microsoft.com/en-us/FX010858021033.aspx
Microsoft’s own help with FrontPage. Not great but worth a look.
2. Excellent site for learning about the FrontPage.
http://www.siec.k12.in.us/~west/online/website/
go to Technical Information and then to Index of How-to Articles
3. A tutorial:
http://www.eiu.edu/~history/fpe_tutorial/

 {TOP}

OTHER SOURCES:
You should all have "FrontPage for Dummies" by Damon Dean in your folders.
This is, of course, just a quick reference.
Features to Stay away from in the Beginning
Navigation
Frames
Java scripting

 {TOP}


Maintained by [email protected] 

1