Photos and Captions
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
- 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 the photo and the caption as a component of your page. This component will have 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 class="photo-right">
B <div class="photo-image"><image src="../images/brown-at-council.jpg"></div> /B
C <div class="photo-caption">President Brown speaks at the Faculty Council meeting.</div> /C
</div> /A
- 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>
|
