Cascading Style Sheets for Web Design: Benefits of Separating Presentation from Content - PowerPoint PPT Presentation

Loading...

PPT – Cascading Style Sheets for Web Design: Benefits of Separating Presentation from Content PowerPoint presentation | free to view - id: 139eb8-NTc3N



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

Cascading Style Sheets for Web Design: Benefits of Separating Presentation from Content

Description:

The Hypertext Markup Language (HTML) is a simple markup language used to create ... Code Bloat / semantic structure. Accessibility. Blind users. Low-vision users ... – PowerPoint PPT presentation

Number of Views:198
Avg rating:3.0/5.0
Slides: 14
Provided by: Admini181
Category:

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: Cascading Style Sheets for Web Design: Benefits of Separating Presentation from Content


1
Cascading Style Sheets for Web Design Benefits
of Separating Presentation from Content
  • Dave Mattson
  • Beckman External Relations
  • ITG Forum, April 12, 2005

2
History of HTML
  • Initial Purpose
  • The Hypertext Markup Language (HTML) is a simple
    markup language used to create hypertext
    documents that are platform independent. HTML
    documents are SGML documents with generic
    semantics that are appropriate for representing
    information from a wide range of domains. HTML
    markup can represent hypertext news, mail,
    documentation, and hypermedia menus of options
    database query results simple structured
    documents with in-lined graphics and hypertext
    views of existing bodies of information. (From
    1995 HTML 2.0 Specification)
  • Mosiac
  • Presentation becomes as important as content
  • Browser Wars

3
HTML for Presentation
  • Tables for layout, images for text
  • http//www.unc.edu/
  • Flash Animations
  • http//www.chartersills.com

4
HTML for Presentation
  • Problems
  • Code Bloat / semantic structure
  • Accessibility
  • Blind users
  • Low-vision users
  • High-resolution monitors
  • PDAs
  • Web Redesign
  • Edits, small changes

5
Enter CSS
  • Cascading Style Sheets
  • This specification defines Cascading Style
    Sheets, level 2 revision 1 (CSS 2.1). CSS 2.1 is
    a style sheet language that allows authors and
    users to attach style (e.g., fonts and spacing)
    to structured documents (e.g., HTML documents and
    XML applications). By separating the presentation
    style of documents from the content of documents,
    CSS 2.1 simplifies Web authoring and site
    maintenance. (From CSS 2.1 Specification)
  • Semantic structure
  • Accessibility (user can define styles)
  • Redesigns (text-based)
  • Other benefits (search engines, PDAs, etc.)

6
Examples of CSS
  • University of Illinois
  • http//www.uiuc.edu
  • CSSZengarden
  • http//www.csszengarden.com
  • Electrosensory Signal Processing Lab
  • http//nelson.beckman.uiuc.edu/
  • Mattson Website
  • https//netfiles.uiuc.edu/dmattson/www/

7
Tables vs. CSS
  • Beckman Front page
  • http//www.beckman.uiuc.edu
  • http//www.beckman.uiuc.edu/test/BItemplate/NewBI6
    .html

8
Tables vs. CSS
  • Beckman Front page
  • http//www.beckman.uiuc.edu
  • http//www.beckman.uiuc.edu/test/BItemplate/NewBI6
    .html

9
Benefits of using CSS
  • Accessibility
  • Gives the user as much power as the designer
  • Some browsers allow for user style sheets or to
    turn off author style sheets
  • High resolution monitors
  • PDAs

10
Benefits of using CSS
  • Visual Consistency
  • One Style Sheet for all pages
  • Make change in one place

11
Benefits of using CSS
  • Easier Web Redesigns
  • Update html to change content
  • Update style sheet to change presentation
  • No images to re-do in Photoshop

12
Benefits of using CSS
  • Higher search engine results
  • Make a site with a clear hierarchy and text
    links. Every page should be reachable from at
    least one static text link.
  • Create a useful, information-rich site and write
    pages that clearly and accurately describe your
    content.
  • Think about the words users would type to find
    your pages, and make sure that your site actually
    includes those words within it.
  • Try to use text instead of images to display
    important names, content, or links. The Google
    crawler doesn't recognize text contained in
    images. (from http//www.google.com/webmasters/g
    uidelines.html)

13
Other CSS Resources
  • UIUC Rehab Center (Jon Gunderson)
  • CSS tutorial
  • Illinois Accessible Web Publishing Wizard for
    Microsoft Office
  • CSS Design Techniques
  • Eric Meyer on CSS, Eric Meyer, New Riders, 2003
  • More Eric Meyer on CSS, Eric Meyer, New Riders,
    2004
  • Designing CSS Web Pages, Christopher Schmitt, New
    Riders, 2003
  • Designing with Web Standards, Jeffrey Zeldman,
    New Riders, 2004
  • HTML Utopia Designing Without Tables using CSS,
    Dan Shafer, SitePoint, 2004
  • The CSS Anthology 101 Essential Tips, Tricks
    Hacks, Rachel Andrew, SitePoint, 2004
  • CSS Reference
  • W3C Style Activity Area
  • W3C CSS level 1 Test Suites
  • Cascading Style Sheets, Eric Meyer, O'Reilly,
    2004
  • Dynamic HTML The Definitive Reference, Danny
    Goodman, O'Reilly, 2002
  • Cascading Style Sheets, Lie and Bos,
    Addison-Wesley, 1997
About PowerShow.com