1. Adding Images & Working with Images Unit 2

2. TITLE CORNELL NOTES TOPIC: NOTES: Name: Date:08/10/2009 Period : Summary: To display Art To display Photographs Illustrate something that is difficult to explain with words. Maps to give directions A financial chart A diagram Navigational Tools ~ use images as navigational tools that allow readers to browse your web site. Reasons for Using Images

3. TITLE CORNELL NOTES TOPIC: NOTES: Name: Date:08/10/2009 Period : Summary: The Internet Scanning Create Images Purchase Images Obtaining Images

4. TITLE CORNELL NOTES TOPIC: NOTES: Name: Date:08/10/2009 Period : Summary: Copyright Image Resolution/Clarity of the Image. (higher resolutions provide sharper detail.) Image Width (620 pixels wide, larger may not fit on some screens) Thumbnails Pages without images Reuse images Image Considerations

5. TITLE CORNELL NOTES TOPIC: NOTES: Name: Date:08/10/2009 Period : Summary: Replace the “?” with the location and name of the image as it is stored on your computer. Add and Image Image Format Types of images: PNG, JPEG, GIF NO BMP Image size: The smaller the quicker to load. Specify location of images: If an image you want to add to a web page is stored in the same location as the web page, you can specify just the name of the image; otherwise you must provide name of subfolder as well..

6. TITLE CORNELL NOTES TOPIC: NOTES: Name: Date:08/10/2009 Period : Summary: Tips for adding images. Specify location of images: If an image you want to add to a web page is stored in the same location as the web page, you can specify just the name of the image: ~ otherwise you must provide name of subfolder as well: or

7. TITLE CORNELL NOTES TOPIC: NOTES: Name: Date:08/10/2009 Period : Summary: Center an Image Add a Banner Type in front of the image you want to center. Type after the image you want to center. Create a GIF image with a width of 600-800 pixels, height of 150-200 pixels. After the tag at the top of your web page, type <img src=“?” replacing the ? with the location of the image on your computer. The web browser displays the image as a banner across the top of your web page.

8. TITLE CORNELL NOTES TOPIC: NOTES: Name: Date:08/10/2009 Period : Summary: Add a Border Provide alternative text In the tag for the image you want to display a border, type border=?, replacing the ? With the border thickness you want to use in pixels. In the for the image you want to offer alternative text, type alt=? Replacing the ? With the text you want to display if the image does not appear.

9. TITLE CORNELL NOTES TOPIC: NOTES: Name: Date:08/10/2009 Period : Summary: Wrap text around an image Stop Text Wrapping To wrap text around the right side of an image, type align=left in the tag for the image. To wrap text around the left side of an image, type align=right in the tag for the image. Position the cursor where you want to stop test from wrapping around an image. Type replacing ? With the margins you want to be clear of images before the text continues (left, right or all)

10. TITLE CORNELL NOTES TOPIC: NOTES: Name: Date:08/10/2009 Period : Summary: Wrap text between two images. 1.Type the text you want to wrap between two images. 2.Before the text, add the two images. In the tag for the image you want to appear on the left side of the text, type align=left. In the tag for the image you want to appear on the right side of the text, type align=right.

11. TITLE CORNELL NOTES TOPIC: NOTES: Name: Date:08/10/2009 Period : Summary: Align an image with text Add space around an image In the tag for the image you want to align with text, type align=? replacing ? with the way you want to align the image with the text (top, bottom, or middle). LEFT AND RIGHT SIDES In the tag for the image you want to add space around, type hspace=? replacing the ? with the amount of space you want to add to both the left and right side of the image in pixels.

12. TITLE CORNELL NOTES TOPIC: NOTES: Name: Date:08/10/2009 Period : Summary: Add space around an image TOP AND BOTTOM In the tag for the image you want to add space around, type vspace=? replacing the ? with the amount of space you want to add to both the top and bottom of the image in pixels..

13. TITLE CORNELL NOTES TOPIC: NOTES: Name: Date:08/10/2009 Period : Summary: Add a background image Tips for adding Background image In the tag, type background=“?” replacing ? with the location of the image on your computer. Choose a background image: One that creates an interesting background design without overwhelming your web page. Seamless background: a good background image should have invisible edges. When the image repeats to fill the web page, you should not be able to tell where the edges of the images meet.

14. TITLE CORNELL NOTES TOPIC: NOTES: Name: Date:08/10/2009 Period : Summary: Tips for adding Background image Web Page Readability: make sure the background image you choose does not affect the readability of your web page. You may need to change the color of text to make the web page easier to read.

15. TITLE CORNELL NOTES TOPIC: NOTES: Name: Date:08/10/2009 Period : Summary: Add a horizontal rule You can add a horizontal rule to visually separate sections of you web page. Type where you want a horizontal rule to appear on your web page. CHANGE THICKNESS You can change the thickness of a horizontal rule. In the tag for the horizontal rule you want to change, type size=? replacing the ? with the thickness you want to use for the horizontal rule in pixels.

16. TITLE CORNELL NOTES TOPIC: NOTES: Name: Date:08/10/2009 Period : Summary: Using Images in a list Create an eye catching list by using images instead of bullets. Type before the list. Type in front of each item in the list. Type after the list. To add the image you want to use as a bullet to each item in the list, type after the tag for each item. Replace ? with the location of the image on your computer.

17. TITLE CORNELL NOTES TOPIC: NOTES: Name: Date:08/10/2009 Period : Summary: Define Image Size In the image tag using width and height attributes you can change the size of an image by defining the pixels of the image. (Take note of the image size when copying it, or in paint go to attributes to find the information. This information can be obtained by passing your cursor over the image as it is saved on your computer. The Web browser will display the picture in the size you have specified. You can reduce the size of an image in paint to take up less space on the computer.

18. TITLE CORNELL NOTES TOPIC: NOTES: Name: Date:08/10/2009 Period : Summary: Changing Image Coloring Open you picture in publisher or in a word document. Right click on your picture; at the drop down menu click format picture. Under image control chose washout for color. Resave the picture under a new name. Save picture as: You can use this as a background where the color is less vivid and allows your text to show.