CIM272 Cascading Style Sheets class website
Assignments | Dreamweaver & Book Errata | Lecture Source Samples

Two New Projects options for Fall/2012

  1. Report (class presentation) on transitional effects especially inside Dreamweaver CS6 (extra credit do this before h9 is created)

  2. Report (class presentation) on phone gap.
  3. RWD Report  https://gridsetapp.com/   
  4. RWD Fluid Grid Layout
  5. RWD DW CS6
  6. RWD CSS3 Media Query

 

 

Bulk of course grading will revolve around the project - assignments prepare you for completing the project. You must present a brief informal discussion of your project in the last class. You may work in groups on the project, by end of third week you must identify which one of the four options you will be pursuing:

  1. Create a new CSS Style Sheet for the Web Structure discussed in the blackboard video. Note a key objective of CSS is strict separation of structure/content from the presentation/CSS, blackboard has the content (cim298.zip) you are to create the presentation.

  2. * Need seasonal-holiday designs, something bad; (Have 3 Fall/Halloween Designs) Need Thanksgiving/Christmas; Spring, St Pats, Valentine, Easter,Thanksgiving,Christmas,etc. Would be neat to change display dependent on time of year. cim.saddleback.edu has christmas themes for Nov..Jan; Would also be interested in a SD Chargers, USC Trojans, or other theme design.

  3. You may modify/enchance a previous CSS Design. Note we have a lot of previous design that are close to production level. However, in your CSS file header, make sure you acknowledge whose previous design you are using.

  4. * You may choose to create 1 specialized CSS a style sheet: Smart Phone (Android), IPphone or Tablet. A key feature of CSS is the ability to support multiple devices. Cascading style sheets allow you to load a new style sheet that overrides previous rules. For example, one can add a print-hard copy selection to the utility menus in the pageHeader.js file, the hard copy button loads a new style sheet, that sets the visibility of most divs to hidden, only the pageContent div should be visible. P.S. with a solid div strategy this can become trivia, for the test case you may want to group this with Web accessibility or create a print friendly pageContent.

    Two and Four are recommended, but also need a USC design.

  5. Need someone to add Web Accessibility (core attributes title, colors, etc) and meta tags (attributes description, keywords and summary).

  6. As a fifth option, once you understand the content w structure architecture, you may create a set of templates and/or restructure one of the class sites currently using the structure. The current classes using structure are: cim298, cim225, cs1b, cim205a.

  7. Using the presentation style for Saddleback home page, create a CSS file so that class Website mimic it.

  8. Opt to be a Quality Assurance Agent. It may be advantageous to work in groups, one person could be the quality assurance agent, refines the design so it work on multiple devices (i.e., browsers, cell phones, etc) could also test the design using browsershots.org and Adobe device central. Note with DW you can implement check/in - check/out features in the site definition. This means only one person at a time can edit a file. The only problem in this assignment, you are editing only the CSS presentation file. The total validator firefox add-on or web site, will validate a page, validator will also take a selected screen shot of a page, it will also scroll the page in order to display the entire page in a 1024x768 resolution. Also Web Developer add-on, has links to w3C validators which are lot more power than Dreamweaver validators.


  9. Will be moving from cim272a to cim272 (3 unit) class, will be adding a second book besides on of the two CSS books, at present will take material or use on of these two books... For this project generate some viewgraphs covering the main or most topics of one of the two books.

Other Options require prior premission....

  1. Presentation on Firefox's Two most popular Web Developer Add-ons - Web Developer and FireBug Web developer add is considered the best CSS debugger - PS you can do live CSS editing with Web Developer.

  2. Firefox Add-ons Top Ten - Other Top Ten list fireFTP, LinkChecker, - Top 10 Web Developer - Other List
  3. Look into a CSS editor like x-ray -- W3C site - topStyle Lite is free, Adobe goLive-- Although Dreamweaver is pretty good - however, you can use external editors with Dreamweaver
  4. CSS tab designer - can this be used with the Class Web Site Strategy
  5. Currently leaning towards using this book in the fall, trying to get CIM271A/B to cover first part of book,
    CIM272A CSS will cover subset of - need assignments, examples and viewgraphs for this book.
  6. Would like a local site map for each class web site that could be part of the footer - firefox add-on?
  7. Need someone to enhance by Questionnaire pages
  8. Guide to using CSS with Flash/ActionScript
  9. Or integrate a CSS Flash/ActionScript TextField (CSS work with UIComponents?)
  10. CSS2 Voice, Aural and Print Capabilities
  11. CSS3 Who needs it?
  12. CSS Positional Properties (Chapter 8)
  13. CSS Table and Lists (Chapter 7)

Valid XHTML 1.0 Transitional Valid CSS!