![]()
Looks like this is a hot topic lately and a bit confusing for the new DreamWeaver users. I will show you how to slice up a basic content box and use DreamWeaver to create the tables and format the box to accept content without displaying a mess whenever the content is too much or the size of the browser window is changed etc...
First off, I will use Corel Photopaint to slice up the content box, but you can certainly do this in any graphics program, including Photoshop or even MS Paint. Here is the content box I made: We will need to cut the box up into 3 sections... a top peice, middle section and bottom peice. I'll start by masking the top section, copy it to clipboard (copy or ctrl-c) and create a new document from the clipboard. We'll name this header top.gif Next we do the same thing to create the middle graphic. Name that middle.gif Last we do the same for the footer graphic... Name that bottom.gif So now we have our 3 sections of the content box, time to load up DreamWeaver. Create a new document and start by creating a new table with the following settings: For the width, you should put the width of the actual total image length. So for this content box, I know that it's 517 pixels wide, so that will be the table size. You should end up with a new table that looks like this: We now have 3 rows to fill up. Click on the top row (Just click once anywhere in the row itself and you'll see your cursor blinking in the row). Let's insert your top.gif by clicking on Insert > Image and browse to the image you want and double click it. Top.gif should now be in the top row of your table. Now click on the bottom row and do the same thing for bottom.gif You now have this: Now we insert the middle portion so that it fills up the middle portion properly as your tables changes height depending on content. Click on the middle row like you did the others. On the properties bar, click on the folder icon marked as "background URL of Cell": (If you don't have a properties bar, click on Window > Properties on the main menu to open it.) Browse to your middle.gif and doubleclick to select it and voila! You now have the center row with the middle.gif set as the background image so you can write whatever you like, insert images etc... Now to add some content. You can go ahead and type stuff or add images to the middle row as is, but the text will be jammed right against the edge and won't look to hot. So we can create a table inside that row with a bit of padding to keep the content off the edges of the box. Once again, click the middle row so that your cursor is in it and click the new table button. Use the following settings: Hit ok and you can start adding your content to that new padded table. Your box should now look like this: Hope that helps clear up some of the DW slicing mystery :) Faken
|





















