Developing Large Web Applications- P10 ppt

Compared with absolute positioning for arranging block-level elements side by side, floating has the benefit of not requiring you to know which of the elements is the tallest. This makes floating especially well suited for creating highly reusable, generic layouts and containers, which we will discuss in a moment. Figure 4-3, presented in the next section, shows an example of floating within a layout. Block-level elements containing floated elements need to be floated as well to ensure that they expand as needed to fit the floated content. Alternatively, you can set over flow to hidden and zoom to 1 for the parent of the floated elements. The next section provides examples of floating in layouts and containers. Layouts and Containers Layouts are generic templates that define the overarching structure of pages. Containers are generic groupings of modules that you can place within layouts to support common organizations. Together, layouts and containers play a vital role in fostering reusability, maintainability, and reliability in large web applications. You can use them to define the standard sections in which to place your modules on a page. Chapter 3 mentions the importance of exploring the design of web pages to find ways to reuse as many components as possible. Ultimately, building a page as a set of indi- vidual components makes it easier to maintain and more reliable throughout its life- time. In addition to developing reusable modules, you should consider reusable traits within the structure of pages across your entire application, which you can exploit through layouts and containers. Not only does this promote maintainability and reli- ability within the code, but it also fosters a more consistent user experience across the application and contributes to its overall usability. Furthermore, layouts and containers provide a good opportunity for engineers and designers to work together to establish standard guidelines for designing and building large web applications. In this section, we explore layouts and containers that are fixed width, variable height, and grid-based. These are some of the most common layouts in large web applications. That said, the principles we will discuss apply equally well for other types of layouts (e.g., fluid layouts where sections grow or shrink as the window is resized, free-form layouts, etc.), despite different implementation details. No matter what type of layout you choose, it is important to remember the dynamic nature of layout on the Web. Fluid layouts require that you relinquish control to the browser for the sizing and flow of content within any portion of the layout that uses a relative unit (percentage, em, etc.). Fixed-width layouts add a certain amount of control in the horizontal direction, but you still must anticipate the impact of letting content flow as needed in the vertical direction. Layouts and Containers | 71 Example Layouts Figure 4-3 presents an example layout well suited to pages containing search results or various types of listings; we’ll call it the Results layout. Examples 4-17 and 4-18 present an implementation for the layout using the techniques discussed in “Float- ing” on page 70. In Chapter 7, we will explore techniques for inserting modules and containers into the layout dynamically. This way, you can reuse the layout for any page that needs the same overall structure. Let’s look at some examples of the types of con- tent that might appear within each section of the layout. Figure 4-3. The Results layout layres (outer wrapper) Contains no content directly, but provides overarching structure for the other sec- tions in the layout. layreshdr (header) Extends across the top of the page and might contain branding, banner advertising, primary navigation, and a query form for narrowing the search results. 72 | Chapter 4: Large-Scale CSS layresmaj (major) Contains no content directly, but provides overarching structure for the major part of the page containing the layrespri, layressec, and layrester sections. layrespri (primary) Holds the primary content for the page, which is the set of search results or listings. layressec (secondary) Holds the secondary content for the page, such as business partner callouts and additional advertising. layrester (tertiary) Holds tertiary content, which, because of its position well down the page, is in- tended for less frequently used modules. layresftr1 and layresftr2 (footers) Sections for footers. We define two sections to provide slightly different styling options (the second footer does not have the border on the left and right). Both might contain helpful cross-linking to other parts of the site. Within the CSS, we float all these sections to the left. Because layrespri and layres sec together fit within the width of their container (layresmaj), the result is that layressec appears to the right of layrespri. Our hardcoded widths ensure that the two layers take up the exact horizontal space we have allocated. We float the other elements on the page to ensure each section expands to fit any floated content within it. Recall our earlier discussion about this in “Floating” on page 70. The overflow attribute on the inner elements is set to hidden to guard against letting any content that happens to be too wide cause problems when the content is placed within the layout. Setting display to inline for floated elements with margins avoids the infamous “double margin” bug in earlier versions of Internet Explorer that doubled the margins for floated elements. Example 4-17. HTML for the Results layout <div id="layres"> <div class="layreshdr"> </div> <div class="layresmaj"> <div class="layrespri"> </div> <div class="layressec"> </div> Layouts and Containers | 73 <div class="layrester"> </div> </div> <div class="layresftr1"> </div> <div class="layresftr2"> </div> </div> Example 4-18. CSS for the Results layout #layres { float: left; background: #e3e4e8; } #layres .layreshdr { float: left; width: 950px; overflow: hidden; border-left: 1px solid #d1d6dc; border-right: 1px solid #d1d6dc; border-top: 1px solid #fff; padding: 10px 9px 0; } #layres .layresmaj { float: left; width: 968px; border-left: 1px solid #d1d6dc; border-right: 1px solid #d1d6dc; background: #e3e4e6; } #layres .layrespri { float: left; display: inline; width: 750px; overflow: hidden; margin: 10px 10px 0 9px; } #layres .layressec { float: left; display: inline; width: 190px; 74 | Chapter 4: Large-Scale CSS overflow: hidden; margin: 10px 9px 0 0; } #layres .layrester { clear: both; float: left; display: inline; width: 950px; overflow: hidden; margin: 10px 9px; } #layres .layresftr1 { clear: both; float: left; width: 968px; overflow: hidden; border-left: 1px solid #d1d6dc; border-right: 1px solid #d1d6dc; } #layres .layresftr2 { clear: both; float: left; width: 970px; overflow: hidden; border-bottom: 1px solid #fff; } Figure 4-4 presents an example layout that is well suited to pages containing details about a search result or listing; we’ll call it the Details layout. Let’s look at some examples of the types of content that might appear within each section of the layout: laydtl (outer wrapper) Contains no content directly, but provides overarching structure for the other sec- tions in the layout. laydtlhdr (header) Extends across the top of the page and might contain branding, banner advertising, primary navigation, and header information. laydtlmaj (major) Contains no content directly, but provides overarching structure for the major part of the page containing the laydtlpri, laydtlsec, and laydtlter sections. laydtlpri (primary) Contains no content directly, but provides overarching structure for the leader and latter sections. Layouts and Containers | 75 laydtlldr (leader) Contains no content directly, but provides overarching structure for the leader content. laydtllat (latter) Provides overarching structure for the latter section containing the laydtllatpri and laydtllatsec sections. laydtllatpri and laydtllatsec (latter primary and secondary) Holds the latter content, which is important content just beneath the leader sec- tion. In our example, the latter content will always be in a two-column format, which the layout reflects. laydtlsec (secondary) Placed to the right to hold secondary content, such as business partner callouts and additional advertising. Figure 4-4. The Details layout 76 | Chapter 4: Large-Scale CSS laydtlter (tertiarty) Holds tertiary content, which, because of its position well down the page, is in- tended for less frequently used modules. laydtlftr1 and laydtlftr2 (footers) Sections for footers. These serve the same purpose as in the Results layout presented earlier. Examples 4-19 and 4-20 present the implementation for the Details layout. For the same reasons discussed earlier, this layout sets overflow to hidden and display to inline in certain places. Example 4-19. HTML for the Details layout <div id="laydtl"> <div class="laydtlhdr"> </div> <div class="laydtlmaj"> <div class="laydtlpri"> <div class="laydtlldr"> </div> <div class="laydtllat"> <div class="laydtllatpri"> </div> <div class="laydtllatsec"> </div> </div> </div> <div class="laydtlsec"> </div> <div class="laydtlter"> </div> </div> <div class="laydtlftr1"> Layouts and Containers | 77 </div> <div class="layresftr2"> </div> </div> Example 4-20. CSS for the Details layout #laydtl { float: left; background: #e3e4e8; } #laydtl .laydtlhdr { float: left; width: 950px; overflow: hidden; border-left: 1px solid #d1d6dc; border-right: 1px solid #d1d6dc; border-top: 1px solid #fff; padding: 10px 9px 0; } #laydtl .laydtlmaj { float: left; width: 950px; border-left: 1px solid #d1d6dc; border-right: 1px solid #d1d6dc; padding: 10px 9px 0; } #laydtl .laydtlpri { float: left; display: inline; width: 750px; overflow: hidden; margin-right: 10px; } #laydtl .laydtlldr { float: left; display: inline; width: 750px; overflow: hidden; } #laydtl .laydtllat { float: left; display: inline; width: 710px; overflow: hidden; 78 | Chapter 4: Large-Scale CSS padding: 20px; background: #ccc; margin-top: 10px; } #laydtl .laydtllatpri { float: left; display: inline; width: 310px; overflow: hidden; margin-right: 30px; } #laydtl .laydtllatsec { float: left; display: inline; width: 370px; overflow: hidden; } #laydtl .laydtlsec { float: left; display: inline; width: 190px; overflow: hidden; } #laydtl .laydtlter { clear: both; float: left; display: inline; width: 950px; overflow: hidden; background: #fff; margin-top: 10px; } #laydtl .laydtlftr1 { clear: both; float: left; width: 968px; overflow: hidden; border-left: 1px solid #d1d6dc; border-right: 1px solid #d1d6dc; margin-top: 10px; } #laydtl .laydtlftr2 { clear: both; float: left; width: 970px; overflow: hidden; border-bottom: 1px solid #fff; } Layouts and Containers | 79 Example Containers Figure 4-5 shows two presentations for an example container. This container holds two modules placed side by side in a single row. Examples 4-21 and 4-22 present an implementation for a 2×1 container using the techniques discussed in “Float- ing” on page 70. The examples also use the techniques discussed previously for pre- sentation switching to achieve different versions of the container that fit within different sections of various layouts. Figure 4-5. The 2×1 container: a) default version, and b) minimum version The presentation selected with the class default consists of two sections with room for 370 pixels of content each. The presentation selected with the class minimum consists of two sections with room for 150 pixels of content each. In Chapter 7, we will explore techniques for managing various aspects of containers in a dynamic fashion. This way, containers can be reused on any page that needs the same arrangement of modules. Other containers might arrange three or four sections of modules. Example 4-21. HTML for the 2×1 container <div id="con2x1" class="default"> <div class="con2x1pri"> </div> <div class="con2x1sec"> </div> </div> 80 | Chapter 4: Large-Scale CSS . building large web applications. In this section, we explore layouts and containers that are fixed width, variable height, and grid-based. These are some of the most common layouts in large web applications. That. reliability in large web applications. You can use them to define the standard sections in which to place your modules on a page. Chapter 3 mentions the importance of exploring the design of web pages. components makes it easier to maintain and more reliable throughout its life- time. In addition to developing reusable modules, you should consider reusable traits within the structure of pages across