Turn Speech into Text »

Dreamweaver Code Collapse Feature

In this tutorial I will demonstrate the usefulness of Dreamweaver's Word Wrap and Code Collapse features as introduced in Dreamweaver 8.

As you can see, we are in the middle of building this site.

After opening up index.html in Dreamweaver, I switched to the code view and make sure that menu View -> Code View Options -> Word Wrap is checkmarked. With line numbers turned on as shown below, you can see that Dreamweaver had wrapped that long line with the long <img> tag.

This is the image tag for the title image and it sits inside a table cell. The line wrapping that you see is only a display formatting by Dreamweaver. Line 12 still exists as one long line and is not really on two lines of code. You can turn off word wrap by unchecking the menu View -> Code View Options -> Word Wrap. So now you would see line 12 as one long line.

Another way to deal with this long line 12 is to code collapse the lengthy attributes of the <img> tag by highlighting them and clicking the code collapse icon...

And now I can see things on one line without scrolling...