8/12/2019 Design a Webpage Using FrontPage 2003

http://slidepdf.com/reader/full/design-a-webpage-using-frontpage-2003 1/18

Welcome to the online tutorial for using Microsoft's FrontPage 2003 to create a personalized

webpage!

In the ten eas steps below ou will become familiar with the process of using FrontPage an

"#M$ editor that lets ou design webpages easil and %uic&l with a great deal of creatie control(

)n*o!

 

To be able to complete this tutorial you will need the following:

a computer with Internet access and FrontPage 2003

Prior to beginning this tutorial you should be able to perform the following basic tasks on your computer:

Be able to turn on the computer

Be aware of basic naigation using the keyboard and mouse

!now the meanings of some basic computer terms"ocate #$tart# on the desktop and be able to naigate to the desktop

Be able to open programs by using the mouse and clicking

Be able to use a search engine such as %oogle

Be able to select te&t and graphics by highlighting

 

+tep ,ne 'reate and name a folder on the desktop

+tep #wo (pen FrontPage and create a new blank page

+tep #hree )ename the webpage and sae it in a folder on the desktop

+tep Four 'hoosing the background of the page and iew in a browser

+tep Fie Inserting and modifying a table

+tep +i- *odifying cells

+tep +een *odifying font

+tep )ight Inserting and modifying graphics

+tep .ine 'reating hyperlinks

+tep #en 'reate the page

Before you begin+ two words of adice that cannot be stated often enough while doing a computer pro,ect---

.ord (ne: +/) )/1$ +/) ,F#). to aoid losing our page and its reisions!!!

.ord Two: If you do not like the changes+ #'trl# and #/# simultaneously to undo or---

  on the toolbar+ go to #dit# 1 #ndo# to undo the changes

 

ow+ time to begin4

 

+tep ,ne

In this step you will use the right mouse button to create a new folder on your 5esktop and you will thenrename the folder to reflect the pro,ect on which you are working-

1. )ight click anywhere on the 5esktop to open the menu

ign a webpage using FrontPage 2003 http://viking.coe.uh.edu/~smarsh/p2003/

1! "/3/2012 #:$1 P%

8/12/2019 Design a Webpage Using FrontPage 2003

http://slidepdf.com/reader/full/design-a-webpage-using-frontpage-2003 2/18

 

2. %o to #ew# 1 #Folder# to create a new folder on the desktop and click on it

 

3. )ight click on the folder and rename the folder #biography# to reflect the pro,ect on which you are working

 

&. From this point on+ sae eerything you create for this pro,ect in this folder

top 6 steps

+tep #wo

In this step you will use the #$tart# button to open FrontPage and create a new blank page-

7- 'lick on the #$tart# button in the lower left of your computer screen

 

2- %o to #8ll Programs# 1 #*icrosoft (ffice# 1 #*icrosoft (ffice FrontPage 2003# and click

 

3- (nce FrontPage opens+ click on the #ew Page# icon to create a new page in FrontPage

 

9- The new page should hae a tab that has the heading #newpage7-htm#

ign a webpage using FrontPage 2003 http://viking.coe.uh.edu/~smarsh/p2003/

1! "/3/2012 #:$1 P%

8/12/2019 Design a Webpage Using FrontPage 2003

http://slidepdf.com/reader/full/design-a-webpage-using-frontpage-2003 3/18

 

top 6 steps

+tep #hree

In this step you will rename the new blank page you created in FrontPage and sae it in the folder you haecreated on the 5esktop-

7- %o to #File# 1 #$ae 8s...' and click to open the window

 

2- se the pulldown menu to naigate to your #biography# folder on your 5esktop and click on it

 

3- .hen the window pops up+ select the #'hange title---# button and title your page whateer you want

  ;I titled mine #$abrina#s 8utobiography Page#<

  'lick on the #File name:# window and name your page #bio-htm#

  'lick on the #$ae# button

ign a webpage using FrontPage 2003 http://viking.coe.uh.edu/~smarsh/p2003/

1! "/3/2012 #:$1 P%

8/12/2019 Design a Webpage Using FrontPage 2003

http://slidepdf.com/reader/full/design-a-webpage-using-frontpage-2003 4/18

 

top 6 steps

+tep Four

In this step you will choose the background of your page and then iew the page in a browser window-

7- )ight click anywhere on the #bio-htm# page to pull up the menu

2- %o to #Page Properties---# and click

 

3- From the #Page Properties# menu+ naigate to the #Formatting# tab and click

9- 'lick on the pulldown menu on #Background# and then click on a color you want for the background

  Then click on #(!#

ign a webpage using FrontPage 2003 http://viking.coe.uh.edu/~smarsh/p2003/

1! "/3/2012 #:$1 P%

8/12/2019 Design a Webpage Using FrontPage 2003

http://slidepdf.com/reader/full/design-a-webpage-using-frontpage-2003 5/18

 

=- The entire #bio-htm# page changes to that color

>- %o to #File# 1 #$ae# to sae the changes to your folder automatically

 

?- 'lick the #Preiew in Browser# icon on the toolbar to open a new window

 

@- This will allow you to iew what your page will look like on the Internet

  se this option often to check your progress as you build your site

 

ign a webpage using FrontPage 2003 http://viking.coe.uh.edu/~smarsh/p2003/

1! "/3/2012 #:$1 P%

8/12/2019 Design a Webpage Using FrontPage 2003

http://slidepdf.com/reader/full/design-a-webpage-using-frontpage-2003 6/18

top 6 steps

+tep Fie

In this step you will choose a table siAe and modify the properties of the table-

7- 'lick on the #Insert Table# icon in the toolbar

 

2- ighlight the number of cells you want to appear in your table and click

 

3- )ight click on your new table to open the menu and click on #Table Properties#

 

9- The #Table Properties# window allows you to change the siAe+ alignment+ width+ cell spacing+ border siAe

and

  color+ and background color of the table- &periment to get the look you want by clicking #(!#-

 

$ome things to note:

  keep width of your table below @00 pi&els to aoid horiAontal scrolling on a monitor with @00 & >00 resolution

  #'ell padding# and #'ell spacing# refer to the distance ;in pi&els< te&t and images will appear from the border

cell paddingCspacing of one--- cell paddingCspacing of fie---

ign a webpage using FrontPage 2003 http://viking.coe.uh.edu/~smarsh/p2003/

1! "/3/2012 #:$1 P%

8/12/2019 Design a Webpage Using FrontPage 2003

http://slidepdf.com/reader/full/design-a-webpage-using-frontpage-2003 7/18

  a border of Aero will show a dashed line on the #$plit# iew but no border on the #Preiew# iew

border of Aero--- border of one--- border of fie---

 

ere is a sample layout---

 

top 6 steps

+tep +i-

In this step+ you will learn how to modify indiidual cells in your table-

7- )ight click on the cell you want to modify and on the menu click on #'ell Properties#

ign a webpage using FrontPage 2003 http://viking.coe.uh.edu/~smarsh/p2003/

1! "/3/2012 #:$1 P%

8/12/2019 Design a Webpage Using FrontPage 2003

http://slidepdf.com/reader/full/design-a-webpage-using-frontpage-2003 8/18

 

2- The #'ell Properties# window allows you to modify many parts of indiidual cells-  se the pulldown menus to e&periment with the look of the cells

  8 thing to note---

  #8lignment# determines where in the cell font and graphics will appear

  ere is an e&ample of a layout---

 

3- Dou may also merge the cell by highlighting the cells you want to merge into one

  )ight click to bring up the #*erge 'ells# command and select it

ign a webpage using FrontPage 2003 http://viking.coe.uh.edu/~smarsh/p2003/

1! "/3/2012 #:$1 P%

8/12/2019 Design a Webpage Using FrontPage 2003

http://slidepdf.com/reader/full/design-a-webpage-using-frontpage-2003 9/18

 

9- (r split an indiidual cell into rows and columns by right clicking on the cell to bring up the menu

  $elect #$plit 'ells---#

 

and then choose whether you want #rows# or #columns# and the number

 

top 6 steps

+tep +een

In this step you will learn how to modify the font-

7- ighlight the font you want to change

ign a webpage using FrontPage 2003 http://viking.coe.uh.edu/~smarsh/p2003/

1! "/3/2012 #:$1 P%

8/12/2019 Design a Webpage Using FrontPage 2003

http://slidepdf.com/reader/full/design-a-webpage-using-frontpage-2003 10/18

 

2- se any combination of the characteristics below

  a- 'hange the font type by clicking on the pulldown arrow ne&t to the font type

 

b- 'hange the font siAe by either clicking on the pulldown arrow to select a number

 

or clicking on the #8# icons on the toolbar to make the font larger or smaller

 

c- 'hange the font color by clicking on the #Font 'olor# selector icon and choosing your color

ign a webpage using FrontPage 2003 http://viking.coe.uh.edu/~smarsh/p2003/

1! "/3/2012 #:$1 P%

8/12/2019 Design a Webpage Using FrontPage 2003

http://slidepdf.com/reader/full/design-a-webpage-using-frontpage-2003 11/18

 

top 6 steps

+tep )ight

In this step you will insert and modify graphics you find on %oogle-

.arning: *any sites on the Internet contain copyrighted graphics+ so try to choose your images from sites

that are copyright free-

7- )ight click on the image you want to insert into your document to pull up the menu

  'lick #$ae Picture 8s---#

 

2- $ae the picture in your #biography# folder on your desktop

ign a webpage using FrontPage 2003 http://viking.coe.uh.edu/~smarsh/p2003/

1! "/3/2012 #:$1 P%

8/12/2019 Design a Webpage Using FrontPage 2003

http://slidepdf.com/reader/full/design-a-webpage-using-frontpage-2003 12/18

 

3- 'lick on the location you want the graphic on your page

  %o to #Insert# 1 #Picture# 1 #From File---#

 

9- aigate to your picture and select it

  'lick #Insert#

ign a webpage using FrontPage 2003 http://viking.coe.uh.edu/~smarsh/p2003/

1! "/3/2012 #:$1 P%

8/12/2019 Design a Webpage Using FrontPage 2003

http://slidepdf.com/reader/full/design-a-webpage-using-frontpage-2003 13/18

 

=- 8n e&ample of the finished result

 

>- Dou may modify the picture by clicking on it and using the arious tools on the #Picture Toolbar#

 

?- 8n e&ample of the finished result

ign a webpage using FrontPage 2003 http://viking.coe.uh.edu/~smarsh/p2003/

1! "/3/2012 #:$1 P%

8/12/2019 Design a Webpage Using FrontPage 2003

http://slidepdf.com/reader/full/design-a-webpage-using-frontpage-2003 14/18

 

top 6 steps

+tep .ine

In this step you will create hyperlinks-

There are three types of hyperlinks:

  links to outside websites

  links to other pages in your website

  links to places within the same document

#o lin& to an outside website opens in a new window4

7- ighlight the te&t or graphic you want to link to an outside site

 

2- 'lick on the #yperlink# icon on the toolbar to open the #Insert yperlink# window

 

3- $elect the #Target Frame---# button

  $elect #ew .indow#

  'lick #(!#

ign a webpage using FrontPage 2003 http://viking.coe.uh.edu/~smarsh/p2003/

1! "/3/2012 #:$1 P%

8/12/2019 Design a Webpage Using FrontPage 2003

http://slidepdf.com/reader/full/design-a-webpage-using-frontpage-2003 15/18

 

3- In the #Insert yperlink# window+ make sure #&isting File or .eb Page# is selected

  Type in the full )" of the outside site in the #8ddress# window  'lick #(!#

 

9- The word is now linked

$in& to other pages in our website

7- %o to #File# 1 #ew---# and select #Blank page# from the menu that appears

 

2- se the steps outlined in $tep 3 to name and sae the page

3- ighlight the te&t you want to link to the new page

ign a webpage using FrontPage 2003 http://viking.coe.uh.edu/~smarsh/p2003/

1! "/3/2012 #:$1 P%

8/12/2019 Design a Webpage Using FrontPage 2003

http://slidepdf.com/reader/full/design-a-webpage-using-frontpage-2003 16/18

 

9- 'lick on the #yperlink# icon on the toolbar

 

=- *ake sure you select the #&isting File or .eb Page# icon in the #yperlink# window

  aigate to your #biography# folder on the desktop and select the proper -htm page

  5o not select #Target Frame---# 1 #ew .indow# as you did in the preious e&ample

  'lick #(!#

 

>- The word is now linked

$in&ing to a place within the same document

7- 'lick the cursor to the place in your document to which ou want to naigate

2- %o to #Insert# 1 #Bookmark# and click

ign a webpage using FrontPage 2003 http://viking.coe.uh.edu/~smarsh/p2003/

1! "/3/2012 #:$1 P%

8/12/2019 Design a Webpage Using FrontPage 2003

http://slidepdf.com/reader/full/design-a-webpage-using-frontpage-2003 17/18

 

3- 8 #Bookmark# window will appear+ name your bookmark

  ;In this case+ I want to naigate from the bottom to the top of my page+ so I named mine #top#<

  'lick #(!#

 

9- 8 tiny #flag# appears+ representing a bookmark

  ;This flag will not appear when iewed in the browser<

 

=- ighlight the te&t or image in your page from which ou wish to naigate

  ;In this case+ I highlighted #top# since I am wanting to naigate from bottom to top<

 

>- 'lick on the #yperlink# icon and choose #Place in This 5ocument# and the name of the bookmark

  'lick #(!#

ign a webpage using FrontPage 2003 http://viking.coe.uh.edu/~smarsh/p2003/

1! "/3/2012 #:$1 P%

8/12/2019 Design a Webpage Using FrontPage 2003

http://slidepdf.com/reader/full/design-a-webpage-using-frontpage-2003 18/18

 

?- The area you highlighted is now linked to the bookmark

  Dou may now #,ump# from one area to another within the same page

top 6 steps

+tep #en

In this final step you will assemble a webpage using all you hae learned-

Time to put your FrontPage skills to work4

'reate an autobiographical webpage with the components listed below:

at least one table that has been modified to reflect your personal choice of alignment and color

at least two e&amples of modified fonts

at least two graphics that hae been saed and modified by using the picture toolbar

at least two hyperlinks that naigate within the webpageat least two hyperlinks that link to outside sites and open in a new window

%ood luck and hae fun4

If you need help getting started+ here is an autobiographical template I created using the skills you hae

learned in this tutorial--- click here to iew the template-

top 6 steps

3".)pg'*+,

ign a webpage using FrontPage 2003 http://viking.coe.uh.edu/~smarsh/p2003/