Exercise 4
FOCUS Color and link styles in CSS
PURPOSE Show your competency in selecting and specifying color in CSS. Demonstrate your ability to use CSS to create link effects.
VALUE 2 points (see Grading): 1 point for originality, 1 point for best practices in your CSS choices.
DETAILS You will find three HTML files and one CSS file in this folder. Download all four files. Make changes in the CSS file to create an original and appealing color scheme, AND create a navigation device that has a graphical look and feel.
Requirements
- Do not change anything in the HTML files.
- Change ONLY the CSS file.
- You may use background images on the navigation ONLY. (If you use background images, be sure to remember to upload them with your other files.)
- Follow all the instructions below.
- Upload ALL FOUR files to your Web site and send me the URL of the HTML page, via e-mail, by the deadline.
Design Example
Many CSS gurus (including Holzschlag) discuss ways to use an unordered list <ul> to create a navigation scheme with appealing hover effects. Here is a simple example:
Note that the color scheme for the design example is reasonably attractive, although not very original.
You should not try to copy the design example. Come up with a good color scheme that you like, and try to create an original navigation box, panel, bar, whatever. These can be used in your portfolio, if you're satisfied with them.
Instructions
- Your navigation may be horizontal or vertical. You may place it above the main text box, or to the left, or to the right. Use CSS to position the nav div.
- Your navigation must show a hover effect.
- Your navigation must look and work the same in both IE 6 and Firefox 1.5. If you work on a Mac, you MUST test your work on a Windows computer in BOTH of the browsers.
- Pay attention to alignment. Failure to align elements precisely makes a design look sloppy.
- The visual relationship between your nav div and your main-box div should be aesthetically pleasing.
- Your color scheme should demonstrate that you have read and understood White, pp. 65 - 67. You should also consult the Color resource page.
- Change the background-color of the body element, nav div and main-box div.
- Change color (that is the text color) as needed for legibility in both the nav div and the main-text div.
- Coordinate color and background-color for a:link, a:visited, a:active and a:hover with the rest of your color scheme.
In Chapters 8 and 10, the Holzschlag book thoroughly covers all the CSS attributes you will need for this exercise.
If you have trouble with positioning the two elements, put a float:left; on each one, and specify the width for those two elements as necessary.
Helpful Information
Important Note
This exercise is a test drive for your portfolio Web site. Try to come up with the final color scheme and navigation you will use in your portfolio. If you do, you will get my comments and feedback well in advance of your portfolio deadline. You'll have adequate time to improve your work, and your portfolio will be better as a result.