There are many ways to create a frame-like design like those seen here: simple curved corners , decorative frame and there are many other methods referenced below. I’m going to show you one of the most simple methods, using a table and background images. And a method using CSS with a fixed width.
Here’s the table method breakdown
Create a table (3×3) at any width and height and use the images as follows:
- The top right corner image should be placed as an image in the top right cell of the table and aligned to the bottom left.
- The top left corner image should be placed as an image in the top left cell of the table and aligned to the bottom right.
- The bottom right corner image should be placed as an image in the bottom right cell of the table and aligned to the top left.
- The bottom left corner image should be placed as an image in the bottom right cell of the table and aligned to the top right.
- Select the entire table and give it a bg color the same color as your body bg color.
- Select the center cell and give it a bg color the same color as the interior color of your “frame” (you can use the eye-dropper to grab the color from a corner piece)
- For the top, bottom, right and left edges,
- Using CSS create id’s called #top, #bottom, #right and #left
- Place the appropriate bg as a repeating image, repeat-x for horizontal and repeat-y for vertical.
- Be sure to set the width or height to match that of your image
- Apply the CSS Id to the cell (click the <td>, go into code view, hit the space bar before the close of the td*> (where the * is), choose id, then choose the appropriate id.
Finished Page: http://www.chiefcrazyhair.com/SCC/shadows/index.htm
Fixed Width Table-less Version
The explainer is in the page: http://www.chiefcrazyhair.com/SCC/GC362/shadow-div.htm
To use Dreamweaver to create divs, there is an insert Div button, under the inset panel, under common tab, 5th over from the left.
Here’s how I extracted the images:
Read
Alternate Text Tutorial: http://www.cew.wisc.edu/accessibility/tutorials/altTextTutorial.htm
CSS Tips and Tricks: http://www.blogherald.com/2006/09/08/css-tips-and-tricks/
Div vs. Class: http://www.tizag.com/cssT/cssid.php
