Build your Vision,
               Visualize the Code


Advanced CSS                        Stephen Ireland
What Does it Mean?

    Visualize?

                       <div id=”header”>

                 <div id=       <div id=
   ...
Example 1. (terralien.com)




Advanced CSS                 Stephen Ireland
Visualizing Example 1.




Advanced CSS             Stephen Ireland
Visualizing Example 1.
         div




               id=”wrapper”




Advanced CSS                  Stephen Ireland
Visualizing Example 1.




Advanced CSS             Stephen Ireland
Visualizing Example 1.
        div

        div




        div              div




Advanced CSS             Stephen Ireland
Visualizing Example 1.
                         ul
          h1




           h2
           p


                         ...
Example 2. (alpkit.com)




Advanced CSS              Stephen Ireland
Visualizing Example 2.




Advanced CSS             Stephen Ireland
Visualizing Example 2.
 div




               id=”wrapper”




Advanced CSS                  Stephen Ireland
Visualizing Example 2.




Advanced CSS             Stephen Ireland
Visualizing Example 2.
                                 div
  div

  div




Advanced CSS             Stephen Ireland
Visualizing Example 2.
                                       li
  h1
  ul
  img

                                       l...
Example 3. (happycog.com)




Advanced CSS                Stephen Ireland
Visualizing Example 3.




Advanced CSS             Stephen Ireland
Visualizing Example 3.
    div




               id=”wrapper”




Advanced CSS                  Stephen Ireland
Visualizing Example 3.




Advanced CSS             Stephen Ireland
Visualizing Example 3.
    div




    div




    div                       div




Advanced CSS             Stephen Ireland
Visualizing Example 3.




Advanced CSS             Stephen Ireland
Visualizing Example 3.
       h1




         ul
         h2              h2    h2
         img             img   img

   ...
It’s a balance

    Design vs’ code
• Layout philosophy - consider users
    first, so be aware of conventions.
• Less is ...
Practical:

    Take 3 websites
• Capture a screenshot of each design (use Grab from the
    Applications folder on your M...
Upcoming SlideShare
Loading in …5
×

Visualizing The Code

3,305 views

Published on

Published in: Technology, Education
5 Comments
11 Likes
Statistics
Notes
No Downloads
Views
Total views
3,305
On SlideShare
0
From Embeds
0
Number of Embeds
52
Actions
Shares
0
Downloads
1
Comments
5
Likes
11
Embeds 0
No embeds

No notes for slide

Visualizing The Code

  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

×