Overview | Part B Folder | newStory function | User Input | Build Story | Image | Gender | Caps Function | A/An Function | Image Rollover | Story Window | Questions

Extra Credit—Add image and wrap text around it

Key Terms
An attribute lives inside an opening tag and gives more information to the Web browser. Attributes are never placed in closing tags.

Examples:
  > width="100%"
  > src="orator.jpg"
  > href="http://amazon.com"

If you don't want to do this extra credit task, continue to the next page.

1. Open story.css and add this CSS class to wrap text around an image and float the image against the left edge of the page.
   
   Hint: You can make a similar class for floating the image to the right and wrapping the text around the left side of the image. Make a new class of floatRight and use it if you prefer.
   
   
   .floatLeft {
     float:left; /*Float img left, wrap text right */
     margin:10px; /*Sets gap between image, text */
     margin-left:0px;/*Resets edge of page on left */
   }
   
   
   Apply Styles in Dreamweaver
   In Design View, click on the image to select it, right-click to bring up the context menu, select CSS Styles, and choose the style.
2. To add an image to your story, insert the image between 'p' tags. The text following the image will wrap around it. If you add your image at the very bottom of the page, no text will be available to wrap around it.
   
   
   
3. Add a class attribute of floatLeft or floatRight to the image.
   

<img src="pansies.png" alt="pansies" class="floatLeft" />

3. When you apply floatRight or floatLeft, the text should wrap around your image. The pansies image uses floatRight. You may need to move your image higher on the page until the text wraps around the image. (In Dreamweaver, you can drag the image up or down.)
   
   
4. Notice the size of the gap between text and image. The margin attribute regulates the size of the gap. For the pansy image, it was set to 10px. For this sunflower image, it was set to 0px. When the margin is 0px, notice how the text runs into the image, making it harder to read.
   
   If you like, experiment with the size of the margin. Remember to set the margin to 0 on the side that hugs the edge of the page.
   
   
5. Save your file and preview in the browser. Did the image float left with the text wrapping around it? Use error console to find and fix any errors.
   

6. Go to the Catalyst WebQ and answer Questions 9 and 10.

Now that you have added an image, you are ready to add the grammar functions. We'll start with the gender function....

.