|
Introduction
This project requires you to integrate what you have learned about CSS in the
past few weeks. Basically, you need to create 3 pages with 3 different external css files to demonstrate
your understanding of CSS for formatting and for layout. Please DO NOT use tables for layout. I'm leaving the assignment fairly open so you can experiment.
Here are a few examples from Spring 2008 students:
What to Do
- Browse 5-10 examples at css Zen Garden.
- Create a folder for this project. Create a SIMPLE html file that includes basic content. Include a navigation area, sidebar, h1-h3 tags, links, and main content areas. Create a footer area that includes your name & links to 213homework.htm. If you wish, you can grab the content from an existing page with layout done in tables (Cuyamaca College homepage, any CIS 213 page, etc. --here is a stripped out version of the CIS 213 home page). The idea is to NOT spend a lot of time on content. Make 3 copies of this file or if you wish you can use 3 different simple html pages.
- Create 3 external CSS files & link to one from each html file. If you wish, one of these can start with the predefined Dreamweaver CSS Templates. Your CSS should:
- redefine the body tag to change the background and font face,
- redefine h1-h3 tags,
- set link attributes (link, visited, hover, active), and
- use CSS to control layout of the page into multiple areas.
- Link to your examples from 213homework.htm.
- UPLOAD 213homework.htm and your project folder to the cis2.cuyamaca.net server. Don't
forget to TEST YOUR WORK on the server. Try it with more than one browser.
- Review the scoring chart below to make sure you did everything.
- Submit your URL to Blackboard.
Resources
- Maxdesign Listamatic - shows lots of examples of CSS navigation bars. Navigation CSS is tricky, so feel free to cut and paste code and edit the styles for navigation.
Submitting work
- Submit the URL of your project folder to
Blackboard. (Go to Submit Assignments, click on assignment name, paste your URL, and click submit button.) When I grade, I will click the link to go to
your work on the cis2 server, so you can make changes up to the time
I grade it.
Grading - 60 points
| Points |
Requirements |
| 5 |
213homework.htm links to examples |
| 10 |
HTML files include navigation area, sidebar, h1-h3 tags, links, and main content. |
| 5 |
HTML files include footer area with name and link to 213homework.htm. |
| 10 |
There are 3 HTML files that link to 3 different external CSS files. |
| 10 |
body and h1-h3 tags are redefined in the external CSS. |
| 5 |
Link attributes are set in the external CSS. |
| 10 |
Multi-column (or area) layout is set in the external CSS. |
| 5 |
All files are uploaded and load without errors, URL submitted to Blackboard works. |
|