Professional Web Design: Techniques and Templates- P5

Professional Web Design: Techniques and Templates- P5: 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- P5 182 Chapter 9 ■ Case Study: Low-Content CSS Design Note A slice is indicated by the small numbered rectangle in the top-left corner of each outlined rectangle or square. ■ The two number 4s indicate, to the left of them, the background images that are used in each menu item. The top number 4 represents the menu item when the user has not selected that item. The lower number 4 represents the background when the hyperlinked menu item is in hover mode. ■ The two number 5s represent slices used to save images for the design that are not mortised together with any others. The right image, which says, ‘‘call for a free estimate,’’ has the background image removed from it. This is accomplished by cropping out the background, and any other images, below the slice. When saving the Photoshop file, the designer can designate the checkered background, which is the background of the file, as a trans- parent background. This allows the image to be layered easily over any background in the file so that the background can appear through the area that is checkered. The advantage of this technique is that the image can then be moved anywhere over the background image of the woman, without the ‘‘estimate’’ image containing remnants of her checkered shirt. It is a coin- cidence that the Photoshop background and the woman’s shirt are both checkered. If the image contained the woman’s shirt, rather than that area being transparent, and was positioned differently, the image and back- ground images would appear disjointed. Note If the image had a curve and that image was saved with a transparent background, the curve would have a jagged edge because of anti-aliasing, which blends colors to give the perception of one color being curved. ■ The slice to the left of number 6 represents the background image that is used for the page title row for second-level pages (see Figure 9.3). Often, it is easier to save images that are not necessarily used on the homepage with the source file that is used for the homepage. This can eliminate the need to save a completely new PSD (Photoshop) file for just one image.Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Game Developing GWX Understanding the Design’s Structure 183 Figure 9.3 The page title area on second-level pages that uses a background image saved from the Photoshop file created for the homepage. Because multiple images are layered and saved over the background image of the woman, it is helpful to duplicate the source PSD file and save it independently so the background can be saved. When the file has been duplicated, the extra ima- ges, all slices, and most guides can be removed, leaving only the background image. The designer then adds a slice around the portion of the file that will be saved as an individual image. One advantage of duplicating the existing homepage file and deleting excess images is that the background image’s placement remains the same. Because the main slice, represented by number 2 in Figure 9.2, is not removed, the designer knows exactly where to place the new slice. Figure 9.4 shows the homepage saved as a separate source file with all the original slices and excess images removed. Understanding the Placement of CSS Containers More than 10 tags are used to lay out the images saved from the Photo- shop file and XHTML content. Figure 9.5 shows the tags with all the images and content removed and their borders ‘‘turned on’’ by setting them to 1px. The tags are used for different functions in the design, such as setting up its basic infrastructure, providing containers to position content within, and styling the content. Following are explanations of the 10 most useful tags in Figure 9.4: ■ The tag above number 1 is used for centering the design in IE 5 and 5.5, if it is to have a fixed width. The container starts at the very top-left corner of the browser window. This style is no longer necessar ...