HOW TO DESIGN AND WRITE WEB PAGES TODAY phần 8 docx

PAGE LAYOUT 209 Even if you decide to try a simple two-column layout consisting of a 475-pixel-wide area for your content, and a 200-pixel-wide area for your navigation, separated by 25 pixels of space (as in this chapter’s example), a column structure will help guide you in your image editor mockup—particularly if you opt to enhance your pages with background images to give it a unique look and feel. Figure 17.3 shows an image-editor mockup of the page for this chapter; different areas were sliced from it and saved as separate image fi les to create the back- ground images in the actual page. Note that the 700-pixel width of the design for this chapter was chosen only because it would work well for images in this book; as in Smith’s 960 Grid System (see “Grid Systems” sidebar), it’s common to build fixed-width pages that are closer to 1000 pixels across. GRID SYSTEMS Do a Google search for Web design grid system and you will fi nd links to the work of many different Web designers who have released their own grid system that others may use. One of my favorite grid systems is Nathan Smith’s 960 Grid System, which includes templates for 12- and 16-column grids in the formats of a number of different image editors. It also includes a PDF file for printing out ready-made grid pages to sketch on. As Smith, the 960 Grid System creator, notes: “All modern monitors support at least 1024 × 768 pixel resolution. 960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. This makes it a highly fl exible base number to work with.”* Although the 960 Grid System and others like it include XHTML and CSS, they are usually not structurally meaningful the way the RPK is. So try working with some of the sketch sheets and column layouts, but stick to writing your own XHTML and CSS. *Nathan Smith, 960 Grid System, http://960.gs 210 HOW TO DESIGN AND WRITE WEB PAGES TODAY CSS POSITIONING CSS includes the position property, which is often used in conjunc- tion with properties for dimensions (especially widths) and left-, right-, top-, and bottom-offsets to produce all kinds of page layouts from the same XHTML structure. By default, block elements are positioned by the browser statically ( position: static;). Two other position values, relative and absolute, are what provide designers the ability to create compelling page designs. When you need to position something far away from where it appears by default, such as the navigation in this chapter’s examples, position it absolutely. Absolute positioning removes the element from the document fl ow—meaning that the rest of the page’s content behaves as though, for example, the navigation is simply gone (see Figure 17.4). To determine what needs to be positioned absolutely, compare where it appears in the normal fl ow of things (as in Figure 17.1) with where it Figure 17.3. Another image-editor mockup, with images that can be used for the actual design. PAGE LAYOUT 211 needs to appear (as in the sketches in Figures 17.2 and 17.3). Because this chapter’s example header is 85 pixels tall, and the design speci- fi es a space of 10 pixels between the header and the navigation (and content), we write a style like: ul#navigation { width: 200px; /*200px wide navigation area*/ position: absolute; /*Pull from fl ow to position*/ left: 0px; /*Keep with left edge of design*/ top: 95px; /*Appear 10px below 85px-high header*/ } At this point, though, the page is a mess; the navigation and the content appear layered over the top of one another. So the next task is to move other elements out of the navigation’s way. In Figure 17.5, some left margin on the content area is all that it takes. This margin will also be the only sizing on the content area (that is, no width will Figure 17.4. The navigation positioned absolutely, and over the content, which must be moved out of the way. Figure 17.5. With the content pushed out of the way, a two-column layout begins to develop. Figure 17.6. To create a layout with right-hand navigation is just a matter of a few CSS adjustments. PAGE LAYOUT 213 need to be specifi ed for div#content; it will become clear why in a moment): div#content { margin-left: 225px; /*200px nav + 25px between nav and content*/ } The great thing about CSS-based layouts is that they are easily revised. Figure 17.6 shows roughly the same layout as Figure 17.5, but with the navigation on the right rather than the left (and with the content moved off to the right). Refi ning the Whole Page Design With the navigation and content areas looking roughly as they should, it’s possible to move on to the less drastic CSS to make the page design work. The rough sketch called for a 700-pixel-wide design; to achieve that, the CSS just needs div#page { width: 700px; }. With everything appearing inside the page division, the whole page is now 700 pixels wide. The content area, which is offset from the left by 225 pixels, automati- cally fi lls the remaining space (575 pixels wide, if you are keeping count); that’s why there is no need to specify a width on div#content. Because 700 pixels is a rather narrow design, it might appear better on larger screens if the page were centered horizontally, an effect achieved by adding margin: 0 auto; to the div#page style. But Figure 17.7 reveals a problem with that style: everything is centered except the navigation, which is still at left: 0px and therefore hug- ging the edge of the browser window. Here is where relative positioning becomes useful. The reason the navigation appears all the way to the left despite the centered page division is that, lacking a positioning context, the navigation is positioned with regard to the browser window. By adding position: relative; to the div#page style declaration, navigation will then be positioned with regard to the page division—not the window. That is, because the page division is now positioned, it becomes the positioning context for the navigation, meaning that the navigation’s left: 0px property will be the 0px position relative to the relatively positioned container (Figure 17.8). Figure 17.8. The navigation positioned absolutely, but with the container division as its positioning context. Figure 17.7. Centering the page works for all of the nonpositioned elements; the navigation, which is positioned, is stuck on the left, though. PAGE LAYOUT 215 Designing the Content Area Suppose someone wanted to design this page’s supporting content as a second column within the content area, by making another 200-pixel- wide column for the supporting content and positioning it absolutely (see Figure 17.9). While it would be possible to position the supporting content 95 pixels from the top, a more easily modifi ed design would come from setting the content area itself as a positioning context: div#content { position: relative; } That way, any changes to the content area’s design (particularly its width and distance from the top of the page) would be refl ected on the supporting content as well; see Figure 17.10. A corrective measure to the supporting content spilling over the footer would be to add more text or media content to the content area. But assuming some pages might need to be short, a designer could Figure 17.9. Supporting content positioned absolutely; its positioning con- text should be the content area, rather than the page. 216 HOW TO DESIGN AND WRITE WEB PAGES TODAY add a minimum height of 500 pixels to the main content area in this design: div#main { padding-right: 210px; /*Move content out of the way of supporting, but use padding to keep background color*/ min-height: 500px; /*The main content area should be at least 500 pixels tall*/ } Figure 17.11 shows the page with the spill-over problem corrected. If there is more than 500 pixels worth of content, the area will automati- cally expand. Figure 17.10. Supporting content positioned absolutely, but with the content area as its positioning context. Note that the supporting content now spills over the footer. PAGE LAYOUT 217 Figure 17.11. A minimum height on the main content area keeps supporting content from spilling over the footer. Additional content in the main area would have the same effect. CONDITIONAL COMMENTS Internet Explorer has a feature, known as conditional comments, that enables you to target XHTML markup to particular versions of IE. If, for example, you need to load a style sheet that corrects some of the idiosyncrasies of IE, conditional comments enable IE to load it; other browsers will see the content as just another XHTML comment. The form of conditional comments looks something like: <! [if IE]> <link rel="stylesheet" type="text/css" href="screen-ie.css" /> <![endif] > Visit QuirksMode.org* for additional information on targeting IE using condi- tional comments. *QuirksMode.org, “Conditional Comments,” http://www.quirksmode.org/css/condcom.html 218 HOW TO DESIGN AND WRITE WEB PAGES TODAY Note that because of a problem with min-height in Internet Explorer (IE) prior to version 8, 1 you would have to add div#main { height: 500px; } to an IE-only style sheet loaded via condi- tional comments (the RPK details their use in its screen-ie.css fi le; see also the “Conditional Comments” sidebar). IE expands the value specifi ed for height to fi t longer content, but other browsers, such as Firefox, cut the content off. But that is an acceptable workaround for IE’s inability to understand the min-height property. FINISHING TOUCHES WITH BACKGROUND IMAGES Background images help to make a design really shine beyond simple boxes. Once your positioning is more or less in place, you can begin to experiment adding in background images. Figure 17.12 shows the positioned page along with the branding and navigation styles from previous chapters. The design looks very boxy and does not seem to fi t together very well. One of the easier ways to pull a design together is to tile an image on the background that anticipates, for example, the content area. The Figure 17.12. Positioned page with the branding and navigation styles from previous chapters. [...]... but you can go a step further to structure and display your images with an attractive, consistent design One approach to designing around your images is to create a little chunk of XHTML markup for reuse each time you want to present an image For example: 2 28 HOW TO DESIGN AND WRITE WEB PAGES TODAY to add You only have to link to it from the area of your XHTML pages, and it will detect all of the audio files you link to, put a play button next to them, and add a playlist and customizable player to the bottom of your page.1 VIDEO AND FLASH Depending on the region of the world, Flash is reportedly installed on more than 90 percent (and up to 99%) of all desktop computers.2... in the XHTML image tag, In addition to the tag being self-closing, there are two important attributes that it must include, src and alt • src: the path to and name of your image file; remember that Web- friendly formats include JPEG files (.jpg, sometimes 226 HOW TO DESIGN AND WRITE WEB PAGES TODAY OUTSOURCING MEDIA HOSTING While it is possible to host all of your multimedia content on your... Next, we can add a background image—actually the same background image as the original footer to the html selector in CSS, and Figure 17.16 The footer as styled in previous chapters; it looks unfinished 222 HOW TO DESIGN AND WRITE WEB PAGES TODAY have the image positioned at the bottom of the element and repeated on the horizontal, filling the entire page width just like we did for the header... surprisingly, YouTube, Viddler, Vimeo, and many other video-hosting services 232 HOW TO DESIGN AND WRITE WEB PAGES TODAY use Flash to deliver video content However, new mobile devices are challenging the use of Flash, so it is likely that other methods for delivering video—probably coupled with HTML5—will become more important to learn in the future Again, refer to this book’s companion site for the... which is attached to the document object: /*JavaScript*/ $(document).ready(function() 2 38 HOW TO DESIGN AND WRITE WEB PAGES TODAY { /*Scripts are written here to run once the DOM has been loaded*/ } ); Those lines translate as, “When the document object is ready, do all of the things listed here.” Using that event and keeping JavaScript out of your XHTML are the most important factors in keeping your... with the header and footer examples in this chapter You can find additional positioning techniques and solutions at the book’s companion Web site, http:// sustainablewebdesign.com/book/ The next chapter looks at adding images, video, and other media to your pages But expect to return to your page layout often to make adjustments, particularly as you work to include media like images and video that might... 224 HOW TO DESIGN AND WRITE WEB PAGES TODAY Figure 17.19 A simple background color fix makes the page look more complete, even on large screens NEXT STEPS Using CSS to position elements into a layout is a matter of creating the illusion of columns and boxes Remember, also, when you work with background images that they sometimes work better on elements other than the element you’re actually trying to. .. 678px; /*Allow for padding and border to total 700px*/ padding: 10px; /*Add a bit of padding*/ } div.photograph img { border: 1px solid black; /*Give definition to lighter edges of photos*/ float: left; /*Float image to allow text to appear alongside of it*/; margin-right: 10px; /*Keep text away from the image*/ margin-bottom: 10px; /*Also away from the bottom, should the text wrap around.*/ } div.photograph... class="access-label"> Photo caption: Image description A little bit of CSS can turn that chunk of markup into a design that complements the photograph and its caption This example (see Figure 18. 1) uses the CSS float: property to enable caption text to appear alongside and, if the text is long enough, wrap around the image: div.photograph { background: #333; /*Photos often show up well against . as the original footer to the html selector in CSS, and 222 HOW TO DESIGN AND WRITE WEB PAGES TODAY have the image positioned at the bottom of the <html> element and repeated on the horizontal,. http://www.quirksmode.org/css/condcom.html 2 18 HOW TO DESIGN AND WRITE WEB PAGES TODAY Note that because of a problem with min-height in Internet Explorer (IE) prior to version 8, 1 you would have to add div#main {. how DOM scripting can be used to alter your design for larger screens. 224 HOW TO DESIGN AND WRITE WEB PAGES TODAY NEXT STEPS Using CSS to position elements into a layout is a matter of creating