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.
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.”
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.”
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.
As a result, here is the webpage:
Jarad M. Kmietowicz