How do I properly slice my photoshop template so i can export it to dreamweaver?

Its a bit complicated to explain, since i dont know if your going to add javascript(if you are unfamiliar with javascript or what you can do with it, let me know and ill explain), or if you are aware of CSS and how html layouts are designed, but ill give it a shot and give you my process.

It is very easy to create the site in photoshop, but a different story when actually laying it out. When your done slicing photoshop will give you a fully working HTML Code.
Even though it will load your page on a browser, it wont center the page or adjust it to fit any browser(in my experience, Internet Explorer did not do well with my uploaded photoshop html.) so i disregard the html code.

Here is how i got around this.

I would design the page as you did, and then slice the main sections. i.e:

It should be a lot of images, for example, you should slice header, navigation bar(each one individually, this will make it easier if you plan on adding javascript or other css options if not slice it all together), sidebar image(top image etc), content(top image etc), left sidebar image, and then footer image

The slice option in photoshop will segment the sections you select but will also auto select sections it feels are required so just keep track of the slices you want to keep, and their file number.

Then i would finalize the slicing by going to File>Save for Web.
This will bring up a different window, which will allow you to adjust you images and export my images in a .gif format. I disregard the html code that photoshop creates, since i can code my own layout and add the images as i go along(i found this to be a much easier process than uploading my PS html)

Im not saying that its not possible to use the html code that photoshop gives you, but i found it easier to code it myself, and looking at your layout you dont need background images, you can color your background sections(divs) using CSS.

Let me know if you need any further info, or help laying it out.

**im assuming that the product review images in the middle were imported so you have them in as "images" already**

if not, slice those as well.

best of luck and i hope this helps, nice layout

It is not necessary that you need to code the css first just to create hyperlinks, but when you have the design in place, (ie) the class names of the css classes and what kinda names you gonna have for the subs, you can code the html first.But going for css in the first place is preferred coz it reduces your effort and rework!!

Javascript allows you to add "motion" to your site. for example, When you hover over a button and the button pops out or gets brighter or darker.
Of course there are tons more things you can do with it but that would be a pretty basic example of what javascript can do.
Slicing individually meant for the navigation bar, b/c if you planned on adding javascript, you would have to do it in as individual images, but your not, so no need to worry about that. A single navigation bar slice will do.

Dreamweaver has the option to set "Hotspots"(or image maps) in an image, which allows you to add multiple hyperlinks to a single image.

I recommend to set up the site first(code it) then add the hot spots to the images. dreamweaver will add the needed coding automatically.

Then you select the image you want to add the hotlink to, and on the bottom panel of dreamweaver(bottom right) there is a section called "maps" and it shows different selection tools.
Select the marquee tool, and make a selection on you image (i.e the word "Home")
Once its selected, the properties tab on the bottom will change, and will allow you to input the link you want referenced for that hotspot.

But I suppose java scripts wont be needed for this these things and can be handled only with the help of css. ???

That particular effect on a button cant be done in CSS, or at least not that i know i of. i know other effects can be(image opacity i.e)

My impression is that the OP just wants to get their site up. and if they dont want to add any special effects to nav bar. there is no need to slice it into sections.

But again if they do plan on adding effects to the nav. bar then they would have to slice them individually.

Its up to the OP.

<div> </div>..you would have to set divs in order to segment your page and place the images where you want them. sadly you would have to know html in order to be ale to do this, the process itself is a bit long to explain here(i would have to code it for you and explain what i coded in order for it to make sense), but there are plenty of videos on how to code in youtube, or you can outsource it. My recommendation in start there(youtube), then when you learn how divs work, dreamweaver will do the rest for you.

but basic html skills are needed.