Art 49540 4KN Design for the Web 2

Weekly Topics Outline

Week 1 Intro and review of CSS, the ZenCSSgarden approach.

The ‘Zen Garden’ approach. Separating appearance from structure, using semantic markup.
Browser development issues. Web 2.0 design guidelines. Hierarchy and the unstyled core document. Viewing CSS with WebDeveloper and Firebug in Firefox.

---

Week 2 CSS review continued. The Color Box Method.

The color box method.
Review of CSS positioning and CSS syntax.
Fixed-width 2 & 3 column layouts, page centering, good CSS practices. Accessibility. Doc type. CSS style sheets: internal/exernal.

---

Week 3 The Retro themed Design Project

Adding background images.
Image Replacement.
Selectors, borders, color models.

---

Week 4

CSS3 and CSS2 rounded corners boxes, drop shadow.
Fluid [%] layouts. Content overflow.
Float review

---

Week 5

Contextual/advanced selectors.
CSS3 drop cap, first-line, generated text. More on rounded corners boxes.
Inheritance & specificity. CSS3 opacity. Flexible scaling of images.

---

Week 6 The Neighborhood Documentary Project

Elastic layouts. relative font sizes [pixel,percent and em].
Monitor resolution and sizing. Fluid/expanding images.
Max and min-width elements.

---

Week 7

CSS Navigation elements: using lists and rollovers.
Tabbed menus. Dropdown and flyout menus.
Fixed positioned elements [not fixed-size]. Reset CSS.

---

Week 8

CSS rounded corners box [sliding doors]. Angled layouts, stacking DIVS (z-layer)

---

Week 9 MIDTERM PORTFOLIO due. The Portfolio Project: horizontal page

Design a web portfolio [for all of your semester pages].
Horizontal navigation page design. CSS gallery examples using rollovers and lists.
Build your page using the color box method; create DIV containers and start CSS.
Grids for page layout. Lightbox alternatives for galleries [lightview, fancybox, slimbox2]. Photoshop mock-ups.

---

Week 10

Font replacement techniques: Cufón, CSS3 @font-face, siFR [v2]

---

Week 11

Alternate style sheets for screen sizes: ‘adaptive layout’. SWF image replacement.

---

Week 12 The Remapped Page Project

Remapping a page from another media source: print magazine, catalogue, etc. Create a structured document with appropriate semantic naming conventions. Create a design prototype in Photoshop or Illustrator, collect any additional images for the page. Use of grids to structure your page.
Build your page using the color box method; create DIV containers and start CSS.
Google browser size tool, review of good practices

---

Week 13

Multiple style sheets, styles for print, handheld, phone, video. Designing for mobile phones, iPhone web pagesml I.E.
Hacks and fixes: conditional comments, IE box model. Multi-browser tests. Adobe Device Central.

---

Week 14

Go further: CSS3 standards: multiple BG images, Advanced Layout Module.
Style sheet switching.
What’s next for the web, HTML 5, video and audio (Vorbis VLC media playe and Ogg encoder)

Revise and test your pages on multiple browsers.
Go further: CSS3 standards: multiple BG images, Advanced Layout Module. Style sheet switching.

---

Designing for a content-based process

[review the process for creating CSS using the Color Box model at http://www.maxdesign.com.au/presentation/process/]

1. Gather the content. Analyze your project idea based on the client goals consider audience, media and content requirements.

2. Analyze the semantics of your content. Use structural elements to break up your content into regions.
3. Flowchart and wire frame your project

FLOWCHART shows the pages and organization of your entire site. Use wire frame and the Grey Box method. [http://www.jasonsantamaria.com/archive/2004/05/24/grey_box_method.php]
WIREFRAME shows your page division or template based on functional areas.

4. Create static designs to prototype your ideas.
Prototype your layouts in Photoshop or Illustrator: your prototype should show the look and style of your page
Make a screen size document [for 1024x768 use 955x600]
Measure out boxes for each container/column
Make each container a different color so you can visualize the structure [delete colors later]
Add graphics or images
dummy in type

5. Create CSS markup that structures the content.
CONTAINER: box that holds the whole document HEADER or BANNER[logo or branding]
NAVIGATION [you could have a main nav and a secondary nav]
LINKS MENU to other pages
CONTENT [can be more than one box] text and images with subheads or captions as needed
FOOTER [optional]
6. Add mark-up guides: make a copy of your prototype and label it with the structure names. This part of the process results in a static prototype.

7. Write the HTML (with CSS) document(s)

8. To check the div structure, use the Color Box method
Position the elements
• divs can be fixed-width, liquid, em-driven
• will the layout be centered?
• positioning using normal flow (inline), absolute, relative, floats
ï give each box a unique color so they are visible

9. copy your text content into each box

10. format your content with styles

11. make the CSS styles external
• Optimize the content order without styles
• Chose a development browser that is current and standards-compliant.
• Organize your CSS and comment your mark-up
• Your page should linearize without styles; arrange content into a meaningful order
• When prototyping, use internal styles, then switch to external.
• Divide your CSS into multiple files: layout styles, color styles, typographical styles

Assignment Outline

Assignment sheets are given out each week. For previous weeks, go to the website.

---

week 1 PURCHASE BOOKS download web tools and sample text, analyze the text for CSS nesting and diagram it.
download web tools and sample text, analyze the text for CSS nesting and diagram it.

Web Developer addon for Firefox: http://addons.mozilla.org

Firebug addon for Firefox: http://addons.mozilla.org

TextWrangler http://www.barebones.com/products/textwrangler/

GRID: http://sprymedia.co.uk/article/Grid

Pick/analyze colors & palettes without Photoshop: http://www.colorzilla.com/firefox/

CSS ZenGarden text: http://www.csszengarden.com/zengarden-sample.html

Browser size: http://browsersize.googlelabs.com/

---

week 2 Color boxes, CSS review create a Color box layout using the core doc & fixed positioning

---

week 3 Retro Themed Design: add Retro background images to the Color Box layout & use IR.

---

week 4 exercise: make a fixed round corner box in CSS

---

week 5 add a transparent element

---

week 6 Neighborhood Documentary Page: new design, elastic positioning and EMs

---

week 7 use lists + rollovers

---

week 8 flexible round corners box

---

week 9 MIDTERM PORTFOLIO Portfolio Project: design a portfolio page in horizontal format

---

week 10 finalize design, create DIV containers, start CSS

---

week 11 implement CSS make an adaptive layout version

---

week 12 Remapped Page Project: creating the semantic HTML design a portfolio page using horizontal CSS design

---

week 13 finalize design, create DIV containers, start CSS make a style sheet for print.

---

week 14 complete CSS and test

---

FINAL PRESENTATION Final presentation is scheduled for Art 49540 exam date

DOWNLOADS, WEB TOOLS

Web Developer tool for Firefox http://addons.mozilla.org
Firebug addon for Firefox: http://addons.mozilla.org
TextWrangler http://www.barebones.com/products/textwrangler/
CSSzengarden text: http://www.csszengarden.com/zengarden-sample.html
GRID: http://sprymedia.co.uk/article/Grid
Pick/analyze colors & palettes without Photoshop: http://www.colorzilla.com/firefox/
Browser size: http://browsersize.googlelabs.com/
Design Tool http://sprymedia.co.uk/

Best CSS Web References

Techniques, tutorials: http://www.smashingmagazine.com/category/css/
Layout tutorials: http://www.maxdesign.com.au/presentation/page_layouts/
Menus, Galleries, layouts: http://www.cssplay.col.uk
HTML named colors: http://www.bigbaer.com/reference/colors/named_colors.html
A List Apart: weekly magazine on web design + CSS http://www.alistapart.com/stories/
CSS and HTML reference: http://www.w3schools.com/css/css_examples.asp
CSS crib sheet: http://www.mezzoblue.com/css/cribsheet/
HTML & CSS best practices: http://www.htmldog.com/examples/
Webstandards references http://www.webstandards.org/
List of CSS tools http://www.webstandards.org/
CSS Positioning: http://www.barelyfitz.com/screencast/html-training/css/positioning/

CSS property reference, FAQs, selectors:

http://www.blooberry.com/indexdot/css/index.html
Multi-browser tests http://v04.browsershots.org/

Cheat Sheets

http://cdburnerxp.se/htmlcheatsheet.pdf [XHTML]
http://www.ilovejackdaniels.com/css_cheat_sheet.pdf
http://lorelle.wordpress.com/2005/10/10/html-css-php-and-more-cheat-sheets/

Other CSS Resources & References

Tutorials and reference. http://www.westciv.com/style_master/house/index.html
CSS resources. http://www.ericmeyeroncss.com/links/resources.html
CSS resources. http://cssvault.com/resources.php
CSS resources and links. http://meyerweb.com/eric/css/edge/
CSS resources and links. http://www.cbel.com/style_sheets/
CSS Help Pile [great list of CSS links] http://www.artypapers.com/csshelppile/
Web Development bookmarks [scripts] http://www.squarefree.com/bookmarklets/webdevel.html

Sample Layouts

http://www.stylegala.com/
http://www.dynamicdrive.com/style/layouts/category/C11/ http://intensivstation.ch/en/templates/
http://www.inknoise.com/experimental/layoutomatic.php
http://tools.i-use.it/details.aspx
http://www.positioniseverything.net/articles/onetruelayout/
http://www.glish.com/css/
http://www.barelyfitz.com/screencast/html-training/css/positioning/
http://coda.co.za/archive/20050616/17:11:16

49540 Syllabus page