KURSUS ASAS MEMBINA WEBSITE

Jabatan Teknologi Sains Komputer dan Makl umat

PENGENALAN
KEPADA
MICROSOFT FRONTPAGES

Disediakan Oleh:

Pensyarah MOHD KHAIRULNIZAM BIN MOHD SALLEH

Jawatan Pen.Pensyarah Kanan J36
Teknologi Maklumat (Rangkaian)

JTSKM ,Institut Latihan Perindustrian Mersing

Mersing, Johor
 DAFTAR ISI

INTRODUCTION TO FRO NTPAGES 2

FRONTPAGES EDITOR/EXPLORE TOOLBARS 3

IMPORT WEB WIZARD

IMPORT AN EXISTING WEB 4

WEB STRUCTURE

COMPLETED FOLDERS VIEW IN THE EXPLORER WINDOW 7

COMPLETED NAVIGATION VIEW IN THE EXPLORERS WINDOW 8
WORKING IN NAVIGATION VIEW 9

CREATING A TEMPLATE

OPEN FRONTPAGE EDITOR 11

INSERTING AN IMAGE 12
INSERTING A HORIZONTAL LINE 12
CREATING AN IMAGE MAP 13

CREATING A TEMPLATE

ADDING LINKS 15
SAVE TEMPLATE.HTML AS A FRONTPAGE TEMPLATE 16

CREATING YOUR HOME PAGE

INSERT YOUR TEMPLATE 17

INSERTING A TABLE 17
INSERTING IMAGES INTO YOUR TABLE 18
ADDING LINKS TO IMAGES IN A TABLE 19
USE SKILLS YOU HAVE ALREADY OBTAINED IN FRONTPAGE98 20
CREATING A LIST 22
SAVE YOUR HOME PAGE 22

WEB CLASS PAGE -WEBCLASS.HTML 23

UNIT2 PAGE - UNIT2.HTML 24
HOW TO PAGE - HOWTO.HTML 25
HYPERLINK STATUS VIEW 26
HYPERLINKS VIEW 27
 User Services

2
User Services

3
 Import Web Wizard
User Services
Import an Existing Web

Since we have already created f iles and folders we will convert these into a FrontPage web. We will
useFrontPages Import an Existing Webin theNew FrontPage Webdialogue box. If we were
starting from scratch, without any web pages, then we would have chosen to create our FrontPa ge
web from theEmpty Web Template in theNew FrontPage Webdialogue box. Once a
FrontPage web is created we can add new files and folders and FrontPage features will be sup -
ported.
1. Start Microsoft FrontPage
98. In the Getting Started
dialogue box, click onCreate
a New Front Page Web.
Click OK .

2. In Step 1 chooseImport an Existing

Web.

3. In Step 2 type in the title,Class Web

Site.

4. Click Change to specify the folder

you will convert into a FrontPage
Web. Insert the name of the folder
where you have been saving your files
fot the last 3 weeks,J:\Temp\Build
Web site\Fall 00 participants\Your
Last Name. Be sure to have the
folders and file names spelled exactly
as shown. If a folder name is spelled
incorrectly, it will ask to create a new
web instead of converting the folder
you currently have into one. Click
OK ,OK.

4
 Import Web Wizard
User Services
5. Yes.
The following pop-up box will appear. Choose

6. In theImport Web Wizard choose

From a source directoryof files on a
local computer or network. Browse to
the location where you have been saving
your files for the last several weeks,
“J:\Temp\Build Web site\Fall 00
participants\Your Last Name” Click OK.
Click on Includesubfolders. Click on
Next.

7. This screen will show you all the files that will be imported. You could exclude files by clicking
on a file and then exclude as in the picture be low. However, since you may want these files for
your personal use in the future, we will just click on Next. Files can always be deleted at a
later time.

5
 Import Web Wizard
User Services

8. This is the last screen of the

Import Web Wizard. Click
Finish, for FrontPage 98 to
set your files up in a web structure.

9. Since we are creating

our web site at the same
location as our present
files, we recive the
following question.
Click on Yes to All.
Your web site will now
be created.

6
 Web Structure
User Services
Completed Folders View in the Explorer Window

There might be sometime in the future when you will need new folders t o hold information for
the various units in your class. Those can be easily created by clicking on Folder view, and
then from the menu File | New | Folder. For now, we have sufficient folders to work with.

All Files View in the Explorer Window

The All Files view, simply lists every file in your web site.

7
 Web Structure
User Services

Completed Navigation View in the Explorers Window

Navigation view shows a grap hical representation of your web site. Here we have
created a graphical representation of the web site for our class with the pages we have
created using HTML or FrontPage 98. This is a very useful feature in letting us visualize
the layout of our web site. If you were using shared borders and navigation bars, then
if you rearranged your pages, the navigation bars would reflect this. If you move files
into different folders, FrontPage will automatically update the links.

8
 Web Structure
User Services

Working in Navigation View

1. First we create our Home Page graphic.

Click on the New Pageicon. Three
web pages will link directly from the
Home Page. We have already created
the instuctors page. Drag the instruc -
tors page, instructors.html, from the
bottom pane to the top pane ofNaviga-
tion view so it becomes a child of the
Home Page graphic. When the next pop -
up wndow asks: Do you want FrontPage
to create navigation bars linking your
pages together? Click onNo.

2. Click once on theHome Page

graphic. Click on New Pageicon.
A new page graphic is created.
Right clickon the new graphic,
click Rename andrenameNew
Page1 toWeb Class . Click on the
Home Pagegraphic. Click on
New Page icon. Another new page
graphic is created.Rightclick on
the new graphic, click Rename and
rename New Page2 to How To .
The name on the graphic is also, the
title for the page.

9
 Web Structure
User Services

3. Click on Web Class. Click

on New Page icon. Rename
the new graphicUnit1. Click
on Web Class. Click on
NewPage icon. Rename
the new graphicUnit2. Click
on View | Refresh.

4. Rename the following files in the lower pane of Navigation view so they all have thehtml
same
ending. An html ending for web pages written in hypertext markup language is the standard on
the web and will help us keep track of these particular files.
howto.htm -> howto.html
index.htm -> index.html
webclass.htm -> webclass.html
unit1.htm -> unit1.html
unit2.htm -> unit2.html

5. Dragthe filesunit2outline.htm andMSU101Unit2.pdf in the lower pane into the

MSU101Unit2 folder. So we can keep all our unit 2 material together.

Note: MSU101Unit2.pdf represents the pdf you made from PowerPoint and
unit2outline.htm represents the file from exporting PowerPoint to Word and saving as
HTML. You may also have given your Unit2 folder a different name.

Now the structure of our web has been created. We can always add to it or re -arrange it.
Next, we will create individual pages in the FrontPage Editor.

10
 Creating a Template
User Services

Open FrontPage Editor

From the Explorer window click on theShow FrontPage Editoricon. We will create a
template that contains the top and bottom portions of our web page. We can reus e this on
each of our web pages.

Save this page so it becomes part of your web. Then images and files you insert into it will be in
relation to your web structure. Click onFile | Save As
. In theSave Aswindow, for the URL
type in template.html. Click OK .

This is what our template will look like when it is finished. Yours may look slightly
different, if it is tailored for your class and department.

11
 Creating a Template
User Services
Inserting an Image

1. Click on theInsert Image icon

on the FrontPage icon bar.
When theImage dialogue box
opens, chooseyour depart-
ment image. Click OK .
Center it by clicking on the
Center icon on the formatting
toolbar.

Click on the Enter key several

times to create white space.

Inserting a Horizontal Line

1.
Click on the menu
item Insert | Hori-
zontal Line.

2. Right click on the line

and chooseHorizon-
tal Line Properties.

12
 Creating a Template
User Services
3. Change the width to
60. Click OK .
Click below the
horizontal line.

Creating an Image Map

1. Click on theInsert Image icon

on the FrontPage icon bar.
When theImage dialogue box
opens, choosebottombar.jpg.
Click OK . Center it by clicking
on theCenter icon on the
formatting toolbar.

2. Click on the image so you

see the selection handles
around it. Theimage
toolbar on the bottom of the
page becomes highlighted
and ready to use.

3. Select ashapethat represents a

hotspot- rectangular, circle or multisided polygon.
Choose the rectangle.

4. Use your mouse to

draw a hotspot on the
logo Mississippi
State. The Create
Hyperlink dialogue
box appears.

13
 Creating a Template
User Services

5. Fill in the URL

http://www.msstate.edu
Click OK

6. Repeat steps 3. and 4.

for Class and Dept.
However, for class
URL click on
webclass.html. Click
OK. For dept URL
type in your department
URL , such as for ITS it
is http://
www.its.msstate.edu.
Click OK.

7. Repeat 3. and 4. forEmail . For Email click on Make a hyperlink that sendsE -mail.
Type in yourE-mail address. Click OK . Click OK again. Click off the Logo and click
the Enter key.

14
 Creating a Template
User Services

Adding Links

1. Type in the following text:

Mississippi State University || Title for Your Web Site Class

Your Department || Send Email to Us

2. Be sure to click onShift | Enter to put a break between the lines. Highlight Mississippi
State University.

3. Click on theCreate or Edit

Hyperlink icon on the
FrontPage icon bar. The Edit
Hyperlink dialogue box will
open. In the URL box type in:
http://www.msstate.edu.
Click OK

4. Highlight Title for Your Web Site Class

. Click on theCreate or Edit Hyperlink
icon. In the URL box type inwebclass.html. Click OK .

5. Highlight Your Department. Click on theCreate or Edit Hyperlink icon. In the

URL box type in your department’s URL. ClickOK .

6. Highlight Email. Click on theCreate or Edit Hyperlink icon. Click onMake a

hyperlink that sends E-mail . Fill in your E-mail address. ClickOk. Click OK .

15
 Creating a Template
User Services
Save template.html as a FrontPage Template

1. Click on File | Save As. In

the Save Aswindow, click on
the buttonAs Template. Fill
in, the Save As Template
dialogue box., and clickOK .
Click OK . Click OK to save
embedded files if asked. We
have saved it as a file for ease
of use today. Saving it as a
template will include it into
FrontPages predefined tem -
plate area.

Return to Explorer Window

1. Return to the
Explorer Window,
Navigation View.

2. Double click on the

Home Page Icon.

16
 Creating Your Home Page
User Services
Insert Your Template
Click on Insert | File. Navigate to your last name folder. Choose template.html. Click on
Open. Place the cursor after your department logo.

Inserting a Table
1. Click on the Table |Insert Table

2. In theInsert Table dialogue box,

for Rows choose 1. For Col-
umnschoose3. For alignment
choosecenter. LeaveSpecify
Width unchecked. ClickOK .

3. A small table will be inserted

onto your page.

17
 Creating Your Home Page
User Services
Inserting Images into Your Table
4. Click on theInsert
Image icon. Choose
instructors.jpg. Click on
OK .

5. Click in the 2nd cell. Click on theInsert Image icon. Choosemsuclass.jpg. Click OK .

6. Click in the 3rd cell. Click on theInsert Image icon. Choosetutorials.jif. Click OK .

7. Your web page should now look similar to the following.

18
 Creating Your Home Page
User Services
Adding Links to Images in a Table

1. Click on the 1st picture. Click on theCreate or Edit Hyperlink icon. Click on
instructors.htmlto place it into the URL box. ClickOK.

2. Click on the2nd picture. Click on theCreate or Edit Hyperlink icon. Click on

webclass.htmlto place it into the URL box. ClickOK .

3. Click on the3rd picture. Click on theCreate or Edit Hyperlink icon. Click on

howto.htmlto place it into the URL box. ClickOK .

19
 Creating Your Home Page
User Services
Use Skills You Have Already Obtained in FrontPage98
The next part will look similar to the following.

1. Type in the following line below the images you just inserted, center it withCenter
the icon on the
Create or Edit Hyperlink icon on the FrontPage
formatting toolbar and create links with the
icon toolbar.

Instructors || Your Class Tit le || How To & References

The links are as follow:

Instructors - instructors.html
Build Your Own Web Site -webclass.html
How to & References -howto.html

2. Type in the following lines. Center them.

Butler Computer Lab Hours

Library Computer Lab Hours

Link them each to http://www.its.msstate.edu/pub_labs.html

20
 Creating Your Home Page
User Services

The next part will look similar to the following

3. Click enter 2 times.

4. Type inYour Class Title. Highlight it, increase its size with theIncrease Text Size
icon. Click onShift | Enter, and type in a paragraph describing your class. Left justify
title and description.

5. Click on Enter 2 times. Type in the following: Email Instructors

Highlight Email Instructors. Click on theIncrease Text Sizeicon. Click on
Shift | Enterand type in the following:

For more information about the instructors, classes they teach, and
student email addresses, go to the “Instructors” page.

6. Highlight the previous sentence and click on the

Italic icon on the formatting
toolbar.

7. Highlight only “Instructors” and click on theEdit or Hyperlink icon and

link it to the instructors page, instructors.html.

21
 Creating Your Home Page
User Services
Creating a List
1. Type in andhighlight:
Instructor name1- instrutor1 email address
Click on the Change Stylebox and chooseBulleted List.

2. Click off the highlight.

Click the Enter key and enter
Instructor name 2 -instructor email address2

3. If you have more items in your list, continue entering

items. Click an extraEnter to stop adding items to
the list.

4. Alternately, you can click on theNumbered Listor

Bulleted Listicons after highlighting the items.

5. Also, you canright click in any list,

chooseList Properties, and change the Bullet style.
Your list should look similar to the following:

Save Your Home Page

1. Click on File | Save.

Create Your Web Class Page - webclass.html

The next 3 pages you create, will allow you to pra ctice using the features of
FrontPage you have already learned. First an example page is shown. Change the
text to be more appropriate for your class. Next is a listing of the FrontPage
commands used to create the page.

Return to theExplorer window and click onNavigation View. Double-click on the

Web Class graphic . Your finished Webclass page will look similar to the following
page in this handout.

22
 Web Class Page -webclass.html
User Services

1. Click on Insert |File. Insert the file template.html which is in your last name
folder. Type in your heading and highlight it. Center it withCenter
the icon if
needed. Click on theChange Styledrop down box. Choose aHeading 2
style.

2. Click on Table | Insert. Create a 1 x 1 cell table. Insert your Syllabus and
Unit titles into it.

3. Highlight Syllabus, link it toSyllabus.pdf Highlight Unit 2 - Diffusion of

Agricultural Innovations. Link it to yourunit2.html page.

4. Insert the file pdf.gif (with the Insert icon button), before the word Syllabus.

5. Click on File | Save. Return to the Explorer Window and click on the
Unit2
graphic.

23
 Unit2 Page - unit2.html
User Services

1. Click on Insert |File. Insert the file template.html.

2. Center icon if needed.

Type in your heading and highlight it. Center it with the
Click on the Change Styledrop down box. Choose aHeading 2 style.

3. Click on Table | Insert. Create a 1 x 1 table. Insert the image

html.gif.
Type inPowerPoint Slide Presentation . Link it to
MSU101Unit2\index.htmor the index.htm file in your Unit2 folder.

4. PowerPoint Slide Presentation

Insert thepdf.gif on the next line. Type in
Outline and link it toMSU101Unit2\MSU101Unit2.pdf or your similar file.

5. html.gif. Type inHTML Outline View and link

On the next line, insert the
it to MSU101Unit2\unit2outline.htmor your similar file.

6. Return to theExplorer Window and click on theHow Tographic.

24
 How To Page - howto.html
User Services

1. Repeat as on previous pages, but add your personal How To &

References

2. Click on File | Save All.

3. Hyperlinks view and

Return to the Explorer window and look at
Hyperlink Status view. Be sure to look atThemes view and
Tasks view also.

4. In next weeks workshop you will learn how to upload your web.

25
 Hyperlink Status View
User Services
Tools |
Return to the Explorer window and click on Hyperlink Status view. Click on
Verify Hyperlinks. Click onOK in the Verify Hyperlinks window to check all your
links.

Hyperlink Status
View

26
 Hyperlinks View
User Services

Hyperlinks View

Represents a graphical representation of how each file in your web is linked to

each other. .

Be sure all your pages are saved and close your web.

27