Subtitles of the Movie

Now that you've received some information about Image File Formats supported by common Web browsers and you've learned how t insert images into Dreamweaver we're not ready to start inserting images into our project, our Web Project. So, starting with the project step6 file that we worked on last when working on our project we're going to go ahead and add in some images. Notice that I have now all of my content in so I no longer need my Tracing Image. But if I go to View, Tracing Image and then uncheck the show, that beautiful background disappears. So what we need to do is we need to get our tile backgrounds put in like this file. If you open the project file background images page from the project folder you'll see this very nice background. Now there are two ways to get images into your Dreamweaver pages. You can either insert them as regular content - let's go ahead and turn off Live View here - you can place them as a graphic inside of a DIV or a table cell as I've done here. Notice that this is a graphic that I've inserted into the DIV Tag, that little gradient. Or you can place them as Background Images and I've done both here. The second one here, this big image, has placed as a background image on the page and we can see a preview of the work that you're going to be doing for this Step 6 of your project by choosing from this project file background images page, Modify Page Properties and then notice here in the Background Image field I have an images Page-BgSimpleGradient.jpg. This is in the images subfolder of the project files folder that I've saved for you. There's a bunch of images that you can use. That one here, again, is the Page-BgSimple. Let's go to the P's here. There it is, right there. Notice that it's a very thin graphic and I've set the Repeat to repeat in the Horizontal direction but not the vertical direction so that way it marches across the page, gives me a very nice gradient. So this is a preview of what we'll be doing in Step 6 of our project the two methods of getting images into your Dreamweaver pages. So let's go back to the project. Let's close that dialog and go back to the Project 6, and now go to Modify, Page Properties here in the Background image click on Browse and let's browse in the images folder for my background image right here. Click OK. Make sure the repeat-x is chosen and now without the Tracing Image I have that beautiful background on the back of the page. Let's open this up a little bit and you can see that it extends as well on the other side of my divs. Actually it's, these divs looks like they're aligned to the right so we can't see, but we'll fix that later. But there is my first gradient. Let's go ahead now and add the second gradient file. If we go back to the project file background image page and open up the Properties Inspector we can see that the name of that image is BgGlare.png, Page-BgGlare.png. So now let's create a DIV tag here, AP DIV, place that there, click inside of the DIV and now we're going to choose Insert, Image. Scroll down - nice the way that Dreamweaver provides these little icons - there is the image that I want to put in. Click OK. Let's give it an Alternate text, bg image, like so. Click OK. There's my image. Now what I want to do with this DIV Tag is place it in the upper left-hand corner and then what I want to do is just drag this as close as I can to the upper left-hand corner. Notice that over here in the Properties Inspector I have a Left and a Top setting. If I've set both of those to zero it'll fit snug right up against the corner like so. Let's go ahead and go into Live View and preview this. There is the gradient that's in the DIV Tag. This is the gradient in the page itself. There are several other images that I've prepared that you can also put into your pages at this point. Let's proceed to place those images in the page here starting with the photograph here in this central DIV, choose Insert, Image and then there's the photograph here, Front Image, click OK. Add text here: guy with computer as Alt text. Click OK. There is the image. Now there's also an image for the header but because I want to add content over that image, so I can't place the image as content, I have to place the image as a background. Again, there's two ways to add graphics: as backgrounds or as regular content. In some cases you'll want to do one, some cases the other. Here the header I want to remove my colored background. Let's click on the upper left-hand corner of the rectangle, open my Properties Inspector. Let's take out the background color because I want to add now an image background and the way we do that is we go to the CSS Styles Panel, there's the Header, DIV, double-click on that, here in the CSS Rule Definition. In the last case, in the previous case, we used the Modify Page Properties to modify the page background. Here I want to modify the background of the DIV Tag so there's a Background Category, Background Image, click Browse, there's the header right there with the girl in it. There's two of them, one with the girl and one without, so you can use either one. Click OK. Click Apply and you'll notice that it repeats a little bit. Let's turn off the Background repeat so it only shows once. Click Apply. There we go. That looks better. Click OK. And I need to do a little bit of maintenance here. That bottom needs to come up just a little bit, like so and maybe bring up the menu as well. There's always a little bit of tweaking that you'll want to do after you get your images in there. Still a little bit of a trim. I can see a blue border on that. That looks much better. You can also sometimes adjust the stacking order or the Z-index of these divs and put the Z-index of the purple DIV higher than the header so it'll overlap it. You'll learn more about this technique a bit later in the course. For now, go ahead and investigate all the images that I've prepared for you in the images subfolder, adding any more images that you want to include in your project such as the PrinterIcon, the PostEmailIcon, the EditIcon using the two techniques that I showed you here, either inserting as content or using as a background image for pages, table cells, tables, or DIV tags. Once you have all the image content that you want on the page go ahead and do a Live View to make sure everything looks OK. In this case, notice that that really cleaned up there. I was worried about this little line there. Didn't like the look of it, but here in Live View it looks fine. Check it in Live View. If everything looks the way you want it go ahead and save this document as project_step7. Close the file and then proceed on to the next movie.