Okay so that you know you could only use gifs or jpeg format images and you want to make them as small as possible, let me show you how easy it is to actually add them to your web pages in Dreamweaver. Now, switch back over and just alt tab back over to Dreamweaver. That is command tab if you are on a Macintosh. I am going to close this page because I am done with it. I am going to open a page that I created for you called “Photos.html”. this page is all ready for you to start inserting some images. First and do not worry about the tables and all the alignment options, you are going to learn more about that in a later lesson. For now, just place your cursor in this little table at the top. I am going to insert a gif here first so I am going to go up to the Insert Image icon which looks like a little tree, click. Then I have created a folder called “Photos” that has a couple of images in it specifically for you just to make it easy for you to find them.
Click “Header Share” and click okay. Now, when you get this dialog, what Dreamweaver is asking for is alternative text. Alternative text is used by browsers that read web pages to people who cannot see or have their images turned off. So I suggest you just include a little bit of descriptive text about what your graphic is. In this case, it is a graphic with words on it. It says “Share Images” so I am just going to type that in the alt text so if somebody cannot see the image, they will at least see that text. Below that, I am going to insert a photograph. Here, I am going to insert a jpeg. Remember jpeg for photographs, gif for liner, same step, put your cursors where you want the image, go up to the insert image icon, find the jpeg that I want, click okay. Again, Dreamweaver is going to ask me for that alt text and I am just going to say “Girls with computer” again you are just looking for some kind of descriptive text and click okay.
And it is really that simple. You insert gifs and jpegs exactly the same way and the easiest way I found to do it is to just use this little insert button. You can use the insert image option if you prefer but I find this little button very handy. Now, you have got your image here. Let us say you want to align it. You have a number of alignment options when you are working with images. Notice that the text is kind of down here at the bottom right. If you select your image, you will see that you have left center and right alignment options much like you would with any other element but you also have an align dialog with all of these options. When you are looking at these, the alignment options for images are a little strange to most people and that they had to do with where the text will appear vertical to the image. So let me just show you if I click “Middle”, you see how that text jumps up to the middle.
This is something I would not use very often but you do have these options of positioning text exactly in the middle, exactly at the top or exactly at bottom of an image. What you are much more likely to use is to left or right align your image. When you do that, you will notice that the text wraps around. So again, select your image, come down to alignment, this time I am going to choose right and we notice that the image moves to the right and the text moves to the left. So the most common thing you will do with image alignment is align it to the right or align it the left. If you want to align center, then you will use this center option but if your text is there, it will get in the way. So let me show how you would do that. Undo the alignment, go back to default, hit return, so that the text is out of the way. Now, when I center, it will actually center the image. So center with the center button if you want to center and use the left or right alignment in this dialog if you want to actually have your text wrap around. Move it back to the right because I think it looks best there.
Now, just one other little challenge that I will show you how fix here. This text comes right up to the edge of this image. Most of us like to have a little bit of w
Transcription by:
Scribe4you Transcription Services