Moving from Photoshop to Dreamweaver

[Kurt123]

I’m working on redesigning my website (oldmencrying.com). I built it years ago with Frontpage and barely knew what I was doing. I’d like to rebuild it with Dreamweaver. I plan to use Community Server to manage the forum and photo gallery, and maybe a PHP/MySQL combination to manage “viewer mail” and other dynamic content.

I am a complete novice at Photoshop and Dreamweaver but am willing and eager to learn. Here’s my first challenge:

A friend created an excellent graphic design, which I’d like to use as the template for the whole site. A screenshot is here: http://img168.imageshack.us/img168/489/omc1cy3.png

• This is a single .png file, but I’ll need to make the navigation buttons “interactive.” Is the best way to do this by using rollover images (i.e., creating a duplicate graphic of each, with maybe just a different text color) in Photoshop, and then setting the appropriate graphic to show/hide based on the button state (e.g., hover, active, etc.) in Dreamweaver?

• Given that the graphic design is going to dictate my page layout, I guess this means I shouldn’t begin building my website with one of Dreamweaver’s built-in HTLM sample layouts (all the tutorials I’ve found start with, “now select the 2 column liquid, left sidebar …” layout).

• How can I maintain the large OMC watermark in the background across every page, which will have different content in the main content areas?

Thanks for any pointers on any of the above!

Kurt

[alexgeek]

I see on that desing your friend made that it has a scroll bar
scrap that, they are annoying.
As for the background part. I'm not quite sure what you're on about.
could you rephrase that?

[Sgaspar11]

Boy, you're going to hear this from others, but learning to hand code all of this will be much easier and more efficiant than using DreamWeaver...

But if you must use dreamweaver then yes, rollover images are you best option for these...and since they are mostly jsut text they can be just text links using CSS(Cascading Style Sheets) to format them.

As for the background image, you'd just have to set that image to the background of every page...

[alexgeek]

Originally Posted by Sgaspar11

As for the background image, you'd just have to set that image to the background of every page...

could be done with php couldn't it?

[pa007]

Just set the image as the bg image for the body element and it will apply to every page that the css is linked with.

Pete.

[hschmitz]

Originally Posted by Sgaspar11

Boy, you're going to hear this from others, but learning to hand code all of this will be much easier and more efficiant than using DreamWeaver...

I agree that hand coding is more efficient, but I use DreamWeaver as an editor for hand coding, mostly because of the code completion and the way that you can easily edit the CSS. Also uploading the files is more convenient. You don't have to start a separate FTP software.

I don't see a contradiction between DreamWeaver and hand coding.

[alexgeek]

Originally Posted by hschmitz

I agree that hand coding is more efficient, but I use DreamWeaver as an editor for hand coding, mostly because of the code completion and the way that you can easily edit the CSS. Also uploading the files is more convenient. You don't have to start a separate FTP software.

I don't see a contradiction between DreamWeaver and hand coding.

Using the code view in dreamweaver is hand coding. I think we assumed you were using design view.

[Sgaspar11]

As for taking that image from photoshop into dreamweaver, you'll want to use the "slice" tool in photoshop to break up the image into seperate sections.

[VanessaJW]

Hang on though, I know Karinne always says not to use the slice tool in Photoshop, I was just trying to find a link to one of her posts where she explained that, but I can't at the moment...

[Lchad]

I believe you can slice it just don't export it as html. Photoshop's html code will be bloated. Save the slices each as an individual graphic and then code them into the site using html/css.

[planescape]

I generally go from a photoshop file to dreamweaver and hand-code it. The way Id go about it is to use a CSS style sheet to set the back ground (thats the basic layout) and have the navigation taken out of the image.

Id then add a navigation div and use the images/text as separate files to create the navigation

and then finally add another div to make the main content box

that probably sounds extremely complex, but the best way to get a hang of it is by going to other peoples websites and view all of their source and work out what is doing what etc.