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

Viewing the about us page Mobile size

Mobile size button

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

Department of Education

Favicon displayed

on the page tab

Favicon is a smaller

version of the logo

used on the page

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.