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

Chapter Chapter 44Adding ImagesAdding Images

Chapter 4 LessonsChapter 4 Lessons

Introduction1. Insert and align images2. Enhance an image and use alternate text3. Insert a background image and perform site

maintenance4. Add graphic enhancements

Using Images to Enhance Web PagesUsing 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 PagesUsing 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 PanelThe 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.The Assets Panel – cont.

Category buttons

Drag any panel border or corner to resize

Site option buttonFavorites option button

Thumbnail of selected image

List of images in website

Refresh Site List


Image PlaceholderImage 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


Aligning ImagesAligning 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


Enhancing ImagesEnhancing 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 SpaceBorders 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


Alternate TextAlternate 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


Background ImagesBackground 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 ImagesManaging 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


Managing ColorsManaging 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


Managing Colors – cont.Managing Colors – cont.


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 ImagesThumbnail 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 IconsFavorite 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 pixels2. Save the file as an icon file with the .ico file extension in your

site root folder3. Add HTML code to the head section of your page, above your

<title> code, to link the icon file (example:<link rel="shortcut icon" href="starfish.ico" type="image/x-icon" />


Protecting ImagesProtecting Images


• 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

Documents

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