|[ 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.
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.
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.
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.
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.
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.
To show or hide line numbers, choose Code View Options > Line Numbers.
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.
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.
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.
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).
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.
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.
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.)
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.
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).
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.
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.
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 " 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.
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.
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.
Select parent tag
Selects any tag completely nesting the current selection.
Selects the first tag nested within the currently selected tag.
Increases the indent level of a selected line by one.
Reduces the indent level of a selected line by one.
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 :
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.
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:
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 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!
To turn auto tag completion on or off, select Preferences > Code Hints, as shown in Figure 27.13.
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.
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.
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.
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.
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.
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.
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).
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)
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:
To create a new snippet, do the following:
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.
|[ LiB ]|