Name:
____________________________________
xHTML 4.0
Date:
______________________
E-Portfolio
E-Portfolio
Project
Big Big Big Big Big Big Big Big Big Big Big Big Big Big
This FINAL project is a personal website. It will be called a E-Portfolio.
We will start off by creating a new folder on your share vault. The folder will be named Last Name
E-Portfolio. The home page will be the Index.html. This will contain the MAIN wrapper that
defines the size of your website. Typically it will contain many div’s. More notably it will have the
following DIVS:
<div id=”banner”>:
Website Name
<div id=”links”>:
Navigation Bar
<div id=”main”>:
Body
The Body will contain a short introduction about you—a poem, quote, statistics, etc. The
Navigation Bar will move us to all other pages on this website.
One thing you must bear in mind is that all pages will be based on the first Container you create.
These are some ideas for the remaining pages:
Index: Short Intro
Page 2: Autobiography
Page 3: Hobbies
Page 4: Exemplars (Awards, Achievements, etc.)
Page 5: Picture Gallery
Let’s get started. Let’s get started. Let’s get started. Let’s get started.
1
E-Portfolio
Project
Professional Sample Setup:
Your Setup
Index
AutoBiography
Hobbies
Additional
Info
Future Goals
2-3-4 DIVS here
Photo Gallery
2
E-Portfolio Project
Students must also provide a Navigation Bar system to go
from My Home Page to each Child Page and Back.
Example:
This student created two sources of links in his banner div as well as his footer div.
See last page for more examples of the Index.html.
3
E-Portfolio
Name:
Project
______________________________
Comment
Element
Index (Box Properties)
Banner, Main, Links
15
Consistency – Design with
CSS Properties
10
Color, Contrast, Design
10
Page 1 -- AutoBiography
10
Page 2 – Hobby or ???
10
Page 3 – Awards or ???
10
Page 4 –Gallery
10
Parent/Child/
Child back to Parent
5
Links, Lists, Tables, Images,
10
Overall Creativity
10
Score
4
More Examples of the Index.html Layout!
5
Project
Big Big Big Big Big Big Big Big Big Big Big Big Big Big Big Big Big Big Big Big Big Big
Process:
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
Thumb drives purchased. Folder created.
Outline of website started.
Pages created
Autobiography completed
Pictures/Images collected
Theme selected
Additional effort of specific pages
Link bars created.
Complete project
Saved to Instructor’s flash drive.
Some points to remember while you are presenting are listed below to help you out:
 Speak loud enough for all to hear
 Keep good eye contact
 Do not rush through your presentation
 Do not read directly off the page
 Have a discussion
While you are presenting there are several topics you can cover. Obviously you will be discussing
the topic of the page. More specifically, if you are on your hobbies page, briefly discuss those
hobbies, why you enjoy them, what got you into them, etc.
You can also talk about the types of tags you used in a particular page. Or even which tag you liked
the best (or didn’t). Talk about how you enhanced a particular page. Share your knowledge and
know-how!
Your grade will be a combination of two grades.
 Presentational Grade
o The overall look of your Website
o Refer to rubric
 Source Code Grade
o Correct tags (no extras)
o Nicely laid out
o Easy to read
o Clean code
Finally, please give your classmates the respect they deserve when they are
presenting. Let’s create a comfortable classroom community for everyone.
6