December 8

posted Dec 9, 2011, 1:22 PM by Peter Knowles
Keep going.....
If you're done, you can help your classmates. 
If you're not done....keep going!
--->Share your finished code as a Google Doc with Mr. Knowles today. 

Keep working on your assignment:  a single web page about YOU.  There's also a different version of the requirements pasted below, in case the checklist version a (Google Template called Assign4Requirements) doesn't work for you. Also don't forget the assignment page with all the requirements and links to code snippets. Remember also that you can (and are encouraged to) re-use material from previous assignments. 

The specific requirements are shown below; links for many of the sub-skills you need are shown, but here's another great resource -- a list of many different CSS codes to do all kinds of things. Look here if you can't find what you want elsewhere.

Requirements & Additional Options

Header

Required: Include a drop down menu, with at least 4 different horizontal segments. Each dropdown part must have at least 3 drop down items with different background color from the main menu. Header must remain fixed to window edge, with content scrolling under it. Use z-index to keep on top.

Additional:  Use box model to create layered look to menubar within the header; add attractive background image, with or without opacity.

NOTICE: If you're struggling with the code to make your dropdown navigation bar work, take a look at this code. It works!

Also: See the Drop-Down Menubar slideshow at the bottom of this page if you need even more!

And  here's some color-coded code to help you out. 


Left

Required: Include a vertical image gallery, with at least 5 different images. Make sure each image is appropriately licensed for your use (use creative commons licensing). Match image sizes (especially widths) to create a visually appealing display.  Include appropriate <alt> tag for each image. Make each image change on hover (opacity, blur, zoom). Use colored border.

Additional: Add <title> tag for each image; Include attractive background-image.

Content

Required:  Appropriate content, related to menubar items and images on the left. Formatted consistently with attractive size, style, font-family, and color.  Include at least 10 links to outside sources related to the content.  Style links to change on hover.  Include at least 2 lists. Use colored border.

Additional:  Style your list bullets or numbers to be different than default. Include attractive background-image, with or without opacity.

Box:

Required:  Include attractive format to display a favorite quote or saying. Use contrasting font and  background when compared to content. Size box to fit quote. Float to right of content. Use attractive border.

Additional: Use Large Cap wrapped in first line; include appropriate (cc-permission) image as background or as wrapped image.

Footer:

Required:  Include  text claiming copyright for you. Include email link on your name. Choose appropriate and attractive font and background. Include contrasting top border color.

Additional: Use appropriate background image for footer. Add more links (to class page, to school page, etc.) as text links, or as 2nd menubar.


Due: Tuesday, Dec 6. 
Show and tell to the class on Wednesday, Dec 7.

Drop-down menus built with CSS

Comments