Creating and coding an expandable content box

Discussion in 'Graphics Design' started by Waffle, Aug 8, 2005.

  1. Waffle

    Waffle Alpha Geek

    Likes Received:
    Trophy Points:
    In this tutorial, you will see how a basic content box is designed in photoshop, and then sliced and saved correctly, so as you can edit it in dreamweaver or a similar program, and add content in an expanding box.

    Open photoshop, and create a new document. It's width should be a little larger than the size you want your content box to be. This is so there is a little room around the edges, to allow for the border to be visible.

    The height does not matter, as it will be expanding anyway, but for the tutorial I will be using 400x400.

    Create a new layer, double click the background layer, and delete the white space.

    On the new layer, take the rectangle marquee tool, and draw a selection, like so, and fill it with black.

    If you wish, align the content box to the middle and the center of the bottom layer.

    Keep the selection active, and go Select>>Modify>>Contract. I chose 10 pixels. This will determine how thick the actual box is. Anything from 2 to 10 pixels works great, but you can of courser adjust it to your liking.

    Hit delete, and you will be left with this:


    Then apply a layer style. I just added a colour overlay of green, and a 1px stroke. You can of course add effects such as bevel and emboss, or experiment with different patterns. Just remember that this box will expand downwards, and so if you use a vertical gradient or pattern, then the box will repeat itself and not look good at all. Horizontal works the best, but you need to be careful, else it will look wrong.

    On the bottom layer, make a selection near the top of the box, but in betwee n the borders, like so, and fill with black.

    Apply a layer style, I added an inner stroke and a darker green, but again, customise if you wish. At this point you can add text, such as "Main News", or "Navigation".

    Save it, you never know.

    Right, grab the slice tool. It's located just below magic wand, (PS7 and up)

    Gets tricky here...simply drag from the top left of the document, just past the top section, to the other side, like this:


    (The area in red is what you should have 'sliced' around. If it worked, the 'slice' will be numbered 1.

    Repeat this for the bottom section.

    As the content box is to repeat, we need a little piece of it to set as the background in the webpage document. This will be the repeater image, and you should slice it like so:


    Once this is done, go File>>Save for Web.

    Drag around the image in the middle, so all slices are select. Change the settings so as the images are saved as GIFS, to enable transparency.

    Click save, and check it reads "Save as HTML and images", enter a name and save it.

    We are done in photoshop.

    Open the .html page up in dreamweaver.

    You will see something similar to:

    Now, simply delete the two middle images, of the side borders.

    You will be left with:


    Delete one of the empty rows. Then in the properties box of the other empty row, set its backround to the image of the repeaters slice we created.


    Now the table will expand freely, and the borders will follow down, giving the impression of an expanding content box. As shown:

    The only problem is that the text runs through the image. To remedy this we can insert a new table into this cell, and make it just wide enough to touch the inside edges

    First insert a new table into that cell: Insert>>Table>>1 row, 1 column, 100%.

    Then simply drag the edge of this new table inwards, so as it gets smaller. When it is small enough to fit inside the content area, you are free type content in this cell, and the box will expand around it.

    86% wide worked perfectly for me, but this will vary depending on the size of your box.

    The finished result:


Share This Page