The Dreamweaver workspace consists primarily of a document representation and a number of panels, both by themselves and collected in panel groups [c2-1]. The document can be viewed in Design view, which approximates how a browser would render the Web page, or Code view, where the underlying source code is revealed. There is also a split window option to see both views at once a useful tool both for learning about what code Dreamweaver generates and for quickly selecting and modifying an element or tag on the page. Switch from one view to another by selecting your choice under the View menu (Code, Split, or Design) or by choosing one of the view buttons on the Document toolbar. Figure c2-1.One of the most useful features in Dreamweaver, the Tag Selector, is displayed at the bottom of the Document window. Select any text or object, and the associated tag will be shown at the far right of the Tag Selector; all previous tags in the code will then be shown to the left. The Tag Selector is often the quickest, surest way to select a specific page element [c2-2]. Figure c2-2.Exploring Panels and Panel GroupsThe panels and panel groups are quite flexible and can be easily adapted to suit the way you work. As the name implies, panel groups contain individual panels. You can open any panel whether it is currently onscreen or not by choosing its entry under the Window menu. You can also display onscreen panels or panel groups by clicking once on the name; clicking the name again closes the panel or panel group. Note I often find it helpful to concentrate on just one panel group. To maximize a panel group and simultaneously close all others double-click the panel group name. You can rearrange the panel groups, as well as most panels within them, to suit your workflow. To move a panel group outside of the docked area, drag the group by the far left edge of the title bar; this area, which appears to be a series of dots, is called the gripper, and you'll know you're in the correct position when your cursor becomes a four-headed arrow [c2-3]. You can drag panel groups or most individual panels so that they are either free-floating or docked. A heavy black border appears when a docking position is available. Figure c2-3.You can access any panel in a panel group by selecting its tab. To move a panel from one panel group to another or to isolate it you need to use the option menu, available on the right side of the panel group's title bar. From the option menu, choose Group PanelName With where PanelName is the current panel and then, from the submenu, select the panel group you'd like the current panel to move to. For example, if you wanted to combine the Reference and History panels, select the Options menu from the Reference panel and choose Group Reference With History. You can rename most panel or panel groups an option also available from the Options menu. To separate a panel from a panel group, select it and, from the Options menu, choose Group PanelName With New Panel Group. Although you'll find yourself using almost every aspect of Dreamweaver, the primary panel group used in building dynamic Web applications is, appropriately enough, labeled Application. In the Application panel group, you'll find four relevant panels: Note In Dreamweaver MX 2004, some panels are an integral part of a panel group and cannot be moved to another group or isolated. The Tag panel group contains three related panels: Attributes, Behaviors, and Relevant CSS. You cannot move or rename any of these individual panels or the panel group. You can, of course, close and reopen the panel group at any time.
In all of these Application panels, use Add (+) to insert an element and Remove (-) to delete a selection. You'll notice the Add (+) and Remove (-) controls throughout the Dreamweaver interface. Note Although ColdFusion components are an exciting technology, they are not backward-compatible with ColdFusion 5. The recipes in this book do not use ColdFusion components so that the applications are ColdFusion 5 compatible. Modifying Attributes with the Property InspectorThe Property inspector is perhaps the most important of all the panels; it certainly is among the most commonly used. The Property inspector is contextual; that is, it displays the attributes for whatever element is currently selected. A completely different Property inspector is shown depending on whether a table or a Flash movie is selected, for example. The default state in Design view shows the Text Property inspector with either standard font tag or CSS attributes; toggle between CSS and HTML modes by changing the Use CSS Instead of HTML Tags option found in the General category of Preferences (Edit > Preferences). In addition to numerous list and text fields, the Property inspector has several special function controls [c2-4]: Figure c2-4.
One interface control is especially important to building database-driven Web applications: the lightning bolt icon. Selecting the lightning icon gives the user access to the Dynamic Data dialog, which contains a list of recordsets, session variables, and any other data source available to the current page. The lightning bolt icon appears in various Property inspectors, but it is consistently available for any attribute in the Tag panel which can be used as an alternative to the Property inspector. Unlike the standard Property inspector, the Tag panel displays all the attributes for a selected tag, not just the most commonly used ones [c2-5]. Figure c2-5.Adjusting PreferencesThe final stop in our brief tour of the Dreamweaver environment is the Dreamweaver Preferences. When you open Preferences by choosing Edit > Preferences (Dreamweaver > Preferences on OS X), a large dialog with many options is displayed [c2-6]. On the left of the dialog is a series of categories; select any category to change related options. There are 20 different categories in Dreamweaver that allow you to control any aspect of the authoring environment and the program's output. Figure c2-6.Rather than explain every option in Preferences, I'd like to focus on a few that are especially important to Web application building. For more information on any preference not discussed here, context-sensitive help is available for every category. Dynamic Web applications are decidedly code-intensive, and I'm sure some would argue that they should, in fact, be code-exclusive. Wherever you stand on the code to design spectrum, you'll greatly appreciate the flexibility and power that Dreamweaver provides in Code view. There are numerous categories in Preferences that deal with code in some way:
Help me <i>help <b>you</i></b>
Help me <i>help <b>you</b></i> A number of the categories in the Dreamweaver Preferences will help you develop Web applications in Design view as well as Code view. The Invisible Elements category is a key one that enables you to see representations of unrendered Web page objects, like HTML comments [c2-7]. The Invisible Element symbols allow you to easily copy or cut and paste such tags and code in the Design view. Two Invisible Elements are applicable to dynamic pages: Visual Server Markup Tags and Nonvisual Server Markup Tags. When these options are enabled, server-side code blocks inserted in the <body> of the document are displayed as a symbol. Select the symbol, and you can either quickly find the highlighted code in Code view, or select Edit from the Property inspector to modify the code while in Design view. Figure c2-7.You might also notice another pertinent setting on the Invisible Elements category. Dynamic text data embedded on the page is, by default represented in curly braces showing both the recordset and data source field, like this: {employees.firstname} Note I recommend initially selecting all the options in the Invisible Elements category. If necessary, you can remove them all from view on a page at one time by unchecking View > Visual Aids > Invisible Elements. The same option is also available from the toolbar under the View Options button. Depending on the design, such representations might make it difficult not to distort the layout; if so, you can change the option so that dynamic text is represented only by a pair of curly braces, without interior text. Another Preferences category is worth mentioning in this context: Highlighting. To differentiate certain objects or regions at design time, Dreamweaver highlights them, either with a surrounding border or a background color. For example, by default, an editable region in a template is enclosed in a light-blue border, while third-party tags use the same color as their background. All of the color choices used in highlighting are customizable from the Highlights category; you can also decide whether you want to show the highlights. Two entries in the Highlights category are useful when creating Web applications, both of which are concerned with Live Data view: Untranslated and Translated. When you're in Live Data view, Dreamweaver fetches data according to your recordset and integrates it, temporarily, with the page. Dreamweaver can provide a direct replacement for a single record in an untranslated portion of Live Data view. If your data is within a repeat region, the remainder of the records must be shown in a translated area. I recommend keeping both of these options selected because it differentiates what's really on the page and what's only there during translation. You can turn both of them off by deselecting View > Visual Aids > Invisible Elements. Setting Up a New SiteMost frequently, the first task when building a Web site in Dreamweaver, whether static or dynamic, is to define a new site. For static sites, the least you need to do for a site definition is to name the site and to designate a folder that acts as the local site root. Many developers also define their remote site initially so that they can transfer the files via FTP or to a networked staging server. The remote site can be defined at any time. Dynamic sites also require that a testing server be declared. In Dreamweaver, a testing server is a particular server model (ASP VBScript, ASP JavaScript, PHP MySQL, or ColdFusion, for example) accessible through a specific folder, which could be located on a local or remote system. You can define a site in one of two ways, both of which start by choosing Site > Manage Sites. A list of current sites is displayed in the Manage Sites dialog, along with a New button. Selecting New gives you an option of creating a site or defining an FTP or Remote Development Service (RDS) server connection. Choose New Site to display the Site Definition dialog. If you're relatively new to Dreamweaver, select the Basic tab of the New Sites dialog to use a wizard-like approach to defining your site. If you're more familiar with Dreamweaver, the Advanced tab uses a series of categories similar to those in the Dreamweaver Preferences. Warning Dreamweaver MX 2004 makes it possible to work without creating a site by defining a direct server connection. This feature is useful for existing Web sites, but defining a site is critical to developing applications, especially if templates are used as they are throughout this book. Defining a site is highly recommended. Let's walk through a basic setup of a site using the Advanced option of the Site Definition dialog. For the purposes of this example, I'm going to assume we're setting up a dynamic site for the Recipes project, using ASP with VBScript on a local system running IIS; in this situation, we'll assume the remote site will be set up later.
With the Dreamweaver site set up, you're ready to start creating pages for your Web application. Note It's a good idea at this point to choose Export from the Manage Sites dialog and store your site definition in a secure location. If you ever need to restore the site, select Import and locate the definition file. Creating New Dynamic PagesDreamweaver is capable of authoring a wide range of Web-related documents. Anything from HTML, with either standard or XHTML syntax, to dynamic ColdFusion components is feasible in Dreamweaver. To handle this enhanced output capability, Macromedia introduced a new method of creating pages through the New Document dialog. The New Document dialog allows you to create new files of a variety of types as well as documents based on templates. Let's look at how you create blank pages for your Web application first.
If you're working with Dreamweaver templates, you can also use the New Document dialog to create new files based on specified templates. Template-derived documents are useful in Web applications because often it's only the dynamic elements that change from one page to the next. Templates give you a solid design on which to build and, more importantly, any updates to a template are reflected on all the documents derived from that template. Note The recipes in this book were developed using standard HTML, conforming to the 4.01 Transitional doctype as established by the W3C. Note If you're creating several pages for your application, you can set Preferences to use a keyboard shortcut to create a blank page of any file type. In the New Document category, select the desired dynamic page type from the Default Document Type list and then clear the Show New Document Dialog on Ctrl-N (Command-N) option. Let's say you've copied the Recipes template files from the Web Site to the Templates folder in your local site root. To create a document based on one of those templates, follow these steps:
Note A complete discussion of templates is beyond the scope of this book. For more information on creating templates, consult Help > Using Dreamweaver or a good reference such as the Dreamweaver MX Bible by Joseph Lowery or Inside Dreamweaver by Laura Gutman. Advanced template use is also covered in Joseph Lowery's Beyond Dreamweaver and Dreamweaver MX Templates by Brad Halstead and Murray Summers. Binding Data to the PageYour site is defined, and you've created a dynamic page. It's time to add some dynamic content! Most dynamic content comes from a declared recordset. As discussed in Chapter 1, "Basic Principles of Data Source Design," recordsets are created by SQL statements and consist of a portion of the data within the connected data source. Dreamweaver provides two alternative dialogs for creating recordsets, in addition to hand-coding: one simple and one advanced. You open both by choosing Add (+) from the Bindings panel or Server Behaviors panel and selecting Recordset (Query) from the menu. As the name implies, the simple view of the Recordset dialog is fairly basic. On the plus side, it allows you to create recordsets without writing SQL; on the other hand, you're restricted to working with a single table or view, one filter, and one level of sorting. Let's walk through the process of creating a simple recordset; the end goal of the example is to get a list of all the first and last names of the employees in the Recipes data source. Note Make sure you understand how to create a data source connection before continuing. If you're unclear, see the "Connecting to Data Sources" section of Chapter 1. Note Before you undertake these next steps, you'll need to have defined at least one connection using the procedure outlined in the previous chapter.
After defining a recordset, you'll see all the available data source fields in the Bindings panel by expanding the recordset tree. To add dynamic text to the page, drag a data source field directly onto the page from the Bindings panel. Alternatively, position your cursor where you would like the dynamic text to appear and select Bind from the Bindings panel. With either technique, the dynamic text appears on the page like this: {Employees.EmployeeFirst} After inserting the dynamic text, you can see the data it represents by choosing View > Live Data. In Live Data view, the first data from the first record of your recordset is displayed [c2-13]. Figure c2-13.The Bindings panel also controls the server-side formatting of the dynamic text elements. Unlike HTML or CSS formatting, server-side formatting is used to uppercase or lowercase text and show numbers as currency, integers, or percents. To change the format of a dynamic text element, first select the element on the page. Then, in the Bindings panel, select the down-pointing arrow to open the Format list and select an appropriate format from the list. Stirring in Server BehaviorsServer behaviors are Dreamweaver's powerful mechanism for supplying server-side functionality with point-and-click ease. As with Dreamweaver's client-side JavaScript behaviors, server behaviors allow users to output sophisticated code by choosing their parameters from a series of dialog boxes. Unlike the standard behaviors, server behaviors create different code depending on the current server model. Many Web applications need to accomplish basic tasks such as inserting, updating, and deleting records. Dreamweaver includes around 30 server behaviors, covering the most common functionality. (The number of server behaviors varies slightly from one server model to another.) All the server behaviors applied to a page appear in a single list in the Server Behaviors panel; to modify an inserted server behavior, double-click its entry in the panel. To see how server behaviors work, let's look at one of the most commonly used types: Repeat Region. When dynamic text is inserted on the page, it represents a single record from the recordset. To display multiple records, the dynamic text and whatever elements you also want to repeat, such as a table row or a line break are enclosed in a Repeat Region. With the Repeat Region server behavior, you can opt to show a specific number of records at a time or all of them. Here's how you apply a Repeat Region:
Dreamweaver places a border around the selected area with a tab to indicate the Repeat Region. One way to see the results is to preview the page in a browser; another way is to use Dreamweaver's Live Data view. Note Although most of the server behaviors are identical in terms of their user interface and usage, several differ from one server model to the next. For example, the Insert Record server behavior is different for ASP and for ColdFusion. Where the procedure for applying a server behavior is different, you'll find the recipe steps presented separately, separated by server model. For similar server behaviors, the steps are given together with individual code clearly marked for each server model. Editing in Live Data ViewIncorporating dynamic data into a Web page often requires significant adjustment to the page design. With Dreamweaver's Live Data view, you can continue to modify your design while viewing the actual data from a recordset. Moreover, Dreamweaver includes a number of ways to pass parameters to the recordset for testing purposes. There are two ways to enter Live Data view. You can either choose View > Live Data or select Live Data View from the Document toolbar. In either case, the Live Data toolbar appears as Dreamweaver sends a request to the testing server and receives, in return, the data from the recordset. You might notice the letter d in the toolbar spinning to indicate that the data retrieval is in process. The first record retrieved is inserted into the corresponding dynamic text fields; if a Repeat Region server behavior is being used, data from the next records are added up to the limit of the Repeat Region. If the Invisible Elements option is enabled, the records will appear to be highlighted [c2-15]. Figure c2-15.When you're in Live Data view, you can continue to work on the page, adjusting spacing, table cell widths, or whatever. You can also format the dynamic data. Select the data representing the initial dynamic text elements to add formatting; you cannot select the repeated elements in a Repeat Region. To see applied client-side formatting, such as CSS or <strong> tags, in all the repeated data, select Refresh from the Live Data toolbar; server-side formatting, like making the text uppercase, is applied automatically, if the Auto Refresh option on the toolbar is selected. Often a recordset or other elements in a Web application depend on arguments passed to the page. There are two basic ways of passing arguments: attached to the URL in what's known as a query string or as entered through a form. Dreamweaver's Live Data view can emulate both methods of argument passing. A query string is a series of name/value pairs following a question mark at the end of a standard URL. In this example, http://localhost/Recipes/employeelist.asp?ID=34 the query string passed to the employeelist.asp page is ID=34, where ID represents the name of a field and 34 is the value. Additional name/value pairs can be added by using an ampersand, like this: http://localhost/Recipes/employeelist.asp?employeeFirst=Joseph&employeeLast=Lowery If a recordset on your page is filtered on a URL parameter, you can use the Live Data toolbar to try different arguments. When you're in Live Data view, enter the name/value pairs, separated by ampersands in the URL Argument field of the Live Data toolbar. After pressing Enter (Return), Dreamweaver retrieves the requested data and integrates it on the page. The URL Argument field works great for query strings, but you'll have to use the Live Data Settings dialog to enter parameters expected from a form. Open the dialog by choosing View > Live Data Settings or by choosing Settings from the Live Data toolbar. The Live Data Settings dialog also uses name/value pairs; choose Add (+) to add an entry under the Name and Value columns. To emulate form data, enter the name of the form field in the Name column and the value entered under Value. For forms, you'll also need to make sure the Method is set to POST rather than GET. If you'd prefer not to write out the query string, you can use the Live Data Settings dialog in place of the URL Argument field by changing the Method to GET [c2-16]. Figure c2-16. |