DUE APRIL 30
Thanks for your interest in completing the project towards a certificate for the WebBuildingWorkshop. The project is due the last day of April. It will take some time, so don't wait until the last minute or you won't make the deadline. After I receive your completed project I will meet with you to discuss it.
The project is to code an XHTML and external CSS page that looks like the attached file "project.gif", except that you will make it for the unit your team worked on rather than for the Multimedia Unit. This work should be done individually, not as a group, though feel free to help each other.
NECESSARY FILES
- "project.gif" - A snapshot of what your page should look like once coded (
http://www.grographics.com/fiji/webbuildingworkshop/project_tips/project.gif) - "tips.gif" - An overlay with some tips on how to structure your page (http://www.grographics.com/fiji/webbuildingworkshop/project_tips/tips.gif)
- "colorfade2.jpg" - This should be used as the background image for the <div id="nav"> (http://www.grographics.com/fiji/webbuildingworkshop/project_tips/colorfade2.jpg)
http://www.grographics.com/fiji/webbuildingworkshop/project_tips/project.gif
http://www.grographics.com/fiji/webbuildingworkshop/project_tips/tips.gif
http://www.grographics.com/fiji/webbuildingworkshop/project_tips/colorfade2.jpgUSEFUL CODE BITS
All styling and positioning should be done using an external cascading style sheet (CSS). In other words, no <font> or <table> tags.
XHTML
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <div id="titlebar">
- <div id="nav">
- <div id="content">
- <span class="currentpage">
- <h1>
- <h2>
- <a href="...">
- <html>
- <head>
- <title>
- <body>
- <link rel="stylesheet" type="text/css" href="styles.css" />
CSS
- margin:
- padding:
- font-family:
- font-size:
- color:
- font-weight:
- padding-top:
- padding-right:
- padding-bottom:
- padding-left:
- margin-top:
- margin-right:
- margin-bottom:
- margin-left:
- background-color:
- background-image: url("images/colorfade2.jpg");
- position:
- left:
- top:
- float:
- width:
STARTING POINTS
- An HTML starting point. Download and edit (Right click, then choose save file as... to download)
- A CSS starting point. Download and edit
- The CSS used for this WIKI. Download, see how it works, and use some of its code in your project.
RESOURCES
My goal with this project is not only to ascertain your level of web skills, but also to get you familiar with the process of developing your own skills by searching for tutorials and source code on the Web. So, I have introduced some code we did not cover in the workshop. Do some searches at http://www.google.com with the code in question to help yourself, and feel free to ask anyone (including me) for help. Just don't copy another workshop participant's code in full; I can tell and it won't help you learn.
In addition to searches on google, here is a good CSS tutorial:
http://hotwired.lycos.com/webmonkey/reference/stylesheet_guide/
And here is the CODE VALIDATOR: http://validator.w3.org/
And here are some overviews I am working on. I haven't finished some of the images, but the code and explanations are all there.
- grographics.com/wiki/index.php/WebClassXhtmlChapter
- grographics.com/wiki/index.php/WebClassStyleChapter
Anyway, Goog Luck! I hope all this helps. 
Feel free to ask me for help if you need it and I look forward to seeing your projects.
- Chris