Tableless web design

Go through in class:

1. How to apply the 2 col web design to your page:
2. Modifications to design - text, background, link colors, nav colors,
3. Enhancements
4. grading

1. apply 2 col design
   1. display design precursor in FF & View Source
   2. markup own web page with DIVs and Save As
   3. in FF : Webdeveloper toolbar save the stylesheet from design page in project/styles folder
   4. now include the saved stylesheet into own page.
2. In FF identify colors to change & classes (use Favelets - post these as Resources). Make list of styles to change colors / text sizes.
3. Enhancements:
   • pullquotes
   • Drop capital letter
   • change cursor on abbr - title.

Grading class sessions

Is rather tedious cos there are so many.
I think I’ll have a policy of just grading homework and assessing classwork as done/not done.
The three ‘not done’s will pull the student down a complete grade.
That way if someone misses class they can catch up with no ill effect.

In the 1.4 or newer Moodle the Journal is part of the Assignment activity and I can keep the class journal open until the following class session.

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

Grading Finding Info on web

The Finding Info on the web was quite a good assignment in principle.
Next time I’ll keep the same structure but make make it a lot harder and be more picky in how I grade the defintions. For now though, I’ll be slack …

Moodle Forums

I love the way that you can just move a discussion posting to a different forum.
Fantastically useful.

Grading Fora

Currently the way that forums are rated (graded) is not documented anywhere that I can find easily.

It seems that you allocate a maximum for the forum and then every posting is graded to that max & then they are averaged.

What I’d like is a max grade and have the marks accumulate rather than average. So with a max grade of 60 say, I could assign 20 points for a reply to instructor’s posting, 20 points for an original posting & 20 points for a reply to a student’s post and have them accumulate.