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 of CSS.
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 Techno-theme Design Project
Adding background images, using image replacement. Selectors, advanced selectors.
Week 4
Fixed width round corner boxes. Examples of fluid [%] layouts, Review of floats. Content overflow.
Week 5
Using contextual selectors, inheritance & specificity. transparency/opacity, flexible scaling of images.
Week 6 The Decorated Page Project
Elastic layouts. relative font sizes [percent and em]. Max and min-width elements.
Week 7
Navigation elements: using lists and rollovers. Fixed positioned elements [not fixed-size]. Reset CSS.
Week 8
Fluid round corners boxes, sliding doors, tabbed navigation, angled layouts, stacking DIVS (z-layer)
Week 9 MIDTERM PORTFOLIO due. 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.
Week 10
the siFR technique for display fonts [v3 and v3]. Font Burner technique for display fonts.
Week 11
Alternate style sheets for screen sizes: ‘adaptive layout’. SWF image replacement. Adobe Device Central.
Week 12 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.
Week 13
Multiple style sheets, styles for print, handheld, phone, video.
I.E. Hacks and fixes: conditional comments, IE box model. Multi-browser tests.
Week 14 Remapped Page Project: implementing the design in CSS
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/
CSS ZenGarden text: http://www.csszengarden.com/zengarden-sample.html
week 2 Color boxes, CSS review create a Color box layout using the core doc & fixed positioning
week 3 Techno-theme Design add Techno 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 Decorated Page new design, elastic positioning and EMs
week 7 use lists + rollovers
week 8 flexible round corners box
week 9 MIDTERM PORTFOLIO Remapped Page Project creating the semantic HTML
week 10 finalize design, create DIV containers, start CSS
week 11 implement CSS make an adaptive layout version
week 12 Portfolio Project 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 addon 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
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