Ten Ton Dreamweaver [Electronic resources]

Geoff Blake

نسخه متنی -صفحه : 109/ 62

Using Graphics on Your Dreamweaver Pages

Once you have some graphics and have saved them in the appropriate formathere, JPEG or GIFactually getting them onto your page is fairly easy. What you may find difficult is getting your images positioned where you want them. Thankfully, Dreamweaver has a few tricks up its sleeve to help you, as you'll soon see. But let's start with something easy: setting a graphic for your page's background.

Using a Graphic as a Page Background

Many sites on the web use either a colored or graphical background on their pages. This makes the site look a little more interesting, and also plays a part in a site's overall design and branding

Keep a high contrast between your background and your page text, to keep your page legible.

In designing your page's background, keep a few things in mind. If you're going to use a color, don't choose anything too bright. You don't want your visitor's head to explode, so choose a color that's easy on the eyes. If you decide to use a graphical background, be very cautious. Background graphics can easily render a page's text illegiblea major frustration for web surfers. Keep a high contrast between your background and your page text, and you shouldn't have a problem.

:This page uses a subtle background graphic: a brushed metal look. Even though the page may look like it has one massive image in the background, effects like this can usually be created with a single, tiny graphic.

[View full size image]

Here's the sort of background image to avoid.

Here's how to set your page's background:

Choose Modify > Page Properties.

The Page Properties dialog box appears.

[View full size image]

In the Appearance category at the left side of the dialog box set your page's background by doing one of the following:

To change your page's background color, click the color swatch next to Background Color. Dreamweaver's 216 web-safe color palette opens. You can select a color from this or any other color palette.

To set a background image, click the Browse button next to the Background Image field and navigate to the image that you want to use.

Click OK.

The background of your page changes to reflect your settings. If you chose to use a background image, the image appears behind your page's content and tiles horizontally and vertically. Because of this tiling behavior, many designers choose a patterned background image with no discernable edgessorta like the patterned tiles on your kitchen floor.

Notice too that the CSS Styles panel (if it's set to All mode) displays a new style: body. Options set for the background are actually controlled by CSS. For more on using CSS to control your page's background, see "Controlling Your Page Background with CSS."

If you want to modify the background, do one of the following:

To choose a different background for your page, choose Modify > Page Properties to return to the Page Properties dialog box, where you can change your settings.

To fine-tune the background and the way it works with your web pages, open the CSS Styles panel and follow the steps in "Controlling Your Page Background with CSS."

Controlling Your Page Background with CSS

Now that you have a background on your page, you may wish to make further modifications. The background for your page is always controlled by HTML's <body> tag. So when you set a background through the Page Properties dialog box, Dreamweaver creates a redefine88 tag for you. By making changes to the rules that govern the <body> tag in CSS, you can control how the image tiles, whether the background image scrolls with the page, and a few other neat options not available in the Page Properties dialog box.

To change your page background via CSS, follow these steps:

Open the CSS Styles panel (Window > CSS Styles) and set the panel's mode to All.

In the All Rules pane at the top of the panel, double-click the body style.

In the CSS Rule Definition dialog box, select the Background category.

The Background settings control graphics and color that appear behind objects on your page.

To change the color or image being used in the background, do one of the following:

Click the Background Color swatch and choose a new color.

Click the Browse button beside the Background Image field and navigate to the new background image.

If you're using a background image, you can make some additional adjustments:

To control the tiling behavior of your background image, choose an option from the Repeat pull-down menu.

Repeat tiles the graphic as it normally does (both horizontally and vertically), Repeat-X tiles the graphic only horizontally, and Repeat-Y tiles the graphic only vertically. No Repeat disables the tiling behavior of your background graphic.

To specify whether the background image scrolls with your page contents or remains fixed when the visitor scrolls down your page, choose an option from the Attachment menu. Note, though, that the user's browser ultimately controls how the page scrolls.

To control the horizontal and vertical placement of your background image, choose options for Horizontal Position and Vertical Position.

You can place your image at the left, right, top, or bottom of the page, and center it vertically and horizontally. You can also enter a specific value, in pixels, to move the background image.

[View full size image]

When you're done modifying your background, click OK.

Your changes are applied to the background of your page.

Now let's start thinking a little grander here. In Chapter 8, you saw how to work with external style sheets. Wouldn't it be great if you could control the background of all the pages in your site from a single style? Well, you can! In your external style sheet, create a new rule for the <body> tag; then set the appropriate options in the Background category, just as we did here. Once that's done, link all your pages to the external style sheet, and you're ready to go.

Also, you can specify a background for just a single style rather than for the entire page. For example, you can set a yellow background behind all of the Heading 1 elements on your page. If you've already set a background color for your page, both the style's background and the page background will appear. If you have some CSS styles kicking around from Chapter 8, try setting options in their Background category. This will result in a background appearing behind only the space that the style occupies on the page. CSS's parlor tricks are endless!

Placing Images on Your Page

Now you're ready to insert images on your page. Before you begin, make sure that all the graphics that you want to use have been copied to your site folder; otherwise, you'll have serious problems when you go to upload your pages to your remote site. We'll talk about possible problems that may arise in a bit, but first, let's get droppin' graphics onto your page.

Before placing images on your page, make sure that all your graphics have been copied to your site folder.

Here's how to insert an image on your page:

1.	Click where you want to insert an image. Chapter 4 for details).

The Image Tag Accessibility Attributes dialog box appears. Enter any accessibility information you want; then click OK.

The image appears on your page where you originally placed your insertion point.

Now, depending on the size of the image and where you placed your insertion point, your image may not appear as expected. We'll talk about how to adjust your image's placement shortly.

Understanding the Image Source

Always remember that when you insert a graphic, the graphic is not embedded in your page. Instead, Dreamweaver creates a reference to the source graphic file. This is fundamental. If you make a change to the original image source file (the one sitting in your site's local folder), the graphic will be updated automatically on any page where it's used, because those pages are simply referencing the source file. This is similar to the way Cascading Style Sheets works.

When you insert a graphic into your web page, the graphic is not embedded in your page. Instead, Dreamweaver creates a reference to the source graphic file.

If you change the name of your graphic in Dreamweaver's File panel, a dialog box will appear asking you to update all the references to the graphic. Click Update, and Dreamweaver will handle all your image references for you.

Inserting Graphics From the Assets Panel

As you've seen in previous chapters, Dreamweaver's Assets panel is one handy fella. And it's back here again to help you with your graphics. The Assets panel lists any images that you've saved in your local site folder and offers to place them on your page for you. Not only will this help keep consistency throughout your web pages, but it makes working with graphics in Dreamweaver a breeze.

And here's something else the Assets panel will do for you: I don't know about you, but I have an awful time remembering the differences between my graphics files. I can't remember what the heck the difference is between LunarOrbit02A.jpg and LunarOrbit02B.jpg, for example. Thankfully, when you select a graphic in the Assets panel, Dreamweaver displays a preview so you can see the image before you insert it on your page. This makes finding the graphic you're after super-easy.

Follow these steps to insert a graphic from the Assets panel:

Click your page where you want to insert your graphic.

In the Assets panel, click the Images Category button on the left.

The Images category appears, listing all the images that are saved in your site's local folder.

In the list of images in the bottom half of the panel, select the image that you want to insert.

A preview of the image appears in the top pane of the Assets panel, helping you find the right image.

At the bottom of the Assets panel, click the Insert button, or drag the image from the panel to your page and drop it where you want it.

The Image Tag Accessibility Attributes dialog box appears. Enter in any accessibility information you want and then click OK.

The image appears on your page.

Double-clicking a graphic in the Assets panel opens the image in your external graphics editor.

Be careful if you monkey with any of your site files outside of Dreamweaver. If you were to quit Dreamweaver and then open your site folder on your hard drive and change file names, move files around, or delete files, then the next time you launch Dreamweaver, all the links to your graphics would be lost.

Imminent Doom

If you change a graphic's name in the Files panel and don't click Update, the path between the web page and your graphic will be brokenmeaning that your image will not appear on your page.

If you rename or move a graphic outside of Dreamweaver, the connection between your web page and the image will be broken. To avoid seeing the missing image icon, keep a clean nose and use the Files panel in Dreamweaver to move and rename your images.

So be careful with your graphic references. If you need to rename or delete graphics in your site, make sure to do it through the Files panel, so Dreamweaver can help you manage all references to your graphics.

Because the images in your web pages are really just references, you can also easily swap one graphic for another, replacing the old graphic with a new one.

Geek's Delight

By default, Dreamweaver creates a link to an image like this: img/Astronaut.jpg. But rather than using that type of path, you could type something like this in the Property Inspector's Src field: [http://www.tentonbooks.com/img/test.jpg]. This would link you directly to an image file, even if it's being used in another web site. This is called hot linking. It's okay to do this with your own sites, but it's a no-no to hot link to other people's images because it eats up their site's bandwidth.

Here's how to replace a graphic:

On your web page, double-click the graphic that you want to replace.

You can also select the graphic on your page and then, in the Property Inspector, click the folder beside the Src field.

In the Select Image Source dialog box that opens, navigate to the new image that you want; then click OK (Windows) or Select (Mac).

The old image is replaced with the new image.

Finally, because all graphics are referenced, all your imagesevery last one of themwill have to be uploaded when you publish your site to the web. Remember back in Chapter 4, you saw that Dreamweaver will upload your entire site in one shot for you, so you don't have to upload your files one at a time. But make sure to double-check that everything uploads. If you miss a graphic, it won't be displayed on your site. Instead, your site's visitors will see an empty image placeholder, which looks really amateurish.

A missing graphic on a live web page is a major design faux pas. It's really important to upload all your graphics to your remote site and test every page in your site to make sure that all your images are loading correctly.

[View full size image]