0
Dennis Deacon Jan. 26, 2009
<ul><li>“… a set of standardized best practices for building web sites, and a philosophy of web design and development tha...
<ul><li>HTML/XHTML for semantic markup of content </li></ul><ul><li>Cascading Stylesheets (CSS) for the presentation of co...
<ul><li>“… an objective and a practice to create documents with HTML that contain only the author's intended meaning, with...
<ul><li>Reduces file sizes, page load times & bandwidth </li></ul><ul><li>Easier to keep layout and look consistent across...
 
Logo Tagline Search Box Navigation Main Content Featured Items Heading 1 Heading 2 Heading 3 Story Text 1 Story Text 2 Sto...
<ul><li>In-line </li></ul><ul><ul><li>Effects only specific content applied to </li></ul></ul><ul><li>Embedded/Internal St...
<ul><li>Allows you to structure, group, tag select content for presentation and functional purposes </li></ul><ul><ul><li>...
1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 Adobe  acquires Macromedia Macromedia  purchases Dreamweaver f...
 
<ul><li>Dennis Deacon </li></ul><ul><li>[email_address] </li></ul>
Upcoming SlideShare
Loading in...5
×

Designing using Web Standards with Dreamweaver

1,670

Published on

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

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,670
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
115
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Designing using Web Standards with Dreamweaver"

  1. 1. Dennis Deacon Jan. 26, 2009
  2. 2. <ul><li>“… a set of standardized best practices for building web sites, and a philosophy of web design and development that includes those methods.” </li></ul><ul><li>— Wikipedia </li></ul>
  3. 3. <ul><li>HTML/XHTML for semantic markup of content </li></ul><ul><li>Cascading Stylesheets (CSS) for the presentation of content </li></ul><ul><li>JavaScript for functionality related to content </li></ul>
  4. 4. <ul><li>“… 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. ” </li></ul><ul><li>— Wikipedia </li></ul><ul><li>Semantic = Communicates Meaning </li></ul><ul><li>Examples </li></ul><ul><ul><li>Tag Headings as Headings </li></ul></ul><ul><ul><li>Tag a list of content as a list </li></ul></ul>
  5. 5. <ul><li>Reduces file sizes, page load times & bandwidth </li></ul><ul><li>Easier to keep layout and look consistent across site </li></ul><ul><li>Easier & faster to redesign </li></ul><ul><li>Reduces code, increases prominence of content — good for search engines </li></ul><ul><li>Aids in accessibility </li></ul>
  6. 7. Logo Tagline Search Box Navigation Main Content Featured Items Heading 1 Heading 2 Heading 3 Story Text 1 Story Text 2 Story Text 3
  7. 8. <ul><li>In-line </li></ul><ul><ul><li>Effects only specific content applied to </li></ul></ul><ul><li>Embedded/Internal Style Sheet </li></ul><ul><ul><li>Affects only the page it is embedded in </li></ul></ul><ul><li>External </li></ul><ul><ul><li>Stores styles in external file which is referenced by all pages </li></ul></ul><ul><ul><li>Can be referenced by all pages on site; most powerful method </li></ul></ul>
  8. 9. <ul><li>Allows you to structure, group, tag select content for presentation and functional purposes </li></ul><ul><ul><li>DIVs </li></ul></ul><ul><ul><ul><li>Can only be used once in any individual page </li></ul></ul></ul><ul><ul><ul><li>Used for grouping sections of content </li></ul></ul></ul><ul><ul><li>Classes </li></ul></ul><ul><ul><ul><li>Can be implemented on multiple elements on a page </li></ul></ul></ul><ul><ul><ul><li>Used for unique situations </li></ul></ul></ul>
  9. 10. 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 Adobe acquires Macromedia Macromedia purchases Dreamweaver from Allaire Systems <ul><li>Features : </li></ul><ul><li>Live view </li></ul><ul><li>InContext Editing </li></ul><ul><li>Adobe Photoshop Smart Objects Support </li></ul><ul><li>Features : </li></ul><ul><li>Improved CSS support </li></ul><ul><li>Mobile Support </li></ul><ul><li>Ajax Support </li></ul><ul><li>XSLT Support </li></ul><ul><li>Features : </li></ul><ul><li>Defaults to XHTML </li></ul><ul><li>Improved integration with Flash and Fireworks </li></ul><ul><li>Improved CSS Support </li></ul><ul><li>Features : </li></ul><ul><li>Streamlined design and development interface </li></ul><ul><li>Modernized page layout and design environment </li></ul><ul><li>Powerful and open coding environment </li></ul>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
  10. 12. <ul><li>Dennis Deacon </li></ul><ul><li>[email_address] </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×