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.