Dreamweaver Tutorial

hi welcome to Dreamweaver tutorial. The video is about adding gradient background in Dreamweaver. It shows how to make the background a gradient instead of solid color. In this tutorial you will learn how to use Photoshop with Dreamweaver to create a gradient background. You will also learn how to use different tools in Dreamweaver.

Okay like the orange background but I prefer the gradient. So let me show you how to make the background a gradient instead of solid color. This is actually really good, so let’s move in a Photoshop and here I created a document that is 960*1280 and I installed an orange gradient overlay. So what I need to do is slice this gradient up into one thin straight and then we can stretch it out in Dreamweaver. So I have here my gradient overlay layer. But actually what I need to do is merge it with a new layer, we are gonna hit the apple key to merge it. So that it is flattened into a solid layer. Before it had just the gradient overlay effect. What I am gonna do is copy that effect, so I need it like this. And what I need to do is, what happens is this gradient comes down and I want you to look right here.

This is the color, so watch right there. So using my eye dropper I am gonna drag down like this and see other colors is changing. But eventually the gradient will stop, will stop changing, so I put a line, a vertical line where it stops changing. And this what, so using my marquee selection tool I am gonna use this single column. I must get a proper single column selection in there. But I don’t need the whole thing, I just need to where the line goes. So I am gonna hold down option I am gonna come up and I am gonna deselect all the stuff below the line. I am gonna copy, make a new image, paste it and it’s there even if it doesn’t seem like it is.

And I am gonna save this; I am gonna save it in my portfolio folder, in the images folder. I am gonna save it as a JPEG, i am not gonna embed the color profile. I am gonna call this background slice. Okay now I can close that and I need to do one more thing in Photoshop, I need to come here and grab this color. So here is the hexadecimal value for that color, so I am gonna copy that and go back over the Dreamweaver. And I gonna type that number paste it for the background color. So it doesn’t look like a change much, so let’s change this to reflect the entire gradient instead of just one solid color. So let’s change a code a little bit. I am gonna keep the color in there but I am gonna change this to background URL parenthesis images/backgroundslice.jpeg that’s the name of our file.

And I want to have that color in there as well and after the color I wanna have this code it’s called repeatx and what that means is we have one slice, it’s vertical or you want to stretch it horizontally so it fits whole page. So watch what happens now, now we have entire gradient so I am gonna save, and so I am gonna save file, preview in browser, yes the file is fine. Ya save changes. So now we have a page that looks like this, it’s just not orange, it’s a gradient of orange. And that is one slice repeated throughout.

Tags: navodila za dreamweaver 8, dreamweaver tutorial insert multimedia, dreamweaver portland, macromedia dreamweaver, dreamweaver flyout menu, dreamweaver cs3

Tags

Dreamweaver Tutorials