Putting an image into a header in Dreamweaver.

Best foot forward.

Ok so here we go, my very first toe dipping into the world of Dreamweaver and a good chance to show the gulf between my CSS knowledge and my Photoshop skills. For this part of the project we needed to simply put an image into the header of a web page in Dreamweaver.

To start with I made a file on the desktop for my web page an called it Clocktower vector CSS test. Then inside it made a new folder called images. I then went into illustrator and prepared my banner image. Now my banner image for the vector landscape rework of Clocktower cameras was a bit flash and fullscreen with all sorts of grime on it and stuff…none of which i know how to do in Dreamweaver, so I resized it down to 960 px by about 300 and saved it for web and devices as a high quality JPEG. Here it is.

I then opened up Dreamweaver and went to site/new site and entered a name for the website and pointed Dreamweaver to the folder I had just created so it would know where to look for my images.

Then I went to file new and selected HTML 1 column fixed, centered, header and footer and selected create. Then when presented with the new template I selected the logo image Div and deleted it leaving only the header across the top, looking a bit like this.

Then after checking the CSS styles window it was just a case of dragging and dropping my header image from the image folder in my local files window in the bottom left into the header section at the top of the design window. So far so good and with a brief save I could preview the site so far.

Lovely. However I think you’ll agree it’s quite along way from my proposal, for that ill need some sort of page wide scaling header, or some sort of background image that can be seen through the header and I’ll have to make a lot of the containers transparent I honestly don’t know 😀 Time to hit the books I guess.