• Dreamweaver
• • Setting Up
  • Create A New Page
  • Text and Colors
  • Links
  • Images

Images make our pages more lively by adding pictures and other non-textual information. Additionally, images give us a way to present textual information that requires precise formatting (such as charts, graphs, and fancy headlines).

In order to add images to our site, we must first copy them onto our computer's hard drive. For pre-made images, we can download them onto our computer. If you have orginal source material (say, from a book), then you'll need to scan those pictures in first before you add them to your site.

In order to add images to our site, you should go to your Site window in Dreamweaver. In the right-hand pane, you'll see an icon that says Computer. Double click this icon, and navigate through your computer's files until you find the image you'd like to add to your site.

When you've found the image you'd like to add, click and drag the image's icon into your Site folder. If you have subfolders in your Site, you should drag the image to the most appropriate subfolder. For example, if you have a english1 folder and your image is for your English class, you should add it to that folder.

If you have many images, you might consider making a folder just for the images, to keep them from cluttering up the rest of the site.

Once the image is added to your site, its icon will appear in the folder you added it to (see example). You are now ready to add the image to a page.

On your web page, click where you'd like the page to appear.

In the main toolbar at the top of the screen, click the Image icon (see example). It looks like a little picture of a tree.

A file selection dialog box will open. You should navigate to the image file you'd like to include under your site folder. Be careful not to select the image that was originally on your hard drive; you must select the one that you dragged onto your site earlier in these instructions. Click the Choose button to complete the process.

Once you've selected the picture, it should show up on your web page.

You may resize the picture by clicking and dragging its edges. However, we don't recommend changing the picture's dimensions. If you do, the picture may become distorted or "fuzzy".

You may also use the Properties Panel to change the image's alignment, size, and other properties. Experiment to find the placement that best suits you.

Keep in mind that web page layout is approximate; the placement of text relative to the image will be based on several factors, including the user's font and screen size. Do not worry about exact image placement; instead focus on general style.