Using Split View

Does losing your WYSIWYG view freak you out a little? Wish you had a way to see both Code and Design views at once? Well, that's exactly what the Split view is about. It splits the document window into two separate panes, so you can see both code and WYSIWYG at once.

To use Split view:

1.

Whether you're in Design view or Code view, click the Split button in the Document toolbar. Your document window splits into two: one part for Design view, and one for Code view ( Figure 15.10 ). Figure 15.10. Split view is like training wheels for codeit lets you see how changing the design changes the code, and vice versa.

2.

If you wish the two were reversed (you'd prefer Code on the top instead of Design or vice versa), use the View Options button on the Document toolbar ( Figure 15.11 ). You've already seen how the button changes depending on which mode you're in (Code or Design). When you're in Split view, you get all the choices from the other two, plus a choice of whether or not Design view should go on top. Figure 15.11. The View Options button has all of its choices visible when you're in Split view.

Tips

• If you update your page in Design view, Code view automatically updates in response. But if you update in Code view, the Property Inspector displays the message, "You have made changes to the code. To edit selection properties, click Refresh or press F5" ( Figure 15.12 ).

  Figure 15.12. Changes to Design view automatically update Code view, but not vice versayou'll need to refresh the Design view to see it updated.

  

• When you're in Split view, the Coding toolbar only extends down the left side of the code pane, not down the full document window.

• If you select anything in one view, the document automatically scrolls to show the same selection in the other view.

• If you've never looked at HTML tags before, Split view can be a great way to familiarize yourself with which tags go with which elements of your design.

Text Editing Tips

When you first start using Code view and see tags and markup for the first time, you'll find that there are a lot of things that Dreamweaver assumes you already know. In case you don't, here are a few handy tips:

• Word Wrap: You may want all of your paragraphs to be one long string of text, but if you have Word Wrap turned off, all your long lines will go off the right side of the document. Turn Word Wrap on using the View Options button on the Document toolbar (Figures 15.5, 15.11).

  When you're entering code, be careful about putting in hard returns (where you press Enter/Return) versus the soft returns that Dreamweaver will display even though you didn't type anything in. If you want soft returns, just keep typing and Dreamweaver will handle it for you. If you want hard returns, you might as well turn Word Wrap off.

• Syntax coloring: At first, you might wonder why the text in the code editor is so many different colors. If all the colors confuse you and make you think about turning syntax coloring off, give it a try as-is. Syntax coloring is one of the best ways to learn what's what in code, as similar elements will have identical coloring.

  Wish there were maybe fewer colors all at once? In the Code Coloring category in the Preferences, you can change any color to any other color. And if for some reason you want to make things even more tasteless, you can add unique background colors to each different foreground color . But you shouldn't.

• Line numbers : These are another matter of personal preference. Some people love them, while other people find them terribly annoying. What you'll want to note is how they work in conjunction with Word Wrap: soft-wrapped lines only get a single line number.

• Indentation: If you haven't worked with code before, you might not immediately get why indentation is so useful. But if you're trying to figure out where your divs begin and end, you'll get it and quickly when you can see them lined up with each other, with their contents indented.

  There's no single "right" way to indent code. What we've found works best is to find one style that works for you, and then stick to it . It's the consistency that matters most, especially when you have multiple people working on a site.

  If you want to manually indent/outdent your code, you can (with the Indent Code/Outdent Code buttons on the Coding toolbar; see Figure 15.3)but we recommend instead turning on Auto Indent using the View Options button on the Document toolbar (Figures 15.5, 15.11).

• Code formatting: The last button on the Coding toolbar lets you format your source code (Figure 15.3). If your tags are all over the place because your code came from here and there (as happens to all of us), "Apply Source Formatting" can be found here. If you don't like the way that Dreamweaver formats your code by default, you can choose the Code Format Settings option, and you'll be presented with the Code Format category of the Preferences. Even if you don't know much about tags, it's easy to use this to put your text just where you want it ( Figure 15.13 ).

  Figure 15.13. Dreamweaver lets you format your code precisely the way that you want it.