1 / 18

Chapter 4

Chapter 4. Adding Images. Chapter 4 Lessons. Introduction Insert and align images Enhance an image and use alternate text Insert a background image and perform site maintenance Add graphic enhancements. Introduction. Using Images to Enhance Web Pages.

shad-hansen
Télécharger la présentation

Chapter 4

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Chapter 4 Adding Images

  2. Chapter 4 Lessons Introduction • Insert and align images • Enhance an image and use alternate text • Insert a background image and perform site maintenance • Add graphic enhancements

  3. 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

  4. 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

  5. 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

  6. Lesson 1: Insert and Align Images The Assets Panel – cont. Site option button Favorites option button Thumbnail of selected image Category buttons List of images in website Refresh Site List Drag any panel border or corner to resize

  7. 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

  8. 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

  9. 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

  10. 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

  11. 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 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

  12. 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

  13. 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

  14. 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

  15. 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

  16. 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

  17. 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: • Create an icon that is 16 pixels by 16 pixels • Save the file as an icon file with the .ico file extension in your site root folder • 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" />

  18. 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

More Related