Styles curriculum

Ideas for revamped styles & web design sessions.
I have 3 weeks in October :

1. 11^th / 14^th
2. 18^th / 21^st (AECT)
3. 25^th / 28^th

Mon 11^th

1. Introduction
   • Overview of styles - separate structure from presentation
   • how styles work.
     Examples : go to CSS Zen Garden & use FF Web Developer tool to disable stylesheet
   • Locations of styles - internal, external & inline
   • Styling:
     • headings
     • text
     • links
     • lists
     • using lists for navigation
     • image & captions
   • Web design with styles
2. Using CSS with dreamweaver
3. Using the wizard to create an internal style. Observe code produced.
   • Styling headings
   • Styling body text
     • sizing - resizable (ems) vs absolute (px)
     • fonts - sans-serif, serif

Thurs 14^th

Continue with rugby_styled.htm

1. styling links.
2. styling lists.
   • changing bullet graphic
   • nesting bullets
   • optional : Listutorial’s Background images for bullets . Can do this for homework? NO
3. Save to external stylesheet
4. Styling rollover list for navigation.
   Listutorial’s Simple CSS rollover lists
   Be careful to give specific setup instructions so that the students can follow the tutorial in their setting.

Homework

• Do Listutorial: Tutorial 3 - Nested lists
• Do Listutorial: Tutorial 4 - Horizontal lists

Mon 18^th

1. Floating an image & caption
   Floatutorial: Tutorial 2 - floating an image & caption
2. Apply this technique to the rugby page to make a cption for the Marcel Garvey graphic. Illustrate.
3. Create a horizontal navigation bar by floating a simple list.
   Floatutorial: Tutorial 6 - floating inline list items

Homework

• Do Floatutorial: Tutorial 5 - Floating next & back buttons using lists

Thurs 21^st AECT

Project work in groups

1. Should have all the basic content ready by now
2. Make sure all the links are working
   • within site between pages
   • external links
   • links to glossary items / annonated web resources
3. spell check content
4. Color resources. Decide color scheme:
   • background (s)
   • text font, size & color
   • Navbar
   • links
5. take a look at Monday’s class and decide what site design to use.
6. URL to basic site (working links & navigation in lists, color scheme, but not neccessarily applied styles)

Monday 25^th

Site design using components covered.

1. Simple box and top navbar
2. Two column layout
   You’ll modify these basic layouts to suit your group’s needs
3. other styling tricks
   • pullquote with cool quote marks
   • Acronym pop-up
   • Drop caps
   • Pure CSS popups (for navbar)
     for a fix for IE6
   • others

Homework

Complete application of site design to your site. Make sure all the links work.

Thurs 28^th

In class ‘show and tell’. Each group will talk about their project site and demonstrate it working. 8 groups 10 mins each. Items covered will be:

• design decisions
• color scheme
• nifty features
• summary of what the site’s about

Homework

Workshop to evaluate sites

Posted by markp at October 08, 2004 12:01 PM | TrackBack