How to Move Images in Dreamweaver CS5

By default, Adobe Dreamweaver CS5 allows limited control over the position of your image. You can click and drag the image to another location on the page, but its placement is inline with other HTML elements, such as text and tables. This means you do not have complete control over its placements, nor can you position it on top of other elements. However, a simple code inclusion will grant you this complete control.

Instructions

1. Open your HTML document in Adobe Dreamweaver CS5.

2. Click "Split" at the top of the page window. This displays both the Design and Code Views.

3. Click the image you wish to move. This highlights the image's text in the Code View pane.

4. Encase the full IMG code with the following text in the Code View pane:

   <div style="position:absolute"> ... </div>

   As an example, your code might look like:

   <div style="position:absolute"><img src="image.jpg" width="500" height="400" /></div>

5. Click the image again in the Design View pane. A small blue square will appear just above the top left of the image.

6. Click and drag that square to position your image anywhere on the page, without limitations.

7. Hold the "Ctrl" key, and press "S" to save your changes.