noob question about image used for main content

[Krystian07]

hey guys, this is my first post on the forums
So I am fairly new to coding, and i am having a lot of trouble figuring this out. So I designed my web layout in PS. It came out very nice, but now that I am actually trying to get it coded and ready to go I am stuck.

how can i set so that the content boxes are editable (as backround images?). I know how to do it with plain backround color. But how can I do is with those images? I hope I am clear enough for you to understand.
And BTW I use dreamweaver CS4

thanks guys,

[sachy24]

You should slice them as images and use css to code your layout

[htmlbasictutor]

The way you have laid this out you can:
1. Recycle the background image for the navigation sections.
2. Recycle the gray texture as a small image repeated horizontally and vertically in the main content section and you two smaller side sections.
3. The bottom red band can also be done with one small image repeated horizontally and vertically.

You use CSS to create containers for each section of the layout then use the background-image property to apply the background image. (CSS Background)

The black border can be applied using the border property.

The navigation "buttons" can also be done with a typical background image.

So we are down to 5 images required to do this layout.
-header
-gray textured background (small slice of what you have)
-red navigation background
-red footer image (small slice of what you have)
-"button" background

Save the images as .gif or .png as this is the type of file format for the type of images you want to use for this design.

The smaller the image file, the better for load time of the web page.

Text in the navigation should be done with real text, not images.