1

Electronic Portfolio Manual

Kyle Richardson

Thomas Rielly

Rashid Salameh

Adrian Schul

2

Contents

Introduction…………………………………………………………………………………..........4

Parts list……………………………………………………………………………………………5

Instructions……………………………………………………………………………………...…6

Saving a template………………………………………………………………………….6

Open a new page…………………………………………………………………………..7

Creating links……………………………………………………………………………...7

Adding Images…………………………………………………………………………….8

Saving Files……………………………………………………………………………......9

Uploading to the Web……………………………………………………………………..9

Photoshop (cropping instructions)..........................................................................................…...11

Illustrations……………………………………………………………………………………....12

Specifications…………………………………………………………………………………….14

Function………………………………………………………………………………………….14

Operating Principle……………………………………………………………………………....15

Glossary………………………………………………………………………………………….16

3

Table of Figures

Figure 1 (opening a new web page) ................................................................................................ 7

Figure 2 (hyperlink) ........................................................................................................................ 8

Figure 3 (uploading your page to the web) ................................................................................... 10

Figure 4 (photoshop crop example) .............................................................................................. 11

Figure 5 (website example) ........................................................................................................... 12

Figure 6 (website example 2) ........................................................................................................ 13

Table of Appendix

Table A………………………………………………………………………………………...…18

4

Introduction

An electronic portfolio consists of collected works put together on the internet and/on

digital media. These electronic portfolios are also called e-portfolios, web folios, or digital

portfolios. Moreover, electronic portfolios are designed to display a person’s accomplishments,

qualifications, experience, and abilities. However, they’re also can be used to exhibit a persons

particular skill. Electronic portfolios are a great tool used to promote ones self to businesses and

organizations. In contrast to a paper portfolio, an electronic portfolio can be continually updated

or changed to reflect the users learning and development over time.

Electronic portfolios can be categorized into three different types; learning, assessment,

and showcase portfolios. The learning portfolio is typically used to show what a student has

learned and how he/she has progressed. The assessment portfolio is usually created for

evaluation purposes. Furthermore the showcase portfolio is mainly used for people applying for

employment positions.

Electronic portfolios’, when used to their full potential, can assist anyone who creates it.

They can help focus thinking by providing a medium to turn theory into practice. Moreover,

through the construction process, students and prospective employees can get a sense of what

they are learning from time to time.

5

Parts List

Professional style home page

I. A summary stating the importance of the site and what someone can expect to find in the

Electronic Portfolio

II. A link to a resume

III. 6 Links to each of the skill bases used in different projects and classes

IV. A professional and appropriate picture

The 6 Skills or Proficiencies a Student must have used (Each item is its own

Link):

I. Writing and Research projects and activities in the student’s selected concentration area of

study.

II. Examples of Professional service activities completed or involved in that are associated

with members of that profession.

III. Leadership, group projects, presentations, and interactive participation that has been done

in school.

IV. Activities or Projects involving Consulting, Technology Transfer, and Management skill

development.

V. Examples of activities and projects related to career search and life planning development.

VI. The communication skills, verbal and nonverbal, used in projects while at school.

See appendix A for more information on requirements for an electronic portfolio.

6

Instructions (FrontPage)

How to save an Electronic Portfolio template using Front Page?

I. Create a new folder and name it after your name, electronic portfolio or something

similar. This is where you will store all your electronic portfolio files.

1) Click the directory folder once to select it. This is the folder at the very top of the

list. Right click on the directory folder and click “New Folder” from the drop

down menu.

2) Then proceed to type the name of the new folder and press enter.

II. Open a Browser and paste the address of the webpage on which you got the

template.

1) Many websites offer free templates to help design and create your own

personalized website. Also, the Microsoft Office Website offers many free and

compatible templates.

III. Choose “Save As…” from the “File” pull down menu.

IV. When the “Save As” window opens, name your file to save it.

1) In the “File Name” box, type “index.html”

2) Change the “Save as type” drop down menu to “Plain Text”

3) Save the file to a folder on your hard drive or on a portable flash drive. This is

where you will put all your web files and images for your portfolio while

uploading them to Front Page.

4) Click “Save”.

5) Find the file you just created “index.html” on either your hard drive or flash drive

and right click on that file. Click on “Copy” from the drop down menu.

6) Select the new folder you made for your Electronic Portfolio files that is named

portfolio, your name, or something similar. Right click on that folder and click

“Paste” from the drop down menu. Now you have created an index page within

your Electronic Portfolio folder.

7

How to Open a New Page?

I. After you have found and saved a template, the next step is to create the pages you

want to have on your electronic portfolio web site.

II. To open a new page, click “New Page” from the “File” drop menu.

Figure 1

III. Be sure to save your page when you have finished typing the desired information

and inserting images and pictures on the page.

How to Create Links to other Pages?

I. Highlight the text or image you want to turn into a link.

1) To highlight text, simply click and hold the mouse and drag the cursor over the

desired text you want to link.

8

2) To highlight a picture, click on the picture once.

II. Click the “Hyperlink” button at the top of the screen on the menu bar. The button

looks like a chain on the globe.

Figure 2

III. Linking to a Saved File you have Created

1) Click the “Make a hyperlink…” button in the URL dialog window. The button

looks like a folder with a magnifying glass.

2) Find your file on the hard drive or portable flash drive that you saved.

3) Click on the file and then click “OK” to approve the saved file you want to link

to.

IV. Linking to an existing Web Site

1) Type the URL address of the page you wish to link to in the blank space next to

the “URL”.

2) Make sure you type the full URL and don’t just start with “www”.

3) Click “OK” to approve the page you want to link to.

How to Add Images onto your Electronic Portfolio Web Page?

I. Choosing and Saving an Image

9

1) Find the image you wish to put on your page. The image can be one you found

online or your own personal image.

2) When you have found the image you want, right click on that image.

3) Select “Save Image As…” or “Save Picture As…” from the drop down menu that

appears over the picture.

4) Select the folder on your hard drive you are using to store the files and images for

your portfolio and click “Save”.

II. Adding your Image to your Page

1) Find and Open the folder where you saved the image or picture either on the hard

drive or the portable flash drive and right click on it.

2) Click “Copy” on the drop down menu.

3) On the desired page you want the image or picture, place the cursor on the spot

where you want the image or picture to be.

4) Right click and then click “Paste” of the drop down menu that appears.

How to save your files?

I. Choose “Save As...” from the “File” button on the top menu bar.

1) Make sure you have the correct folder selected in the “Save In” dialog box at the

top.

II. Type in what you would like the file to be named followed by “.html” (like

coverpage.html)

III. Give your page a title

1) The title is what is displayed at the top of the browser window and also the name

of your page when it is book marked.

2) In the “Page Title” line, click the “Change” button and type the title as you want it

to appear.

IV. Clicked “OK” when you are finished.

10

How to Access your Myweb.wit.edu Web Space using FrontPage? (Uploading

to the internet)

I. Open FrontPage.

II. From the File dropdown menu select Open Site.

III. In the window that opens, under Web name , type in http://myweb.wit.edu/[your user

name]

1) Use the username you would use to log into Leopard Connection.

IV. When prompted for username put in wit\[your user name].

V. Your password is the same as the active directory password you use to log onto your

local computer.

VI. Your web will open in FrontPage:

1) From here you can drag and drop files into your web space and image directory

and publish them.

Figure 3

11

Instructions to Crop Using Photoshop

The crop tool in Photoshop allows you to select a portion of a photo you want to cut away

from the rest of the photo, keeping only that portion and discarding the rest. This

powerful tool can be used to enhance your photos and create other projects using pieces

of your photos.

I. To begin, you will need to search for and open the document that you would like to

crop. The image can be anything or of anything.

II. Now that the document is open, you can simply crop any part of the image you want to.

To crop an image, you need to use the "crop tool" in Photoshop. The hot key is "C".

This will automatically select the crop tool by clicking "c" on the keyboard.

III. To use the tool you will now left-click and hold. While you are doing this, drag the

mouse to another part of the image. Do not select the entire image. After all, there

would be no point in cropping then. After, unclick the mouse.

IV. Now you will have two colors on your image. One will be dark/gray. This represents

the part of the image you are getting rid or cropping. The other will be the same color

of the image. This represents the part of the image you are keeping or not cropping.

V. The idea is to select the part of the image you want to keep with the crop tool. Now

after you have un-clicked the mouse, you will right click the image, despite whether the

area you wanted is selected. When you right click, a small drop down menu will give

you two options: "cancel" and "crop". Cancel will end the crop and allow you to do the

process again if you didn’t select the right area.

Figure 4

12

Illustrations

Following is an example of the main menu to an electronic portfolio:

Figure 5

An electronic portfolio is simply an organized collection of completed and in-progress work.

Electronic portfolios have changed the very foundation of how people display their

accomplishments. Students can easily benefit from electronic portfolios, since anyone can view

students resumes, both before and after graduation. If internship interviewers or potential

employers can see an online resumes that include views of a student's actual work, that student

may be more likely to obtain the position. Electronic portfolios show all shorts of information

13

that can be helpful for employers to make their decision about hiring you. These portfolios

enable employers to see person’s resume, accomplishments, and their work ethics. An example

of how someone might display their courses within their electronic portfolio:

Figure 6

Electronic portfolios show what the employee has been studying and the

accomplishments that they have made in college. It gives an employer a quick sense of what the

person might be like. It’s like an interview before the interview even happens.

14

Specifications

Electronic Portfolios have to follow certain specifications:

• The portfolio should have a JPEG format picture. If it were to be any other format, it would

consume too much space and pixels. Usually you would want to have a professional picture of

yourself because that’s the first thing that a prospective employer who is visiting your site is

going to see.

• You would want to make your electronic portfolio as simple as possible so that the person

viewing it won’t be confused or lost.

• All the links and tabs on the page should be functional.

• The font should be in a reasonable size and in a reasonable color format so that it won’t conflict

with the background scheme.

Function

An electronic portfolio has a few main purposes for the student who created it, but the

main function is to help promote the student to potential employers. The portfolio is a place

15

where a student can talk about their background and demonstrate their skills and experience in

different projects and situations while attending school. This information is all on the World

Wide Web for an endless amount of companies to learn more about that student. A secondary

function of the electronic portfolio is for networking with friends or peers. Students can talk

about their opinions of projects on their portfolio and peers can read about what projects worked

well and how to get in contact with that student to discuss projects ideas and thoughts.

Operating Principle

The electronic portfolio works in two ways that will help the student promote themselves

through their page to employers. The first and most effective way the electronic portfolio works

is when the student includes the web address on their resume. The potential employer will be

able to research the student through the page and be able to get an understanding of where the

student is coming from and what kind of learning experiences the student has gone through in

school projects. The second way is to attach the website to a career search engine on the

internet. This way when a company looking for employees conducts a search online, the

student’s electronic portfolio may pop up if the skills the company is looking for match up with

some of the skills the student used to complete the school projects.

16

Glossary

Directory folder - is an entity in a file system, which contains a group of files and/or other directories.

Files are kept organized by storing related files in the same directory. A directory contained inside

another directory is called a subdirectory of that directory.

Drop down menu – the menu that is displayed when the cursor is placed over a menu button on the

menu bar. Usually the menu button must be clicked in order for the drop down menu to show.

Hyperlink - navigation element in a document to another section of the same document or to another

document that may be on or part of a (different) domain.

Jpeg - is a commonly used method of compression for photographic images. The degree of compression

can be adjusted, allowing a selectable tradeoff between storage size and image quality.

URL - compact string of characters used to identify or name a resource on the Internet. The main purpose

of this identification is to enable interaction with representations of the resource over a network, typically

the World Wide Web, using specific protocols.

Web Template - is a tool used to separate content from presentation in web design. Web templates can

be used to set up any type of website. In its simplest sense, a web template operates similarly to a form

letter for use in setting up a website.

17

Index

Cropping…………………………………………………………………………………………11

Electronic portfolio

Definition………………………………………………………………………………….4

Functionality……………………………………………………………………………..14

Homepage………………………………………………………………………………………....5

Images……………………………………………………………………………………………..8

Links………………………………………………………………………………………………7

Opening……………………………………………………………………………………………7

Saving……………………………………………………………………………………………..9

Skills needed………………………………………………………………………………………5

Uploading……………………………………………………………………………………...…10

18

Appendix

Table A

Personal Information personal interests, mentors,

role models, personality inventory,

assessments

Educational Credentials education history, thesis or

other major papers or research, examples

of coursework products

Career Achievements work history, career plan,

references, inventory of career

accomplishments

Comm. Competencies communication skills,

technical skills, certifications,

speaking, diversity skills, teamwork

Professional Activities publication, presentations

Recognition academic honors, workplace

achievement or recognition, promotions