So, we come back up here to the top and just hit Enter. If you are on the Mac, you would hit the return key. And, I am going to add an image now to this page. You could do that in a couple of ways. You can choose insert image and bring up the insert image dialogue or you may find it a little faster to use the common insert bar and the image icon. That is the one that looks like a little tree here. If you click on this, you will get the same dialogue.

In the insert image dialogue, I want you to select an image. This image is outside of your Happy Birthday folder so you may be here when you first open this dialogue. I want you to go up a level and find the happy birthday.jpeg image. Click OK and then Dreamweaver now prompts you for accessibility attributes. Now, you do have a preference setting, you may have turned this off, but I recommend that you keep this on because it is a good reminder that you want to always add alternate text when you insert an image.

Alternate text will only appear on your page if the image is not visible. But, it is also used by browsers that read pages to people. So, it is a good habit to always insert alternate text behind any image that you add your page and that alternate text should essentially just be a description of the image itself. So, you may or may not have noticed the preview of the image while I was selecting it but I would describe that picture as a picture of a cat and a dog and a birthday party. Click OK. If you have done want I have just done and you have inserted an image that is outside your main group folder, you will probably be prompted by Dreamweaver with a dialogue informing you that the image is outside the root folder and offering to copy that image into your group folder.

Since I have been testing this page before we started doing this lesson, Dreamweaver already knows that I want this image copied into my images folder. Now, I want you to see what it is doing for me. In the files panel here on the right now, you will see happy birthday.jpeg now appears in the images folder in my main site group folder. If I diminish Dreamweaver and I opened my project files folder, I want you to see that in lesson 2, I have three images and that I have my site folder. And inside my site folder, I have an images folder that now has the happy birthday picture. In a little bit, I will insert those other two pictures and you will see again how this works.

If I had copied those images into my images folder before I link them, Dreamweaver would not have made a copy for me. But if you neglect to do that or you prefer to copy them this way, Dreamweaver will automatically make sure that your images end up in your images folder. And again, this is very important because when you transfer all of these files up to your web server, all of your images need to stay in the same relative location as the page that they are displayed on. Otherwise, you will see that ugly broken image icon.

So now that we have our image in place, let’s add some more text to this page. By the way, I don’t know about you but I could never get my pets to pose for a picture like this so I have to give some credit to Eye Stock Photo for this particular image. I am going to put my cursor here right after the cat, right after the picture. And again, hitting the enter key on the PC or the return key on the Mac, and let us type another sentence. “You are the best pets in the world.” Okay, well, that is how my animals see themselves. And, let’s type one more sentence again, hitting the return or the enter key. “But, you already knew that.”