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.
B <div><image src="../images/brown-at-council.jpg"></div> /B
C <div>President Brown speaks at the Faculty Council meeting.</div> /C
- Insert an overall <div> to contain our photo/caption component.
- Insert a <div> to contain our photo.
- 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:
The dialogue box for inserting a <div> allows you to specify:
- Where the <div> is inserted (either at the cursor insertion point or before/after a specific tag)
- A “class” attribute (select from existing styles with drop-down menu)
- An “id” attribute (select from existing styles with drop-down menu)
- Or, click “New CSS Style” to create your new style before inserting the <div>.