Getting the Big Picture

This chapter is from the book

Learn Adobe Dreamweaver CC for Web Authoring: Adobe Certified Associate Exam Preparation, 2nd Edition

Learn More Buy

This chapter is from the book

This chapter is from the book 

Learn Adobe Dreamweaver CC for Web Authoring: Adobe Certified Associate Exam Preparation, 2nd Edition

Learn More Buy

Project 4.1 Prototyping and Designing with Background Images

ACA Objective 1.1

ACA Objective 1.2

ACA Objective 1.5

ACA Objective 2.4

ACA Objective 4.3

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.

1. 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 files. Also included are two client feedback files.

   

   Figure 4.2 The files and folders for the Chapter 4 website

2. Open client-feedback.docx by double-clicking the file in Dreamweaver.

   The file opens in Microsoft Word (if that application is installed on your computer). If you don’t have Word installed on your computer, you can open the client-feedback.rtf file in almost any word processor.

3. 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?

4. 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

   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.

5. 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 and you will see many differences (for example, the background colors differ and there are no images).

6. 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.

7. Open the CSS Designer panel. Select the Show Set check box 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.

1. With prototype.html open, place Dreamweaver in Design view. From the application bar, choose View > Design View Options > 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 that 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. It will also generate many problems when you view the page on different devices (such as smartphones and tablets). Instead, you will use a time-tested method of styling with a background image. This method is known as the faux column technique.

2. 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. Alternative approaches are needed when working with responsive designs for mobile devices. 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

   NOTE

   You’ll actually have to click the folder icon beside the URL field twice in many cases. This might be intentional or just one of those little quirks that software programs sometimes have.

   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.

3. Open the CSS Designer panel, and select the #container selector.

4. In the Background section, locate the background-image property and click the Browse for File icon to locate the image.

5. Browse to the chapter-04/images folder and select container-bg-gold.png. Click OK/Open to set the image as the background.

6. 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.

7. Compare your settings to Figure 4.6.

   

   Figure 4.6 The CSS Designer panel set to the Background category

   If everything looks good, it’s time to preview your work in your favorite web browser. Your prototype.html page should look similar to Figure 4.7 after you scroll down to the “Here’s what Wulvs can do for you!” heading.

   

   Figure 4.7 Prototype.html page viewed in browser (note that the sidebar appears throughout the left side of the web page).

Using Images in Page Backgrounds

The second client request 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.

1. 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.

2. Click the Background category, and move your cursor over the background color setting, as you see in Figure 4.8.

   

   Figure 4.8 Background color settings in the CSS Designer panel

   You’ll see two buttons appear to the right: a button that allows you to disable a setting temporarily and a trash can icon for deleting a property.

3. Click the trash can 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.

4. Click the Browse icon next to the background-image url field.

5. 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.9).

   

   Figure 4.9 Background images are tiled inside their container when set to repeat.

6. Set the background-repeat option to tile across and down.

   NOTE

   The default behavior for background images is to tile across and down the container where they are set. Although it isn’t necessarily required, if you want this default behavior it’s good practice to explicitly set that value.

7. Click the Real-time Preview 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 (Figure 4.10).

   

   Figure 4.10 The single chevron image repeats horizontally and vertically as the background for the body selector.

8. Click the Browse icon in the background-image settings area, and switch the file to diamond-bg.png. Again, preview your page in a browser to see tiled background images in action.

   The design in Figure 4.11 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.11 The single diamond image repeats horizontally and vertically as the background for the body selector.

   TIP

   This approach will work only with static-sized web pages (and may not display properly on mobile devices). You will learn about alternative approaches in a future chapter.

   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.

9. Return to the Files panel. From the source folder, open gradient-bg.psd (a Photoshop file) (Figure 4.12).

   

   Figure 4.12 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>.

10. Return to Dreamweaver and the CSS Designer panel, and use the Browse for File icon in the background-image setting to switch the background image to gradient-bg.png.

11. The background-position setting should be set to 50% and 0% 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.

12. Click the repeat-y icon in the background-repeat area, and compare your settings to those in Figure 4.13.

    

    Figure 4.13 Centering a background image that repeats vertically down the page

    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. Be aware that this may cause significant issues when working with responsive layouts, but it can be a quick approach to develop a prototype for a client (Figure 4.14).

    

    Figure 4.14 The effect of using a background image that repeats vertically down the page

Using CSS Gradients in Page Backgrounds

In the past, it was standard practice to include background gradient images in web pages. Many sites you encounter today will still use these approaches. That is why it is important to know how to incorporate background images using Dreamweaver. With the advent of CSS3 support in modern browsers, CSS gradients are now widely used.

Let’s return to the body selector once again.

1. Open the CSS Designer panel and select the body selector.

2. Click the Background category and move your cursor over the background color setting, as you saw previously in Figure 4.8.

3. Click the trash can icon to delete the background image setting.

4. Set Dreamweaver to Split view and scroll to the top of the CSS definitions (just below the <style> tag). Locate the body selector.

   NOTE

   You can also use the CSS Designer panel background tab to create gradients.

5. Modify the CSS code for the body selector so that it appears as shown here:

   body {
   margin-left: 0px;
   margin-top: 0px;
   margin-right: 0px;
   margin-bottom: 0px;
   background:linear-gradient(to right, black, grey);
   }

6. Save your work and preview it in a browser of your choosing. You result should be similar to what you see in Figure 4.15.

   

   Figure 4.15 The effect of using a CSS gradient as a background

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. You have also seen how the entire viewable area around the page contents can be styled by applying a background to the <body> tag.