Trouble getting template from Photoshop to Webpage

Question

Hi guys,
So, a few weeks ago I upgraded from Photoshop CS to Photoshop CS4 (big jump right?), and CS4 is wonderful! But I'm having some issues:
First, ImageReady no longer around, so making image maps seems all but impossible to do in Photoshop now. Yes I've figured out how to make the image map in Dreamweaver, but I kinda miss just drawing a box in ImageReady and telling the map where to go.
Second, I am trying to get into the "make the web site template in photoshop, its easier" trend... and they're right, making my web layout is cake if you know how to use layers and draw in Photoshop. I love it, it's wonderful.... but then again every tutorial I find on making templates in PS for DW & Internet say to upload after drawing to ImageReady to create image maps for your navbar and buttons (1) and to slice up your template to import to ImageReady, and then import it from IR to DW. Well... as I mentioned, CS4 has no IR!
So, does anyone, ANYONE, have a nice tutorial explaining how to set your options in the slices you make for a web page in CS4? I've found plenty of tutorials and guides on how to use the slice to draw around your button and such, but nothing about what options to set. Right now my site is only one page, but eventually I may want to make multiple pages instead of just having my navbar link to specific places on my main page. Plus, saving each layer individually to use in my CSS has its downfall as well: for some reason my header, branding logo, and navbar all have spaces between them. http://secondlife.lift4ullc.com is the site I made... all of the graphics were made in PS CS4, but instead of slicing stuff up, I just hid all layers except navbar, or logo, or header, and saved the jpg's individually. Would really love to learn how to just slice the different image sections without having to do all that extra work. Thank you all for any help you can provide, I really appreciate it.
Chance

Answer 1

Hi Bart,
Actually, I haven't really done much CSS with the template yet. Here's what I've done and where I'm at:
First, created the template fully in Photoshop CS4
Second, sliced up the template and then saved to web & devices, html & images
Next, opened the new .html file in Dreamweaver
This is as far as I've gotten so far. The template looks great, and its all in one table. I went back and forth with one of my professors in my online class all day yesterday. What he said was to nest another table within my main template table to position everything how I want it. I tried this for a few hours yesterday and always the text ended up somewhere outside of my template "content boxes". You can see the full code and all of its glory here.
I'm really not sure how to properly nest a small table within the main table to get some header like "News" or "Current Events" to line up at the top of the gradient on my "content boxes" etc. My professor suggested Illustrator, but I do not know that program at all yet.
I could go with pure CSS as I've done in the past, but then I get gaps, like the ones I have here. If you notice at the very top where the branding is, there's a gap between that and the header image, and then another between that and the navbar. My goal is to be able to put content in the two boxes like on the first link, and then figure a way to link those boxes to my CSS so that as I add content to them (like with the second site) the boxes repeat or scroll down without giving me gaps. I hope this makes some semblance of sense. I figure for my other pages (one for every button on the navbar except XStreet) I'll design another content box like the two on the front of the site, but combine them to one box instead of two.
Once I can figure out how to start adding content properly, I'll be all set finally with creating and designing templates. Its just this wall that I've hit that's stopping me from going further. Should I take out the tables, use the slices in my CSS and link them to <div> tags instead? My business is wanting a capture or splash page like here. and while I know how to design that template with Photoshop to give them a white box with a reflection under it, I will run into the same problem of getting the content inside that white box.
I appreciate the time and effor in this, thank you. Oh yes, one more thing... I've been trying to do some searches on google and youtube for a video tutorial of just how to get the content in there properly, but I'm not even sure how to phrase it right to get some decent results. If this is one of those thinks you just know how to do but cannot explain it, if you could give me a tip on how to phrase my search properly, I'd appreciate that too. =)