Transcript Slides Adding Images

Chapter 4
Adding Images
Inserting and Aligning Images Using
CSS
• When you choose graphics to add to a web
page, it’s important to use graphic files in the
appropriate file format.
• Keep in mind the different types of devices that
may be used to view the pages, such as tablets
or other mobile devices.
Inserting and Aligning Images Using
CSS
• The three primary graphic file formats used in
web pages are:
– GIF (Graphics Interchange Format)
– JPEG or JPG (Joint Photographic Experts
Group)
– PNG (Portable Network Graphics)
Inserting and Aligning Images Using
CSS
• GIF files download quickly, making them ideal to
use on web pages.
• Though limited in the number of colors they can
represent, GIF files have the ability to show
transparent areas.
Inserting and Aligning Images Using
CSS
• JPG files can display many colors. Because they
often contain many shades of the same color,
photographs are often saved in JPG format.
Inserting and Aligning Images Using
CSS
• Files saved with the PNG format can display
many colors and use various degrees of
transparency, called opacity.
• The PNG format gives greater color depth when
designing for mobile devices.
Inserting and Aligning Images Using
CSS
• When you add a graphic to a website,
Dreamweaver automatically adds it to the Assets
panel.
• The Assets panel displays all the assets
(images, videos, audio files) in a website.
Inserting and Aligning Images Using
CSS
• The Assets panel contains eight category buttons
that you use to view your assets by category
including:
– Images
– Colors
– URLs
– SWF
– Movies
– Scripts
– Templates
– Library
Inserting and Aligning Images Using
CSS
• You can view assets in each category in two
ways.
– You can use the Site option button to view all
the assets in a website.
– You can use the Favorites option button to view
those assets that you have designated as
favorites, or assets that you expect to use
repeatedly while you work on the site.
Inserting and Aligning Images Using
CSS
• When you insert an image on a web page, you
need to position it in relation to other page
elements such as text or other images.
• Positioning an image is also called aligning an
image.
• You add alignment settings using CSS.
Inserting and Aligning Images Using
CSS
• As you create rules, remember the rules of
inheritance:
– tablet and desktop selectors inherit global
(mobile) properties
– if you modify the tablet properties, the desktop
selectors then inherit the tablet properties
Inserting and Aligning Images Using
CSS
• It is important to visualize how your images will
look when displayed in multiple devices.
• Experiment with the images you select by using
the Mobile, Tablet, and Desktop size buttons to
see how they will look on the finished page.
Inserting and Aligning Images Using
CSS
• Selecting Images for a Responsive Design:
– Avoid setting specific sizes for image heights
and widths on a page
– Use percentages for image height or width
properties to direct then to reduce or enlarge in
size as the screen gets smaller or larger
– Specify different images for each device
Inserting and Aligning Images Using
CSS
Mobile size button
Viewing the about us page Mobile size
Enhancing an Image and Using
Alternate Text
• After you place an image on a web page, you
have several options for enhancing it, or
improving its appearance.
• To make changes to the image itself, such as
removing scratches from it, or erasing parts of it,
you need to use an external image editor such as
Adobe Fireworks or Adobe Photoshop.
Enhancing an Image and Using
Alternate Text
• You can use Dreamweaver to enhance how
images appear on a page.
• Borders are frames that surround an image.
• Horizontal and vertical space is blank space
above, below, and on the sides of an image that
separates the image from text or other elements
on the page.
Enhancing an Image and Using
Alternate Text
• You add horizontal and vertical space with the
CSS margin properties and add borders with the
CSS borders properties.
Enhancing an Image and Using
Alternate Text
Department of Transportation website
Enhancing an Image and Using
Alternate Text
• One of the easiest ways to make your web page
viewer-friendly and accessible to people of all
abilities is to use alternate text.
• Alternate text is descriptive text that appears in
place of an image while the image is
downloading or not displayed.
Enhancing an Image and Using
Alternate Text
• Screen readers, devices used by persons with
visual impairments to convert written text on a
computer monitor to spoken words, can “read”
alternate text and make it possible for viewers to
have an image described to them in detail.
Enhancing an Image and Using
Alternate Text
Alternate text setting in the Property inspector
Alt text box
Inserting a Background Image and
Performing Site Maintenance
• You can insert a background image on a web
page to provide depth and visual interest to the
page, or to communicate a message or mood.
• Background images are image files used in
place of background colors.
Inserting a Background Image and
Performing Site Maintenance
• A tiled image is a small image that repeats
across and down a web page, appearing as
individual squares or rectangles.
Inserting a Background Image and
Performing Site Maintenance
• You can also use background images for some
sections of your page and solid color
backgrounds for other sections.
Inserting a Background Image and
Performing Site Maintenance
NASA website
Inserting a Background Image and
Performing Site Maintenance
• To avoid accumulating unnecessary files, it’s a
good idea to look at an image first, before you
place it on the page, and copy it to the assets
folder.
• Removing an image from a web page does not
remove it from the assets folder in the local site
folder of the website.
Inserting a Background Image and
Performing Site Maintenance
• It is a good idea to store original unedited copies
of your website image files in a separate folder,
outside the assets folder of your website.
Inserting a Background Image and
Performing Site Maintenance
• With monitors today that display millions of
colors, you are not as limited with the number of
colors you can use, and you may choose to
select any color you feel fits the website design
and accessibility standards.
Inserting a Background Image and
Performing Site Maintenance
• You can use the eyedropper tool in the Color
picker to pick up a color from a page element,
such as the background of an image.
Inserting a Background Image and
Performing Site Maintenance
• If you are designing pages that will be displayed
with a web device such as a mobile phone, be
aware that many of these devices have more
limited color displays and, in these cases, it might
be wise to use standard colors.
Adding Graphic Enhancements
• A thumbnail image, or small version of a larger
image is used so that more images will fit on a
web page.
• You could also use a link from one image to a
second image that incorporates the first image.
Adding Graphic Enhancements
• In most browsers today, when you add a web
page to your favorites list or bookmarks, the page
title will appear with a small icon that represents
your site, similar to a logo, called a favicon
(short for favorites icon).
• Favicons are a convenient way to add branding,
or recognition, for your site.
Adding Graphic Enhancements
Favicon
displayed
on the page
tab
Favicon is a
smaller
version of
the logo
used on the
page
Department of Education
Adding Graphic Enhancements
• On most websites, users are able to save an
image on a page by right-clicking an image, then
selecting Save on the shortcut menu.
• If you would like to prevent viewers from having
this option, you can add a no right-click script,
or JavaScript code that will not allow users to
display the shortcut menu by right-clicking an
image.
Adding Graphic Enhancements
• 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.
• When a user attempts to save it with the shortcut
menu, they will only save the transparent image.