Student Learning Outcomes:
1. Identify the differences among image file types.
2. Evaluate the purpose of Alternate text.
3. Determine the Float property value to wrap text.
4. Identify the picture properties
5. Create a border and white space around images.
6. Change the size of an image.
7. Modify the contents of an image.
8. Explore the functions of the Picture toolbar
9. Create a thumbnail image
10. Evaluate the uses of the Clear property
11. Create a folder for images.
| GIF | Best for line art and computer-generated drawings. 256 colors |
| JPEG | Best for Photos. Accurate color and small files size. |
| PNG-8 | Similar to GIF but better color support. Not common nor support by many browsers |
| PNG-24 | Similar to JPEG but with loosless compression. Not common nor supported by many browsers |
11. Insert a image using menu bar.
a. Place cursor where you want image.
b. Click insert on menu bar, point to picture, click from file. You will
see:
c. Navigate to the picture you want and select it and then click insert. You will see:
d. Fill in the alternative text to describe your picture and click ok and the
image is inserted.
e. Go to the code window and look at the image hyperlink. You will see:
f. <img alt="alternate text will be here" src="name of file.jpg" width="300"
height="360"> The code may be a little different for your picture.
12. Saving the embedded image. Click the save button on common
toolbar: You will see:
a. If you need to change folder to the images folder and click ok.
13. Picture Properties: size, position, and appearance can be changed.
a. Right click on the picture, click picture properties. General
You will see:
b. Appearance: here you can change the border thickness, horizontal margin, vertical margin, wrapping style, and alignment.
14. Creating margin space and adding border to picture. Margin space
is white space that is outside an element or object.
a. Double click picture, click the appearance tab on the picture properties.
b. Click in border thickness, and type 6 or whatever thickness you want.
c. Click in horizontal margin and type 12 or whatever margin you want
d. Click in vertical margin and type in 6 or whatever margin you want
e. Click ok.
f. In the code window in the head section you will see:
.style1 {
border-style:solid;
border-width:6px;
margin: 6px 12px;
}
15. Pictures tool bar - Click view, toolbars, picture tool bar, you will see:
a. Picture toolbar Button Properties
16. Auto Thumbnail is a small image that when clicked displays a new
web page with a larger version of the image.
a. Click the image to select it.
b. Click view, toolbar, picture.
c. Click auto thumbnail button on the pictures toolbar.
17. Image as bullet: Select text to be bulleted, Click format on menu bar, click bullets and numbering, click picture bullets tab, click specify picture, click browse. You will see:
a. browse for the file, double click it when found, click ok.
18. CSS Clear Property - use to position one element past another element
- example <h1> tag conflicts with image.
a. click insert on menu bar, click HTML, click Break. You will see:
a. Values for the clear property.
