Dennis Deacon Jan. 26, 2009

“… a set of standardized best practices for building web sites, and a philosophy of web design and development that includes those methods.” — Wikipedia

“… a set of standardized best practices for building web sites, and a philosophy of web design and development that includes those methods.”

— Wikipedia

HTML/XHTML for semantic markup of content Cascading Stylesheets (CSS) for the presentation of content JavaScript for functionality related to content

HTML/XHTML for semantic markup of content

Cascading Stylesheets (CSS) for the presentation of content

JavaScript for functionality related to content

“… an objective and a practice to create documents with HTML that contain only the author's intended meaning, without any reference to how this meaning is presented or conveyed - the doctrine of separation of presentation and content. ” — Wikipedia Semantic = Communicates Meaning Examples Tag Headings as Headings Tag a list of content as a list

“… an objective and a practice to create documents with HTML that contain only the author's intended meaning, without any reference to how this meaning is presented or conveyed - the doctrine of separation of presentation and content. ”

— Wikipedia

Semantic = Communicates Meaning

Examples

Tag Headings as Headings

Tag a list of content as a list

Reduces file sizes, page load times & bandwidth Easier to keep layout and look consistent across site Easier & faster to redesign Reduces code, increases prominence of content — good for search engines Aids in accessibility

Reduces file sizes, page load times & bandwidth

Easier to keep layout and look consistent across site

Easier & faster to redesign

Reduces code, increases prominence of content — good for search engines

Aids in accessibility

Logo Tagline Search Box Navigation Main Content Featured Items Heading 1 Heading 2 Heading 3 Story Text 1 Story Text 2 Story Text 3

In-line Effects only specific content applied to Embedded/Internal Style Sheet Affects only the page it is embedded in External Stores styles in external file which is referenced by all pages Can be referenced by all pages on site; most powerful method

In-line

Effects only specific content applied to

Embedded/Internal Style Sheet

Affects only the page it is embedded in

External

Stores styles in external file which is referenced by all pages

Can be referenced by all pages on site; most powerful method

Allows you to structure, group, tag select content for presentation and functional purposes DIVs Can only be used once in any individual page Used for grouping sections of content Classes Can be implemented on multiple elements on a page Used for unique situations

Allows you to structure, group, tag select content for presentation and functional purposes

DIVs

Can only be used once in any individual page

Used for grouping sections of content

Classes

Can be implemented on multiple elements on a page

Used for unique situations

1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 Adobe acquires Macromedia Macromedia purchases Dreamweaver from Allaire Systems Features : Live view InContext Editing Adobe Photoshop Smart Objects Support Features : Improved CSS support Mobile Support Ajax Support XSLT Support Features : Defaults to XHTML Improved integration with Flash and Fireworks Improved CSS Support Features : Streamlined design and development interface Modernized page layout and design environment Powerful and open coding environment CS4 v.10 Released CS3 v.9 Released v.8 Released MX 2004 v.7 Released MX v.6 Released v.4 Released v.3 Released v.2 Released

Features :

Live view

InContext Editing

Adobe Photoshop Smart Objects Support

Features :

Improved CSS support

Mobile Support

Ajax Support

XSLT Support

Features :

Defaults to XHTML

Improved integration with Flash and Fireworks

Improved CSS Support

Features :

Streamlined design and development interface

Modernized page layout and design environment

Powerful and open coding environment

Dennis Deacon [email_address]

Dennis Deacon

[email_address]