Chapter 4 Adding Images

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

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)

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

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.

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.

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.

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.

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.

Inserting and Aligning Images Image Placeholder dialog box

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.

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

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.

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.

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.

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.

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

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.

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

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

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

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

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

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.

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.

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.