O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Style Your Site Part 2

(Part 2 of 2) Cascading Style Sheets (CSS) control the look and feel of modern web pages while also separating presentation from content. Learn comprehensive CSS techniques in this step-by-step coding demonstration that starts with an un-styled web page and ends up with a finished design. This presentation will also touch on accessibility, semantic markup, visual design and other site-design related issues.

  • Entre para ver os comentários

Style Your Site Part 2

  1. 1. Style Your Site A Comprehensive CSS Design Tutorial Ben MacNeill User Interface Designer, eXtension at NCSU http://commons.wikimedia.org/wiki/File:SkeletonsNumbers.png
  2. 2. Why Use CSS? document document content presentation
  3. 3. Some real reasons • Accessibility (Section 508 anyone?) • Reduce complexity/repetition in the markup • The Cosmetic stuff is all in one place. Global design changes are easy. • Your content is more portable for mobile devices, feed readers, printing • It's not 1999
  4. 4. Simple, semantic html markup creates good structure Laying the Ground Work
  5. 5. First Session • Fixed-width layout • Flexible, bulletproof text-based navigation • Light design styling • Print stylesheet (if time)
  6. 6. Second Session The Enhancing • CSS-based image sprites & background images • Fluid layout • Font control • CSS reset stylesheet • Convert form to semantic markup and style it • Mobile stylesheet for the iPhone
  7. 7. Let’s Go to the Browser
  8. 8. Adding CSS • Link <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;styles.cssquot; media=quot;screenquot; /> • Embed <style media=quot;screenquot; type=quot;text/cssquot;> add style rules here... </style> • Inline <p style=quot;color:red;quot;> • Import into CSS @import quot;styles.cssquot;;
  9. 9. Tools & Testing • Firebug http://getfirebug.com/ • Web Developer Toolbar by Chris Pederick (Firefox) http://chrispederick.com/work/web-developer/ • Target: Firefox > Safari > IE8 > IE7
  10. 10. Tip: Firebug can help with the Box Model
  11. 11. • CSS Selectors Cheat Sheet: www.cameronmoll.com/articles/widget/cheatsheet.pdf
  12. 12. • Better Font Stack: http://unitinteractive.com/blog/2008/06/25/better-css-font-stacks/
  13. 13. August 27, 2001 IE6 released 8 http://www.stopie6.org/
  14. 14. Thanks! Ben MacNeill User Interface Designer, eXtension at NCSU ben.macneill@extension.org Slides and zipped Code examples: http://www.slideshare.net/chillnc http://drop.io/benmacneill My CSS bookmarks: http://del.icio.us/chillnc/css