Working with Images


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.

Important Points: 

1. Background color can enhance a web pages appearance and readability.
2. A picture is any file that contain a graphic image
3. GIF - graphic interchange format (loosless compression), JPG - Joint Photographic Experts Group(lossy compression), and PNG Portable Network Graphic(loosless compression) ,  BMP (window bitmap, avoid using) and TIFF (tagged Image File Format- scanned images)  are fivetypes of pictures used in web sites.
4. a background pictures can be almost any picture file.
5. A picture is called an embedded file and is not part of the web site until it is saved into the images folder.
6. Before you crop a picture save a back up.  The croped image can not be restored back.
7. Sizing handles can be used to resize the selected picture
8. Alternative text is a short phrase that identifies or describes a picture in a web page. Required for 508 compliance.
9. Conversion to other file types.

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

10. A transparent color will not be visible allowing the background color to come through.

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:

Accessibility Properties


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 originalAttribute="src" originalPath=""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:
Save Embedded Files

a. If you need to click 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:

Picture Properties

b. Appearance   here you can change the border thickness, horizontal margin, vertical margin, wrapping style, and aligment.

Picture Properties, Appearance

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:

Pictures toolbar

a. Picture toolbar Button Properties


Picture Toolbar 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:

Select Picture Dialog box

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:

Break Dialog Box

a. Values for the clear property.
Values for Clear Property





Best Practices:

1. Every Time you do a new activity in Expression Web click on the html display and look at the HTML code for the activity. Expresson web is an HTML editor. By checking the HTML code page frequently you will soon be able to write in the code.