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:
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:
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:
b. Appearance here you can change the border thickness,
horizontal margin, vertical margin, wrapping style, and aligment.
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.
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.