In this tutorial we will create a large content box for a webpage. Most likely to use this particular box in the middle for maybe new content.
Use this turorial with the .PSD that I have provided. In the .PSD you will have the content box made and a version cut. Now you can see how the image will be cut so that you can use the 'slices' for the coding.
In the PSD you see, cut top, cut mid, and cut bot. These are the three images that will create the box.
Here are the images as they are.
Now we have the images, Open DreamWeaver and create a new .HTML you can name it index.html if you want to.
Create a new TABLE ( CTRL+ALT+T (INSERT>>TABLE))
ROWS: 1, COL: 0, Width: 100% - This is are main table that will just center the table on the page. Click on the table and align = Center. You code looke like this.
Click inside the table and create a new table, That will be out actual BOX. ROWS: 3, COL:0, Width: 471 ( this is the width of our box ) - Our main content table, Also align = Center. Set the tables, CELLPAD and CELLSPACE to 0. Our code now looks like this. Note, between <td> </td> is, ( <td> </td> )
Slect the first row and insert the image - con_top, Click on the bottom row and insert con_bot. Now you can see the basics of our box. Now click on the middle row. At the bottom of the page you see PROPERTIES (fg. 1), then BG. Click on the little Folder and add con_mid. Now that will load the middle image as a background images so we can write on top of it.
fg. 1
If you've successfully entered all the images your code looks like the following.
That is a basic box. Now lets add some text. To do this, click in the middle row and insert a TABLE. ROWS: 1, COL: 0, Width: 100%, CELLPAD: 0, CELLSPACE: 2. That's really It, just click in the table and start typing random things and it will automatically move and parse your text to fit the box. Here is my box. (entired code between, <body>/</body>)
