Download WDI-Chp04

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
Introduction
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
Lesson 1: Insert and Align Images
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.
Site option button
Category buttons
Favorites option button
Thumbnail of selected
image
List of images in website
Refresh Site List
Drag any panel border
or corner to resize
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 2: Enhance an Image and Use Alternate Text
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 viewerfriendly 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 3: Insert a Background Image and Perform Site Maintenance
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.
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
Lesson 4: Add Graphic Enhancements
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
<title> code, to link the icon file (example:<link rel="shortcut
icon" href="starfish.ico" type="image/x-icon" />
Lesson 4: Add Graphic Enhancements
Protecting 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