Martha's COIN 74 Week 4

The Align Field Dropdown Menu (located at the bottom of the image PI) has 10 options for aligning text to your image. Type a few lines of wrapped text and then insert a small image like this one at random within the block of your text. Select the image and explore what these 10 options do. left-aligned-5v10h

This setting sets the image with text that is in the same paragraph or line only. Type a small value (say 5) into the V Space and/or H Space boxes to see what they do. Try setting an image with the Alignment Left and another with the Alignment Right. This is alignment left.

The Align Field Dropdown Menu has 10 options for aligning text to your image. Type a few lines of wrapped text and then insert a small image like this one at random within the block of your text. Select the image and explore what these 10 options do. right-aligned10v5h

This setting sets the image with text that is in the same paragraph or line only. Type a small value (say 5) into the V Space and/or H Space boxes to see what they do. Try setting one with the Alignment Left and another with the Alignment Right. This is alignment right.

DW Tip: You can copy and paste images in DW just as you can with text. You can select an image, hold down the Control key and drag to make a copy of an image. The trick is that you have to start dragging before you press the Control key.

The image on the left was copied by dragging and holding down the alt key, and aligned with "text top". Look how ugly it is! What I'm MISSING here is a way to wrap text around an image place in the middle! I wonder if I can figure out how to do that? Hmm, I tried to center the picture by choosing the center align button - and the picture moved a little, but not much! All that happened is that the paragraph became centered.

Here is a bit more detail on the settings for an image in the PI. These settings are also known as attributes and the values for these attributes are usually encased in quotes. If you work in Split View, you can watch the code develop and see how the attributes are written in HTML.

The Alt tag. Please fill in the Alt tag for each image. It's the text that will show up when a user has images turned off and the text that will show up as a tooltip on browsers that support this feature. It's also the text that a text reader will read for a user who is vision impaired.

Map - This is to create a client side image map which we'll do in a few minutes. Very handy indeed!

V Space and H Space - I use these a lot. They set the Vertical and Horizontal space in pixels that surrounds the image. Let's say that my image aligned left was too close to my text and I wanted some more breathing room for the image. I could add pixels to the Horizontal space. To add room around the top and bottom of the image, I could add some pixels to the V Space.

Target - don't worry about this now. We'll cover it when we get to frames. Basically it determines if the destination page that links will open in a new browser window or replace the current window.

Low Sr - allows you to select a greyscale image or a more compressed copy of the image to download quicker than the full color image so the viewer see something loading immediately rather than staring at a blank place in the page waiting for the color high quality image to show. You have to create the lower source copy in an image editing program, not in DW. For image heavy web site like this one, it's helpful to make a copy of each of the images and desaturate to create a low source grayscale image.

Border - defines a border for you image. The border color by default is the same color as the link color. The number you enter is the number in pixels of the border surrounding all sides of the image.