Fall 2005
Creating an Academic Web Site
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:
§
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:
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
You
may also select [File | Preview in Browser] to see how exactly
the page will appear when loaded in the browser.
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.