1. © 2011 Delmar, Cengage Learning Chapter 4 Adding Images

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

3. © 2011 Delmar Cengage Learning 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.

4. © 2011 Delmar Cengage Learning 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

5. © 2011 Delmar Cengage Learning Tools You’ll Use Adding Images

6. © 2011 Delmar Cengage Learning Insert and Align Images The three primary graphic file formats: –GIF (Graphic Interchange Format) –JPEG (Joint Photographic Experts Group) –PNG (Portable Network Graphics)

7. © 2011 Delmar Cengage Learning Insert and Align Images 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.

8. © 2011 Delmar Cengage Learning Insert and Align Images 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

9. © 2011 Delmar Cengage Learning Insert and Align Images 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

10. © 2011 Delmar Cengage Learning Insert and Align Images 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.

11. © 2011 Delmar Cengage Learning Insert and Align Images Image Placeholder dialog box

12. © 2011 Delmar Cengage Learning Insert and Align Images 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.

13. © 2011 Delmar Cengage Learning Insert and Align Images 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.

14. © 2011 Delmar Cengage Learning 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

15. © 2011 Delmar Cengage Learning Enhance an Image and Use Alternate Text Using the Property inspector to add a border V Space text boxH Space text boxSelected image with 1 pixel border Border text box

16. © 2011 Delmar Cengage Learning Enhance an Image and Use Alternate Text Alternate text is descriptive text that appears in place of an image while the image is downloading or not displayed

17. © 2011 Delmar Cengage Learning Enhance an Image and Use Alternate Text You should use alternate text when inserting: –Form objects –Text as graphic buttons –Frames –Media files

18. © 2011 Delmar Cengage Learning 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

19. © 2011 Delmar Cengage Learning A tiled image is a small image that repeats across and down a web page. Insert a Background Image and Perform Site Maintenance The about_us page with a busy tiled background

20. © 2011 Delmar Cengage Learning Insert a Background Image and Perform Site Maintenance 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.

21. © 2011 Delmar Cengage Learning Insert a Background Image and Perform Site Maintenance 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.

22. © 2011 Delmar Cengage Learning 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.

23. © 2011 Delmar Cengage Learning Add Graphic Enhancements Snapfish website Favicon displayed in the address bar and on the page tab Favicon is similar in appearance to other images on the page

24. © 2011 Delmar Cengage Learning Add Graphic Enhancements 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.