Aligning Images in Dreamweaver CS5

This tutorials illustrates aligning images in Dreamweaver CS5.

In this section we're going to look at aligning images on a page with Dreamweaver.

We'll continue with the picture of Sydney Opera House that we have been using recently.

When an image is placed on a page, rules are applied that determine its position. Typically these make the image appear on the left of the page, and between paragraphs and text above and below, and so on. The cursor position when you insert an image is a key aspect of where it appears.

However, there are many options available on a normal page, and even more when you know about tables, etc - more on those later.

For now, look at the dropdown from Align in the Properties Panel.

So far we've used the browser default alignment, which is the one selected at the moment.

To see an immediate effect, select Right.

The selected image is now aligned at the right of the page. The text that was below it has moved up to "fill the space" left when it moved, and another image has moved up into view. Note that the right alignment only applied to the selected image.

Considering how the text moved up before, let's see what happens if we change Right to Left.

The text effectively flows up the side of the image, and the paragraph that was after it when we started is now alongside it. This is a very useful kind of alignment.

To look at the other options, it's necessary to go back to the default and delete a few spaces that are between the image and the text.

What you can now see is that the image is almost a capital letter at the start of a sentence. It is the first character on a line in which the following characters are "It sits...".

In fact, all of the other alignment options treat the image in just that way. The option describes how to set the alignment as though the image were one character on the line. Alignment of Middle means that the middle of the image is aligned with the baseline of the current line. See how that looks.

And here's what the Top option looks like.

Note that the text doesn't "flow". The second line of the paragraph begins below the image.

More Dreamweaver CS5 Tutorials

All Dreamweaver CS5 Tutorials - Will be complete by Januay 2011.
Buy Dreamweaver CS5

Find this website useful?

To link to this page from your website, simply cut and paste the following code to your web page.

It will appear on your page as: Aligning Images in Dreamweaver CS5

Share this Webpage

This site proudly build with Site Build It!