17. Editing Code

Dreamweaver is what’s known as a WYSIWYG application; WYSIWYG is an acronym for “What You See Is What You Get.” Given Dreamweaver’s strengths as a design tool, why would anyone ever want to bother looking at code, much less editing it?

Believe it or not, there are people who purchase Dreamweaver who then spend most of their time in Code view. There are a number of reasons why; some of the more common we hear are:

• “It’s perfect for control freaks like me who just want to change that one character or move things one pixel.”

• “I learned tags before good WYSIWYG editors existed, so it’s faster for me to make changes this way.”

• “There are things I can do this way that can’t be done any other way in Dreamweaver.”

These are all perfectly valid reasons to want to use Code view (and there are plenty of other reasons). If you haven’t before, check it out. You might find that Code view works best for you, or that it’s useful when you simply want to tweak one small thing on your page.

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 17.1 shows a page in Design view, while Figure 17.2 shows the same page in Code view.

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

Figure 17.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 17.3). Let’s review its buttons, from top to bottom:

• 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 17.4).

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

Figure 17.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 15: “Making Life Easier: Using Templates, Libraries, and Snippets.”

• Move or Convert CSS: Here you can either convert inline CSS to a rule, or move CSS rules. CSS is covered in Chapters 5-7.

• 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 pop-up, 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.

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 17.10).

Figure 17.10. Split view is like training wheels for code—it 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 17.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 17.11. The View Options button has all of its choices visible when you’re in Split view.

Using the Quick Tag Editor

If you prefer Design view (as do most people who’ve bought a WYSIWYG editor, after all) but wish you could type a little bit of HTML now and then without switching back-and-forth between modes, there’s an answer: the Quick Tag Editor.

To use the Quick Tag Editor

1. With your page in Design view, put the cursor in the place where you wish to add a tag, or select the tag you wish to change, or select the element you wish to wrap a tag around.

2. Press Ctrl-T (for Mac users, Cmd-T).

or

Click the Quick Tag Editor button on the Property Inspector.

3. The Quick Tag Editor appears, in one of its three modes: Insert, Edit, or Wrap. In any of these modes, start typing, and the possible options appear in the code hints menu below.

Insert HTML: This mode allows you to place a new tag on the page (Figure 17.14).

Figure 17.14. With the Quick Tag Editor, you can easily insert a new tag on the page.

Edit tag: This allows you to modify an existing tag, either to change it or to add attributes to it (Figure 17.15).

Figure 17.15. The Quick Tag Editor also lets you edit existing tags.

Wrap tag: In this mode, you can wrap a new tag around an existing element (Figure 17.16).

Figure 17.16. And lastly, you can tell the Quick Tag Editor that you want to wrap a tag around existing page elements.

4. To accept your changes and leave the Quick Tag Editor, press Enter. To leave the Quick Tag Editor without making any changes, press Escape.

Using the Tag Editor

You’ve seen the Quick Tag Editor; now here’s the Tag Editor itself. It’s not really slower than the Quick version, and it’s handy for when you want more control than you can get in, say, the Property Inspector, but you don’t want to deal with actual HTML tags.

To use the Tag Editor

1. With your page in Design view, select an element where you wish to edit an existing tag. For instance, you can select an image, or the text of a link.

2. Right-click, and choose Edit Tag from the contextual menu.

or

Press Shift-F5.

or

From Dreamweaver’s menu, choose Modify > Edit Tag.

3. The Tag Editor dialog for that particular tag appears. Every tag has a custom dialog of its own with a variety of categories in the left column. Figure 17.17 shows the Tag Editor dialog for an <img> tag, while Figure 17.18 shows the Tag Editor dialog for an <a> tag. Make any desired changes.

Figure 17.17. The Tag Editor for images lets you modify every possible attribute and event.

Figure 17.18. The Tag Editor for the a tag allows you to change attributes and events for links.

4. Click OK when complete.

Using the Tag Chooser

If you’re beginning to think that there are a lot of different ways to insert elements into a Dreamweaver page, you’d be right—except that you haven’t even seen many of them yet. Here’s a tool you might not have run across yet—Dreamweaver’s Tag Chooser.

To use the Tag Chooser to insert tags

1. With your page in Code view, put the cursor into the section of the document that you want to add to or edit.

2. Right-click, and a pop-up menu of the available options appears. Choose Insert Tag (Figure 17.19). The Tag Chooser dialog appears (Figure 17.20).

Figure 17.20. The Tag Chooser lets you insert tags.

3. Click any of the icons or tag categories on the left side, and the matching tags will appear on the right.

4. Select one of the tags on the right, and click Insert. If the tag you chose contains angle brackets (< or >), it will be inserted into the page. Otherwise, a Tag Editor dialog appears, allowing you to enter the required information. For more about the Tag Editor dialog, see “Using the Tag Editor.”

5. When you are done with the Tag Chooser dialog, click Close.

To use the Tag Chooser to get tag information

1. With the Tag Chooser open (Figure 17.20), select a tag on the right side.

2. Click the Tag Info button that’s just above the Help button on the bottom left. The Tag Info reference area appears, along with useful information about the tag you selected (Figure 17.21).

Figure 17.21. Select a tag, click the Tag Info button, and Dreamweaver displays a reference guide to that tag.

or

Click the <?> button directly to the right of the Tag Info button. The same information appears, but in the Code Reference panel. For more information about the Code Reference panel, see “Using the Code Reference” later in this chapter.

Collapsing Code

If you’ve spent much time working with tags and code, you’ll often find yourself in a situation where you wish you could hide just some of it. Thankfully, that’s something you can do with Dreamweaver.

To collapse code

1. In Code view, select the code that you want to collapse (Figure 17.22). The simplest way to do this is to click somewhere inside the area, and then click the Select Parent Tag button on the Coding toolbar (Figure 17.3).

Figure 17.22. Select the code to collapse and then look for the vertical line on the left (on Windows, top; on Mac, bottom).

2. Just to the left of the code, you’ll see a vertical line that goes from the beginning of the selected area to the end. Windows users will see a white box with a minus sign on each end and Mac users will see two gray triangles, the top one facing down and the bottom one facing up. Click one of these endpoints, and the selected code collapses (Figure 17.23). You’ll now see the first part of the first line inside a highlighted box, plus a white box with a plus sign (Windows) or a right-facing gray arrow (Mac).

Figure 17.23. Click one of the icons on the endpoints of the line, and the selected text collapses to a single line.

or

Click anywhere inside the tag you want to collapse, and click the Collapse Full Tag button on the Coding toolbar.

or

Select the code you want to collapse, and click the Collapse Selection button on the Coding toolbar.

or

Click in a particular location on the page, and press the Alt (Option) key while clicking the Collapse Full Tag button on the Coding toolbar. This collapses everything but the full tag around your particular cursor position.

or

Select a segment of code, and press the Alt (Option) key while clicking the Collapse Selection button on the Coding toolbar. This collapses everything but the current selection.

or

Right-click inside a tag on the page, and choose Selection from the pop-up menu (Figure 17.24). From there, you can choose to Collapse Selection, Collapse Outside Selection, Collapse Full Tag, or Collapse Outside Full Tag.

Figure 17.24. You can also collapse code by right-clicking on the selection and choosing one of the collapse options.

To work with collapsed code

• Put your cursor over the highlighted box and a tip appears displaying all of the collapsed code (Figure 17.25).

Figure 17.25. If you want to know what’s collapsed, this tool tip gives you the info without actually expanding the code.

• Collapse a section of code if you need to move it from one area of the page to another. You’ll know that you’re moving exactly what you want to move and no more.

• If you collapse a section of code and then save and close the page, the next time you open the page that section will still show as collapsed.

To expand code

• Click the collapsed code symbol (the white box with a plus sign (Windows) or the right-facing gray arrow (Mac)) to the left of the code you wish to expand.

or

Double-click the highlighted box.

or

Click the Expand All button on the Coding toolbar, which expands all the collapsed code on the page.

or

Right-click on the page, and choose Selection from the pop-up menu (Figure 17.24). From there, you can choose to Expand Selection or Expand All.

Using Code Hints

When it comes to working with HTML, not all text editors are created equally—and Dreamweaver’s code hints are one reason why text editor fans will use its Code view rather than someone else’s garden variety notepad-like application.

To use code hints

1. Click anywhere on the page that you want to add a tag. Start a new tag by typing <, and the code hints appear in a pop-up menu (Figure 17.26).

Figure 17.26. Start typing and the code hints pop-up menu appears.

2. Type in the first character or two of the tag, and the code hints menu should change to reflect your typing (Figure 17.27). When the hinted value is the tag you want, press Tab.

Figure 17.27. As you continue to type, the code hints narrow down your choices.

3. To add an attribute to your new tag, press the spacebar and continue to type. The code hints pop-up menu will appear again, this time displaying just the valid attributes for that tag (Figure 17.28). Again, choose the one you want and press Tab to get the full attribute added to your tag.

Figure 17.28. Code hints work for attributes as well as tags.

4. If you select an attribute that needs to link to a file, the code hint changes to a Browse button (Figure 17.29). Click the button to browse to the file on your disk.

Figure 17.29. Code hints can tell you when the attribute needs a URL as its value.

5. If you want to add an attribute to an existing tag, click immediately after the tag name (for instance, right after the g in <img), press the spacebar, and the attributes available will display (Figure 17.30).

Figure 17.30. You can add an attribute to an existing tag—just click inside the tag and start typing.

6. To end a tag, type </, and the most recently opened tag will automatically be closed.

Using the Tag Inspector

If you prefer to stay in Design view but every so often you just want to tweak something, the Tag Inspector is one of the simplest ways to do so. Along with the Tag Editor and Quick Tag Editor (covered earlier), it’s a great way to modify existing tags, and it’s an easy way to get used to the attributes that exist for each tag.

To use the Tag Inspector

1. If the Tag Inspector currently isn’t displaying, choose Window > Tag Inspector from the menu.

2. If you’re in Design view, click on an element on the page, or choose a tag from the tag selector. If you’re in Code view, click anywhere inside a tag. The tag and its attributes appear in the Tag Inspector (Figure 17.32). Be sure the Attributes tab is selected.

Figure 17.32. The Tag Inspector can be found in the Attributes tab of the Tag panel. Here’s the Category view.

3. There are two ways to view the attributes in the Tag Inspector: by category or as a list.

• To view by category, click the Show Category view button . Categories can be open or closed; to open a closed category, click the + button (Windows) or the right-facing triangle (Mac). To close an open category, click the - button (Windows) or the downward-facing triangle (Mac). When open, the list of attributes that fall into that category are displayed.

• To view as a list, click the Show List view button . This choice displays all the tag’s attributes in an alphabetical list (Figure 17.33).

Figure 17.33. Or optionally, there’s also the List view, which shows all that tag’s attributes in alphabetical order.

4. You can now modify, add, or delete attributes. There are different ways to edit different types of attributes:

• If you’re adding or modifying an attribute with a value of a URL (Figure 17.34), you’ll see the Point to File icon and a browse button to the right of the entry field. Alternatively, you can type into the entry box, which is also the case for most attributes.

Figure 17.34. The standard Point to File and browse icons work the same way here as they do everywhere else in Dreamweaver.

• If your attribute has particular defined values, clicking in the value column displays a pop-up menu containing the valid values (Figure 17.35).

Figure 17.35. For those attributes that can only have certain values, Dreamweaver lets you know what those possibilities are.

• If the attribute contains a color, clicking on the small box in the value column brings up the standard color picker (Figure 17.36).

Figure 17.36. Instead of having to remember odd codes for colors, the color picker lets you choose the color you want.

5. There’s no OK or Accept changes button on the panel; simply clicking away from the attributes or off the panel implements your changes on your page.

Using the Code Reference

It’s often very handy to have a book close by when you’re first starting to work with code (we recommend HTML for the World Wide Web: Visual QuickStart Guide, by Elizabeth Castro (Peachpit Press), by the way). If you don’t happen to have a book nearby, don’t fret—Dreamweaver’s got several reference books built-in.

To open the Code Reference tab

• Right-click the element on the page that you have questions about, and select Reference from the pop-up menu (Figure 17.37). The Reference tab of the Results panel appears (Figure 17.38).

Figure 17.37. Picking Reference from this contextual pop-up menu displays the Reference tab of the Results panel.

Figure 17.38. The Reference tab can display material about HTML, CSS, JavaScript, and more.

or

Follow the directions in “Using the Tag Chooser,” earlier in this chapter.

or

From Dreamweaver’s menu, choose Window > Reference.

To insert code from the reference into your document

1. In the Reference tab, find the code fragment you want, click it once, and the entire fragment will be selected (Figure 17.39).

Figure 17.39. Click the code sample once, and it will be selected.

2. Right-click the selected text and choose Copy from the pop-up menu.

3. Paste the copied code into your document wherever you want it.

Validating Your Code

To validate your code is to make sure that it conforms to the W3C standards for whatever version of HTML or XHTML your page is in. There are a number of reasons for validating, but the most important is that if your page is valid, it’s more likely to render better in more browsers—an amazing number of the page display errors we’ve seen could have been solved by making the site validate before it was uploaded to a live server.

To validate your page

• From Dreamweaver’s menu, select File > Validate > Markup (Figure 17.40).

Figure 17.40. This menu lets you validate your pages.

or

Press Shift-F6.

or

Click the Validate Markup button on the Document toolbar. A pop-up menu appears; from it, choose Validate Current Document (Figure 17.41).

Figure 17.41. This menu lets you validate both pages and sites.

or

Click the green arrow in the top-left corner of the Validation tab of the Results panel. A pop-up menu appears; from it, choose Validate Current Document (Figure 17.42).

Figure 17.42. The Validate button on the Validation tab can also check your HTML.

The validation report appears in the Validation tab of the Results panel.

To use the validation report

1. After you validate your page (by one of the above methods), the validation report appears in the Validation tab of the Results panel, displaying all of the errors and warning messages your page has generated (Figure 17.43).

Figure 17.43. Validating this page resulted in a variety of different errors, messages, and warnings.

There are four types of messages:

Errors :These are things that you have to fix in order for your page to be valid.

Warnings :These are things you should look at, but they aren’t mandatory.

Nesting errors :This is still an error that has to be fixed, but it’s a specific type of error: it’s displayed when there’s a problem with nested tags. If an end tag wasn’t found to close an opened tag, or if an <img> tag didn’t end with a /> in an XHTML file, a nesting error would be shown.

Messages :These are less serious than warnings, but things that Dreamweaver still thinks you should know about. If your page is error-free, you’ll get a message saying so.

2. To go to the problem line, double-click the error, and focus shifts to that line in the document. If you were in Design view when you did this, you’ll be placed in Split view.

3. To get more information about an error, or just to see it in a reasonably sized font, select the error in the Validation tab and then click the More Info button on the left toolbar of the panel. A Description dialog appears (Figure 17.44). Click OK to close the dialog.

Figure 17.44. Clicking the More Info button gives you the error’s Description dialog.

4. If you want to view the full report, click the Browse Report button on the left toolbar. A browser window opens displaying each error, along with its category, description, line number, and file location (Figure 17.45).

Figure 17.45. Viewing the error report launches a browser and displays all the errors, warnings, and messages.

5. If you want to save the report for later, click the Save Report button on the left toolbar. You’ll then see the standard Save As dialog, prompting you to save a new XML file.

Using an External Editor

No matter how much you love Dreamweaver, there may be times when you want to use a different text editor. There are many possible editors you might use, but the two most common are Macromedia HomeSite (on Windows) and BBEdit from Bare Bones (on the Mac).

To use an external editor

1. In Dreamweaver’s preferences, go to the File Types / Editors category. You’ll see a dialog that looks like either Figure 17.46 (Windows) or Figure 17.47 (Mac).

Figure 17.46. With Windows, you can pick any text editor by browsing to it and selecting it.

Figure 17.47. You can do the same on the Mac, but it’s easier to just choose BBEdit.

2. If you’re on a Mac and you want to use BBEdit as your external editor, click the Enable BBEdit Integration button, and you’re done. Otherwise (on either platform), click the Browse button next to the External Code Editor text field, navigate to your application of choice, and click Open. Next, decide when you want to reload modified files, and when you want to save on launch. The choices for both are Always, Never, or Prompt.

3. Click OK to accept your changes.

4. To switch to your chosen editor, select Edit > Edit with HomeSite+ from Dreamweaver’s menu (Windows) (Figure 17.48) or Edit > Edit with BBEdit (Mac) (Figure 17.49).

Figure 17.48. There’s a new entry on this menu that lets you edit with your text editor of choice.

Figure 17.49. And the Mac menu shows BBEdit now, too.

If the application was closed, it will now launch, and the current page will open in the text editor and come to the front (Figures 17.50 and 17.51).

Figure 17.50. With both applications open in Windows, you can see both the code and the design.

Figure 17.51. And here they are side by side on the Mac.

5. If you’re in your chosen editor, and you want to switch back to Dreamweaver:

• In HomeSite: Click the Dreamweaver icon in the Editing toolbar (Figure 17.52).

Figure 17.52. To return to Dreamweaver, choose HomeSite’s Dreamweaver button.

• In BBEdit: Choose Markup > Misc > Dreamweaver (Figure 17.53).

Figure 17.53. BBEdit has Dreamweaver integration under its Markup menu.