1 / 21

Add Images to Improve Your Presentation

Add Images to Improve Your Presentation. Day 8. You will learn to. Understand Graphics Formats Find Graphics Create Your Own Images Insert an Image on Your Page Control Image Placement and Appearance Use Image Links for Navigation. Content can be boring….

minerva-english
Download Presentation

Add Images to Improve Your Presentation

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. Add Images to Improve Your Presentation Day 8

  2. You will learn to • Understand Graphics Formats • Find Graphics • Create Your Own Images • Insert an Image on Your Page • Control Image Placement and Appearance • Use Image Links for Navigation

  3. Content can be boring…. • Today’s world is visually oriented and need more than straight text • Pictures add life to your Web page • There are plenty of resources on the Web to find graphics

  4. Learn the differences between Graphics Formats • There are three formats that are best suited for the Web • GIF pronounced jiff like the peanut butter • JPEG • PNG pronounced PING like the golf club • Each has its own qualities and is best used for particular types of images

  5. GIF Format for Art • If you are doing navigation buttons; using clip art; or creating banners, drawings, or anything that has large blocks of the same color you want to use GIF images.

  6. Use JPEG for Photos • Because GIFs and JPEGs use different compression, JPEGs are better suited for photographs. • Photographs have a much broader range of color varieties and shades, which make it unsuitable for GIFs

  7. Look to the Future with PNG • Combines some of the best qualities of GIFs and JPEGs but doesn’t have very broad browser support • It is probably better to use GIFs and JPEGs until PNG is more widely supported.

  8. Key Terms For Imaging • Transparency: possible to cause one or more of the colors in the image to act as if it were transparent, thus matching the background color (JPEG does not support) • Interlacing: saving an image so that when it loads, it gradually progresses from a low resolution to a high resolution.(JPEG does not support)

  9. Locate Graphics for Use on Your Site • Capture Images from the Web • Find Royalty-Free Clip Art • Create Your Own Graphics

  10. Capture Image From the Web • Easiest way • Save virtually any image that appears on your screen when you visit a site. • Go online and find a picture, logo, or graphic you like • Put the cursor somewhere on the image and right click • Choose Save Picture As • Give it a file name and put it in your folder • Click OK

  11. Find Royalty-Free Clip Art • There are tons of sources on the Web, there is no need to “borrow” someone else’s without permission. • Use a search engine to search for free clip art. • Or you can visit some of the following sites.

  12. www.webplaces.com/html/clipart.htm www.aplusart.com www.clip-art.com www.clipart.com www.GifArt.com www.freewebtemplates.com www.stockphotowarehouse.com www.freestockphotos.com

  13. Save three pictures on your H:// drive • Clipart • Photos • Buttons

  14. Insert a Graphic Image • Inserting an image is easy. • You place an graphic on your page by using the image, <img />, element and its attributes. • To place an image follow these steps:

  15. Insert the image with the image element: <img /> • Identify the image’s location with the source attribute: src=“” • The source attribute tells the browser where to find the image • <img src=“sunset.jpg” /> • Add a description for non-visual browsers with the alt=“” attribute. • This will create a pop-up text box with your description when the cursor moves over it.

  16. Control Graphic Size with Height and Width • The height and width attributes enable you to specify the amount of space your image takes up on the page. • Height and Width do not change the image file’s actual size, only how it displays on a page. A 1MB image still takes up a full meg of space, even if you scale it down to a thumbnail

  17. Height=“” specifies the height of the image in pixels Width=“” specifies the width of the image in pixels <img src=“sunset” alt=“My favorite sunset” height=“100” width=“150” />

  18. Wrap Text and Align Images • To determine where your image appears on a Web page and how it relates to the text around it, you can use the align=”” attribute

  19. Use left and right for Text Wrapping • To control text wrapping, you use the align attribute with left or right as the value. • Insert one of your images <img src=“your image.jpg align=“left” /> • Insert the second of your images <img src=“yourimage.jpg align=“right” /> Type a paragraph complete with tags after each inserted image.

  20. Add a border • To add a border around your image, include the border=“” attribute. • Specify in pixels • Add border=“10” to one of you images.

  21. Create image links Add <a href=“tables.htm><img src=“your third image.jpg”></a>

More Related