Subtitles of the Movie

Another great idea for backgrounds in your web layouts is to use gradients or in other words, a transition between two or more colors. Before I go and create my gradient inside Photoshop, I want to create an area inside my web page here in Dreamweaver to actually hold that background and what I'm going to do is I'm going to create a div here and I haven't shown you how to create a Div in Dreamweaver so I'm going to show you real quick and really, again, the reason why I haven't shown you yet is really the focus here is Photoshop, not Dreamweaver but here's how to do it, in case you're interested. I'm going to head up to the Window Menu, this is all inside Dreamweaver, down into Insert and then inside the Insert Panel that appears, make sure your drop-down menu is set to Layout and it's this fella right here, Draw AP div. Single click on him and then click and drag out a box, something like that. OK, perfect. Now, that's a div. That's all there is to it. Now, this guy can hold all kinds of different content. But what I'm going to do here is I've clicked on his edge and now down here on the Properties Inspector I'm going to go and set his dimensions. So I'm going to set his width to 220 pixels and you know his height, I'll set that to 220 as well. How's that? Now, OK, perfect; something like that. OK, so now I know the space that I want my gradient to occupy. I'm going to head back to Photoshop. I'll head up to the File Menu and then down to New and I'm going to create a new document that's 220 pixels in width by let's say 10 pixels in height and I'll go ahead and click on OK and if you want you can go into full-screen mode just by hitting your F Key there on your keyboard. OK. Now, what I'm going to do next is I'll head to my Gradient Tool inside the Toolbox and then up to the Gradient Drop-Down Option there on the Options Bar and I can go and pick a gradient, whatever gradient you want. As a matter of fact there's even more gradients hidden underneath this fly-out found in the top-right corner of that little pop-down menu. So I can go into Color Harmonies or Metals or Noise Sample or all kinds of different things here. Maybe I'll try Special Effects and I'm going to get this dialog box here. I'm just going to go ahead and click on OK and there's some extra gradients in there. So maybe I'll try, well, you know, none of those are really appealing. Let me; you know what I'll do here? I'll just go Reset Gradients and that'll take me all the way back to where you and I started. OK. So go ahead and choose a gradient. It doesn't really matter which one you choose. Hit Enter after you've selected your gradient and then what I'll do is I'll start on the left-hand side just outside my Document Window. I'm going to click and drag right across. I'm also going to hold down Shift and woops, watch out. Your document may get away on you. And then I'm going to let go and what you should wind up with is something like that. OK, awesome. I'm going to hit the V Key on my keyboard. Let's go save this guy up and then we'll drop him into our div back in Dreamweaver. So I'm going to hit Command S or Control S if you want there on the Windows side and I'm going to save this guy as a JPEG and this guy I'm going to call GradientBG.jpeg. OK, wonderful. And make sure you're saving this inside your Lesson 11 Folder. Once again, I think I'm just going to take the defaults here because I'm just giving you kind of a down and dirty idea here. I'll flip back over to Dreamweaver. Now, what's really interesting is as soon as you draw a Div in Dreamweaver, you get an associated rule inside your CSS Styles Panel. This guy is called an ID Selector. Go ahead and double click on him and that'll bring you into the CSS Rule Definition Dialog Box for this particular rule. So what I want to say is anything that this rule controls, I want to apply that gradient background to it. I'll head down to the Background Category and then over to Background Image and then I'll click on Browse and you guessed it; I'm headed into the Lesson 11 Folder, the GradientBG.jpeg file is the one that we want. Click on Choose and then OK and then OK one more time and that's the result that we get; awesome. Now, why does it fill the entire div? Well, because again, it's that tiling action in HTML. The actual graphic is probably no taller than my cursor but it just repeats itself all the way down the div, right? Now, what's really cool is if I come along and make my div bigger, like if I crank up the height it's just going to continue to fill that space. But where you have to be careful is if you make your div wider. Then what happens is the gradient's just going to re-tile or start over again. But anyway, there's some interesting ideas for you to fiddle with on your own.