- Bring On the Art!
- Get Your Files Here
- Define the Chapter 4 Website
- Image File Formats for the Web
- PROJECT 4.1 Prototyping and Designing with Background Images
- PROJECT 4.2 Inserting and Editing Images
- PROJECT 4.3 Floating Images into Position
- PROJECT 4.4 Creating Structured Layouts with Images
- PROJECT 4.5 Styling the Header Area
- Challenge! Create Your Own Design with Photoshop
- Conclusion
This chapter is from the book
This chapter is from the book
This chapter is from the book
PROJECT 4.1 Prototyping and Designing with Background Images
ACA Objective 1.2- ACA Objective 2.4
- ACA Objective 4.2
Video 4.1 Prototyping and Designing with Background Images
Chris has been hard at work and has provided all sorts of new information to work with. In the project files for Chapter 4, Chris has supplied a bunch of images and specific feedback on how things should look going forward. Based on the instructions and the materials he has provided, you can start getting content into place.
Examining Client Feedback and Requirements
Take a few moments to familiarize yourself with the new files and folders that Chris provided.
Open Dreamweaver and review the structure of the site and the new folders and images.
The folders and files you created in Chapter 3 are still in place, but new images and documents have been supplied by the client (Figure 4.2). The images folder contains lots of new cartoon characters, and the source folder contains Photoshop and Fireworks files. Also included are two client feedback files.
Figure 4.2 The files and folders for the Chapter 4 website
Open client-feedback.docx by double-clicking the file in Dreamweaver.
The file opens in Microsoft Word. If you don’t have Word installed on your computer, you can open the client-feedback.rtf file in almost any word processor.
Read through the client feedback from the client.
Deciphering information from a client frequently involves a lot of detective work. What specific guidance does the client provide? What things are being left up to you as the designer? And most importantly at this stage, can you determine enough information to get a feel for how things should look?
Open the client’s design comp by double-clicking wulvs-comp.png.
This file opens in the default graphics editor on your computer (Figure 4.3).
Figure 4.3 Major design elements in the design comp provided by the client
A Header with character collage
B Page background with textured image
C Sidebar and navigation area
D Character inserted into the page
The design comp includes the major design elements that the client is requesting. The page is centered in the viewport and has a header, sidebar, footer, and main content area. You’ll also see design clues as to how the client wants images to be used. This is another good time to jot down some notes on what you discover in this document.
Now open index.html.
This is the same file that you finished at the end of Chapter 3. Compare this file to the client’s composition to see the differences.
Open prototype.html.
This is a file that you might have developed based on your detective work of the information your client provided. In the interest of time, the following tasks have been done for you:
- The document includes the content that will appear in several pages of the website. You’ll find new Heading 1 tag sections for the Team, Services, Rates, and Contact pages.
- The Team section has character descriptions, the Services and Rates sections have tables of information, and the Contact section has a spot for a form.
- The sidebar area has text for two navigation sections and placeholder text for where advertising might go.
- New CSS styling rules have been created to assign background colors and borders to the header and footer areas of the page.
- Open the CSS Designer panel. Select the Show Set checkbox in the upper-right corner of the panel, and examine the properties that have been applied to the #header and #footer rules in this document.
)
)
Once you’ve thoroughly reviewed all the changes that have been made and compared those changes to the index.html file, you are ready to move on to more styling. You can even close index.html. All the work you do from this point forward will be done in prototype.html.
Prototyping in Web Design
Working with a technical prototype is a very common method used by designers as they reach this stage in designing a website. By using a single document like the one you’ll work on in this chapter, all the individual images, text, tables, and other elements can be placed and styled into a single page. The CSS styling rules remain in the <head> of the page while this work is going on, making it easier to keep track of the rules as you create, troubleshoot, and modify styles. When the styling is complete and the client has given final approval to move forward, the CSS file will be converted into a separate, external file, and the contents of each section can be copied to the pages where they’ll ultimately reside.
This kind of workflow also allows you as the designer to take advantage of Dreamweaver’s automation features as final designs are converted to templates and library items. These templates and library items make it easier to generate new pages and update an entire site full of web pages when a revision takes place.
Using the Faux Column Technique to Style the Sidebar
The client’s design calls for a sidebar to extend down the left side of the page. That’s a very common arrangement, but it presents a challenge: How does a web designer style this area of the page in such a way that it appears correctly no matter how long the web page is? Let’s understand the problem, then see a common solution.
With prototype.html open, place Dreamweaver in Design view. From the application bar, choose View > Visual Aids > CSS Layout Backgrounds. You can enable and disable this view as you examine the page.
Dreamweaver will apply color coding to help you visualize the <div> elements of the page (Figure 4.4).
Figure 4.4 The Design window with CSS Layout Backgrounds enabled
Notice how the main area content is longer than the sidebar content. You could insert your cursor into the sidebar and press Enter/Return to add a bunch of empty paragraphs until the sidebar is as full as the content area, but that’s a very sloppy way to deal with the issue. Instead you will use a time-tested method of styling with a background image. This method is known as the faux column technique.
Double-click the container-bg-gold.png file inside the images folder to open it.
The faux column technique is perfect for a fixed-width page like the one you’re working on. To create the illusion that the left column is filled up, a background image that matches the width of the container is used for the background. In this case, the #container <div> is set at 960 pixels wide.
The #sidebar <div> is 180 pixels wide. The area of the image that will provide the background color or pattern needs to be set to a matching width. Figure 4.5 details how this image is laid out.
Figure 4.5 An image for use as a faux column
Notice that the image is only 20 pixels high. A background image like this one doesn’t need to be any larger, because it will repeat vertically inside its container.
- Open the CSS Designer panel, and select the #container selector.
- In the Background section, locate the background-image property, click inside the field next to url, and then click the Browse for File icon to locate the image.
- Browse to the chapter-04/images folder, and select container-bg-gold.png. Click OK/Open to set the image as the background.
- To control how the image repeats, or tiles, down the container, set the background-repeat property to repeat-y. This will restrict the image to repeating only down the page and not across.
Compare your settings to Figure 4.6.
If everything looks good, it’s time to preview your work in your favorite web browser.
Figure 4.6 The CSS Designer panel set to the Background category
)
)
)
Using Images in Page Backgrounds
The second client request to address is for an image that displays on either side of the content area of the web page. Chris has provided several different images for you to try. You might not actually use these in the final design, but it’s a good opportunity to see the different background-repeat settings that CSS provides and to see how images may be used to style the entire visible window in a web browser display.
This process uses the same tools and techniques you just used on the #container selector, except this time you’ll work with the body selector.
- Open the CSS Designer panel, and select the body selector. This selector was created previously to “zero out” the page margins and to set a temporary background color.
Click the Background category, and float your mouse over the background color setting, as you see in Figure 4.7.
You’ll see two buttons appear to the right: a button that allows you to disable a setting temporarily and a trashcan icon for deleting a property.
Figure 4.7 Background color settings in the CSS Designer panel
Click the trashcan icon to delete the background color setting.
Web designers frequently use tiny images set to repeat across and down the page to create a wallpaper effect.
- Click the Browse icon next to the background-image url field.
Browse to the chevron_bg.png file in the images folder. Select the file, and click OK/Open.
The background-image setting will appear (Figure 4.8).
Figure 4.8 Background image settings in the CSS Designer panel
Set the background-repeat option to tile across and down.
Click the Preview in Browser button (
) in the lower-right corner of the document window. When prompted, choose to save and view the file in your favorite browser.You’ll see this one small image tile across and down the page.
Click the Browse icon in the background-image settings area, and switch the file to diamond-bg.png. Preview your page in a browser again to see tiled background images in action.
The design in Figure 4.9 might not make the final cut, but you should have a good idea of how this kind of image can be incorporated into a design.
Figure 4.9 Background images are tiled inside their container when set to repeat.
Another common background image design technique is to use a wide image with gradients or other visual properties set on either side of a blank area of the canvas.
From the source folder, open either gradient-bg.psd (a Photoshop file) or gradient-bg.fw.png (a Fireworks file) (Figure 4.10).
Figure 4.10 Background images are used in some designs to create a gradient border effect.
Note that this image is quite wide—2200 pixels—but only 20 pixels high. You’ll also see that the center portion of the canvas has been filled with a white rectangle that matches the width of the #container <div>.
- Return to Dreamweaver, and use the Browse for File icon in the background-image setting to switch the background image to gradient-bg.png.
- Set the background-position setting to 50% left to place this image in the center of the viewport. You can drag your mouse to apply this setting, or click inside the value field and type the value.
Click the repeat-y icon in the background-repeat area, and compare your settings to those in Figure 4.11.
When you preview the page in a browser, or switch to Live view, you’ll see that the area on either side of the page contents has a gradient background that fades to white. This is another way the client’s requirements might be met using background images.
Figure 4.11 The effect of using a background image that repeats vertically down the page
)
)
)
)
)
In this project, you’ve learned how you can use background images as a layout technique where a column on the page is visually defined using a background image, and you also have seen how the entire viewable area around the page contents can be styled by applying a background to the <body> tag.