In a media-saturated environment, it takes more than good text content to draw a reader into your page. If at all possible, add photos and captions to your web pages, where appropriate. Photos and captions:

  • grab the reader’s eye,
  • draw the reader into your page, and
  • break up the text making it easier and more inviting to read.

To add a photo and a caption to your web page, think of them as a single component with two elements: a photo and a caption. Each of these three items is a logical unit: the photo, the caption, and the overall component.

So we’ll create a series of nested div tags to identify each unit.

A <div>
B <div><image src="../images/brown-at-council.jpg"></div> /B
C <div>President Brown speaks at the Faculty Council meeting.</div> /C
</div> /A

  1. Insert an overall <div> to contain our photo/caption component.
  2. Insert a <div> to contain our photo.
  3. After the photo <div> but still within our overall <div> container, insert a <div> for the caption.

To insert a <div> into a web page in Dreamweaver, click the <div> icon in the Common toolbar:

div-icon

The dialogue box for inserting a <div> allows you to specify:

  1. Where the <div> is inserted (either at the cursor insertion point or before/after a specific tag)
  2. A “class” attribute (select from existing styles with drop-down menu)
  3. An “id” attribute (select from existing styles with drop-down menu)
  4. Or, click “New CSS Style” to create your new style before inserting the <div>.

insert-div