Dreamweaver: ImagesImages Working with images in Dreamweaver is quite easy. To insert an image you can use the Objects palette or the insert menu. On the Objects palette simply click on the tree. You can also use the Insert menu and select Image. You will be prompted for a filename and can navigate your local directories in order to find it. Once you have found the image you would like on your page, either double click on it or click on the Select button. Now the image is on your page. As you were navigating for the file, did you notice the fields near the bottom of the box? These are very important so we'll pay special attention to them. You will see a URL field, which will have either dots and slashes or a full directory path. This is how the page will find the graphic. This can be controlled with the 'Relative to' checklist. If you select Relative to Site Root, it will start looking from the root of the site '/' and will continue down the directory structure until the graphic is found. If you select relative to document, it will look for it in directories relevant to the document. This may seem irrelevant now, but it can save some hassles in the future. If you have your graphics and links relative to the document, and you choose to move the document later, all the graphics will break. Working with Images Once you have inserted the image, Dreamweaver will automatically write the width and height dimensions to the HTML. These dimensions are written in pixels, which is a term of measurement that is commonly used on the web. If you click on the image, a bounding box will surround it with some dots around the edges. The image can be scaled within Dreamweaver by clicking on one of the dots, holding the mouse button and dragging. The image will scale with your mouse. I recommend that you try not to scale within Dreamweaver. It won't look too good, does it? It's best to scale the image within the image application you are working in. If necessary you can change the width and height or import the picture again into Dreamweaver. When you select your image, you might notice that your Properties toolbar changes. The W and H fields are the pixel dimensions of the image. You can also enter numbers manually to scale the image. This can be helpful if you scale the image elsewhere.You will also see a SRC field. This is the path to the image. If this path is incorrect, the image will look broken. This can be corrected by clicking on the Folder icon to the right of the field. When this is clicked, you will be prompted for the location of the image with the same dialog used when you insert an image. You can also specify the ALT text for the image by typing into the Alt field. ALT text is used when the image is broken or if a visitor has images turned off. This will give the user an idea of what the image would be if it were being displayed. If you wish to give your image a border, you can do so by using the Border field of the toolbar. Here you can enter a number in pixels. This will be the width of the border around your image. 1 pixel 5 Pixels If you would rather not have a border, just set this number to 0. Images and Text In HTML, the designer has the ability to align images around text. An alignment method can be specified so that the text wraps around the image as the designer envisioned. This can also be done in Dreamweaver by selecting the image and using the Align field in the Properties Toolbar. Here are a few of the alignment options Browser Default: Usually Baseline. The first line of text begins at the bottom of the image and the rest appears below the image. Top: The first line of text begins at the top of the image and
the rest appears below the image Absolute Middle: The first line of text begins at the absolute middle point of the image and the rest appears below the image Left: The text wraps to the right of the image. This can be
confusing because it's a little backwards. Just remember that the image is what
is being aligned, not the text. What if we wanted to use 2 images? It gets a little more complicated. |
