| When you place an image into a document, you have a number of options for positioning it. The following exercise demonstrates a method for creating an alignment that uses CSS. 1. | In index.html, place the insertion point at the beginning of the line At Yoga Sangha, we're dedicated to teaching… Insert studio-om.jpg, which is located in the Lesson_05_Graphics/Images folder.
Use the techniques learned in the "Placing Graphics on the Page" exercise earlier in this lesson to insert the studio-om.jpg image. By default, the image appears at the beginning of the line of text.
In the following steps, you'll use CSS to align the image to the left and make the text wrap around the right of the graphic.
| | | 2. | Click the New CSS Rule button in the CSS Styles panel. Select the Class Selector Type and enter .studioPhoto into the Name text field and click OK. In the CSS Rule Definition dialog box, select the Box category, choose left from the Float menu, and click OK.
 Every element in a document is considered to be a box. CSS uses the box concept to control an element's appearance, positioning, and so on. The elementsand therefore, the boxes that represent themcan either be block or inline, and each box can contain other boxes. Here, you're using the box to control the position of the inline image element to which you'll apply the studioPhoto class. Float is one of three positioning methods; the other two are absolute and fixed.
Choosing a left float causes the affected blockthe element to which the studioPhoto class is appliedto be shifted to the far-left margin of the block that contains it. The body of the document is considered to be a box, and in some cases might be considered the containing block. The top of the floated element will line up with the top of the block it is in, and surrounding content will flow around the floated element.
| 3. | Select the studio-om.jpg image in the Document window and choose studioPhoto from the Class menu in the Property inspector.
|
The image shifts to the left side of the page and lines up with the top of the paragraph block that contains it. The subsequent text wraps around the graphic on the right. Working with the Align Attribute Dreamweaver provides quick access to image alignment options in the Property inspector through a menu of vertical and horizontal alignment options. Each of the alignment options available in this menu uses the align attribute of the <img> tag. Use of the Align attribute as applied to an <img> tag is deprecated because it is inline, presentational markup. However, you might need to be familiar with the functionality if you are working on older sites. The alignment options function in relation to the current linewhere the image is locatedas follows: Default. No align attribute specified. Baseline. Aligns the bottom of the image to the baseline of the text line. Top. Aligns the top of the image to the highest element of the lineit can be an image. Middle. Aligns the middle of the image to the baseline of the text line. Bottom. Aligns the bottom of the image to the baseline of the text linethe equivalent to the Baseline option. TextTop. Aligns the top of the image to the tallest character of the text line; usually, but not always, the same as Top. Absolute Middle. Aligns the middle of the image to the middle of the text line. Absolute Bottom. Aligns the bottom of the image to the lowest character of the text line. Left. Causes the image to shift to the leftany subsequent text wraps around the right side of the image. Right. Causes the image to shift to the rightany subsequent text wraps around the left side of the image.
The alignment options in the menu are not the same as the Left, Center, and Right alignment buttons. The alignment options in the menu are applied to the <img> tag, whereas the three alignment buttons apply to the block element that contains the images, such as the <p> tag, and therefore everything else contained within that tag is affected by the alignment because it is part of the same block. |
|
