Using Dreamweaver as a Text Editor

[ LiB ]

The power of Dreamweaver has always been its close integration between visual and text-based editing. The program's built-in text editor, accessible through the Document window's Code view, or the Code portion of Code and Design view, or the separate Code Inspector panel, offers many features generally found only in dedicated text-editing programs. These include line numbers , word wrap control, syntax-based color coding, complex text searches using regular expressions, and several features adopted from HomeSite, such as code hints and tag completion. In addition, because the Dreamweaver text editor also is responsible for writing the code created when you work in Design view, it includes built-in source formatting and error-correction functions.

Accessing the Text Editor

You can access the Dreamweaver text editor from the main Document window by choosing Code view or Code and Design view. (For a full discussion of the Document window, see Chapter 2, "The Dreamweaver Workspace.") Alternatively, you can open the text editor in its own tabbed panel window by accessing the Code Inspector (choose Window > Code Inspector). All text-editing features work the same in both Code view and the Code Inspector. If you're short on screen space, you'll probably want to use Code view (or Code and Design view) in the Document window. If you have a dual monitor setup at your workstation, you might prefer to display the Document window, set to Design view, on one monitor and the Code Inspector, along with any other open panels, on the other monitor. Figure 27.1 shows Code view and the Code Inspector, side-by-side for comparison.

Figure 27.1. The Dreamweaver built-in text editor as it appears in Code view in the main Document window (top) and in the separate Code Inspector panel (bottom)

Code View Options and Preferences

Options for setting up the text editor's workspace can be found on the Code View Options menu, which is accessible from the View menu, the Document toolbar, or the Code Inspector toolbar (see Figure 27.2). Note that only choices made in the Code Inspector toolbar affect the display in that panel. Choosing from the Document toolbar or from the View menu affects only the Document window's Code view display.

Figure 27.2. Accessing the Code View Options menu from the Document toolbar and from the View menu.

Preferences for other aspects of code display can be found in various categories of the Preferences dialog box (select Edit > Preferences). Choices made here affect both Code view and the Code Inspector.

Setting Text Size and Font

By default, all text in the code editor is displayed in 10-point Courier New (Windows) or 10-point Monaco (Macintosh). Because this text is used only to display code in Dreamweaver, you can change the size/font to anything that suits you without affecting your files.

You might prefer to put your code in "large-print" format for easy onscreen reading without squinting. Or you might prefer to look at fonts other than Courier or Monaco. One bit of advice, however: Certain text-editing tasks , such as counting characters , are much easier to perform on monospaced fonts (such as Courier and Monaco) than on proportionally spaced fonts.

To change the text size or font of the code display, open the Preferences dialog box (select Edit > Preferences) and select the Fonts category, as shown in Figure 27.3.

Figure 27.3. Setting the text size and font in the Fonts dialog box.

Syntax Coloring

One of the most useful visual aids in text processing is syntax-based color coding. By setting certain code elements to certain colors, you can tell at a glance how a document is structured. Dreamweaver goes a step further, allowing you to set other styling attributes, such as bold, italic, and underlining, to differentiate different syntax elements. You also can specify different formatting options for different document types (HTML, PHP, JS, and so forth).

To turn syntax coloring (and styling) on or off, choose Code View Options > Syntax Coloring.

The Reference panel's context-based lookup works only if syntax coloring is on.

To customize which elements are assigned which color and styling, open the Preferences dialog box, and select the Code Coloring category (see Figure 27.4). Choose the document type whose styling you want to change, and click the Edit Coloring Scheme button. In the new dialog box that opens, choose any element from the list in the upper left; choose color and styling options from the options in the upper right. You can see how your changes will look in the preview area at the bottom of the panel, as shown in Figure 27.4.

Figure 27.4. Customizing the code coloring and styling in the Code Coloring dialog box and Edit Coloring Scheme dialog box.

Line Numbers

Line numbers are handy for finding exactly where something happens in the code. They're mostly useful for web pages that involve scripting, as an aid to debugging (see "Writing JavaScript in Dreamweaver," later in this chapter, for more on this). Dreamweaver reports and invalid-code warnings also use line numbers for identification.

To show or hide line numbers, choose Code View Options > Line Numbers.

Word Wrap (Soft Wrapping)

Wrapping means sending text to a new line. In text-processing terms, soft wrapping is something the text editor does on-the-fly to make the text fit in the window. The Dreamweaver code editor lets you view your code with or without soft wrapping. Viewing code that has no wrapping often involves a lot of sideways scrolling to read long lines. Not being able to see an entire line at a time can make it more difficult to understand what's happening in the code. On the other hand, code displayed without wrapping more accurately conveys a document's overall structure. Figure 27.5 shows the differences between code with and without soft wrapping.

Figure 27.5. An HTML code fragment shown with (top) and without (bottom) soft wrapping.

To turn soft wrapping on or off, choose Code View Options > Word Wrap. Note that if you work with line numbers showing, soft wrap doesn't affect line numbering because wrapping is a temporary visual convenience only. If you save a file created with soft wrapping on and then you open it in another editor, no soft wraps will have been saved as part of the file.

Auto-Indenting

Indenting lines of code to indicate nested elements is another way to make code more easily readable. Lines are indented by adding tabs or spaces. When you manually enter code into the Dreamweaver text editor, you indent your lines as you see fit. As you're typing, the Dreamweaver Auto-Indent feature automatically indents each new line to match the indent of the previous line. This is a handy timesaver if you're coding nested tags, where each tag's indent is based on the indent of the preceding tag.

To automatically indent each new line based on current indents, choose Code View Options > Auto-Indent.

Code Formatting Options

Although the Dreamweaver built-in code editor is in many ways comparable to other text-editing software, in one way it is unique. When you author in Design view, Dreamweaver writesand formatsthe source code for you. When you author in Code view, you are in charge of formatting your own source code. When you move freely between Code and Design view, you might write code that Dreamweaver will later edit and reformat . This is called applying source formatting. It's rather like having Mom looking over your shoulder as you work, tidying up after you, making sure you've indented properly, wrapped your text nicely , and so forth.

Dreamweaver (almost) never rewrites your code, but it will reformat it if you let it. Dreamweaver automatically applies source formatting to a page element whenever that item is edited from within Design view. You can force the program to apply source formatting to an entire document or to a selection within a document by choosing Commands > Apply Source Formatting or Commands > Apply Source Formatting to Selection.

Like Mom, this source formatting can be intrusive or helpful, depending on your point of view. You can turn the different aspects of source formatting on and off, and you can customize what kind of formatting is applied. Most of this customizing can be done in the Preferences dialog box, under the Code Format category, as shown in Figure 27.6. Some customizing requires tinkering with tag libraries (discussed later in this chapter).

Figure 27.6. The Preferences dialog box showing the Code Format category.

Automatic Text Wrap (Hard Wrapping)

Hard wraps are returns coded into the text using a carriage return (CR), line feed (LF), or both. As you're coding, every time you press Enter you're hard wrapping. Just as you might use soft wrapping to make your code more readable, some web authors like to insert manual (hard) returns into the code to force line breaks for easier readability. When Dreamweaver writes code for you (that is, when you're working in Design view), by default it adds hard wraps to avoid long lines of code. When you type your own code, you control the hard wraps by deciding when to press Enter. Even when you enter the code yourself, however, as soon as you edit it in Design view or choose one of the Apply Source Formatting commands, Dreamweaver takes over and adds its own hard wraps wherever it finds excessively long lines.

Hard wrap or soft wrap? If you rely on soft wrapping to display more-readable code, switching between wrapped and unwrapped views is as simple as turning Word Wrap on and off. If you rely on hard wrapping, your code's line breaks are fixed unless you manually remove them. In addition, although hard wraps do not affect how a document appears on the web, CRs and LFs are characters and take up file space. Long documents can take slightly longer to download if their coding contains many hard wraps.

To control automatic hard wrapping, select Preferences > Code Format. You see the dialog box shown in Figure 27.7. If the Automatic Wrapping option is disabled, no hard wraps will be added within a tag or text element, no matter how long the line becomes. If this option is enabled, you can specify how many characters Dreamweaver should allow in a line before it adds a hard wrap. Note that if you work with line numbers showing, hard wrapping affects the line numbers because it adds lines to the code. If you save a file created with hard wrapping on, and you open it in another editor, the hard wraps will still be there. They are part of the file.

Figure 27.7. The Code Rewriting dialog box.

To determine how hard wraps are encoded, select Preferences > Code Format and choose one of the Line Break options from the pop-up menu. This is important because different operating systems expect hard returns to be coded differently. Obviously, you want the web server where your pages will reside to recognize your hard wraps for what they are. If you will be uploading your pages using FTP set to ASCII Transfer mode, Dreamweaver takes care of this for you, coding each return character as needed based on the server's OS. If you will be uploading your HTML documents using FTP set to Binary mode, you must set the correct return character yourself before uploading.

Indenting

Do you like your code indented? How large an indent do you prefer? Do you want your indents to consist of tab or space characters? The controls in the Code Format dialog box determine how and when Dreamweaver indents your code during source formatting:

Indent or don't indent To turn indenting off completely, so that all new lines are flush left, deselect the Use option. Selecting the Use option enables all the other choices controlling indentation.
Tabs/spaces You can specify whether indents should be created from tab characters or multiple spaces. Generally, spaces are preferable unless you plan to import your text to a word processing program for eventual printing.
Indent size Determines how many spaces or tabs each indent will have.
Tab size Determines, in characters, how big each tab will be. (If you tell Dreamweaver to calculate your indents in tabs, and you set the indent size to 2 and the tab size to 3, each indent will be 6 characters wide.)

Case Control

Standard HTML browsers aren't case-sensitive when interpreting HTML. But any browser or other device that uses XML or XHTML validation is case-sensitive. In addition, many web authors prefer their code to be written consistently in one case (upper or lower).

To specify a case for code that Dreamweaver writes, in the Code Format dialog box set the Default Tag Case and Default Attribute Case (refer back to Figure 27.6).

To have Dreamweaver change the case of existing code during source formatting, choose one or both of the Override Case Of options.

Code Rewriting

Dreamweaver promises to never rewrite your code. Well, almost never. There are a few special circumstances when you might want a tiny bit of rewriting. They're all governed by the Code Rewriting dialog box (refer to Figure 27.7).

Fixing Invalid Code

Dreamweaver warns you about, and optionally tries to fix, any invalid code it sees. Invalid code consists mainly of incorrectly nested or closed tags, such as the following:

 <b><i>This is bad nesting! </b></i> <h1>I have too many tags!</h1></h1> <h6>I'm missing something...

To display or hide warnings for invalid code, choose Code View Options > Highlight Invalid HTML. (Note that this option governs only the various Code views. Dreamweaver always highlights invalid HTML in Design view.) To allow Dreamweaver to fix the invalid code, select Preferences > Code Rewriting and set the options as desired there (refer to Figure 27.7).

To exclude file types from error checking, go to the Code Rewriting dialog box and add the file extension to the Never Rewrite Code options list. Each new file extension must be separated from the others in the list by spaces on either side.

Dreamweaver performs its error checking, and optional error fixing, whenever a document is opened. If you have set your preferences to Warn When Fixing or Removing Tags, at this point Dreamweaver opens an alert window specifying any invalid code found and how it has been fixed. If you haven't turned the warning feature on, you won't even be aware that code is being rewritten.

Why would you want to turn warnings on? Although fixing invalid code is, in theory, a good thing, Dreamweaver isn't always perfect in determining what the desired valid code should look like. For instance, here's a segment of code with a missing </h1> tag:

 <html> <head> <title>My Page</title> </head> <body bgcolor="#FFFFFF" text="#000000">  <h1>  My Home Page <p>Welcome to my wonderful website.</p> </body> </html>

Where should the closing tag be inserted? Directly in front of the <p> tag, probably. Here's where Dreamweaver inserts it:

 <html> <head> <title>My Page</title> </head> <body bgcolor="#FFFFFF" text="#000000">  <h1>  My Home Page <p>Welcome to my wonderful website.</p>  </h1>  </body> </html>

This is definitely an occasion when author intervention is needed to correct the Dreamweaver error correction. Figure 27.8 shows the warning message that appears when Dreamweaver opens a document containing this code.

Figure 27.8. The Dreamweaver alert window listing invalid code that has been fixed in a document.

Note that the Dreamweaver alert window doesn't give you the opportunity to cancel the code rewriting. If you don't like any of the changes that have been made to your code, you can isolate them (by turning on line numbering in the code editor and using the line references from the alert message) and fix them, or you can just close the document without saving, and all changes are ignored. From there, either open the document in another text editor, or select Preferences > Code Rewriting and temporarily disable the rewriting features.

URL Encoding

By default, Dreamweaver also applies URL encoding to spaces and other nonstandard characters in URLs. A link to a page such as my page.html is written as my%20page.html . Dreamweaver applies this encoding automatically to any URLs as it notices them. If you enter the URL while working in Design view (for instance, entering it into the Property Inspector's Link field), the encoding is immediately applied in Code view. If you type in the URL while working in Code view, Dreamweaver doesn't apply the encoding until you switch to Design view and edit the URL (through the Property Inspector, for instance).

To control how, and whether, Dreamweaver encodes URLs, select Preferences > Code Rewriting and choose one of the following options for URL Encoding:

Do not encode special characters.
Encode special characters in URLs using &# This replaces the special character with an HTML entity if one exists &quot for an apostrophe, for instance.
Encode special characters in URLs using % This replaces the special character with an ASCII code, such as %20 for a space or %27 for an apostrophe.

Code Writing and Editing

In addition to helping you format your code for readability and display, the Dreamweaver text editor offers a variety of tools to make working with the code easier.

Editing Commands and Shortcuts

If you like working with code, presumably you like typing. A few commands on the Edit menu, each with its own keyboard shortcut, can keep you typing instead of reaching for the mouse while you work. Table 27.1 lists these commands.

Table 27.1. Code-Editing Commands

Command	Keystroke		Description
	Windows	Macintosh
Select parent tag	Ctrl+Shift+<	Cmd+Shift+<	Selects any tag completely nesting the current selection.
Select child	Ctrl+Shift+>	Cmd+Shift+>	Selects the first tag nested within the currently selected tag.
Indent code	Ctrl+]	Cmd+]	Increases the indent level of a selected line by one.
Outdent code	Ctrl+[	Cmd+[	Reduces the indent level of a selected line by one.

Code Hints

Code hints engages every time you type the opening characters of a tag, offering drop-down menus of possible tags, attributes, and even attribute values (see Figure 27.9). These hints aren't just for reference. You can navigate through and choose from any menu without moving your hands from the keyboard, for maximum efficiency. The main techniques for navigating the hint menus are as follows :

Figure 27.9. Code hints at work, presenting a menu of possible attributes for the `table` tag.

By default, the first item in the hint menu is selected. To move down or up in the list, use the arrow keys on the keyboard.
Menus containing lists of text items are arranged alphabetically . To jump to a particular place in the list, type the first letter of the item you want to select. Keep typing more letters to get closer to your desired selection.
Depending on the values expected for an attribute, different hint menus appear. If the expected value is a color, the color picker appears (use the arrow keys to navigate through the swatches). If the expected value is a relative file path , a menu containing only a browse option appears (press Enter to open a browse dialog box). If the expected value is unspecified text or a number, no code hint appears. Figure 27.10 shows the color palette code hint menu.

Figure 27.10. Using code hints to choose a color value for the bgcolor attribute.
To choose a selected item and have Dreamweaver enter it in your code for you, press Enter. The item is inserted, and the insertion point is positioned so that you can continue typing.

To configure code hints, select Preferences > Code Hints (see Figure 27.11). From here, you can enable or disable code hints. You also can configure the following aspects:

Figure 27.11. The Preferences dialog box showing the Code Hints category, which governs code hints and auto tag completion.

The Delay slider determines how quickly after you type the menus of code hints appear. With a delay of 0, each hint menu appears immediately. With a longer delay, the menus don't appear unless you stop typing for the specified number of seconds. If you don't like hint menus popping up all over the place, but you still want to take advantage of them the next time you get stuck or feel lazy, set the delay to a few seconds, and see how you like it.
The list of Menus determines which code hint menus appear. Do you want Dreamweaver to finish typing tag names for you, or just suggest attributes? Do you want suggestions for each attribute's value, where appropriate? To edit the contents of the hint menus, you can click the link to the Tag Library Editor. (For more on this, see the section "Tag Libraries and the Tag Library Editor" later in this chapter.)

Auto Tag Completion

Auto tag completion engages every time you type the opening tag of a pair, causing Dreamweaver to automatically type the closing tag, leaving the insertion point between the two tags. If you type <p> you get </p> , and the cursor is correctly positioned to type the text you want between the two tags, as shown in Figure 27.12. If you've ever forgotten to type that closing tag, and then wondered why your page wouldn't preview properly, this is the feature for you!

Figure 27.12. Auto tag completion at work, creating an italic section of a page heading.

To turn auto tag completion on or off, select Preferences > Code Hints, as shown in Figure 27.13.

Figure 27.13. The Snippets panel, part of the Code panel group .

Code Snippets

Snippets allow you to save frequently needed chunks of code and insert them into a document with a few mouse clicks. Snippets can be used to store anything from comments to formatting wrapped around a selection to entire tables and page layouts.

Using the Snippets Panel

Snippets are created, organized, and inserted using the Snippets panel, which is part of the Code panel group. Access this panel by choosing Window > Snippets, or by expanding the docked panel interface to view the Code panels and bringing the Snippets tab to the front. Figure 27.13 shows the Snippets panel in all its glory . Dreamweaver ships with a wide selection of snippets ready for you to use.

Inserting Snippets

You can insert a snippet into a document by dragging and dropping or by selecting the snippet and clicking the Insert button at the bottom of the panel. You will, however, want to investigate what code the snippet contains and how it will be inserted before trying to use it.

Inserting in Code View vs. Design View

Because a snippet can contain any portion of code, including incomplete tags and tags that must be nested inside other tags, not all snippets can be inserted everywhere. Some snippets can be inserted into Design view; others might require that you be in Code view before inserting. Some can be inserted as nested content inside tables or other tags; others may not. The Meta > No-Cache snippet, for instance, can be inserted only while Code view is active. If Code view is active, the snippet is inserted at the current insertion point, wherever that isregardless of whether the insertion point is in the head or the body section, or even in the middle of another tag. Obviously, you need to know where meta tags can and cannot go before using this snippet.

Inserting Block vs. Wrapped Snippets

Most snippets insert a single block of codea table, a set of form elements, a <meta> tag. Some snippets insert two blocks of code, wrapped around whatever you currently have selected when you insert them. You can use the various comment snippets, for instance, to "comment out" any selected page element by wrapping it in  comment tags. If nothing is selected when you insert a comment snippet, Dreamweaver inserts an empty pair of comment tags into your document.

Editing Snippets

Snippets are easy to edit. In the Snippets panel, either select a snippet and click the Edit button, or double-click the snippet itself, to open the Snippet dialog box, shown in Figure 27.14. You can change any snippet's name , description, or type (block or wrapped), as well as edit the code the snippet will insert. You can also determine how the snippet will be previewed within the Snippets panel.

Figure 27.14. The Snippet dialog box, for creating and editing snippets.

Nothing stops you from entering invalid code into a snippet. If you break one of the Dreamweaver default snippets by fiddling with its code, the only way to restore the undamaged snippet is by reinstalling Dreamweaver or tinkering around inside the Dreamweaver Configuration folder (another inherently dangerous activity).

Snippet Housekeeping

Snippets are organized in folders, some of which are nested inside other folders. You can rearrange this hierarchy as you like by dragging and dropping snippets and folders. You can rename snippets by editing them. You can rename folders by double-clicking them. You can even delete snippets or folders by selecting them and clicking the trash can icon at the bottom of the panel (refer to Figure 27.13)

Creating Your Own Snippets

The best feature of snippets is that you can easily create your own snippets, and even your own folders to store them in.

To create a new snippet folder, do the following:

If you want your folder to appear at the root level of the Snippets panel, start by deselecting any other folders in the Snippets panel. If you want your folder to be nested inside an existing folder, select that folder.
Click the Folder icon at the bottom of the panel (refer to Figure 27.13). Your new folder appears.
Name your folder! It's ready for action.

To create a new snippet, do the following:

(Optional) If you already have the chunk of code that the snippet should contain, open the document containing that code, and select it in Code view.
In the Snippets panel, select the folder you want to contain the new snippet, and click the New Snippet icon at the bottom of the panel (refer to Figure 27.13). Or right-click the folder and choose New Snippet from the context menu. This creates a new, untitled snippet and automatically opens the Snippet dialog box. If you had code selected, it appears in the Content field. Otherwise, type it in now. (You can't create an empty snippet!)
If you're creating a wrapped snippet (a snippet that inserts code before and after any selection), make sure the proper portions of code are in the Before and After fields.
Fill in all the other options of the dialog box, and click OK. Your snippet now appears in the Snippets panel and behaves just like any other snippet. You can insert it, edit it, delete it, move it aroundwhatever you like.

Exercise 27.1. Creating and Inserting Snippets

In this exercise, you'll create various block and wrapped snippets to make building generic forms easier. Start by downloading the chapter_27 folder from the book's website at www.peachpit.com to your hard drive, if you haven't done so already. Because this exercise works with invisible elements, choose View Options > Visual Aids, and make sure Invisible Elements are turned on before doing the exercise.

In the chapter_27 folder, open the generic_form.html file, and examine it in Code and Design view. You'll see that it contains a simple form with various personal information fields, as shown in Figure 27.15. Each form element is named and includes an accessible label. If you ever find yourself repeatedly creating forms that request miscellaneous personal information from users, turning this form into a series of snippets will streamline your workflow.

Figure 27.15. The generic_form.html document, in Code and Design view.
Open the Snippets panel (expand the Code panel group, or select Window > Snippets). You want to create a new folder to hold the snippets you'll create for this exercise. Make sure that no existing snippet folders are selected, and click the New Folder icon at the bottom of the panel. Name your new folder Personal Info Form , as shown in Figure 27.16.

Figure 27.16. Creating a Personal Info Form snippets folder in the Snippets panel.
To create a snippet for the First Name field, select the First Name label and its text field. You can make your selection in the Code or Design portion of the Document window, but make sure you select the complete label tag and the input tag!form field/label unit in the current document.

After you've made your selection, in the Snippets panel, select your Personal Info Form folder, and click the New Snippet button (or right-click the Personal Info Form folder and choose New Snippet). When the Snippet dialog box opens, your selected code appears in the Code section. Name the snippet First Name , enter a description, and set its type to Block. Figure 27.17 shows what your settings should look like.

Figure 27.17. Creating the First Name snippet from selected code.
Repeat this process to make snippets for the remaining form elements, including one snippet for the Reset Info and Submit Info buttons .
The final snippet you'll make contains the <form> tag that should enclose the other tags. Because this is a simple snippet, you can create it entirely in the Edit Snippets dialog box.

With no code selected, create a new snippet. Set the options to match those shown in Figure 27.18. This creates a wrapped snippet called Wrap Form, which contains any selected page contents in a <form> tag.

Figure 27.18. The Edit Snippet dialog box for the Wrap Form snippet.
It's time to try out those snippets to build a quick login page. In the chapter_27 folder, open the login_form.html file, and examine it. You'll see that it contains a simple table, ready to have some form elements inserted.

Place the insertion point in the first table cell , and insert the First Name snippet. Repeat this procedure to add the Last Name, Password, and Submit Buttons snippets to the other table cells . (Do you notice that the form elements look a bit different in this document than they did before? That's a bit of CSS at work. By redefining the label and input tags in any page where you use these form elements, you can customize how they look without having to alter each snippet individually.)
You need to wrap the entire login form in a form tag. Select the table, and insert the Wrap Form snippet. Figure 27.19 shows the completed login page.

Figure 27.19. The login_form.html page, with form elements in place.