Professional Web Design: Techniques and Templates- P2

Professional Web Design: Techniques and Templates- P2: This is the must-have book for designers who want to expand their skills and improve the quality of their designs. Learning CSS technology and continually improving ones design and developer skills is essential for every Web designer in todays marketplace. The goal of Professional Web Design: Techniques and Templates is to educate beginning-to-intermediate Web designers on the various issues involved with Web design through general discussion, case studies, and specific tips and techniques....
Nội dung trích xuất từ tài liệu:
Professional Web Design: Techniques and Templates- P2 32 Chapter 2 ■ Designing for the Past, Present, and Future Figure 2.11 Menu items saved as images in the On state (a white glow around the text). 4. Search engines: When text is saved as an image, search engines don’t read it, although they can read the Alt tags. It’s almost always a wise idea to make your site as search-engine friendly as possible. Note CSS menus can use background images in menu items. Using such a method also enables the designer to lay text over the image, allowing for the best of both worlds. Such usage of background images is incorporated in many designs included with this book. Background Images Background images can enhance a Web site to give it mood and depth. While the use of background images has changed slightly over the years, the concepts are fairly similar. There are several uses of background images that the designer can be creative with. The first of which is using a background image to serve as the majority or entire backdrop of a Web site while layering the HTML and graphicsPlease purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Building on Previous Design Weaknesses 33 on top of it. While this wasn’t advisable in the past, it now is much more acceptable with increased bandwidth and CSS-driven layouts, which require less download time. Figure 2.12 illustrates a site that uses one image to serve as the entire background. Figure 2.13 is the background image that was used. Another creative use of background images is giving the impression that a design has colors running down both sides of it indefinitely. Although this used to be an easy process with XHTML table sites, it now takes a little trickery to accomplish the same result. Such a technique is explained in Chapter 12; however, Figure 2.14 illustrates the concept. A third use of background images, as mentioned in the previous section, is using the images for menus. Using CSS, a designer can use an image for, say, a menu Figure 2.12 Site that uses a large image for its background.Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 34 Chapter 2 ■ Designing for the Past, Present, and Future Figure 2.13 Image that was used for the entire background of the site in Figure 2.12. Figure 2.14 Site that uses background images to run colors down both sides of a design indefinitely, similar to how XHTML table designs work.Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Building on Previous Design Weaknesses 35 Figure 2.15 Background images that are used in a menu to show Over and Off states. item, while not having to include the text with the image itself. In other words, the text is layered over the image. Figure 2.15 shows a site that does just that. Although many clients don’t like the width of their sites changing because the content shifts around, a background image, depending on the resolution, can be repeated to allow for such expansion while maintaining a similar look and feel. The designer has to be careful to make sure that the background image is designed correctly for higher resolutions, though. While the design in Figure 2.16 doesn’t expand horizontally, the background image does. Unfortunately, it does not look professional because the designer did not remove the lines on the right side of the image. One instance that designers should probably stay away from is using a repeating background image endlessly, both horizontally and vertically. While it can work in certain situations, for the most part, it is amateurish looking. This is probably because it was so easy to do—since the dawning of graphical Web browsers— that millions of sites used the technique, similar to glowing text. These days, sites similar to Figures 2.17 and 2.18 aren’t designed very often.Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 36 Chapter 2 ■ Designing for the Past, Present, and Future Figure 2.16 Page repeating an awkward looking background image in a resolution higher than the design was cre- ated for. This is ...