Setting up your workspace

With Adobe Dreamweaver CS4 you can set up the coding environment to suit your workflow. You can change the way you view code, configure different keyboard shortcuts as well as import your favorite or custom tags libraries.

Using the workspace switcher (located on the Application bar) you can choose from four workspaces that will provide you with a rich coding experience (see Figure 1):

• Application Developer
• Application Developer Plus
• Coder
• Coder Plus

Figure 1. Dreamweaver CS4 workspaces

All of the workspaces listed above show the Dreamweaver Code view by default and include panels that will be docked on the left-hand side of the screen. In addition the Application Developer, Code, and Coder Plus workspaces will remove the Property inspector from the default view.

If none of the default workspaces hits the right note, don't worry. With Dreamweaver CS4 you can create your own layout by opening and docking panels where you want them and then save the workspace as a custom workspace.

To choose a coding workspace:

1. Launch Dreamweaver if you haven't done so already.
2. Download the code_exercise_files.zip archive that accompanies this article.
3. Extract the files and copy them to the a folder on your local computer.
4. Create a new site definition called DWCS4 Workspace. (For help with this task refer to Working with Dreamweaver sites.)
5. Select Window > Workspace Layout.
6. Select the desired coding workspace (Application Developer, Application Developer Plus, Coder, or Coder Plus).

To create a custom workspace:

1. Arrange the Dreamweaver panels to suit your requirements.
2. Choose Window > Workspace Layout.
3. Select New Workspace.
4. Enter the name for your new workspace and click OK.

Viewing code

Dreamweaver offers a variety of ways to view your source code: Enabling the Code view can display it in the Document window, splitting the Document window can display both the page and the associated code. Using the Code inspector you can display the code in a separate window.

If, like me, you have been working with Dreamweaver for many years you will know that displaying both the page and the code in the same document window is something that we have been able to do for many years. Nothing new there I hear you say. However, many Dreamweaver users (myself included) now have dual workstations, which can be configured to split applications across multiple monitors. Only having the option of spliting the design and code horizontally, prevented us from being able to take advantage of this dual screen functionality. To address this limitation, Adobe Dreamweaver CS4 includes the ability not only to split the design and code (or just code) vertically (see Figure 2), but also enables you to choose whether you are lefty or righty whether you want the design on the right (the default) or the left hand side of the screen(s).

Figure 2. Dreamweaver vertical split view

This seemingly minor feature is incredibly useful, especially if you are working with large documents and when working in Code view.

• To split the document vertically, choose View > Split Vertically.
• To specify that the Design is over on the left hand side of the screen, choose Design View on Left.
• To split the code vertically choose View > Split code.

Working with the Related Files toolbar

Let's face it, the days of building web pages that consist of a single file is a dim and distant memory. To create a website that adheres to modern standards web designers and developers use a combination of CSS, JavaScript, as well as a whole host of other file types. In the past just keeping track of all these (never mind editing them) could be a laborious task. To simplify modifying all the documents that are associated with your web page(s) Dreamweaver provides the Related Files toolbar feature (see Figure 3).

Figure 3. The Related Files toolbar

To open a related file from the Related Files toolbar, located at the top of the document:

• Click the file name of the related file you want to open.
• Right-click the file name of the related file you want to open and select Open as Separate File from the context menu. (Note: When you choose this option, the main document does not remain simultaneously visible.)
• When working in the Code view, click on the Source Code button in the related Files toolbar to return to your source code.

Note: If for some reason you cannot see the Related Files toolbar, choose Edit > Preferences > General, select Enable Releated Files and click OK.

Code Navigator

Have you ever wished that you had a way to easily find and edit all the code sources that affect your current selection such as CSS, server-side rules, and external JavaScript functions? If the answer is an emphatic "Yes!" then you are going to love the Dreamweaver Code Navigator, shown in Figure 4.

Figure 4. Code Navigator

In Dreamweaver CS4, if you place your insertion point on a line or in an area that you know is affected by a related file, you will notice a ships wheel icon appear. This is the Code Navigator indicator and believe me when I say that this is something you are going to find indispensable. The Code Navigator (also available by pressing Ctrl+Alt+N [Windows] or Cmd+Option+N [Mac OS X] as well as on the context menu), enables you to see more information and modify a particular CSS property in both the currently open web page or any other external file that is associated with this document.

To inspect a CSS property using the Code Navigator:

1. Alt-Click (Windows) or Command+Option-Click (Mac OS X) anywhere on the page. The Code Navigator displays links to the code affecting the area you clicked.
2. Click the CSS property, server-side include, or JavaScript function you want to inspect.

The Code Navigator groups related code sources by file and lists the said files alphabetically.

Note: If you hover over links to CSS rules, the Code Navigator displays tool tips of the properties in the rule. These tool tips are extremely useful when you want to distinguish between the many rules that share the same name.

Click a CSS rule in the Code Navigator and Dreamweaver will display that rule in Split view. Click a rule that is an external file and Dreamweaver opens the file and displays the rule in the Related Files toolbar.

Using Live view

As well as being able to edit all the files that are related to web pages, you are definitely going to want to see what the page will look like once all the associated files have been rendered and executed. To do this you can turn to the Dreamweaver Live view. Unlike the traditional Dreamweaver Design view, Live view provides you with a non-editable, more realistic rendering of what your page will look like in a web browser without having to leave the Dreamweaver workspace. This is a great feature since it guarantees that once you are in Live view Dreamweaver won't manipulate your code in any way.

To enable Live view:

1. Make sure that you are in Design view or Code and Design view.
2. Click the Live View button.
3. If you have made changes in Code view or in a related file, click the refresh button in the Document toolbar or press F6 on your keyboard.
4. To return to the editable Design view click the Live View button again.

Using Live Code view

Historically, one pain point that many coders experienced is that Dreamweaver didn't provide any way of seeing what the code was going to look like once the page had been rendered in a web browser. Typically developers would end up having to preview the page in a web browser, take a snap shot of the code (in using view source) and then bring that code back into Dreamweaver so that they could see the way the code was behaving.

When activated Live Code view, enables you to see changes made by JavaScript within your code as they happen in real time. When working with Spry or other JavaScript frameworks, your CSS styles can be changed via JavaScript based on user interaction with an element such as hovering over it. Using the Live Code view, you can hover over any element causing the CSS style name to be dynamically applied, enabling you to pinpoint it in the code. By pressing F6, you can also freeze the code in its current state. Once frozen you can then use the CSS Styles panel to select the specific CSS style to edit it. Using the Code Navigator you can also view the entire path through the DOM (Document Object Model).

When used together, Live Code view and Code Navigator provide an incredibly powerful set of tools enabling you to track down and modify code effortlessly.

Externalzing code

When developing your websites, you probably want to keep all your code (CSS, JavaScript, Spry and so on) in the pages that you are working on. Having the code at your finger tips whilst you are building is perfectly understandable as it makes it both more managable and easier to debug. However, once you have finished developing your code you are probably going to want to follow best practices and pull all your CSS, JavaScript, and other behavior (such as Spry attributes) out of the page and externalize it.

Separating your Behavior (JavaScript and Spry) and Presentation (CSS) from the page structure has a number of benefits. For example, including large amounts of JavaScript in your pages can affect the ranking of your pages with various search engine. Secondly, (as is the case with CSS) it also makes it much harder to reuse the same code on multiple pages. In short moving your CSS and behavior code is consider best practice and where possible you should always try to do this.

Moving CSS code is incredibly straightforward if you are working in either Design or Code view.

1. In the CSS styles panel select the rule or rules you want to move.

2. Right-click the selection and select Move CSS Rules from the Context menu. To select multiple rules, Control-Click (Windows) or Command-Click (Mac OS X) the rules you want to select.

   In Code view, select the rule or rules you want to move, right-click the selection and choose CSS Styles > Move CSS Rules from the context menu.

3. In the Move To External Style Sheet dialog box, select the new style sheet and click OK.
4. In the Save Style Sheet File As dialog box, enter a name for the new style sheet and click Save.

Note: If you are just working in Code view, you can also move the CSS rules using the Coding toolbar.

Extracting JavaScript

Adobe Dreamweaver enables you to extract all or most of the JavaScript from your Dreamweaver document, export it to an external file, and link the external file to your document.

To use the JavaScript Extractor:

1. Open the page that contains the JavaScript.
2. Select Commands > Externalize JavaScript.

3. The Externalize JavaScript dialog box offers you two choices (see Figure 5):

   • Only externalize JavaScript: Select this option if you want Dreamweaver to move any JavaScript to an external file, and to reference that file in the current document. This option leaves event handlers such as onclick and onload in the document, and leaves Behaviors visible in the Behaviors panel.
   • Externalize JavaScript and attach unobtrusively: Select this option if you want Dreamweaver to move JavaScript to an external file and reference it in the current document, and remove event handlers from the HTML and insert them at runtime using JavaScript. (Note: When you select this option, you can no longer edit Behaviors in the Behaviors panel.)

   

   Figure 5. The Externalize JavaScript dialog box

4. In the Edit column deselect any edits you do not want to make or select the edits that Dreamweaver did not select by default.

5. Click OK.

   The summary dialog box provides a summary of extractions. Review the extractions and click OK.

6. Save the page.

Note: For more information on extracting JavaScript from your pages refer to Extract JavaScript in Dreamweaver Help and Understanding unobtrusive JavaScript in Dreamweaver CS4.

Getting code hints

Dreamweaver code hints offer a quick and error-free way to write and edit your code. In either Code view or the Code inspector, they parse what you type and automatically display a menu of appropriate tags, attributes, function parameters, or object methods. Dreamweaver supports code hinting for the following languages and technologies:

Code hints are fully customizable and extensible for custom tags and objects. Code hints are available for several kinds of code. To use code hints :

1. Type a start typing bracket (<) for HTML tag names. If you are coding JavaScript you would type a period (dot operator) to display a list of tags or functions and objects
2. Scroll down the list and double-click the desired item to insert it.
3. If the item supports attributes or additional objects, press the spacebar to display a list of valid attributes. Select an attribute and press Enter.
4. Type the value for the attribute; if the attribute takes only a certain value, select a value from the list of allowed values.

You can now continue to add more attributes, parameters values, objects, and methods by repeating steps 3 and 4. When working with markup just make sure that you don't press the spacebar between a value and its quotes ("). Press Escape to close the list.

Use the code hints to edit existing code in Code view by placing the insertion point, for example, to the left of the tag's end bracket of a markup tag and pressing the Spacebar. This displays a list of the tag's supported attributes. To style a page with code hints and CSS classes:

1. Start by adding the desired custom styles to an external style sheet or add them to the HEAD section of your web page.
2. Having inserted the first part of your tag (for instance, the paragraph tag), press the spacebar and select Class from the menu.

3. Press Enter (or Return) to display all the classes you've previously created, as shown in Figure 6.

   

   Figure 6. JavaScript code hinting

4. After you have selected the desired class, simply press Enter (or Return).

To insert additional JavaScript objects or methods, simply enter period (.). Dreamweaver automatically introspects any libraries you include on a page and displays all the methods and properties that are associated with that object.

Balancing tags and brackets

Dreamweaver offers a great way for you to check whether your tags are correctly balanced—that is, have matching start and end tags—in the form of two commands: Select Parent Tag and Select Child Tag. These are useful when working with multiple levels, such as a nested table layout scheme. To select a parent tag:

1. Position the insertion point inside the nested code you want to check.
2. Choose Edit > Select Parent Tag.

This highlights the enclosing matching tags in Code view. If you continue to select this command, and your tags are properly balanced, Dreamweaver CS4 will eventually highlight the outermost <html> and </html> tags in your code.

Using the Reference panel

Dreamweaver CS4 comes with a comprehensive set of built-in reference information, including the following books:

• Adobe CF Function Reference
• Adobe ColdFusion Markup Language reference
• O'REILLY ASP Reference
• O'REILLY ASP.NET Reference
• O'REILLY CSS Reference
• O'REILLY HTML Reference
• O'REILLY JavaScript Reference
• O'REILLY JSP Reference
• O'REILLY PHP Pocket Reference
• O'REILLY SQL Language Reference
• O'REILLY XML in a Nutshell
• O'REILLY XSLT Reference
• UsableNet Accessibility Reference

You can access the Reference panel in either Design or Code view, as well as the Code inspector.

When working in Design view, clicking on a tag in the Tag Selector and then clicking the reference button opens the panel and displays information about the tag you selected. When working in Code view or the Code inspector, do the following:

1. Select a tag, attribute, or keyword.
2. Right-click (Windows) or Control-click (Mac OS X) and choose Reference from the context menu (alternatively, press Shift+F1).

Adjust the size of the text in the Reference panel by clicking on the small arrow at the top-right of the panel (see Figure 7). The Reference panel is also linked to the Accessibility Reports. Selecting an entry in the Results panel and clicking the Info button will automatically display the WAI (Web Accessibility Guideline) guideline for the currently selected problem.

Figure 7. Reference panel

Page 2 of 4

Previous Page

Next Page