Publishing System Settings Logout Login Register
Slicing and Coding a Content Box in Photopaint and Dreamweaver
TutorialCommentsThe AuthorReport Tutorial
Tutorial Avatar
Rating
Add to Favorites
Posted on October 6th, 2006
6211 views
Adobe DreamWeaver
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:

user posted image

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.

user posted image

We'll name this header top.gif

user posted image

Next we do the same thing to create the middle graphic.

user posted image

Name that middle.gif

user posted image

Last we do the same for the footer graphic...

user posted image

Name that bottom.gif

user posted image

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:

user posted image

user posted image

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:

user posted image

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:

user posted image

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.)

user posted image

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:

user posted image

Hit ok and you can start adding your content to that new padded table. Your box should now look like this:

user posted image

Hope that helps clear up some of the DW slicing mystery :)

Faken
Premium Publisher
Dig this tutorial?
Thank the author by sending him a few P2L credits!

Send
Faken

Dan Richard is the founder of the [url="http://www.pixel2life.com"]Pixel2life Tutorial Search Index[/url] and writes articles on web design and administration.
View Full Profile Add as Friend Send PM
Pixel2Life Home Advanced Search Search Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Pixel2life Homepage Submit a Tutorial Publish a Tutorial Join our Forums P2L Marketplace Advertise on P2L P2L Website Hosting Help and FAQ Topsites Link Exchange P2L RSS Feeds P2L Sitemap Contact Us Privacy Statement Legal P2L Facebook Fanpage Follow us on Twitter P2L Studios Portal P2L Website Hosting Back to Top