E-Portfolios – Creating a

FrontPage Template
(By Ivan Lomax- ICT Advisor, School Support Services
Gisborne)

INTRODUCTION: Before starting you need to decide the number of

pages required and what subject areas will head each page.
You may want the children to have a Literacy page and then a further
break down of that page into sub pages of Writing, Reading,
Handwriting, Visual Language and any other areas you decide upon.
This tutorial is used to create a basic E-Portfolio template. Extras and
individual preferences can be added when students are familiar with
FrontPage.

1. Create a new folder inside the “My webs” folder which should be
found inside “My Documents” – Label that folder “Students
Name E Portfolio”.

2. Start FrontPage, if FrontPage does not open with a “New Page”

click on the new page icon.

New page icon.

3. Insert a 3 row and 3 column table.

Table – Insert – Table

Change to 3 rows
and 3 columns then
click ok.
4. Click inside the top left hand cell and drag your cursor across to
highlight the first row. (If your table toolbar does not show when
clicking inside the table – right click in the vacant gray or blue
area of your toolbars and select tables.)

Click in this
blank area and
the toolbars
option will
show, and then
click tables.

Merge cells
icon.
5. Click on “Merge cells” which will then turn the top row into one
cell.

6. Click back in that top row, align centre and insert word art with
the students name.

7. File – Save
The first page of the portfolio must be saved with the file
name “index” inside the folder we created in step 1. (Please note:
all file names in FrontPage must be lowercase with no spaces or
symbols.) Once saved the page name will change from “new page”
to “index”.

File name for the

first page is
always index.

8. Click in the middle cell of the second row and insert a picture.
Insert – Picture – From File

9. After inserting the picture you need to save the picture as a

separate file. Click on the save icon (or Ctrl – S) and the “Save
embedded File” box will appear. It is important that you rename
the file with all lowercase letters and no spaces. Numbers are ok.
The file extension (ie: JPEG or GIF etc) are alright to leave as
capitals.
Save embedded file
– rename with
lower case and it
will automatically
save in the correct
folder. Click OK.

10. Type in the curriculum areas that you want your students to
have in their portfolio.

11.To have a coloured background click

Format – Background – then the background
dropdown to select colour.
12.Merge the cells of the bottom row as described in step 5 and we
will add a scrolling banner to the bottom row.
Once the cell is merged click inside it then:
Insert – Web Component – Marquee – Finish
In the following box type in the message that you want to see
scrolling across your home page of your portfolio.
Type message in
here. Go to style
– format – font
to change font
size, colour, and
type.

13. Your marquee will appear in the bottom row. (Important Note:
FrontPage is only for creating your website/portfolio)
To see how it will actually work you need to go to “Preview in
Browser” and view it, as if on the Internet.
Remember to go back to FrontPage to continue construction.

Click “Preview in
Browser” icon to view
the moving Marquee.
14. You would have noticed that the table lines are showing when
we go to “Preview in Browser”. To hide the lines in the browser,
highlight the complete table by clicking and dragging from the top
left cell to the bottom right cell. Then click the “Outside Border”
icon followed by “No Borders”. When clicking off the highlight you
will notice that the lines are now dots and if you “Preview in
Browser” there will be no table lines.

Click on “Outside
Border” drop down
then click “No
Borders”

15.Click on the top row to the left of “Ivan’s portfolio”.

We are now going to insert a blank row above the title.
Table – Insert – Rows or Columns
 Click on 1 Row –
Above selection
then click OK.

16. Inside the blank top row type in all of the curriculum areas with
the addition of a home heading. Click 4 or 5 spaces between
each curriculum area as in the diagram below.
Write your
curriculum
areas in here.

17. Create a new page for each curriculum area that you have
listed.
The new pages will have the file name of the relevant
curriculum area, ie: maths, reading etc. (Remember to make the file
names all lower case without spaces or symbols.) Save each new
page in the same manner as step 7 above.
Your FrontPage work area will now look like this:

Note all the new pages.

Once you have saved
them in the folder we
created they will all have
the correct names.

18. Insert a table into each new page as we did for the index
(Home) page.
Also give each page a background colour and hide the outside
borders of the tables in the same manner as earlier steps for the
index page.
 Give each curriculum page a title relevant to that curriculum area
as below:

19. Follow step 15 above for all of the new curriculum pages so we
will have a blank row above the titles.

Note the blank

row above the
page title.

20. The next step is to hyperlink each page so we can navigate

around the website.
Return to the index page and highlight the word “Home” in the
top row.
Right click on the highlighted word “Home” and click on
“Hyperlink” on the drop down list.
 Click on
Hyperlink.

21. The “Insert Hyperlink” box will appear. Scroll down to the
bottom of the box and select the index file that appears. Normally it
will have a FrontPage icon however on some of the FrontPage
software it will only appear as an Internet Explorer icon. Choose the
FrontPage icon file if it is available, if not choose the Internet
Explorer icon. (Note: you may have to choose the folder that we
created in step one, if it does not show at the top of the box.)

Make sure you

have selected the
correct folder and
then click on the
index file followed
by OK.

22.The word “Home” will now change to a blue colour with an

underline. This indicates that it has been hyperlinked.
Continue with each word, hyperlinking it to the relevant file, eg:
maths to maths, P.E. to pe etc. Make sure that the links go to the
correct file or they will direct you to the wrong page. Use
“Preview in Browser” to check if your links are working correctly.

Each heading
now shows a
hyperlink.
23. Once the index (your first – title page) hyperlinks have been
completed you then need to highlight all of the words as shown
below. Then right click on the highlight and use the “Copy”
function.
24.Then go to each curriculum page in turn, click in the top row,
centre align then click “Paste” – Ctrl V.

The titles with

their links will
now appear.
You do not have
to go through
and hyperlink
them again.

25. Links between each page have now been completed and you
should be able to navigate between your pages
You can also hyperlink the main curriculum headings on your first
page to the relevant pages as shown below:

Hyperlink each
main heading to
their relevant
page.

26. Your
template is now complete and you can add pictures, files or any
information directly to the curriculum pages. (see below)
When adding files to the curriculum pages you need to save a
copy of the file you want to add inside the “Ivan’s e portfolio”
folder that we created at the start. It is important that this
procedure is carried out before you link from your e portfolio
template to the file or the link will not work once the “Ivan’s e
portfolio” folder is moved to another computer.
 “The Mad
Cat” word
document has
been saved in
the e portfolio
folder before
hyper linking
is done.

Important Notes:
• File names, (including pictures) must be lower case with
no capitals, spaces or symbols. Numbers are ok.
• Everything must be saved in the folder created at the
beginning of this tutorial.
• Make sure that you save each page regularly. You can
tell when a page needs to be saved because an asterisk
appears.
Asterisk appears
in the page/file
name meaning
you need to save
the page.