Preparing Your Coding Environment
This chapter is from the book
This chapter is from the book
This chapter is from the book
Building Web applications is back-end work that focuses on coding. Now that you have a Web server and an application server, and you've set up a Dreamweaver site, it's time to set up your Dreamweaver coding environment before you start working directly with code.
As an experienced Dreamweaver user, you already know about Dreamweaver's document view options, which include Code, Design, and Split (Code and Design combined). While all three views can be useful when developing Web applications, you're likely to use Code view most often, because application development usually involves more work with code than with design.
Dreamweaver lets you do all your code work by hand or automate coding tasks with Dreamweaver's code tools. Some of these include Dreamweaver's Preferences; the Coding toolbar; Code Hints, which lets you insert code from a suggested list of options; Code Collapse, which lets you collapse sections of code so that you can more easily focus on the sections you're actively editing; and Code Snippets, which are blocks of code that you can store and reuse. You can also work with tags, the building blocks of any code language, in the Tag Selector, the Quick Tag Editor, the Tag Inspector, and tag libraries. In addition, Dreamweaver includes options for cleaning up and troubleshooting your code, as well as for validating your pages.
In this chapter, you'll learn how to access and use the many options you have for working with code in Dreamweaver, and how to configure your coding environment to support your own style of working with code.
Selecting Code View Options
Dreamweaver's Code view options are available only when the code is visible, either in Code view or Split view. You can set preferences for all your code, but you can also override these choices and use different options for a selection of code.
In addition to using Code or Split view for viewing code, you can use a separate coding window called the Code Inspector. The Code Inspector window is very similar to Code view, but you can use it to retain a fullscreen view of the Design window without having to split the available screen space between Code and Design views or view two different parts of the code at the same time.
The first step in selecting Code view options is to open a Dreamweaver document and choose Code or Split view.
To choose a Dreamweaver document view:
-
From the main menu bar, choose View > Code or View > Code and Design.
or
- On the Document toolbar, click the Code or Split button (
Figure 3.1
). (To display the Document toolbar if it is not visible, choose View > Toolbars > Document.)
Figure 3.1 The Code, Split, and Design view buttons on the Document toolbar.
)
To choose code viewing options:
- On the Document toolbar, click the View Options button (
Figure 3.2
); or, from the View menu, choose Code View Options.
Figure 3.2 The View options button and the Code View Options menu.
- Select any of the six options in this menu:
- Word Wrap wraps your code to a new line without inserting a line break and makes it easier to view your code without horizontal scrolling.
- Line Numbers displays line numbers to the left side of your code.
- Hidden Characters displays formatting marks in your code for spaces, tabs, and paragraph markers.
- Highlight Invalid Code adds yellow highlights to all invalid HTML code.
- Syntax Coloring adds color to code for each tag type.
- Auto Indent automatically indents code to the same level as the previous line when you press Enter (Windows) or Return (Mac) while writing code.
)
To make quick edits to a code selection:
- In the Code view, select some code and right-click (Windows) or Control-click (Mac) to open the contextual menu. Choose the Selection submenu (
Figure 3.3
).
Figure 3.3 Right-click in Code view to open the contextual menu and access the Selection submenu.
- Choose any of the options in the Selection submenu:
- Collapse and Expand options are for applying and removing Code Collapse, a Dreamweaver feature that collapses selected sections of code so that you can view as much or as little of the code as you choose. See "Using Code Collapse," later in this chapter, for more details.
- Comment options are for using comments in your code. You can use these options to add or remove different types of comments from lines of code in the selection.
- Tabs, Spaces, and Indent/Outdent options are for converting tabs to spaces, converting spaces to tabs, and indenting or outdenting the selected code.
- The Remove All Tags option removes any tags in the selected code.
- The Convert Lines to Table option wraps the selected code in a table tag.
- The Add Line Breaks option adds a br tag to the end of each line of code in the selection.
- Case-change options convert the entire selection to upper- or lowercase, or convert tags in the selection to upper- or lowercase.
)
To open the Code Inspector window:
- From the main menu, choose Window > Code Inspector, or press F10 (Windows) or Option-F10 (Mac).
The Code Inspector window appears on top of the current active document, allowing you to have a full-screen view of the Design window without having to split the available space between Code and Design views or to view two sections of the code at the same time (
Figure 3.4
).
Figure 3.4 Choose Window > Code Inspector to display the Code Inspector window.
- If you're editing a page that contains JavaScript or VBScript functions, you can click the Functions button on the Code Inspector toolbar to access the Functions menu (
Figure 3.5
). This menu enables you to jump to the code for any named function in your page.
Figure 3.5 The Functions menu can be used to access any named functions in your document.
)
)