CIS 3630 - Test 2a.txt

• Images used as links to other pages
• For example, images of arrows that point to the left or right would be used as links to display the previous or next page
• An icon, such as a pointer, that directs the user to different places on the same page, a different page, or another Web Site

• An image file format originally devised by AOL/CompuServe
• Use file compression, which means that .gif files have much smaller file sizes than other image file formats
• Because of file compression, .gif files are fast to download, and therefore ideal for Web pages
• Many images used on the Web are drawings, generally referred to as line art or clip art. These types of drawings are usually stored in a .gif file format
• Used to create animation

• Photos used on the Web are stored in .jpg file format
• The international committee that created the .jpg image file format standard
• Although you can convert a .gif file to a .jpg file (or vice versa), .gif files can have as many as 256 colors, and .jpg files can have more than a million colors

• A newer image file format
• Have somewhat better file compression than .gif files, and are not limited to 256 colors
• Might not work with all browsers
• Do not support animation

• Standard Windows graphics files
• An image file format with the filename extension of .bmp

A standard graphic image file format usually generated by optical scanners, used for scanned images

In general, you should avoid using .bmp and .tif files because they tend to have much larger file sizes than .gif, .jpg, or .png formats

• 1. .gif: Graphics Interchange Format; used for line art (clip art)
• 2. .jpg: Joint Photographic Experts Group; used for photographs
• 3. .png: Portable Network Graphics; used for line art (clip art)
• 4. .bmp: Windows Bitmap; because of their large file size, avoid using .bmp files on the Web pages
• 5. .tif: Tagged Image File Format; scanned images, avoid using on Web pages

• When you crop an image, you select a desired rectangular portion from the image (to create a new image) and delete the rest
• Image cropping does not reduce the resolution of the area cropped
• If the image was of very high resolution, you could enlarge the image to focus on just the cropped portion of the original image
• Be sure to make a backup copy of an image you want to crop; if you save the cropped changes, they can't be undone

• Images can also:
• 1. Serve as horizontal lines, which divide a page into different sections to group topics
• 2. Use for bullets
• 3. Use for background for text or the entire Web page

Every image needs to have a description that can be read to people who have trouble seeing the screen or who cannot read it.

• Use to provide a description of the image
• Text used for accessibility purposes to describe an image
• Will appear before the image fully downloaded
• Some programs and devices for people with visual impairments will read the alternate text aloud
• In Internet Explorer, alternate text will appear as a ScreenTip when viewer passes the pointer over the image
• Sometimes, using alternate text does not provide useful information to the reader. For example, it doesn't make much sense to provide alternate text for an image used as a list bullet or as a horizontal line. In these instances, you should not include alternate text for the images.

• If an image fails to download, you will see a placeholder icon instead of the image
• The icon that appears if an image cannot be found by the browser
• The alternate text will appear beside the placeholder icon
• The placeholder icon does not appear if there is a problem with an image used as a bullet or with an image used as a horizontal line

• Contains 2 text boxes:
• 1. Alternate text
• 2. Long description

Text box to assign (an attribute that identifies) a link to a file that provides a more detailed description of an image

• The XHTML code that signals a change to an element
• In the XHTML code, the image element makes use of several attributes and values
• An attribute denotes a modification to an element
• Every attribute takes a value, in the same manner that CSS properties have values
• An attribute value describes how or to what extent the element will be modified
• The image element typically has at least 4 attributes and values:
• 1. The source (src) attribute and its value identify what image will be used
• 2. The alt attribute and its value denote the alternate text
• 3. & 4. The values for the width and height attributes are usually pixel values
• The [img] element is an empty element; it ends with a space-slash combination in the XHTML code
• Ex.: [img alt="photo of a beauty" src="bouquet.jpg" width="200" height="150" /]

Describes how or to what extent or manner the element will be modified

• Although Expression Web places the alt attribute and its value first, most Web designers place the src attribute and its value first
• Use the title attribute and its value to display a ScreenTip for images in the Firefox browser

• Code that the World Wide Web Consortium has indicated should no longer be used
• Several attributes used with images are deprecated, such as hspace,vspace, align, and valign
• Expression Web, however, still uses the align and valign attributes when it generates XHTML code
• The CSS text-align property should be used instead of the align attribute, and the CSS vertical-align property should be used instead of valign attribute

• When an image file is inserted using the menu bar, the image file is still not part of the current opened Web site
• You must save the file as an embedded file to have the image file becomes part of the Web site
• When you save the file, the Save Embedded Files dialog box will open
• You have 4 options:
• 1. You can save the file so that it becomes part of the current opened Web site
• 2. You can click the Rename button to give the file a new name
• 3. You can click the Set Action button to save or overwrite an existing file
• 4. You can click the Picture File Type button to change the file type; for example, from .jpg to .gif

• To refresh the file list
• In the Folder List task pane, the files are listed in alphabetical order

• Position the insertion point where the image is to be inserted
• Click Insert on the menu bar, point to Picture, and then click From File
• On your hard drive or flash drive, navigate to the location of the image file to be inserted. Double-click the image filename
• When the Accessibility Properties dialog box opens, enter alternate text for the image
• Alternatively, you can insert an image by dragging the image file from the Folder List task pane into the Editing window in Design view. You can also click the Insert Picture from File button on the Pictures toolbar

The attribute used to identify the source of an image file

• To position an image either at the left edge or the right edge of the screen, and to allow text to wrap around the image
• If you float the image with a value of left, the image is positioned at the left edge of the screen, and the text wraps to the right of the image
• If you float the image with a value of right, the image is positioned at the right edge of the screen, and the text wraps to the left of the image
• Although images appear at the left edge of the screen by default, the text will not wrap beside the image unless you use the CSS Float property
• You will work with CSS positioning later which allows you to position an image (or any other object) anywhere on the page
• You can use the Picture Properties dialog box to position the image
• Expression Web refers to floating an image as the "wrapping style"

The toolbox task pane has an Image icon, but it is not used to insert an image. Instead, the Image icon is an ASP.NET placeholder control. You could, however, use the Image icon to insert a placeholder - an area of the screen that can later be used to insert an image that you don't have yet. To insert the placeholder, click in the Toolbox task pane and drag the Image icon onto the portion of the screen where you want an image to appear later. The placeholder image will be very small, so click and drag the sizing handles to the approximate size of the image you want to add later. When you have the image you want, double-click the placeholder image in Design view. The Picture Properties dialog box opens. Click the Appearance tab. Click the Browse button and navigate to the location of the image file you want to insert.

• White space that is outside an element or object
• Having margin space around an image makes the page easier to read
• Will appear as a shaded area
• Click and drag the arrow pointer to create more margin space

If you have an image surrounded by several lines of text, you set the wrapping style to left or right. If you have to align an image with a single line of text, you don't set the alignment left or right; instead, you set the vertical alignment for the image. It's important to remember that you are aligning the image, not the text. To set the vertical alignment for an image, right-click the image and then click Picture Properties. Click the Appearance tab. For Alignment, click the list arrow. Although you have several choices for alignment, limit yourself to the choices for top, middle, or bottom for image alignment. (The alignment choices for Baseline, Text-top, and Text-bottom are not supported by all browsers.) The choices for Sub and Super, which are also present in the list box, are used to create subscripts and superscripts.

Making an image smaller does not change the image quality. However, if you try to enlarge an image, the image quality will degrade, and the image will tend to look grainy. As a rule of thumb, avoid enlarging an image more than 10% of its original size.

• The process of making an image either larger or smaller
• Changing the width and the height of an image is called scaling an image
• When scaling an image, it's very important to maintain the aspect ratio, which means that as you scale the image, you change the width and height together and in the same proportion.

• As you scale the image, you change the width and the height together and in the same proportion
• The height and width proportions of an image; you must maintain the aspect ratio to prevent the image from appearing distorted

• You can undo any changes you have made to the image up to the point that you save your changes. You cannot use the Restore button to undo saved changes.
• You can undo any unsaved changes by clicking the Restore button, which is the last button on the right on the Pictures toolbar.

• 1. Insert Picture from File: Inserts a picture into the Web page
• 2. Auto Thumbnail: Makes a larger picture smaller so that, when clicked, it will be restored to its original size, but on a new Web page
• 3. Bring Forward: Places an image on top of another image
• 4. Send Backward: Places an image under another image
• 5. Rotate Left 90 degree: Rotates the image left 90 degrees
• 6. Rotate Right 90 degree: Rotates the image right 90 degrees
• 7. Flip Horizontal: Flips the image horizontally
• 8. Flip Vertical: Flips the image vertically
• 9. More Contrast: Increases the difference between light and dark
• 10. Less Contrast: Decreases the difference between light and dark
• 11. More Brightness: Washes out color, giving the appearance of more light or daylight
• 12. Less Brightness: Darkens color, giving the appearance of shadow or night
• 13. Crop: Removes parts of an image, which results in the image being resized
• 14. Set Transparent Color: Selects a transparent color (usually the page background color); use on .gif files only
• 15. Color: Changes to black and white or washed-out color
• 16. Bevel: Add a three-dimensional (outset) border to the image
• 17. Resample: Corrects the image appearance if you have changed the dimensions of the image
• 18. Select: Removes or resizes a hotspot in an image map
• 19. Rectangular Hotspot: Creates a rectangular hotspot in an image map
• 20. Circular Hotspot: Creates a circular hotspot in an image map
• 21. Polygonal Hotspot: Creates a polygonal hotspot in an image map
• 22. Highlight Hotspots: Identifies hotspots in an image used as an image map (click to show hotspots; click again to restore the image)
• 23. Restore: Undoes changes that have not been saved

A region of an image that serves as a link

Very often, round or irregularly shaped images are actually contained within a square or a rectangle. To make the round image appear on the page without its background color, you can set a transparent color. To do so, click the image and then click the color you want to make transparent (the color that surrounds the image). As you move the cursor over the image, the cursor changes into an icon of a pencil with an eraser. Click the pencil eraser on the color that you want to be transparent. The selected color becomes transparent, which allows the background color of the page to show through. Only a color in a .gif can be made transparent. If you select a .jpg image to make a transparent color, a Windows alert dialog box will open, and you will be prompted to convert the .jpg image into a .gif file.

• Use the Picture toolbar
• You can rotate an image in 90-degree increments so that the image appears to lie on its side or appear upside down (rotate left 90-degree and rotate right 90-degree)
• Flipping an image is almost like looking at the image in a mirror; the image is the reverse of the original image

• To correct the appearance of an image if you have changed its dimensions
• To improve the picture quality of the image once it has been scaled
• If you do not resample the image and save the file, any changes you make to the image will be lost when you click the Restore button
• Resampling an image also dramatically reduces its file size

• Border that has a 3-D (three-dimensional) effect
• Often appear as inset borders, where the border appear recessed, or as outset borders, where the borders appear raised
• The Pictures toolbar creates outset borders

• Small rectangles that appear on the four corners and the sides of an image that you can drag to make the image smaller or larger
• You can manually resize an image in Design view; 3 resize handles - one on the right side, one on the bottom side, and one in the lower-right corner
• If an image has not been styled, clicking and dragging a resize handle will cause a ScreenTip to appear in the center of the image, showing the width and height of the resized image

• Double-click the image
• In the Picture Properties dialog box, click the Appearance tab
• In the Size group, make sure the check boxes for Specify size and Keep aspect ratio are checked
• Click in the Width and Height text boxes to change the width and height respectively
• Alternatively, in Design view, you can click the image and then click and drag the corner resize handle to set the desired size

• Because images can greatly increase the Web page file size and thereby slow download times, Web designers often use thumbnail images
• Small image that typically is used as a link to a page that contains a much larger instance of the same image
• Small image that, when clicked, displays a new Web page with a larger version of the same image
• It generates a new, but smaller, image (does not modify the original image)
• You can align several thumbnail images in a column or a row or grid to create an image gallery (conserve screen space on your Web page and gives visitors the option of seeing images in a larger size if they want)
• Expression Web also creates CSS style for the image, giving the image a style with a solid border that is two pixels wide
• You can convert an image into an Auto Thumbnail by right-clicking the image and then clicking Auto Thumbnail from the short-cut menu
• The Auto Thumbnail options are specific to a single image; they are not applied globally to all thumbnail images. As you set the Auto Thumbnail options, Expression Web will create a style in the Apply Styles task pane. You can modify the style as you want.

• Click the image to select the image
• Click View on the menu bar, point to Toolbars, and then click Pictures to display the Pictures toolbar
• On the Pictures toolbar, click the Auto Thumbnail button (or press the Ctrl + T keys)

• To make an Auto Thumbnail a normal image again, right-click the image, click Hyperlink Properties from the shortcut menu, and then click the Remove Link button
• The size of the thumbnail picture is determined by the Auto Thumbnail settings in the Page Editor Options. It is possible to change the default Auto Thumbnail Properties in Expression Web for a particular Auto Thumbnail.
• Thumbnail image had a blue (or purple) border around it. In the Page Editor Options, you can change the width and the height of the thumbnail image.
• You can also change the border thickness (the default is 2 pixels, and the max is 8 pixels). In addition, you can give the image a beveled border (an outset border) so that the border has a 3D design effect.
• The Autho Thumbnail options are specific to a single image; they are not applied globally to all thumbnail images.
• After you set the Auto Thumbnail options, Expression Web will create a style in the Apply Styles task pane; you can modify the style as you want.

Auto Thumbnail

If you create an Auto Thumbnail by mistake, press the Ctrl + Z keys. You can also click Edit on the menu bar, and then click Undo Auto Thumbnail

• Create the image in Image editing software or obtain the appropriately sized image to be used as a bullet
• Type the list and format it as a bullet list
• Right-click the list. From the shortcut menu, click List Properties
• If necessary, click the Picture Bullets tab. Click the Specify picture option button
• Browse to the location of the image
• Double-click the filename of the Image file

Expression Web does not create the image for the bullet. You can use one of the other Expression Web Studio design programs, such as Expression Design, or similar illustration software.

• When you insert an image in a page, the iamge might sometimes interfere with an h2 or h3 heading. Recall that when you float an image, the text will wrap beside the image. Sometimes, the image and the heading compete for the same space, and instead of the heading beginning on its own life at the left edge of the screen, the heading appears beside the image. The CSS Clear property is the way to have a heading (or any other element) begin on a new line after an image.
• The property that positions an object past a floated object
• Used to position one element past another element
• Takes several values, including left, which clears an element at the left margin; right, which clears an element at the right margin; and both, which clears an element either left or right (HTML clear attribute uses "all" instead)
• You can insert this value automatically; click Insert on the menu bar, point to HTML, and then click Break. The Break dialog box opens; 4 option buttons in the Break dialog box

• 1. Left: No floating elements allowed on the left side
• 2. Right: No floating elements allowed on the right side
• 3. Both: No floating elements allowed on either the left or the right side
• 4. None: The default value, which allows floating elements on both sides

If you are using an image as a background, it's also a good idea to make a complementary choice for the background color

When trying to choose a background color, the eyedropper tool is useful in picking from colors that are already present in one of the images on the Web page. To use the eyedropper tool, click Formatting in the Page Properties dialog box. In the Color group, click the list arrow for background, and then click More Colors. In the More Colors dialog box, click the Select button. As you click the Select button, the pointer turns into an eyedropper icon. Drag the title bar of the More Colors dialog box if necessary, and find a color on the page that you want to use as a background color. Click the eyedropper on that color.

• A file that helps make up a Web site
• A Web site's assets represent a collection of all the files used in the Web site
• It's common for Web page developers to group their assets in separate folders such as a folder for the images

• 1. Create a new folder
• 2. Create a new page
• 3. Maximize the Folder List task pane
• 4. Close the Folder List task pane

Generally, the folder at the top of the Folder List task pane that refers to a drive letter, such as C:\ or E:\

Folder or file you have selected (that is currently in use) in the Folder List task pane

Drawings or sketches used on a Web page, usually stored as a .gif file

An image-editing tool that picks a background color from a color that is already present in an image on a Web page

A method that reduces the size of a file

A group of thumbnail images in a column, row, or grid

A three-dimensional border that appears recessed

Drawings or sketches used on the Web

A three-dimensional border that appears raised