tailieunhanh - Developing Large Web Applications- P9

Developing Large Web Applications- P9:This book presents a number of techniques for applying established practices of good software engineering to web development—that is, development primarily using the disparate technologies of HTML, CSS, JavaScript, and server-side scripting languages. Whereas there are many books on how to use languages, how to use libraries, and how to approach software engineering, this is the first book to codify many of the techniques it presents. These techniques will make the components of your own web applications more reusable, maintainable, and reliable | Example 4-8. The Popular New Cars module div id nwcpop class default div class hd div class tagline cite View popular cars from Honda cite div div class logo img src http . div div div class bd ul class pri li a href http . 2009 Honda Accord a li li a href http . 2009 Honda Civic a li li a href http . 2009 Honda Civic Hybrid a li ul ul class sec li a href http . 2009 Honda Civic Sedan a li li a href http . 2009 Honda CR-V a li li a href http . 2009 Honda Element a li ul div div Example 4-9. Presentation switching for the Popular New Cars module Apply this CSS to all presentations of the module. nwcpop .hd position relative nwcpop .hd .tagline position absolute padding 5px 0 0 15px nwcpop .hd .tagline cite font bold 77 verdana color 000 Modular CSS 61 nwcpop ul list-style-type disc margin 0 padding 0 nwcpop li margin-left 15px line-height Apply this CSS to just the default version of the module. .hd width 630px background url http . fff no-repeat padding-top 8px .tagline width 475px .logo padding 0 15px 0 0 background url http . repeat-y text-align right .bd position relative background url http . no-repeat background-position bottom left padding 10px 15px 15px .pri width 295px .sec position absolute top 10px right 15px width 295px Apply this CSS to just the compact version of the module. .hd width 300px background url http . fff no-repeat 62 Chapter 4 Large-Scale CSS padding-top 8px .tagline width 145px .logo padding 0 15px 0 0 background url http . repeat-y text-align right .bd background url http . no-repeat background-position bottom left padding 10px 15px 15px In Chapter 7 we ll examine how to manage presentation switching in a nicely encapsulated programmatic way using PHP. In practice highly stylized modules often .