1. Chapter 4
Adding Images

2. Inserting and Aligning Images
Graphics refer to the appearance of most non-text items on a web page, such as:
Photographs
Logos
menu bars
Flash animations
Charts
background images

3. Inserting and Aligning Images
When you choose graphics to add to a web page, it’s important to use graphic files in the appropriate file format.
The three primary graphic file formats used in web pages are:
GIF (Graphics Interchange Format),
JPEG or JPG (Joint Photographic Experts Group)
PNG (Portable Network Graphics)

4. Inserting and Aligning Images
Files saved with the PNG format can display many colors and use various degrees of transparency, called opacity.

5. Inserting and Aligning Images
When you add a graphic to a website, Dreamweaver automatically adds it to the Assets panel.
The Assets panel, located in the Files panel group, displays all the assets in a website.

6. Inserting and Aligning Images
The Assets panel contains nine category buttons that you use to view your assets by category including:
Images
Colors
URLs
SWF
Shockwave
Movies
Scripts
Templates
Library.

7. Inserting and Aligning Images
The Assets panel is divided into two panes:
The lower pane displays a list of all the images in your site and is divided into five columns.
The top pane displays a thumbnail of the selected image in the list.

8. Inserting and Aligning Images
You can use the Favorites option button to view those assets that you have designated as favorites, or assets that you expect to use repeatedly while you work on the site.
You can use the Assets panel to add an asset to a web page by dragging the asset from the Assets panel to the page or by using the Insert button on the Assets panel.

9. Inserting and Aligning Images
You can insert an image placeholder to hold the image position on the page.
An image placeholder is a graphic the size of an image you plan to use.
To insert an image placeholder, use the Image Placeholder command on the Image Objects menu.

10. Inserting and Aligning Images
Image Placeholder dialog box

11. Inserting and Aligning Images
You can manage project files, including video and Camera Raw files, with a file management tool called Adobe Bridge.
Adobe Bridge is an image file management program that is used across the Adobe suite applications.

12. Inserting and Aligning Images
Folders tab
Folders panel
Your path may differ
Image Placeholder dialog box
su_logo.gif image is selected in Content panel
Your Content panel may be darker or lighter depending on your settings

13. Enhancing an Image and Using Alternative Text
After you place an image on a web page, you have several options for enhancing it, or improving its appearance.
To make changes to the image itself you need to use an image editor such as Adobe fireworks or Adobe Photoshop.

14. Enhancing an Image and Using Alternative Text
You can use Dreamweaver to enhance how images appear on a page.
You can modify the brightness and contrast, add borders around an image or add horizontal and vertical space.
Borders are frames that surround an image.

15. Enhancing an Image and Using Alternative Text
Adding horizontal or vertical space does not affect the width or height of the image.
The best way to add horizontal and vertical space is with CSS.
Spacing around web page objects can also be created by using “spacer” images, or transparent images that act as placeholders.

16. Enhancing an Image and Using Alternative Text
One of the easiest ways to make your web page viewer-friendly and accessible to people of all abilities is to use alternate text.
Alternate text is descriptive text that appears in place of an image while the image is downloading or not displayed.

17. Enhancing an Image and Using Alternative Text
Alt text box
Alternate text setting in the Property inspector

18. Enhancing an Image and Using Alternative Text
One of the default preferences in Dreamweaver is to prompt you to enter alternate text whenever you insert an image on a page.
You can set alternate text options in the Accessibility category of the Preferences dialog box.

19. Enhancing an Image and Using Alternative Text
The use of alternate text is the first checkpoint listed in the Web Content Accessibility Guidelines (WCAG), Version 2.0, from the World Wide Web Consortium (W3C).

20. Enhancing an Image and Using Alternative Text
The twelve WCAG guidelines are grouped together under four principles:
Perceivable
Operable
Understandable
Robust

21. Inserting a Background Image and Performing Site Maintenance
You can insert a background image on a web page to provide depth and visual interest to the page, or to communicate a message or mood.
Background images are image files used in place of background colors.

22. Inserting a Background Image and Performing Site Maintenance
A tiled image is a small image that repeats across and down a web page, appearing as individual squares or rectangles.
A tiled image will download much faster than a large image.

23. Inserting a Background Image and Performing Site Maintenance
When you create a web page, you can use either a background color or a background image, unless you want the background color to appear while the background image finishes downloading.
You can also use background images for some sections of your page and solid color backgrounds for other sections.

24. Inserting a Background Image and Performing Site Maintenance
As you work on a website, you might find that you have files in your assets folder that you don’t use in the website.
To avoid accumulating unnecessary files, it’s a good idea to look at an image first, before you place it on the page, and copy it to the assets folder.

25. Inserting a Background Image and Performing Site Maintenance
It is a good idea to store original unedited copies of your website image files in a separate folder, outside the assets folder of your website.
If you edit the original files, resave them using different names.

26. Inserting a Background Image and Performing Site Maintenance
You are not as limited with the number of colors you can use, and you may choose to select colors outside of the web-safe palette color space.
You can experiment by choosing colors outside the default color palettes to create a color scheme that complements your website content.

27. Inserting a Background Image and Performing Site Maintenance
You can use the eyedropper tool FPO to pick up a color from a page element, such as the background of an image.

28. Inserting a Background Image and Performing Site Maintenance
New color selected with the Eyedropper
Preview of the color that will be used if you click here with the Eyedropper
Color code changes as you move the Eyedropper over the image
Apply button applies the color without closing the dialog box

29. Inserting a Background Image and Performing Site Maintenance
If you are designing pages that will be displayed with a web device such as a PDA or mobile phone, be aware that many of these devices have more limited color displays and, in these cases, it might be wise to stick to web-safe colors instead.

30. Adding Graphic Enhancements
Sometimes designers want to display a small image on a page with an option for the viewer to click on the image to display a larger image.
It is done both to conserve space and to keep the page size as small as possible.

31. Adding Graphic Enhancements
A thumbnail image is a small version of a larger image allows more images to fit on the page.
Another technique is to link from one image to a second image that incorporates the first image.

32. Adding Graphic Enhancements
The about_us page with an image linking to a larger image
Link text box
Small map image links to large map image
Both map images are copied to the assets folder

33. Adding Graphic Enhancements
In most browsers today, when you add a web page to your favorites list or bookmarks, the page title will appear with a small icon that represents your site, similar to a logo, called a favicon (short for favorites icon).

34. Adding Graphic Enhancements
To create a favicon, first create an icon that is 16 pixels by 16 pixels.
Second, save the file as an icon file with the .ico file extension in your site root folder.
Third, add HTML code to the head section of your page to link the icon file.

35. Adding Graphic Enhancements
On most websites, viewers are able to save an image on a page by right-clicking an image, then clicking Save on the shortcut menu.
If you would like to prevent viewers from having this option, you can add a no right-click script, or JavaScript code that will not allow users to display the shortcut menu by right-clicking an image.

36. Adding Graphic Enhancements
You can also protect website images by inserting the image as a table, cell, or CSS block background and then placing a transparent image on top of it.
When a viewer attempts to save it with the shortcut menu, they will only save the transparent image.