Creating an Academic Web Site

with

Microsoft FrontPage  2003

 

 

 

 

 

 

 

 

Dr. Saeed Asiri

Deputy Director for Development,

Center for Teaching and Learning Development

 

Fall 2005
Creating an Academic Web Site

with

Microsoft FrontPage  2003

 

 

PURPOSE

The purpose of the course is to have the ability to create a Web Page Using Microsoft FrontPage 2003. By the end of this part, you will accomplish the following objectives:

 

OBJECTIVES

 

§       Use of Microsoft Front Page

§       Create a New Page

§       Choose a Background Color

§       Add and Format Text

§       Add Bulleted or Numbered Lists

§       Create Hyperlinks

§       Load Images

§       Add Tables

§       Add Buttons

§       Work with Frames

§       Previewing your Page

§       Saving your Work

 

 

 

 

 


Procedure

 

1. Creating a New Page

From the start menu, select the programs submenu, then find and select Microsoft FrontPage. 

By doing this, Front Page will automatically bring up a new blank page on which to work.

See Figure 1.

 

Figure 1: Starting FrontPage

 

2.  Naming the Page

(Hint:  Be sure that the Design tab is active in the lower left hand corner of the window)

Right click anywhere in the body of the page and select Page Properties from the pop-up menu.

 

Figure 2: Creating a new page

 

Now, be sure that the General tab is active.  Click on the text box to the right of Title and name the page <yourname’s> Web Page.  Do not click OK at this point.  There is still more to do here!

 

Figure 3: Page Properties

3.  Choosing Background and Text colors.

From the same window in Figure 3, click on the Formatting  tab. 

Select a color from the drop-down menu next to “Colors|Background”. 

Click OK and the color chosen will become the background color. 

Repeat to select a text color [Colors|Text] by using the drop down menu next to “Text”.  (Hint:  Be sure that the background color and the text color are not the same). See Figure 4.

Figure 4: Choosing background and text colors

4.  Adding Text

Adding text to the web page in Front Page is just like adding text in Word.  All that is necessary is to click once on the page to activate the cursor and typing in all the information.

Click on the page and enter whatever text you would like.  Be sure to include your Name, address , major, your own college, and the words “King Abdulaziz University.  Moreover, add your degrees' dates and contact information. Next, add a little bit of general information about yourself.

 

Figure 5: Adding text

 

5.  Formatting Text

5.1 Centering Text

        Highlight your Name, Address and Major. Then click the centering button in the toolbar.

 

Figure 6: Centering text

 

5.2    Changing Text Size

Highlight your name.  From the style drop-down menu, select “Heading 1  (Figure 7). 

 

 

Figure 7: Changing text size to style heading 1

 

6.      Adding Bulleted/Numbered Lists

To the body of your Web Page, enter a short list of some of your favorite things to do.

After you have done that, highlight the list of items and click on the bullet button in the toolbar as shown in Figure 8.

 

Figure 8: Adding a bulleted/numbered list

 

7.      Hyperlinks

7.1 Creating a Hyperlink to a Remote URL

Highlight the text you wish to hyperlink (we want to highlight the words “Prof. Baz” and link this to Prof. Baz’s homepage.)  After you have highlighted the text, right click on it and select hyperlink (Figure 9)

 

Figure 9: Creating a hyperlink

By doing this, the Insert Hyperlink window will appear on the screen.  In the URL text box, type in the web address in which you wish to link to.  (In our case, we would like to link to http://www.eng.umd.edu/~baz). See Figure 10. Click OK. The hyperlink is now created.

 

Figure 10: Adding the URL of a remote link

 

 

7.2  Creating a MAILTO hyperlink:

Typing in an email address automatically makes it a Hyper link.  But if you would like, you can choose another word or phrase to add an Mail To Hyperlink to.  Highlight your chosen word or phrase then right-click to select Hyperlink.   On the left hand side under Link To:  chose the E-mail address. (Figure 11).

Type in the text you want to display and the email address, and click OK.

 

Figure 11: Creating MAILTO hyperlink

 

 

Now, if users visit your web page and click on your email address, they will be able to send your email without typing your email address.

8.  Adding Images

Do one of the following two steps, 8.1 or 8.2 to place an image under your name

 

8.1 Adding an image from file:

Use your own picture by selecting [Insert | Picture |From File] (Figure 12-a).

Note:      You may add a picture directly from within a web site as follows:

Right-click on the picture, and then select Copy (Figure 12-b).

Click under Major, then right-click, and then select Paste (Figure 12-c).

 

                                                 (a)                                                   (b)                                                                       (c)

 

Figure 12: Inserting a picture from File

 

 

8.2 Adding a picture from Clip Art:

Click below where your major is listed and select [Insert|Picture|Clip Art] from the menu bar.  (Figure 13)

 

Figure 13: Loading images from Clip Art

 

The Clip art Gallery will appear in the Task Pane.  Choose any picture you would like from the Clip Art Gallery and insert it by clicking on the picture then clicking the insert button. (Figure 14)

Figure 14: Inserting/resizing a picture from Clip Art

 

(Hint:  If the picture is too large or two small, you may need to resize it using the handles on the corners of the picture.  If you hold down the shift key while dragging the handles the resize, it will proportionally resize the picture to reduce distortion.  Also, if you wish to change the alignment of the picture on the page, you may do so by highlighting the picture and selection one of the alignment buttons in the toolbar, this is done the same way that text alignment is done.  See figure 6 for details.)

 

9.  Adding Buttons

This is one of the features that FrontPage has, adding buttons to make links.

 

Below your bulleted list of favorite things to do, we are going to add three buttons that link to different search engines.  Do this by selecting Insert, then Interactive Button from the menu bar (Figure 15).

 

Figure 15: Adding buttons

 

Doing this will bring up the Interactive Buttons window.  Here, enter  Yahoo (http://www.yahoo.com). as the button text and http://www.yahoo.com as the button address.  Choose whatever kind of button color and effect you want. Then click OK.  Have a little fun!  (Figure 16)

 

Figure 16: Setting Hoover button properties

 

 

Repeat this step two more times to make buttons for Google (http://www.google.com) and AltaVista (http://www.altavista.com) See Figure 17.

 

 

Figure 17: Added three buttons

 

You may want to align these buttons. This can be done by highlighting the buttons and clicking any of the alignment buttons from the toolbar.  This works the same way as when you align text or pictures. 

10. Adding Tables

In Front Page, adding a table to the web page is as simple as in Word.

In this step, you will insert/add a table with 3 rows and 2 columns (3X2 table).

 

Do the following:

Place the cursor under the favorites and hobbies sentence.

Insert the table by selecting [Insert | Table] from the [Table] menu.

Select 3 rows and 2 columns. See Figure 18.

 

Figure 18: Adding a table (3 x 2)

 

The table will be added as shown in Figure 19.

 

Figure 19: Table added to the web page

 

10.1 Formatting Tables

You will experiment setting the table background color, border size, cell padding and spacing, and using a background picture.

 

 

10.1.1 Table Properties

Right-click anywhere in the table and select Table Properties from the pop-up menu.  Or click on the table and select Table Properties, Table from the Table menu.

The table properties will appear as in Figure 20.

 

Figure 20: Table Properties

 

Experiment with the available options in the table properties by setting:

Light and dark border colors

Background color. 

Use background picture, by checking this option, instead of a background color (optional).

Cell padding and cell spacing values, etc.

 

10.1.2 Cell Properties

The cell properties option in the pop-up menu allows various similar options in the table properties, and others.  Or you can choose [Table Properties | Cell from the Table menu]. Experiment with the various available options in the cell properties.

 

10.1.3 Cell Text

Move the list of your favorites and place it in the first column of the table by clicking and typing each item in one cell.

Delete the previous list by highlighting it and using the backspace or delete keys, or the cut option.  Add more hobbies to fill the second column (Figure 21).

 

Figure 21: Formatted table

11.  Previewing Your Page

This is the easiest step.  Now that you have created your page, you probably want to see what it would look like if it was already posted on the web.  To preview your page, simply click on the preview tab in the lower left corner (Figure 22). 

 

Figure 22: Previewing the page

 

 

Hint:  Don’t worry if your buttons show up gray instead of what you wanted them to look like.  Some of the special features in front page cannot be viewed until it is actually saved (and then posted on the web).

You may also select [File | Preview in Browser] to see how exactly the page will appear when loaded in the browser.

 

11.  Saving Your Work

To save your page, select [File|Save As] (Figure 23).

 

Save your page to the location of your choice. 

Name the file as <your-namePage>. Keep this file. You will need to use it in the next part for creating frames.

 

For example, the file in Figure 22 is called start.htm

Leave the file type as Web Pages and click OK.

 

start.htm

 

Figure 23: Saving the web page

 

 

Very Important:  Saving the file brings up a window called “Saving Embedded Files”.

To view this page in the Internet, transfer it along with the embedded files (all images and files) to a web server.

 

This step is critical to insure that all the components of your web page are saved as well.

Do not change anything in this window and click OK. See Figure 24.

 

Figure 24: Saving embedded files

 

 

YOUR PAGE HAS BEEN SAVED!


Creating Frames using Microsoft FrontPage

 

 

Procedure

1. Starting Frames Pages

Locate FrontPage and start it. Once opened, select New from the File menu.

From the Task Pane click on More Page Templates.

Click the Frames Pages tab in the New dialog box. See Figure 1.

Select the Contents layout (its style is shown in the Preview area, which is a 2-column layout).

Explore the other Frames layouts to become familiar with them.

 

Figure 1: Starting Frames Pages

 

 

2. Contents Frames

Once the contents Frame layout is selected, click OK. The new contents frame will appear as shown in Figure 2. (Hint:  Be sure that the Normal tab is active in the lower left hand corner of the window)

Figure 2: Contents Frame layout

 

We will use the left frame for hyperlinks, and the right frame for the display area.

Clicking on any link in the left frame will make its contents appear in the right frame.

In the next two steps, you will do the following:

  1. In the right frame, you will insert your web page that you created in the first Front Page lab, or your welcome.html file.
  2. In the left frame, you will create a new web page that includes hyperlinks.

 

3. Setting an initial page:

Setting an initial page refers to inserting an existing web page.

a)       Click the [Set Initial Page] button in the right frame.

b)       The select File dialog box will appear as in Figure 3.

 

Figure 3: Inserting an existing (initial) page

As shown in Figure 3:

c)       Insert your web page from the previous Front Page lab, your welcome.htm web page, or any text page you choose (not a frame layout), by looking for it in the Look in box.

d)      Once the file is located, select it and Click OK. The file will automatically appear in the right frame (Figure 4).

 

Figure 4: Initial page inserted

 

(Hint: If you can’t find a web page, you may choose the New Page button, instead of the Set Initial Page button, and proceed in creating the page from scratch. The next step will show how to use this option).

 

4. Creating a New Page

In this step, you will create a new page that includes an image. You will also include a few hyperlinks:

a) Click on the New Page button in the left frame.

b) A new blank page in the left frame will appear as in Figure 5.

 

Figure 5: Creating a new page in the left frame

(Hint: You may change the width of the left frame by moving the arrow over the border column between the left and right frames, and then dragging to the desired width).

 

c)       Load an image of your choice at the top of the left frame.

The image can be inserted from a file or from the ClipArt.

 

d)      Include hyperlinks to:

 

-          Your home page

-          The King Abdulaziz University

 

                        Feel free to add any links in addition or instead of these links.

 

Each time you enter the name of the link, highlight it, right-click, and then enter the http URL and click OK.  See Figure 6.

 

Figure 6: Inserting an image and hyperlinks

 

 

5.  Previewing Your Page

Now that you have the image and the hyperlinks completed in the left frame, and your page already in the right frame, it is time to see what it would look like if it was already posted on the web. 

 

To preview your page, click on the preview tab in the lower left corner (Figure 7). 

You may also select [File | Preview in Browser] to see how exactly the page will appear when loaded in the browser.

Figure 7: Previewing the frames

 

6.  Saving Your Work

To save your page, select [File|Save or Save As].

 

You will be prompted to save each frame with its own name. See Figure 8.

Name the main frames file as  index.htm

Name the left frame as left.htm

The right frame is already named start.htm, so there is no need to name, unless you have created one from scratch.

Save your frames page to the location of your choice.

 

Figure 8: Saving the frames

 

7. Viewing the Frames in the Browser

After saving the frames, Front Page will allow you to view the frames within a web browser.

 

a)    Click on the hyperlinks that you just created, and verify that they are working correctly.

b)    Click on the University of Pittsburgh link. It should appear on the right frame (Figure 9).

c)     Capture the window of the browser and print a copy of it

         (refer to activity sheet item #1).

 

Figure 9: Viewing frames in the web browser

 

d)    In the browser, select [View | Source] to view the source code of the frames (Figure 10).

 

Figure 10: Viewing the source code in the web browser

 

You are done. To use this frame layout web page in the Internet, transfer all HTML files and images to a server that is connected to the Internet  (i.e. to your html directory on the KAUNET at the King Abdulaziz University, or any authorized Web server).