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. Viewing CSS with WebDev and Firebug in Firefox.
Diagnostic exercise using ZenCSS text with a Negative Margin Layout.
Week 2 CSS review. The Color Box Method and Positioning Review.
The color box method.
Review of CSS positioning, selectors, CSS syntax. 2 & 3 column layouts, good CSS practices.
Accessibility. Doc types. CSS style sheets: internal/exernal.
Week 3 The Retro themed Design Project
CSS/HTML direct prototyping rationale and process.
Monitor resolution and sizing.
Intro to fonts: relative font sizes [pixel,percent and em], Em-based font layout, elastic layout.
Week 4
Font replacement techniques with @font-face.
CSS3 drop cap, first-line, pull quotes, generated text.
Week 5
Contextual/advanced selectors.
CSS3 techniques: rounded corners boxes, drop shadow, gradients. opacity. Multiple column layouts using CSS3.
Max and min-width elements.
Week 6 The Neighborhood Documentary Project
Intro to HTML5, new structural tags and redefined elements.
Week 7
CSS Navigation: using lists and rollovers.
Dropdown and flyout menus. [review of lists]
Fixed positioned elements [not fixed-size]. Reset CSS.
Week 8
HTML5 continued: : Drag and Drop, Geolocation, editable content.
Overview of Canvas and Video/Audio.
Week 9 MIDTERM PORTFOLIO due. The Portfolio Project: horizontal page
Design a web portfolio [for all of your semester pages].
Horizontal navigation page design.
Build your page using the color box method; create DIV containers and start CSS.
Using grids for page layout.
Week 10
CSS gallery examples using rollovers and lists.
JQuery tutorials for sliders, scrolling. Other JQuery examples.
Lightbox alternatives for galleries [lightview, fancybox, slimbox2] and/or JQuery slider/scrolling.
Week 11
Alternate style sheets for screen sizes: ‘adaptive layout’.
JQuery adaptive page. SWF image replacement.
Week 12 The Remapped Page Project
Remapping a page from another media source: print magazine, catalogue, etc.
Create an alternate design, using grids and appropriate semantic elements to structure your page.
Build your page using the color box method; create containers and start CSS formatting.
Week 13
Multiple style sheets, styles for print, handheld, phone, video.
Designing for mobile phones, iPhone web pages. I.E. fixes: conditional comments.
Develop alternate style sheets for three screen sizes: ‘adaptive layout’.
Week 14
What’s next for the web: HTML5, JQuery and other extensions.
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 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: Colorbox and positioning exercise
week 3 RETRO THEMED DESIGN: add Retro background images to the Color Box layout & use IR.
week 4 Using @font-face. Add drop cap, pull quotes, generated text
week 5 Add CSS3: opacity, rounded corners, drop shadow, gradation, CSS3 Multiple column layouts.
week 6 NEWSPAPER PAGE: HTML5: basic tags and approach.
week 7 Add list-based navigation, dropdown or flyout menus
week 8 HTML5 continued: add drag & drop; geolocation.
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