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 one's design and developer skills is essential for every Web designer in today's 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 | 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 transparent 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 coincidence 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 background 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 . 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 .
