Visualizing The Code

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

3 comments

Comments 1 - 3 of 3 previous next Post a comment

Post a comment
Embed Video
Edit your comment Cancel

9 Favorites & 1 Group

Visualizing The Code - Presentation Transcript

  1. Build your Vision, Visualize the Code Advanced CSS Stephen Ireland
  2. What Does it Mean? Visualize? <div id=”header”> <div id= <div id= ”sidebar”> ”content”> <div id=”footer”> Advanced CSS Stephen Ireland
  3. Example 1. (terralien.com) Advanced CSS Stephen Ireland
  4. Visualizing Example 1. Advanced CSS Stephen Ireland
  5. Visualizing Example 1. div id=”wrapper” Advanced CSS Stephen Ireland
  6. Visualizing Example 1. Advanced CSS Stephen Ireland
  7. Visualizing Example 1. div div div div Advanced CSS Stephen Ireland
  8. Visualizing Example 1. ul h1 h2 p h3 h2 p ul li li Advanced CSS Stephen Ireland
  9. Example 2. (alpkit.com) Advanced CSS Stephen Ireland
  10. Visualizing Example 2. Advanced CSS Stephen Ireland
  11. Visualizing Example 2. div id=”wrapper” Advanced CSS Stephen Ireland
  12. Visualizing Example 2. Advanced CSS Stephen Ireland
  13. Visualizing Example 2. div div div Advanced CSS Stephen Ireland
  14. Visualizing Example 2. li h1 ul img li li h2 p h3 li p li div li Advanced CSS Stephen Ireland
  15. Example 3. (happycog.com) Advanced CSS Stephen Ireland
  16. Visualizing Example 3. Advanced CSS Stephen Ireland
  17. Visualizing Example 3. div id=”wrapper” Advanced CSS Stephen Ireland
  18. Visualizing Example 3. Advanced CSS Stephen Ireland
  19. Visualizing Example 3. div div div div Advanced CSS Stephen Ireland
  20. Visualizing Example 3. Advanced CSS Stephen Ireland
  21. Visualizing Example 3. h1 ul h2 h2 h2 img img img p p p h2 h2 p h3 p Advanced CSS Stephen Ireland
  22. It’s a balance Design vs’ code • Layout philosophy - consider users first, so be aware of conventions. • Less is more - when it comes to markup. Don’t add extra tags to create space or for no reason. • If you plan your designs carefully you will make the code easier to write. Structure your HTML page before you start styling them with CSS. Advanced CSS Stephen Ireland
  23. Practical: Take 3 websites • Capture a screenshot of each design (use Grab from the Applications folder on your Mac) • Consider the HTML markup needed to create each design. • Bring the screenshot into a graphics application (Photoshop, Illustrator or InDesign) or print onto paper. • Sketch over the HTML markup you think is required to be able to achieve that web page design. • Use Dreamweaver to write the markup you decide upon and save it for reference - I want to see it! Advanced CSS Stephen Ireland

+ sdirelandsdireland, 3 years ago

custom

2087 views, 9 favs, 1 embeds more stats

More Info

© All Rights Reserved

Go to text version
  • Total Views 2087
    • 2084 on SlideShare
    • 3 from embeds
  • Comments 3
  • Favorites 9
  • Downloads 1
Most viewed embeds
  • 3 views on http://semba08.blogspot.com

more

All embeds
  • 3 views on http://semba08.blogspot.com

less

Flagged as inappropriate Flag as inappropriate
Flag as innappropriate

Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

Cancel

Categories

Groups / Events