Using the Coding Toolbar


Yes, it's another toolbar in Dreamweaver, but the Coding toolbar is a little different: it only shows up when you're in Code view, and it only acts on those things that you would deal with when you're in Code view.

To use the Coding toolbar:

1.
If you're in Design view, click the Code button in the Document toolbar. This switches you into Code view, so you'll now see the tags (instead of the WYSIWYG appearance of your page) and the Coding toolbar. For instance, Figure 15.1 shows a page in Design view, while Figure 15.2 shows the same page in Code view.

Figure 15.1. Here's the familiar Design view that you've grown to know and love.


Figure 15.2. The Code view shows the exact same page but in a whole new light.


2.
On the left side of the document window, you'll see the Coding toolbar ( Figure 15.3 ). Let's review its buttons , from top to bottom:

Figure 15.3. The Coding toolbar provides everything you need to manage text and tags.


  • Open Documents: The name of this button might make you think that it's a way to open documents, but that's incorrect; it actually offers a pop-up menu of all the items that are currently open.

  • Collapse Full Tag: Collapsing code (and why you'd want to do it) is covered later in this chapter. For now, it's enough to know that this button will do it. Holding the Alt (or Option) key while clicking this button collapses everything outside the current tag.

  • Collapse Selection: This button collapses the current selection of code, and holding down the Alt (or Option) key while clicking this button collapses everything outside the selection.

  • Expand All: If any code on the page is collapsed , clicking this button expands it again.

  • Select Parent Tag: This button causes the selection area to change to include the parent tag, based on the current cursor position.

  • Balance Braces: If your current cursor position is inside a <script> or <style> tag, clicking this button causes the innermost set of braces ( ) , { } , or [ ] to be selected. This also works inside external JavaScript and CSS files.

  • Line Numbers : Toggles the display of line numbers in the current document. If they're currently displayed, they'll be hidden, and if they're currently hidden, they'll display.

  • Highlight Invalid Code: If you enter tags that Dreamweaver doesn't like and you've chosen this option, your mistake will be highlighted in yellow. If you click in the highlighted area, the Property Inspector will tell you more about the error ( Figure 15.4 ).

    Figure 15.4. It's always a good idea to tell Dreamweaver to highlight invalid code, so you can see problems at a glance.

  • Apply Comment: The pop-up menu on this button gives several choices, each of which wraps comments around the selected text:

    Apply HTML Comment: Inserts <!-- and --!> before and after the selection (respectively).

    Apply /* */ Comment: Wraps this type of comment around the selected CSS or JavaScript.

    Apply // Comment: Inserts this type of comment at the beginning of each selected line of CSS and/or JavaScript.

    Apply' Comment: Inserts this type of comment at the beginning of each selected line of VBScript.

    Apply Server Comment: If you're working on a server-side file such as PHP, JSP, or ColdFusion, Dreamweaver automatically detects the file type and inserts the correct type of comment.

  • Remove Comment: Removes comment tags from the selected code.

  • Wrap Tag: Opens the Quick Tag Editor (described later in this chapter) allowing you to wrap a tag around the selection.

  • Recent Snippets: Allows you to insert a recently used snippet. Snippets are covered in Chapter 13: "Making Life Easier: Using Templates, Libraries, and Snippets."

  • Indent Code: Takes the selection and moves it to the right, based on your chosen indentation preference in the Code Format settings (covered in "Text Editing Tips," later in this chapter).

  • Outdent Code: Takes the selection and moves it to the left.

  • Format Source Code: From this popup, you can choose whether to apply formatting to the file as a whole, or to just the current selection. Whichever you choose will be formatted as set in the Code Format settings, which can also be accessed via this pop-up.

Tips

  • Some of these options can also be set from the View Options button on the Document toolbar ( Figure 15.5 ). There are a few extra ones there, also: Word Wrap, Hidden Characters, Syntax Coloring, and Auto Indent. Yes, this is different from the View Options button that you're used to in Design view; it changes its appearance based on whether you're in Design, Code, or Split view.

    Figure 15.5. The View Options button on the Document toolbar contains some very useful settings.

  • If you appear to be missing a button or two, don't fretyour document window may just be smaller than the Coding toolbar. If that's the case, you'll see a couple of downward- facing arrows at the bottom of the toolbar. Click on those arrows and the missing buttons appear off to the side ( Figure 15.6 ).

    Figure 15.6. If you have too many buttons for your screen size , you'll find they're still accessible once you learn where they're hiding.

  • If for some reason you don't like this toolbar and just want it to go away, you can do that just as you would with other Dreamweaver toolbars: choose View > Toolbars > Coding. And if you change your mind, that same command brings it back.

  • Dreamweaver opens files in Design view by default. If you want all your HTML files to open in Code view instead, open the preferences and choose the File Types/Editors category. In the "Open in Code View" text box, add a space followed by . html . You can add any other file types where you want to use Code view by default by adding those file extensions, too.


Layout for Coders (Windows only)

You may recall that way back in Chapter 1 we mentioned that you could choose between Designer layout and Coder layout. If you chose the latter, you might notice that your screen looks a little different than our screenshots. It's also possible that after using Code view for a bit, you decide that that's the way you want to work in the future, and so you decide to check out Coder layout. Figure 15.7 shows you what Figure 15.2 looks like if you change the layout by choosing Window > Workspace Layout > Coder ( Figure 15.8 ).

Figure 15.7. Coder layout is for those who want Dreamweaver to look as much as possible like HomeSite.


Figure 15.8. It's simple to switch from Designer to Coder layout, and back again.


If at some point you decide that not only do you just love Coder layout, but wish it had even more features for coders, check out the application HomeSite. Nope, we're not recommending that you buy something else, or even that you stop using Dreamweaver (far from it!). When you bought Dreamweaver 8 (or Studio 8), you also got a full-featured copy of HomeSite. Figure 15.9 shows the same file again in HomeSite, and you'll notice that it looks awfully similar to Coder layoutthat's because after Macromedia purchased HomeSite, they reworked their code tool based on HomeSite's functionality. Using HomeSite with Dreamweaver is covered later in this chapter (see "Using an External Editor").

Figure 15.9. And here's that same page again, this time in Macromedia HomeSite.


Sorry, Mac users: there's no version of HomeSite for the Mac.





Macromedia Dreamweaver 8 for Windows & Macintosh Visual QuickStart Guide
Macromedia Dreamweaver 8 for Windows & Macintosh
ISBN: 0321350278
EAN: 2147483647
Year: 2005
Pages: 239

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net