tailieunhanh - Sams Teach Yourself Microsoft Expression Web 3 in 24 Hours- P9

Sams Teach Yourself Microsoft Expression Web 3 in 24 Hours- P9: Morten Rand-Hendriksen is the owner and creative director of Pink & Yellow Media, a boutique-style design company providing digital media consulting and creations for individuals, businesses, and broadcast television. He was awarded the Microsoft MVP (Most Valuable Professional) Award for his work with Microsoft Expression in 2008. | 222 HOUR 14 Harnessing the Power of CSS Layouts In past hours you have made some small layout changes to pages using Cascading Style Sheets CSS . But in this hour you fully immerse yourself in CSS layouts and learn how to apply them to existing content. You are also introduced to the CSS reset and see how it works to make your layouts cross-browser compatible. Starting with Pen and Paper This might come as a bit of a surprise but it is often a good idea to start designing a website by sketching it out on a piece of paper see Figure . Not only is a sketch FIGURE Drawing a sketch of your site layout on paper is a good starting point that gives you an idea of how to section out the page. faster and easier to change than any other design method it also gives you a blueprint of sorts to go by when you start building the framework to display the content of your site. The benefit of starting with a sketch is that you can see almost right away whether the overall layout works and if it does what sections you need to define to make it work. As you learned previously in this book creating layouts using CSS means creating boxes within boxes within boxes and you need to know and understand the relationship between these boxes before you build them. Build the Framework from Boxed Parts 223 Figure shows a rough sketch of the layout of the main page of . The layout has several different elements that need to be treated separately the corkboard background that hovers in the center behind the content the header containing the page title and main menu the pageContent containing all the text and images of the respective page including the sidebar and finally the footer. All the page content is centered and should therefore be placed in a separate container. From this information you can draw a set of boxes to indicate how to separate the content see Figure . FIGURE With the sketch of the page complete it is easy to draw boxes around content and .