Inserting a Basic Picture on an HTML Webpage through Adobe Dreamweaver

While I was building my website this past week, I ran into a slight panic mode. One of the main pictures I wanted to post would not appear. It looked something like:

Perhaps you have run into the same problem. As such, I will walk you through the process of inserting a picture on the software I used (Adobe Dreamweaver).


There are two ways to do this: using the menus on top of the screen or immediately entering html code. Using the menus is obviously easier if you do not know html. Also, the result from using menus is the html code you’d want. This is the technique I will show in the following blog. If you want to memorize the html, just look at the resulting code and everything in it is for the most part self-explanatory.

Note: I use a split screen when composing a webpage in Adobe Dreamweaver. You do so by clicking “Split” in the upper left corner of the window.

Insert Menu

Once you have a desired location for your picture on your webpage, you are ready to add it. First, on the menu bar select Insert > Image (right).




First you will see the “Select Image Source” window (below). Here you will simply find the image you want. Once you do, click it and select “Choose.”


Image Menu Window

Another window may pop up telling you that a “file://” path will be used until your document is saved. Click OK. This is just a friendly reminder to save your webpage. If the image is not located in your webpage folder (called root folder), then you will be asked if you want it moves there. Select “Yes.”Root Folder Window

Now you need a name under which you save the image in your folder. Use whatever name you feel is appropriate and select “Save.”
Copy File As Window

To put a name on the image on the WEBSITE (as opposed to the one in one of your folder on your hard drive), you do so in the window shown below. Such a name would be typed in the field “Alternate text:” You can choose whatever you’d like here as well, but for simplicity’s sake I use the same title. The field below isn’t mandatory if you are uploading from your hard drive. Select “OK.”



Now the picture is on your page, but it may not be in the dimensions you wanted. I left my picture untouched to demonstrate what may happen.

Sneak preview: it’s supposed to be a rainbow over a highway. If you want people to wait a good chunk of time for your your site to load, you may not get a lot of visitors (unless it is a really really good photo). If that’s not what you want then you have to change the dimensions.

Click on your image At the bottom of the window in Dreamweaver, there is a “Properties” tab shown. The “W” field represents width and “H’ represents height. You can manually enter the numbers, but if you make a mathematical mistake your height/width ratio may be off. If you want to keep your ratio, here’s what you do:

Click the gear in the properties tab as shown below. This will edit the picture settings.

In the “Image Preview” window, you can set your dimensions by clicking “File” in the WINDOW. Make sure the “Constrain” box is checked and enter a dimension for either height or width (in pixels). The dimensions shown are the original dimensions. These number would make your picture HUGE. I decided to have a 400px wide photo, automatically making my height 300px.








As a result, here is the webpage:



It is simple, I know, but if your site is already more complicated with more links, buttons, and the like, select in your code where it is you want the picture and follow the same steps as above.


Good Luck!

Jarad M. Kmietowicz

~ by jmk186 on September 6, 2011.

One Response to “Inserting a Basic Picture on an HTML Webpage through Adobe Dreamweaver”

  1. I like that you included the error picture that resulted when you first tried. It gives a good and clear direction if someone runs into the same problem. Also, the language works- you talk to the audience as if you’re having a conversation with them.

Comments are closed.

%d bloggers like this: