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. I'm leaving the assignment fairly open so you can experiment.
Here are a few examples from Spring 2008 students:
- Nick Rowe sample 1, sample 2, & sample 3 - simple, but effective
- Ann Tarvin sample 1, sample 2, sample 3, and sample 4 - more complex and elegant
What to Do
- Browse 5-10 examples at css Zen Garden.
- Create a folder for this project.
- Create 3 files that demonstrate your understanding of external css for layout and page presentation. You may use the predefined Dreamweaver CSS templates, but if you do, change the colors. Each file will link to its own external css and should include
- navigation area, sidebar, h1-h3 tags, links, and main content areas
- footer area that includes your name & links to 213portfolio.php
- any content - it is ok to copy and paste from a web site -- the idea is to NOT spend a lot of time on content. Content should include links & headings.
- 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
- control layout of the page into multiple areas
- For at least one page, use Listamatic or a similar site to turn a linked list of links into a navigation bar.
- Link to your examples from 213portfolio.php.
- UPLOAD 213portfolio.php and your project folder to the 213 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 Moodle.
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
- Add a link to this assignment from 213portfolio.php.
- Upload your files to the CIS 213 server. Don't forget to TEST YOUR WORK on the server!
- Submit your URL to Moodle.
Grading - 60 points
| Points | Requirements |
| 5 | 213portfolio.php links to examples |
| 10 | files include navigation area, sidebar, h1-h3 tags, links, and main content. |
| 5 | files include footer area with name and link to 213portfolio.php. |
| 10 | There are 3 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 Moodle works. |