the final professional site
For the final professional web site and online portfolio I would like you to think outside the box. That is, to move away from the boxy layout that we used in the rough draft. That does not mean that your page will not be structured by boxes, but that you might not show the borders of those boxes (and I suggest you use one of the many CSS layout tools that have been posted to the CSS Social Bookmarking List and then altering the stylesheet to fit your needs). Rather, I’d like you to think about using color to make bold and significant statements about you, who you are, and the kind of job you are looking for or are currently in. The goal is to create a clean web page.
To see how people are using CSS to incorporate color in wonderful ways, see CSS Beauty, Stylegala, and CSSloaf. When looking at the sites on the pages, try to avoid focusing on how they are using links or flashy displays and focus on the colors. Then, using the CSS Developer Toolbar go and take a look at their CSS to see where they are controling for color, whether it is an image or not. You might also look at Dan Cederholm’s discussion of Faux Columns. Others have discussed other techniques (some of which you have posted on the CSS Social Bookmarking List).
Specifcs for the professional site final draft:
- Rename your old index page "index-old.html" and name the new page "index.html".
- Think about this as a completely new web site. That is, do not try to adapt or alter the rough draft of the site. Start from scratch.
- For the front page, keep the text to a minimum. No more than 250 words of text. Text can create clutter. Do not get too personal; this is, afterall, a professional site and future employers do not need to know too much about you.
- It is up to you if you want to have a photograph of yourself; it is better to have your name in a good sans-serif front than to have an awkward photograph. But, the choice is yours.
- Have a horizontal or vertical navigation that includes links to an about page (about.html), a portfoio page (portfolio.html), your css zen garden page (csszengarden/index.html), a resume (can be a PDF or HTML), and your home page (index.html).
- Between the two <head></head> tags, include the following:
<title>title of your page</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />This code will allow CSS and XHTML validators to correctly identify the type of page you have, which will result in an accurate validatation.
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="false" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="ROBOTS" content="ALL" />
- Your name must be wrapped by <h1></h1> tags and styled in the way you’d like, including an image replacement hack that is used in the CSS Zen Garden or the one I tend to advocate because it does a better job of allowing for ALT-like text:
#banner {The reason for placing your name in <h1></h1> tags is because search engines are more often than not looking to the <h1/> to rank results
margin-bottom: 5px;
padding: 0;
background: url(’../images/banner.gif’) no-repeat top left;
height: 125px;
}
#banner h1 {
margin-left: -2500px;
}
- all images in the HTML must have ALT and title descriptions, and height and width numbers
- all pages must have an appropriate DOCTYPE
- all links must have title attributes
the portfolio
While a resume is nice to have, more and more often potential employers are asking for portfolios that highlight your work and your abilities. As a result, we will be creating portfolios with a professional look and feel—ones you would feel confident asking a potential or current employer to see. The portfolio should include work that you would like others to see and you want to highlight, such as: articles or papers you have written (convert all Word docs to PDF); photographs or other creative work; teaching materials, etc. Anything that highlights your talents. The fact that you are putting it online shows the employer that you have web design skills.
The portfolio should have the same layout as your professional page (though the colors can be altered to indicate to the user that you are on a new part of the site, as Doug Bowman does with the different sections of Stopdesign). Include between 5 and 7 items in the portfolio. When adding your work to your portfolio, please include the following kinds of information:
- a brief summary of the material, which should include if it was crated as a result of an assignment and what that assignment was
- if artwork, a description of it written as Joe Clark and the Art of ALT recommend writing long descriptions
- date it was created
- your role in the design (for example, sole designer, role in the group, etc.)
- design objectives (if any)
- applications used (if other than Word)
- other relevent technologies used (such as camera type, film speed, lens, etc.)
- file size (if .pdf, .gif, etc.)
You have the option of placing all of your portfolio items on one page (such as on my Courses page) or on individual pages (such as on my photography portfolio—a site that was created using the Faux Columns technique). Each layout scheme has its benefits. Often, the design and goals of the site constrain how much is on one page.
due date
Saturday, June 7, by 11:00pm