ASSIGNMENTS

This is a project oriented class you have one Project and 10-12 assignments. Assignment Objectives are geared toward helping you Complete the project. Note this class has a special course grading option.

Class Intro Questionnaire, XHTML Videos & Course/Certificate info.

Checklist...

1. Watch the getting started:14 Minute Video & corresponding Viewgraphs
2. Complete the Questionnaire. You need to enter a non academic e-mail.
3. Login into Blackboard take quiz 0;
4. Watch the blackboard XHTML Video
5. Watch the Course/Certificate info
6. Pace depending on background/schedule look to complete h0,h1 and h2 in the first week
7. May want to skip ahead to H2 before completing H1.

Create CIM Home Page

Watch backboard videos on creating a home page on CIM and create your CIM home page, you can use this index page as a starting block. If you have completed other classes you should already have a Dreamweaver site definition. If you don't know Dreamweaver, you can use any FTP client to put files to CIM. Filezilla is the recommended FTP client.

Checklist...

• on blackboard use tools --> My Grades to verify your quiz grades
• make sure you have a home page on cim student search
• review syllabus, especially special grading options - set a schedule for the grade you want.

Week 2

What Stage - Post Blackboard Discussion Board

First we determine what needs to be done, later on we worry about the how. To get credit for this assignment you must accomplish these tasks...

1. Post or rate using blackboard discussion board on previous designs. We currently have a chosen set of active designs. Many other design have potential but need work. Post or rate comments on chosen set active designs and also post comments on some non-active design. You may make general posts on what you think is missing from the designs. Or you can focus in on a critiique a few specific designs.
   
   
2. Learning Objective of this assignment is to come up with a high level design. You focus is in on what should be done, or what you think a good design should look like. The how stage comes later on as you become proficient in CSS and Dreamweaver. Note your initial high level design ideas may or may not be feasible. For example, you can make some rough sketches of what you think should be done. More specifically, you may like dahlias, so you come up with a design with various dahlia flowers. You goal is to come up with rough sketches &/or visual images in your mind on what you want the site to look like. You don't have to hand in anything.
   
   
3. Take a look at css Zen Garden and post comments on the relative blackboard dicussion board.

For this assignment You must post on blackboard to receive assignment credit . After posting also come up with some initial design ideas (i.e., central theme, specific look and feel, etc. ) - this is what you think should be done. You don't have to post your design ideas.

Checklist...

• Make sure you have both posts (zen and cim272 designs) on blackboard discussion board
• if still not sure of project, review project page, project is just a redesign of a select set of files.
• come up with ideas (what) you want to do with a new design

Emphasizes Topics in Chapter 1 CSS Book and/or Chapter 16 Nutshell Book
HTML Tags a, body, H2, H3, H4, strong, p, ol, and li Modified with Color, Text Alignment, Font-Family

Given this simplified syllabus HTML syllabusH3 File and using Blackboard Videos you are to create to sample presentation files. In this assignment, you will only be modifying HTML tags, Normally Dreamweaver automatically creates class names (style1..stylen). However in this assignment we will using code view and CSS dialog display to specifically add style rules to XHTML tags.

Blackboard also has a chapter 1 video.

Checklist

• take blackboard chapter 1 quiz
• watch blackboard video on completing H3
• make sure h3 is part of your home page: cim student search

Week 3

Covers Advance Selection Rules & In Depth FireFox Web-Developer
Chapter 2 CSS Book and/or chapter 17 Nutshell Book

Warning you don't want the assignments influencing your project design. You may want to watch the structure videos assignment H7 and decide on a design strategy (theme) before starting assignments h4..h9;

Video on blackboard is available that takes you step by step through the assignment. This assignment uses the same content as H3, but in syllabusH4.htm we are applying the structure to content using div blocks, class names and ids. Once you are finished test your style sheet on the actual syllabus.htm file.

Checklist

• take blackboard chapter 2 quiz
• watch blackboard video on completing H4
• make sure h4 is part of your home page: cim student search
• on blackboard use tools --> my grades to verify quiz grades for intro, chapter 1 and chapter 2.

Week 3

Font and Text Properties
Chapter 3 CSS Book and /or Chapter 18 Nutshell

Video available on blackboard for completing the assignment; You will be using these two files syllabusH5.htm and cssH5.js - Note in the Fall/07 most designed followed this assignment, however you should try to come up with an innovative design.

Checklist

• take blackboard chapter 3 quiz
• watch blackboard video on completing H5
• make sure h5 is part of your home page: cim student search and the the javascript is working

Add CSS to syllabusH4.htm. to create this image.
get FireBug Add-on Video demonstrates these files: firebug.htm , jsBug.htm, fixed.htm, cs4b, inputName.html & Google Page Speed.

You may use these font definitions, (right^click to save file) ItalianCursive.ttf , ItalianCursive.eot , and ItalianCursive.otf, BLOODRAC.ttf, BLOODRAC.otf and BLOODRAC.eot; ttf is the original format, ItalianCursive.ttf may have bugs in font file, Chrome needs ItalianCursive.otf. Otf is the recommended format. Note saddleback.edu server is blocking, *.otf files. The OTF font files were moved to cim.

You may also use a Web Based Font...

• Adobe Restricted Use   https://typekit.com/ On CIM we cannot use typekit, 1 site free.
• No Restrictions  http://www.google.com/webfonts
• Cufon is very popular and consider easiest to use.

Note using a CDN (Content Delivery Network) provider is currently the recommended way to create Web Sites. By using a Google or Adobe font you are using a CDN.

Assignment covers Mutliscreen, Adobe Device Central, Adobe Browser Lab, Chrome Developer Tools, IE8, and Firefox FireBug.

Checklist

• take a second look at Web Based Fonts and read up on CDN - content delivery networks which are becoming popular
• watch blackboard video on completing H6
• make sure h6 is part of your home page: cim student search and the the javascript is working

Box Model, Display, Float & Clear
Chapter 4 CSS Book &/or Chapter 19 Nutshell

Access videos on blackboard to complete the presentation file for tabsH7.htm tabsH7 has this book Image.

Checklist

• By now, you should be comfortable with the structure so jump ahead to HP.
• Take chapter 4 blackboard quiz
• Watch blackboard video on completing H7
• Make sure h7 is part of your home page: cim student search - note these assignments don't need to be exact matches

Colors and Backgrounds
Chapter 5 CSS Book &/or Chapter 20 Nutshell

Viewgraph's and tabs8.zip data file available on blackboard; Watch Videos complete blue flame image. Note in Fall 08, many followed this designed, you should try to come up with an innovative design.

Checklist

• complete chapter 5 blackboard quiz
• watch blackboard video on completing H8
• make sure h8 is part of your home page: cim student search - remember you can be creative on this assignment, just demonstrate the basic capabilites I'm looking for.

RWD Responsive Web Design Fall/2013

Reading: Wikipedia RWD, Original Marcotte Publication, Examples of CSS3 RWD sites,

Previous presentation by Joe Ascona

O'Reilly Conference RWD April 16th 2012

Web Site Strategy Just Videos

Watch blackboard videos on the Class Web site Strategy. Decide on a project option. Come up with a feasible high level CSS presentation strategy. However, your design should not be influenced by the assignments and/or previous designs. Note you have three options to complete the project:

1. You can enhance a previous design, however you must let me know which one you will be using.
2. Form a group - a blackboard thread will be available that you can use to form a group; You probably want to include presentation theme and objectives in your group thread.
3. Work independently on a brand new design.

Assignments are geared toward understanding the page layout structure of the project. As soon as you are comfortable with the assignment page layout structure and feel you know enough about CSS to start the project, you can watch these videos.

Checklist

• Use Blackboard tools --> My Grades to verify all quiz grades
• Make sure all assignments are done: cim student search -
• Make sure project is done
• Review course grading option if you didn't complete all assignments/projects.

Week 5

Saddleback like color image.

P. S. You should first edit the css file and add the selector class names, once you have appropriate CSS Class names, You can use Dreamweaver's CSS Dialog Panel to fine tune the presentation. You don't have to exactly match the output colors or margins. But you should pick only three similar colors. (Main-Trim-Highlight). Note if you click on a div section, and then click new CSS rule, the current selector is added to the CSS new rule dialog panel

Project Preparatory Assignment for handling XHTML table tags and classes.

Given this HTML page (it includes all the necessary XHTML Table Tags and classes). Add CSS definitions to XHTML table tags and classes to create this firefox image. Save the finished file in your cim.saddleback.edu account and make sure your index page should has a link to this assignment.This CSS table editor may be useful.

You may set the table border to 1 using the property inspector, but all other coding should be done in a separate CSS file. Note I have not been able to get the CSS table border properties to work with td, th cells; It seems border-collapse does not work. Also trying to design a system without tables is not feasible in Dreamweaver 8. Dreamweaver's CSS rendering is insufficient. Best approach so far is too use dreamweaver in code view (or you can Design Mode: layout, CSS Rendering, CSS borders) and use an external browser to view your work, after the first F12 from Dreamweaver keep the browser window open (with local file URL) and just reload the image.

Project Report - CSS Tricks, Hacks and Presentation Objectives.

Last day of class informal class discussion on your final project. How you did certain things in CSS, what were your presentation objectives.