© 2011 Delmar, Cengage Learning Chapter 4 Adding Images

© 2011 Delmar, Cengage Learning

Chapter 4

Adding Images

Chapter 4 Lessons

1. Insert and align images

2. Enhance an image and use alternate text

3. Insert a background image and perform site maintenance

4. Add graphic enhancements

© 2011 Delmar Cengage Learning

Chapter 4 Lessons


Adding Images

• A well-designed web page includes a balanced combination of text and images.

• You can use specific file formats to save images for websites to ensure maximum quality with minimum file size.


Adding Images

• The terms graphics and images are used interchangeably.

• Graphics refer to the non-text items on a web page and are referred to by:– File type– File format


Tools You’ll Use

Adding Images


Insert and Align Images

• The three primary graphic file formats:– GIF (Graphic Interchange Format)– JPEG (Joint Photographic Experts

Group)– PNG (Portable Network Graphics)



• Files saved with the PNG format can display many colors and use various degrees of transparency called opacity.

• Not all older browsers support the PNG format.



The Assets panel

Images button

Category buttons

Drag any panel border or corner to resize

Drag title bar to undock tab group

Site option button

Favorites option button

Thumbnail of selected image

List of images in website



• The Assets panel displays all the assets in the website and is divided into two panes:– The lower pane displays a list of all the

images in your site– The top pane displays a thumbnail of the

selected image in the list



• Favorites are assets that you expect to use repeatedly while you work on a site.

• An image placeholder is a graphic the size of an image you plan to use.



Image Placeholder dialog box



• The Camera Raw file formats are files that contain unprocessed data and are not yet ready to be printed.

• Adobe Bridge is an image file management program that is used across the Adobe suite applications.



• Positioning an image is called aligning.

• The default position for an image is its bottom edge aligns with the baseline of the first line of text.

• You can change the alignment setting using the Align menu.


Enhance an Image and Use Alternate Text

• After you place an image on a web page you can enhance it by:– Removing scratches– Erasing parts– Modifying the brightness and contrast– Adding borders– Adding horizontal and vertical space



Using the Property inspector to add a border

V Space text box H Space text box Selected image with 1 pixel border

Border text box



• Alternate text is descriptive text that appears in place of an image while the image is downloading or not displayed



• You should use alternate text when inserting:

– Form objects– Text as graphic buttons– Frames– Media files


Insert a Background Image and Perform Site Maintenance

Background images are files used in place of background colors.

The about_us page with a more subtle tiled background


A tiled image is a small image that repeats across and down a web page.


The about_us page with a busy tiled background



• When you remove an image from a web page it is not removed from the assets folder.

• To avoid accumulating unnecessary files, periodically go through the assets folder to manage its contents.



• Non-safe-web colors are colors that may not appear uniformly across computer platforms.

• Once you replace a non-safe-web color with another color, you should use the Refresh Site List button to verify the color has been removed.


Add Graphic Enhancements

• Thumbnail images are smaller versions of a larger image.

• Favicons are favorite icons that will appear when you add a web page to your favorites or bookmarks.



Snapfish website

Favicon displayedin the address barand on the page tab

Favicon is similar in appearance to other images on the page



• You can add a no right-click script to an image that will prevent viewers from saving the image.

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

Documents

© 2011 Delmar, Cengage Learning Chapter 4 Adding Images