Loading...
Flash Player 9 (or above) is needed to view slideshows. We have detected that you do not have it on your computer.To install it, go here
 
Post to Twitter Post to Twitter
Myspace Hi5 Friendster Xanga LiveJournal Facebook Blogger Tagged Typepad Freewebs BlackPlanet gigya icons
« Prev Comments 1 - 3 of 3 Next »
Add a comment If you have a SlideShare account, login to comment; otherwise comment as a guest.
    SlideShare is now available on LinkedIn. Add it to your LinkedIn profile.

    Visualizing The Code

    From sdireland, 2 years ago Add as contact

    1645 views | 3 comments | 9 favorites | 1 downloads | 1 embeds (Stats)

    Categories

    Technology

    Tags

    Groups/Events

    Embed in your blog options close
    Embed (wordpress.com) Exclude related slideshows Embed in your blog

    More Info

    This slideshow is Public
    Total Views: 1645 on Slideshare: 1642 from embeds: 3
    Most viewed embeds (Top 5): More
    All Embeds: Less
    Flagged as inappropriate Flag as inappropriate

    Flag as inappropriate

    Select your reason for flagging this slideshow as inappropriate.

    If needed, use the feedback form to let us know more details.

    Slideshow Transcript

    1. Slide 1: Build your Vision, Visualize the Code Advanced CSS Stephen Ireland
    2. Slide 2: What Does it Mean? Visualize? <div id=”header”> <div id= <div id= ”sidebar”> ”content”> <div id=”footer”> Advanced CSS Stephen Ireland
    3. Slide 3: Example 1. (terralien.com) Advanced CSS Stephen Ireland
    4. Slide 4: Visualizing Example 1. Advanced CSS Stephen Ireland
    5. Slide 5: Visualizing Example 1. div id=”wrapper” Advanced CSS Stephen Ireland
    6. Slide 6: Visualizing Example 1. Advanced CSS Stephen Ireland
    7. Slide 7: Visualizing Example 1. div div div div Advanced CSS Stephen Ireland
    8. Slide 8: Visualizing Example 1. ul h1 h2 p h3 h2 p ul li li Advanced CSS Stephen Ireland
    9. Slide 9: Example 2. (alpkit.com) Advanced CSS Stephen Ireland
    10. Slide 10: Visualizing Example 2. Advanced CSS Stephen Ireland
    11. Slide 11: Visualizing Example 2. div id=”wrapper” Advanced CSS Stephen Ireland
    12. Slide 12: Visualizing Example 2. Advanced CSS Stephen Ireland
    13. Slide 13: Visualizing Example 2. div div div Advanced CSS Stephen Ireland
    14. Slide 14: Visualizing Example 2. li h1 ul img li li h2 p h3 li p li div li Advanced CSS Stephen Ireland
    15. Slide 15: Example 3. (happycog.com) Advanced CSS Stephen Ireland
    16. Slide 16: Visualizing Example 3. Advanced CSS Stephen Ireland
    17. Slide 17: Visualizing Example 3. div id=”wrapper” Advanced CSS Stephen Ireland
    18. Slide 18: Visualizing Example 3. Advanced CSS Stephen Ireland
    19. Slide 19: Visualizing Example 3. div div div div Advanced CSS Stephen Ireland
    20. Slide 20: Visualizing Example 3. Advanced CSS Stephen Ireland
    21. Slide 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. Slide 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. Slide 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
    © 2008 SlideShare Inc. All Rights Reserved.
    App11.ss is serving you