Using image shadow boxes/containers
In past templates, image styling was done by wrapping an image with a div container containing a class. With the new templates, you can apply a rounded border box effect to any image in your content by applying a simple CSS markup to the image reference tag.
Image styling note:
All older styles listed below will work, but we recommend using image widths that match the default column sizes (ie 930, 690, 450, 210)Any Size
| Class | Size |
| frame | any |
Large: 3 Columns Wide
| Class | Size |
| image_large | 680x210 |
| image_large_16x9 | 680x383 |
Medium: 2 Columns Wide
| Class | Size |
| image_medium | 450x210 |
| image_medium_16x9 | 450x253 |
| image_medium_3x2 | 450x300 |
| image_medium_4x3 | 450x338 |
Small: 1 Column Wide
| Class | Size |
| image_small_short | 210x80 |
| image_small_16x9 | 210x118 |
| image_small_3x2 | 210x140 |
| image_small_4x3 | 210x158 |
| image_small_square | 210x210 |
| image_small_4x3_vertical | 210x280 |
| image_small_tall | 210x315 |
| image_small_3x2_vertical | 210x315 |
To insert the markup in Dreamweaver, you can either do it in Code view, or select the image, press Ctrl-T (Apple-T on a Mac) and insert the markup.
Code example:
<img src="test1.jpg" class="frame" alt="UNL Campus" />
To insert a styled caption area over your photo, just enter a block of text after your photo with the class of "caption."
Code example:
<img src="test1.jpg" class="frame" alt="UNL Campus" /> <p class="caption">The Union Plaza and greenspace at the University of Nebraska-Lincoln are beautiful in the spring.</p>
The Union Plaza and greenspace at the University of Nebraska-Lincoln are beautiful in the spring.
