11
Dennis Deacon Jan. 26, 2009

Designing using Web Standards with Dreamweaver

Embed Size (px)

DESCRIPTION

A presentation given to the Chicago Creative Coalition to illustrate how to build a web site via web standards with Dreamweaver.

Citation preview

Page 1: Designing using Web Standards with Dreamweaver

Dennis DeaconJan. 26, 2009

Page 2: Designing using Web Standards with Dreamweaver

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

— Wikipedia

Page 3: Designing using Web Standards with Dreamweaver

HTML/XHTML for semantic markup of content

Cascading Stylesheets (CSS) for the presentation of content

JavaScript for functionality related to content

Page 4: Designing using Web Standards with Dreamweaver

“…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. ”

—WikipediaSemantic = Communicates Meaning Examples

Tag Headings as Headings Tag a list of content as a list

Page 5: Designing using Web Standards with Dreamweaver

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

Page 6: Designing using Web Standards with Dreamweaver
Page 7: Designing using Web Standards with Dreamweaver

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

Page 8: Designing using Web Standards with Dreamweaver

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

Page 9: Designing using Web Standards with Dreamweaver

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

CS4v.10

Released

CS3v.9

Released

v.8Release

d

MX 2004v.7

Released

MXv.6

Released

v.4Release

d

v.3Release

d

v.2Release

d

Page 10: Designing using Web Standards with Dreamweaver
Page 11: Designing using Web Standards with Dreamweaver

Dennis DeaconDennis Deacon

[email protected]@gmail.com