Text Wrapping and Clearing

To wrap text as I have on this page,

  1. select the image by clicking on it once
  2. in the Properties panel, find "Align"
  3. choose "Right" from the drop down menu

View this in your Web browser and you should see something like the project page with right-aligned image.

What if you want the "Text is good because:" list to start below the image? Insert a "Line Break" and clear the text.

  1. put your cursor at the end of the sentence "The more text I have, the more text is available to play with."
  2. go to the "Insert>HTML>Special Characters" menu and choose "Line Break"

To see the where the line break is, a preference needs to be changed.

  1. go to the "Dreamweaver" menu (Mac OS) or "Edit" menu (Windows)
  2. choose "Preferences..."
  3. in the "Category" column, click on "Invisible Elements"
  4. check the box "Line Breaks"
  5. click "OK"

You should now see a yellow icon.Dreamweaver "Line Break" icon

  1. click once on the icon
  2. go to the Status bar at the bottom of the main editing window
  3. control click (Mac OS) or Right click (Windows) on <br>
  4. choose "Quick Tag Editor..."
  5. hit the space bar once
  6. type in: clear="all" (e.g., <br clear="all">)
  7. hit the "Return" (Mac OS) or "Enter" (Windows) key

View this change in your Web browser. It should look like the project page with text-cleared image.

Next up in the workshop is "Creating and Editing Tables."