Ten Ton Dreamweaver [Electronic resources] نسخه متنی

Controlling Images on Your Page

Now that you have a graphic or two on your page, you'll probably want to make some adjustmentsthings like the alignment of your image, its size, and so on.

Whenever a graphic is selected on your page, the Property Inspector displays settings you can use to adjust the image. This makes manipulating your images easy; however, just as for text, you can also use CSS to control your images.

CSS offers more precise settings to control your images than does the Property Inspector. To see how to use CSS to control your images, see "Using CSS to Control Your Images" later in this chapter.

Setting Basic Image Properties in Dreamweaver

You'll start with the simple approach to controlling your images: the Property Inspector. Before starting, make sure to expand the Property Inspector by clicking the expand/collapse arrow (in the bottom-right corner of the Property Inspector) so that you can see all the available image settings.

Behold the Property Inspector, complete with image editing options. When you select an image, these settings appear in the Property Inspector, as will a thumbnail of your graphic, in the top-left corner. Other commands of interest include the image map tools just below the image thumbnail and the editing tools.

[View full size image]

Here's how to adjust the properties for your image:

Click the graphic on your page to select it.

Image-related settings appear in the Property Inspector.

To put a frame around your image, set a pixel value in the Property Inspector's Border field.

As soon as you type a value in the field and press Enter (Windows) or Return (Mac), a frame appears around your image. If you want to remove the frame, type 0.

To adjust the horizontal position of your image, use the Left, Center, and Right options.

These alignment settings work best if your graphic is sitting on a line by itself, without any text beside it. If there is text on the same line, the graphic and the text will take on the same alignment setting. In the figure, the image has been centered between the page margins.

To control the vertical alignment of your image, choose a setting from the Align menu.

The vertical alignment is the position of the graphic in relation to text that sits on the same line. Here are the options:

Baseline: Aligns the image's bottom to the baseline of the text. The baseline is the imaginary line that the text sits on.

Top: Aligns the image's top to the top of the text or to the top of another graphic.

Middle: Aligns the image's middle to the text's baseline.

Bottom: Strangely enough, Bottom is the same as Baseline, which aligns the bottom of the image to the bottom of the text. Why have two commands that do the same thing? I'm wondering the same thing.

Text Top: Aligns the top of the image to the top of the text.

Absolute Middle: Aligns the image to the text's vertical center (as opposed to its baseline, as with Middle).

Absolute Bottom: Aligns the image to the bottommost text element, which includes descenders (the parts of letters that fall below the baseline, such as the tail on a lowercase p or y).

Left: Moves the image to the left, allowing text to flow around its right side.

Right: Moves the image to the right, allowing text to flow around its left side.

I stick with Left most of the time.

Noteworthy

You can use the Property Inspector's Low Src field to set a lower-quality image to load in the visitor's browser while a higher-quality image is downloading. For instance, you might use a black-and-white version of your image, with a lower resolution to appear as a preview until the high-quality image is fully loaded. Personally, I've never bothered with this because it causes an unnecessary download. If you do a good job of optimizing your images in the first place, they should download quickly enough.

Using CSS to Control Your Images

You may have noticed that the image settings in the Property Inspector are quite limited. But once again, CSS rides to the rescue. CSS saved the day with text formatting, and it's a hero again with graphics. Using CSS with graphics gives you superior control over your images and their placement on your page.

Before starting, make sure that you have the CSS Styles panel open (choose Window > CSS Styles) and that it's set to All mode. Also, remove any settings in the Property Inspector that had been previously set to control your image. This will ensure that it'll be nothin' but pure CSS controlling your graphic. To use CSS to control your images, you're going to create a new style specifically for this purpose.

CSS gives you superior control over your images and their placement on your page.

To use CSS to control your graphics, follow these steps:

At the bottom of the CSS Styles panel, click the New CSS Rule button.

In the New CSS Rule dialog box that appears, set Selector Type to Class and enter a name for your new style in Name field.

Chapter 8. You can save your new style in either an external style sheet (select the top option and enter a location) or in an embedded style sheet (select This Document Only).

In the CSS Rule Definition dialog box that appears, click OK.

It may seem odd to click OK without setting any options, but stick with me here. The easiest way to work with CSS and images is to apply your new style to an image first and then go back and add your settings. That way, you can see their effects as you work.

Back on your page, click your graphic to select it.

From the Class pull-down menu in the Property Inspector, select your new style.

This attaches your new CSS style to your imagethe image is now being controlled with CSS. This is just like applying a style to text, only this time you're applying a style to a graphic.

In the top pane of the CSS Styles panel, double-click your CSS style.

Dreamweaver returns you to the CSS Rule Definition dialog box.

In the CSS Rule Definition dialog box, click the Box category on the left.

The Box category contains the settings to control the position of your graphic on the page and the amount of space around it.

To set your graphic's position, choose an option from the Float menu; then click Apply at the bottom of the dialog box to preview your results.

Setting the Float menu to Left allows text to flow around the graphic's right side. Setting the menu to Right allows text to flow around its left side.

When you click Apply, your graphic moves to the right or left, and any text on your page wraps around your graphic. This is similar to choosing Left or Right from the Align menu in the Property Inspector, except now you're controlling your graphic's alignment via CSS.

10.

To insert space between your image and the text on your page, insert values in the Margin fields.

You can use the same value for the margin on all four sides of your image by checking Same for All, or you can set a value for each side. Click Apply to see the Margin settings applied to your image.

11.

To apply a frame around your image, select the Border category in CSS Rule Definition dialog box and use the pull-down menus to set the frame's style, width, and color. Click Apply to preview the Border effect in your page.

12.

To insert some space between your graphic and its border, return to the Box category and insert a value for Padding.

Just as with the Box category's Margin setting, you can specify the same value for all four sides or set individual values.

13.

When you're happy with the placement of your graphic, click OK to close the CSS Style Definition dialog box.

If you need to do a little more tweaking to get your graphic just as you want it, no problem. Just double-click your style in the CSS Styles panel again and continue fiddling with your settings until the image is placed exactly where you want it.

Now imagine defining a few CSS styles to control the various positions of images on your page, but saving them in an external style sheet. You could then control all the images on all the pages in your web site from just a few styles. How's that for mega-control over your graphics?

Using a Transparent GIF File to Align and Space Out Objects

Are you finding it tough to control the placement of your text, graphics, and other page elements? Cascading Style Sheets help a lot, but the problem with CSS is that not all browsers support it. If this is a concern, you may want to consider an alternative to help you control your page contentnamely, using a transparent GIF file to help align and space out objects on your page.

Here's how to insert a transparent GIF file to help space out graphics and other objects on your page:

Using your graphics program, create a new 1x1-pixel image.

When you create your new graphic, make sure to set your new image's background (sometimes referred to as the canvas) so that it is transparent.

Save your image as a GIF file in your site's local folder. Name it Spacer.gif or Transparent.gif (or something like that) to help you remember that it will be used to space out objects on your page.

Head back to Dreamweaver and insert your transparent GIF file into your page wherever you're having spacing problems.

For example, you can use your GIF file to control the space between paragraphs by inserting it after the last word in each paragraph. Or if you want some space between an image and some text, insert it between the two.

Use the Property Inspector's Width and Height settings, as well as any other options in the Property Inspector, to control the size and alignment of your GIF file.

Changing the size of your GIF file will force your page objects to move, helping you control their position. Don't worry about distorting your transparent GIF filethere's nothing to distort, because it's transparent!

Resizing Images Inside Dreamweaver

When you insert a graphic into your page, you may find that the image appears larger or smaller than you want. In these situations, you can always resize your image so that it fits into the space that you want it to occupy.

You can resize your image in Dreamweaver, but you should do so cautiously because it's very easy to accidentally distort your image

You can resize your image in Dreamweaver, but you should do so cautiously. The problem with resizing in Dreamweaver is that it's very easy to accidentally distort your imageto end up with what I call the "carnival fun-house mirror effect." As an alternative, consider resizing your image in your external graphics editing software. If you have Fireworks, for instance, all you have to do is click the image and then click the Fireworks logo that appears in the Properties Inspector. This brings up Fireworks and allows you to edit the image and then return to (and automatically refresh) Dreamweavera very easy and clean way to do this and other image editing tasks, and you'll also be able to control the quality of your image. For more on resizing your graphic with your image editor, see the sidebar "Geoff's Method for Resizing Images" later in this chapter. For now, let's look at how to resize in Dreamweaver.

Imminent Doom

Always keep a backup copy of all your original graphics. If you goof up, you can always revert to the original graphic and start again. Otherwise, once you make a change to your image, it's changed for good.

To resize your graphic in Dreamweaver, follow these steps:

On your page, select the image that you want to resize.

When you select an image in Dreamweaver, the Property Inspector displays the graphic's width and height in pixels. You'll also notice that resize handles appear on the right and bottom and in the bottom-right corner of the image.

Using the image's resize handles, drag to make the image larger or smaller.

Your image resizes on your page. To avoid distorting your image, hold down the Shift key as you drag the bottom-right resize handle. This scales your image's width and height proportionally.

Rather than visually sizing your image, you can enter values in the Width and Height fields in the Property Inspector, although it's pretty tough to know what values to enter without causing image distortion. The values that you type in the Property Inspector are measured in pixels. However, you can also type your values using pc (picas), pt (points), in (inches), mm (millimeters), or cm (centimeters). Dreamweaver will convert values typed in any of these measurements back to pixels

Noteworthy

Changing the size of your image onscreen does not change the image's file size or have an impact on download time. For example, if you make your image smaller on your page, only its appearance changes. The image's file size (and therefore its download time) are unaffected. To reduce an image's file size, you have to resize the source image in an external image editing program and then reload it into Dreamweaver.

If you want to reset the image to its original size, click the Reset Image to Original Size button to the right of the Width and Height fields.

The image is restored to it's original width and heightassuming that you haven't clicked the Resample button.

If you're happy with the image's appearance and want to permanently change the image, click the Resample button in the Property Inspector.

Be very careful here. Once you click Resample, that's it; your image's source file is permanently changed.

Dreamweaver warns you that you're permanently changing your image. Click OK to continue.

Personally, I'd much rather manually control the image using my external graphics editor, so I avoid using Resample in Dreamweaver.

Resample adds or removes pixels to clean up some of the distortion caused by resizing an image in Dreamweaver. This helps give the image a sharper appearance.

Bear in mind that once you've used the Resample button, you cannot reset the image to its original width and height. This is because Resample permanently changes the size of your original image file sitting in your site folder. Therefore, the image will change on any other pages where it's being used, too. Deadly.

Dreamweaver's Built-in Image Editing Commands

Dreamweaver has a few built-in image editing commands in addition to the resize options. From within Dreamweaver, you can crop, sharpen, and manipulate the color in your images. These tools are great for quick, on-the-fly image editing, but the commands are limited.

Dreamweaver's built-in image editing tools are great for quick, on-the-fly editing, but the commands are limited.

Further, when you use Dreamweaver's built-in editing tools, you're permanently changing your original graphic file. A better approach is to use an external graphics program to handle all your image editing. However, if you don't have any image editing software installed on your computer, you won't have much choicebut at least you'll be able to make changes to your images with Dreamweaver's tools.

Here's how to use Dreamweaver to manipulate your images:

Select the image on your page that you want to edit.

The Property Inspector displays all the available image-related settings.

Image Editing Tools in the Property Inspector

(1) Edit in External Image Editor

(2) Optimize in Fireworks

(3) Crop

(4) Resample Image

(5) Brightness and Contrast

(6) Sharpen

To crop your imagethat is, to trim away any unwanted areasdo the following:

a. Click the Crop button in the Property Inspector.

b. Dreamweaver warns you that you're about to permanently change your original image's source file. Click OK to proceed.

c. Drag the crop handles that appear around your image to size the crop frame to indicate what areas to keep and which to cut away.

You can undo your crop if you're not happy with your results. Just choose Edit > Undo.

d. Press Enter (Windows) or Return (Mac) to apply the crop. Any areas outside of the crop frame are removed.

To adjust the color in your image, do the following:

a. Click the Brightness and Contrast button in the Property Inspector.

b. When Dreamweaver warns you that you'll be making permanent changes to your image, click OK.

c. In the Brightness/Contrast dialog box that appears, use the sliders to adjust your image.

d. When you're happy with the way that your image looks, click OK. The settings are applied to your image.

To make your image sharper, do the following:

a. Click the Sharpen button in the Property Inspector.

b. Dreamweaver warns you that you'll be making permanent changes to your image. Click OK to continue.

c. In the Sharpen dialog box that appears, drag the slider to adjust the amount of sharpening. As you drag, you'll notice that the amount of contrast around the edges of objects in your image increases or decreases. Be careful, though. Oversharpening makes your image look pixilated and of lower quality.

d. Click OK when you're done. Dreamweaver applies the sharpening to your graphic.

Editing Graphics Outside Dreamweaver

An external image editor is a much better tool than Dreamweaver for manipulating your graphics. After all, Dreamweaver is a web design program, not an image editor. An external image editor will give you a much wider range of commands. For example, you'll be able to manipulate color in more ways, insert text, apply special effects filters, and do pretty much anything else your creative mind can cook up.

To make your work easier, it's a good idea to set up your graphics program of choice as your default image editor in Dreamweaver. Macromedia Fireworks is already set up as the default editor, but you can set another image editor if you prefer.

Here's how to set up the default external editor in Dreamweaver:

Choose Edit > Preferences (Windows) or Dreamweaver > Preferences (Mac).

In the category list on the left, select File Types/Editors.

You'll start by setting the default external editor for JPEG images.

In the Extensions list in the File Types/Editors pane, select .jpg .jpe .jpeg.

Above the Editors list on the right, click the Plus button.

In the Select External Editor dialog box that appears, navigate to the graphics program that you want to set as your new JPEG editor. In Windows, select the program by clicking its .exe file. On the Mac, select the program file itself. Then click Open.

To set your external editor as the primary JPEG image editor, click the Make Primary button.

You'll most likely want to use the same external editor for GIF and PNG files as well, so repeat these steps to set your image editor as the primary editor for those file types, too.

Click OK to close Dreamweaver's preferences.

Now that you've set a new external image editor, you can easily use it as you're building your pages and inserting images.

Here's how to launch your external image editor from Dreamweaver.

Select the image on your page that you want to edit.

A faster way to launch your external editor from Dreamweaver is to hold down Ctrl (Windows) or Command (Mac) and double-click your graphic.

In the Property Inspector, click the Edit button.

Your external editor launches and opens the graphic for editing. Here's where the really powerful stuff starts happening.

Make any changes to your image that you want.

You can use any tools that your image editor possessesfilters, color effects, text, and so on. Just remember to keep your image's resolution at 72 DPI. Other than that, go wild!

Save your file, and go back to Dreamweaver.

The image instantly updates on your page. How did it do that? Remember that your image is a referenced file. You changed the original source file, so the image not only changed on your current page, but it was updated on any other pages that use it, too.

Space Racin' with Favicons

You may have noticed while browsing the web that many sites have a unique icon appearing beside the URL in the browser's Address field. This is a favicon (short for Favorites icon), and they're all the rage on the web these days.

Here's a favicon in action, for [geoffblake.com].

A favicon is a great way to help brand your site, because your icon will not only show up in your visitor's browser's Address field, but it will also appear in the visitor's Bookmarks or Favorites menu and toolbar.

Are you interested in creating your own favicon image and adding it to your site? It's really easyjust follow these steps:

In your graphics program, create a new 16x16-pixel image. Within this image, use all your creative might to create an icon to use as your favicon.

Keep your favicon simple: 16x16 pixels isn't a whole lot of space to design in, so try not to create something with too much detaila silhouette of your company's logo, perhaps.

Save your graphic in your local site's root folder as a JPEG, GIF, or PNG file and make sure to name it faviconotherwise, it won't work.

Back in Dreamweaver, you'll have to insert som89 code by handgasp! Don't worry, it's actually very easy. Just follow these steps and remember to breathe.

In Dreamweaver, switch to Code view by clicking the Show Code View button on the Document toolbar.

In your page code, click just before your page's </head> tag and enter the following code:

[View full size image]

Make sure that you replace [www.url.com] with your site's URL.

Save your page.

Now the unfortunate part is that any page that you want to use your favicon on has to have this code, so you may spend the rest of the afternoon copying and pasting this code into all the pages in your site.

Once the code has been inserted into all the pages in your site, upload your pages and your favicon graphic to your remote site.

Your favicon will now appear in the web browser's Address field, and in the Favorites or Bookmarks menu when someone bookmarks your site. Now that's high orbit!

To find out more about favicons, check out [favicon.com].

Noteworthy

Unfortunately, Internet Explorer for the Mac does not support favicons. Other popular browsers on both Windows and Mac support 'em just fine.

Geoff's Method for Resizing Images

Resizing images can be tricky business. As you saw earlier, it's really easy to accidentally distort images if you're sizing them in Dreamweaver, so most designers usually develop their own approach to resizing images in their external graphics program.

Here is the approach that I use when I'm resizing graphics for my web pages. You certainly don't have to do it my way, but if you're a newbie, this will at least get you started.

Here's my technique for resizing images:

In Dreamweaver, manually size the image to occupy the space that you want it to fill.

You can either manually drag the image's resize handles or enter values in the Width and Height fields in the Property Inspector. At this point, don't be concerned about image quality, even though you're getting that carnival fun-house mirror effect.

All you're after at this point are the pixel dimensions that you want the image to have on the screen.

Once your image is sized, note the image's Width and Height settings in the Property Inspector.

Now you know what size your image needs to be, and you're ready to edit the image in your external editor.

Click the Edit button in the Property Inspector to launch your image editor.

In your image editor, create a new, blank document set to the size you noted back in step 2. Also, make sure that your new image's resolution is set to 72 DPI.

Using your program's arrow tool (called the Pointer tool in Fireworks and the Move tool in Photoshop and ImageReady), drag your original graphic into your new image window.

Close your original graphic.

Within the new image window, scale and move your image until it's set the way you want.

Most graphics programs offer a way to do this. Photoshop and ImageReady both have a tool called Free Transform (Edit > Free Transform). If you're using Fireworks, just drag the corners of the blue frame that appears around your graphic. To scale your image proportionally, hold down Shift as you drag from the image's corner.

Once your image is correctly sized, choose File > Save As.

What you'll be doing here is overwriting your original graphic with your new graphic. Before replacing your file, it's always a good idea to make a backup copy, just in case you goof.

Be sure you've made a backup copy of your original graphics file. Then navigate to your site's local folder, select your old graphic file, and then click Save.

Clicking your old graphic file ensures that it will be overwritten. Just make sure that you're overwriting it with the same file format (JPEG, GIF, or PNG). Overwriting your original graphic not only toasts the old graphic. but it also means that your new graphic will now appear in Dreamweaver.

10.

Head back to Dreamweaver.

Your updated graphic will now appear.

11.

If you're not happy with your graphic, go back to your graphics program and make additional changes.

Often, I'll spend lots of time tweaking and refining my site images in this way, going back and forth between my graphics program and Dreamweaverand, of course, my web browserto see how my images will appear on the web.

Now there's a heck of a lot more than this to resizing images and understanding image resolution.

Just the Gist

About Raster and Vector Graphics

Raster graphics are made up of tiny blocks of color called pixels. Examples of raster images include photos, scans, and artwork.

Vector graphics are built out of mathematically calculated lines and curves. Examples of vector images include logos, clip art, and cartoons.

About Web File Formats

The JPEG file format supports millions of colors, making it suitable for photographs. It reduces file size by sacrificing image quality.

The GIF file format reduces file size by removing color from an image, making it suitable for graphics with few colors, such as logos and clip art.

Because of its superior performance, the PNG format may someday replace JPEG and GIF, but it is not yet widely supported by popular web browsers.

The SWF file format is used when exporting Flash files, which are vector-based animations, for use in Dreamweaver.

About Image Resolution

Resolution is measured in DPI, or dots per inch.

Raster images that you use in your web site need be only 72 DPI.

Setting Your Page Background

Choose Modify > Page Properties to change your page's background.

Ensure that your page background complements your site design and leaves your page text readable.

Inserting Images

To insert a graphic, choose Insert > Image.

Insert only images that have been saved in your site's local folder. Otherwise, they won't appear when you upload your site to the web.

Images that are inserted into your web page are referenced filesthey're not embedded.

If you break the link to an image (by moving the image, renaming it, or deleting it outside of Dreamweaver), the image won't appear on your page.

Controlling Images on Your Page

Use the settings in the Property Inspector to control your images. For a finer level of control, use CSS to manage your images.

To resize your images, drag the resize handles that appear on the bottom, right, and bottom-right edges when you select a graphic.

Clicking the Resample button on the Property Inspector cleans up a resized image, but doing so also permanently changes the image's source file.

Dreamweaver comes with a set of built-in tools to modify your images. These allow you to make fast changes to your graphics without leaving Dreamweaver.

A better way to modify your images is to use an external graphics editing program.

Ten Ton Dreamweaver [Electronic resources] نسخه متنی

فارسی

کردی

العربیه

اردو

Türkçe

Русский

English

Français

کانال فیلم من

تبیان من

فایلهای من

کتابخانه من

پنل پیامکی

وبلاگ من

اینجــــا یک کتابخانه دیجیتالی است

با بیش از 100000 منبع الکترونیکی رایگان به زبان فارسی ، عربی و انگلیسی