How to Create an Electric Portfolio Using Microsoft Word and a

Macintosh 9.1 Operating System iBook Computer

An Introduction by Susan Lee
You are about to participate in an exercise that will guide you through the steps to create a simple
electronic portfolio. This instruction is designed to be used as a guide to help you create a simple website
using Microsoft Word while you sit in front of your computer. There are three main sections to this
manual: (1) setup, (2) creation, and (3) completion. Please follow the steps in the given order so you will
understand the instruction fully. Thank you!

SECTION ONE: SETUP

Before beginning any electronic portfolio, it is important that you have an idea of what you want your
finished product to look like.
1. Sketch an example of the desired layout and color scheme on paper so you can formulate your
ideas.
2. Next, you should create a new folder on the Desktop of your computer and call it Test. You will
save all of your files and pictures in this folder.
a. To create a new folder, Apple + N (N is for new folder) on any blank area of the Desktop
and name the folder, Test. It is a good habit to always save your folders, documents, and
images in lower case letters, i.e. portfolio; this will help you a lot when it comes time to
remember their file names.
b. An alternate way to create a new folder is; while on the Desktop, go to File, New Folder,
and name as Test.
3. Open up Microsoft Word by double-clicking on the Microsoft Word icon located in the Launcher
of your computer under Applications.

4. Open up a new document. From the menu, select File then New Blank Document.

5. Immediately save the new document; go to File and then Save As Web Page on your menu bar.
Name the file index.html and save it to the Test folder on your Desktop. It is a good idea to
have a copy of your work saved as a Word document also. So go ahead and save the new
document again; go to File and then Save As on your menu bar and call it portfolio. This will
make editing much easier as you go along especially if you chose to use WordArt.

SECTION TWO: CREATION

You are now ready to begin creating your web page!
6. To open your saved web page from Word, go to File then Open.

7. Next, make sure that the test folder is showing with your index.html file highlighted and Show:
Web pages. Click Open to retrieve the file.

Your index.html file should look like this:

8. Add a couple of blank lines to index.html (and all of your pages) by pressing the return key two or
three times. This will make your pages easier to read for the user because the text is not crowed at
the top of your document. The first step in creation is to create a title for your page. To do this,
place the cursor in the desired location and begin typing. For the purposes of this instruction, type
the text, Welcome to My Website as the title for your first web page.

After you have created your heading, you should change the heading size to make it stand out on the
page. You may also wish to center justify the heading as shown above.
9. To center your title; first highlight the title, then go to Format, Paragraph, then Alignment.
Select your choice as centered and click on OK when you are done. If you want to change the
font (text), i.e. bold; first highlight the text that you wish to change, next go to Format, then Font
to make your selection(s). For bold, go to Font Style: and click on Bold, then click on OK to
save those changes and return to the document that you are working on, index.html.
Now, lets insert an image into your page.
10. Create a new folder named images and nest (put inside) in your test" folder. This new folder,
images will contain all of your pictures and graphics. Note: If you do not put all of your
pictures and graphics inside your test folder in the images folder, they will not be there
when the web page is displayed on the Internet. Before you begin to insert the images onto the
web page, copy the images that you want to have on your web page into the images folder.
11. To insert an image into your web page, first open up your document by going to Word and
opening up index.html. You must decide what function you want your image to perform on your
page. This is very important as is best to format your image instead of just inserting it onto the
page. Insert is fine but your image is limited to its placement on the page and it is more difficult
to move the image around to a desired location. The reason? The image is subject to the same
properties as text, i.e. centered.
12. Go to Insert, Picture, from file

13. The Choose a Picture toolbox pops up:

If your folder is located on your Desktop, make sure that desktop is selected then arrow down until
you reach your test folder. Double click on test folder to select and open the images folder.
14. Double click on the images folder to open.

15. Chose the image that you want to insert and double click to select it.

16. Your page should look similar to mine:

17. Your image is located at the point where your curser was blinking. This is fine if that is where you
wanted your image. If it is not, (mine is not where I want it) then you will need to Format the
image. It is usually best to format all of your images so that they are easy to maneuver on the
page. Click to highlight your image and a toolbox appears named, Picture.

18. Click on Format picture :

19. Go to Layout. This is where you chose how you want the text to be displayed in conjunction with
your image(s). You must decide if you want to have the text surround it, be in front of the text,
behind the text (text is on top of the image), etc. Place your cursor in the area that you would like
the image to be inserted.

In the Wrapping Style, I chose Square but for this lesson any of the choices will work. Click on OK
to exit.

20. Your image is highlighted and can be moved. A hand appears that grabs the image so that it can
be placed in a new location on the page.

If your image were to come in contact with text, the text would wrap around the image forming a
square shape with the image inside the square (see Square icon in Wrapping Style).
21. Place your imaged where you want it to be located on your page.

10

22. Repeat for each of the images that you want on your web page. I have chosen two images for my
index.html or home page:

23. Next, you will make navigation links to the extra pages that you want attached to your web site.
The pages are connected with hyperlinks. The hyperlinks are what make the Internet an
interactive medium and also makes the other web pages interactive within another web page. Type
out the extra pages that you want connected (hyperlinked) to your web site. I have decided to use
Science, Mathematics, Social Studies, English, Reading, Homework, and Internet Links. Images
can also be hyperlinked to URL addresses, i.e. http://www.usouthal.edu/ Note: the link turns blue
to indicate that a live hyperlink is available for this address. When clicked to visit the site, the link
will turn purple, indicating that it has been visited.

11

24. Create the extra pages that you want included in your web site and save them as an html file.
Select something that indicts what the page is and remember to use lower cased letters. For
example, I named my pages:

science.html
o Science page

socialstudies.html
o Social Studies page

english.html
o English page

reading.html
o Reading page

homework.html
o Homework assignments page

internetlinks.html
o Internet links for study and review

horseusalink.html
o Image of horse is linked to the University of South Alabamas home
web page at
http://www.usouthal.edu/

deernclblink.html
o Image of deer is linked to the No Child Left Behind home at
http://www.tomorrowsteachers.org

25. To create a hyperlink using text, first highlight the text that you want the user to click on.

12

26. Next, go to the tool bar and click on to the icon that resembles a world with a chain underneath it,
this is the Insert Hyperlink command. You can also go to the menu bar, click on Insert,
Hyperlink .

27. A box should pop up that looks like this:

13

28. Go to Web Page then click on History. This shows all of the web pages that you have available to
link to.

29. I chose Science as my first hyperlinked page. Double click on your choice to select it.

14

30. Your screen should have this box displayed:

31. If this is the web page that you want to link to, click on OK. You are now hyperlinked to another
web page.

STEP THREE: COMPLETION

15

Congratulations! You have created an entire website! Now, lets see if everything is working by
previewing the site in a browser.
32. To begin, open your index.html web page (or the page you want to view). To preview the site in a
browser, click on the globe icon with the magnifying glass attached to it on the toolbar:

33. Mine looks like this:

16

34. Note: Word is not a WYSIWYG (what you see is what you get) program. Your pages may look
fine in Word but may shift when you look at them in the browser (Internet Explorer, Netscape,
Opera, etc.). You can adjust your settings for the document just go to Format, Document,
Margins.
35. Preview another page. I opened Science by clicking on the Science link that is located on my
home page, index.html.

36. Thats it, just tweak your pages and you are finished! Note: to add a background other than a
color, i.e. pattern, image, etc., go to Format, Background:

17

37.

Then go to, Fill Effects:

38.

In Fill Effects go to Picture and chose the Picture tab:

18

39.

Now chose the Select Picture:

40. In Chose a Picture, select your choice from your images folder. I selected my file named
back2.jpeg, a green marbled background. Click on Insert.

19

41. Here is my final product:

20