I want to put the ischool logo beneath the School of Information heading. I already have the image saved as a jpg on my desktop. I need to move it into my local folder, which I named “tutorial.” Once in the tutorial folder, I’m going to move it again into the “images” folder. Now, when I return to my “Site” window, “ischool.jpg” should be in the images folder. I’ll place my cursor inside the bottom left cell and click on the insert image icon in the Insert window. A window will appear asking for directions to the image I’d like to insert. I’ll point it to the Desktop, then tutorial folder, open the images folder and select “ischool.jpg”. The logo appears in the table.

Before we go any further, let’s take a second to discuss image paths. An html document is merely a page full of directions pointing your web browser to different places to fill its content. Your image does not live inside the html file, rather there is a link to the image’s location. Broken image paths result in images that do not load. Let’s look at the code.

Dreamweaver provides the user 3 views for creating web pages. Code only for those who only want to use html to create their page, Code and Design for those who use html to supplement the design view, and Design only for those who wish to fully utilize Dreamweaver’s “what you see is what you get” functionality.

I’ll select Code and Design for the split screen effect. Whatever I highlight in the design window is highlighted in the code window, making it easy to find your place. The image source gives the network path to the image, which should be the same as the path on your local machine as long as you’re using the site management function of Dreamweaver.

In this case, the path leads to the images folder and then to ischool.jpg. Perfect. If you see a c:// in the image source path, you will have problems viewing your image on the Web as it will look for the image in the c:// drive of your computer.