Brand new to Photoshop & Dreamweaver, PSD help required please!

[DrKris]

Hello there,
I apologise in advance for my ignorance - I am brand new to all of this. I plan to make a not-for profit website, and really like the CharityTrust design. I want to make some alterations to the background and am having difficulty doing so.. maybe if I post some screenshots you'll understand what I mean?
OK, well here goes! .....
This is what the background gradient of the header currently looks like....
Eg 1.jpg
This is an example of what I want to change the gradient to (or something similar anyway...)
Eg 2.jpg

As you probably guessed, I have managed to change the color gradient using the PSD file that comes with the template. What I'd like to know is, how do I export my edits in Photoshop (as seen in Eg2) into Dreamweaver?

I hope you understand what I mean!
Sorry for my ignorance again, like I said I'm brand new to all this!
Any help would be greatly appreciated
Kris

[CovertPea]

Hi Kris,
To begin with, bypass the supplied psd file.
The present background is a simple repeat of a 10px wide image. If you want to change it to a full width image or smooth gradient you're going to have to change the background's size.

SO....

Open the templates images folder and take "header_bg.jpg" into photoshop. At the moment it's only 10 x 203 px. Go to IMAGE - image size and change the width dimensions only to whatever your website width is; say 800 px.
Make your changes to the full length image then resave it back into the images folder under its original name and file type - header_bg.jpg.

ps. best to keep a copy of the original somewhere, just in case.

[DrKris]

Thank you, that is excellent advice and has explained it perfectly for me... apart from one thing! In the Dreamweaver doc the part where the text is comes up as an image, but on the PSD I can amend the Text (DRSparks.org) without changing the background. Is this possible?

[ishkey]

Take CP's advice

To begin with, bypass the supplied psd file.

look at this code from the index.html -
"img scr" calls the graphic name "logo.jpg" which resides in the "images" directory (it is a seperate graphic file) which has dimensions of 172px x 45px, so why not just make your own from scratch and name it logo.jpg. The code below will then display your graphic.
If your graphic abilities are not up to par for a jpg, you could make it a transparent gif or a png file, that way it would blend in with your new background.

<div id="header">
<h1><img src="images/logo.jpg" width="172" height="45" alt="Charity Trust"></h1>