Chapter 4 Adding Images

Chapter 4 Lessons Introduction 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

Using Images to Enhance Web Pages 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 Introduction

Using Images to Enhance Web Pages Use graphics sparingly Can complement content of pages Store images in separate folder (assets) Three web graphic file formats: – GIF (graphics interchange format) Maintains transparency, can include animations – JPEG (joint photographic experts group) Good for photo images – PNG (portable network graphics) Can display many colors, maintains transparency Introduction

The Assets Panel Located in the Files panel group Displays all the assets in a website Has Favorites button Contains nine categories Buttons: – Images – Colors – URLs – SWF – Shockwave – Movies – Scripts – Templates – Library Lesson 1: Insert and Align Images

The Assets Panel – cont. Category buttons Drag any panel border or corner to resize Site option button Favorites option button Thumbnail of selected image List of images in website Refresh Site List Lesson 1: Insert and Align Images

Image Placeholder 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 Lesson 1: Insert and Align Images

Aligning Images Aligning images means to position them in relation to other elements on the page Default: – bottom edge aligns with the baseline of the first line of text or any other element in the same paragraph Alignment settings will be added by using CSS rules Lesson 1: Insert and Align Images

Enhancing Images Improving the appearance of an image Changes to image can be done using image editing software such as: – Adobe Fireworks (default) – Adobe Photoshop Lesson 2: Enhance an Image and Use Alternate Text

Borders and Horizontal and Vertical Space Borders – Frames that surround an image – Added in CSS Horizontal and Vertical space – Blank space around the image – Helps image stand out – Does not affect size of image – Added as Margin in CSS Lesson 2: Enhance an Image and Use Alternate Text

Alternate Text Text that appears in place of an image when the image is downloading or when the mouse pointer is placed over it Makes your web page viewer- friendly and handicapped accessible The first checkpoint listed in the Web Content Accessibility Guidelines (WCAG), Version 2.0, from the World Wide Web Consortium (W3C) The twelve WCAG guidelines are grouped together under four principles: – Perceivable – Operable – Understandable – Robust Lesson 2: Enhance an Image and Use Alternate Text

Background Images Provides page depth and visual interest to page Used in place of background colors Avoid inserting them on web pages where they would not provide the contrast necessary for reading page text Use either a background color or a background image, but not both Keep file size small Use a tiled image – Small graphic that repeats across or down a page Or a larger non-tiled image Use background images or colors for sections of pages Lesson 3: Insert a Background Image and Perform Site Maintenance

Managing Images Adding and removing background images Delete unused files from assets folder Store original unedited copies of website images files in separate folder outside the assets folder If you edit the original files, resave them using a different name Lesson 3: Insert a Background Image and Perform Site Maintenance

Managing Colors You can use the Assets panel to locate non-web-safe colors in a website Non-web-safe colors are colors that may not be displayed uniformly across computer platforms – They still may be used – Experiment by choosing colors outside the default color palettes to create a color scheme that complements your website content Use the eyedropper tool FPO to pick up a color from a page element, such as the background of an image Lesson 3: Insert a Background Image and Perform Site Maintenance

Managing Colors – cont. Lesson 3: Insert a Background Image and Perform Site Maintenance 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

Thumbnail Images A thumbnail image is a small version of a larger image allows more images to fit on the page Why are they used: – 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 Lesson 4: Add Graphic Enhancements

Favorite Icons Icon that appears with your page title when a page is bookmarked that is used to represent your site – Called favicon Steps to Create: 1.Create an icon that is 16 pixels by 16 pixels 2.Save the file as an icon file with the.ico file extension in your site root folder 3.Add HTML code to the head section of your page, above your code, to link the icon file (example: Lesson 4: Add Graphic Enhancements

Protecting Images Lesson 4: Add Graphic Enhancements Prevent Website viewers from saving images from your site by: – Adding JavaScript Code to prevent right clicking or appearance of shortcut menu – Adding image as a table, cell, or CSS block background and placing a transparent image on top of it