Work with Highlights Boxes

Step 1: Add text highlight box

1. In Dreamweaver, find and open the New Page you created earlier
2. Add a paragraph return after the first few lines of text; select the first paragraph
3. Place your cursor at the beginning of the first paragraph
4. Click the Insert Div Tag button in the Common Insert Toolbar
5. In the Insert Div Tag dialog box
• Insert: Wrap around selection
• Class: boxright_4rules
6. The highlights box div wraps the selected text and allows the rest of the text to wrap

Step 2: Add auto-label

1. With your cursor anywhere in the highlights box, right-click/ctrl-click the Tag Selector for <div.boxright_4rules> and find the "Set Class" command in the popup menu; select "boxright_withboxlabel"
2. Add a paragraph return after the first few words of the highlights text
3. With your cursor on the first line of text, change the Format in the Properties Inspector to any Heading setting (Heading 1 is not recommended here)
• The Heading becomes and automatic box label

Step 3: Add an image

1. Add a paragraph break at the beginning of the highlights body text and move the cursor to the new blank line
2. Insert the "arches.jpg" image as described in Add Images
3. If there's enough space, text can be made to wrap the image; in many cases, the image would best fill the width of the highlight box
   • The best fit comes when the image width matches one of several set widths
   • Highlights boxes should be adjusted as follows so they are large enough to hold the image, but small enough that there is little or extra spacing around the image
4. With your cursor anywhere in the highlights box, right-click/ctrl-click the Tag Selector for <div.boxright_4rules> to select the highlights box div tag
5. View the document in Split or Code mode and find the code "<div class="boxright_withboxlabel">; place your cursor at the end of "boxright_withboxlabel" just before the close quote mark
6. Press the Space bar and look for the classes that begin "setwidth"
7. Our image is 165 pixels wide, so choose "setwidth175" and press Enter
8. Return the document to Design preview mode
9. The highlights box is now just a little larger than the image
   
   NOTE: When highlights boxes are set narrower than the image's width, the image will protrude from the highlights box in many browsers

Step 4: Other highlights boxes

1. Repeat the above steps (you may want to duplicate your body text to create more length) and experiment with other highlight boxes; look for "boxleft_" or "boxright_" classes
2. Try "image_left" and "image_right" wrapped around an image
   • The image should use Default alignment
   • No "setwidth" modifier class is needed; the box will be as wide as the content, plus a small margin on the text size
   • The box will be as wide as the widest content, image or text; use line breaks (shift-enter) and keep text short so it fits under the image

Step 5: Finish up

1. Use the File menu > Save command
2. Use the Site menu > Put command
3. Switch to a browser, view and/or reload the page to see your changes

Many Stanford Medicine sites contain highlights boxes created with a table or tables. It is not recommended to create new highlights boxes of this style; instead, use CSS highlights (see other tab).

Editing existing, complex highlights boxes

1. Many 1.9 sites have fairly elaborate highlight boxes, with rules and tiers and so on
2. Because the width of many cells is controlled using shims (1-pixel transparent graphics), adding rows and columns can get complicated
3. A Neat Trick is available to help understand and work with the existing structure of complex tables