Getting Started

Familiarize yourself with Dreamweaver MX visual design, hand-coding, and application development tools by creating a simple but functional website.

This part contains the following chapters:

  • Introduction
  • Creating Your First Website in Dreamweaver
  • Editing code in Dreamweaver
  • Understanding Web Applications
  • Developing a Web Application in Dreamweaver MX
  • Installing a Web Server in Windows
  • Setup for Sample ColdFusion Site
  • Setup for Sample ASP.NET Site
  • Setup for Sample ASP Site
  • Setup for Sample JSP Site
  • Setup for Sample PHP Site
  • Troubleshooting Database Connections


Introduction

This guide is designed to introduce you to using Macromedia Dreamweaver MX if you’re unfamiliar with any major aspect of it. The lessons in this guide lead you through the process of creating a simple but functional website.

Macromedia Dreamweaver MX is a professional HTML editor for designing, coding, and developing websites, web pages, and web applications. Whether you enjoy the control of hand-coding HTML or prefer to work in a visual editing environment, Dreamweaver provides you with helpful tools to enhance your web creation experience.

The visual editing features in Dreamweaver let you quickly create pages without writing a line of code. If you prefer to code by hand, however, Dreamweaver also includes many coding-related tools and features. And Dreamweaver helps you to build dynamic database-backed web applications using server languages such as ASP, ASP.NET, ColdFusion Markup Language (CFML), JSP, and PHP.

Note: This guide is not a comprehensive manual for all of the features of Dreamweaver MX, nor is it an introduction to web design. For more detailed information about Dreamweaver, see Dreamweaver Help (choose Using Dreamweaver from the Help menu).
Next


Learning Dreamweaver basics

To begin learning to use Dreamweaver, start with this Getting Started guide (see How to use this guide). Then proceed to other resources, such as the tutorials, the help system, and the Support Center (see Other resources).


How to use this guide

The guide is divided into several chapters. You can read the chapters in order, or you can read the rest of this introduction and then start with the chapter that best suits your interests and experience. Within each chapter, we recommend following the lessons in order; the order of the lessons is designed to roughly imitate a common workflow for creating a website.

The following list describes each chapter’s contents:

  • This introduction explains how to install Dreamweaver and introduces the Dreamweaver workspace. Read this chapter first; then read whichever of the other chapters interests you most.

    • Note: Many aspects of the workspace have changed in this version of Dreamweaver, so you may want to read this introduction even if you’ve used Dreamweaver before.

  • Creating Your First Website in Dreamweaver is for people who have created web pages but have never used Dreamweaver before. It shows you the basics of how to create a small but functional static website using Dreamweaver’s visual authoring tools.
  • Editing code in Dreamweaver is aimed primarily at hand-coders (such as Macromedia HomeSite users), but it is also for anyone who has used visual tools and would like to start editing code. It shows you the basics of using Dreamweaver’s code-editing tools.
  • Understanding Web Applications provides conceptual background about web applications.
  • Developing a Web Application in Dreamweaver MX is aimed at anyone who has created static pages before (whether using Dreamweaver or not) and would like to learn to create database-driven web applications using Dreamweaver. It guides you through the process of building a simple web application.
  • A set of setup instructions provide information on installing a web server and on setting up dynamic sites using various server languages.
  • A set of tutorials provide detailed instructions on accomplishing some common tasks.

The lessons in this guide use page layouts and sample content provided with Dreamweaver. If you’d prefer to create your first Dreamweaver site using your own layouts and content instead, you can do so, but the lessons are easier to follow if you use the sample content provided.


Other resources

Dreamweaver includes a variety of resources to help you learn the program quickly and become proficient in creating your own websites and pages. These resources include the following:

  • A set of tutorials provide further lessons on particular topics, giving more information in specific areas than the rest of the Getting Started guide.
  • Dreamweaver Help includes comprehensive information about using all aspects of Dreamweaver, as well as an HTML version of Getting Started and the tutorials. Dreamweaver Help is displayed in the help viewer provided by your operating system: Microsoft HTML Help (Windows) or Apple Help (Macintosh).
  • Using Dreamweaver is a PDF version of the contents of Dreamweaver Help (excluding Getting Started and the tutorials), providing information on using Dreamweaver commands and features. Certain reference topics are not included in the PDF version; for information on those topics, see Dreamweaver Help. The PDF file is available on your Dreamweaver CD.

In addition, you can find regularly updated tips, TechNotes, examples, tutorials, and information, at the Dreamweaver Support Center.

For more information about informational and instructional resources for Dreamweaver, see Learning Dreamweaver.


Typographical conventions

The following typographical conventions are used in Dreamweaver Help:

  • Menu items are shown in this format: menu name > menu item name. Items in submenus are shown in this format: menu name > submenu name > menu item name.
  • Code font indicates HTML tag and attribute names as well as literal text used in examples.
  • Italic code font indicates replaceable items (sometimes called metasymbols) in code.
  • Bold roman text indicates text for you to enter verbatim.


Installing and running Dreamweaver

This section describes the system requirements for running Dreamweaver (see System requirements) and explains how to install Dreamweaver (see Installing Dreamweaver). It also explains how you can customize Dreamweaver to suit your own preferences in a multiuser operating system such as Windows XP or Mac OS X (see Using Dreamweaver in a multiuser environment).


System requirements

The following hardware and software is required to run Dreamweaver.

System requirements for Microsoft Windows:
  • An Intel Pentium II Processor or equivalent, 300 MHz or faster
  • Windows 98, Windows 2000, Windows NT (with Service Pack 3 or later), Windows ME, or Windows XP
  • Version 4.0 or later of Netscape Navigator or Microsoft Internet Explorer
  • 96 MB of available random-access memory (RAM) (128 MB recommended)
  • 275 MB of available disk space
  • A 256-color monitor capable of 800 x 600 pixel resolution (millions of colors and 1024 x 768 pixel resolution recommended)
  • A CD-ROM drive
System requirements for Apple Macintosh:
  • A Power Macintosh G3 or later
  • Mac OS 9.1, Mac OS 9.2.1, or Mac OS X 10.1 or later
  • Mac OS Runtime for Java (MRJ) 2.2 or above (included on the Dreamweaver MX CD)
  • Version 4.0 or later of Netscape Navigator or Microsoft Internet Explorer
  • 96 MB of random-access memory (RAM) (128 MB recommended)
  • 275 MB available disk space
  • A 256-color monitor capable of 800 x 600 pixel resolution (millions of colors and 1024 x 768 pixel resolution recommended)
  • A CD-ROM drive


Installing Dreamweaver

Follow these steps to install Dreamweaver on either a Windows or a Macintosh computer.

Note: In certain operating systems, you can install or uninstall Dreamweaver only if you have administrative privileges on your computer. For more information, see Using Dreamweaver in a multiuser environment.

To install Dreamweaver:
  1. Insert the Dreamweaver CD into the computer’s CD-ROM drive.
  2. Choose from the following options:
    • In Windows, choose Start > Run. Click Browse and choose the Dreamweaver MX Installer.exe file on the Dreamweaver CD. When the Run dialog box appears, click OK to begin the installation.
    • On the Macintosh, double-click the Dreamweaver MX Installer icon.
  3. Follow the onscreen instructions.
  4. If prompted, restart your computer.


Using Dreamweaver in a multiuser environment

In a multiuser operating system such as Windows NT, Windows 2000, Windows XP, or Mac OS X, applications are generally installed into a folder from which all users can run them, such as C:\Program Files (Windows) or the Applications folder (Macintosh). Only users with administrative privileges can install applications into such folders in a multiuser operating system.

You can customize Dreamweaver in many ways. Dreamweaver prevents any user’s customized configuration from affecting any other user’s customized configuration. To accomplish this goal, the first time you run Dreamweaver in one of the multiuser operating systems that it recognizes, the application creates copies of a variety of configuration files for you. These user configuration files are stored in a folder belonging to you.

Note: In older operating systems (Windows 98, Windows ME, and Mac OS 9.x), a single set of Dreamweaver configuration files is shared by all users, even if the operating system is configured to support multiple users.

If you reinstall or upgrade Dreamweaver after installing Dreamweaver MX, Dreamweaver automatically makes backup copies of existing user configuration files, so that if you’ve customized those files by hand, you still have access to the changes you made. For information about customizing configuration files by hand, see “Customizing Dreamweaver” on the Macromedia Support Center.

When you uninstall Dreamweaver from a multiuser system, Dreamweaver can remove each user configuration folder for you.


Registering Dreamweaver MX

To get additional Macromedia support, it’s a good idea to register your copy of Macromedia Dreamweaver MX, electronically or by mail.

When you register, you can sign up to receive up-to-the-minute notices about upgrades and new Macromedia products. You can also sign up for timely e-mail notices about product updates and new content appearing on both the www.macromedia.com and the www-euro.macromedia.com websites.

To register Macromedia Dreamweaver MX, do one of the following:
  • Choose Help > Online Registration and fill out the electronic form.
  • Choose Help > Print Registration, print the form, and mail it to the address shown on the form.


A first look at the Dreamweaver workspace

In Windows, Dreamweaver MX provides two workspace layouts to choose between: an all-in-one-window integrated layout and a floating layout much like that of Dreamweaver 4.

On the Macintosh, only the floating layout is available.

This section explains how to choose an initial workspace layout in Windows (see Choosing a workspace layout (Windows only)). This section also describes the primary elements of the workspace in both Windows and Macintosh (see Windows and panels overview and Menus overview).


Choosing a workspace layout (Windows only)

In Windows, the first time you start Dreamweaver, a dialog box appears that lets you choose a workspace layout. If you change your mind later, you can switch to a different workspace using the Preferences dialog box.

This is a picture of the feature being described.

To choose a workspace layout:

Select one of the following layouts:

Dreamweaver MX Workspace is an integrated workspace using MDI (Multiple Document Interface), in which all Document windows and panels are integrated into one larger application window, with the panel groups docked on the right. Recommended for most users.

Note: Most of this guide assumes that you’re using the integrated Dreamweaver MX workspace.

Dreamweaver MX Workspace, HomeSite/Coder-Style is the same integrated workspace, but with the panel groups docked on the left, in a layout similar to that used by Macromedia HomeSite and Macromedia ColdFusion Studio, and with Document windows showing Code view by default. Recommended for HomeSite or ColdFusion Studio users and other hand-coders who want a familiar workspace layout. To choose this layout, select the Dreamweaver MX Workspace option, then select the HomeSite/Coder-Style option.

Note: You can dock panel groups on either side of the workspace in either of the integrated workspace layouts.

Dreamweaver 4 Workspace is a workspace layout similar to the one used in Dreamweaver 4, with each document in its own separate floating window. Panel groups are docked together, but are not docked into a larger application window. Recommended only for Dreamweaver 4 users who prefer to use a more familiar workspace.


Windows and panels overview

The following are brief descriptions of the windows and other elements in Dreamweaver’s workspace. Some specifics on how to use these windows appear later in this guide; for more detailed information, see Dreamweaver Help (Help > Using Dreamweaver).

This is a picture of the feature being described.

The Welcome window provides tips on setting up your workspace for various purposes, and information on new features for those who have used previous versions of Dreamweaver.

The Insert bar contains buttons for inserting various types of “objects,” such as images, tables, and layers, into a document. Each object is a piece of HTML code that allows you to set various attributes as you insert it. For example, you can insert an image by clicking the Image icon in the Insert bar. If you prefer, you can insert objects using the Insert menu instead of the Insert bar.

The Document toolbar contains buttons and pop-up menus that provide different views of the Document window (such as Design view and Code view), various viewing options, and some common operations such as previewing in a browser.

The Document window displays the current document as you create and edit it.

The Property inspector lets you view and change a variety of properties for the selected object or text. Each kind of object has different properties.

Panel groups are sets of related panels docked together under one heading. To expand a panel group, click the expander arrow at the left of the group’s name; to undock a panel group, drag the gripper at the left edge of the group’s title bar.

The Site panel allows you to manage the files and folders that make up your site. For more information, see Set up a local site. It also provides a view of all the files on your local disk, much like Windows Explorer (Windows) or the Finder (Macintosh).

Dreamweaver provides many other panels, inspectors, and windows not shown here, such as the History panel and the Code inspector. To open Dreamweaver panels, inspectors, and windows, use the Window menu.


Menus overview

This section provides a brief overview of the menus in Dreamweaver.

The File menu and Edit menu contain the standard menu items for File and Edit menus, such as New, Open, Save, Cut, Copy, and Paste. The File menu also contains various other commands for viewing or acting on the current document, such as Preview in Browser and Print Code. The Edit menu includes selection and searching commands, such as Select Parent Tag and Find and Replace, and provides access to the Keyboard Shortcut Editor and the Tag Library Editor. The Edit menu also provides access to Preferences, except on the Macintosh in Mac OS X, where Preferences are in the Dreamweaver menu.

The View menu allows you to see various views of your document (such as Design view and Code view) and to show and hide various kinds of page elements and various Dreamweaver tools.

The Insert menu provides an alternative to the Insert bar for inserting objects into your document.

The Modify menu allows you to change properties of the selected page element or item. Using this menu, you can edit tag attributes, change tables and table elements, and perform various actions for library items and templates.

The Text menu allows you to easily format text.

The Commands menu provides access to a variety of commands, including one to format code according to your formatting preferences, one to create a photo album, and one to optimize an image using Macromedia Fireworks.

The Site menu provides menu items to create, open, and edit sites, and (on the Macintosh) to manage files in the current site.

The Window menu provides access to all of the panels, inspectors, and windows in Dreamweaver.

The Help menu provides access to Dreamweaver documentation, including help systems for using Dreamweaver, creating extensions to Dreamweaver, and reference material for a variety of languages.

In addition to the menu-bar menus, Dreamweaver provides many context menus, which give you easy access to useful commands pertaining to the current selection or area. To display a context menu, right-click (Windows) or Control-click (Macintosh) an item in a window. All items in context menus can also be found in menu-bar menus.


View the sample site

The examples used in this guide are drawn from a small sample site for a fictional company called Global Car Rentals. Before beginning the lessons, view the sample site in a browser to get an idea of what you’ll be creating as you work through the lessons.

To view the sample site in a browser:
  1. Open the Samples folder in the Dreamweaver application folder. Then open the GettingStarted folder, then the FinalSite folder.
  2. Double-click the index.htm file in the FinalSite folder to view the site in a browser.
  3. When you’re done viewing the sample site, proceed to whichever chapter of this guide interests you the most.
Previous


Creating Your First Website in Dreamweaver

This chapter provides a series of brief lessons that guide you through the process of creating a simple static website using the visual authoring tools in Macromedia Dreamweaver MX. For information on using the hand-coding tools in Dreamweaver, see Editing code in Dreamweaver; for information on creating a database-driven dynamic web application, see Understanding Web Applications.

The order of lessons in this chapter follows one possible workflow for creating a site. When creating your own sites, you can follow whatever workflow is most comfortable for you.

To create a static website:
  1. Plan and prepare (see Set up a local site and Add assets to your site).
  2. Create pages (see Create and save a new page).
  3. Lay out and set up the pages (see Adjust the layout and Set a page title).
  4. Add content to your pages (see Add styled text and Add images).
  5. Link pages together (see Add text links between pages and Create rollovers for graphical links).
  6. Publish your site (see Preview in browser and Set up a remote site, then publish).
Next


Set up a local site

The most common approach to creating a website using Dreamweaver is to create and edit pages on your local disk, and then upload copies of those pages to a remote web server to make them publicly available. It’s possible to use Dreamweaver in other ways (such as running a web server on your local computer, or uploading files to a staging server, or using a mounted disk as if it were your local disk), but the lessons in this guide assume that you’re working locally and then uploading to a remote server.

In Dreamweaver, the word site is used as shorthand to refer to any of the following things:

  • A website: a set of pages on a server, to be viewed by a visitor to the site using a web browser.
  • A remote site: the files on the server that make up a website, from your (the author’s) point of view rather than a visitor’s point of view.
  • A local site: the files on your local disk that correspond to the files in the remote site. You edit the files on your local disk, then upload them to the remote site.
  • A Dreamweaver site definition: a set of defining characteristics for a local site, plus information on how the local site corresponds to a remote site.

Normally, you would start creating a website by planning it: figuring out how many pages to create, what content appears on each page, and how the pages are connected to each other. In this lesson, though, the site you’re creating is a very simple one, so it doesn’t take much planning: it will consist of only two web pages, with links between them. So for this site, you can skip the planning, and proceed to creating a site definition.

You’ll create a site definition using the Site Definition dialog box. You can fill in this dialog box in either of two views: Basic or Advanced. The Basic approach guides you through site setup step by step. If you’d rather edit site information without guidance, you can click the Advanced tab at any time.

The following procedure describes how to set options in the Basic version of the dialog box, which is also known as the Site Definition Wizard. For details of how to set options in the Advanced version, click the Advanced tab and then click the Help button.

To define a site:
  1. Choose Site > New Site. (That is, choose New Site from the Site menu.)

    2. The Site Definition dialog box appears.

  2. If the dialog box is showing the Advanced tab, click Basic.

    3. The first screen of the Site Definition Wizard appears, asking you to enter a name for your site.

  3. In the text box, enter a name to identify the site within Dreamweaver. The name can be anything you want. For example, you could name the site Global Car Rental.
    This is a picture of the feature being described.
  4. Click Next to proceed to the next step.

    5. The next screen of the wizard appears, asking if you want to work with a server technology.

  5. Select the No option to indicate that for now, this site is a static site, with no dynamic pages.
    This is a picture of the feature being described.

    6. To set up a site to create a web application, you would need to choose a dynamic document type—such as Macromedia ColdFusion, Microsoft Active Server Pages (ASP), Microsoft ASP.NET, Sun JavaServer Pages (JSP), or PHP: Hypertext Preprocessor (PHP)—and then supply information about your application server (For more information, see Developing a Web Application in Dreamweaver MX).

  6. Click Next to proceed to the next step.

    7. The next screen of the wizard appears, asking how you want to work with your files.

  7. Select the option labeled “Edit local copies on my machine, then upload to server when ready (recommended).”

    8. There are a variety of ways that you can work with files during site development, but for the purposes of this lesson, choose this option.

  8. The text box allows you to specify a folder on your local disk where Dreamweaver should store the local version of the site’s files. It’s easier to specify an accurate folder name if you browse to the folder rather than typing the path, so click the folder icon next to the text box.

    9. The Choose Local Root Folder for Site dialog box appears.

  9. In the Choose Local Root Folder for Site dialog box, start by navigating to a folder on your local disk where you can store all of your sites. Don’t click OK yet.

    10. Note: This sites folder will eventually contain multiple sites, so don’t choose the sites folder as the local root folder. You will soon create a local root folder for this particular site inside the sites folder.

    If you don’t already have a sites folder, create one now (using the folder-creation button in the Choose Local Root Folder for Site dialog box). Name the folder Sites. The recommended location for the sites folder depends on your operating system:

    • In Windows, if you don’t already have a place to store sites, create a folder at the top level of your C drive, and name the folder Sites. That is, the path to the folder is C:\Sites.
    • In Mac OS 9, if you don’t already have a place to store sites, create a folder at the top level of your disk drive named Sites.
    • In Mac OS X, your home folder (/Users/your_user_name) contains a folder named Documents. Navigate to that folder, and create a folder named Sites inside it.
  10. Still in the Choose Local Root Folder for Site dialog box, create a new folder inside your Sites folder. Name the new folder GettingStarted, and click OK to dismiss the Choose Local Root Folder for Site dialog box.

    11. This new folder is the local root folder for your site.
    This is a picture of the feature being described.

  11. Click Next to proceed to the next step.

    12. The next screen of the wizard appears, asking how you connect to your remote server.

  12. For now, choose None from the pop-up menu. Click Next to proceed to the next step.

    13. The next screen of the wizard appears, showing a summary of your settings.

  13. Click Done to finish.

    14. You can set up information about your remote site later (see Set up a remote site, then publish); for now, the local site information is all you need to start creating a page.

    An alert appears to tell you that Dreamweaver will create a site cache. The site cache is a way for Dreamweaver to store information about the site, to make various site operations faster.

  14. Click OK to allow Dreamweaver to create the site cache.

The Site panel now shows the new local root folder for your current site, and an icon to let you view all of your local disks in a hierarchical tree view. The icon is labeled Desktop (Windows) or Computer (Macintosh).

This is a picture of the feature being described.

The Site panel normally shows all the files and folders in your site, but right now your site doesn’t contain any files or folders. When there are files in a site, the file list in the Site panel acts as a file manager, allowing you to copy, paste, delete, move, and open files just as you would on a computer desktop.

If you already have a set of local HTML files that you want to use to create a website, you can use the file browser in the Site panel to copy those files into your newly created site’s folder. However, you may want to complete the lessons in this guide using the files provided with Dreamweaver before you start using your own files.

If you already have a website on a remote server and you want to edit that site using Dreamweaver, see Editing existing websites in Dreamweaver.


Add assets to your site

After creating a local site, if you have already created assets (images or other pieces of content) for the site, place the assets in a folder inside the local site’s root folder. Then when you’re ready to add content to your pages, the assets will be ready to use.

The images and text files for the Global Car Rental site are provided with Dreamweaver. If you’re creating the Global Car Rental pages, you must copy the images for the site into your site’s local root folder. You can do this using the Site panel.

The assets are inside a folder called Design. For simplicity and consistency with the rest of this Getting Started guide, you’ll copy the entire Design folder into your site, then work inside that folder.

To copy a folder of images into your site’s local root folder:
  1. If the Site panel isn’t already open, open it by choosing Window > Site.

    2. The Site panel appears. (If the Site panel was already open, it may not appear at this step. If the Site panel does not appear, choose Window > Site again to display it.)

  2. In the Site panel, expand the Desktop (Windows) or Computer (Macintosh) icon to see your available disks.
  3. Expand folders as necessary to reach the Dreamweaver application folder.
  4. Expand the Samples folder.
  5. Expand the GettingStarted folder in the Samples folder.
  6. Select the Design folder in the GettingStarted folder and press Control+C (Windows) or Command+C (Macintosh) to copy it.

    7. The Design folder contains a folder named Assets, which contains various assets related to the site, including an images subfolder.

  7. Still in the Site panel, scroll to your site’s local root folder (the folder that you created when you defined the site) and select that folder. Then press Control+V (Windows) or Command+V (Macintosh) to paste a copy of the Design folder into your site.


Create and save a new page

Now that your site is set up, you can create web pages to populate it.

When you started Dreamweaver, a blank HTML document was automatically created. Before you proceed, close that document.

To close the default blank document:

Choose File > Close.

To create a new page:
  1. Choose File > New.

    2. The New Document dialog box appears.
    This is a picture of the feature being described.

  2. In the category list on the left, select the Page Designs category.

    3. The list in the middle column of the dialog box is relabeled Page Designs. A list of pre-designed page designs appears.

  3. Scroll down in the Page Designs list and choose the item named Text: Article D with Navigation.

    4. Note: There is another item with a similar name. Be careful not to choose the item named Text: Article D, which has no navigation bar.

    A small preview of the page appears on the right side of the dialog box.
    This is a picture of the feature being described.

    If you prefer, you can create a page using any of the other provided page designs, or create a page with no preset design by choosing an item from the Basic Page category. The rest of this lesson assumes that you’re using the Text: Article D with Navigation page design.

  4. Make sure the Document radio button is selected at the lower right of the dialog box.
  5. Click Create.

    6. A new page appears, using the layout you chose, in a new Document window. The page is filled with placeholder “Lorem ipsum” text to show how the page design will look when real text is added to it.
    This is a picture of the feature being described.

  6. Save your document.
To save your new page:
  1. Choose File > Save.
  2. In the Save As dialog box, browse to the Design folder inside the site root folder.

    3. Reminder: the site root folder is the folder you created when you set up the site in Set up a local site.

  3. Enter the filename index.htm.
  4. Click Save.

    5. The filename now appears in the title bar of the Document window, in parentheses, after the words “Untitled Document.”


Adjust the layout

The predesigned pages provide a starting point, but they’re unlikely to exactly match the layout you need for your own pages.

To modify the layout of a page, use Dreamweaver’s layout tools. This guide touches on some of the tools, but for more information, see Presenting Content with Tables, Laying Out Pages in Layout View, and Animating Layers.

First, remove the layout elements that you don’t need. To create the Global Car Rental page layout, remove several unnecessary tables and cells. See Remove unnecessary elements.

Then add image placeholders and adjust the widths of table columns (using Dreamweaver’s Layout view) to make everything fit nicely. See Add an image placeholder and Make a column autostretch.


Remove unnecessary elements

In any predesigned page design, there are likely to be elements that you don’t need for your final page. You can select such elements and delete them.

If you’re creating the Global Car Rental page, the following elements in the standard page design are unnecessary:

  • Two of the navigation links at the top of the page
  • The title and header area above the main text column
  • A small box next to the title in the sidebar column
  • The copyright bar at the bottom of the page

The general procedure for removing an element is to select it and then to press Backspace (Windows) or Delete (Macintosh). The following procedures show how to select and delete each unnecessary element. When you’re done, check to make sure you’ve removed everything you intended to remove, then save the document.

To remove unnecessary navigation links:
  1. Choose View > Table View > Standard View to ensure that you’re viewing tables in Standard view.
  2. In the document’s navigation bar, drag from the table cell with the “Sic Amet” link to the table cell with the “Consectetur” link.
    This is a picture of the feature being described.

    3. Both table cells are highlighted to indicate that they’re selected.

  3. Press Backspace (Windows) or Delete (Macintosh).

    4. The table cells are removed. The other table cells (the “Lorem,” “Ipsum,” and “Dolor” links) automatically expand to fill the width of the table.

To remove the unnecessary text-column title:
  1. At the top of the text columns, click the word Title.
    This is a picture of the feature being described.
  2. In the tag selector at the bottom of the Document window, click the leftmost <table> tag, the one that appears immediately to the right of the <body> tag. (If you can’t see the <body> tag in the floating workspace, widen the Document window.)
    This is a picture of the feature being described.
  3. Press Backspace (Windows) or Delete (Macintosh) to remove the table containing the title.

    4. Note: There are two <table> tags in the tag selector, because the title area is a table nested inside another table. In this case, you should delete the outer table, indicated by the leftmost <table> tag.

To remove the unnecessary box in the sidebar header:
  1. In the right column, to the left of the word News, click in the box containing the exclamation point.
    This is a picture of the feature being described.
  2. In the tag selector, click the rightmost <td> tag to select the box around the exclamation mark.
    This is a picture of the feature being described.
  3. Press Backspace (Windows) or Delete (Macintosh).
To remove the unnecessary copyright bar:
  1. Scroll to the bottom of the page. Click anywhere in the copyright bar at the bottom.
  2. In the tag selector, click the leftmost <table> tag, the one that appears immediately to the right of the <body> tag. Then press Delete to remove the table containing the copyright information.
To check and save your page:
  1. Look at your page to make sure you’ve removed unnecessary elements.

    2. Your page should now look similar to the following image:
    This is a picture of the feature being described.

  2. Save your document.


Add an image placeholder

Now create a placeholder to stand in for the image that you’ll add later.

To add an image placeholder:
  1. Click at the beginning of the main text column, at the top left of the text, just before the first boldface word of the text. Then press Enter (Windows) or Return (Macintosh) to put a blank line before the text. Then click in the new blank line.
    This is a picture of the feature being described.

    2. The insertion point should now be on a line by itself. If it isn’t, place the insertion point on the blank line.

  2. Choose Insert > Image Placeholder.
  3. In the Image Placeholder dialog box, enter a name for the placeholder (such as SplashImage) and a width and height. For the Global Car Rental page, enter 523 for width and 220 for height.

    4. Note: Placeholder names must start with a letter and can contain only letters and numbers.

  4. Click OK.

    5. A gray box with the specified dimensions appears. This is a placeholder for an image, used to help you lay out pages without having to have the final images on hand.
    This is a picture of the feature being described.

  5. You may need to widen your document window to see the column of text on the right.


Make a column autostretch

The sidebar column of text on the right in the index.htm page is a fixed width. To make it change its width as the visitor resizes the browser window, make the column autostretch. Then adjust the width of the wide column containing the image placeholder.

To make the left column autostretch:
  1. If the Insert bar is not showing, choose Window > Insert to display it.
  2. In the Insert bar, click the Layout tab.
  3. Click the Layout View button to switch to Layout view.
  4. Read the informational dialog box, then click OK.

    5. For each table in your page, a green tab appears at the table’s upper left corner. The tab is labeled “Layout Table.”

  5. In the Document window, click the Layout Table tab above and to the left of the image placeholder you inserted, to select the table that contains both text columns.

    6. A column header appears over each of the two text columns, showing the width of each column.

  6. If the Document window is too narrow to show all of the column on the right, widen your Document window.

    7. Even after you widen your Document window, other Layout Table tabs may obscure the number showing the width in the column header on the right. Don’t click those other Layout Table tabs.

  7. Carefully click the column header over the right column. (Be sure to click above the top of the green Layout Table tabs in the right column.)

    8. A pop-up menu appears.
    This is a picture of the feature being described.

  8. In the pop-up menu, choose Make Column Autostretch.

    9. A dialog box appears, titled Choose Spacer Image, to prompt you to choose a spacer image.

    Note: If you have already chosen a spacer imager at some point, this dialog box does not appear; in that case, the right column is now set to Autostretch. If the dialog box does not appear, skip the rest of this procedure.

  9. In the Choose Spacer Image dialog box, select the Use an existing spacer image file option and click OK.

    10. Another dialog box appears, titled Select Spacer Image File.

  10. In the Select Spacer Image File dialog box, browse to your local root folder and open the Assets folder. Then open the Images folder and select spacer.gif, and click OK (Windows) or Open (Macintosh).

    11. The right column is now set to Autostretch; in a browser, the right column will be as wide as possible after the left column is drawn at its fixed width.

To adjust the width of the main text column:
  1. Click the column header over the left column and choose Make Cell Widths Consistent from the pop-up menu that appears.

    2. The left column is now set to a fixed width (equal to the width of the image plus the cell padding and cell spacing amounts).

  2. Click the Standard View button in the Insert bar to switch back to Standard view.
  3. Save your document.


Set a page title

You can set a variety of properties for a page, including its title, background color, text color, and so on. (To set page properties, choose Modify > Page Properties.) But if you just want to set the page title (the title that appears in the browser’s title bar), you can do that in the Document toolbar.

To set a page title for your document:
  1. If the Document toolbar isn’t already visible, choose View > Toolbars > Document.

    2. Dreamweaver’s Document toolbar appears. In the integrated workspace, it appears at the top of the document area by default; in the floating workspace, it appears as part of the Document window.
    This is a picture of the feature being described.

  2. In the Title text box, where it says “Untitled Document,” type a title for the page, such as Global Car Rental Home Page. Then press Enter (Windows) or Return (Macintosh) to see the page title update in the Document window’s title bar.
  3. Save your document.


Add styled text

You can type text into the Document window, or copy and paste it from another source (such as a Microsoft Word file). See Add text. Then you can format the text using the CSS Styles panel. See Add styles to the text.

Before entering text, make sure you’re in Design view by choosing View > Design.


Add text

As you enter and format text in Design view, Dreamweaver creates the underlying HTML code. To enter code directly, use Code view. For information on Code view, see Editing code in Dreamweaver.

The predesigned pages provided with Dreamweaver contain placeholder “Lorem ipsum” text; if you’re basing your page on a predesigned page, you’ll have to replace the placeholder text with your own text when you’re ready to start adding content. It can be useful to leave the placeholder text in place until you’re done with design and layout, though, so that you or your client can look at the layout without being distracted by the text.

To add text to your page:
  1. Triple-click in the bold placeholder text at the top of the left column (under the image placeholder) to select the entire bold paragraph.
  2. Type Safety Tips (or your own heading text if you prefer).
  3. Select the three paragraphs of placeholder text below the horizontal rule.
  4. Type the following text (or your own text if you prefer):

    5. The safety of our loyal customers is important to us. Read these safety tips to ensure that your next trip goes off without a hitch!

  5. In the right column, triple-click the word “News” and type Globe-Trotter Promotions to replace it.
  6. In the Site panel, locate the promotions.txt file in your Assets folder. Double-click the file’s icon to open it.

    7. This file contains copy for Global Car Rentals special promotions.

    Note: In this sample site, the file containing the copy is a text file. For other sites, you may be given HTML documents generated by Microsoft Word; you can import that HTML and clean it up using Dreamweaver’s Import Word HTML command. For more information, see Opening existing documents.

    Note that the text file appears in a new Document window with a dark bar down the left side. This window is in Code view, and can’t be switched to Design view because the file is not an HTML file.
    This is a picture of the feature being described.

    Note: If you prefer, use your own text on the page instead of using the provided text.

  7. In the promotions.txt Document window, press Control+A (Windows) or Command+A (Macintosh) to select all the text, then choose Edit > Copy to copy the text.
  8. In the index.htm Document window, select all of the placeholder text in the lower cell of the right-hand column, and choose Edit > Paste.

    9. The text is pasted into the table.

  9. Click just before the word “Rent” (the second paragraph of text you just pasted), and choose Insert > Horizontal Rule to put a horizontal line between the two promotions.
  10. Save your document.
  11. Switch to the promotions.txt file. Close that file by choosing File > Close.


Add styles to the text

There are several ways to style text in HTML. One approach is to use Cascading Style Sheets (CSS) to define specific HTML tags as being formatted in specific ways.

This lesson shows how to create a simple CSS style sheet from a predesigned style sheet, then apply the new style sheet to text and modify the styles.

To create a CSS style sheet:
  1. Choose File > New.
  2. In the New Document dialog box, select the CSS Style Sheets category from the category list on the left.

    3. The list in the middle column of the dialog box is relabeled CSS Style Sheets. A list of pre-designed style sheets appears.

  3. In the CSS Style Sheets list, select a style sheet. For the Global Car Rental site, select Basic: Verdana, which redefines the body, td, and th tags by specifying fonts for them. Then click Create
    This is a picture of the feature being described.

    4. Dreamweaver creates a new text file containing a small set of predefined CSS styles.

  4. Choose File > Save to save the new CSS file. Save it in the site’s assets folder; name it text.css (or any other name you like).
  5. Choose File > Close to close the CSS file.
To style your text using CSS styles:
  1. In the Window menu, choose an HTML file (such as index.htm).

    2. Note: If your system preferences are set to not show file extensions, the index.htm file appears in the Window menu with the name index.

  2. Choose Window > CSS Styles to display the CSS Styles panel.
  3. At the top of the CSS Styles panel, click the Edit Styles radio button to show available styles.

    4. If you haven’t previously defined styles for this document, no styles are available.

  4. At the bottom of the CSS Styles panel, click the Attach Style Sheet button.
    This is a picture of the feature being described.

    5. The Link External Style Sheet dialog box appears.

  5. In the Link External Style Sheet dialog box, click Browse to locate a style sheet.
  6. In the Select Style Sheet File dialog box, browse to and select the new style sheet you created in the assets folder, then click OK (Windows) or Choose (Macintosh) to attach the style sheet.
  7. In the Link External Style Sheet dialog box, click OK to attach the style sheet.

    8. The style sheet’s name and contents appear in the CSS Styles panel. The styles defined in the style sheet are applied to the text in the HTML document. For example, body text appears in Verdana.

  8. Save your document.
To edit the styles in the style sheet:
  1. At the top of the CSS Styles panel, click the Edit Styles radio button to show available styles.
  2. Select the name of the CSS file in the CSS Styles panel and click the Edit Style Sheet button at the bottom of the CSS Styles panel.
    This is a picture of the feature being described.

    3. A dialog box appears showing the names of the styles in the style sheet.

  3. Select one of the styles, such as body, and click Edit.

    4. The CSS Style Definition dialog box appears.
    This is a picture of the feature being described.

  4. Enter a size for the text, such as 13 pixels. Adjust other options as you like.
  5. Click OK to redefine the style.
  6. Edit the other styles. To create the styles used in the Global Car Rental site, set the body, td, and th styles to a size of 13 pixels.
  7. When you’re done editing styles, click the Save button to save your changes and close the stylesheet dialog box.

    8. The changed styles are applied to your document. For example, body text appears in 13-pixel Verdana.


Add images

In this lesson, you can add images to the page you’re working on. If you have your own images, you can use them instead, but the first time you try adding an image, we recommend using one supplied with Dreamweaver’s sample site.

If you haven’t already followed the procedure in Add assets to your site for copying the Global Car Rental site’s assets into your site’s local root folder, do so now.

To add an image to your document:
  1. Save your document if you haven’t already done so.

    2. You can insert an image into an unsaved document, but if you do, a dialog box will appear, informing you that the URL used for the image will be the full local path to the image. If you take this approach, Dreamweaver fixes the URLs when you do save the document, but it’s easiest to save the document before adding images.

  2. To insert an image in place of an existing image placeholder, double-click the placeholder. For example, to insert the company logo at the top left of the Global Car Rental page, double-click the small placeholder that’s labeled “image (100 x 50).”

    3. The Select Image Source dialog box appears.

  3. Near the bottom of the dialog box, make sure that the Relative To pop-up menu is set to Document.

    4. For information on document-relative and root-relative URLs, see About document locations and paths.

  4. Browse to an image in your assets folder (such as logo.jpg).
  5. Click OK or Select (Windows) or Open or Choose (Macintosh) to insert the image.

    6. In the Document window, the image appears where the placeholder was.

  6. Click the large image placeholder that you created in Add an image placeholder to select it. (Don’t double-click it.)

    7. You can use the same approach that you used for the other placeholder to replace this placeholder with an image, but the following instructions provide an alternate approach.

  7. Make sure the Site panel and the Property inspector are showing (choose Window > Site Files and Window > Properties if they aren’t visible).
  8. In the Property inspector, drag from the Src text box’s Point-to-File icon to the Site panel. (Make sure to drag from the Point-to-File icon next to the Src text box, not the one next to the Link text box.) Continue to hold the mouse button down as you point to the assets folder (if the folder is closed); the folder opens. Continue to hold the button down as you point to the images folder; that folder opens as well. Continue to hold the button down until the pointer is over the vintage.jpg file. Release the mouse button to select vintage.jpg.
    This is a picture of the feature being described.

    9. In the Document window, the image appears where the placeholder was. If the wrong image appears, look at the filename in the Src text box; if you selected the wrong file, drag the Point-to-File icon again.

  9. To insert images in places where you don’t already have placeholders, click in the Design view to place the insertion point where you want the image, then choose Insert > Image.

    10. If you insert an image for which the image file isn’t inside your site’s local root folder, Dreamweaver provides the option to automatically copy the image into the site.

  10. Save your document.


Set background colors

In the predesigned pages provided with Dreamweaver, the background colors of table cells are mostly set to gray; for most sites, you’ll have to change the colors to match your site’s color scheme.

To set the background color of a table cell:
  1. If the Property inspector isn’t open, choose Window > Properties to open it.
  2. If the Property inspector is collapsed (showing only its title bar), click the expander arrow in the title bar to expand it.
  3. If the Property inspector isn’t showing all properties, click the expander arrow at the lower right corner of the Property inspector to view all properties.
    This is a picture of the feature being described.
  4. Control-click (Windows) or Command-click (Macintosh) a cell to select the cell. For example, in the Global Car Rental sample page, there’s now a table cell that contains the logo image for the car rental company; Control-click or Command-click the cell that contains that logo image.

    5. The lower half of the Property inspector shows cell properties. If the lower half of the Property inspector isn’t visible, click the expander arrow at the lower right corner of the Property inspector to view all properties.

  5. In the Property inspector, click the Background Color button that appears next to the lower of the two Bg labels.
    This is a picture of the feature being described.

    6. The color picker appears and the pointer changes to an eyedropper.
    This is a picture of the feature being described.

  6. Select a color. You can either select a color in the color picker’s palette, or click anywhere on your display to select the color of the pixel you clicked. For example, click the background of the Global logo image to make the background color of the table cell match the image background color.

    7. The table cell’s background color changes to the color you picked.

  7. Repeat that procedure for each table cell that you want to change the background color of. In the Global Car Rental sample page, change the background colors of all of the navigation-bar table cells and of the header cell in the second column of text (the cell that now contains the text “Globe-Trotter Promotions”), to make them all match the background color of the Global logo.
  8. Save your document.


Look at the code

Take a quick time-out for a look at what Dreamweaver is doing when you add content to a page. As you add text, images, and other content, Dreamweaver generates HTML code.

Dreamweaver lets you view your document in either of two ways: Design view (where the document looks much like it would look in a browser), and Code view (where you can see the underlying HTML code). You can also use a split view that shows both Code and Design views.

To view the HTML code for your document:
  1. If the Document toolbar isn’t already visible, choose View > Toolbars > Document.
  2. In the Document toolbar, click the Code and Design view button.
    This is a picture of the feature being described.

    3. The window splits, showing the underlying HTML code.
    This is a picture of the feature being described.

    You can edit the code in Code view. Changes you make to the code don’t appear in Design view until you refresh the view.

To make code changes appear in Design view, do one of the following:
  • Click anywhere in Design view.
  • Click the Refresh button in the Document toolbar.
    This is a picture of the feature being described.

Dreamweaver provides many advanced features to help you code in Code view; see Editing code in Dreamweaver for more information.

When you’re working on your own pages, you can whichever view is most comfortable for you. We’ll assume for the rest of this chapter that you’re using Design view.

To show Design view only:
  1. If the Document toolbar isn’t already visible, choose View > Toolbars > Document.
  2. In the Document toolbar, click the Design view button.
    This is a picture of the feature being described.


Create a second page

In this lesson, you’ll create a second page for your site; in the next lesson, Add text links between pages, you’ll create links between the pages.

There are several possible ways to create a second page. In this lesson, you’ll create a second page by making a copy of the first one, so that the second page will have the same layout as the first.

Note: If you want to create a layout of your own from scratch instead, you can either use the Dreamweaver table-editing tools or Layout view. Other layout options include frames and layers. None of these options are covered in this lesson, however.

In a more complex site, the best way to make sure all your pages have the same layout would be to use a template. For information about where to read about table editing, Layout view, frames, layers, and templates, see Further reading.

The second page to create in the Global Car Rental site is the customer service page. You’ll create the customer service page by making a copy of the main (index.htm) page, then removing content that shouldn’t appear on the customer service page, then adding new content.

For more information on how to add and format text, see Add styled text.

To create a copy of your first page (index.htm):
  1. In the Site panel, right-click (Windows) or Control-click (Macintosh) the filename of the first page you created, index.htm (or whatever name you gave the file).
  2. From the context menu, choose Duplicate.

    3. A copy of the file appears.

    Tip: If the copy doesn’t appear immediately, click the Refresh button in the Site panel to make it appear.

  3. Select the new duplicated file. Pause for a moment, then click it again to make the filename editable (this is the same technique used in Windows Explorer and in the Finder).
  4. Give the new file a new name, such as customerService.htm.
To remove unnecessary material from the new page:
  1. Open the new customerService.htm page by double-clicking it in the Site panel.

    2. Look at the Document window’s title bar to be sure that you’re looking at the customerService.htm file. The title bar should say “Global Car Rental Home Page” and then a folder name and a filename; the filename should be customerServe.htm (or whatever you named it in the previous procedure).

  2. In the customerService.htm page, select the large image (the image showing the car in the main text column) by clicking it.
  3. In the tag selector, click the <td> tag.
  4. Press Backspace (Windows) or Delete (Macintosh).

    5. Everything in the table cell, including the image and the text, is deleted.

  5. Save your document.
To add text to the new page:
  1. In the Site panel, locate the custServInfo.htm file in your Assets folder. Double-click the file’s icon to open it.

    2. This file contains content to be added to the customer service page. If you were creating your own site, you would add your own content here, but for the purposes of this lesson, this content is provided for you.

  2. In the custServInfo.htm Document window, choose View > Code to view the HTML code.
  3. Still in the custServInfo.htm Document window, press Control+A (Windows) or Command+A (Macintosh) to select everything in the file.

    4. If you’re not in Code view when you do this, you may have to press Control+A or Command+A several times to select everything; if the insertion point is inside a table cell, Select All initially selects only that cell. For simplicity, switch to Code view before selecting everything.

  4. Press Control+C (Windows) or Command+C (Macintosh) to copy everything.
  5. Switch back to the customerService.htm document. Click inside the now-empty main text column (the wide column on the left).
  6. Choose Edit > Paste HTML.

    7. The HTML code that you copied from the custServInfo.htm file is pasted into this document. (If you choose Edit > Paste instead of Edit > Paste HTML, the HTML code is pasted into Design view as if it’s text. If HTML code appears in your Design view at this step, choose Edit > Undo and try again.)

    The text.css style sheet is already attached to this page, so text is formatted automatically.


Add text links between pages

You can create links at any stage of the site-creation process. If you’re following the lessons of this guide in order, then you’ve already created your pages and placed content in them; so in this lesson you’ll create links between the pages you’ve created.

The following are two other general approaches to creating links for a site:

  • Create a set of dummy pages first, then add links between them, and then add content to the pages.
  • As you create a page, specify links to pages that don’t exist yet; later, create pages that have the filenames you linked to.
To create a link from the customer service page to index.htm:
  1. Switch to the customer service page if it’s not the current page. (If the page is not open, open it by double-clicking its icon in the Site panel.)
  2. In the bottom of the wide text column on the left side, select the words “Home Page”.

    3. If you didn’t add text to the left column of the customer service page when you created it, enter the words Home Page in that text column and select those words.

  3. If the Property inspector isn’t open, open it by choosing Window > Properties.
  4. Click the folder icon next to the Link text box in the Property inspector. Browse to the index.htm file in your site’s local root folder.


Create rollovers for graphical links

A rollover image is an image that appears to change when a visitor to your site points to the image with the pointer. For example, a button on a page may appear to light up when the visitor points to it.

A rollover image consists of two images: the image displayed when the page first loads in the browser, and the image displayed when the pointer moves over the original image.

Note: When creating a rollover, make sure to use two images that have the same dimensions.

To create a rollover:
  1. Switch to the main (index.htm) page if it’s not the current page. (If the page is not open, open it by double-clicking its icon in the Site panel.)
  2. In the Document window, place the insertion point where you want the rollover image to appear. On the Global Car Rental main page, for example, double-click in the navigation-bar table cell that says “Lorem” and press Backspace (Windows) or Delete (Macintosh) to delete the text, leaving the insertion point in the cell.
  3. Choose Insert > Interactive Images > Rollover Image.
    This is a picture of the feature being described.
  4. In the Insert Rollover Image dialog box, type a name for the image, such as home-image, in the Image Name text box.

    5. This gives the image a unique name, and makes it easily identifiable in the HTML code.

  5. In the Original Image text box, click Browse; then navigate to the btnHome.jpg file in your site’s images folder (inside the assets folder). Make sure the Relative To pop-up menu is set to Document; then click OK or Select (Windows) or Open or Choose (Macintosh).

    6. The Original Image text box indicates which image to display when the page first appears in the browser.

  6. In the Rollover Image text box, click Browse; then navigate to btnHome_on.jpg in your site’s images folder. Make sure the Relative To pop-up menu is set to Document; then click OK or Select (Windows) or Open or Choose (Macintosh).

    7. The Rollover Image text box indicates which image to display when the pointer is pointing to the image in the browser.

  7. Make sure the Preload Rollover Image option is selected so the rollover images load when the page opens in the browser, ensuring a quick transition between images when a user moves the pointer over the original image.
  8. In the When Clicked, Go To URL text box, click the Browse button and browse to index.htm.

    9. The index.htm file is the file that you’re editing, so this step causes the rollover image to link to the page that you’re placing the rollover image on. It might seem unnecessary to have a link to the page that the link is on, but you’ll be using the same set of navigation rollovers on other pages as well, so this link will allow visitors to return to the index.htm page from other pages that contain this navigation bar.

  9. Click OK to close the dialog box.

    10. The specified original image appears in the document.

  10. Save your document.

Note: Rollover images don’t change when you point to them with the pointer in the Dreamweaver Document window; rollover images work only in a browser. To make sure your rollovers work, you have to preview your document in a browser. For information on previewing, see Preview in browser.

For the Global Car Rental site, create two more rollovers in the other two navigation-bar table cells (the ones that say “Ipsum” and “Dolor”): one rollover that uses the btnCustomerService.jpg and btnCustomerService_on.jpg images, and is linked to customerService.htm, and another rollover that uses the btnLocations.jpg and btnLocations_on.jpg images, and is linked to locations.htm. Note that you haven’t yet created the locations.htm file; just type the filename into the When Clicked, Go To URL text box in the Insert Rollover Image dialog box.


Copy the navigation bar

Now that you’ve created a working navigation bar, you can reuse it in all of your pages. In this lesson, you’ll copy the navigation-bar table cells and paste them into your second page.

There are a variety of other ways to reuse content in Dreamweaver, including library items, templates, and snippets.

To copy the navigation bar into another page:
  1. In the index.htm file, click in the table cell that contains the Home rollover image.
  2. In the tag selector, select the rightmost <tr> tag.

    3. The table row containing the three navigation-bar rollovers is selected.

  3. Choose Edit > Copy.
  4. Switch to the customerService.htm file.
  5. Click in the navigation-bar table cell that says “Lorem.”
  6. In the tag selector, select the rightmost <tr> tag.
  7. Choose Edit > Paste.

    8. The navigation-bar rollover images are pasted in place of the existing table cells.

  8. Save your document.


Preview in browser

The Design view gives a rough idea of what your page will look like in a browser, but the only way to be sure how it will look is to preview it in a browser. Each version of each browser has its own quirks; Dreamweaver strives to produce HTML that will look as similar as possible from one browser to another, but sometimes differences can’t be avoided. (That’s why Dreamweaver doesn’t display a preview directly; there’s no way for Dreamweaver to mimic all the different behaviors of all the different browsers.)

Preview in Browser shows how the pages will look when you’ve published them.

To preview your pages:
  1. If index.htm isn’t the current document, switch to it. (If it’s not open, open it.)
  2. Press the F12 key.

    3. Your primary browser starts if it’s not running already. It displays the index page.

    Note: Dreamweaver should automatically detect your primary browser and use that for previewing. If the preview doesn’t appear, or if it doesn’t appear in the browser you expect, switch back to Dreamweaver (if necessary) and choose File > Preview in Browser > Edit Browser List. The Preview in Browser Preferences dialog box appears; add the correct browser to the list. For more information, click the Help button in the Preferences dialog box.

  3. Move the pointer to point to the rollover images to see the images change. Click links to make sure they work.


Set up a remote site, then publish

You’ve now created a small but functional website. The next step is to publish it by uploading the files to a remote web server.

Before you can proceed, you must have access to a remote web server (such as your ISP’s server, or a server owned by the client you’re working for, or an intranet server within your company, or an IIS or PWS server on a Windows computer). If you don’t already have access to such a server, contact your ISP, your client, or your system administrator.

The following procedure works best if your remote root folder is empty. If your remote site already contains files, then create an empty folder in your remote site (on the server), and use that empty folder as your remote root folder.

The following procedure assumes that you have set up a local site. For more information, see Set up a local site.

To connect to a remote site:
  1. Choose Site > Edit Sites.
  2. Select a site (such as Global Car Rental) and click Edit.
  3. Click the Basic tab at the top of the dialog box.
  4. You’ve already filled in the first few steps in the Basic tab, when you set up your local site, so click Next a few times, until the Sharing Files step is highlighted at the top of the wizard.
    This is a picture of the feature being described.
  5. In the pop-up menu labeled “How do you connect to your remote server?”, choose a method for connecting to the remote site.

    6. The most common method for connecting to a server on the Internet is FTP; the most common method for connecting a server on your intranet is Local/Network. If you aren’t sure what to choose here, ask the server’s system administrator.

  6. If you choose FTP, enter the following options:
    • Enter the hostname of the server (such as ftp.macromedia.com).
    • In the text box that asks what folder contains your files, enter the path on the server from the ftp root folder to the remote site’s root folder. If you’re not sure, consult your system administrator.

      • In many cases, this text box should be left blank.

    • Enter your user name and password in the appropriate text boxes and click Test Connection.
    • If the connection is unsuccessful, consult your system administrator.
  7. If you choose Local/Network, then click the folder icon next to the text box and browse to the remote site’s root folder.
  8. Click Next.
  9. Don’t enable check-in and check-out for this site.

    10. If you and your co-workers are working together on a larger site, check-in and check-out help to prevent you from overwriting each others’ files. For this site, though, you don’t need this feature.

  10. Click Next.
  11. Click Done to finish setting up the remote site.
  12. Click Done again to finish editing the site.
To upload your pages to a remote site:
  1. In the Site panel, select the site’s local root folder.
  2. Click the Put Files button.
    This is a picture of the feature being described.

    3. All of the site’s files are uploaded to the remote site.

  3. Open your remote site in a browser to make sure everything uploaded correctly.


Further reading

Dreamweaver is a big application, with dozens of powerful features. This guide only touches on the basics.

This chapter of Getting Started focused on using Design view to create a static site. For information on Code view and hand-coding in Dreamweaver, see Editing code in Dreamweaver. For information about the basics of creating a database-driven web application, see Understanding Web Applications and Developing a Web Application in Dreamweaver MX.

For more detailed information on topics covered in this chapter of Getting Started, see the following topics in Dreamweaver Help:

  • Exploring the Workspace
  • Setting up a Dreamweaver site
  • Setting Up a Document
  • Laying Out Pages in Layout View
  • Inserting and Formatting Text
  • Inserting Images
  • Creating a rollover image
  • Previewing pages in browsers
  • Setting up a remote folder

In addition to information on specific topics, Dreamweaver Help provides information about other resources, such as the Macromedia Support Center and online discussion forums. For information about such resources, see Welcome to Dreamweaver.

Previous


Editing code in Dreamweaver

While web developers can benefit from the rich visual tools offered by Macromedia Dreamweaver MX, many developers also use coding tools to get the job done. Dreamweaver has many new features to give you the professional coding environment you need.

This chapter gives you a quick view of Dreamweaver’s new professional coding environment. For more information, see Coding in Dreamweaver.

Next


Switch to the coding workspace

If you didn’t do so during installation, you can make your workspace look and feel like the popular coding environments of HomeSite and ColdFusion Studio.

Note: Macintosh users cannot change the workspace.

To adopt the new coding workspace:
  1. Choose Edit > Preferences, then choose General from the list of categories on the left.

    2. The General category appears.
    This is a picture of the feature being described.

  2. Click the Change Workspace button.

    3. The Workspace Setup dialog box appears.
    This is a picture of the feature being described.

  3. Select the Dreamweaver MX Workspace option, then select the Homesite/Coder-Style option.
  4. Click OK twice to close the Preferences dialog box.
  5. Close Dreamweaver, and then restart it.


Copy a Folder to Your Site

Before you start the lessons, you need to set up a site and copy a folder into the site. The integrated file browser in the Site panel enables you to view your local disk and network. This is useful for working with files that are not in the current site showing in the Site panel.

To copy pages to your site:
  1. Choose Window > Site to open the Site panel, if it’s not already open.
  2. In the Site panel, from the Site pop-up menu, select the name of the site you defined in the previous chapter.

    3. If you have not defined a site, see Set up a local site. You need to define a site before you continue.

    When you select the site name from the pop-up menu, Dreamweaver displays the files in the site.

  3. Expand the Desktop (Windows) or Computer (Macintosh) icon to see your available disks.
  4. Expand folders as necessary to reach the Dreamweaver application folder, and then expand the Samples folder.
  5. In the Samples folder, expand the GettingStarted folder, then select the Code folder, and press Control+C (Windows) or Command+C (Macintosh) to copy it.
  6. Scroll back to the top of the Site panel, and select the site folder.
  7. Press Control+V (Windows) or Command+V (Macintosh) to paste a copy of the folder in your site.


View the finished pages

Before you start, you can view finished pages to see how your pages might look. Of course, your pages may vary.

To view the finished pages:
  1. Choose Window > Site to open the Site panel, if it’s not already open.
  2. Expand the Desktop (Windows) or Computer (Macintosh) icon to see your available disks.
  3. Expand folders as necessary to reach the Dreamweaver application folder, and then expand the Samples folder.
  4. In the Samples folder, expand the GettingStarted folder, then expand the FinalSite folder.
  5. In the FinalSite folder, double-click index.htm to open it, then double-click location_comp.htm.

    6. Dreamweaver displays the pages in the Document window.

  6. Close the pages when you are finished.


Open multiple pages

Use the Site panel to open the pages you need for this lesson.

To open pages:
  1. Choose Window > Site to open the Site panel, if it’s not already open.
  2. In your site, expand the Code folder.
  3. Double-click index.htm to open it, then double-click location_start.htm.

    4. These are the two files you’ll need for this lesson.

  4. In the Document window, click the Show Code View button on the toolbar or choose View > Code to switch to Code view and see the file’s source code.
  5. To switch between the pages quickly, press Control+Tab or click the tab at the bottom of the page (Windows only).

    6. Note: You must maximize the page to see the tabs.

    This is a picture of the feature being described.


Add an image by dragging it

In this lesson you’ll add a button to the home page for a Locations page, similar to the buttons for Home and Customer Service. You can enter the code directly on the page, click the image icon on the Insert bar, or use the image (IMG) tag editor (select the image, right-click in Windows or Control-click in Macintosh, then select Edit Tag).

Another option is to drag the image from its folder.

To add an image by dragging it:
  1. Open index.htm in Code view, if it’s not already open.
  2. In the Files panel group, open the Assets panel (Windows > Assets).
  3. Select the image file for btnLocations.jpg.
  4. Drag the image file to the page code, and then drop it in the code for the third cell in the first table.

    5. Tip: Look for the code for the Home and Customer Service buttons. Drop the Locations image before the closing </td> tag for the table cell that follows the two cells for those buttons.

    Dreamweaver inserts the code at the insertion point to create the image.

  5. Choose File > Save.


Add a link with the Tag Chooser

Now you’ll make the button you added link to the Locations page. In addition to manually entering code for a link and using the Insert bar to add a link, you can use the Tag Chooser.

To write code with the help of the Tag Chooser:
  1. Open index.htm in Code view, if it’s not already open.
  2. In the code for the first table, find and select the code for the Location button you inserted in the last section.

    3. Note: Make sure you highlight the entire <img> tag.

  3. Right-click (Windows) or Control-click (Macintosh) the selected text, and then select Insert Tag from the popup menu.

    4. The Tag Chooser appears.

  4. Choose HTML Tags, Page Elements, General, and then select A in the right pane.

    5. Note: You can also choose HTML Tags, and then select the A tag in the right pane, without first selecting Page Elements, General.

  5. Click Insert.

    6. A tag editor for the anchor tag (<a>) appears.
    This is a picture of the feature being described.

  6. In the HREF text box, enter location_start.htm or click the Browse button to browse to the file.

    7. Note: If you want to link to a web page, enter the page’s URL.

  7. Click OK to close the tag editor.
  8. Click Close to close the Tag Chooser.

    9. Dreamweaver inserts the code in your page to create the link.

  9. In the Document window, choose File > Save.


Edit a tag

Next, you’ll use the Tag Inspector to find a specific tag in the Locations page and quickly make changes to it.

To edit a tag using the Tag Inspector:
  1. Open location_start.htm in Code view, if it’s not already open.
  2. Do one of the following to open the Tag Inspector, if it’s not already open:
    • Choose Window > Tag Inspector.
    • In the Code panel group, click the Tag Inspector tab.

      • The Tag Inspector gives you a structured view of all the tags in your page. It also displays the attributes of each tag.
      This is a picture of the feature being described.

  3. In the Document window Code view, find the text for the heading “Rental Locations.”
  4. Select the non-breaking space entity (&nbsp;) between the paragraph tags that follow the heading:
    5. <p><FONT SIZE="+2" COLOR="#FF6600">Rental Locations</FONT></p>
<p>
&nbsp;</p>
  5. Choose Insert > Table, then click OK in the Insert Table dialog box to accept the default values.

    6. Dreamweaver inserts table code.

  6. Click the Refresh button on the toolbar.

    7. The Tag Inspector panel updates so that focus is on the Table tag you just inserted. A list of attributes appears below the tag.

  7. In the Document window, click a few different tags to see how the Tag Inspector updates the tag and attributes it displays, then click the Table tag again so that its attributes appear in the Tag Inspector.
  8. In the Tag Inspector panel, click in the empty text box beside the align attribute.

    9. An arrow for a pop-up menu appears.

  9. Click the pop-up menu arrow, and select center.

    10. Dreamweaver changes the code in the Document window.

  10. Click the Show Design View button on the toolbar or choose View > Design to see the table.
  11. In the Document window, choose File > Save.


Look up information about a tag

If you need help with a tag’s attributes and attribute values, you can look up reference information within Dreamweaver.

To look up information about a tag:
  1. Open location_start.htm in Code view, if it’s not already open.
  2. In the Document window, select the text “bgcolor” in the body tag.
  3. Right-click (Windows) or Control-click (Macintosh) the selected text, and then choose Reference from the popup menu.

    4. The Reference panel opens and displays information about the bgcolor attribute.

    Note: You can also choose Window > Reference to access the Reference panel. This panel is integrated in the development environment in the Code group panel.

  4. For information about a specific tag attribute, select the attribute from the pop-up menu.
    This is a picture of the feature being described.


Add an image with Code Hints

In this lesson you’ll add a logo to the Locations page.

To add code to the page manually, simply click in the Document window and start typing. You can also use the new Code Hints feature in Dreamweaver to speed up your work.

To write code with the help of Code Hints:
  1. Open location_start.htm in Code view, if it’s not already open.
  2. Find the code for the table row that contains the text “The International Car Rental Specialists”; select the non-breaking space entity (&nbsp;) in the code for the cell that comes before that text:
    3. <td rowspan="2" bgcolor="#424973">&nbsp;</td>
  3. Type the opening bracket (<) of the image tag.

    4. A list of tags appears at the insertion point.

    Note: You can set the length of the delay by selecting Edit > Preferences or Dreamweaver > Preferences (Mac OS X), and then selecting Code Hints from the category list on the left. You can open Code Hints by pressing the Spacebar, and you can close Code Hints at any time by pressing Escape.

  4. Select the img tag from the list, and then press Enter (Windows) or Return (Macintosh) to insert the tag.

    5. Tip: To quickly scroll to a tag, type the first letter of the tag.

  5. Press the Spacebar to display a list of attributes for the tag.
  6. Type src, and then press Enter (Windows) or Return (Macintosh).

    7. A Browse button appears below the code you just typed.

  7. Select the browse button to navigate to the image file or enter the image file path, Assets/images/logo.jpg.
  8. Press the spacebar, select the alt attribute, and then press Enter (Windows) or Return (Macintosh).
  9. Type Logo, then move the cursor to the right of the quotation mark that appears after the word Logo.
  10. Press the spacebar, select the align attribute, and then press Enter (Windows) or Return (Macintosh).

    11. A list of known values for the align attribute appears.

  11. Select top from the list, and then press Enter (Windows) or Return (Macintosh).
  12. Type a closing bracket (>) to complete the tag.
  13. In the Document window, choose File > Save.

To add an attribute to an existing tag, place the insertion point just before the tag’s closing bracket (>) and press the Spacebar. A list of attributes appears. Add the attribute and specify its value, if any.


Check your changes

After making any change to your code, you can get immediate visual feedback.

To see a visual representation of your code, do either of the following:
  • Click the Show Design View button on the toolbar or select View > Design.
  • View the page in a web browser by pressing F12. To close the browser and return to your code, press Alt-F4 (Windows only).


Add a link with the Insert bar

Now, you’ll add a link to the logo image you inserted so that when the user clicks it, the home page opens.

One way you can create the link is by simply placing an anchor tag (<a>) around the image tag in the code and setting the anchor tag’s attributes—with or without the help of Code Hints. Another way to add the link is to use the Insert bar.

To write code with the help of the Insert bar:
  1. Open location_start.htm in Code view, if it’s not already open.
  2. Highlight the code for the logo.jpg image you inserted.

    3. Note: Make sure you highlight the entire <img> tag.

  3. In the Common tab of the Insert bar, click the Hyperlink button.

    4. The Hyperlink dialog box appears with the image tag already entered.
    This is a picture of the feature being described.

  4. In the Link text box, enter index.htm or click the folder icon to browse to it.

    5. Note: To link to a web page, enter the page’s URL.

  5. Click OK.

    6. Dreamweaver inserts the code in your page to create the link around the image.

  6. Choose File > Save.


Printing your code

You can print your code to edit it offline, archive it, or distribute it.

To print the code:
  1. Open a page in Code view.
  2. Choose File > Print Code.

    3. Tip: To print with line numbers, choose View > Code View Options > Line Numbers before you print.


Further reading

For information on the hand-coding features in Dreamweaver, see Coding in Dreamweaver.

For information on accessing your code while working in Dreamweaver’s visual design environment, see Editing Code in Design View.

Previous


Understanding Web Applications

A web application is a collection of web pages that interact with the user, with each other, and with various resources on a web server, including databases. Before you start building your own web applications, you should be familiar with the concepts discussed in this chapter.

The chapter contains the following topics:

  • What is a web application?
  • How a web application works
  • Accessing a database
  • Authoring dynamic pages
  • Choosing a server technology
  • Frequently used terms
Next


What is a web application?

A web application is a website that contains pages stored on a web server with partly or entirely undetermined content. The final content of a page is determined only when the user requests a page from the web server. Because the final content of the page varies from request to request based on the user’s actions, this kind of page is called a dynamic page.

Web applications are built to address a variety of challenges and problems. This section describes common uses for web applications and gives a simple example.


Common uses for web applications

Web applications have many uses for both users and developers, including the following:

  • Let users find information quickly and easily on a content-rich website.

    • This kind of web application gives users the ability to search, organize, and navigate content as they see fit. Examples include company intranets, Microsoft MSDN, and Amazon.com.

  • Collect, save, and analyze data provided by users.

    • In the past, data entered in HTML forms was sent as e-mail messages to employees or CGI applications for processing. A web application can save form data directly into a database and also extract the data and create web-based reports for analysis. Examples include online banking pages, store check-out pages, surveys, and user-feedback forms.

  • Update websites that have constantly changing content.

    • A web application frees the web designer from continually updating the site’s HTML. Content providers such as news editors provide the web application with content and the web application updates the site automatically. Examples include the Economist and CNN.


Web application example

Clay is a professional web designer and long-time Dreamweaver user responsible for maintaining the intranet and Internet sites of a medium-sized company of 1000 employees. One day, Jill from Human Resources comes to him with a problem. HR administers an employee fitness program that gives employees points for every mile walked, biked, or run. Each employee must report his or her monthly mile totals in an e-mail to Jill. At the end of the month, Jill gathers all the e-mail messages and awards employees small cash prizes according to their point totals.

Jill’s problem is that the fitness program has grown too successful. So many employees now participate that Jill is inundated with e-mails at the end of each month. Jill asks Clay if a web-based solution exists.

Clay proposes an intranet-based web application that performs the following tasks:

  • Lets employees enter their mileage on a web page using a simple HTML form
  • Stores the employees’ mileage in a database
  • Calculates fitness points based on the mileage data
  • Lets employees track their monthly progress
  • Gives Jill one-click access to point totals at the end of each month

Clay gets the application up and running before lunchtime using Dreamweaver MX, which has the tools he needs to build this kind of application quickly and easily.


How a web application works

A web application is a collection of regular and dynamic web pages. A regular web page is one that does not change when a user requests it: the web server sends the page to the requesting web browser without modifying it. In contrast, a dynamic web page is modified by the server before it is sent to the requesting browser. The changing nature of the page is why it’s called dynamic.

For example, you could design a page to display fitness results and leave certain information (such as employee name and results) to be determined when the page is requested by an employee.


Processing regular web pages

A regular website comprises a set of related HTML pages and files hosted on a computer running a web server.

A web server is software that serves web pages in response to requests from web browsers. A page request is generated when a user clicks a link on a web page, chooses a bookmark in a browser, or enters a URL in a browser’s Address text box and clicks Go.

The final content of a regular web page is determined by the page designer and doesn’t change when the page is requested. Here’s an example:

<html>
<head>
<title>Call Department</title>
</head>
<body>
<strong>Call Department</strong><br>
Talk to someone in Sales.
</body>
</html>

Every line of the page’s HTML code is written by the designer before the page is placed on the server. Because the HTML doesn’t change once it’s on the server, this kind of page is called a static page.

Note: Strictly speaking, a “static” page may not be static at all. For example, a rollover image or a Flash movie can make a static page come alive. However, this help system refers to a page as static if it is sent to the browser without modifications.

When the web server receives a request for a static page, the server reads the request, finds the page, and sends it to the requesting browser, as shown in the following figure:

This image shows how the web server handles a request for a static page.

In the case of web applications, certain lines of code are undetermined when the user requests the page. These lines must be determined by some mechanism before the page can be sent to the browser. The mechanism is discussed in the following section.


Processing dynamic pages

When a web server receives a request for a regular web page, the server sends the page to the requesting browser without further ado. The web server reacts differently when it receives a request for a dynamic page: it passes the page to a special software extension responsible for finishing the page. This special software is called an application server.

The application server reads the code on the page, finishes the page according to the instructions in the code, then removes the code from the page. The result is a static page that the application server passes back to the web server, which then sends the page to the requesting browser. All the browser gets when the page arrives is pure HTML. Here’s a view of the process:

This image shows how the web server handles a request for a dynamic page.


Accessing a database

An application server lets you work with server-side resources such as databases. For example, a dynamic page may instruct the application server to extract data from a database and insert it into the page’s HTML. For more information, see Beginner’s Guide to Databases.

The instruction to extract data from a database is called a database query. A query consists of search criteria expressed in a database language called SQL (Structured Query Language). The SQL query is written into the page’s server-side scripts or tags.

An application server cannot communicate directly with a database because the database’s proprietary format renders the data undecipherable in much the same way that a Word document opened in Notepad is undecipherable. The application server can communicate only through the intermediary of a database driver. A database driver is software that acts like an interpreter between the application server and the database.

After the driver establishes communication, the query is executed against the database and a recordset is created. A recordset is a subset of data extracted from one or more tables in a database. The recordset is returned to the application server and the data used in the dynamic page.

Here’s a simple database query written in SQL:

SELECT lastname, firstname, fitpoints
FROM employees

This statement creates a three-column recordset and fills it with rows containing the last name, first name, and fitness points of all employees in the database. For more information, see SQL Primer.

Here’s an illustration of the process of querying a database and returning data to the browser:

This image shows how the web server interacts with a database when a dynamic page is requested.

This is a picture of the feature being described.

You can use almost any database with your web application, as long as you have the appropriate database driver for it.

If you plan to build small low-cost applications, you can use a file-based database, such as one created in Microsoft Access. If you plan to build robust, business-critical applications, you can use a server-based database, such as one created in Microsoft SQL Server, Oracle 9i, or MySQL.

If your database is located on a system other than your web server, make sure you have a fast connection between the two systems so that your web application can operate quickly and efficiently.


Authoring dynamic pages

Authoring a dynamic page consists of writing the HTML first, then adding the server-side scripts or tags to the HTML to make the page dynamic. When you view the resulting code, the language appears embedded in the page’s HTML. Accordingly, these languages are known as HTML embedded programming languages. The following example uses ColdFusion Markup Language (CFML):

<html>
<body>
<b>Call Department</b><br>
<!--- embedded instructions start here --->
<cfset department="Sales">
<cfoutput>
   Talk to someone in #department#.
</cfoutput>
<!--- embedded instructions end here --->
</body>
</html>

The embedded instructions on this page perform the following actions:

  1. Create a variable called department and assign the string “Sales” to it.
  2. Write the variable’s string value, “Sales”, in the HTML code.

The application server returns the following page to the web server:

<html>
<body>
<b>Call Department</b><br>
Talk to someone in Sales.
</body>
</html>

The web server sends the page to the requesting browser, which displays it as follows:

Call Department
Talk to someone in Sales.

The scripting or tag-based language used depends on the server technology. Here are the most popular languages for the five server technologies supported by Dreamweaver MX:

Server technology | Language
ColdFusion | ColdFusion Markup Language (CFML)
ASP.NET | Visual Basic C#
Active Server Pages (ASP) | VBScript JavaScript
JavaServer Pages (JSP) | Java
PHP | PHP

For more information, see Choosing a server technology.

Dreamweaver can write the server-side scripts or tags necessary to make your pages work, or you can write them by hand in the Dreamweaver coding environment.


Choosing a server technology

You can use Dreamweaver MX to build web applications using five server technologies: ColdFusion, ASP.NET, ASP, JSP, or PHP. Each of these technologies corresponds to a document type in Dreamweaver. Choosing one for your web application depends on several factors, including your level of comfort with various scripting languages and the application server you plan to use.

If you’re new to web application development or to application development in general, you’ll probably prefer ColdFusion because it provides an easy-to-learn server scripting environment that’s also tightly integrated with Dreamweaver. If you’re familiar with other server technologies, such as JSP, PHP, ASP, or ASP.NET, Dreamweaver offers great support for these as well.

Your choice of server technology also depends on the application server you plan to use for your web application. An application server is software that helps a web server process web pages containing server-side scripts or tags. For example, if you have the ColdFusion MX, you can choose ColdFusion as your server technology. If you have access to a server running Microsoft Internet Information Server 5 (IIS) with the .NET Framework, you can choose ASP.NET. PHP is an option if you have access to a web server with a PHP application server; JSP is an option if you have access to a web server with a JSP application server (such as Macromedia JRun).

A developer edition of ColdFusion MX is available on the Dreamweaver MX CD (Windows version only) and on the Macromedia website.

For more information on application servers, see Setting up an application server.

To learn more about ColdFusion, see the ColdFusion documentation in Dreamweaver (Help > Using ColdFusion) or visit the Macromedia website.

To learn more about ASP.NET, visit the Microsoft website.

To learn more about ASP, visit the Microsoft website.

To learn more about JSP, visit the Sun website.

To learn more about PHP, visit the PHP website.


Frequently used terms

This section lists frequently used terms.

An application server is software that helps a web server process web pages containing server-side scripts or tags. When such a page is requested from the server, the web server hands the page off to the application server for processing before sending the page to the browser. For more information, see How a web application works.

Common application servers include Macromedia ColdFusion, Macromedia JRun Server, the Microsoft .NET Framework, IBM WebSphere, and Apache Tomcat.

A database is a collection of data stored in tables. Each row of a table constitutes one data record and each column constitutes a field in the record, as follows.

This is a picture of the feature being described.

A database driver is software that acts as an interpreter between a web application and a database. Data in a database is stored in a proprietary format. A database driver lets the web application read and manipulate data that would otherwise be undecipherable.

A database management system (DBMS, or database system) is software used to create and manipulate databases. Common database systems include Microsoft Access, Oracle 9i, and MySQL.

A database query is the operation that extracts a recordset from a database. A query consists of search criteria expressed in a database language called SQL. For example, the query can specify that only certain columns or only certain records be included in the recordset.

A dynamic page is a web page customized at runtime by an application server before the page is sent to a browser. For more information, see How a web application works.

A recordset is a subset of data extracted from one or more tables in a database, as in the following example:

This is a picture of the feature being described.

A relational database is a database containing more than one table, and the tables share data. The following database is relational because two tables share the DepartmentID column.

This is a picture of the feature being described.

A server technology is the technology that an application server uses to modify dynamic pages at runtime.

The Dreamweaver MX development environment supports the following server technologies:

  • Macromedia ColdFusion
  • Microsoft ASP.NET
  • Microsoft Active Server Pages (ASP)
  • Sun JavaServer Pages (JSP)
  • PHP Hypertext Preprocessor (PHP)

You can also use Dreamweaver’s coding environment to develop pages for any other server technology not listed above.

A static page is a web page that is not modified at runtime by an application server before the page is sent to a browser. For more information, see Processing regular web pages.

A web application is a website that contains pages stored on a web server with partly or entirely undetermined content. The final content of these pages is determined only when the user requests a page from the web server. Because the final content of the page varies from request to request based on the user’s actions, this kind of page is called a dynamic page.

A web server is software that serves web pages in response to requests from web browsers. A page request is generated when a user clicks a link on a web page open in the browser, chooses a bookmark in the browser, or enters a URL in a browser’s Address text box and clicks Go.

Popular web servers include Microsoft Internet Information Server, Microsoft Personal Web Server, Apache HTTP Server, Netscape Enterprise Server, and iPlanet Web Server.

Previous


Developing a Web Application in Dreamweaver MX

In this chapter, you’ll see how to use Dreamweaver MX to quickly begin developing dynamic database-driven web applications. A powerful aspect of dynamic web applications development is the ability to present database stored information in a web format.

As you complete this lesson, you’ll learn how to incorporate database information in your website. You’ll develop web applications for the Global Car Rental site, using an existing database containing three tables of data—locations, comments, and regions. You’ll also use Dreamweaver to create a simple SQL query to extract data from the database.

In this lesson, you’ll build the following dynamic pages:

  • An insert page that allows site visitors to send comments to the company
  • A detail page which lists the customer’s comments and contact information
Next


Before you begin

The handy setup guides, located at the end of the Getting Started guide, walk you through the steps for setting up your Dreamweaver work environment for creating dynamic pages.

See the appropriate setup guide for your application server.

Setup for Sample ColdFusion Site

Setup for Sample ASP.NET Site

Setup for Sample ASP Site

Setup for Sample JSP Site

Setup for Sample PHP Site

Complete the following tasks:

  • Configure your system
  • Configure Dreamweaver to work with your chosen application server
  • Define a connection to the database

The screen examples in this chapter show Macromedia ColdFusion dialog boxes. However, you can complete the lessons in this chapter in all other server models supported by Dreamweaver MX: ColdFusion, PHP, ASP.NET, ASP, and JSP.


Open a document to work in

A good starting point for developing a database application is to create a list of the records stored in the database. In the application you’re building in this chapter, you will list information in the customer comments table of the database. Later, you’ll create a dynamic web page which lets a customer insert comments or questions directly to the database.

Let’s start by locating the documents you’ll work with as you create these pages.

  1. Do one of the following to open the Site panel:
    • In the Files panel group, click the expander arrow to display the Site panel.
    • Choose Window > Site.
    • Press F8.

      • The Site panel opens.
      This is a picture of the feature being described.

  2. In the Site pop-up menu, select the Global Car site you defined for your server pages.
  3. In the Site panel, double-click the customerComment file to open it.

    4. The document opens in the Document window.

  4. If you are currently viewing the document in Code view, click the Show Design View button or the Show Code and Design Views button in the Document toolbar, so you can use the screen examples provided as checkpoints while you complete the lesson.

    5. You will edit the partially completed page.
    This is a picture of the feature being described.


Define a recordset

Now you’ll create a recordset to select the data you want to display. A recordset is a subset of information extracted from a database by a database query. (In ASP.NET, a recordset is known as a DataSet.) A database query consists of search criteria, which defines what’s included in the recordset. You then use the information extracted as a source of content for your dynamic pages.

Dreamweaver MX provides an easy-to-use interface for creating simple SQL queries—you don’t need to know SQL to create a recordset in Dreamweaver.

You’ll create a recordset that selects all of the values from the COMMENTS table in the Global database.

  1. In Dreamweaver, open the Recordset or DataSet (ASP.NET) dialog box by doing one of the following:
    • In the Insert bar’s Application tab, click the Recordset or DataSet (ASP.NET) button.
      This is a picture of the feature being described.
    • Choose Window > Bindings to open the Bindings panel, then click the plus (+) button and select Recordset or DataSet (ASP.NET).
    • Click the Application panel group’s expander arrow, then in the Bindings panel click the plus (+) button and select Recordset or DataSet (ASP.NET).

      • The Recordset or DataSet dialog box appears. If the dialog box you see looks more complex than the dialog box below, click the Simple button.
      This is a picture of the feature being described.

  2. In the Name text box, enter rsComments.
  3. In the Data Source pop-up menu (ColdFusion) or Connection pop-up menu (other server page types), select connGlobal.

    4. The Recordset or DataSet dialog box updates with data from the database.
    This is a picture of the feature being described.

  4. In the Table pop-up menu, COMMENTS is already selected.
  5. In Columns, All is selected.

    6. You will accept the default value to request the complete recordset.

  6. In the Sort pop-up menu, select LAST_NAME, and in the second pop-up menu, select Ascending.

    7. The retrieved records list data in alphabetical order by customer last name.
    This is a picture of the feature being described.

  7. Click Test to test the recordset or dataset.
    This is a picture of the feature being described.

    8. The records from the database that match your recordset or dataset selection criteria are displayed in the Test SQL Statement window.

  8. Click OK to close the Test SQL Statement window.
  9. Click OK to close the Recordset or DataSet dialog box.

    10. The recordset appears in the Bindings panel.

    Tip: If you do not see all of the recordset fields, click the plus (+) button in front of Recordset (rsComments) to expand the recordset display.

    This is a picture of the feature being described.


Display the database records

Next, you’ll create a page which lists the records that currently exist in the COMMENTS table. You will dynamically generate the page rather than manually enter the information.

You’ll start by creating a table to structure the data list.

  1. In the customerComment document, place the insertion point after “Customer Comments”, then press Enter (Windows) or Return (Macintosh) to set where the table will be inserted.
  2. Insert a table by doing one of the following:
    • In the Insert bar, click the Common tab, then click the Table button or drag it to the document.
      This is a picture of the feature being described.
    • In the Insert bar, click the Layout tab, then click the Table button or drag it to the document.
    • Select Insert > Table.

      • The Insert Table dialog box appears.
      This is a picture of the feature being described.

  3. In the dialog box, set the following options:

    4. In Rows, enter 2.

    In Cell Padding enter 2.

    In Columns, enter 4.

    In Cell Spacing, enter 2.

    In Width, enter 80.

    The completed dialog box should look like this:
    This is a picture of the feature being described.

  4. Click OK.

    5. The table inserts in the document.
    This is a picture of the feature being described.

  5. In the top row of the table add labels for the table entries:

    6. In the first cell of the table, enter First Name.

    In the next cell, enter Last Name.

    In the next cell, enter E-mail Address.

    In the last cell, enter Comments.

  6. Save your document (File > Save).


Add dynamic fields to the table

You’re now ready to add the recordset fields to the table.

  1. Open the Bindings panel, if it isn’t already open, by doing one of the following.
    • Choose Window > Bindings.
    • Click the Application panel group’s expander arrow, then select the Bindings panel.
  2. Add the FIRST_NAME field to the table, by doing one of the following:
    • Place the insertion point in the table cell below the First Name label, then in the Bindings panel select FIRST_NAME, and click Insert.
    • Drag FIRST_NAME from the Bindings panel to the table cell.
  3. Repeat step 2 to add LAST_NAME, EMAIL, and COMMENTS to the table.

    4. Your page should look like this:
    This is a picture of the feature being described.

  4. Save your document.


Set a repeated region

The table you created only contains one row for data. To see all the records you’ll set the table row as a repeated region. The page will repeat with date records for each record that matches the recordset search requirements.

  1. In the Document window, select the bottom table row by doing one of the following:
    • Place the pointer in the first cell, then drag to the right to select all of the cells in the row.
    • Click in one of the cells, then in the tag selector, click the <tr> tag.
    • Position the pointer to the left of the table row, when it changes to an arrow click the table row border to select the row.
  2. Set a repeated region, by doing one of the following:
    • In the Server Behaviors panel, click the plus (+) button, then select Repeat Region.
    • In the Insert bar’s Application tab, click the Repeated Region button.
    • Select Insert > Application Objects > Repeated Region.

      • The Repeat Region dialog box appears.
      This is a picture of the feature being described.

  3. In the dialog box, accept the default setting, click OK.

    4. The table row appears in a tabbed outline.
    This is a picture of the feature being described.

  4. Save your document.


View your pages

Next, you’ll save the pages, then you’ll view the pages to see how the application you developed works. To view pages as they would look when processed by the server, you can use Live Data view.

  1. With customerComment still selected, do one of the following to view the data in your pages:
    • In the Document toolbar, click the Live Data View button.
      This is a picture of the feature being described.
    • Select View > Live Data.

      • The page updates with a list of customer data extracted from the database.
      This is a picture of the feature being described.


Create a record insert form

The next page you’ll create for the Global website is a customer comment page. You want customers to enter comments and insert them directly in the database. You’ll connect this page to the Comments table in the Global database.

Dreamweaver includes several application objects that help you create web application pages quickly and easily. You’ll use an application object to create the insert page. The Insert Record application object creates an HTML form, data fields that link (or bind) to the database, and the necessary server scripts to create a dynamic page.


Add a Record Insertion Form application object

You can use a Record Insertion Form application object to create a form which links to the fields of a database. The application object lets you select which fields to include in the form, label fields, and select the type of form objects to insert. When a user enters data in the form fields and clicks the submit button, a new record is inserted in a database. You can also set a page to open after a record has successfully been submitted so the submitter knows the database was updated.

  1. In the Site panel, locate the file named customerInsert, then double-click the file to open it.

    2. The document opens in the Document window.
    This is a picture of the feature being described.

  2. Place the insertion point in the document after the word “possible”, then press Enter or Return to set where the application object will be inserted.
  3. Do one of the following to insert a record insertion object:
    • In the Insert bar’s Application tab, click the Record Insertion Form button.
      This is a picture of the feature being described.
    • Choose Insert > Application Objects > Record Insertion Form.

      • The Record Insertion Form dialog box appears.
      This is a picture of the feature being described.

  4. In the Data Source (ColdFusion) or Connection pop-up menu, choose connGlobal.
  5. In the Table pop-up menu, make sure COMMENTS is selected.
  6. In the After Inserting, Go To or On Success, Go To (ASP.NET) text box, click Browse.
  7. In the dialog box that appears, select the file named insertOK, then click OK to close the dialog box.

    8. You’ve selected a page to display to a site visitor to acknowledge receipt of the information they’ve submitted.


Create the insert form

In the Form Fields section of the Record Insertion Form dialog box, you define the form a visitor enters data into.

  1. In the Record Insertion Form dialog box, remove the fields you don’t want included in the form by doing the following:

    2. Select COMMENT_ID, then click the minus (-) button.

    Select TELEPHONE, then click the minus (-) button.

    Select SUBMIT_DATE, then click the minus (-) button.

    Select ANSWERED, then click the minus (-) button.

  2. If you are creating a page for ASP.NET, change the alphabetical order of the form fields by doing the following:

    3. In the Column list, select COMMENTS, then click the Down arrow button to position COMMENTS below LAST_NAME.

    In the Column list, select EMAIL, then click the Down arrow button to position it below LAST_NAME.

  3. In the Form Fields list, select FIRST_NAME to specify how the field will be displayed in the form.
  4. In the Label field, enter First Name.

    5. This is the label that will appear in the HTML form next to the text field.

  5. Set the type of form object for the field by doing one of the following:
    • If you are using ASP.NET, in Display As accept the default value Text Field and in the Submit As pop-up menu, change the default value WChar to VARCHAR.
    • If you are using other server page types, in Display As accept the default value Text Field and in Submit As accept the default value Text.
  6. In the Default Value field, type Enter your first name to set initial text for the field which lets the user know the type of information to provide.

    7. The FIRST_NAME entry should look similar this when you are done.
    This is a picture of the feature being described.

  7. Repeat steps 3–6 for the LAST_NAME and EMAIL form fields.

    8. In the Default Value text box, enter the initial text you want to appear in the field when it is displayed in the form.

  8. Select COMMENTS to set values for this field.
  9. In the Label field, enter Comments.
  10. Set values for the Comments form field by doing one of the following:
    • If you are using ASP.NET, in the Display As pop-up menu select Text Area, then in the Submit As pop-up menu, select VARCHAR.
    • If you are using other server page types, in the Display As pop-up menu, select Text Area, and in the Submit As pop-up menu accept the default value Text.
  11. In Default Value text box, enter text that will initially appear in this field in the form or leave this field blank.

    12. The dialog box should look similar to this when you are done:
    This is a picture of the feature being described.

  12. Click OK to close the dialog box.

    13. The Record Insertion Form application object is inserted in the document.
    This is a picture of the feature being described.

  13. Save your document.


Copy files to the server

Next, you’ll save your changes, and copy the files you’ve updated to your server. After you copy the files, you’ll view the insert record page, add a comment or question, and submit the data to test the application.

  1. In the Site panel, select customerInsert, then click the Put File(s) button (blue up arrow) to copy the local file to your server.
  2. Dreamweaver asks whether you want to copy dependent files to the server, select Yes.

    3. Note: With some server models, Dreamweaver creates a Connections folder in your local folder. You must also copy that folder to your remote server for the web application to work. In the Site panel, select the Connections folder, then click the Put File (s) button to copy the folder to your server.

  3. With customerInsert selected, choose File > Preview in Browser or press F12 (Windows) to view your document.
  4. Enter test data in the form, then click the Insert Record button in the document to submit your data.

    5. Information updates in the database, and the insertOK page appears.


View the update

Let’s view the changes you made to the database. You can view the changes by opening the customerComment document you created in the first part of this lesson, or you can view the changes by viewing the database.

  • In Dreamweaver, in the Site panel, double-click the document named customerComment, then select File > Preview in Browser, and select a browser to view the page in.

    • The record you entered appears in the Customer Comments list.

  • In Dreamweaver, in the Database panel (Window > Database), locate the connGlobal database icon, click the plus (+) button in front of Tables to view the list of tables in the database. Right-click (Windows) or Control-click (Macintosh), the COMMENTS table and select View Data.

    • A list of the records in the database appears; the comment you just entered appears as the last entry in the table.


Further reading

The Getting Started guide touches on a small set of tools you can work with to create dynamic, data-driven pages. You learned how to create recordsets to define the data you want to use in your website. You also used a Dreamweaver application object to create an effective web application that allows you to interact with database-stored data.

For information on building a website in Dreamweaver, see Creating Your First Website in Dreamweaver. For information about using Dreamweaver coding features, see Editing code in Dreamweaver.

For more detailed information about topics covered in this part of the Getting Started with Dreamweaver MX guide, see the following topics in the online guide, Using Dreamweaver MX (Help > Using Dreamweaver MX):

  • Storing and Retrieving Data for Your Page
  • Defining Sources of Dynamic Data
  • Adding Dynamic Content to Web Pages
  • Creating recordset navigation links
  • Building an insert page rapidly
  • Building an insert page block by block
Previous


Installing a Web Server in Windows

To develop and test dynamic web pages, you need a functioning web server. This chapter describes how most Windows users can install and use a Microsoft web server on their local computer.

Macintosh users can use a web server on a network computer or a web hosting company. Mac OS X 10.1 users can use the Apache web server on their local computer. For more information on the Apache server, visit the Apache website. Please note, however, that the root folder of the Apache server differs from the root folder of the Microsoft servers discussed in this guide (Inetpub\wwwroot).

This chapter contains the following sections:

  • Getting started
  • Installing Personal Web Server
  • Installing Internet Information Server
  • Testing the web server
  • Web server basics

Note: Macromedia does not provide technical support for third-party software such as Microsoft Personal Web Server. If you need assistance, please contact Microsoft technical support.
Next


Getting started

If you’re a Windows user, you can install and run the following web servers on your computer: Microsoft Personal Web Server (PWS) or Internet Information Server (IIS), a full-featured version of PWS. You can also install the web server on a networked Windows computer so other developers on your team can use it.

Note: Windows Millennium Edition (Me) does not support any version of PWS or IIS. For more information, see the Microsoft website.

PWS or IIS may already be installed on your computer. Check your folder structure to see if it contains a C:\Inetpub or D:\Inetpub folder. PWS and IIS create this folder during installation.

If the folder does not exist, do one the following:

  • Windows 98: Copy the PWS setup file from the Windows 98 CD to your hard disk. The file is located in the Add-Ons/PWS folder. Next, install the web server. For instructions, see Installing Personal Web Server.
  • Windows NT Workstation: Download the NT 4.0 Option Pack from the Microsoft website. The Option Pack includes the PWS setup file. Next, install the web server. For instructions, see Installing Personal Web Server.

    • Note: Service Pack 6 or higher must be installed on your computer to install the NT 4.0 Option Pack. Download the Service Pack from the Microsoft website.

  • Windows NT Server: IIS should be installed and running on your system. If not, install it or ask your system administrator to install it for you.
  • Windows 2000: IIS might be installed on your system. If not, you need to install it. For more information, see Installing Internet Information Server.
  • Windows XP Professional: IIS might be installed on your system. If not, you need to install it. For more information, see Installing Internet Information Server.

Related topic

Web server basics


Installing Personal Web Server

Windows 98 and NT Workstation users should install PWS. If you’re a Windows NT Server, Windows 2000, or Windows XP Professional user, install IIS instead. For more information, see Installing Internet Information Server.

Note: Windows Millennium Edition (Me) does not support any version of PWS. For more information, see the Microsoft website.

You can install PWS on the same Windows system that runs Dreamweaver MX. Make sure Microsoft Internet Explorer 4.01 or later is installed on the system or PWS won’t install.

To install PWS:
  1. Double-click the PWS installation file on the Windows 98 CD or the file you downloaded from the Microsoft website.
  2. Follow the installation wizard.
  3. When asked for your default web publishing home directory, accept the default directory:

    4. C:\Inetpub\wwwroot

  4. Click Finish to end the installation process.

You can test the web server after installing it. See Testing the web server.

Related topic

Web server basics


Installing Internet Information Server

Windows NT Server, Windows 2000, and Windows XP Professional users should install IIS. If you’re a Windows 98 or NT Workstation user, install PWS instead. For more information, see Installing Personal Web Server.

If you’re a Windows NT Server user, IIS should be installed and running on your system. If not, install it or ask your system administrator to install it for you.

If you’re a Windows 2000 or Windows XP Professional user, make sure IIS is installed and running on your system. The way to do this is to look for the C:\Inetpub folder. If it doesn’t exist, IIS is probably not installed on your system.

To install IIS on Windows 2000 and XP Professional:
  1. In Windows 2000, choose Start > Settings > Control Panel > Add/Remove Programs; in Windows XP, choose Start > Control Panel > Add/Remove Programs.
  2. Choose Add/Remove Windows Components.
  3. Select the IIS box and follow the installation instructions.

You can test the web server after installing it. See Testing the web server.

Related topic

Web server basics


Testing the web server

To test the web server, create a simple HTML page with an .htm or .html file extension and save it in the Inetpub\wwwroot folder on your computer. The HTML page can consist of a single line, such as:

<p>My web server is working.</p>

Save the page as myTestFile.htm. Next, open the test page in a web browser with an HTTP request. If PWS or IIS is running on your local computer, enter the following URL in your web browser:

http://localhost/myTestFile.htm

If PWS or IIS is running on a networked computer, use the networked computer’s name as the domain name. For example, if the name of the computer running PWS or IIS is kojak-pc, enter the following URL in your browser:

http://kojak-pc/myTestFile.htm

Note: For more information on computer names, see Web server basics.

If the browser displays your page, the web server is running normally.

If the browser fails to display the page, make sure the server is running. Double-click the web server icon in the system tray (the icon looks like a hand holding a web page). The Personal Web Manager dialog box appears. If the Publishing panel tells you web publishing is off, click the Start button.

If the page still fails to open, make sure your test page is located in the Inetpub\wwwroot folder and has an .htm or .html file extension.


Web server basics

A web server is software that serves web pages in response to requests from web browsers. A web server is sometimes called an HTTP server.

Suppose you want to use PWS to develop web applications. If the server is started, an icon appears in the system tray on the lower right corner of your desktop telling you PWS is running. (The icon depicts a hand holding a web page.) Double-clicking this icon launches Personal Web Manager, which you can use to administer your web pages. The following shows Personal Web Manager:

This is a picture of the feature being described.

The default name of your web server is the name of your computer (cnadeau_pc1, in this example). You can change the server name by changing the name of your computer. If your computer has no name, the server uses the word localhost.

The server name stands for (or is an alias for) the server’s root folder, which is most likely C:\Inetpub\wwwroot. You can open any web page stored in the root folder by entering the following URL in a browser running on your computer:

http://myServerName/myFileName

For example, if the server name is mer_noire and a web page called soleil.htm is stored in C:\Inetpub\wwwroot\, you can open the page by entering the following URL in a browser running on the local computer:

http://mer_noire/soleil.htm

You can also open any web page stored in any subfolder of the root folder by specifying the subfolder in the URL. For example, suppose the soleil.htm file is stored in a subfolder called gamelan, as follows:

C:\Inetpub\wwwroot\gamelan\soleil.htm

You can open this page by entering the following URL in a browser running on your computer:

http://mer_noire/gamelan/soleil.htm

When the web server is running on your computer, you can replace the server name with localhost. For example, the following URLs open the same page in a browser:

http://mer_noire/gamelan/soleil.htm

http://localhost/gamelan/soleil.htm

Note: Another expression you can use instead of the server name or localhost is 127.0.0.1 (for example, http://127.0.0.1/gamelan/soleil.htm).

Related topics

Installing Personal Web Server

Installing Internet Information Server

Testing the web server

Previous


Setup for Sample ColdFusion Site

.Macromedia Dreamweaver MX comes with sample ColdFusion pages to let you build a small web application. This chapter describes one way to set up the sample application if you’re using ColdFusion with Microsoft Internet Information Server (IIS) or Personal Web Server (PWS). For more information on these web servers, see Installing a Web Server in Windows. If you’re using ColdFusion MX with a different web server, see Setting Up a Web Application.

Setting up a web application is a three-step process. First, configure your system. Second, define a Dreamweaver site. Third, connect the application to your database. This setup guide follows this three-step process.

This chapter contains the following sections:

  • Setup checklists for ColdFusion developers
  • Configuring your system
  • Defining a Dreamweaver site
  • Connecting to the sample database
Next


Setup checklists for ColdFusion developers

To set up a web application, you must configure your system, define a Dreamweaver site, and connect to a database. This section provides checklists for each task. The procedures are described in the rest of the chapter.

Configure your system:
  1. Make sure you have a web server.
  2. Install the ColdFusion application server.
  3. Create a root folder.
Define a Dreamweaver site:
  1. Copy the sample files to a folder on your hard disk.
  2. Define the folder as a Dreamweaver local folder.
  3. Define a web server folder as a Dreamweaver remote folder.
  4. Specify a folder to process dynamic pages.
  5. Upload the sample files to the web server.
Connect to the database:
  1. If you have a remote server configuration, copy the sample database to the remote computer.
  2. Create a ColdFusion data source in ColdFusion Administrator.
  3. View the connection in Dreamweaver.


Configuring your system

This section provides instructions for two common system configurations—one where Microsoft IIS or PWS is installed on your hard disk, and one where IIS or PWS is installed on a remote Windows computer. If you don’t want to use these configurations, see Setting Up a Web Application.

The following illustration shows the two configurations described in this section:

This image shows the components of the following configurations: a local configuration for Windows users, and a remote server configuration for Macintosh and Windows users.

To configure your system:
  1. Make sure you have a web server (see Checking for a web server).
  2. Install the ColdFusion application server (see Installing ColdFusion MX).
  3. Create a root folder (see Creating a root folder).

Note: Installing the web server and application server are one-time-only tasks.


Checking for a web server

To develop and test dynamic web pages, you need a web server. A web server is software that serves web pages in response to requests from web browsers.

Make sure Microsoft IIS or PWS is installed and running on your hard disk or on a remote Windows computer. (Macintosh users need to install Microsoft IIS or PWS on a remote Windows computer.) A quick way to check whether PWS or IIS is installed on a system is to look at the folder structure. Does it contain a c:\Inetpub or d:\Inetpub folder? PWS and IIS create this folder during installation.

If PWS or IIS is not installed on the system, install it now. For instructions, see Installing a Web Server in Windows.

After installing the web server, install the application server. See Installing ColdFusion MX.


Installing ColdFusion MX

To process dynamic web pages, you need an application server. An application server is software that helps a web server process web pages containing server-side scripts or tags. When such a page is requested from the server, the web server hands the page off to the application server for processing before sending the page to the browser.

Make sure the ColdFusion MX application server is installed and running on the system running PWS or IIS. (PWS or IIS may be located on your hard disk or on a remote Windows computer.)

You can download and install a fully functional, developer edition of ColdFusion MX from the Macromedia website. A copy of ColdFusion MX Server Developer Edition is also available on the Dreamweaver CD (Windows version only).

To install ColdFusion MX:
  1. Close all open applications.
  2. If applicable, log into the Windows system using the Administrator account.
  3. Double-click the ColdFusion MX installer file.
  4. Follow the installation instructions.

For more information, see the ColdFusion documentation in Dreamweaver (Help > Using ColdFusion).

After installing and starting ColdFusion, create a root folder for your web application. See Creating a root folder.


Creating a root folder

After the server software is installed, create a root folder for your web application on the system running Microsoft PWS or IIS, and make sure the folder has the necessary permissions.

To create a root folder for your web application:
  1. Create a folder called MySampleApp on the system running PWS or IIS.

    2. A good place to create the folder is in C:\Inetpub\wwwroot\. By default, your PWS or IIS web server is set up in the Inetpub\wwwroot folder. The web server will serve any page in this folder or in any of its subfolders in response to a HTTP request from a web browser.

  2. Make sure the Read and Scripts permissions are enabled for the folder.

    3. If you’re using PWS, launch Personal Web Manager by double-clicking the web server icon in the system tray. (The icon depicts a hand holding a web page.) In Personal Web Manager, click the Advanced icon. The Advanced Options dialog box appears. Select Home and click Edit Properties. The Edit Directory dialog box appears. Make sure the Read and Scripts options are selected. For security reasons, you should not select the Execute option.

If you’re using IIS, launch the IIS administrative tool (in Windows XP, select Start > Control Panel > Performance Maintenance > Administrative Tools > Internet Information Services). Under Web Sites > Default Web Site, right-click your MySampleSite folder and choose Properties from the pop-up menu. In the Execute Permissions text box, make sure the Scripts option is selected. For security reasons, do not select the “Scripts and Executables” option.

The web server is now configured to serve web pages in your root folder in response to HTTP requests from web browsers.

After configuring your system, you must define a Dreamweaver site. See Defining a Dreamweaver site.


Defining a Dreamweaver site

After configuring your system, you must copy the sample files to a local folder and define a Dreamweaver site to manage the files.

Note: Macromedia HomeSite and ColdFusion Studio users can think of a Dreamweaver site as a HomeSite or Studio project.

To define a Dreamweaver site:
  1. Copy the sample files to a folder on your hard disk (see Copying the sample files).
  2. Define the folder as a Dreamweaver local folder (see Defining a local folder).
  3. Define your root folder on the web server as a Dreamweaver remote folder (see Defining a remote folder).
  4. Specify a folder to process dynamic pages (see Specifying where dynamic pages can be processed).
  5. Upload the sample files to the web server (see Uploading the samples files).


Copying the sample files

If not already done, copy the sample files from the Dreamweaver application folder to a folder on your hard disk.

To copy the sample files:
  1. Create a new folder called Sites on your hard disk.

    2. For example, create C:\Sites (Windows) or Hard Drive:Documents:Sites (Macintosh).

  2. Locate the GettingStarted folder in the Dreamweaver application folder on your hard disk.

    3. The path to the folder is as follows:

    \Macromedia\Dreamweaver MX\Samples\GettingStarted\

  3. Copy the GettingStarted folder into the Sites folder.

After copying the GettingStarted folder, define the folder as a Dreamweaver local folder. See Defining a local folder.


Defining a local folder

After copying the GettingStarted folder, define the folder containing the ColdFusion sample files as a Dreamweaver local folder.

To define the Dreamweaver local folder:
  1. In Dreamweaver, select Site > New Site.

    2. The Site Definition dialog box appears.

  2. If the wizard is showing, click Advanced.
  3. In the Site Name text box, enter GlobalCar - ColdFusion.

    4. The name identifies your site within Dreamweaver.

  4. In the Local Root Folder text box, specify the folder in the GettingStarted folder that contains the ColdFusion sample files.

    5. You can click the folder icon next to the text box to find and select the folder. In Windows, the folder should be as follows:

    C:\Sites\GettingStarted\Develop\coldfusion

    On the Macintosh, the folder should be as follows:

    Hard Drive:Documents:Sites:GettingStarted:Develop:coldfusion

Leave the Site Definition dialog box open. You need to define a web server folder as a Dreamweaver remote folder next. See Defining a remote folder.


Defining a remote folder

After defining a local folder, define a web server folder as a Dreamweaver remote folder.

To define the Dreamweaver remote folder:
  1. In the advanced Site Definition dialog box, click Remote Info in the Category list.

    2. The Remote Info screen appears.

  2. In the Access text box, choose how you want to move your files to and from the server—directly (the Local/Network option) or FTP.
  3. Enter the path or FTP settings to the web server folder you created in Creating a root folder.

    4. The folder may be on your hard disk or on a remote computer. Even if you created the folder on your hard disk, that folder is still the valid “remote” folder. Here’s an example if you chose Local/Network access:

    Remote Folder: c:\Inetpub\wwwroot\MySampleApp

    For more information on FTP, see Setting Remote Info options for FTP access.

Leave the Site Definition dialog box open. You need to define a folder to process dynamic pages next.See Specifying where dynamic pages can be processed.


Specifying where dynamic pages can be processed

After defining the Dreamweaver remote folder, specify a folder to process dynamic pages as described in this section. Dreamweaver uses this folder to display dynamic pages and connect to databases while you work.

To specify the folder to process dynamic pages:
  1. In the advanced Site Definition dialog box, click Testing Server in the Category list.

    2. The Testing Server screen appears. Dreamweaver needs the services of a testing server to generate and display dynamic content while you work. The testing server can be your local computer, a development server, a staging server, or a production server. As long as it can process ColdFusion pages, the choice doesn’t matter. In this case, you can use the same settings as the Remote Info category (see Defining a remote folder) because they point to a server capable of processing ColdFusion pages.

  2. Select ColdFusion as your server technology.
  3. In the Access text box, choose the method (Local/Network or FTP) you specified for accessing your remote folder.

    4. Dreamweaver enters the settings you specified in the Remote Info category. Leave the settings unchanged.

  4. In the URL Prefix text box, enter the root URL you would enter in a web browser to request a page in your web application.

    5. To display live data in your pages while you work, Dreamweaver creates a temporary file, copies it to the website’s root folder, and attempts to request it using the URL prefix.

    Dreamweaver makes a best guess at the URL prefix based on the information you provided in the Site Definition dialog box. For example, if the folder specified in the Remote Folder text box is c:\Inetpub\wwwroot\MySampleApp, then the URL prefix should be as follows:

    http://localhost/MySampleApp/

    Tip: The URL prefix should never specify a particular page on the site.

    However, the suggested URL prefix may be incorrect. Correct or enter a new URL prefix if Dreamweaver’s suggestion is incorrect. For more information, see About the URL prefix.

  5. Click OK, then Done.

After specifying a folder to process dynamic pages, upload the sample files to the web server. See Uploading the samples files.


Uploading the samples files

After specifying a folder to process dynamic pages, upload the sample files to the web server as described in this section. You must “upload” the files even if the web server is running on your local computer.

If you don’t upload the files, features such as Live Data view and Preview in Browser may not work properly with dynamic pages. For example, image links might be broken in Live Data view because the image files are not on the server yet. Similarly, clicking a link to a detail page while previewing a master page in a browser will cause an error if the detail page is missing from the server.

To upload the samples files to the web server:
  1. In the Site panel (Window > Site), select the root folder in the Local Files pane.

    2. The root folder should be the first folder in the list.

  2. Click the blue up arrow on the toolbar.

    3. Dreamweaver copies all the files to the web server folder you defined in Defining a remote folder.

The Dreamweaver site is defined. The next step is to connect to the sample database installed with Dreamweaver. See Connecting to the sample database .


Connecting to the sample database

During installation, Dreamweaver copies a sample Microsoft Access database to your hard disk. This section describes how to create a connection to the sample database.

Note: If you want to connect to another database, see Database Connections for ColdFusion Developers.

To create a database connection:
  1. If you have a remote server configuration, copy the sample database to the remote computer (see Setting up the database (remote server configuration)).
  2. Create a ColdFusion data source in ColdFusion Administrator (see Creating a ColdFusion data source).
  3. View the connection in Dreamweaver (see Connecting to the database).


Setting up the database (remote server configuration)

This section applies only if you have a remote server configuration—that is, if your web server is running on a remote computer. If your web server is running on the same computer as Dreamweaver, skip to Creating a ColdFusion data source.

Before attempting to connect to the sample database, copy the database to the remote computer’s hard disk. The database file, global.mdb, is located in the following folder on your local hard disk:

\Macromedia\Dreamweaver MX\Samples\Database\global.mdb

You can place the file in any folder on the remote computer, or you can create a new folder for it.

After the database is in place, create a ColdFusion data source in ColdFusion Administrator. See Creating a ColdFusion data source.


Creating a ColdFusion data source

Create a ColdFusion data source called connGlobal in ColdFusion Administrator pointing to the sample database file.

To create a ColdFusion data source:
  1. In Dreamweaver, open a ColdFusion page.
  2. In the Databases panel (Window > Databases), click the Modify Data Sources icon (the second icon from the right on the panel toolbar).

    3. ColdFusion Administrator opens in a browser.

  3. Log in to ColdFusion Administrator and create a data source called connGlobal pointing to the global.mdb database file.

    4. If ColdFusion is running on your local computer, create a data source that points to the database file in the following folder:

    c:\Program Files\Macromedia\Dreamweaver MX\Samples\Database\global.mdb

    If ColdFusion is running on a remote computer, create a data source that points to the database file you placed on the remote computer in Setting up the database (remote server configuration).

    For more information, see the ColdFusion documentation in Dreamweaver (Help > Using ColdFusion).

After creating the ColdFusion data source, you can connect to the database in Dreamweaver. See Connecting to the database.


Connecting to the database

After creating the ColdFusion data source (see Creating a ColdFusion data source), you can use it to connect to the database in Dreamweaver.

Open any ColdFusion page in Dreamweaver, then open the Databases panel (Window > Databases). Your ColdFusion data sources appear in the panel.

If the data source you created does not appear in the panel, do one of the following:

  • Double-check the connection parameters in ColdFusion Administrator.
  • Check the settings for the folder Dreamweaver uses to process dynamic pages (see Specifying where dynamic pages can be processed).
  • Consult Troubleshooting Database Connections.

If the data source called connGlobal appears in the panel, the sample ColdFusion application is set up for the Getting Started guide and the tutorials. See Developing a Web Application in Dreamweaver MX and the tutorials in Dreamweaver Help (Help > Tutorials).

Previous


Setup for Sample ASP.NET Site

Macromedia Dreamweaver MX comes with sample ASP.NET pages to let you build a small web application. This chapter describes one way to set up the sample application.

This chapter applies to ASP.NET developers. If you want to explore ASP, see Setup for Sample ASP Site.

Setting up a web application is a three-step process. First, configure your system. Second, define a Dreamweaver site. Third, connect the application to your database. This setup guide follows this three-step process.

This chapter contains the following sections:

  • Setup checklist for ASP.NET developers
  • Configuring your system
  • Defining a Dreamweaver site
  • Connecting to the sample database (local configuration)
  • Connecting to the sample database (remote server configuration)
Next


Setup checklist for ASP.NET developers

To set up a web application, you must configure your system, define a Dreamweaver site, and connect to a database. This section provides checklists for each task. The procedures are described in the rest of the chapter.

Configure your system:
  1. Make sure you have a web server.
  2. Install the Microsoft .NET Framework.
  3. Create a root folder.
Define a Dreamweaver site:
  1. Copy the sample files to a folder on your hard disk.
  2. Define the folder as a Dreamweaver local folder.
  3. Define a web server folder as a Dreamweaver remote folder.
  4. Specify a folder to process dynamic pages.
  5. Upload the sample files to the web server.
Connect to the database (local configuration):

Create the connection in Dreamweaver.

Connect to the database (remote server configuration):

Copy the database to the remote computer and create the connection in Dreamweaver.


Configuring your system

This section provides instructions for two common system configurations—one where Windows 2000 or Windows XP Professional is installed on your hard disk, and one where Windows 2000 or Windows XP Professional is installed on a remote computer. If you don’t want to use these configurations, see Setting Up a Web Application.

The following illustration shows the two configurations described in this section:

This image shows the components of the following configurations: a local configuration for Windows 2000 or XP users, and a remote server configuration for Macintosh and other Windows users.

To configure your system:
  1. Make sure you have a web server (see Checking for a web server).
  2. Install the .NET Framework (see Installing the .NET Framework).
  3. Create a root folder (see Creating a root folder).

Note: Installing the web server and the .NET Framework are one-time-only tasks.


Checking for a web server

To develop and test dynamic web pages, you need a web server. A web server is software that serves web pages in response to requests from web browsers.

ASP.NET pages only work with one web server: Microsoft IIS 5 or higher. PWS is not supported. Also, because IIS 5 is a service of the Windows 2000 and Windows XP Professional operating systems, you can only use these two versions of Windows to run ASP.NET applications. Windows 98, ME, or NT are not supported.

Make sure IIS 5 is installed and running on a Windows 2000 or Windows XP Professional computer. IIS 5 can be installed on your hard disk if you have Windows 2000 or Windows XP Professional, or on a remote computer. If you’re a Windows 98, Windows ME, Windows NT, Windows XP Home Edition, or Macintosh user, you must run IIS 5 on a remote Windows 2000 or Windows XP Professional computer.

A quick way to check whether IIS is installed on your system is to look at the folder structure. Does it contain a c:\Inetpub or d:\Inetpub folder? IIS creates this folder during installation.

If IIS is not installed, install it now. For instructions, see Installing Internet Information Server.

After installing the web server, install the .NET Framework. See Installing the .NET Framework.


Installing the .NET Framework

To process dynamic web pages, you need an application server. An application server is software that helps a web server process web pages containing server-side scripts or tags. When such a page is requested from the server, the web server hands the page off to the application server for processing before sending the page to the browser.

In ASP.NET, the application server is called the .NET Framework. Make sure the .NET Framework is installed and running on the Windows 2000 or Windows XP Professional system running IIS 5 or higher. (IIS may be located on your hard disk or on a remote computer.)

To install the .NET Framework, download the Framework from the Microsoft website and follow the installation instructions on the website. If you’re a Windows 98, Windows ME, Windows NT, Windows XP Home Edition, or Macintosh user, then you must install the .NET Framework on a remote Windows 2000 or Windows XP Professional computer running IIS 5.

After installing the .NET Framework, create a root folder for your web application. See Creating a root folder.


Creating a root folder

After the server software is installed, create a root folder for your web application on the system running Microsoft IIS, and make sure the folder has the necessary permissions.

To create a root folder for your web application:
  1. Create a folder called MySampleApp on the system running IIS.

    2. A good place to create the folder is in C:\Inetpub\wwwroot\. By default, your IIS web server is set up in the Inetpub\wwwroot folder. The web server will serve any page in this folder or in any of its subfolders in response to a HTTP request from a web browser.

  2. Make sure the Scripts permission is enabled for the folder.

    3. Launch the IIS administrative tool (in Windows XP, select Start > Control Panel > Performance Maintenance > Administrative Tools > Internet Information Services). Under Web Sites > Default Web Site, right-click your MySampleSite folder and choose Properties from the pop-up menu. In the Execute Permissions text box, make sure the Scripts option is selected. For security reasons, do not select the “Scripts and Executables” option.

The web server is now configured to serve web pages in your root folder in response to HTTP requests from web browsers.

After configuring your system, you must define a Dreamweaver site. See Defining a Dreamweaver site.


Defining a Dreamweaver site

After configuring your system, you must copy the sample files to a local folder and define a Dreamweaver site to manage the files.

Note: Macromedia HomeSite and ColdFusion Studio users can think of a Dreamweaver site as a HomeSite or Studio project.

To define a Dreamweaver site:
  1. Copy the sample files to a folder on your hard disk (see Copying the sample files).
  2. Define the folder as a Dreamweaver local folder (see Defining a local folder).
  3. Define a web server folder as a Dreamweaver remote folder (see Defining a remote folder).
  4. Specify a folder to process dynamic pages (see Specifying where dynamic pages can be processed).
  5. Upload the sample files to the web server (see Uploading the samples files).


Defining a local folder

After copying the GettingStarted folder, define the folder containing the ASP.NET sample files as a Dreamweaver local folder.

To define the Dreamweaver local folder:
  1. In Dreamweaver, select Site > New Site.

    2. The Site Definition dialog box appears.

  2. If the wizard is showing, click Advanced.
  3. In the Site Name text box, enter GlobalCar - ASP.NET.

    4. The name identifies your site within Dreamweaver.

  4. In the Local Root Folder text box, specify the folder in the GettingStarted folder that contains the ASP.NET sample files.

    5. You can click the folder icon next to the text box to find and select the folder. In Windows, the folder should be as follows:

    C:\Sites\GettingStarted\Develop\aspnet

    On the Macintosh, the folder should be as follows:

    Hard Drive:Documents:Sites:GettingStarted:Develop:aspnet

Leave the Site Definition dialog box open. You need to define a web server folder as a Dreamweaver remote folder next. See Defining a remote folder.


Defining a remote folder

After defining a local folder, define a web server folder as a Dreamweaver remote folder as described in this section.

To define the Dreamweaver remote folder:
  1. In the advanced Site Definition dialog box, click Remote Info in the Category list.

    2. The Remote Info screen appears.

  2. In the Access text box, choose how you want to move your files to and from the server—directly (the Local/Network option) or FTP.
  3. Enter the path or FTP settings to the web server folder you created in Creating a root folder.

    4. The folder may be on your hard disk or on a remote computer. Even if you created the folder on your hard disk, that folder is still the valid “remote” folder. Here’s an example if you chose Local/Network access:

    Remote Folder: c:\Inetpub\wwwroot\MySampleApp

    For more information on FTP, see Setting Remote Info options for FTP access.

Leave the Site Definition dialog box open. You need to define a folder to process dynamic pages next.See Specifying where dynamic pages can be processed.


Specifying where dynamic pages can be processed

After defining the Dreamweaver remote folder, specify a folder to process dynamic pages as described in this section. Dreamweaver uses this folder to display dynamic pages and connect to databases while you work.

To specify the folder to process dynamic pages:
  1. In the advanced Site Definition dialog box, click Testing Server in the Category list.

    2. The Testing Server screen appears. Dreamweaver needs the services of a testing server to generate and display dynamic content while you work. The testing server can be your local computer, a development server, a staging server, or a production server. As long as it can process ASP.NET pages, the choice doesn’t matter. In this case, you can use the same settings as the Remote Info category (see Defining a remote folder) because they point to a server capable of processing ASP.NET pages.

  2. Select ASP.NET VB or ASP.NET C# as your server technology.
  3. In the Access text box, choose the method (Local/Network or FTP) you specified for accessing your remote folder.

    4. Dreamweaver enters the settings you specified in the Remote Info category. Leave the settings unchanged.

  4. In the URL Prefix text box, enter the root URL you would enter in a web browser to request a page in your web application.

    5. To generate and display dynamic content while you work, Dreamweaver creates a temporary file, copies it to the website’s root folder, and attempts to request it using the URL prefix.

    Dreamweaver makes a best guess at the URL prefix based on the information you provided in the Site Definition dialog box. For example, if the folder specified in the Remote Folder text box is c:\Inetpub\wwwroot\MySampleApp, then the URL prefix should be as follows:

    http://localhost/MySampleApp/

    Tip: The URL prefix should never specify a particular page on the site.

    However, the suggested URL prefix may be incorrect. Correct or enter a new URL prefix if Dreamweaver’s suggestion is incorrect. For more information, see About the URL prefix.

  5. Click OK, then Done.

After specifying a folder to process dynamic pages, upload the sample files to the web server. See Uploading the samples files.


Uploading the samples files

After specifying a folder to process dynamic pages, upload the sample files to the web server as described in this section. You must “upload” the files even if the web server is running on your local computer.

If you don’t upload the files, features such as Live Data view and Preview in Browser may not work properly with dynamic pages. For example, image links might be broken in Live Data view because the image files are not on the server yet. Similarly, clicking a link to a detail page while previewing a master page in a browser will cause an error if the detail page is missing from the server.

To upload the samples files to the web server:
  1. In the Site panel (Window > Site), select the root folder in the Local Files pane.

    2. The root folder should be the first folder in the list.

  2. Click the blue up arrow on the toolbar.

    3. Dreamweaver copies all the files to the web server folder you defined in Defining a remote folder.

The Dreamweaver site is defined. The next step is to connect to the sample database installed with Dreamweaver. If your web server runs on your local computer, see Connecting to the sample database (local configuration). If your web server runs on a remote computer, see Connecting to the sample database (remote server configuration).


Connecting to the sample database (local configuration)

During installation, Dreamweaver copies a sample Microsoft Access database to your hard disk. This section describes how to create a connection to the sample database if you have a local configuration—that is, if your web server is running on the same computer as Dreamweaver. If your web server is running on a remote computer, see Connecting to the sample database (remote server configuration).

Note: If you want to connect to another database, see Database Connections for ASP.NET Developers.

To create a connection with a local configuration:
  1. Open any ASP.NET page in Dreamweaver, then open the Databases panel (Window > Databases).
  2. Click the plus (+) button on the panel and select OLE DB Connection from the pop-up menu.

    3. The OLE DB Connection dialog box appears.

  3. Enter connGlobal as the connection name.
  4. Click the Templates button.

    5. The Connection String Template dialog box appears.

  5. From the list of templates, choose Microsoft Access 2000 (Microsoft Jet 4.0 Provider) and click OK.

    6. Dreamweaver adds a connection string template in the OLE DB Connection dialog box. The template contains placeholders for missing information in the connection string.

  6. For the Data Source value, enter the full path to the sample database file on your hard disk.

    7. For example, during installation Dreamweaver places the sample database file, global.mdb, in the following folder on your local hard disk:

    c:\Program Files\Macromedia\Dreamweaver MX\Samples\Database\global.mdb

    Note: The path may vary depending on where you installed Dreamweaver.

    Enter this path as the value of Data Source:

    Data Source=c:\Program Files\Macromedia\Dreamweaver MX\Samples\Database\global.mdb;
  7. Delete the User ID and the Password lines.

    8. The Access database does not require a user ID or password.

  8. Click Test.

    9. Dreamweaver attempts to connect to the database. If the connection fails, do the following:

    • Double-check the path to the database.
    • Check the settings for the folder Dreamweaver uses to process dynamic pages (see Specifying where dynamic pages can be processed).
    • Consult Troubleshooting Database Connections.
  9. Click OK.

    10. The new connection appears in the Databases panel.

The sample ASP.NET application is set up for the Getting Started guide and the tutorials. See Developing a Web Application in Dreamweaver MX and the tutorials in Dreamweaver Help (Help > Tutorials).


Connecting to the sample database (remote server configuration)

During installation, Dreamweaver copies a sample Microsoft Access database to your hard disk. This section describes how to create a connection to the sample database if you have a remote server configuration—that is, if your web server is running on a remote computer. If your web server is running on the same computer as Dreamweaver, see Connecting to the sample database (local configuration).

Note: If you want to connect to another database, see Database Connections for ASP.NET Developers.

To create a connection with a remote server configuration:
  1. Copy the sample database file to the remote computer.

    2. The database file, global.mdb, is located in the following folder on your local hard disk:

    \Macromedia\Dreamweaver MX\Samples\Database\global.mdb

    You can place the file in any folder on the remote computer, or you can create a new folder for it. In either case, write down the full path to the database file on a piece of paper.

  2. Open any ASP.NET page in Dreamweaver, then open the Databases panel (Window > Databases).
  3. Click the plus (+) button on the panel and select OLE DB Connection from the pop-up menu.

    4. The OLE DB Connection dialog box appears.

  4. Enter connGlobal as the connection name.
  5. Click the Templates button.

    6. The Connection String Template dialog box appears.

  6. From the list of templates, choose Microsoft Access 2000 (Microsoft Jet 4.0 Provider) and click OK.

    7. Dreamweaver adds a connection string template in the OLE DB Connection dialog box. The template contains placeholders for missing information in the connection string.

  7. For the Data Source value, enter the full path to the sample database file on the remote computer.

    8. Enter the path you noted in step 1. For example, the path on the network computer could be as follows:

    Data Source=c:\users\Denman\Sites\data\global.mdb;

  8. Delete the User ID and the Password lines.
  9. Click Test.

    10. Dreamweaver attempts to connect to the database on the network computer. If the connection fails, do the following:

    • Double-check the path to the database.
    • Check the settings for the folder Dreamweaver uses to process dynamic pages (see Specifying where dynamic pages can be processed).
    • Consult Troubleshooting Database Connections.
  10. Click OK.

    11. The new connection appears in the Databases panel.

The sample ASP.NET application is set up for the Getting Started guide and the tutorials. See Developing a Web Application in Dreamweaver MX and the tutorials in Dreamweaver Help (Help > Tutorials).

Previous


Setup for Sample ASP Site

Macromedia Dreamweaver MX comes with sample Microsoft Active Server Pages (ASP) to let you build a small web application. This chapter describes one way to set up the sample application using Microsoft Internet Information Server (IIS) or Personal Web Server (PWS). For more information on these web servers, see Installing a Web Server in Windows. If you’re using a different web server, see Setting Up a Web Application.

This chapter applies to ASP developers only. If you want to explore ASP.NET, see Setup for Sample ASP.NET Site.

Setting up a web application is a three-step process. First, configure your system. Second, define a Dreamweaver site. Third, connect the application to your database. This setup guide follows this three-step process.

This chapter contains the following sections:

  • Setup checklist for ASP developers
  • Configuring your system
  • Defining a Dreamweaver site
  • Connecting to the sample database (local configuration)
  • Connecting to the sample database (remote server configuration)
Next


Setup checklist for ASP developers

To set up a web application, you must configure your system, define a Dreamweaver site, and connect to a database. This section provides checklists for each task. The procedures are described in the rest of the chapter.

Configure your system:
  1. Make sure you have a web server.
  2. Install an application server.
  3. Test your installation.
  4. Create a root folder.
Define a Dreamweaver site:
  1. Copy the sample files to a folder on your hard disk.
  2. Define the folder as a Dreamweaver local folder.
  3. Define a web server folder as a Dreamweaver remote folder.
  4. Specify a folder to process dynamic pages.
  5. Upload the sample files to the web server.
Connect to the database (local configuration):
  1. Create the connection in Dreamweaver.
Connect to the database (remote server configuration):
  1. Set up the sample database on the computer running your web server.
  2. Create the connection in Dreamweaver.


Configuring your system

This section provides instructions for two common system configurations—one where Microsoft IIS or PWS is installed on your hard disk, and one where IIS or PWS is installed on a remote Windows computer. If you don’t want to use these configurations, see Setting Up a Web Application.

The following illustration shows the two configurations described in this section:

This image shows the components of the following configurations: a local configuration for Windows users, and a remote server configuration for Macintosh and Windows users.

To configure your system:
  1. Make sure you have a web server (see Checking for a web server).
  2. If necessary, install an application server (see Installing an ASP application server).
  3. Test your installation (see Testing the installation).
  4. Create a root folder (see Creating a root folder).

Note: Installing the web server and application server are one-time only tasks.


Checking for a web server

To develop and test dynamic web pages, you need a web server. A web server is software that serves web pages in response to requests from web browsers.

Make sure Microsoft IIS or PWS is installed and running on your hard disk or on a remote Windows computer. (Macintosh users need to install Microsoft IIS or PWS on a remote Windows computer.) A quick way to check whether PWS or IIS is installed on a computer is to look at the folder structure. Does it contain a c:\Inetpub or d:\Inetpub folder? PWS and IIS create this folder during installation.

If PWS or IIS is not installed, install it now. For instructions, see Installing a Web Server in Windows.

After installing the web server, you normally need to install an application server. See Installing an ASP application server.


Installing an ASP application server

To process dynamic web pages, you need an application server. An application server is software that helps a web server process web pages containing server-side scripts or tags. When such a page is requested from the server, the web server hands the page off to the application server for processing before sending the page to the browser.

If you installed PWS or IIS on a Windows computer, then you don’t need a separate ASP application server. PWS and IIS also function as ASP application servers. For more information on installing and testing PWS or IIS, see Installing a Web Server in Windows.

You can test the server to make sure it works properly. See Testing the installation.


Testing the installation

You can test the ASP engine of PWS or IIS by running a test page, as described in this section.

To test the ASP engine of PWS or IIS:
  1. In Dreamweaver or any text editor, create a plain text file called timetest.asp.
  2. In the file, enter the following code:
    3. <p>This page was created at <b>
<%= Time %>
</b> on the computer running ASP.</p>

This code displays the time the page was processed on the server.
  3. Copy the file to the Inetpub\wwwroot folder of the Windows computer running PWS or IIS.
  4. In your web browser, enter the URL of your test page, then press Enter.

    5. If PWS or IIS is running on your local computer, you can enter the following URL:

    http://localhost/timetest.asp

The test page should open and display a time of day, as follows:

This is a picture of the feature being described.

The time specified is known as dynamic content because it changes every time you request the page. Click Refresh on your browser to generate a new page with a different time.

Note: Looking at the source code (View > Source in Internet Explorer) will confirm that the page does not use any client-side JavaScript to achieve this effect.

If the page doesn’t work as expected, check for the following possible errors:

  • The file does not have an .asp extension.
  • The page’s file path (c:\Inetput\wwwroot\timetest.asp), not its URL (for example, http://localhost/timetest.asp), is entered in the browser’s Address text box.

    • If you type a file path in the browser (as you might be used to doing with normal HTML pages), you bypass the web server and the application server. As a result, your page never gets processed by the server.

  • The URL contains a typing mistake. Check for errors and make sure the filename is not followed by a slash, such as http://localhost/timetest.asp/.
  • The page code contains a typing mistake.

After installing and testing the server software, create a root folder for your web application. See Creating a root folder.


Creating a root folder

After the server software is installed, create a root folder for your web application on the system running Microsoft PWS or IIS, and make sure the folder has the necessary permissions.

To create a root folder for your web application:
  1. Create a folder called MySampleApp on the system running PWS or IIS.

    2. A good place to create the folder is in C:\Inetpub\wwwroot\. By default, your PWS or IIS web server is set up in the Inetpub\wwwroot folder. The web server will serve any page in this folder or in any of its subfolders in response to an HTTP request from a web browser.

  2. Make sure the Read and Scripts permissions are enabled for the folder.

    3. If you’re using PWS, launch Personal Web Manager by double-clicking the web server icon in the system tray. (The icon depicts a hand holding a web page.) In Personal Web Manager, click the Advanced icon. The Advanced Options dialog box appears. Select Home and click Edit Properties. The Edit Directory dialog box appears. Make sure the Read and Scripts options are selected. For security reasons, you should not select the Execute option.

    If you’re using IIS, launch the IIS administrative tool (in Windows XP, select Start > Control Panel > Performance Maintenance > Administrative Tools > Internet Information Services). Under Web Sites > Default Web Site, right-click your MySampleSite folder and choose Properties from the pop-up menu. In the Execute Permissions text box, make sure the Scripts option is selected. For security reasons, do not select the “Scripts and Executables” option.

The web server is now configured to serve web pages in your root folder in response to HTTP requests from web browsers.

After configuring your system, you must define a Dreamweaver site. See Defining a Dreamweaver site.


Copying the sample files

If you have not already done so, copy the sample files from the Dreamweaver application folder to a folder on your hard disk.

To copy the sample files:
  1. Create a new folder called Sites on your hard disk.

    2. For example, create C:\Sites (Windows) or Hard Drive:Documents:Sites (Macintosh).

  2. Locate the GettingStarted folder in the Dreamweaver application folder on your hard disk.

    3. The path to the folder is as follows:

    \Macromedia\Dreamweaver MX\Samples\GettingStarted\

  3. Copy the GettingStarted folder into the Sites folder.

After copying the GettingStarted folder, define the folder as a Dreamweaver local folder. See Defining a local folder.


Defining a local folder

After copying the GettingStarted folder, define the folder containing the ASP sample files as a Dreamweaver local folder.

To define the Dreamweaver local folder:
  1. In Dreamweaver, select Site > New Site.

    2. The Site Definition dialog box appears.

  2. If the wizard is showing, click Advanced.
  3. In the Site Name text box, enter GlobalCar - ASP.

    4. The name identifies your site within Dreamweaver.

  4. In the Local Root Folder text box, specify the folder in the GettingStarted folder that contains the ASP sample files.

    5. You can click the folder icon next to the text box to find and select the folder. In Windows, the folder should be as follows:

    C:\Sites\GettingStarted\Develop\asp

    On the Macintosh, the folder should be as follows:

    Hard Drive:Documents:Sites:GettingStarted:Develop:asp

Leave the Site Definition dialog box open. You need to define a web server folder as a Dreamweaver remote folder next. See Defining a remote folder.


Defining a remote folder

After defining a local folder, define a web server folder as a Dreamweaver remote folder, as described in this section.

To define the Dreamweaver remote folder:
  1. In the advanced Site Definition dialog box, click Remote Info in the Category list.

    2. The Remote Info screen appears.

  2. In the Access text box, choose how you want to move your files to and from the server—directly (the Local/Network option) or FTP.
  3. Enter the path or FTP settings to the web server folder you created in Creating a root folder.

    4. The folder may be on your hard disk or on a remote computer. Even if you created the folder on your hard disk, that folder is still the valid “remote” folder. Here’s an example if you chose Local/Network access:

    Remote Folder: c:\Inetpub\wwwroot\MySampleApp

    For more information on FTP, see Setting Remote Info options for FTP access.

Leave the Site Definition dialog box open. You need to define a folder to process dynamic pages next See Specifying where dynamic pages can be processed.


Specifying where dynamic pages can be processed

After defining the Dreamweaver remote folder, specify a folder to process dynamic pages as described in this section. Dreamweaver uses this folder to display dynamic pages and connect to databases while you work.

To specify the folder to process dynamic pages:
  1. In the advanced Site Definition dialog box, click Testing Server in the Category list.

    2. The Testing Server screen appears. Dreamweaver needs the services of a testing server to generate and display dynamic content while you work. The testing server can be your local computer, a development server, a staging server, or a production server. As long as it can process ASP pages, the choice doesn’t matter. In this case, you can use the same settings as the Remote Info category (see Defining a remote folder) because they point to a server capable of processing ASP pages.

  2. Select ASP JavaScript or ASP VBScript as your server technology.
  3. In the Access text box, choose the method (Local/Network or FTP) you specified for accessing your remote folder.

    4. Dreamweaver enters the settings you specified in the Remote Info category. Leave the settings unchanged.

  4. In the URL Prefix text box, enter the root URL you would enter in a web browser to request a page in your web application.

    5. To display live data in your pages while you work, Dreamweaver creates a temporary file, copies it to the website’s root folder, and attempts to request it using the URL prefix.

    Dreamweaver makes a best guess at the URL prefix based on the information you provided in the Site Definition dialog box. For example, if the folder specified in the Remote Folder text box is c:\Inetpub\wwwroot\MySampleApp, then the URL prefix should be as follows:

    http://localhost/MySampleApp/

    Tip: The URL prefix should never specify a particular page on the site.

    However, the suggested URL prefix may be incorrect. Correct or enter a new URL prefix if Dreamweaver’s suggestion is incorrect. For more information, see About the URL prefix.

  5. Click OK, then Done.

After specifying a folder to process dynamic pages, upload the sample files to the web server. See Uploading the samples files.


Connecting to the sample database (local configuration)

During installation, Dreamweaver copies a sample Microsoft Access database to your hard disk. This section describes how to create a connection to the sample database if you have a local configuration—that is, if your web server is running on the same computer as Dreamweaver. If your web server is running on a remote computer, see Connecting to the sample database (remote server configuration).

Note: If you want to connect to another database, see Database Connections for ASP Developers.

With a local configuration, you can use the data source name (DSN) that Dreamweaver created during installation to quickly connect to the sample database. To learn more about DSNs, see Understanding DSNs.

To create a connection with a local configuration:
  1. Open any ASP page in Dreamweaver, then open the Databases panel (Window > Databases).
  2. Click the plus (+) button on the panel and select Data Source Name (DSN) from the pop-up menu.

    3. The Data Source Name (DSN) dialog box appears.

  3. Enter connGlobal as the connection name.
  4. Select the Using Local DSN option.
  5. Select GlobalCar from the list of DSNs.

    6. During installation, Dreamweaver created a DSN called GlobalCar pointing to the Microsoft Access database in the Samples\Database folder in the Dreamweaver MX application folder.

  6. Click Test.

    7. Dreamweaver attempts to connect to the database. If the connection fails, do the following:

    • Double-check the DSN.
    • Check the settings for the folder Dreamweaver uses to process dynamic pages (see Specifying where dynamic pages can be processed).
    • Consult Troubleshooting Database Connections.
  7. Click OK.

    8. The new connection appears in the Databases panel.

The sample ASP application is set up for the Getting Started guide and the tutorials. See Developing a Web Application in Dreamweaver MX and the tutorials in Help (Help > Tutorials).


Connecting to the sample database (remote server configuration)

During installation, Dreamweaver copies a sample Microsoft Access database to your hard disk. This section describes how to create a connection to the sample database if you have a remote server configuration—that is, if your web server is running on a remote computer. If your web server is running on the same computer as Dreamweaver, see Connecting to the sample database (local configuration).

Note: If you want to connect to another database, see Database Connections for ASP Developers.

To create a database connection with a remote server configuration:
  1. Set up the sample database on the computer running your web server (see Setting up the database on the remote computer)
  2. Create the connection in Dreamweaver (see Creating a database connection).


Setting up the database on the remote computer

Before creating a connection to the sample database, perform the following tasks on the remote computer running your web server: copy the sample database to the computer’s hard disk and create a DSN on the computer that points to the database.

To set up the sample database on the remote computer:
  1. Copy the sample database file to the remote computer.

    2. The database file, global.mdb, is located in the following folder on your local hard disk:

    \Macromedia\Dreamweaver MX\Samples\Database\global.mdb

    You can place the file in any folder on the remote computer, or you can create a new folder for it.

  2. Make sure the Microsoft Access Driver, version 4.0 or higher, is installed on the remote computer.

    3. To find out whether the driver is already installed, see Viewing the ODBC drivers installed on a Windows system.

    If the driver is not installed, download and install the Microsoft Data Access Components (MDAC) 2.5 and 2.6 packages on the remote computer. You can download MDAC for free from the Microsoft website. These packages contain the latest Microsoft drivers, including the Microsoft Access Driver.

    Note: Install MDAC 2.5 before installing MDAC 2.6.

  3. Set up a DSN called GlobalCar pointing to the sample database on the remote computer.

    4. For instructions, see Setting Up a DSN in Windows.

After the database, database driver, and DSN are in place, create a database connection in Dreamweaver See Creating a database connection.


Creating a database connection

After setting up the sample database on the remote computer (see Setting up the database on the remote computer), create a database connection in Dreamweaver.

To create a database connection in Dreamweaver:
  1. Open any ASP page in Dreamweaver, then open the Databases panel (Window > Databases).
  2. Click the plus (+) button on the panel and select Data Source Name (DSN) from the pop-up menu.

    3. The Data Source Name (DSN) dialog box appears.

  3. Enter connGlobal as the connection name.
  4. Select the Using DSN On Testing Server option.

    5. Macintosh users can ignore this step because all database connections use DSNs on the testing server.

  5. Click on the DSN button and select the DSN you set up on the remote computer.
  6. Click Test.

    7. Dreamweaver attempts to connect to the database. If the connection fails, do the following:

    • Double-check the DSN.
    • Check the settings for the folder Dreamweaver uses to process dynamic pages (see Specifying where dynamic pages can be processed).
    • Consult Troubleshooting Database Connections.
  7. Click OK.

    8. The new connection appears in the Databases panel.

The sample ASP application is set up for the Getting Started guide and the tutorials. See Developing a Web Application in Dreamweaver MX and the tutorials in Dreamweaver Help (Help > Tutorials).

Previous


Setup for Sample JSP Site

Macromedia Dreamweaver MX comes with sample JavaServer Pages (JSP) to let you build a small web application. This chapter describes one way to set up the sample application using Microsoft Internet Information Server (IIS) or Personal Web Server (PWS). For more information on these web servers, see Installing a Web Server in Windows. If you’re using a different web server, see Setting Up a Web Application.

Setting up a web application is a three-step process. First, configure your system. Second, define a Dreamweaver site. Third, connect the application to your database. This setup guide follows this three-step process.

This chapter contains the following sections:

  • Setup checklist for JSP developers
  • Configuring your system
  • Defining a Dreamweaver site
  • Connecting to the sample database (local configuration)
  • Connecting to the sample database (remote server configuration)
Next


Setup checklist for JSP developers

To set up a web application, you must configure your system, define a Dreamweaver site, and connect to a database. This section provides checklists for each task. The procedures are described in the rest of the chapter.

Configure your system:
  1. Make sure you have a web server.
  2. Install the JSP application server.
  3. Create a root folder.
Define a Dreamweaver site:
  1. Copy the sample files to a folder on your hard disk.
  2. Define the folder as a Dreamweaver local folder.
  3. Define a web server folder as a Dreamweaver remote folder.
  4. Specify a folder to process dynamic pages.
  5. Upload the sample files to the web server.
Connect to the database (local configuration):
  1. Install a JDBC-ODBC bridge driver.
  2. Create the connection in Dreamweaver.
Connect to the database (remote server configuration):
  1. Set up the sample database on the computer running your web server.
  2. Create the connection in Dreamweaver.


Configuring your system

This section provides instructions for two common system configurations—one where Microsoft IIS or PWS is installed on your hard disk, and one where IIS or PWS is installed on a remote Windows computer. If you don’t want to use these configurations, see Setting Up a Web Application.

The following illustration shows the two configurations described in this section:

This image shows the components of the following configurations: a local configuration for Windows users, and a remote server configuration for Macintosh and Windows users.

To configure your system:
  1. Make sure you have a web server (see Checking for a web server).
  2. Install the JSP application server (see Installing the JSP application server).
  3. Create a root folder (see Creating a root folder).

Note: Installing the web server and application server are one-time only tasks.


Checking for a web server

To develop and test dynamic web pages, you need a web server. A web server is software that serves web pages in response to requests from web browsers.

Make sure Microsoft IIS or PWS is installed and running on your hard disk or on a remote Windows computer. (Macintosh users need to install Microsoft IIS or PWS on a remote Windows computer.) A quick way to check whether PWS or IIS is installed on a computer is to look at the folder structure. Does it contain a c:\Inetpub or d:\Inetpub folder? PWS and IIS create this folder during installation.

If PWS or IIS is not installed, install it now. For instructions, see Installing a Web Server in Windows.

After installing the web server, install the application server. See Installing the JSP application server.


Installing the JSP application server

To process dynamic web pages, you need an application server. An application server is software that helps a web server process web pages containing server-side scripts or tags. When such a page is requested from the server, the web server hands the page off to the application server for processing before sending the page to the browser.

Make sure a JSP application server is installed and running on the system running PWS or IIS. (PWS or IIS may be located on your hard disk or on a remote computer.)

If you do not have a JSP application server, you can download and install a trial version of Macromedia JRun, a full-featured JSP application server, from the Macromedia website.

To install JRun:
  1. Close all open applications.
  2. If applicable, log into your Windows system using the Administrator account.
  3. Double-click the JRun trial version installer file.

    4. The splash screen appears.

  4. If you do not have a Java Runtime Environment (JRE) on your system, select the option on the splash screen to install it.

    5. Because the JRun application server relies on Java, a JRE must first be installed on the system that will run your application server. Once the JRE is installed, you can install the JRun application server.

  5. Select the option on the splash screen to install JRun.
  6. Follow the onscreen instructions to finish installing and testing the program.
  7. Create a JRun connector to your IIS or PWS web server.

    8. For instructions, see the JRun documentation.

After installing and starting JRun, create a root folder for your web application. See Creating a root folder.


Defining a local folder

After copying the GettingStarted folder, define the folder containing the JSP sample files as a Dreamweaver local folder.

To define the Dreamweaver local folder:
  1. In Dreamweaver, select Site > New Site.

    2. The Site Definition dialog box appears.

  2. If the wizard is showing, click Advanced.
  3. In the Site Name text box, enter GlobalCar - JSP.

    4. The name identifies your site within Dreamweaver.

  4. In the Local Root Folder text box, specify the folder in the GettingStarted folder that contains the JSP sample files.

    5. You can click the folder icon next to the text box to find and select the folder. In Windows, the folder should be as follows:

    C:\Sites\GettingStarted\Develop\jsp

    On the Macintosh, the folder should be as follows:

    Hard Drive:Documents:Sites:GettingStarted:Develop:jsp

Leave the Site Definition dialog box open. You need to define a web server folder as a Dreamweaver remote folder next. See Defining a remote folder.


Defining a remote folder

After defining a local folder, define a web server folder as a Dreamweaver remote folder, as described in this section.

To define the Dreamweaver remote folder:
  1. In the advanced Site Definition dialog box, click Remote Info in the Category list.

    2. The Remote Info screen appears.

  2. In the Access text box, choose how you want to move your files to and from the server—directly (the Local/Network option) or FTP.
  3. Enter the path or FTP settings to the web server folder you created in Creating a root folder.

    4. The folder may be on your hard disk or on a remote computer. Even if you created the folder on your hard disk, that folder is still the valid “remote” folder. Here’s an example if you chose Local/Network access:

    Remote Folder: c:\Inetpub\wwwroot\MySampleApp

    For more information on FTP, see Setting Remote Info options for FTP access.

Leave the Site Definition dialog box open. You need to define a folder to process dynamic pages next.See Specifying where dynamic pages can be processed.


Specifying where dynamic pages can be processed

After defining the Dreamweaver remote folder, specify a folder to process dynamic pages. Dreamweaver uses this folder to display dynamic pages and connect to databases while you work.

To specify the folder to process dynamic pages:
  1. In the advanced Site Definition dialog box, click Testing Server in the Category list.

    2. The Testing Server screen appears. Dreamweaver needs the services of a testing server to generate and display dynamic content while you work. The testing server can be your local computer, a development server, a staging server, or a production server. As long as it can process JSP pages, the choice doesn’t matter. In this case, you can use the same settings as the Remote Info category (see Defining a remote folder) because they point to a server capable of processing JSP pages.

  2. Select JSP as your server technology.
  3. In the Access text box, choose the method (Local/Network or FTP) you specified for accessing your remote folder.

    4. Dreamweaver enters the settings you specified in the Remote Info category. Leave the settings unchanged.

  4. In the URL Prefix text box, enter the root URL you would enter in a web browser to request a page in your web application.

    5. To display live data in your pages while you work, Dreamweaver creates a temporary file, copies it to the website’s root folder, and attempts to request it using the URL prefix.

    Dreamweaver makes a best guess at the URL prefix based on the information you provided in the Site Definition dialog box. For example, if the folder specified in the Remote Folder text box is c:\Inetpub\wwwroot\MySampleApp, then the URL prefix should be as follows:

    http://localhost/MySampleApp/

    Tip: The URL prefix should never specify a particular page on the site.

    However, the suggested URL prefix may be incorrect. Correct or enter a new URL prefix if Dreamweaver’s suggestion is incorrect. For more information, see About the URL prefix.

  5. Click OK, then Done.

After specifying a folder to process dynamic pages, upload the sample files to the web server. See Uploading the samples files.


Connecting to the sample database (local configuration)

During installation, Dreamweaver copies a sample Microsoft Access database to your hard disk. This section describes how to create a connection to the sample database if you have a local configuration—that is, if your web server is running on the same computer as Dreamweaver. If your web server is running on a remote computer, see Connecting to the sample database (remote server configuration).

Note: If you want to connect to another database, see Database Connections for JSP Developers.

To create a database connection with a local configuration:
  1. Install the Sun JDBC-ODBC Bridge driver (see Installing the bridge driver).
  2. Create the connection in Dreamweaver (see Creating a database connection).


Installing the bridge driver

Before creating a connection to the sample database, install the Sun JDBC-ODBC Bridge driver on the computer running your web server. The bridge driver lets you use Windows data source names (DSNs) to create connections. The driver comes with the Sun Java 2 SDK, Standard Edition, for Windows.

To find out if you already have the Java 2 SDK with the driver, check your hard disk for either of the following directories:

c:\jdk1.2.x

c:\jdk1.3.x

Note: Java 1.2.2 and 1.3 are the same as Java 2.

If you don’t have the SDK, download it from the Sun website. After downloading the installation file, double-click it to run the installer. Follow the onscreen instructions and make sure the Java 2 Runtime Environment component is selected from the Select Component dialog box. It should be selected by default. The driver is installed automatically when you install the SDK.

Although it is adequate for development use with lower-end database systems such as Microsoft Access, the Sun JDBC-ODBC Bridge driver is not intended for production use. For example, it lets only one JSP page connect to the database at a time (in other words, it does not support concurrent use by multiple threads). For more information on the driver’s limitations, see article 12409 on the Macromedia support center .

After installing the bridge driver, create a database connection in Dreamweaver. See Creating a database connection.


Creating a database connection

After the Sun JDBC-ODBC Bridge driver is installed on the computer running your web server (see Installing the bridge driver), create a database connection in Dreamweaver.

To create a database connection in Dreamweaver:
  1. Open any JSP page in Dreamweaver, then open the Databases panel (Window > Databases).
  2. Click the plus (+) button on the panel and choose “Sun JDBC-ODBC Driver (ODBC Database)” from the pop-up menu.

    3. The ODBC Database (Sun JDBC-ODBC Driver) dialog box appears.

  3. Enter connGlobal as the connection name.
  4. Select the Using Driver On This Machine option.
  5. Replace the [odbc dsn] placeholder in the URL text box with GlobalCar.

    6. During installation, Dreamweaver created a DSN called GlobalCar pointing to the Microsoft Access database in the Samples\Database folder in the Dreamweaver MX application folder.

    The URL text box should look like this:

    jdbc:odbc:GlobalCar
  6. Click Test.

    7. Dreamweaver attempts to connect to the database. If the connection fails, do the following:

    • Double-check the DSN and the other connection parameters.
    • Check the settings for the folder Dreamweaver uses to process dynamic pages (see Specifying where dynamic pages can be processed).
    • Consult Troubleshooting Database Connections.
  7. Click OK.

    8. The new connection appears in the Databases panel.

The sample JSP application is set up for the Getting Started guide and the tutorials. See Developing a Web Application in Dreamweaver MX and the tutorials in Help (Help > Tutorials).


Connecting to the sample database (remote server configuration)

During installation, Dreamweaver copies a sample Microsoft Access database to your hard disk. This section describes how to create a connection to the sample database if you have a remote server configuration—that is, if your web server is running on a remote computer. If your web server is running on the same computer as Dreamweaver, see Connecting to the sample database (local configuration).

Note: If you want to connect to another database, see Database Connections for JSP Developers.

To create a database connection with a remote server configuration:
  1. Set up the sample database on the computer running your web server (see Setting up the database on the remote computer)
  2. Create the connection in Dreamweaver (see Creating a database connection).


Setting up the database on the remote computer

Before creating a connection to the sample database, perform the following tasks on the remote computer running your web server: copy the sample database to the computer’s hard disk, create a DSN on the computer that points to the database, and install the Sun JDBC-ODBC Bridge driver on the computer.

To set up the sample database on the remote computer:
  1. Copy the sample database file to the remote computer.

    2. The database file, global.mdb, is located in the following folder on your local hard disk:

    \Macromedia\Dreamweaver MX\Samples\Database\global.mdb

    You can place the file in any folder on the remote computer, or you can create a new folder for it.

  2. Make sure the Microsoft Access Driver, version 4.0 or higher, is installed on the remote computer.

    3. To find out whether the driver is already installed, see Viewing the ODBC drivers installed on a Windows system.

    If the driver is not installed, download and install the Microsoft Data Access Components (MDAC) 2.5 and 2.6 packages on the remote computer. You can download MDAC for free from the Microsoft website. These packages contain the latest Microsoft drivers, including the Microsoft Access Driver.

    Note: Install MDAC 2.5 before installing MDAC 2.6.

  3. Set up a DSN for the sample database on the remote computer.

    4. For instructions, see Setting Up a DSN in Windows.

  4. Make sure the Sun JDBC-ODBC Bridge driver is installed on the remote computer.

    5. You will use this driver along with the DSN to create a connection to the database. For instructions, see Installing the bridge driver.

After the database, DSN, and bridge driver are in place, create a database connection in Dreamweaver.See Creating a database connection.


Creating a database connection

After setting up the sample database on the remote computer (see Setting up the database on the remote computer), create a database connection in Dreamweaver.

To create a database connection in Dreamweaver:
  1. Open any JSP page in Dreamweaver, then open the Databases panel (Window > Databases).
  2. Click the plus (+) button on the panel and choose “ODBC Database (Sun JDBC-ODBC Driver)” from the pop-up menu.

    3. The ODBC Database (Sun JDBC-ODBC Driver) dialog box appears.

  3. Enter connGlobal as the connection name.
  4. Select the Using Driver On Testing Server option.

    5. Macintosh users can ignore this step because all database connections use drivers on the testing server.

  5. Replace the [odbc dsn] placeholder in the URL text box with the DSN you defined on the remote computer.

    6. The URL text box should look like this:

    jdbc:odbc:myDSN
  6. Click Test.

    7. Dreamweaver attempts to connect to the database. If the connection fails, do the following:

    • Double-check the DSN and the other connection parameters.
    • Check the settings for the folder Dreamweaver uses to process dynamic pages (see Specifying where dynamic pages can be processed).
    • Consult Troubleshooting Database Connections.
  7. Click OK.

    8. The new connection appears in the Databases panel.

The sample JSP application is set up for the Getting Started guide and the tutorials. See Developing a Web Application in Dreamweaver MX and the tutorials in Dreamweaver Help (Help > Tutorials).

Previous


Setup for Sample PHP Site

Macromedia Dreamweaver MX comes with sample PHP pages to let you build a small web application. This chapter describes one way to set up the sample application using Microsoft Internet Information Server (IIS) or Personal Web Server (PWS). For more information on these web servers, see Installing a Web Server in Windows. If you’re using a different web server, see Setting Up a Web Application.

If you’re a Mac OS X user, you can develop PHP sites locally using the Apache web server and PHP application server installed with your operating system. For setup information, see the following websites:

  • http://developer.apple.com/internet/macosx/php.html
  • http://www.entropy.ch/software/macosx/
  • http://www.stepwise.com/Articles/Workbench/2001-10-11.01.html

Setting up a web application is a three-step process. First, configure your system. Second, define a Dreamweaver site. Third, connect the application to your database. This setup guide follows this three-step process.

This chapter contains the following sections:

  • Setup checklist for PHP developers
  • Configuring your system
  • Defining a Dreamweaver site
  • Connecting to the sample database
Next


Setup checklist for PHP developers

To set up a web application, you must configure your system, define a Dreamweaver site, and connect to a database. This section provides checklists for each task. The procedures are described in the rest of the chapter.

Configure your system:
  1. Make sure you have a web server.
  2. Install the PHP application server.
  3. Test your installation.
  4. Create a root folder.
Define a Dreamweaver site:
  1. Copy the sample files to a folder on your hard disk.
  2. Define the folder as a Dreamweaver local folder.
  3. Define a web server folder as a Dreamweaver remote folder.
  4. Specify a folder to process dynamic pages.
  5. Upload the sample files to the web server.
Connect to the database:
  1. Create the sample MySQL database.
  2. Create a database connection in Dreamweaver.


Configuring your system

This section provides instructions for two common system configurations—one where Microsoft IIS or PWS is installed on your hard disk, and one where IIS or PWS is installed on a remote Windows computer. If you don’t want to use these configurations, see Setting Up a Web Application.

Note: If you’re a Mac OS X user, you can use the Apache web server and PHP application server installed with your operating system. For more information, see the Apple website at http://developer.apple.com/internet/macosx/php.html. Other useful websites include http://www.entropy.ch/software/macosx/, and http://www.stepwise.com/Articles/Workbench/2001-10-11.01.html.

The following illustration shows the two configurations described in this section:

This image shows the components of the following configurations: a local configuration for Windows users, and a remote server configuration for Macintosh and Windows users.

To configure your system:
  1. Make sure you have a web server (see Checking for a web server).
  2. Install the PHP application server (see Installing a PHP application server).
  3. Test your installation (see Testing the installation).
  4. Create a root folder (seeCreating a root folder).

Note: Installing the web server and application server are one-time only tasks.


Checking for a web server

To develop and test dynamic web pages, you need a web server. A web server is software that serves web pages in response to requests from web browsers.

Make sure Microsoft IIS or PWS is installed and running on your hard disk or on a remote Windows computer. (Macintosh users need to install Microsoft IIS or PWS on a remote Windows computer.) A quick way to check whether or not PWS or IIS is installed on a computer is to look at the folder structure. Does it contain a c:\Inetpub or d:\Inetpub folder? PWS and IIS create this folder during installation.

If PWS or IIS is not installed, install it now. For instructions, see Installing a Web Server in Windows.

After installing the web server, install the application server. See Installing a PHP application server.


Installing a PHP application server

To process dynamic web pages, you need an application server. An application server is software that helps a web server process web pages containing server-side scripts or tags. When such a page is requested from the server, the web server hands the page off to the application server for processing before sending the page to the browser.

Make sure the PHP application server is installed and running on the system running PWS or IIS. (PWS or IIS may be located on your hard disk or on a remote Windows computer.)

If you do not have PHP, you can download and install it from the PHP website. Select the Windows installer file, which uses InstallShield to install PHP and configure IIS or PWS.

To install PHP on a Windows system:
  1. Close all open applications.
  2. If applicable, log into your Windows system using the Administrator account.
  3. Double-click the installer file you downloaded from the PHP website.
  4. Follow the onscreen instructions to install the program.

When the installation is finished, the installer tells you if you need to restart your system, restart the server, or just start using PHP.

For more information on configuring the server, see the PHP documentation, which you can download from the PHP website.

After installing PHP, you can test the server to make sure it works properly. See Testing the installation.


Testing the installation

You can test the PHP application server by running a test page, as described in this section.

To test the PHP application server:
  1. In Dreamweaver or any text editor, create a plain text file called timetest.php.
  2. In the file, enter the following code:
    3. <p>This page was created at <b>
<?php echo date("h:i:s a", time()); ?>
</b> on the computer running PHP.</p>

The code displays the time the page was processed on the server.
  3. Copy the page to the Inetpub\wwwroot folder on the hard disk of the Windows computer running PWS or IIS.
  4. In your web browser, enter the URL of the test page and press Enter.

    5. If you installed PHP on your local computer, you can enter the following URL:

    http://localhost/timetest.php

The test page should open and display a time of day, as follows:

This is a picture of the feature being described.

The specified time is known as dynamic content because it changes every time you request the page. Click Refresh on your browser to generate a new page with a different time.

Note: Looking at the source code (View > Source in Internet Explorer) will confirm that the page does not use any client-side JavaScript to achieve this effect.

If the page doesn’t work as expected, check for the following possible errors:

  • The file does not have a .php extension.
  • The page’s file path (c:\Inetput\wwwroot\timetest.php), not its URL (for example, http://localhost/timetest.php), is entered in the browser’s Address text box.

    • If you type a file path in the browser (as you might be used to doing with normal HTML pages), you bypass the web server and the application server. As a result, your page never gets processed by the server.

  • The URL contains a typing mistake. Check for errors and make sure the filename is not followed by a slash, such as http://localhost/timetest.php/.

After installing and testing the server software, create a root folder for your web application. See Creating a root folder.


Defining a local folder

After copying the GettingStarted folder, define the folder containing the PHP sample files as a Dreamweaver local folder.

To define the Dreamweaver local folder:
  1. In Dreamweaver, select Site > New Site.

    2. The Site Definition dialog box appears.

  2. If the wizard is showing, click Advanced.
  3. In the Site Name text box, enter GlobalCar - PHP.

    4. The name identifies your site within Dreamweaver.

  4. In the Local Root Folder text box, specify the folder in the GettingStarted folder that contains the PHP sample files.

    5. You can click the folder icon next to the text box to find and select the folder. In Windows, the folder should be as follows:

    C:\Sites\GettingStarted\Develop\php

    On the Macintosh, the folder should be as follows:

    Hard Drive:Documents:Sites:GettingStarted:Develop:php

  5. Leave the Site Definition dialog box open. You need to define a web server folder as a Dreamweaver remote folder next. See Defining a remote folder.


Specifying where dynamic pages can be processed

After defining the Dreamweaver remote folder, specify a folder to process dynamic pages as described in this section. Dreamweaver uses this folder to display dynamic pages and connect to databases while you work.

To specify the folder to process dynamic pages:
  1. In the advanced Site Definition dialog box, click Testing Server in the Category list.

    2. The Testing Server screen appears. Dreamweaver needs the services of a testing server to generate and display dynamic content while you work. The testing server can be your local computer, a development server, a staging server, or a production server. As long as it can process PHP pages, the choice doesn’t matter. In this case, you can use the same settings as the Remote Info category (see Defining a remote folder) because they point to a server capable of processing PHP pages.

  2. Select PHP MySQL as your server technology.
  3. In the Access text box, choose the method (Local/Network or FTP) you specified for accessing your remote folder.

    4. Dreamweaver enters the settings you specified in the Remote Info category. Leave the settings unchanged.

  4. In the URL Prefix text box, enter the root URL you would enter in a web browser to request a page in your web application.

    5. To display live data in your pages while you work, Dreamweaver creates a temporary file, copies it to the website’s root folder, and attempts to request it using the URL prefix.

    Dreamweaver makes a best guess at the URL prefix based on the information you provided in the Site Definition dialog box. However, the suggested URL prefix may be incorrect. For example, if the folder specified in the Remote Folder text box is c:\Inetpub\wwwroot\MySampleApp, then the URL prefix should be as follows:

    http://localhost/MySampleApp/

    Tip: The URL prefix should never specify a particular page on the site.

    However, the suggested URL prefix may be incorrect. Correct or enter a new URL prefix if Dreamweaver’s suggestion is incorrect. For more information, see About the URL prefix.

  5. Click OK, then Done.

After specifying a folder to process dynamic pages, upload the sample files to the web server. See Uploading the samples files.


Uploading the samples files

After specifying a folder to process dynamic pages, upload the sample files to the web server as described in this section. You must “upload” the files even if the web server is running on your local computer.

If you don’t upload the files, features such as Live Data view and Preview in Browser may not work properly with dynamic pages. For example, image links might be broken in Live Data view because the image files are not on the server yet. Similarly, clicking a link to a detail page while previewing a master page in a browser will cause an error if the detail page is missing from the server.

To upload the samples files to the web server:
  1. In the Site panel (Window > Site), select the root folder in the Local Files pane.

    2. The root folder should be the first folder in the list.

  2. Click the blue up arrow on the toolbar.

    3. Dreamweaver copies all the files to the web server folder you defined in Defining a remote folder.

The Dreamweaver site is defined. The next step is to connect to the sample database installed with Dreamweaver. See Connecting to the sample database.


Connecting to the sample database

During installation, Dreamweaver copies a SQL script to your hard disk. You can use this script to automatically create a sample MySQL database. This section describes how to create a connection to the sample database.

This section assumes you have installed and configured MySQL on your local or remote computer. To download and install the database system, visit the MySQL website.

The first step is to create the sample MySQL database using the SQL script (see Creating the MySQL database). Once the database is created, you must create a database connection in Dreamweaver (see Creating a database connection).


Creating the MySQL database

During installation, Dreamweaver MX copies a SQL script capable of creating and populating a sample MySQL database.

Before starting, make sure MySQL is installed and configured on your local or remote computer. You can download the latest version from the MySQL website.

To create the sample MySQL database:
  1. Copy the SQL script file, insert.sql, to the MySql\Bin folder on the computer with MySQL.

    2. The script file is located in the following folder on your hard disk:

    \Macromedia\Dreamweaver MX\Samples\Database\insert.sql

  2. On the computer with MySQL, open the command prompt window.

    3. In Windows, you can open the command prompt by selecting Start > Programs > Command Prompt.

    Note: On some systems, the Command Prompt may be located under Accessories in the Start > Programs menu.

  3. Change to the mysql\bin directory by entering the following commands at the command prompt:
    4. > cd\
> cd mysql\bin
  4. Launch the MySQL client by entering the following command at the mysql\bin\ prompt:
    5. > mysql -uUser -pPassword

For example, if your MySQL user name (also known as an account name) and password are Tara and Telly3, then enter the following command:

> mysql -uTara -pTelly3

If you don’t have a password, omit the -p argument as follows:

> mysql -uTara

If you didn’t define a user name while configuring your MySQL installation, enter root as the user name, as follows:

> mysql -uroot

The MySQL client’s command prompt appears, as follows:

mysql>
  5. Create a new database by entering the following command at the MySQL prompt:
    6. mysql>CREATE DATABASE GlobalCar;

MySQL creates a new database, but it doesn’t contain any tables or records yet.
  6. Log out of the MySQL client by entering the following command at the prompt:
    7. mysql>quit
  7. At the system command prompt, populate the new GlobalCar database in MySQL with the following command:
    8. > mysql -uUser -pPassword GlobalCar < insert.sql

This command uses the insert.sql file to add tables and records to the GlobalCar database you created in step 5.

After creating the MySQL database, create a database connection to it in Dreamweaver. See Creating a database connection.


Creating a database connection

After the sample database is set up (see Creating the MySQL database), you can create a database connection in Dreamweaver.

To create a database connection in Dreamweaver:
  1. Open any PHP page in Dreamweaver, then open the Databases panel (Window > Databases).
  2. Click the plus (+) button on the panel and choose MySQL Connection from the popup menu.

    3. The MySQL Connection dialog box appears,

  3. Enter connGlobal as the connection name.
  4. In the MySQL Server text box, specify the computer hosting MySQL.

    5. Enter an IP address or a server name. If MySQL is running on the same computer as PHP, enter localhost.

  5. Enter your MySQL user name and password.

    6. If you didn’t define a user name while configuring your MySQL installation on a Windows computer, enter the word “root” in the Username text box. If you don’t have a password, leave the Password text box blank.

  6. In the Database text box, enter GlobalCar, or click Select and choose GlobalCar from the list of MySQL databases.

    7. GlobalCar is the name of the sample MySQL database you created (see Creating the MySQL database).

  7. Click Test.

    8. Dreamweaver attempts to connect to the database. If the connection fails, double-check the server name, user name, and password. If the connection still fails, check the settings for the folder Dreamweaver uses to process dynamic pages (see Specifying where dynamic pages can be processed).

  8. Click OK.

    9. The new connection appears in the Databases panel.

The sample PHP application is set up for the Getting Started guide and the tutorials. See Developing a Web Application in Dreamweaver MX and the tutorials in Dreamweaver Help (Help > Tutorials).

Previous


Troubleshooting Database Connections

This chapter describes some common problems encountered after creating a database connection, and describes ways to fix them. The chapter includes the following sections:

  • Troubleshooting Microsoft error messages
  • Troubleshooting ColdFusion error messages
  • Troubleshooting permissions problems
Next


Troubleshooting Microsoft error messages

This section describes some common Microsoft error messages and ways to troubleshoot them. These errors can occur if you use Internet Information Server (IIS) with a Microsoft database system such as Access or SQL Server. These errors normally occur when you request a dynamic page from the server.

Note: Macromedia does not provide technical support for third-party software such as Microsoft Windows, and IIS. If this section does not fix your problem, please contact Microsoft technical support or visit the Microsoft support website.

The following errors messages are covered in this section:

  • 80004005—Data source name not found and no default driver specified (other variations of this message include “80004005—Driver's SQLSetConnectAttr failed,” and “80004005—General error Unable to open registry key ‘DriverId’”)
  • 80004005—Couldn’t use ‘(unknown)’; file already in use (another variation is “80004005—Microsoft Jet database engine cannot open the file (unknown)”)
  • 80004005—Logon Failed()
  • 80004005—Operation must use an updateable query
  • 80040e07—Data type mismatch in criteria expression
  • 80040e10—Too few parameters
  • 80040e10—COUNT field incorrect
  • 80040e14—Syntax error in INSERT INTO statement
  • 80040e21—ODBC error on Insert or Update
  • 800a0bcd—Either BOF or EOF is true

For more information on 80004005 errors, see “INFO: Troubleshooting Guide for 80004005 Errors in Active Server Pages and Microsoft Data Access Components (Q306518),” on the Microsoft website.


80004005—Data source name not found and no default driver specified

This error occurs when you attempt to view a dynamic page in a web browser or in Live Data mode. The error message may vary depending on your database and web server. Other variations of the error message include:

  • 80004005—Driver's SQLSetConnectAttr failed
  • 80004005—General error Unable to open registry key 'DriverId'

Here are possible causes and solutions:

  • The page can’t find the DSN. Make sure a DSN has been created on both the web server and on the local machine. For more information, see Setting Up a DSN in Windows.
  • The DSN might have been set up as a user DSN, not as a system DSN. Delete the user DSN and create a system DSN to replace it.

    • Note: If you don’t delete the user DSN, the duplicate DSN names produce a new ODBC error.

  • If you use Microsoft Access, the database file (.mdb) might be locked. The lock might be due to a DSN with a different name accessing the database. In Windows Explorer, search for the lock file (.ldb) in the folder containing the database file (.mdb) and delete the .ldb file. If another DSN is pointing to the same database file, you may want to delete the DSN to prevent the error in the future. Be sure to reboot the computer after making these changes.


80004005—Couldn’t use ‘(unknown)’; file already in use

This error occurs when you use a Microsoft Access database and attempt to view a dynamic page in a web browser or in Live Data mode. Another variation of this error message is “80004005—Microsoft Jet database engine cannot open the file (unknown).”

The probable cause is a permissions problem. For more information, see Troubleshooting permissions problems. Here are some specific causes and solutions:

  • The account being used by Internet Information Server (usually IUSR) might not have the correct Windows NT permissions for a file-based database or for the folder containing the file. Check the permissions on the IIS account (IUSR) in the NT user manager.
  • You might not have permission to create or destroy temporary files. Check the permissions on the file and the folder. Make sure you have permission to create or destroy any temporary files. Temporary files are usually created in the same folder as the database, but the file may also be created in other folders such as /Winnt.
  • In Windows 2000, the time-out value may need to be changed for the Access database DSN. To change the time-out value, choose Start > Settings > Control Panel > Administrative Tools > Data Sources (ODBC). Click on the System tab, highlight the correct DSN, and click on the Configure button. Click the Options button and change the Page Timeout value to 5000.

If you still have problems, see the following Microsoft Knowledge Base articles:

  • PRB: 80004005 “Couldn't Use ‘(unknown)’; File Already in Use”.
  • PRB: Microsoft Access Database Connectivity Fails in Active Server Pages.
  • PRB: Error “Cannot Open File Unknown” Using Access.


80004005—Logon Failed()

This error occurs when you use Microsoft SQL Server and attempt to view a dynamic page in a web browser or in Live Data mode.

This error is generated by SQL Server if it doesn’t accept or recognize the logon account or password being submitted (if you’re using standard security), or if a Windows NT account does not map to a SQL account (if you’re using integrated security).

Here are possible solutions:

  • If you use standard security, the account name and password might be incorrect. Try the system Admin account and password (UID= “sa” and no password), which must be defined in the connection string line. (DSNs do not store user names and passwords.)
  • If you use integrated security, check the Windows NT account calling the page, and find its mapped SQL account (if any).
  • SQL Server does not allow an underscore in SQL account names. If someone manually maps the Windows NT IUSR_machinename account to a SQL account of the same name, it will fail. Map any account that uses an underscore to an account name on SQL that does not use an underscore.


80004005—Operation must use an updateable query

This error occurs when an event is updating a recordset or inserting data in a recordset.

Here are possible causes and solutions:

  • The permissions set on the folder containing the database are too restrictive. IUSR privileges must be set to read/write. See Troubleshooting permissions problems.
  • The permissions on the database file itself does not have full read/write privileges in effect. See Troubleshooting permissions problems.
  • The database might be located outside the Inetpub/wwwroot directory. Though you can view and search the data, you might not be able to update it unless the database is located in the wwwroot directory.
  • The recordset is based on a non-updateable query. Joins are good examples of non-updateable queries within a database. Restructure your queries so they are updateable.

For more information on this error, see “PRB: ASP ‘Error The Query Is Not Updateable’ When You Update Table Record,” in the Microsoft Knowledge Base.


80040e07—Data type mismatch in criteria expression

This error occurs when the server tries to process a page containing an Insert Record or Update Record server behavior, and the server behavior attempts to set the value of a Date/Time column in a Microsoft Access database to an empty string ("").

Microsoft Access has strong data typing; it imposes a rigorous set of rules on given column values. The empty string value in the SQL query cannot be stored in an Access Date/Time column. Currently, the only known workaround is to avoid inserting or updating Date/Time columns in Access with empty strings ("") or with any other value that does not correspond to the range of values specified for the data type.


80040e10—Too few parameters

This error occurs when a column specified in your SQL query does not exist in the database table. Check the column names in your database table against the SQL query. The cause of this error is often a typographical error.


80040e10—COUNT field incorrect

This error occurs when you preview a page containing an Insert Record server behavior in a web browser and try to use it to insert a record in a Microsoft Access 2000 database.

You might be trying to insert a record into a database field that has a question mark (?) in its field name. The question mark is a special character for some database engines, including Microsoft Access, and should not be used for database table names or field names.

Open your database system and delete the question mark (?) from the field names, and update the server behaviors on your page that refer to this field.


80040e14—Syntax error in INSERT INTO statement

This error occurs when the server tries to process a page containing an Insert Record server behavior.

This error typically results from one or more of the following problems with the name of a field, object, or variable in the database:

  • Using a reserved word as a name. Most databases have a set of reserved words. For example, “date” is a reserved word and cannot be used for column names in a database.
  • Using special characters in the name. Examples of special characters include:

    • . / * : ! # & - ?

  • Using a space in the name.

The error can also occur when an input mask is defined for an object in the database, and the inserted data does not conform to the mask.

To fix the problem, avoid using reserved words such as “date”, “name”, “select”, “where,” and “level” when specifying column names in your database. Also, eliminate spaces and special characters.

See the following web pages for lists of reserved words for common database systems:

  • Microsoft Access
  • Microsoft SQL Server
  • Oracle
  • MySQL


80040e21—ODBC error on Insert or Update

This error occurs when the server tries to process a page containing an Update Record or Insert Record server behavior. The database cannot handle the update or insert operation the server behavior is trying to perform.

Here are possible causes and solutions:

  • The server behavior is trying to update a database table’s auto-number field or to insert a record into an auto-number field. Because auto-number fields are populated automatically by the database system, any attempt to populate them with a value fails.
  • The data the server behavior is updating or inserting is the wrong type for the database field, such as inserting a date into a Boolean (yes/no) field, inserting a string into a numeric field, or inserting an improperly formatted string into Date/Time field.


800a0bcd—Either BOF or EOF is true

This error occurs when you attempt to view a dynamic page in a web browser or in Live Data mode.

The problem occurs when the page tries to display data from an empty recordset. To solve the problem, apply the Show Region server behavior to the dynamic content to be displayed on the page, as follows:

  1. Highlight the dynamic content on the page.
  2. In the Server Behaviors panel, click the plus (+) button and choose Show Region > Show Region If Recordset Is Not Empty.
  3. Select the recordset supplying the dynamic content and click OK.
  4. Repeat steps 1 to 3 for each element of dynamic content on the page.


Troubleshooting ColdFusion error messages

This section describes some common database error messages generated by ColdFusion and suggests ways to troubleshoot them.


ColdFusion—Access Denied

This error occurs with ColdFusion 4 or 5 when writing to a file-based database (such as Microsoft Access or Foxpro) that ColdFusion is accessing through a data source. The error usually occurs when you try to overwrite the file through FTP or by copying over it.

The workaround is to recycle the ColdFusion services or disable “Maintain Database Connection” from the Data Source section in ColdFusion Administrator.


ColdFusion—Operation must use an updateable query error

This error occurs with ColdFusion 4 or 5 when attempting to run a ColdFusion page that updates or deletes from a Microsoft Access (or other file-based) database.

This error usually occurs because ColdFusion does not having appropriate permissions at the network operating system level to write to the database.

To solve this issue in Windows NT, click Start > Settings > Control Panel > Services. Double-click the ColdFusion Application Server service and note the start-up account. It should be the System account by default. Next, go to the folder containing the database file and explicitly give the noted account full permissions to that folder. Even if the folder says “Everyone” has full permissions, add the ColdFusion startup account.


Troubleshooting permissions problems

If your database is located on a Windows NT, Windows 2000, or Windows XP computer and you receive an error message when you try to view a dynamic page in a web browser or in Live Data mode, the error can be due to a permissions problem.

Here are possible error messages pointing to a permissions problem:

  • Microsoft OLE DB Provider for ODBC Drivers error '80004005' [Microsoft][ODBC Microsoft Access 97 Driver] Couldn't use '(unknown)'; file already in use.
  • Microsoft OLE DB Provider for ODBC Drivers (0x80004005) [Microsoft][ODBC Microsoft Access Driver] The Microsoft Jet database engine cannot open the file '(unknown)'. It is already opened exclusively by another user, or you need permission to view its data.
  • Microsoft OLE DB Provider for ODBC Drivers error '80004005' [Microsoft][ODBC Microsoft Access 97 Driver] Couldn't lock file.

The Windows account attempting to access the database doesn’t have sufficient permissions. The account might be either the anonymous Windows account (by default, IUSR_computername) or a specific user account, if the page has been secured for authenticated access.

You must change the permissions to give the IUSR_computername account the correct permissions so the web server can access the database file. In addition, the folder containing the database file must also have certain permissions set to write to that database.

If the page is meant to be accessed anonymously, give the IUSR_computername account full control to the folder and database file, as described in the procedure below.

Additionally, if the path to the database is being referenced using UNC (\\Server\Share), make sure the Share Permissions give the IUSR_computername account full access. This step applies even if the share is on the local web server.

If you copy the database from another location, it might not automatically inherit the permissions from its destination folder. You might have to change the permissions for the database.

To check or change the database file permissions:
  1. In Windows Explorer, locate the database file or the folder containing the database, right-click the file or folder, and select Properties.
  2. If you use Windows 2000, select the Security tab; if you use Windows NT, select the Security tab then click the Permissions button.

    3. Note: This step applies only if you have an NTFS file system. If you have an FAT file system, the dialog box won't have a Security tab.

  3. If the IUSR_computername account is not listed among the Windows accounts in the File Permissions dialog box, click the Add button to add it.
  4. In the Add Users and Groups dialog box, choose the computer name from the List Names From pop-up menu.

    5. Note: If you use Windows 2000, the dialog box is called “Select Users, Computers, or Groups” and the pop-up menu is called “Look In:”.

    A list of account names associated with the computer appears. If the IUSR account does not appear in the Names list, click the Show Users button.

    Note: Windows 2000 does not have a Show Users button.

  5. Select the IUSR_computername account, then click Add.
  6. Assign the IUSR account full permissions by choosing Full Control from the Type of Access pop-up menu, and click OK.

For added security, permissions can be set so that Read permission is turned off for the web folder containing the database. Browsing the folder won't be permitted, but web pages will still be able to access the database.

For more information about the IUSR account and web server permissions, see the following TechNotes on the Macromedia Support Center:

  • Understanding anonymous authentication and the IUSR account
  • Setting IIS web server permissions
Previous


Tutorials

Learn how to perform some specific common tasks in Dreamweaver.

This part contains the following chapters:

  • Dreamweaver MX Tutorials
  • Using Tables to Design a Page Layout Tutorial
  • Image Alignment and Image Maps Tutorial
  • Working with Dreamweaver Design Files Tutorial
  • Designing with Cascading Style Sheets Tutorial
  • Building a Master-Detail Page Set Tutorial
  • Building an Insert Record Page Tutorial


Dreamweaver MX Tutorials

The Dreamweaver MX tutorials are step-by-step lessons, designed to teach you the fundamentals of Dreamweaver MX. We recommend that you go through the tutorials using the sample files installed in the GettingStarted folder within the Dreamweaver application folder.

By completing these hands-on tutorials, you’ll learn how to use Dreamweaver’s visual environment to add design elements as you create web pages and web applications. The tutorials are targeted toward beginner to intermediate-level web designers who are looking to get up-to-speed quickly with processes they may already perform while developing web pages and applications.

Each tutorial focuses on a specific web design feature or topic. We suggest that you complete the tutorials in sequence, although you may choose to review only the sections of interest to you.

Additional tutorials are available at the Macromedia website.

Next


What you will learn

Each tutorial takes approximately 30 - 45 minutes to complete, depending on your experience. The tutorials cover the following topics and tasks:

Using Tables to Design a Page Layout Tutorial, takes approximately 45 minutes to complete and focuses on the following tasks:

  • Create and modify a table in Standard view
  • Add color to a table
  • Set a relative width table in Standard view
  • Design a page in Layout view
  • Draw a layout cell

Image Alignment and Image Maps Tutorial, takes approximately 20 - 30 minutes to complete, and focuses on these tasks:

  • Set image alignment
  • Set image spacing
  • Set space and alignment options
  • Create an image map
  • Set image map areas
  • Open a linked file in a new window

Working with Dreamweaver Design Files Tutorial, takes approximately 20 - 30 minutes to complete, and focuses on these tasks:

  • Working with code snippets
  • Insert a code snippet
  • Modify the snippet content
  • Save code as a snippet

Designing with Cascading Style Sheets Tutorial, takes approximately 30 minutes to complete and focuses on these tasks:

  • Open the CSS Styles panel
  • Open a document to work in
  • Set a style for links
  • Export styles to create an external style sheet

Building a Master-Detail Page Set Tutorial, takes approximately 30 minutes to complete and focuses on these tasks:

  • Create a master-detail page set
  • Create a database recordset
  • Insert a Master-Detail Page Set application object
  • View your pages

Building an Insert Record Page Tutorial, takes approximately 40 minutes to complete and focuses on these tasks:

  • Create an insert page
  • Add form objects
  • Define an Insert Record server behavior
  • Test your page
Previous


Using Tables to Design a Page Layout Tutorial

If you are familiar with HTML coding, you already know that text or any other content you add in a web page flows from one margin to the other unless it is inserted in a “container,” such as a layer or a table. HTML tables are an excellent solution for designing web page layout, because they are easy to modify and compatible with most browsers. You can use tables to structure the layout of tabular data or to set the display of visual elements (such as Flash buttons, images, or paragraphs of text).

Dreamweaver has two views in which you can design tables—Standard view and Layout view. In this tutorial you learn to design page layout in both views. In the first section of the tutorial, you work in Standard view and insert a table in a page. In the latter section, you work in Layout view, where you use layout options to draw a table and table cells to design the layout.

This tutorial focuses on using tables as a page layout element. By completing this tutorial you will learn how to accomplish the following tasks:

  • Create and modify a table in Standard view
  • Add color to a table
  • Set a relative width table in Standard view
  • Design a page in Layout view
  • Draw a layout cell
  • Add multiple layout cells
  • Move or resize a layout cell
  • Set a relative width table in Layout view
  • Design a page in Layout view
Next


Before You Begin

If you haven’t already done so, before you start the tutorial, create a new folder into which you’ll transfer the GettingStarted sample files.

  1. At the root level of your local disk, create a new folder and name it Sites—for example, C:\Sites (Windows) or Hard Drive:Sites (Macintosh).

    2. If you are using Windows XP or Macintosh OS X, create the Sites folder inside your user folder.

  2. Locate the Tutorials folder in the Dreamweaver application folder on your hard disk. The path to the folder is:

    3. \Macromedia|Dreamweaver MX\Samples\GettingStarted\ Tutorials

  3. Copy the Tutorial folder into the Sites folder.
  4. In Dreamweaver, define the Tutorials folder you copied as your local site. If you do not know how to define a local site in Dreamweaver, you can follow the directions provided in Creating Your First Website in Dreamweaver.

    5. You can also use the Dreamweaver Site Definition Wizard to be guided through the site setup process. In Dreamweaver, choose Site > New Site, then click the Basic tab to begin setting up your site.


Create and modify a table in Standard view

Standard view is the typical Dreamweaver design view. To create a table in Standard view, you use the Insert Table command. Dreamweaver creates a table based on options you select in the Insert Table dialog box. You can easily modify the initial table structure to create more complex design by merging and splitting cells, and by inserting rows and columns.

You use the table cells (the boxes created at the intersection of each column or row in a table) to control the placement of text and images in a web page. Because you can make the borders of tables invisible, viewers won’t see the underlying structure of your design when they look at the page in a browser.

  1. In Dreamweaver, choose File > New.

    2. The New Document dialog box appears.

  2. In the Blank Document list, choose HTML, then click Create to create a new HTML document.
  3. In the Title text field in the Document toolbar, enter Table Design to add a title to your document.
  4. Choose File > Save, then save the document in your local site folder. Name it tableModify.htm.


Insert a table

Now you’re ready to insert a table in the document.

  1. In the Document window, place the insertion point in the document, then do one of the following:
    • Select Insert > Table.
    • In the Insert bar’s Common category, click the Table icon.
      This is a picture of the feature being described.

      • The Insert Table dialog box appears.
      This is a picture of the feature being described.

  2. In the dialog box, set the following options:
    • In the Rows text box, type 2.
    • In the Columns text box, type 2.
    • In the Width text box, type 600, and then select Pixels in the pop-up menu to the right of the Width text box.

      • Setting the width to 600 pixels creates a fixed width table. We’ll discuss table width in more detail a little later in this tutorial.

    • In the Border text box, type 1 to set a 1-pixel border around the table and table cells.
      This is a picture of the feature being described.
  3. Click OK.

    4. Dreamweaver inserts the table in the document.
    This is a picture of the feature being described.

  4. Save your document by doing one of the following:
    • Select File > Save.
    • Press Control+S (Windows) or Command+S (Macintosh).


Modify the table

Next, you’ll modify the table’s layout. You’ll add rows and columns to the table, and learn how to merge and split cells to create the desired page layout.

  1. Click in the top-left cell then drag down to the bottom row to select the left column.
    This is a picture of the feature being described.
  2. Select Modify > Table > Insert Column.

    3. The table now contains three columns.
    This is a picture of the feature being described.

  3. Click in the bottom left cell and then select Modify > Table > Insert Rows or Columns.

    4. The Insert Rows or Columns dialog box appears.
    This is a picture of the feature being described.

    Tip: Select the Insert Rows or Columns option when you want to add a specific number of rows or columns, or to choose where a row or column is inserted in a table.

  4. In the dialog box, set the following options:

    5. For Insert, select Rows.

    In Number of Rows, type 2.

    For Where, select Above the Selection.

  5. Click OK.

    6. The table updates. You now have a four-row by three-column table.

  6. Save your changes (File > Save).


Merge and split cells

By merging and splitting cells you can customize a table’s design to fit your layout needs. Next, you’ll see how to use menu options or the Property inspector to merge or split table cells.

This is a picture of the feature being described.

  1. In the document, select the first two cells in the left column of the table, by dragging your pointer from the top left cell to the cell below it.
  2. Choose Modify > Table > Merge Cells.

    3. The two cells merge into a single cell.
    This is a picture of the feature being described.

  3. Click in the third row of the second column, then drag to the right and down to select the last two rows of cells in the second and third columns.
  4. In the Property inspector, click the Merge button to combine the cells.

    5. The selected cells merge into one cell.
    This is a picture of the feature being described.

You can split a single cell or column.

  1. Click in the top left cell.
  2. In the Property inspector, click the Split Cell button.

    3. The Split Cell dialog box appears.
    This is a picture of the feature being described.

  3. In the dialog box, set the following options:
    • For Split Cell Into, select Columns.
    • In Number of Rows, enter 2.
  4. Click OK.

    5. The table is modified.
    This is a picture of the feature being described.


Change row height and column width

Let’s adjust the table’s dimensions. You’ll increase the amount of space between the table rows, and adjust the amount of space between the table columns.

  1. Move the pointer along the bottom table border until it changes into a border selector, then drag it down to resize the table.
    This is a picture of the feature being described.

    2. You can use this method to resize the other row heights in the table if you’d like.

  2. Move the pointer along a column border until it changes to a border selector, then drag it to the left or right to change a column’s width.
  3. When you are done adjusting your table, save your document.


Add color to a table

You can add color to any part of a table. You’ll start by adding a background color to the entire table, then apply a different background color to cells in the table. You’ll finish by changing the border color.

  1. In the document, click in any cell of the table, then in the tag selector located at the bottom left of the Document window, click the <table> tag to select the entire table.
  2. Open the Property inspector (Window > Properties), if it isn’t already open.

    3. Properties for the selected table appear in the Property inspector.
    This is a picture of the feature being described.

  3. In the Property inspector, in the Bg Color text box select a color by doing one of the following:
    • Click the color picker pop-up, then choose a color from the color picker.
    • Enter a color using a hexadecimal value, for example #CC9933.
    • Enter a web-safe color name, such as goldenrod.

      • A background color applies to the table.
      This is a picture of the feature being described.

  4. You can apply a background color to the cells of the table the same way. Click in the top-left cell, then in the Property inspector, select a different color in the Bg Color text box.
  5. Color additional cells as you desire.


Add a border color

Now, you’ll set the table border color. Border color applies to both the outside and inside borders of a table.

  1. In the Document window, select the table.
  2. In the Property inspector, in the Brdr Color text box, use the color picker to select a border color for your table.
  3. When you are done, save your document.
  4. Press F12 (Windows only) or select File > Preview in Browser and select a browser to view the document in.


Set a relative width table in Standard view

A percentage-based table stretches and shrinks based on the width of a browser window. (For example if you specify that a table uses a width of 75%, the table stretches to fill 75% of the horizontal space regardless of the browser window size. This can be useful in some instances, such as making sure a navigation menu is always displayed when a window is resized.

When you want to set the size of a table regardless of how a user resizes the browser window, use pixel-based tables. When you want the table to stretch to the size of the browser window, percentage-based tables are best.

To see the difference in percentage-based and pixel-based tables, you’ll add one of each to a page, then view it in a browser.

  1. In Dreamweaver, choose File > New.
  2. In the New Document dialog box, the Basic Page category is already selected; in the Basic Pages list, double-click HTML to create a new HTML document.

    3. The document opens in the Document window.

  3. Save this file to your local site folder. Name it tableWidth.
  4. Place the insertion point in the document.
  5. In the Common tab of the Insert bar, click the Table button.
  6. In the dialog box that appears, set the following options:

    7. In the Rows text box, type 2.

    In the Columns text box, type 3.

    In the Width text box, type 90, and select Percentage in the pop-up menu to the right of the Width text box.

    In the Border text box, enter 1 to set a 1-pixel border around the table and table cells.

  7. Click OK.

    8. The table appears in the document.

  8. Click in the top, middle cell and drag to the bottom cell to select the middle column.
  9. In the Property inspector, use the color picker to apply a background color to the column.


Create a pixel width based table

Now you’ll add another table. A pixel width table is set to a specific width and doesn’t adjust to the browser window size.

  1. Insert a paragraph return after the table you just inserted.
  2. In the Common tab of the Insert bar, click the Table button.
  3. In the dialog box that appears, set the following options:

    4. In the Rows text box, type 2.

    In the Columns text box, type 3.

    In the Width text box, type 600, and then select Pixel in the pop-up menu to the right of the Width text box.

    In the Border text box, type 1 to set a 1-pixel border around the table and table cells.

  4. Click OK.

    5. The table appears in the document.

  5. Select the middle column by clicking in the top, middle cell and dragging down to the bottom cell.
  6. In the Property inspector, use the color picker to apply a background color to the column.
    This is a picture of the feature being described.
  7. Press F12 (Windows only) or select File > Preview in Browser and select a browser to view the document in.

    8. Resize the browser window to see how the two tables respond to browser window changes. The pixel-based table retains its size, while the percentage-based table adjusts to fill the browser.

  8. When you are done viewing the document, close your browser window.
  9. Save your document.


Design a page in Layout view

Now that you’ve learned how to work with the Insert Table command, let’s look at another way to work with tables—by drawing the table layout.

Next, you’ll work in Layout view, which allows you to draw layout cells or layout tables into which you can add content such as images, text, or other media.

In Layout view you can draw layout cells and layout tables to define the design areas of a document. You can start by inserting a table cell or a layout cell. When you insert a layout cell first Dreamweaver automatically creates a table to surround it.


Create and save a new document

  1. In Dreamweaver, choose File > New.
  2. In the New Document dialog box, Basic Page is already selected, in the Basic Pages list select HTML then click Create to create a new HTML document.

    3. The document opens in the Document window.

  3. Save the document in your local site folder, and name it tableLayout.htm.


Draw a layout cell

  1. In the Insert bar, click the Layout tab, then click the Layout view button to switch from Standard view.
    This is a picture of the feature being described.

    2. The Getting Started in Layout View dialog box appears and describes the Layout view options.

  2. Review the options, then click OK to close the dialog box.
  3. In the Insert bar there are two Layout options available—Draw Layout Cell and Draw Layout Table; these options aren’t available in Standard view.
  4. If the Property inspector isn’t already open, choose Window > Properties to open it.
  5. In the Insert bar, click the Draw Layout Cell button.
  6. Move the pointer to the Document window; the mouse pointer changes to a drawing tool (looks like a small cross). Click in the upper left corner of the document, then drag to draw a layout cell.

    7. When you release the mouse, a layout cell appears in a layout table.
    This is a picture of the feature being described.

    The layout table expands to fill the Document window, and sets the page’s layout area. The white rectangle is the layout cell you drew. You can place additional layout cells in the empty area of the layout table.

  7. Draw another cell to create a text area above the navigation buttons.
    This is a picture of the feature being described.


Add multiple layout cells

Next you’ll learn how to add a series of layout cells. You’ll add three layout cells next to the cell you just created to create layout for the page’s navigation buttons.

  1. In the Insert bar, click the Draw Layout Cell button; then hold down the Control key (Windows) or Command key (Macintosh) so you can draw multiple cells in the table.
  2. In the Document window, position the pointer below the last cell you drew; then drag to draw a layout cell.

    3. Continue to hold the Control key (Windows) or Command key (Macintosh) and draw two more layout cells. Your screen should look similar to this:
    This is a picture of the feature being described.

  3. Click in a blank area of the Insert bar, to deselect the Draw Layout Cell tool. (The drawing tool changes to a selection arrow.)


Move or resize a layout cell

If you need to line up the cells next to each other you can resize and move the layout cells. You change the size of a layout cell by using one of its resize handles.

You can move a layout cell to a new position in a document, as long as there is room in the layout table to reposition the cell. Sometimes you will have to resize surrounding cells to make a desired change. If you want to move a layout cell to reposition it in a document, follow these steps.

  1. Click the border of a layout cell to select it.

    2. Handles appear around a selected layout cell.
    This is a picture of the feature being described.

  2. Do one of the following:
    • Drag the layout cell to move it to another position.
    • If there is space around the layout cell, use the left, right, or up arrow, as appropriate, to move the cell.


Resize a layout cell

To design a page precisely, you can set the size of cells you add in a document. You can also reposition cells in the page.

  1. Click the border of the layout cell to select it.
  2. To resize a layout cell:

    3. In the Property inspector for the layout cell, type a number for the desired cell width or height. For example, type 200 in the Height text box to set the cell’s height to 200 pixels, then click in the document to see the cell width change.

Note: If you enter a pixel width or height that exceeds the dimension of the layout table, or that causes the cell to overlap another cell in a layout table, Dreamweaver alerts you and adjusts the cell width to a valid width.


Add color to a table

You can add color to any part of a table. You’ll start by adding a background color to the entire table, then apply a different background color to cells in the table. You’ll finish by changing the border color.

  1. In the document, click in any cell of the table, then in the tag selector located at the bottom left of the Document window, click the <table> tag to select the entire table.
  2. Open the Property inspector (Window > Properties), if it isn’t already open.

    3. Properties for the selected table appear in the Property inspector.
    This is a picture of the feature being described.

  3. In the Property inspector’s Bg Color text box, select a color by doing one of the following:
    • Click the color picker pop-up then choose a color from the color picker.
    • Enter a color using a hexadecimal value, for example #CC9933.
    • Enter a web-safe color name, such as goldenrod.

      • A background color applies to the table.

  4. Select a cell by clicking the cell’s border, then in the Property inspector choose a color to apply to it.
  5. Add a background color to the other cells in your table, if you’d like.
    This is a picture of the feature being described.
  6. Save your document.


Set a relative width table in Layout view

By default, when you draw a table or cell in Layout view, Dreamweaver creates the table with fixed width columns. You can change a fixed-width table or cell to relative width by using the Autostretch feature.

Autostretch allows you to create a relative width table, and applies flexible layout for the column you set as an expandable column, so that a table automatically spans to fill a browser window.

Information about column widths appears in the column header area at the top of each column of a table. Table width information appears in the table’s column header. A fixed-width column has a specific numeric width, such as 200 pixels, while the column header for an autostretch column contains a wavy line. You can only make one column in a table autostretch. You can easily change which column Autostretch applies to.

You’ll set one of the columns of your table to automatically stretch so that the table fills a browser when viewed.

  1. In the document, in the column header click the table column you want to make autostretch.
    This is a picture of the feature being described.
  2. In the pop-up menu that appears, choose Make Column Autostretch.

    3. The Choose Spacer Image dialog box appears.

  3. In the dialog box, select Create a Spacer Image File.
  4. The Save Spacer Image File As dialog box appears, accept the default values to save the image as spacer.gif, in a location relative to the Site Root.

    5. Tip: If you already have a spacer image you can select that choice so you don’t create different spacer images for each table you design.

    The column header changes from a numeric value to a wavy line. The Property inspector also updates to reflect that Autostretch is applied to the table.

  5. Save your file.
  6. Choose File > Preview in Browser, and select which browser to view your page in.

    7. The column automatically expands and contracts depending on the size of the browser window.


Take the next step

In this tutorial you learned how to create tables in Dreamweaver. Along the way, you modified table rows and columns, set background colors to table elements, and learned how to create “flexible” table design in both Standard and Layout view.

For detailed information about topics covered in this tutorial, see the following topics in the Using Dreamweaver MX documentation or Dreamweaver Help:

  • Designing the Page Layout
  • Presenting Content with Tables
Previous


Image Alignment and Image Maps Tutorial

Working with images in Macromedia Dreamweaver MX is quite easy. You can use various Dreamweaver visual tools to insert an image. This tutorial presents you with image options you can apply once an image is inserted in a page. You will learn about aligning images and text, and setting space around an image. You’ll also learn how to use a single image to link to multiple web pages.

This tutorial is designed for beginning Dreamweaver users. It covers some basic features in Dreamweaver and will help you understand how to align images, as well as how to create an image map.

In this tutorial you will accomplish the following tasks:

  • Set image alignment
  • Set image spacing
  • Set space and alignment options
  • Create an image map
  • Set image map areas
  • Open a linked file in a new window
Next


Before You Begin

If you haven’t already done so, before you start the tutorial, create a new folder into which you’ll transfer the GettingStarted sample files.

  1. At the root level of your local disk, create a new folder and name it Sites—for example, C:\Sites (Windows) or Hard Drive:Sites (Macintosh).

    2. If you are using Windows XP or Macintosh OS X, create the Sites folder inside your user folder.

  2. Locate the Tutorials folder in the Dreamweaver application folder on your hard disk. The path to the folder is:

    3. \Macromedia|Dreamweaver MX\Samples\GettingStarted\ Tutorials

  3. Copy the Tutorial folder into the Sites folder.
  4. In Dreamweaver, define the Tutorials folder you copied as your local site. If you do not know how to define a local site in Dreamweaver, you can follow the directions provided in Creating Your First Website in Dreamweaver.

You can also use the Dreamweaver Site Definition Wizard to be guided through the site setup process. In Dreamweaver, choose Site > New Site, then click the Basic tab to begin setting up your site.


Set image alignment

An image, like text, appears in the normal flow of HTML in a page and can appear as a paragraph by itself, or as part of a paragraph of text. You can set the alignment of an image in two ways in the Property inspector using the text alignment or image alignment controls.

This is a picture of the feature being described.

Text alignment positions the paragraph in which the image is inserted and can be used to align an image to the left or right margin or to center it. Image alignment lets you set the relationship of an image to other content in the same paragraph (including another image). In Dreamweaver, the Align pop-up menu lets you select how the image aligns with the text.

Note: Not all of the image alignment options work in all browsers. In this tutorial you will use alignment options that work in Microsoft Internet Explorer and in Netscape Navigator.


View the completed document

Before you begin, look at the completed file to see what you’ll do in this tutorial.

  1. Choose File > Open, and in the dialog box that appears, navigate to the GettingStarted folder you created, then navigate to Tutorials/Completed and open the file named imageAlign_comp.htm.

    2. The file opens in the Document window.

  2. Press F12 (Windows only) or select File > Preview in Browser and select a browser to view the document in.

    3. The file shows three examples using image alignment and spacing to work with images and text together.

  3. When you are done viewing the file close your browser window.


Open a file to work in

You’ll work in a partially completed document that contains three images and text in a table. The table confines the layout, enabling you to easily see how the different settings affect the alignment.

  1. Choose File > Open and navigate to the imageAlign.htm file located in the Tutorials folder. This document contains the same images and text as the completed file you viewed previously.

In the Document window, click the first image (next to the table cell that contains the text Alignment).

This is a picture of the feature being described.

The image is in the same paragraph as the text.

  1. Open the Property inspector (Window > Properties), if it isn’t already open.
    This is a picture of the feature being described.

    2. In the Align text box, notice that this is the default alignment for an image. It places the image on the baseline of the line of text.

  2. With the image still selected, in the Align pop-up menu choose Middle to see what this setting does.

    3. The first line of text aligns to the middle of the image.

  3. With the image still selected, in the Align pop-up menu, choose Left.

    4. The image now appears on the left and the text wraps along its right side.

    Tip: Text in the same paragraph as an image wraps around the image and then flows beneath the image. If you insert a paragraph return in the flowed paragraph, it is no longer aligned to the image and appears in a new paragraph below the image. If you want to add space without disrupting the text wrap use a paragraph break, Control+Enter (Windows) or Command+Return (Macintosh).

  4. Choose File > Save to save your changes.
  5. Select File > Preview in Browser, then select a browser to preview the document in or press F12 (Windows only) to view it in a browser window.

    6. You see the image and text aligned.

  6. When you are done viewing the file, close your browser window.


Set image spacing

As you see, when you place an image in a paragraph, text appears right next to the edge of the image. In the next step you’ll add a margin of space between the image and text.

You can use the horizontal and vertical space properties in the Property inspector to create space around an image. The horizontal space property adds space to the Left and right of the image, while the vertical space property adds space above and below an image.

  1. In the image_align.htm document, click the second image in the page (next to the table cell that contains the text Spacing).
  2. In the Property inspector, enter 10 in the V Space text box to set the vertical spacing.
  3. Move the pointer to the H Space text box, enter 30, then press Enter or Return to set the horizontal spacing.
    This is a picture of the feature being described.

    4. A margin of space is created between the text and the image. The spacing also affects the distance between the image and the table border.


Set space and alignment options

As the final step in this part of the tutorial, you’ll set both alignment and space properties for the image.

  1. In the imageAlign.htm document, click the third image in the page (next to the table cell that contains the text Alignment and Spacing).
  2. In the Property inspector, in the Align pop-up menu choose Right.

    3. The image moves to the right.

  3. In the HSpace text box, enter 30, then click elsewhere in the Property inspector or in the Document window for the value to update.

    4. A margin of space is added between the image and text.


Create an image map

An image map is an image that serves as a navigation device. With an image map, you can create multiple hotspots (clickable areas) in a single image and have each hotspot link to a different URL or file to open. You can also set where a linked document opens; for example you can open the document in a particular frame of a frameset document, or open it in a new browser window.


View the completed file

Take a look at the completed file to see what you’ll create. The completed image map includes links to other document. You will open the document in a browser window to see how the links work.

  1. Choose File > Open, and in the dialog box that appears, navigate to the GettingStarted folder you created, then navigate to Tutorials/Completed and open the file named imagemap_comp.htm.

    2. The document opens in the Document window.

  2. Press F12 (Windows only) or select File > Preview in Browser then select a browser to view the document in.
    This is a picture of the feature being described.
  3. Roll the pointer over the light purple areas. The pointer changes to a hand, letting you know that the areas link to another document.
  4. Click North America.

    5. A new page opens.

  5. Click your browser’s back button to return to the world map page.
  6. Click the other hotspot.

    7. The linked document opens in a new browser window.

  7. When you are done viewing the pages, close your browser.


Set image map areas

You will create an image map so that a single image links to multiple pages.

  1. In Dreamweaver, choose File > Open, then navigate to and open the file named imagemap_start.htm.
  2. In the document, click the image of the world map to select it.
  3. Open the Property inspector if it isn’t already open, and click the expander arrow in the lower right area of the Property inspector to see all the image properties, if necessary.
    This is a picture of the feature being described.

    4. Image map options appear in the expanded Property inspector.

  4. In the Map Name text box, type Locations.

    5. Tip: If you create more than one image map in a document, each map must have a unique name. Each image map can have multiple hotspots as well.

  5. Click the Rectangular Hotspot Tool to select it.
  6. In the Document window, click in the area above and to the left of North America, then drag the pointer down and to the right over the image to create a hotspot area.
    This is a picture of the feature being described.

    7. A blue layer appears over the image, and the hotspot Property inspector appears.
    This is a picture of the feature being described.

  7. In the Link text box, click the folder icon. In the dialog box that appears, navigate to the file named location1.htm to set a link to it.
  8. In the Alt text box, type North America.

    9. Note: You should always set alternate text for images in your documents, including image maps, this provides descriptive information about an image for page viewers who are using text-only browsers.

    This is a picture of the feature being described.

That’s it—you’ve set the first hotspot. Let’s set one more.


Open a linked file in a new window

So you can see how hotspot tools differ, this time you’ll use the Polygon Hotspot tool to define the hotspot area. The polygon tool allows you to set connecting points to define a hotspot area.

You’ll also learn how to open the linked document in a new window.

  1. In the Property inspector, click the Polygon Hotspot Tool to select it.
  2. In the Document window, click the image where you want to start the hotspot, and move the pointer to the next position; a line forms between the dots.
  3. Continue clicking around the shape to define Europe as the hotspot area.

    4. Note: As you click, the image map area adjusts and fills in, keep clicking around the shape to cover the area you want to include.

  4. When you’re finished mapping the image, click the Arrow button in the Property inspector to change the pointer from a drawing tool.
    This is a picture of the feature being described.
  5. In the Link text box, click the folder icon, then browse to the file named location3.htm to open this file when the hotspot is clicked.
  6. In the Target pop-up menu, choose _blank.

    7. When a user clicks the hotspot, the Locations3 page will open in a new window.

  7. In the Alt text box, enter Europe.
  8. Press F12 (Windows only) or select File > Preview in Browser then select a browser to view the document in and test the links.
  9. Save and close your file.


Take the next steps

In this tutorial you worked with several aspects of images. You learned how to use the Property inspector to set image alignment, define space around an image, and to create an image map.

For more information about topics covered in this tutorial, see the Inserting Images chapter, and the Linking and Navigation chapter in the Using Dreamweaver MX documentation and Dreamweaver Help.

Topics you may also be interested in:

  • Cascading style sheets (positioning)
  • Table alignment
  • Attaching behaviors
Previous


Working with Dreamweaver Design Files Tutorial

Macromedia Dreamweaver MX comes with an extensive set of professionally designed assets—page layout documents, Cascading Style Sheets (CSS), and code snippets. You can use these assets to quickly get started creating professionally designed web pages.

In this tutorial, you will create a new document, then insert and modify design element code snippets. You’ll also learn how to create your own code snippet.

This tutorial focuses on the following tasks:

  • Working with code snippets
  • Insert a code snippet
  • Modify the snippet content
  • Save code as a snippet
Next


Working with code snippets

Using code snippets can be a real time-saver in creating a professional looking page layout. Code snippets are reusable bits of code. You can insert existing code snippets that come with Dreamweaver or you can easily create you own code snippets to reuse in pages in your sites. You can create snippets of HTML, JavaScript, CFML, ASP, JSP, and more.

You’ll start by working with some of the code snippets that come with Dreamweaver.

You can create a new document that is based on a Page Design document in the New Document dialog box.

  1. Select File > New.

    2. The New Document dialog box appears.

  2. In the General tab, the Basic Page category is already selected.
  3. In the Basic Page document list, select HTML, then click Create.

    4. The document opens in the Document window.

  4. Save the document as myCodeSnippets in your site (File > Save).


Insert a code snippet

Dreamweaver comes with quite a variety of code snippets from which to choose. Code snippets are located in the Code panel. As you complete this tutorial, you’ll insert a navigation code snippet, a content snippet, and a footer snippet.

  1. Place the insertion point in the document where you want the snippet inserted.
  2. Open the Snippets panel by doing one of the following:
    • Choose Window > Snippets.
    • In the Code panel, click the expander arrow if you need to, then choose Snippets.

      • The Snippets panel appears.
      This is a picture of the feature being described.

  3. Click the plus (+) button in front of the Navigation folder to see its content.

    4. Additional folders appear.

  4. Click the plus (+) button in front of the Tab folder to see its content, then click Basic Tabs to select it.

    5. The snippet is displayed in the preview pane.
    This is a picture of the feature being described.

  5. In the Snippets panel, click the Insert button located at the bottom of the Snippets panel to insert it in the document.

    6. The snippet appears in the document.
    This is a picture of the feature being described.

  6. Save your document (File > Save).


Add a content code snippet

Next you’ll add a table in which to add content. You’ll insert the snippet directly below the navigation table code snippet you just inserted.

  1. Press Enter or Return to move the insertion point to the next line.
  2. In the Snippets panel, click the plus (+) button in front of the Content Tables folder, then click the plus (+) button in front of the One-pixel-border folder to see the snippets in the folder.
  3. Click Text B to select it, and then click Insert to insert the snippet in the document.

    4. The snippet appears in the document.
    This is a picture of the feature being described.

  4. Save your document (File > Save).


Add a footer code snippet

Now you’ll add the final snippet, a snippet for footer content.

  1. Press Enter or Return to move the insertion point to the next line.
  2. In the Snippets panel, click the plus (+) button in front of the Footers folder to see the snippets in the folder.
  3. Click Basic: Brief Text to select it, and then click Insert to insert the snippet in the document.

    4. The snippet appears in the document.
    This is a picture of the feature being described.


Modify the snippet content

Next, you’ll edit the placeholder text and apply color changes. You’ll apply background color to the cells to set your own color scheme.

  1. Open the Property inspector (Window > Properties), if it isn’t already open.
  2. Place the pointer in the first cell of the Navigation table you inserted. The cell contains the text “Lorem.”
  3. In the Property inspector’s Bg text box, click the arrow on the color swatch to open the color picker, then select a color to apply to a background of the cell.

    4. We used purple, #9966FF.

  4. Place the pointer in the cell that contains the text “Ipsum.”
  5. In the Property inspector’s Bg text box, click the arrow on the color swatch, then choose a different color to apply to a background of the cell.

    6. We used a lighter purple, #9999FF.

  6. Repeat step 5, applying the same color to the cells containing the text “Dolor” and “Amit.”
  7. Click in the table cell that contains the text content, then select a color to apply to the table cell.
  8. Make additional changes you want.
    This is a picture of the feature being described.
  9. When you are done, save your document.
  10. Press F12 (Windows only) or select File > Preview in Browser and select a browser to view the document in.


Save code as a snippet

Working with existing code snippets is very easy. You can just as easily create code snippets of your own. For example, let’s say you want to reuse the code snippets you updated in the document you just created.

Let’s save the navigation snippets as a new snippet.

  1. In the Snippets panel navigate to the Navigation Folder, then to the Tab folder to select the folder in which the snippet will be saved.
  2. In the Document window, click in the navigation cell which contains the text “Lorem.”
  3. In the tag selector, located at the bottom left of the document window, click the <table> tag.
    This is a picture of the feature being described.

    4. In the Document window, the table is selected.

  4. Do one of the following to save the selection as a code snippet:
    • Right-click (Windows) or control-click (Macintosh) the selected table, then choose Create New Snippet.
    • In the Snippets panel, click the plus (+) button located at the bottom of the panel.
      This is a picture of the feature being described.

      • The Snippet dialog box appears.
      This is a picture of the feature being described.

  5. In the Name text box, enter a name to describe your snippet.

    6. We named the example snippet purple navigation.

  6. In Description, enter a description for the snippet.
  7. You can view snippet descriptions in the Snippets panel to the right of the snippet name.
  8. For Snippet Type, select Insert Block. This will insert the snippet as a complete block of code, rather than a snippet that wraps the text it is applied to.
  9. Click OK.
  10. In the Snippets panel, the new code snippet is added to the Tab folder.


Take the next steps

In this tutorial, you learned how to locate, view, and insert code snippets that come with Dreamweaver. You also learned that creating your own code snippets is a easy task to accomplish.

For more information about topics covered in this tutorial, see Coding in Dreamweaver.

Previous


Designing with Cascading Style Sheets Tutorial

You can use Cascading Style Sheets (CSS) in Macromedia Dreamweaver MX to apply style elements consistently across multiple pages of a site. CSS styles offer great flexibility in that style is not confined to text objects. You can define positioning and formatting styles to text, images, tables, layers, and so on.

In this tutorial you experiment with a few styles, and get a glimpse of just some of the many style options CSS affords you.

In this tutorial you will accomplish the following tasks:

Open the CSS Styles panel

Redefine an HTML tag

Set a style for links

Export styles to create an external style sheet

Next


Before you begin

If you haven’t already done so, before you start the tutorial, create a new folder into which you’ll transfer the GettingStarted sample files.

  1. At the root level of your local disk, create a new folder and name it Sites—for example, C:\Sites (Windows) or Hard Drive:Sites (Macintosh).

    2. If you are using Windows XP or Macintosh OS X, create the Sites folder inside your user folder.

  2. Locate the Tutorials folder in the Dreamweaver application folder on your hard disk. The path to the folder is:

    3. \Macromedia|Dreamweaver MX\Samples\GettingStarted\ Tutorials

  3. Copy the Tutorial folder into the Sites folder.
  4. In Dreamweaver, define the Tutorials folder you copied as your local site. If you do not know how to define a local site in Dreamweaver, you can follow the directions provided in Creating Your First Website in Dreamweaver.

    5. You can also use the Dreamweaver Site Definition Wizard to be guided through the site setup process. In Dreamweaver, choose Site > New Site, then click the Basic tab to begin setting up your site.


Open a document to work in

You’ll start by opening a document to work in.

  1. In Dreamweaver, select File > Open.
  2. In the dialog box that appears, navigate to the Tutorial folder in the local site you defined, then double-click the file named css_start.htm to select it.

    3. The document opens in the Document window.
    This is a picture of the feature being described.

This document includes several elements—text, tables, and links. Very few elements in the page have any formatting style applied to them at all. By redefining the body tag, you’ll define styles which will apply a global change to the document.


Open the CSS Styles panel

You use the CSS Styles panel to create, view, apply or edit style attributes.

The CSS Styles panel has two views or modes. Use the Apply Styles view to apply custom or class CSS styles, and you use the Edit Styles view to make changes to styles you have applied to your document. You can create a new style while working in either view.

  1. Open the CSS Styles panel (Window > CSS Styles), if it is not already open.
    This is a picture of the feature being described.
  2. In the CSS Styles panel, click the New CSS Style button (+) at the bottom of the panel.

    3. The New CSS Style dialog box appears.
    This is a picture of the feature being described.


Redefine an HTML tag

You can apply CSS styles to any tag in a document. The first style you’ll create will redefine the style attributes of the body tag.

  1. In the New CSS Style dialog box, for Type, select Redefine HTML Tag.
  2. In the Tag pop-up menu, select body.
  3. In Define In, select This Document Only.

    4. For now we’ll apply the style to this document, later you’ll see how to export the style so you can use it in other pages in the site. Your dialog box should look similar to this:
    This is a picture of the feature being described.

  4. Click OK.

    5. The CSS Style definition dialog box appears.
    This is a picture of the feature being described.

  5. Set the following Type settings:

    6. In the Font pop-up menu, select Arial, Helvetica, sans serif.

  6. In the Size pop-up menu, select 12 and pixels.
  7. In Color, click the color picker, then use the eyedropper to select white.


Set a page background color

Next, you’ll use the Background category in the CSS Styles panel to set background options.

  1. Under Category, select Background.

    2. CSS background attributes appear.
    This is a picture of the feature being described.

  2. In Background Color, do one of the following to set a background color:
    • Click the color picker then use the eyedropper to select a dark blue or move eyedropper to the Document window and select the blue in the Global logo image.
    • In the Background Color text box, enter #333366
  3. Click OK.

    4. The dialog box closes and the style is immediately applied to the document.
    This is a picture of the feature being described.

  4. In the CSS Styles panel, select Edit Styles.
    This is a picture of the feature being described.

    5. The new style appears in the list along with a description of the style attributes.


Set a style for links

With the new style applied you can barely distinguish the hypertext links in the document. Let’s create a style for the links.

  1. In the CSS Styles panel, click the New CSS Style button (+) located at the bottom of the panel.

    2. The New CSS Style dialog box appears.

  2. In Type, select Use CSS Selector.
  3. In the Selector pop-up menu, select a:link.
  4. In Define In, select This Document Only.
  5. Click OK.

    6. The CSS Style definition dialog box appears.
    This is a picture of the feature being described.

  6. Set the following Type attributes for the link:

    7. In Decoration, select Overline.

    In Color, in the text box, enter #FFCC99.

  7. Click OK.
  8. To see the style you applied to the links you must view the page in a browser, press F12 to preview your page.


Export styles to create an external style sheet

The CSS styles you’ve created so far have only applied to this document. Internal style sheets apply only to the document in which they were created. Now, you’ll learn how to create an external style sheet which contains the styles you defined in this document.

  1. Choose File > Export > Export CSS Styles.

    2. In the Export CSS Styles dialog box appears.

  2. In the dialog box, in the Save In (Windows) or Where (Macintosh) pop-up menu, navigate to your local site folder.
  3. In File Name (Windows) or Save As (Macintosh), name the file mystyle.css.

    4. Note: You can name a CSS style sheet any name you want, with the following exceptions; the name must be lowercase and contain no spaces.

  4. Click Save.


Attach an external style sheet

You’ll attach the CSS style sheet you just created to another document in your site. The document you’ll work with is the same as the original css_start.htm file, before you added style to it.

  1. In Dreamweaver, open the Site panel (Window > Site), if it isn’t already open.
  2. In the Site panel, locate the file named css_start2.htm, then double-click it to open it in the Document window.
  3. In the CSS Styles panel, click the Attach Style Sheet button located at the bottom of the panel.
    This is a picture of the feature being described.

    4. The Link External Style Sheet dialog box appears.

  4. In the File/URL text box, enter the path to mystyle.css or click Browse and in the dialog box that appears navigate to the mystyle.css file, then click OK to select it.
  5. In the Link External Style Sheet dialog box, for Add As, select Link.
    This is a picture of the feature being described.
  6. Click OK.

    7. The selected style sheet links to the current document, and the style attributes are immediately applied.


Take the next steps

In this tutorial, you learned how to create basic CSS styles. You also learned how to export styles you applied in a document to create an external CSS style sheet. For information about using the CSS style sheets that come with Dreamweaver, see Creating a document based on a Dreamweaver design file.

For more information about topics covered in this tutorial, see the following topics:

About Cascading Style Sheets

Creating a new CSS style

Creating and linking to an external CSS style sheet

Previous


Building a Master-Detail Page Set Tutorial

A Master-Detail Page set is a web application which presents information extracted from a database in two formats. The master page displays a list of all records retrieved as a result of a database search. A detail page links from the master page and usually provides more specific details about an item selected in the master page.

You can complete this tutorial in following server models—ColdFusion, ASP, and JSP.

In this tutorial you will build a master and detail page set. The tutorial takes approximately 20 minutes to complete, depending on your experience, and will teach you how to do the following tasks:

  • Create a master-detail page set
  • Create a database recordset
  • Insert a Master-Detail Page Set application object
  • View your pages
Next


Before you begin

If you completed Developing a Web Application in Dreamweaver MX in the Getting Started with Dreamweaver MX section of this guide, the files you need to complete this tutorial are already located in your local site and your remote site.

If you did not complete the lesson, you will need to transfer the Sample files to your local drive and to your application server. See the appropriate set up chapter for your web application server for direction on how to set up the files.

Setup for Sample ColdFusion Site

Setup for Sample ASP Site

Setup for Sample JSP Site

You must have completed the following tasks prior to starting this tutorial:

  • Configured your system.
  • Configured Dreamweaver to work with your chosen application server.
  • Defined a connection to the database.


Create a master-detail page set

A good starting point for developing a database application is to display a list of the records stored in a database. The master-detail page set you develop will list the company’s car rental locations, as well as detailed information about each location, such as the telephone number and address.

All of the information about Global’s locations is stored in a Microsoft Access database file, global.mdb. If you followed the instructions in the appropriate Setup chapter in this guide, you should already have a connection to this database. The web application pages will not update without a connection to this database.

Let’s start by selecting a page to work in.

  1. Do one of the following to open the Site panel:
    • In the Files panel group, click the expander arrow, then select the Site tab if it is not already selected.
    • Choose Window > Site.
    • Press F8.

      • The Site panel opens.
      This is a picture of the feature being described.

  2. In the Sites pop-up menu, select the GlobalCar site you defined.
  3. In the Site panel, double-click the locationMaster file to open it.

    4. The document opens in the Document window. You will edit the partially completed page.
    This is a picture of the feature being described.


Create a database recordset

Now you’ll create a recordset to display data that is stored in a database. A recordset is a subset of information extracted from a database by a database query. (In ASP.NET,. a recordset is known as a DataSet.) A database query consists of search criteria, which defines what’s included in the recordset. You then use the information extracted as a source of data for your dynamic pages.

Dreamweaver MX provides an easy-to-use interface for creating simple SQL queries—you don’t need to know SQL to create a recordset in Dreamweaver.

You’ll create a recordset that selects all of the values from the Locations table.

  1. In Dreamweaver, open the Recordset or DataSet (ASP.NET) dialog box by doing one of the following:
    • In the Insert bar’s Application tab, click the Recordset or DataSet (ASP.NET) button.
      This is a picture of the feature being described.
    • Choose Window > Bindings to open the Bindings panel, then click the plus (+) button and select Recordset or DataSet.
    • In the Application panel group, select the Bindings panel, then click the plus (+) button and select Recordset or DataSet.

      • The Recordset or DataSet dialog box appears. The screen below shows the ColdFusion recordset dialog box. (In ASP.NET this is the DataSet dialog box; most of the recordset options are the same for all server models.)
      This is a picture of the feature being described.

  2. In the Name text box, enter rsLocations.

    3. This is the name of the recordset you are defining.

  3. In the Data Source pop-up menu (ColdFusion) or the Connection pop-up menu (other server page types), select connGlobal.

    4. The Recordset or DataSet dialog box updates and displays information for the first table in the Global database.

    Note: If the connGlobal connection doesn’t appear in the menu, click the Define button to create it.

  4. In the Table pop-up menu, select LOCATIONS.

    5. The recordset updates with records in the LOCATIONS table.
    This is a picture of the feature being described.

  5. For Columns, accept the default setting, All.

    6. Tip: To limit the information the recordset includes you can choose Selected, then select the column(s) you want to work with.

  6. Click Test to test the recordset.

    7. The database records that match your recordset request are displayed in the Test SQL Statement window.
    This is a picture of the feature being described.

  7. Click OK to close the Test SQL Statement window.
  8. Click OK to close the Recordset or DataSet dialog box, and add the recordset code to your page.

    9. Dreamweaver confirms that a recordset has been added to the page and the recordset appears in the Bindings panel.

    Tip: If you do not see all of the recordset fields, click the plus button to expand the recordset branch.

    This is a picture of the feature being described.


Insert a Master-Detail Page Set application object

Dreamweaver includes several application objects that help you create web application pages quickly and easily.

Next, you’ll use an application object to create a master-detail page set. Application objects create layout and server-side scripts for many common web applications. After you select a few options, the Master-Detail Page Set application object generates the forms and scripting for both the master list and the page containing the details for you. Additionally, the application object creates record navigation and a record counter in the master page.

  1. Save your document (File > Save).
  2. In the Document window the locationMaster file should still be open, place the insertion point after the “Rental Locations” text, then press Enter or Return to set where the live object will be inserted.
  3. Insert the data, by doing one of the following:
    • In the Insert bar’s Application tab, click the Master Detail button or drag it to the document.
    • Choose Insert > Application Objects > Master Detail Page Set.

      • The Insert Master Detail Pages Set dialog box appears.
      This is a picture of the feature being described.

  4. In the dialog box, in the Recordset pop-up menu, select rsLocations.
  5. In the Master Page Fields list, select CODE, then click the minus (-) button to remove it from the list of data which appears in the master page list.
  6. Remove all the fields in the Master Page Fields list except LOCATION_NAME, CITY, and STATE_COUNTRY.
  7. In the Link To Detail From pop-up menu, select LOCATION_NAME.

    8. To view the detail page for a location, a link needs to be created for each location that appears in the master list. When a site visitor clicks the Location Name in the master page the appropriate detail page will open.

  8. In the Pass Unique Key pop-up menu, accept the default value, Code and make sure Numeric is not checked.

    9. The CODE field is the unique key or primary key in the Locations table. This field contains a unique three letter code for each record.

  9. In Show, accept the default setting to display ten records at a time.
  10. In Detail Page Name, click Browse, then in the Select File dialog box, navigate to the locationDetail file in your site folder.
  11. Click OK.
  12. In the Detail Page Fields, set the fields you want to appear in the detail page, by doing the following:

    13. In the Detail Page Fields list, select CODE, then click the minus (-) button.

    Select REGION_ID, then click the minus (-) button.

  13. Click OK.

    14. Dreamweaver updates the master and detail pages, and adds all the necessary server scripts and queries for both the list page and the detail page.

    The master list page updates. It includes a table for the database data, a table for recordset page navigation, and a record set counter.
    This is a picture of the feature being described.

    The detail page also updates. It includes a table that lists details for each record in the master page.
    This is a picture of the feature being described.


View your pages

Next, you’ll save the pages, then view them to see how the application you developed works. To view pages as they would look when processed by the server, you can preview your page in a browser.

  1. In the Document window, select the locationDetail document, and choose File > Save to save your work.
  2. In the Site panel, select the locationDetail document, then click the Put Files button (blue up arrow) to copy the local file to your server.
  3. In the Document window, select the locationMaster document, and choose File > Save to save it.
  4. In the Site panel, select the locationMaster document, then click the Put Files button (blue up arrow) to copy the local file to your server.
  5. With the locationMaster document still selected, press F12 to view the page in a browser. Test the links from the master page to the details page.
    This is a picture of the feature being described.
  6. Below the table of data, click Next, to view the next set of ten records.

    7. The data table, navigation bar, and record counter update.

  7. Click one of the location names to see the detail page.

    8. The master page passes the unique key to the server, the server processes the query, and the detail page opens and displays the data for the selected location.

  8. Press the Locations button located at the top of the page to return to the locations list.
  9. Close the browser window when you are finished viewing the pages.
  10. In Dreamweaver, close your pages.


Take the next steps

In this tutorial you learned how to create a master-detail page set in Dreamweaver.

For detailed information about topics covered in this tutorial, see the following topics in the Using Dreamweaver MX documentation or Dreamweaver Help:

  • Building master/detail pages rapidly
  • Building master/detail pages block by block
  • Modifying master/details pages
Previous


Building an Insert Record Page Tutorial

This tutorial walks you through the steps of building an form which inserts information into a database. As you create the insert page you’ll learn how to insert and define form fields. You’ll also learn how to create a form field which let’s users insert information using a dynamically generated menu.

You can complete this tutorial in all of the server models supported by Dreamweaver MX—ColdFusion, ASP, ASP.NET, JSP, and PHP.

In this tutorial you will accomplish the following tasks:

  • Create an insert page
  • Add form objects
  • Define an Insert Record server behavior
  • Test your page
Next


Before you begin

If you completed Developing a Web Application in Dreamweaver MX in the Getting Started with Dreamweaver MX section of this guide, the files you need to complete this tutorial are already located in your local site and your remote site.

If you did not complete the lesson, you will need to transfer the Sample files to your local drive and to your application server. See the appropriate set up chapter for your web application server for direction on how to set up the files.

Setup for Sample ColdFusion Site

Setup for Sample ASP.NET Site

Setup for Sample ASP Site

Setup for Sample JSP Site

Setup for Sample PHP Site

You must have completed the following tasks prior to starting this tutorial:

  • Configured your system.
  • Configured Dreamweaver to work with your chosen application server.
  • Defined a connection to the database.


Create an insert page

The page you’ll create lets the site administrator insert new rental car location information in the Global Car Rental database.

You’ll start in a partially completed page. Along the way you’ll add form objects and dynamic content to the page.

Let’s start by selecting a page to work in.

  1. Do one of the following to open the Site panel:
    • In the Files panel group, click the expander arrow, then select the Site tab if it is not already selected.
    • Choose Window > Site.
    • Press F8.

      • The Site panel opens.
      This is a picture of the feature being described.

  2. In the Site pop-up menu, select the Global Car site you defined for your application server type.
  3. In the Site panel, double-click the insertLocation document to open it.

    4. The document opens in the Document window.
    This is a picture of the feature being described.


Add form objects

A table and some of the form fields have already been added to this page. A red, dashed rectangle appears in the document, this is the form boundary. Dreamweaver automatically inserts a form boundary in a document when you insert a form object.

Now you’ll add the remaining form fields for the insert page—three text fields, a list/menu field, a submit button, and a reset button.

You’ll also provide labels for form fields. Naming the fields makes it easier for you to identify the fields you are working with later when you connect the form fields to the database fields.

We’ll begin by looking at one of the existing form fields.

  1. Open the Property inspector (Window > Properties), if it isn’t already open.
  2. Move the pointer to the top-right cell, click the form field to select it.

    3. The Property inspector updates displaying the form field properties.
    This is a picture of the feature being described.

    The Name field contains the form object’s name, and the Char Width field sets the field’s width to 30 characters. You’ll update these same two fields in the text fields you add to the form.

  3. In the document, place the insertion point in the table cell to the right of the State or Country label, then do one of the following to insert a text field:
    • In the Insert bar, click the Forms tab, then click the Text Field button (second from the left) or drag it from the Insert bar to the table cell.
    • Choose Insert > Form Objects > Text Field

      • The text field form object is inserted in the document.

  4. With the text field still selected, in the Property inspector, enter state_country in the Name text box and enter 30 in the Char Width text box.
    This is a picture of the feature being described.
  5. In the document, place the insertion point in the table cell to the right of the Region label, then do one of the following to insert a List/Menu:
    • In the Insert bar’s Forms category, click the List/Menu button or drag it from the Insert bar to the table cell.
    • Choose Insert > Form Objects > Text Field

      • The list/menu form object inserts in the document.
      This is a picture of the feature being described.

  6. In the Property inspector, enter region_id in the Name text box.

    7. A list/menu object generates its character width to the length of the longest item in the list or menu. We’ll define the menu items and values for this field a little later.

  7. Insert a text field for Telephone, and then in the Property inspector name it telephone, and in the Char Width field enter 30.
  8. Insert a text field for Fax, and then in the Property inspector name it fax, and in the Char Width field enter 30.
  9. In the document, place the insertion point in the bottom table cell.
    This is a picture of the feature being described.
  10. Add a submit button for the form by doing one of the following:
    • In the Insert bar’s Forms category, click the Button button or drag it from the Insert bar to the table cell.
    • Choose Insert > Form Objects > Button.

      • A Submit button inserts in the document. In the Property inspector, the button is already labeled and the Action is set to Submit form.
      This is a picture of the feature being described.

  11. Repeat step 10 to add a another button to the form. You’ll add a reset button to let a user reset the form if they need to..
  12. In the Property inspector, for Action, select Reset form.
  13. In the Button Name text box, enter Reset.

    14. Your form is now complete and should look similar this:
    This is a picture of the feature being described.

  14. Save your document.


Define the List/Menu form field

Now you’ll update the list/menu field adding information which will let a user select the text name for a region, and update the database with its numeric value. This way a user doen’t have to check to verify which number matches which name.

  1. In the document, click the Region_Id list/menu form field to select it.

    2. The Property inspector updates with information about the object.
    This is a picture of the feature being described.

  2. In the Property inspector, click the List Values button.

    3. The List/Menu dialog box appears.

  3. In the List Values dialog box, add Item Labels and Values to match the data in the REGIONS database table.
  4. In Item Label, enter North America, press Tab, and in Value enter 1.
  5. Click the plus (+) button to add another entry, then enter South/Central America, press Tab, then enter 2.
  6. Repeat steps 4 and 5, until you enter all of the regions as in the dialog box below.
    This is a picture of the feature being described.
  7. Click OK to close the dialog box.


Define an Insert Record server behavior

You’ll use a server behavior to create the necessary server scripts for the application. You’ll create a connection between the form field data and the database data so that completing the form and clicking the Submit button inserts the information into the database.

  1. In the Server Behaviors panel (Window > Server Behaviors), click the plus (+) button and choose Insert Record from the pop-up menu.

    2. The Insert Record dialog box appears.
    This is a picture of the feature being described.

  2. In the Data Source (ColdFusion) or Connection pop-up menu (other server page types), choose connGlobal.
  3. In the Insert Into Table pop-up menu, choose LOCATIONS.
    This is a picture of the feature being described.

    4. The Columns list updates with information about how the form fields relate to the database fields.

  4. Make sure REGION_ID’s value is set to Numeric or Integer (ASP.NET), since the Region ID is a numeric value rather than a text value.
  5. In After Inserting, Go To or On Success, Go To (ASP.NET), click Browse and in the dialog box that appears select the LocationOK file, then click OK to close the dialog box.
  6. Click OK to close the Insert Record dialog box.

    7. In the Document window, the form updates and the Server Behaviors panel shows the Insert Record behavior is added.

  7. Save your document.


Test your page

Next, you’ll copy the completed page to your server, then open it in a browser and insert some information.

  1. In the Site panel, select insertLocation, then click the Put Files button (blue up arrow) to copy the local file to your server. Choose Yes, when asked to copy dependent files.
  2. With insertLocation selected in the Document window, choose File > Preview in Browser or press F12 (Windows) to view your document.
  3. Enter test data in the form, then click the Submit button.

    4. The locationOK page appears indicating information was successfully inserted in the Global database.

  4. To view the entry you added to the database do the following:

    5. In the Application panel group, select the Databases panel. Locate the connGlobal database, then click the plus (+) in front of it to expand it. Click the plus (+) in front of Tables to view the database tables. Right-click (Windows) or Control-click (Macintosh) the LOCATIONS table and then select View Data. The database records appear; the new record is the last entry in the database.


Take the next steps

In this tutorial you learned how to create a dynamic record insertion form in Dreamweaver. For detailed information about topics covered in this tutorial, see the following topics in the Using Dreamweaver MX documentation or Dreamweaver Help:

  • CreatingInteractive Forms
  • Adding Dynamic Content to Web Pages
  • Building a page to insert records
  • Setting the Record Insertion Form dialog box options
Previous


Dreamweaver Basics

Learn how to use Dreamweaver documentation and other resources, and set up the Dreamweaver workspace to fit your preferred working style. Then plan and set up a site, and begin to create pages.

This part contains the following chapters:

  • Welcome to Dreamweaver
  • Exploring the Workspace
  • Planning and Setting Up Your Site
  • Managing Your Site
  • Setting Up a Document


Welcome to Dreamweaver

Macromedia Dreamweaver MX is a professional HTML editor for designing, coding, and developing websites, web pages, and web applications. Whether you enjoy the control of hand-coding HTML or prefer to work in a visual editing environment, Dreamweaver provides you with helpful tools to enhance your web creation experience.

The visual editing features in Dreamweaver let you quickly create pages without writing a line of code. You can view all your site elements or assets and drag them from an easy-to-use panel directly into a document. You can streamline your development workflow by creating and editing images in Macromedia Fireworks, then importing them directly into Dreamweaver, or by adding Macromedia Flash objects you create directly in Dreamweaver.

Dreamweaver also includes many coding-related tools and features, including code editing tools in the Code view (such as code coloring and tag completion); reference material on HTML, CSS, JavaScript, CFML, ASP, and JSP; and a JavaScript Debugger. Macromedia Roundtrip HTML technology imports your hand-coded HTML documents without reformatting the code; you can then choose to reformat code with your preferred formatting style.

And Dreamweaver now incorporates and expands on all of the capabilities from Macromedia UltraDev, helping you to build dynamic database-backed web applications using server languages such as ASP, ASP.NET, ColdFusion Markup Language (CFML), JSP, and PHP.

Dreamweaver is fully customizable. You can create your own objects and commands, modify keyboard shortcuts, and even write JavaScript code to extend Dreamweaver capabilities with new behaviors, Property inspectors, and site reports.

This chapter contains the following sections:

Learning Dreamweaver

Website creation workflow

Where to start

Typographical conventions

What’s new in Dreamweaver MX

HTML and web technologies resources

Next


Learning Dreamweaver

Dreamweaver includes a variety of resources to help you learn the program quickly and become proficient in creating your own websites and pages. These resources include a printed Getting Started guide, an online help system, and tutorials. In addition, you can find regularly updated tips, TechNotes, examples, and information at the Dreamweaver Support Center on the Macromedia website.


Getting Started guide

The Getting Started guide is designed to guide you through the process of creating a simple but functional website using Dreamweaver. It’s aimed at users who have created web pages but are unfamiliar with particular aspects of Dreamweaver. It includes chapters on creating and editing simple static pages, editing the code by hand, and creating dynamic web applications. The guide is provided as a printed manual, as part of the help system, and as a PDF file.


Tutorials

The tutorials provide further lessons on particular topics, giving more information in specific areas than the rest of the Getting Started guide. By working through the tutorials, you’ll learn how to edit a sample website with some of the most useful and powerful design features of Dreamweaver. The tutorials are available in the printed Getting Started guide, in Dreamweaver Help (in the Help menu in Dreamweaver, choose Tutorials), and as part of the Getting Started PDF file.

If you’re already familiar with Dreamweaver’s design features but want to know more about building web applications, start with the dynamic-page tutorials, which teach you how to create interactive pages that connect to databases.


Dreamweaver Help

Dreamweaver Help provides comprehensive information about all Dreamweaver features, optimized for online reading. Dreamweaver Help is displayed in the help viewer provided by your operating system: Microsoft HTML Help (Windows) or Apple Help (Macintosh). On both platforms, you can find the information you need in any of four ways:

The table of contents enables you to see all of the information organized by subject. Click top-level entries to view subtopics.

The index, like a traditional printed index, allows you to look up specific terms or concepts.

Search allows you to find any character string, anywhere in the text of the help system.

Context-sensitive help provides a way to open a relevant help topic from each dialog box, panel, and inspector. To view context-sensitive help, click a Help button in a dialog box, or choose Help from the Options menu in a panel group’s title bar, or click the question-mark icon in an inspector or other kind of window.

This is a picture of the feature being described.

Each help topic provides buttons you can click to move from topic to topic. The left and right arrow buttons move to the previous or next topic in a section (in the order in which the topics are listed in the table of contents).

This is a picture of the feature being described.


Extending Dreamweaver

The Extending Dreamweaver help system provides information on the Dreamweaver Document Object Model and the APIs (application programming interfaces) that allow JavaScript and C developers to create extensions for Dreamweaver.


Dreamweaver Support Center

To help you get the most out of Dreamweaver, you can consult a web-based support center. The Dreamweaver Support Center website is updated regularly with the latest information on Dreamweaver, plus advice from expert users, examples, tips, updates, and information on advanced topics. Check the website often for the latest news on Dreamweaver and how to get the most out of the program.


Design & Developer Center

The Macromedia Design & Developer Center provides tools, tutorials, and more for all Macromedia products.


Dreamweaver online forums

Discuss technical issues and share helpful hints with other Dreamweaver users by visiting the Dreamweaver online forums. You’ll find information on accessing the forums on the Macromedia website.


Keyboard shortcuts

Charts showing all the keyboard shortcuts in the default Dreamweaver configuration are available on the Macromedia website.


Website creation workflow

There are many possible approaches to creating a website. In the workflow we present in this documentation, you start by defining a site’s strategy or goals. If you’re developing web applications, you have to set up servers and databases as needed. Then you design the look and feel of the site. When the design is complete, you build the site and code the pages, adding content and interactivity; then you link pages together, and test the site for functionality and to see if it meets its defined objectives. You can include dynamic pages in your site as well. At the end of the cycle, you publish the site on a server. Many developers also schedule periodic maintenance to ensure that the site remains current and functional.

To make it easier for you to find the information you need as you develop websites, the Using Dreamweaver documentation is divided into broad sections that model this approach to web development—site planning, design, development, testing, and publishing and maintenance.


About site planning

Planning and organizing your site carefully from the start can save you time later on. Organizing your site includes not only determining where the files will go, but also examining site requirements, audience profiles, and site goals. Additionally, you should consider technical requirements such as user access, as well as browser, plug-in, and download restrictions.

Once you’ve organized your information and determined a structure, you can begin creating your site.

  • Determine what strategy to employ and what issues to consider as you plan your site. See Planning and Setting Up Your Site.
  • Use the Dreamweaver Site panel to set up your site’s organizational structure. In the Site panel you can easily add, delete, and rename files and folders to change the organization as needed. See Planning and Setting Up Your Site and Managing Your Site.
  • You can begin to create simple pages which you’ll later turn into more complex designs. Create new blank pages or pages based on predesigned page designs in the New Document dialog box. See Setting Up a Document.

If you work on a web-development team, you may also be interested in these topics:

  • Set up a system to prevent team members from overwriting files; see Using Check In/Check Out.
  • Use Design Notes to communicate with web team members; see Using Design Notes.


About setting up a web application

More and more websites contain dynamic pages that allow visitors to view information stored in databases, and usually allow some visitors to add new information and edit information in the databases. To create such pages, you must first complete several preparatory steps.

  • Set up a web server and application server, then create or modify a Dreamweaver site. See Setting Up a Web Application.
  • Connect to a database. Depending on the server technology your application server uses, see Database Connections for ColdFusion Developers, Database Connections for ASP.NET Developers, Database Connections for ASP Developers, Database Connections for JSP Developers, or Database Connections for PHP Developers.


About hand-coding

Coding web pages by hand isn’t so much a step in the website creation workflow as an approach to creating pages. Dreamweaver provides easy-to-use visual editing tools, but it also provides sophisticated coding tools; you can use either approach, or both, to create and edit your pages.

  • You can work in a coding environment without visual tools; coding tools help you create and edit code, format code, make sure that your code adheres to standards, and debug JavaScript code. See Setting Up Your Coding Environment and Coding in Dreamweaver, and Optimizing and Debugging Your Code.
  • You can also use some Dreamweaver coding tools in Design view, the visual design environment. See Editing Code in Design View.


About laying out web pages

Many web design projects start with storyboards or flowcharts that are turned into sample pages. Use Dreamweaver to create mock-up sample pages as you work toward a final design. Mock-ups usually show the design layout, site navigation, technical components, themes and color, and graphic images or other media elements, but they don’t contain the final contents of the page.

  • The table tools and Layout view in Dreamweaver let you quickly design web pages by drawing and then rearranging the page structure. See Presenting Content with Tables and Laying Out Pages in Layout View.
  • If you want to display multiple documents at once in a web browser, you can lay out documents using frames. See Using Frames.


About adding content

Using Dreamweaver, you can easily add a variety of content to web pages. Add assets and design elements, such as text, images, colors, movies, sound, and other forms of media.

  • Type directly in a Dreamweaver document, or import text from other documents, then format the text using the Dreamweaver Property inspector, or HTML Styles panel. You can also easily create your own Cascading Style Sheets. See Inserting and Formatting Text.
  • Use the Assets panel to easily organize the assets in a site; you can then drag most assets directly from the Assets panel into a Dreamweaver document. See Using the Assets panel.
  • Insert images, including rollover images, image maps, and Fireworks sliced images. Use alignment tools to position images in a page. See Inserting Images and Dreamweaver Integration with Other Applications.
  • Insert other types of media in a web page, such as Flash, Shockwave, and QuickTime movies, sound, and applets. See Inserting Media.
  • Be sure to make your content accessible to people with disabilities. See Dreamweaver and Accessibility.


About interactivity and animation

Many web pages are static, containing only text and images. Dreamweaver allows you to go beyond static pages, using interactivity and animation to capture visitors’ interest. You can give visitors feedback as they move and click, demonstrate concepts, animate page elements—in short, you can let visitors see and do more within the page.

There are several ways to add interactivity and animation to your pages using Dreamweaver:

  • Use behaviors to perform tasks in response to specific events, such as highlighting a button when the visitor passes the pointer over it, validating a form when the visitor clicks the Submit button, or opening a second browser window when the main page is finished loading. See Using JavaScript Behaviors.
  • Use timelines to create animations that do not require plug-ins, ActiveX controls, or Java. Timelines use dynamic HTML to change the position of a layer or the source of an image over time or to call behavior actions automatically after the page has loaded. See Animating Layers.


About connecting the pages on your site

Individual pages don’t make a site; you need to link your pages together, both by creating HTML links and by reusing content to give pages a common appearance.

  • With Dreamweaver you can create standard HTML links, including anchor links and e-mail links, or easily set up graphical navigation systems, such as jump menus and navigation bars. See Linking and Navigation.
  • Dreamweaver templates and library files let you easily apply reusable content and page designs to your site. You can create new pages based on a Dreamweaver template, then update the layout of those pages automatically when the template changes. See Managing Site Assets, Libraries, and Templates.


About testing and publishing your site

Your site is complete and ready for the world—but before you publish it on a server, you must test the site. Depending on the size of the project, client specifications, and kinds of browsers that visitors will use, you may need to move your site to a staging server where it can be tested and edited. When corrections have been made, you publish the site where the public can access it. Once the site is published, establish a maintenance cycle to ensure quality, respond to user feedback, and update the site’s information.

Use the following Dreamweaver features to test and publish your site:

  • To add new tags in a page or fix your code, use the Dreamweaver Reference panel to look up JavaScript, CSS and HTML code. See Accessing language references.
  • Use the JavaScript Debugger to help you fix JavaScript errors in your code. The debugger lets you set breakpoints in the code, then allows you to view the code as a page is debugged right in Dreamweaver. See Using the JavaScript debugger.
  • Run browser and plug-in checks, test and fix links in your documents, and run site reports to check HTML files for common mistakes. See Testing a Site.
  • In the Dreamweaver Site panel you’ll find many tools to help you manage your site, transfer files to and from a remote server, set up a Check In/Check Out process to prevent files from being overwritten, and synchronize the files on your local and remote sites. See Planning and Setting Up Your Site.


About creating dynamic pages

In Dreamweaver, you can define a variety of sources of dynamic content, including recordsets extracted from databases, form parameters, and JavaBeans components. To add the dynamic content to a page, simply drag it onto the page.

You can set your page to display one record or many records at a time, display more than one page of records, add special links to move from one page of records to the next (and back), and create record counters to help users keep track of the records.

  • If you’re unfamiliar with creating web applications in Dreamweaver, learn how to use Dreamweaver to build dynamic pages. See Optimizing the Workspace for Visual Development and The Dreamweaver Workflow for Dynamic Page Design.
  • Define and display dynamic content on your pages. See Storing and Retrieving Data for Your Page, Defining Sources of Dynamic Content, Adding Dynamic Content to Web Pages, and Displaying Database Records.
  • Encapsulate application or business logic using leading-edge technologies such as ColdFusion components and web services. See Using ColdFusion Components and Using Web Services.
  • If you need more flexibility, you can create your own server behaviors and interactive forms. See Adding Custom Server Behaviors and Creating Interactive Forms.


About rapid application development

Dreamweaver offers a number of rapid application development (RAD) tools, including server behaviors and application objects, that help you build sophisticated web applications without having to write any server-side code.

  • Quickly create pages that search and modify databases and display the results. See Building Master/Detail Pages, Building Pages that Search Databases, and Building Pages that Modify Databases.
  • Provide security by restricting access to your pages. See Building Pages that Restrict Access to Your Site.


Where to start

Dreamweaver Help includes information for readers from a variety of backgrounds. To get the most out of the documentation, start by reading the parts that are most appropriate for you.

For web-design novices:
  1. Begin by reading the first two chapters of the Getting Started guide: Introduction and Creating Your First Website in Dreamweaver. If any section in those chapters seems too advanced or too complex, skip that section and come back to it later.
  2. In Dreamweaver Help, read Exploring the Workspace, Planning and Setting Up Your Site, Managing Your Site, and Setting Up a Document.
  3. Learn about page layout by reading Laying Out Pages in Layout View.
  4. To learn about formatting text and including images in your pages, read Inserting and Formatting Text and Inserting Images.
  5. That’s all you really need to begin producing high-quality websites, but when you’re ready to learn how to use more advanced tools, you can proceed through the rest of the static-page chapters in order. You may want to wait to read the dynamic-page chapters until you’re more familiar with creating web pages.
For experienced web designers who are new to Dreamweaver:
  1. Begin by reading the first two chapters of the Getting Started guide: Introduction and Creating Your First Website in Dreamweaver.
  2. In Dreamweaver Help, read Exploring the Workspace to learn more about the Dreamweaver user interface.
  3. Although much of the material in Planning and Setting Up Your Site and Managing Your Site is probably familiar to you, skim those chapters to see how these familiar concepts are implemented in Dreamweaver. Pay particular attention to the sections on using Dreamweaver to set up a new site.
  4. Follow the steps in any tutorials that interest you, to learn more about using Dreamweaver to perform specific tasks. To view the tutorials in the help system, choose Help > Tutorials.
  5. Inserting and Formatting Text and Inserting Images provide useful information on the details of using Dreamweaver to create basic HTML pages.
  6. Read the overview at the beginning of each of the other chapters to determine whether its topics are of interest to you.
For experienced hand-coders:
  1. Begin by reading the first and third chapters of the Getting Started guide: Introduction and Editing code in Dreamweaver.
  2. In Dreamweaver Help, read Exploring the Workspace to learn more about the Dreamweaver user interface.
  3. Although much of the material in Planning and Setting Up Your Site and Managing Your Site is probably familiar to you, skim those chapters to see how these familiar concepts are implemented in Dreamweaver. Pay particular attention to the sections on using Dreamweaver to set up a new site.
  4. Read more about coding with Dreamweaver in Setting Up Your Coding Environment, Coding in Dreamweaver, Optimizing and Debugging Your Code, and Editing Code in Design View.
  5. Read the overview at the beginning of each of the other chapters to determine whether its topics are of interest to you.
For experienced web designers, familiar with Dreamweaver, who want to learn about creating dynamic pages:
  1. Begin by reading the first, fourth, and fifth chapters of the Getting Started guide: Introduction, Understanding Web Applications, and Developing a Web Application in Dreamweaver MX.
  2. In Dreamweaver Help, skim Exploring the Workspace to learn about new aspects of the Dreamweaver user interface.
  3. Set up a web server and application server; see Setting Up a Web Application.
  4. Connect to a database. Depending on the server technology your application server uses, see Database Connections for ColdFusion Developers, Database Connections for ASP.NET Developers, Database Connections for ASP Developers, Database Connections for JSP Developers, or Database Connections for PHP Developers.
  5. Read the overview at the beginning of each of the other chapters to determine whether its topics are of interest to you.
  6. If you’re interested in customizing Dreamweaver by hand, read “Customizing Dreamweaver” on the Macromedia Support Center. If you want to write extensions for Dreamweaver, read Extending Dreamweaver (Help > Extending Dreamweaver).
For experienced web application developers who have not used Dreamweaver or UltraDev:
  1. Begin by quickly reading the Getting Started guide to familiarize yourself with the basics of using Dreamweaver.
  2. In Dreamweaver Help, read Exploring the Workspace to learn more about the Dreamweaver user interface.
  3. Although much of the material in Planning and Setting Up Your Site and Managing Your Site is probably familiar to you, skim those chapters to see how these familiar concepts are implemented in Dreamweaver. Pay particular attention to the sections on using Dreamweaver to set up a new site.
  4. Follow the steps in any tutorials that interest you, to learn more about using Dreamweaver to perform specific tasks. To view the tutorials in the help system, choose Help > Tutorials.
  5. Set up a web server and application server using Dreamweaver; see Setting Up a Web Application.
  6. Connect to a database. Depending on the server technology your application server uses, see Database Connections for ColdFusion Developers, Database Connections for ASP.NET Developers, Database Connections for ASP Developers, Database Connections for JSP Developers, or Database Connections for PHP Developers.
  7. Read the overview at the beginning of each of the other chapters to determine whether its topics are of interest to you.
For experienced web application developers who have used UltraDev 4:
  1. Begin by reading What’s new in Dreamweaver MX.
  2. In Dreamweaver Help, skim Exploring the Workspace to learn about new aspects of the Dreamweaver user interface.
  3. If you’re interested in customizing Dreamweaver by hand, read “Customizing Dreamweaver” on the Macromedia Support Center. If you want to write extensions for Dreamweaver, read Extending Dreamweaver (Help > Extending Dreamweaver).


What’s new in Dreamweaver MX

Dreamweaver MX contains a wide variety of new features, such as new enhanced templates to help visual designers and many new coding capabilities. Dreamweaver also now includes all of the application-development features of Dreamweaver UltraDev 4, and offers many new ones, including a code-centric workspace derived from Macromedia ColdFusion Studio, better runtime code, and support for the latest web application technologies.


Complete Control over Code and Design

You can build the site you want, the way you want, using either the Dreamweaver MX design tools or the rich coding environment.

A new integrated workspace layout (Microsoft Windows only) provides a more familiar working environment with a multiple-document interface (MDI), including fully dockable panels and tabbed document windows.

Macromedia MX panel management in Dreamweaver MX is consistent with the way panels work in Macromedia Flash MX and Fireworks MX. Group together collapsible, dockable panels and collapse or expand them as needed, for a smooth, highly-configurable workflow.

Predesigned sample web components include professional-quality layouts to give you a head start on your designs as well as JavaScript function libraries that give you access to sophisticated client-side interactivity without reading hundreds of pages of textbooks.

Enhanced Dreamweaver templates allow you to set up sophisticated rules for contributors to input content without compromising site design. Template inheritance allows for more customized layout control, and editable regions allow contributors to be more flexible in their input.

The Site Definition Wizard allows you to set up a site quickly and easily, whether you’re building a dynamic site for the first time or setting up an account with an ISP.

Code Hints provide easy access to customized menus showing appropriate tag attributes, method properties, function parameters, and CSS styles while you edit in Code view.

Customizable Insert bar allows quick access to objects and behaviors in Dreamweaver MX, and is completely extensible.

The Document toolbar can now be customized to fit your needs and preferences, using XML and JavaScript.

A file explorer is now integrated into the Site panel, allowing you to browse for assets and files on the desktop and network volumes without having to leave Dreamweaver to use the native file explorer in your operating system.

Answers panel connects you directly with online resources from the Macromedia Support Center. You can retrieve new content at will to ensure that you always have access to the latest tips and tricks.

Enhanced table editing and manipulation generates better code for table edits in Layout view and Standard view, streamlining attribute handling and ensuring that all layouts are as lean as possible without compromising cross-browser compatibility.

Cascading JavaScript pop-up menus can now be created right in Dreamweaver MX, a capability formerly available only in Fireworks.

Syntax coloring is now completely configurable and customizable according to your individual needs.

Standard toolbar allows quick access to commonly used file commands (Open, Save, and New) and clipboard commands.

Printing from Code view now allows you to print out your source code, with appropriate formatting applied.


Robust support for all the latest server technologies

Rapidly build dynamic, database driven web applications both by hand coding and by using visual objects and behaviors.

Server code libraries for ColdFusion, ASP, ASP.NET, JSP, and PHP allow you to visually create dynamic websites using all of the leading server-side technologies. Use one development environment to integrate with a variety of sites and back-end technologies.

The Snippets panel allows you to store arbitrary pieces of code for later reuse. You can easily reuse complicated code, layouts, and functions.

The Tag Library Editor provides an integrated tag database for storing information on native and custom tags. It allows you to edit the properties of existing tags, and to import new ones.

Hundreds of tag editors allow you to quickly edit the relevant attributes of specific tags in HTML, CFML, and ASP.NET while in Code view.

ASP.NET custom tag support allows you to import custom ASP.NET server controls (custom tags) into ASP.NET pages, and to see their structure and attributes displayed in the Tag Chooser, Code Hints, and Tag Inspector.

ASP.NET Web Forms tags are now rendered on both Macintosh and Windows, to allow for sophisticated visualization and editing. Web Forms tag editors allow you to quickly author ASP.NET Web Forms using validation and server-side controls.

ASP.NET DataGrid and DataList objects can be easily created in Dreamweaver MX for complex data display and manipulation.

An integrated Database panel allows you to quickly look at the structure and content of your databases, to browse tables, stored procedures, and views before creating your queries.

The Tag Chooser shows the structure of all tags available to Dreamweaver MX, including custom tags imported through the tag library editor. Use it to quickly place and edit tags in your pages, and to view reference information for individual tags.

A customizable XML-based tag database stores information on the structure of all available tags. This central information storage mechanism allows features like Code Hints, the Tag Chooser, and the Tag Inspector to work with both native and custom imported tags.

ColdFusion MX detection allows the Site Definition Wizard to automatically configure itself to set up a ColdFusion site using a locally installed copy of Macromedia ColdFusion MX Developer Edition.

Live Server Debugging panel for ColdFusion MX streamlines the debugging workflow for ColdFusion MX by displaying debug output directly within Dreamweaver MX. View variable information, query information, and other key page statistics, and jump directly to problem areas, all without leaving the development environment.

The ColdFusion runtime code generated by Dreamweaver MX server behaviors and objects has been revamped to be more tag-oriented, making it nearly indistinguishable from code a developer would write by hand.

RDS support allows you to transfer files back and forth, and browse the structure of databases on ColdFusion servers, using RDS connections.

JSP tag libraries help developers by abstracting server logic away from JSP pages. Dreamweaver MX can import JSP tag library information from TLD (tag library descriptor) files, and make them available in Code Hints, the Tag Chooser, and the Tag inspector.

Full JavaBeans introspection shows getProperty and setProperty methods of JavaBeans in the DataBindings panel, and can display all methods and properties of JavaBeans in the Server Components panel to allow developers to fully integrate Beans with their JSP applications.

Dynamic form objects allow you to create database-driven select lists and other form elements simply by selecting the appropriate form object from the Insert bar.

Server Behavior Builder from UltraDev 4 has been enhanced to allow users to build server behaviors with more complicated user interface elements, including checkboxes, radio groups, and connection menus.

Integrated HomeSite 5 and ColdFusion Studio 5 bundle provides a fully licensed version of HomeSite+, the combination of ColdFusion Studio and HomeSite 5, fully integrated and included with Dreamweaver MX.


Easy access to the latest standards

Build websites compliant with the latest web standards, including XML and web services, and keep your skills up to date with cutting-edge development technologies.

Web services introspection for ASP.NET, ColdFusion, and Java allows you to introspect and interoperate with the latest XML-based web services standards in all leading server technologies. Incorporate complicated functionality into your web applications using the web service introspection feature in Dreamweaver MX.

XML editing and validation allows you to import DTDs and schemas, and ensure that documents are well formed.

Enhanced CSS support, including TopStyle integration, helps you build sites compliant with the latest Cascading Style Sheets (CSS) standards. The Dreamweaver MX CSS panel has been enhanced to show internally and externally defined styles, and allow for design-time style sheets. Many new CSS2 constructs are also supported. The text Property inspector can also be used to apply CSS styles.

XHTML support allows you to ensure that your sites are up to date with the latest standards in HTML design by configuring Dreamweaver MX to generate XHTML-compliant code. Also, quickly convert legacy HTML files to XHTML using the XHTML converter.

Section 508 accessibility site reporting help you determine whether your site meets accessibility guidelines and pinpoint problems quickly and easily.

Integrated accessibility reference content in the Reference panel gives you context and background on best practices in designing for accessibility.

Accessibility option for generating compliant code helps during the editing cycle to ensure that the content you are creating meets accessibility guidelines. Configure Dreamweaver to prompt you for specific accessibility-related attributes when appropriate tags and objects are inserted on the page.

ColdFusion Component support offers you increased modularity and portability of server logic by exposing properties through CFML, as a web service, or through the Flash Application Server Gateway. Dreamweaver MX includes support for introspecting, creating, and editing ColdFusion Components.

Code Validator ensures that your documents are meeting the appropriate standards by providing a validation report against a specific browser profile or a specific version of a standard, including XHTML transitional and HTML 4.0.

Launch and edit in Macromedia Flash MX and Fireworks MX accelerates graphics, animation, and HTML editing between Dreamweaver MX, Fireworks MX, and Flash MX, allowing you to launch and optimize directly from Dreamweaver.

Tag Inspector for viewing XML, HTML, and CFML allows you to see the structure of a document quickly and easily. You can quickly spot and eliminate improper nesting and parent relationships without having to look at the raw source code.

Secure FTP login integrates with MacSSH and PUTTY for Windows to allow for SSH enabled secure transfer of login information from the integrated Dreamweaver FTP client.

Full UTF-8 character-set support in all languages allows you to create and transform pages using UTF-8 encoding.

Full Mac OS X and Windows XP support allows Dreamweaver MX to run at full speed in the latest operating systems, while supporting all of the latest user interface improvements.

Macromedia Sitespring integration helps you use best practices in production and client management in the Dreamweaver workspace.


HTML and web technologies resources

The following are some useful resources available on the web:

The HTML 4.01 specification is the official specification for HTML from the World Wide Web Consortium.

Index DOT HTML is a comprehensive listing of HTML tags, attributes, and values, as well as their compatibility with the various browsers.

The XHTML 1.0 specification is the official specification for Extensible HyperText Markup Language.

The O’Reilly XML.com site provides information, tutorials, and tips about Extensible Markup Language (XML), as well as other web technologies.

The Cascading Style Sheets, level 1 specification (CSS1) and level 2 specification (CSS2) are the official specifications for style sheets from the World Wide Web Consortium.

WebReview.com’s Style Sheet Reference Guide explains what CSS styles are and which browsers they work in.

Microsoft ASP Overview pages provide information about Active Server Pages (ASP).

Microsoft ASP.NET page provides information about ASP.NET.

Sun JSP page provides information about JavaServer Pages (JSP).

The PHP pages provide information about PHP: Hypertext Preprocessor.

The MySQL site provides information about MySQL.

Entities Table lists the entity names used in ISO 8859-1 (Latin-1).

The Dynamic HTML Events page provides information about events in Microsoft Internet Explorer.

Macromedia ColdFusion product page provides information about ColdFusion.

Macromedia JRun Server product page provides information about the JRun Java application server.

IBM WebSphere page provides information about the WebSphere application server.

Chili!Soft product page provides information about the Sun Chili!Soft ASP application server.

JavaScript Bible, by Danny Goodman (IDG Books), comprehensively covers the JavaScript 1.2 language.

JavaScript: The Definitive Guide, by David Flanagan (O’Reilly & Associates), provides reference information for every JavaScript function, object, method, property, and event handler.

CGI Scripts for Fun and Profit is an article from the Hotwired Webmonkey site on incorporating ready-made CGI (Common Gateway Interface) scripts into your pages.

The CGI Resource Index is a repository of all things related to CGI, including ready-made scripts, documentation, books, and even programmers for hire.

The Common Gateway Interface site includes an introduction to CGI.

Previous


Exploring the Workspace

To get the most out of your Macromedia Dreamweaver MX experience, you should understand the basic concepts behind the Dreamweaver workspace and how to choose options, use inspectors and panels, and set preferences that fit your work style best.

This chapter contains the following topics:

  • Using the Dreamweaver workspace
  • Using windows and panels in Dreamweaver
  • Using Dreamweaver with other applications
  • Customizing Dreamweaver: Basics
Next


Using the Dreamweaver workspace

This section describes the primary elements of the workspace in both Windows and Macintosh, and explains how to choose an initial workspace layout in Windows.

In Windows, Dreamweaver MX provides two workspace layouts to choose between: an all-in-one-window integrated layout and a floating layout much like that of Dreamweaver 4. See Choosing a workspace layout (Windows only).

On the Macintosh, only the floating layout is available. See About the floating workspace layout (Windows and Macintosh).


Choosing a workspace layout (Windows only)

In Windows, the first time you start Dreamweaver, a dialog box appears that allows you to choose a workspace layout. If you change your mind later, you can switch to a different workspace using the Preferences dialog box.

This is a picture of the feature being described.

To choose a workspace layout:

Select one of the following layouts:

Dreamweaver MX Workspace is an integrated workspace using MDI (Multiple Document Interface), in which all Document windows and panels are integrated into one larger application window, with the panel groups docked on the right. Recommended for most users.

Note: Most of this help system assumes that you’re using the integrated Dreamweaver MX workspace.

Dreamweaver MX Workspace, HomeSite/Coder-Style is the same integrated workspace, but with the panel groups docked on the left, in a layout similar to that used by Macromedia HomeSite and Macromedia ColdFusion Studio, and with Document windows showing Code view by default. This layout is recommended for HomeSite or ColdFusion Studio users and other hand-coders who want a familiar workspace layout. To choose this layout, select the Dreamweaver MX Workspace option, then select the HomeSite/Coder-Style option.

Note: You can dock panel groups on either side of the workspace in either of the integrated workspace layouts.

Dreamweaver 4 Workspace is a workspace layout similar to the one used in Dreamweaver 4, with each document in its own separate floating window. Panel groups are docked together, but are not docked into a larger application window. Recommended only for Dreamweaver 4 users who prefer to use a more familiar workspace.

To switch to a different workspace after you’ve chosen one:
  1. Choose Edit > Preferences.
  2. Select the General category in the Category list on the left, if it isn’t already selected.
  3. Click the Change Workspace button.
  4. Select a workspace layout and click OK.

    5. An alert message appears to tell you that the new layout will appear after you restart Dreamweaver.

  5. Click OK to dismiss the alert message.
  6. Click OK again to dismiss the Preferences dialog box.
  7. Exit Dreamweaver and restart it.


About the integrated Dreamweaver MX workspace (Windows only)

In the integrated Dreamweaver MX workspace in Windows, all windows and panels are integrated into a single larger application window.

This is a picture of the feature being described.

The HomeSite/Coder-style workspace has the same elements, but with the panel groups docked on the left side of the main window instead on the right side. In this workspace layout, the Property inspector is collapsed by default, and the Document window appears in Code view by default.

This is a picture of the feature being described.

The integrated workspace is not supported on the Macintosh. The workspace on the Macintosh consists of floating windows and panels. Windows users can switch to this floating workspace by using the Preferences dialog box; for more information, see Choosing a workspace layout (Windows only).

For a brief overview of the windows and panels, see About windows and panels. For more details about specific windows and panels, see Using windows and panels in Dreamweaver.


About the floating workspace layout (Windows and Macintosh)

In the Dreamweaver 4-style workspace layout, each document is in its own individual window. Panel groups are initially docked together, but can be undocked into their own windows.

This is a picture of the feature being described.

In the floating workspace, windows “snap” automatically to each other, to the sides of the screen, and to the Document window as you drag or resize them. This makes it easier to move and arrange the different floating panels and windows in Dreamweaver.

Windows users can switch to an all-in-one-window integrated workspace by using the Preferences dialog box; for more information, see Using the Dreamweaver workspace.

For a brief overview of the windows and panels, see About windows and panels. For more details about specific windows and panels, see Using windows and panels in Dreamweaver.


About windows and panels

This section briefly describes some elements that appear in both the floating and integrated workspace layouts. For more information on specific windows and panels, see Using windows and panels in Dreamweaver.

The Welcome window provides tips on setting up your workspace for various purposes, and information on new features for those who have used previous versions of Dreamweaver.

The Insert bar contains buttons for inserting various types of “objects,” such as images, tables, and layers, into a document. Each object is a piece of HTML code that allows you to set various attributes as you insert it. For example, you can insert an image by clicking the Image icon in the Insert bar. If you prefer, you can insert objects using the Insert menu instead of the Insert bar.

The Document toolbar contains buttons and pop-up menus that provide different views of the Document window (such as Design view and Code view), various viewing options, and some common operations such as previewing in a browser.

The Standard toolbar (not displayed in the default workspace layout) contains buttons for common operations from the File and Edit menus: New, Open, Save, Save All, Cut, Copy, Paste, Undo, and Redo. To display the Standard toolbar, choose View > Toolbars > Standard.

The Document window displays the current document as you create and edit it.

The Property inspector lets you view and change a variety of properties for the selected object or text. Each kind of object has different properties. (Not expanded by default in Coder-style workspace layout.)

The tag selector in the status bar at the bottom of the Document window shows the hierarchy of tags surrounding the current selection in Design view. Click any tag in the hierarchy to select that tag and all its contents. (Not visible in Code view, so not visible by default in Coder-style workspace layout.) For more information, see Editing code with the tag selector.

Panel groups are sets of related panels grouped together under one heading. To expand a panel group, click the expander arrow at the left of the group’s name; to undock a panel group, drag the gripper at the left edge of the group’s title bar.

The Site panel allows you to manage the files and folders that make up your site. For more information, see About the Site panel. It also provides a view of all the files on your local disk, much like Windows Explorer (Windows) or the Finder (Macintosh).

The Launcher bar (not displayed in the default workspace layout) displays buttons in the status bar for opening and closing your most frequently used panels and inspectors. To display the Launcher bar and specify which icons appear in it, see Setting Panels preferences.

Dreamweaver provides many other panels, inspectors, and windows not shown here, such as the History panel and the Code inspector. Most panels can be docked together into panel groups. To open Dreamweaver panels, inspectors, and windows, use the Window menu. A check mark next to an item in the Window menu indicates that the named item is currently open (though it may be hidden behind other windows). To display an item that isn’t currently open, choose the item name from the menu.

If you can’t find a panel, inspector, or window that’s marked as open, choose Window > Arrange Panels to neatly lay out all open panels.


Using windows and panels in Dreamweaver

This section explains how to use a variety of specific windows, toolbars, panels, inspectors, and other elements of the Dreamweaver workspace.


About the Document window

The Document window shows the current document. You can choose any of the following views:

  • Design view, a design environment for visual page layout, visual editing, and rapid application development. In this view, Dreamweaver displays a fully editable, visual representation of the document, similar to what you would see viewing the page in a browser. You can configure the Design view to display dynamic content while you’re working on the document (see Viewing live data in Design view).
  • Code view, a hand-coding environment for writing and editing HTML, JavaScript, server-language code—such as Microsoft Active Server Pages (ASP) or ColdFusion Markup Language—and any other kind of code. For more information, see Coding in Dreamweaver.
  • Code and Design view allows you to see both Code view and Design view for the same document in a single window.

To toggle quickly between the two views, press Control+tilde (~) (Windows) or Command+backquote (‘) (Macintosh).

When the Document window has a title bar, the title bar displays the page title and, in parentheses, the file’s path and filename. After the filename, Dreamweaver displays an asterisk if you’ve made changes that you haven’t saved yet.

When the Document window is maximized in the integrated workspace layout (Windows only), it has no title bar; in that case the page title and the file’s path and filename appear in the title bar of the main workspace window.


About the status bar

The status bar at the bottom of the Document window provides additional information about the document you are creating.

This is a picture of the feature being described.

The tag selector shows the hierarchy of tags surrounding the current selection. Click any tag in the hierarchy to select that tag and all its contents. Click <body> to select the entire body of the document. To set the class or id attributes for a tag in the tag selector, right-click (Windows) or Control-click (Macintosh) the tag and choose a class or ID from the context menu.

The Window Size pop-up menu (visible only when Design view is showing) lets you resize the Document window to predetermined or custom dimensions. See Resizing the Document window.

To the right of the Window Size pop-up menu are the estimated document size and estimated download time for the page, including all dependent files such as images and other media files. See Setting download time and size.

For information on creating a new document (and on using the predesigned documents supplied with Dreamweaver), see Setting Up a Document.


Resizing the Document window

The status bar displays the current Document window’s current dimensions (in pixels). To set the window size to fit any of several common monitor sizes, click the window size and choose a size from the Window Size pop-up menu. For less precise resizing, use your operating system’s standard methods of resizing windows, such as dragging the lower right corner of a window. In the integrated workspace (Windows only), you can maximize a Document window so that it fills the entire document area of the integrated window.

Note: You can’t resize a Document window when it is maximized in the integrated workspace.

When a Document window is maximized, tabs appear at the bottom of the Document window area showing the filenames of all open documents. To switch to a document, click its tab.

To design a page that looks its best at a specific size, you can adjust the Document window to any of the predetermined sizes, edit those predetermined sizes, or create new sizes.

This is a picture of the feature being described.

Note: The window size shown reflects the inside dimensions of the browser window, without borders; the monitor size is listed in parentheses. For example, you would use the size “536 x 196 (640 x 480, Default)” if your visitors are likely to be using Microsoft Internet Explorer or Netscape Navigator in their default configurations on a 640 x 480 monitor.

To resize the Document window to a predetermined size:

Choose one of the sizes from the pop-up menu at the bottom of the Document window.

To change the values listed in the Window Size pop-up menu:
  1. Choose Edit Sizes from the Window Size pop-up menu.
  2. Click any of the width or height values in the Window Sizes list and type a new value.

    3. To make the Document window adjust only to a specific width (leaving the height unchanged), select a height value and delete it.

  3. Click the Description text box to enter descriptive text about a specific size.
  4. Click OK to save the change and return to the Document window.
To add a new size to the Window Size pop-up menu:
  1. Choose Edit Sizes from the Window Size pop-up menu.
  2. Click the blank space below the last value in the Width column.
  3. Enter values for Width and Height. To set the Width or Height only, simply leave one field empty.
  4. Click the Description field to enter descriptive text about the size you added.
  5. Click OK to save the change and return to the Document window.

    6. For example, you might type SVGA or average PC next to the entry for an 800 x 600 pixel monitor, and 17-in. Mac next to the entry for an 832 x 624 pixel monitor. Most monitors can be adjusted to a variety of pixel dimensions.

To maximize a Document window (Windows integrated workspace only):

Click the Maximize button in the Document window’s title bar.


Setting Status Bar preferences

To set preferences for the status bar, choose Edit > Preferences or Dreamweaver > Preferences (Mac OS X) and select Status Bar from the Category list on the left. (For more information, see About the status bar.)

Window Sizes lets you customize the window sizes that appear in the status bar’s pop-up menu. See Resizing the Document window.

Connection Speed determines the connection speed (in kilobits per second) used to calculate the download size. The download size for the page is displayed in the status bar. When an image is selected in the Document window, the image’s download size is displayed in the Property inspector.


Using the Launcher bar

The Launcher bar appears in the status bar, and contains buttons for opening and closing various panels, inspectors, and windows.

This is a picture of the feature being described.

To display the Launcher bar, enable the Show Icons in Panels and Launcher option in Panels preferences. You can specify which items appear in the Launcher bar. For more information, see Setting Panels preferences.


Using the Document toolbar

The Document toolbar contains buttons that let you toggle between different views of your document quickly: Code, Design, a split view that shows both Code and Design view, and Live Data view (see Viewing live data in Design view). The toolbar also contains some common commands and options related to viewing the document, transferring it between the local and remote sites, and debugging JavaScript code.

To view or hide the Document toolbar, choose View > Toolbars > Document.

This is a picture of the feature being described.

The following options appear in the Document toolbar:

  • Show Code View displays only the Code view in the Document window.
  • Show Code and Design Views displays Code view in part of the Document window and Design view in another part.

    • When you select this combined view, the option Design View on Top becomes available in the View Options menu. Use this option to specify which view appears at the top of your Document window.

  • Show Design View displays only the Design view in the Document window.

    • You can also choose a view in the View menu.

  • Title allows you to enter a title for your document, to be displayed in the browser’s title bar.

    • If your document already has a title, it appears in this field.

  • File Management displays the File Management pop-up menu.
  • Preview/Debug in Browser allows you to preview or debug your document in a browser. Choose a browser from the pop-up menu.

    • To add a browser to the menu or change the browsers listed, choose Edit Browser List.

Refresh Design View refreshes the document’s Design view after you make changes in Code view.

Changes you make in Code view don’t automatically appear in Design view until you perform certain actions, such as saving the file or clicking this button.

  • Reference displays the Reference panel.

    • The Reference panel contains reference information on HTML, CSS, JavaScript, CFML, ASP, and JSP. For more information, see Accessing language references.

  • Code Navigation allows you to navigate through your JavaScript code. For more information, see Using the JavaScript debugger.
  • View Options allows you to set options for Code view and Design view, including which view should appear above the other.

    • For more information on Code view options, see Setting viewing preferences.

    The Design view options allow you to hide all visual aids (such as table, layer, and frame borders) at once, or to show and hide individual visual aids as desired. These options also allow you to view head content and visual guides. For more information about these options, which can also be found in the View menu, see Selecting elements in the Document window, Viewing and editing head content, and Using visual guides in the design process.

    When both Code view and Design view are showing, both sets of options are available in the menu.


Using the Standard toolbar

The Standard toolbar contains buttons for common operations from the File and Edit menus: New, Open, Save, Save All, Cut, Copy, Paste, Undo, and Redo. Use these buttons just as you would use the equivalent menu commands. For more information about operations such as Open and Save, see Setting Up a Document.

To display the Standard toolbar, choose View > Toolbars > Standard.


Using context menus

Dreamweaver makes extensive use of context menus, which provide convenient access to the most useful commands and properties related to the object or window you’re working with. Context menus list only those commands that pertain to the current selection.

To use a context menu:
  1. Right-click (Windows) or Control-click (Macintosh) the object or window.

    2. The context menu for the selected object or window appears.

  2. Choose a command from the context menu.
    This is a picture of the feature being described.


Using the Insert bar

The Insert bar contains buttons for creating and inserting objects such as tables, layers, and images. The buttons are organized into tabs.

To show or hide the Insert bar:

Choose Window > Insert.

To expand or collapse the Insert bar:

Click the expander arrow in the left corner of the Insert bar’s title bar.

This is a picture of the feature being described.

To change the Insert bar’s orientation, do one of the following (Macintosh only):
  • To change the Insert bar from horizontal to vertical, click the vertical-orientation icon near the upper right corner.
    This is a picture of the feature being described.
  • To change the Insert bar from vertical to horizontal, click the horizontal-orientation icon near the lower right corner.
    This is a picture of the feature being described.
To show the buttons in a particular tab, do one of the following:
  • If the Insert bar is in its tabbed horizontal configuration, click a tab.
  • If the Insert bar is in its vertical configuration (Macintosh only), click the category name at the top of the bar and choose a category from the pop-up menu that appears.
To insert an object:
  1. Select the appropriate tab in the Insert bar.
  2. Click an object button or drag the button’s icon into the Document window.

    3. Depending on the object, a corresponding object-insertion dialog box may appear, prompting you to browse to a file or specify parameters for an object.

To bypass the object-insertion dialog box and insert an empty placeholder object:

Control-click (Windows) or Option-click (Macintosh) the button for the object.

For example, to insert a placeholder for an image without specifying an image file, Control-click or Option-click the Image button.

Note: This procedure does not bypass all object-insertion dialog boxes. Many objects, including navigation bars, layers, Flash buttons, and framesets, do not insert placeholders or default-valued objects.

The Insert bar contains several tabs: Common, Layout, Text, Tables, Frames, Forms, Templates, Characters, Media, Head, Script, and Application. Additional tabs appear when the current document contains server code, such as ASP or CFML documents.

This is a picture of the feature being described.

  • The Application tab allows you to insert dynamic elements such as recordsets, repeated regions, and record insertion and update forms. For information about dynamic content, see Adding Dynamic Content to Web Pages.
  • The Characters tab contains special characters such as the copyright symbol, curved quotation marks, and trademark symbols. Note that some of these symbols may not display correctly in versions 3.0 and earlier of the Internet Explorer and Netscape Navigator browsers.
  • The Common tab contains buttons for creating and inserting the most commonly used objects, such as images, tables, and layers.
  • The Forms tab contains buttons for creating forms and inserting form elements.
  • The Frames tab contains common frameset layouts.
  • The Head tab contains buttons for adding various head elements, such as meta and base tags.
  • The Layout tab allows you to insert tables and layers, and lets you choose between two views of tables: Standard (default) view and Layout view. When Layout view is selected, you can use the Dreamweaver layout tools: Draw Layout Cell and Draw Layout Table. For more information, see Laying Out Pages in Layout View.
  • The Media tab contains buttons for inserting animated or interactive media objects such as Flash buttons and text, Java applets, and ActiveX objects. For more information, see Inserting Media.
  • The Script tab allows you to insert a script, a noscript section, or a server-side include.
  • The Tables tab allows you to insert an entire table or a specific table tag (such as tr, th, or td).
  • The Templates tab allows you to insert editable, optional, and repeating regions in template files. For more information, see About Dreamweaver templates.
  • The Text tab allows you to insert a variety of text- and list-formatting tags, such as b, em, p, h1, and ul.

    • Note: Although some buttons in the Text tab look similar to some buttons in the text Property inspector, they serve different functions. Buttons in the Text tab merely insert code, and do not reflect the current state of the selection; if the selection is bold text, the Bold button in the Property inspector appears selected, while the Bold button in the Text tab does not.

  • Server-code tabs, available only for pages that use a particular server language, include ASP, ASP.NET, CFML Basic, CFML Flow, CFML Advanced, JSP, and PHP. Each of these tabs provides server-code objects that you can insert in Code view.

If not all objects in a given tab are visible at once, a small arrow appears at the lower left corner of the Insert bar; to view the rest of the objects in the tab, click the arrow.

When you click an object button, Dreamweaver inserts code into the document. In some cases, the code is inserted immediately; in other cases, a tag editor (see Editing tags with tag editors) or other dialog box appears, allowing you to specify further information before the code is inserted. For some objects, no dialog box appears if you insert the object in Design view, but a tag editor appears if you insert the object in Code view. For a few objects, inserting the object in Design view causes Dreamweaver to switch to Code view before inserting the object.

Some objects, such as named anchors, are not visible when the page is viewed in a browser window. To display icons in Design view that mark the locations of such invisible objects, choose View > Visual Aids > Invisible Elements. To select invisible objects in the Design view, click their icons. For more information, see About invisible elements.

Some of the General preference settings affect the Insert bar. To modify these preferences, choose Edit > Preferences or Dreamweaver > Preferences (Mac OS X) and then select General from the Category list on the left.

  • When you insert objects such as images, tables, scripts, and head elements, a dialog box prompts you for additional information. You can suppress these dialog boxes by turning off the Show Dialog When Inserting Objects option or by holding down the Control key (Windows) or the Option key (Macintosh) while creating the object. When you insert an object with this option off, the object is given default attribute values. Use the Property inspector to change object properties after inserting the object.
  • The Insert Bar option lets you display the contents of the Insert bar as icons only, text only, or text and icons.

You can modify any object in the Insert bar or create your own objects; see “Customizing Dreamweaver” on the Macromedia Support Center.


Using the Insert bar: Application

The Application tab in the Insert bar allows you to add server behaviors to a page.

This is a picture of the feature being described.

For more information, see Adding server behaviors to a page.


Using the Insert bar: Characters

The Characters tab in the Insert bar allows you to insert special characters.

This is a picture of the feature being described.

Line Break inserts a line break (br) at the insertion point. You can also press Shift+Enter (Windows) or Shift+Return (Macintosh) to insert a line break.

Non-Breaking Space inserts a nonbreaking space (&nbsp;) at the insertion point.

Left Quote, Right Quote, and Em Dash insert punctuation marks at the insertion point.

Pound, Euro, and Yen insert currency symbols at the insertion point.

Copyright, Registered Trademark, and Trademark insert the corresponding symbols at the insertion point.

Other Character provides a set of special characters, such as é and ç, for you to choose from. When you select one and click OK, it’s inserted at the insertion point.


Using the Insert bar: Common

The Common tab in the Insert bar allows you to insert the most commonly used objects.

This is a picture of the feature being described.

Hyperlink and E-Mail Link insert hypertext links at the insertion point, or immediately following the current selection. See Creating links.

Named Anchor places a named anchor (a name="") at the insertion point. A dialog box appears; enter a name for the anchor. See Linking to a specific place in a document.

Table places a table at the insertion point. See Presenting Content with Tables.

Draw Layer creates a layer. Click the Layer button, then move the pointer to the Document window and drag to define the size and location of a layer. By default, Dreamweaver creates a layer defined by the div tag. Use the Property inspector to select a different tag, or change the default setting with Layer preferences. See Creating layers on your page.

Image inserts an image at the insertion point. A dialog box appears so that you can specify an image file. See Inserting an image.

Image Placeholder inserts an image placeholder at the insertion point. A dialog box allows you to specify a name and dimensions for the placeholder. See Inserting an image placeholder.

Fireworks HTML places an HTML file produced by Fireworks at the insertion point. See Dreamweaver Integration with Other Applications.

Rollover Image prompts you to specify two image files that are used to define a rollover. A rollover is an image that changes when the pointer moves across it. See Creating a rollover image.

Navigation Bar inserts a set of images to be used for navigating through a site. See Creating navigation bars.

Horizontal Rule places a horizontal rule at the insertion point. See Using horizontal rules.

Date places the current date at the insertion point. A dialog box appears in which you can specify a format for the date and indicate whether Dreamweaver should update the date automatically every time you save the file. See Inserting dates.

Tabular Data creates a table at the insertion point, filled with table data from a delimited text file (such as a file exported from Microsoft Excel or from a database). See Importing tabular data.

Tag Chooser allows you to choose a tag to insert, from a hierarchical tree of categorized tags. See Inserting tags with the Tag Chooser.

Comment places a comment in the HTML at the insertion point. If you’re in Design view, a dialog box appears; enter text for the comment. See Inserting HTML comments.


Using the Insert bar: Forms

The Forms tab in the Insert bar contains buttons for creating forms and inserting form elements.

This is a picture of the feature being described.

Forms are simply containers for form elements; the form boundaries are not visible in the Document window unless View > Visual Aids > Invisible Elements is selected. See Setting Invisible Elements preferences.

Place the insertion point within a form boundary before inserting a form element; form elements found outside form tags do not appear in all browsers. If you attempt to insert a form element outside a form, a dialog box asks whether to add a form tag around the form element; click Yes to create a new form containing the element, or No to insert the element without a form.

For more information, see Creating Interactive Forms.

Form places a form at the insertion point.

Text Field places a text field at the insertion point. Set the name, size, and initial value in the Property inspector. See “Creating URL parameters using HTML links” on page 861Setting the Text Field property inspector.

Hidden Field inserts a hidden field at the insertion point. Set the name and value in the Property inspector. See Creating a hidden field.

Textarea inserts a multiple-line text field at the insertion point.

Checkbox and Radio Button place the corresponding controls at the insertion point. Set the name, value when checked, and initial state in the Property inspector. See Inserting checkboxes and radio buttons.

Radio Group inserts a group of radio buttons at the insertion point.

List/Menu places a list or pop-up menu at the insertion point. Set the name, type, and list values in the Property inspector. See Setting the List/Menu Property inspector options.

Note: The term pop-up menu can apply to at least two different things in Dreamweaver. This object inserts a pop-up menu field in a form, to let a visitor choose a value when filling in a form. For information about inserting a graphical pop-up navigation menu, see Show Pop-Up Menu.

Jump Menu places a pop-up menu of URLs at the insertion point. Choosing a value from this menu takes the user to the URL. Set the list of values in the dialog box that appears. See Creating jump menus.

Image Field places an image field at the insertion point. Set the name, size, alternative text, and source file in the Property inspector. See Creating a graphical Submit button.

File Field places a file upload field at the insertion point. Set the name, size, and initial value in the Property inspector. See Creating a file upload field.

Button places a button with a default name and value of “Submit” at the insertion point. Place the insertion point within a form boundary before inserting a button; buttons outside forms do not appear in all browsers. Use the Property inspector to set the name, label, and action. See Setting Button property options in the Property inspector.

Label provides a way to structurally associate the text label for a field with the field.

Fieldset is a container tag for a logical group of form elements.


Using the Insert bar: Frames

The Frames tab in the Insert bar contains buttons for creating common frameset layouts. See Using Frames.

This is a picture of the feature being described.

Left Frame, Right Frame, Top Frame, and Bottom Frame each create a frameset and add a narrow empty frame to one side of the current frame.

Bottom and Nested Left Frames and Bottom and Nested Right Frames each create a frameset, add a narrow empty frame to the left or right of the current frame, and then add another empty frame below both frames.

Left and Nested Bottom Frames and Right and Nested Bottom Frames each create a frameset, add a narrow empty frame below the current frame, and then add another empty frame to the left or right of both frames.

Top and Bottom Frames creates a frameset, adds a frame below the current frame, and adds another frame above both frames.

Left and Nested Top Frames and Right and Nested Top Frames each create a frameset, add a narrow empty frame above the current frame, and then add another empty frame to the left or right of both frames.

Top and Nested Left Frames and Top and Nested Right Frames each create a frameset, add a narrow empty frame to the left or right of the current frame, and then add another empty frame below both frames.


Using the Insert bar: Head

The Head tab in the Insert bar contains objects for adding elements to the head section of your documents.

This is a picture of the feature being described.

Meta inserts a meta tag into the head section of your document. A dialog box appears in which you can enter information for meta attributes. See Setting Meta properties.

Keywords inserts a meta name="keywords" tag into the head section of your document. A dialog box appears in which you can enter keywords for the document. See Setting Keywords properties.

Description inserts a Description meta tag into the head section of your document. A dialog box appears in which you can enter text that describes the document. See Setting Description properties.

Refresh inserts a Refresh meta tag into the head section of your document. A dialog box appears in which you can enter the number of seconds to wait before refreshing, and whether to reload the current page or go to a new one. See Setting Refresh properties.

Base inserts a base tag into the head section of your document. A dialog box appears in which you can enter a base URL for the document’s links. See Setting Base properties.

Link inserts a link tag into the head section of your document. A dialog box appears in which you can enter link information. Note that this is not a hypertext link; it is used most often to specify an external style sheet. See Setting Link properties.


Using the Insert bar: Layout

The Layout tab in the Insert bar allows you to view tables in either Standard view or Layout view. In Layout view, you can draw layout cells and layout tables.

This is a picture of the feature being described.

Table places a table at the insertion point. See Presenting Content with Tables.

Draw Layer creates a layer. Click the Layer button, then move the pointer to the Document window and drag to define the size and location of a layer. By default, Dreamweaver creates a layer defined by the div tag. Use the Property inspector to select a different tag, or change the default setting with Layer preferences. See Creating layers on your page.

Standard View displays tables as a grid of lines. See About layout cells and tables.

Layout View displays tables as boxes that can be drawn, dragged, and resized. See About layout cells and tables.

Draw Layout Cell lets you draw individual table cells in the Design view of the Document window. See About layout cells and tables.

Draw Layout Table lets you draw whole tables in the Design view of the Document window. See About layout cells and tables.


Using the Insert bar: Media

The Media tab in the Insert bar contains buttons for inserting special configurable objects such as plug-ins and applets.

This is a picture of the feature being described.

Flash places a Flash movie at the insertion point using the object and embed tags. A dialog box appears in which you can browse to an SWF file. The codebase, class id, and pluginspage attributes have been preset with the proper values for Macromedia Flash Player; use the Property inspector to specify other attributes for the movie. See Setting Flash and Shockwave movie properties.

Flash Button and Flash Text place Flash objects at the insertion point. See Inserting a Flash button object and Inserting a Flash text object.

Shockwave places a Macromedia Shockwave movie at the insertion point using the object and embed tags. The codebase, class id, and pluginspage attributes have been preset with the proper values for Shockwave. A dialog box appears so that you can specify a DCR source file for the movie, or you can use the Property inspector to specify a source file. See Setting Flash and Shockwave movie properties.

Applet places a Java applet at the insertion point. (The Java applet will appear only when you view the document in a browser.) A dialog box appears in which you can specify the file that contains the applet’s code, or click Cancel to leave the source unspecified. Use the Property inspector to specify other properties for the Java applet. See Setting Java applet properties.

Param inserts a tag that allows you to pass parameters to an applet or object.

ActiveX places an ActiveX control at the insertion point. Use the Property inspector to specify a source file and other properties for the ActiveX control. See Setting ActiveX properties.

Plugin uses the embed tag to insert a file (at the insertion point) that requires a Netscape Navigator plug-in for playback. A dialog box appears in which you can specify the source file. See Setting Netscape Navigator plug-in properties.


Using the Insert bar: Script

The Script tab in the Insert bar allows you to insert scripting-related elements into a page.

This is a picture of the feature being described.

Script places a script at the insertion point. A dialog box appears; choose the language and enter text for the script. See Editing scripts.

Noscript inserts a noscript section, for HTML code to be displayed in browsers in which scripting has been disabled.

Server-Side Include places a server-side include at the insertion point. A dialog box appears in which you can choose a source file for the include. See Working with server-side includes.


Using the Insert bar: Tables

The Tables tab in the Insert bar allows you to insert table-related tags.

This is a picture of the feature being described.

Table places a table at the insertion point. A dialog box allows you to specify table attributes, such as number of rows and number of columns. See Presenting Content with Tables.

Table, Table Row, Table Header, Table Data, and Table Caption each insert a pair of table-related tags (table, tr, th, td, or caption) at the insertion point. See Presenting Content with Tables.


Using the Insert bar: Templates

The Templates tab in the Insert bar allows you to save a document as a template file, and to insert various kinds of regions into a template file.

This is a picture of the feature being described.

For more information, see About Dreamweaver templates.


Using the Insert bar: Text

The Text tab in the Insert bar allows you to insert text- and paragraph-formatting tags.

This is a picture of the feature being described.

Note: Although some buttons in the Text tab look similar to some buttons in the text Property inspector, they serve different functions. Buttons in the Text tab merely insert code, and do not reflect the current state of the selection; if the selection is bold text, the Bold button in the Property inspector appears selected, while the Bold button in the Text tab does not.

Font Tag Editor displays the tag editor for the font tag, to allow you to set attributes before inserting the tag. See Editing tags with tag editors.

Bold, Italic, Strong, and Emphasis wrap the corresponding HTML text-formatting tags around the selection.

Paragraph, Block Quote, and Preformatted Text wrap the corresponding HTML block tags around the selection.

Heading 1, Heading 2, and Heading 3 wrap the corresponding HTML heading tags around the selection.

Unordered List, Ordered List, and List Item wrap the corresponding HTML list tags around the selection.

Definition List, Definition Term, and Definition Description wrap the corresponding HTML definition-list tags around the selection.

Abbreviation and Acronym insert tags that allow you to specify full text for an abbreviation or acronym, for the potential benefit of search engines, screen readers, and so on.


Using the Insert bar: ASP, ASP.NET, CFML Basic, CFML Flow, CFML Advanced, JSP, and PHP

The server code tabs in the Insert bar contain buttons for inserting useful pieces of code in various server languages. Each of these tabs is available only in documents that use a particular server language. The more complex objects in these tabs provide dialog boxes with Help buttons; for information about such an object, click the Help button.


Using the Property inspector

The Property inspector lets you examine and edit properties for the currently selected page element, such as text or an inserted object. You can select page elements in either Design view or Code view.

To show or hide the Property inspector, choose Window > Properties.

This is a picture of the feature being described.

Most changes you make to properties are immediately applied in the Document window. For some properties, however, changes are not applied until you click outside the property-editing text fields, press Enter (Windows) or Return (Macintosh), or press Tab to switch to another property.

The contents of the Property inspector vary depending on the element selected. For information on specific properties, select an element in the Document window and then click the Help icon in the upper right corner of the Property inspector.

The Property inspector initially displays most of the properties of the selected element. Click the expander arrow in the lower right corner of the Property inspector to collapse the Property inspector to show only the most commonly used properties.

Tip: In a few cases, certain obscure properties may not appear even in the expanded Property inspector; in these cases, use Code view or the Code inspector to code these properties by hand, or select the tag in Code view and choose Modify > Edit Tag.


Managing panels and panel groups

Panels in Dreamweaver are grouped together into panel groups. Each panel group can be expanded or collapsed, and can be docked or undocked with other panel groups. Panel groups can also be docked to the integrated application window (Windows integrated workspace only). This makes it easy to access the panels you need without cluttering your workspace. Panels within a panel group appear as tabs.

Note: When a panel group is floating (undocked), a narrow blank bar appears at the top of the panel group. In this documentation, the term “panel group’s title bar” refers to the area where the panel group’s name appears, rather than to this narrow blank bar.

To expand or collapse a panel group, do one of the following:
  • Click the expander arrow on the left side of the panel group’s title bar.
    This is a picture of the feature being described.
  • Click the panel group’s title.
To select a panel within an expanded panel group:

Click the panel’s tab.

To undock a panel group:

Drag the panel group by its gripper (on the left side of the panel group’s title bar) until its outline indicates that it’s no longer docked.

This is a picture of the feature being described.

To dock a panel group to other panel groups (floating workspace) or to the integrated window (Windows only):

Drag the panel group by its gripper until its outline indicates that it’s docked.

This is a picture of the feature being described.

Most panels can be docked only to either the left or the right of the Document window area in the integrated workspace, while others (such as the Property inspector and the Insert bar) can be docked only to the top or bottom of the integrated window.

To drag a floating (undocked) panel group without docking it:

Drag the panel group by the bar above its title bar. The panel group doesn’t dock as long as you don’t drag it by its gripper.

This is a picture of the feature being described.

To see a panel group’s Options menu:

Expand the panel group by clicking its expander arrow.

The Options menu is visible only when the panel group is expanded.

This is a picture of the feature being described.

Tip: Some options are available in the panel group’s context menu even when the group is collapsed; right-click (Windows) or Control-click (Macintosh) the panel group’s title bar to view the context menu.

To rename a panel group:
  1. Choose Rename Panel Group from the Options menu on the right side of the panel group’s title bar.
    This is a picture of the feature being described.
  2. Enter a new name and click OK.
To undock a panel from a panel group:

Drag the panel by its tab until its outline indicates that it’s no longer docked.

The panel appears in a new panel group of its own.

To dock a panel in a panel group:

Drag the panel by its tab until its outline indicates that it’s docked.

To maximize a panel group, do one of the following:
  • Choose Maximize Panel Group from the Options menu in the panel group’s title bar.
  • Double-click anywhere in the panel group’s title bar.

    • The panel group grows vertically to fill all of the available vertical space.

To close a panel group, making it disappear completely:

Choose Close Panel Group from the Options menu in the panel group’s title bar.

The panel group disappears from your screen.

To open a panel group that isn’t visible on your screen:

Choose the name of a panel from the Window menu.

To change the size of the entire set of panel groups (floating workspace only):

Drag to resize the set of panel groups just as you would drag to resize any window in your operating system. For example, you can drag the resize area at the lower right corner of the set of panel groups.


Setting Panels preferences

Use Panels preferences to specify which panels and inspectors always appear in front of the Document window, and which ones may be obscured by the Document window. You can also use Panels preferences to specify whether icons appear in the tabs for panels, whether the Launcher bar appears, and which panels and inspectors appear in the Launcher bar.

To set preferences for panels, choose Edit > Preferences and select Panels from the Category list on the left. Then select any of the following options:

Always on Top lets you specify which panels always appear in front of the Document window. By default, all panels, inspectors, and other such windows always “float” in front of the Document window. If you deselect an item in this list, then you can move the Document window in front of that item.

For example, to allow the Document window to obscure the Property inspector, deselect the Properties option. The Property inspector now appears in front of the Document window only when the Property inspector is active.

To allow the Document window to obscure any floating panels that you have added by customizing Dreamweaver, deselect All Other Panels.

Note: The Always on Top option doesn’t apply in the integrated workspace when all panels are docked.

Show Icons in Panels and Launcher determines whether the Launcher bar appears. When this option is selected, the Launcher bar appears in the status bar area, and a small icon appears in the tab for each panel. (See About the status bar.) The buttons in the Launcher bar open panels and inspectors.

Show in Launcher specifies which items appear in the Launcher bar.

To specify which items appear in the Launcher bar:
  1. To add an item to the Launcher bar, click the plus (+) button.
  2. To remove an item from the Launcher bar, select the item and click the minus (-) button.
  3. To change the order of the items in the Launcher bar, select an item in the list and click an arrow button.

    4. For example, to move an item to the right in the Launcher bar, move the item down in the list.

  4. Click OK.

    5. The Launcher bar changes to show the items you specified.


About the Site panel

The Site panel allows you to defines a site, manage the local files in your site, upload and download files from a remote site, and browse the files on your local disk outside of your site. For details on using the Site panel, see Managing Your Site.


About the History panel

The History panel shows a list of the steps you’ve performed in the active document since you created or opened that document, up to a specified maximum number of steps. (The History panel doesn’t show steps you’ve performed in other frames, in other Document windows, or in the Site panel.) It allows you to undo one or more steps; it also allows you to replay steps and to create new commands to automate repetitive tasks.

This is a picture of the feature being described.

The slider, or thumb, in the History panel initially points to the last step that you performed.


Using the History panel

The History panel keeps track of every step of your work in Dreamweaver. You can use the History panel to undo multiple steps at once.

If you want to undo the last operation you performed in a document, choose Edit > Undo, just as you would do in any other application. (The name of the Undo command changes in the Edit menu to reflect the last operation you performed.)

The History panel also lets you replay steps you’ve already performed and automate tasks by creating new commands. For more information, see About automating tasks.

To open the History panel:

Choose Window > Others > History.

To undo the last step:

Drag the History panel slider up one step in the list. This has the same effect as choosing Edit > Undo.

The undone step turns gray.

To undo multiple steps at once, do one of the following:
  • Drag the slider to point to any step.
  • Click to the left of a step along the path of the slider; the slider scrolls automatically to that step, undoing steps as it scrolls.

Note: To scroll automatically to a particular step, you must click to the left of the step; clicking the step itself selects the step. Selecting a step is different from going back to that step in your undo history.

As with undoing a single step, if you undo a series of steps and then do something new in the document, you can no longer redo the undone steps; they disappear from the History panel.

To set the number of steps that the History panel retains and shows:
  1. Choose Edit > Preferences or Dreamweaver > Preferences (Mac OS X) and select General from the Category list.
  2. Enter a number for Maximum Number of History Steps.

    3. The default value should be sufficient for most users’ needs. The higher the number, the more memory the History panel requires. This can affect performance and slow your computer down significantly. When the History panel reaches this maximum number of steps, the earliest steps are discarded.

Note: You can’t rearrange the order of steps in the History panel. Don’t think of the History panel as an arbitrary collection of commands; think of it as a way to view the steps you’ve performed, in the order in which you performed them.

To erase the history list for the current document:

In the History panel’s context menu, choose Clear History.

This command also clears all undo information for the current document; after choosing Clear History, you will be unable to undo the steps that are cleared. (Note that Clear History does not undo steps; it merely removes the record of those steps from Dreamweaver’s memory.)


About the Answers panel

The Answers panel provides quick access to information that helps you work effectively with Dreamweaver. This includes tutorials, TechNotes, Dreamweaver extensions, and other useful content.

To get the latest Dreamweaver information from macromedia.com, click the Update button.


Using Dreamweaver with other applications

Dreamweaver accommodates your web design and development process by making it easy for you to work with other applications. For information about working with other applications such as browsers, HTML editors, image editors, and animation tools, see the following topics:

  • For information about using Dreamweaver with other HTML editors, such as HomeSite or BBEdit, see Using an external HTML editor with Dreamweaver.
  • You can specify preferred browsers for previewing your site. See Previewing pages in browsers.
  • You can launch an external image editor, such as Macromedia Fireworks, from within Dreamweaver. See Using an external image editor.
  • You can configure Dreamweaver to launch a different editor for each file type. See Launching an external editor for media files.
  • For information about adding interactivity to your site using Macromedia Flash, see About Flash content.
  • To learn how to add animation to your site using Macromedia Shockwave movies, see Inserting Shockwave movies.
  • For information about using ColdFusion, see Setting Up a Web Application.


Customizing Dreamweaver: Basics

There are some basic techniques you can use to customize Dreamweaver to suit your needs without knowing complex code or editing text files. For example, you can set preferences, create your own keyboard shortcuts, and add extension to Dreamweaver.

For information about customizing configuration files by hand, see “Customizing Dreamweaver” on the Macromedia Support Center.


Setting preferences

Dreamweaver has preference settings that control the general appearance and behavior of the Dreamweaver user interface as well as options related to specific features such as layers, style sheets, displaying HTML and JavaScript code, external editors, and previewing in browsers. Information about specific preference options is provided throughout this help system with the associated feature or topic.

For information about the various preference options, see the following topics:

  • Setting General preferences
  • Activating the Accessibility dialog boxes
  • Setting code coloring preferences
  • Setting code formatting preferences
  • Setting Code Hints preferences
  • Setting code rewriting preferences
  • Setting CSS Styles preferences
  • Using external editors, Setting external image editor preferences, and Launching an external editor for media files for File Types/Editors preferences
  • Setting Fonts preferences
  • Setting Highlighting preferences
  • Setting Invisible Elements preferences
  • Setting Layers preferences
  • Setting Layout view preferences
  • Setting New Document preferences
  • Setting Panels preferences
  • Setting the Preview in Browser Preferences options
  • Setting Quick Tag Editor preferences
  • Setting Site panel preference options
  • Setting Status Bar preferences
  • Setting Validator preferences


Setting General preferences

The General preferences control the general appearance of Dreamweaver. To change these preferences, choose Edit > Preferences or Dreamweaver > Preferences (Mac OS X), and then click General. The General preferences are divided into two subcategories: Document Options and Editing Options.

Show Only Site Window on Startup (floating workspace only) displays only the Site panel and selected other panels rather than a new document when Dreamweaver starts up.

Open Files in New Window (Windows only) makes it easier to open several documents at once. When this option is off and you choose File > Open, each file you open appears in the current window, replacing the current document. (This does not apply when opening files from the Site menu, double-clicking a file icon, and so on.) On the Macintosh, files always open in a new window.

Warn When Opening Read-Only Files alerts you when you open a read-only (locked) file. You are given the option to unlock/check out the file, view the file, or cancel.

Update Links When Moving Files determines what Dreamweaver does when you move, rename, or delete a document within your site. You can set this preference to always update links automatically, never update links, or prompt you to perform an update. See Managing links.

Change Workspace (Windows only) allows you to choose any of three workspace layouts: an integrated workspace with panels on the right, an integrated workspace with panels on the left, tailored to coders, or a Dreamweaver 4-like floating workspace. After you choose a new workspace, exit Dreamweaver and restart it to see the changes. For more information, see Choosing a workspace layout (Windows only).

Show Dialog When Inserting Objects determines whether Dreamweaver prompts you to enter additional information when inserting images, tables, Shockwave movies, and certain other objects using the Insert bar or the Insert menu. If this option is off, the dialog box does not appear and you must use the Property inspector to specify the source file for images, the number of rows in a table, and so on. For rollover images and Fireworks HTML, a dialog box always appears when you insert the object, regardless of this option setting. (To temporarily override this setting, Control-click (Windows) or Command-click (Macintosh) when creating and inserting objects.)

Faster Table Editing (Deferred Update) makes typing in tables faster by deferring some adjustment of column widths and row heights until you click outside the table. If this option is on, you can update the table while editing by pressing Control+Spacebar (Windows) or Command+Spacebar (Macintosh).

Enable Double-Byte Inline Input enables you to enter double-byte text directly into the Document window if you are using a development environment or language kit that facilitates double-byte text (such as Japanese characters).When this option is deselected, a text input window appears for entering and converting double-byte text; the text appears in the Document window after it is accepted. See also Setting Fonts preferences.

Switch to Plain Paragraph After Heading specifies that pressing Enter (Windows) or Return (Macintosh) at the end of a heading paragraph in Design view creates a new paragraph tagged with a p tag. (A heading paragraph is one that’s tagged with a heading tag such as h1 or h2.) When the option is disabled, pressing Enter or Return at the end of a heading paragraph creates a new paragraph tagged with the same heading tag (allowing you to type multiple headings in a row and then go back and fill in details).

Allow Multiple Consecutive Spaces specifies that typing two or more spaces in Design view creates nonbreaking spaces that appear in a browser as multiple spaces. (For example, you can type two spaces between sentences, as you would on a typewriter.) This option is designed mostly for people who are used to typing in word processors. When the option is disabled, multiple spaces are treated as a single space (because browsers treat multiple spaces as single spaces).

Use <strong> and <em> in place of <b> and <i> specifies that Dreamweaver should apply the strong tag whenever you perform an action that would normally apply the b tag, and should apply the em tag whenever you perform an action that would normally apply the i tag. Such actions include clicking the Bold or Italic buttons in the text Property inspector and choosing Text > Style > Bold or Text > Style > Italic. To use the b and i tags in your documents, deselect this option.

Note: The World Wide Web Consortium discourages use of the b and i tags; the strong and em tags provide more semantic information than the b and i tags do.

Maximum Number of History Steps determines the number of steps the History panel retains and shows. (The default value should be sufficient for most users.) If you exceed the given number of steps in the History panel, the oldest steps are discarded. See About automating tasks.

Insert Bar lets you view the contents of the Insert bar as icons and text, icons only, or text only.

Spelling Dictionary lists the available spelling dictionaries. If a dictionary contains multiple dialects or spelling conventions (such as American English and British English), the dialects are listed separately in the Dictionary pop-up menu.


Setting Fonts preferences

Use Fonts preferences to set the fonts that Dreamweaver uses to display each font encoding. A document’s encoding determines how the document is displayed in a browser. Dreamweaver font settings let you view a given encoding in the font and size you prefer without affecting how the document appears when viewed by others in a browser. See Setting Up a Document for information on setting a default encoding for new documents.

To set the fonts to use in Dreamweaver for each type of encoding:
  1. Choose Edit > Preferences and click Fonts in the Category list.
  2. Select an encoding type (such as Western (Latin1) or Japanese) from the Font Settings list, then choose fonts to use within Dreamweaver for that encoding, using the font pop-up menus below the Font Settings list.

    3. Note: The fonts you choose do not affect how the document appears in a visitor’s browser.

The following is a more detailed description of the options.

Font Settings lets you specify the set of fonts to be used in Dreamweaver for documents that use a given type of encoding. For example, to specify fonts to use for Japanese documents, select Japanese from the Font Settings list and then choose a proportional font, a fixed font, a Code view font, and a Tag inspector font from the menus below; all documents in Japanese encodings are then displayed using those specified fonts.

Note: To appear in the font pop-up menus, a font must be installed on your computer. For example, to see Japanese text you must have a Japanese font installed.

To specify the fonts used for U.S. English and all Western European languages, choose Western from the Font Settings list, and then choose a set of four fonts from the font pop-up menus. To set appropriate double-byte fonts for Asian languages, choose Japanese, Traditional Chinese, Simplified Chinese, or Korean. (To display an Asian language, you must be using an operating system that supports double-byte fonts.) You may also choose fonts for Central European, Cyrillic, Greek, Icelandic Mac, or Other encodings.

Proportional Font is the font Dreamweaver uses to display normal text (for example, text in paragraphs, headings, and tables). The default depends on your system’s installed fonts. For most U.S. systems, the default is Times New Roman 12 pt. (Medium) on Windows and Times 12 pt. on the Macintosh.

Fixed Font is the font Dreamweaver uses to display text within pre, code, and tt tags. The default depends on your system’s installed fonts. For most U.S. systems, the default is Courier New 10 pt. (Small) on Windows and Monaco 12 pt. on the Macintosh.

Code View is the font used for all text that appears in the Code view and Code inspector. The default depends on your system’s installed fonts.

Tag Inspector is the font used for text that appears in the Tag inspector. For more information, see Editing tags with the Tag inspector.


Setting Highlighting preferences

Highlighting preferences let you customize the colors Dreamweaver uses to identify template regions, library items, third-party tags, layout elements, and code. For more information, see the following topics:

  • In templates and files based on templates, editable regions and locked regions are outlined in different highlight colors. To customize template highlight colors, see Setting template highlighting preferences.
  • To specify the highlight color for library items, see Setting Library highlighting preferences.
  • To specify a highlight color for content tagged with third-party tags. For more information about third-party tags, see “Customizing Dreamweaver” on the Macromedia Support Center.
  • To specify highlight colors for layout cells and layout tables, see About layout cells and tables.
  • To specify text colors in the Document window’s Code view or the Code inspector, see Setting code coloring preferences.


Using the Keyboard Shortcut Editor

Use the Keyboard Shortcut Editor to create your own shortcut keys, edit existing shortcuts, or use a predetermined set of shortcuts.

Note: Charts showing all the keyboard shortcuts in the default Dreamweaver configuration are available on the Macromedia website.

To edit keyboard shortcuts:
  1. Choose Edit > Keyboard Shortcuts.

    2. The Keyboard Shortcuts dialog box appears.
    This is a picture of the feature being described.

  2. Set any of the following options:
    • Current Set allows you to choose a set of predetermined shortcuts included with Dreamweaver, or any custom set you’ve defined. The predetermined sets are listed at the top of the menu. For example, if you are familiar with the shortcuts found in HomeSite or BBEdit, you can use those shortcuts by choosing the corresponding predetermined set.
    • Commands allows you to select a category of commands to edit. For example, you can edit menu commands, such as the Open command, or code editing commands, such as Balance Braces.
    • The command list displays the commands associated with the category you selected from the Commands pop-up menu, along with the assigned shortcuts. The Menu Commands category displays this list as a tree view that replicates the structure of the menus. The other categories list the commands by name (such as Quit Application), in a flat list.
    • Shortcuts displays all shortcuts assigned to the selected command.
    • Add Item (+) adds a new shortcut to the current command. Click this button to add a new blank line to the Shortcuts text box. Enter a new key combination and click Change to add a new keyboard shortcut for this command. You can assign two different keyboard shortcuts for each command; if there are already two shortcuts assigned to a command, the Add Item button does nothing.
    • Remove Item (-) removes the selected shortcut from the list of shortcuts.
    • Press Key displays the key combination you enter when you’re adding or changing a shortcut.
    • Change adds the key combination shown in the Press Key text box to the list of shortcuts, or changes the selected shortcut to the specified key combination.
    • Duplicate duplicates the current set. Give the new set a name; the default name is the current set’s name with the word copy appended.
    • Rename renames the current set.
    • Save as HTML File saves the current set in an HTML table format for easy viewing and printing. You can open the HTML file in your browser and print the shortcuts for easy reference.
    • Delete deletes a set. (You cannot delete the active set.)
To remove a shortcut from a command:
  1. From the Commands pop-up menu, select a command category.

    2. The Commands list displays the commands in that category.

  2. In the Commands list, select a command.

    3. The shortcuts assigned to the command appear in the Shortcuts text box.

  3. Select a shortcut.
  4. Click the Remove Item (-) button.
To add a shortcut to a command:
  1. From the Commands pop-up menu, select a command category.

    2. The Commands list displays the commands in that category.

  2. In the Commands list, select a command.

    3. The shortcuts assigned to the command appear in the Shortcuts text box.

  3. Prepare to add a shortcut by doing one of the following:
    • If there are fewer than two shortcuts already assigned to the command, click the Add Item (+) button. A new blank line appears in the Shortcuts text box and the insertion point moves to the Press Key text box.
    • If there are already two shortcuts assigned to the command, select one of them. (That one will be replaced by the new shortcut.) Then click in the Press Key text box.
  4. Press a key combination.

    5. The key combination appears in the Press Key text box.

    Note: If there is a problem with the key combination (for example, if the key combination is already assigned to another command), an explanatory message appears just below the Shortcuts field and you may be unable to add or edit the shortcut.

  5. Click Change. The new key combination is assigned to the command.
To edit an existing shortcut:
  1. From the Commands pop-up menu, select a command category.

    2. The Commands list displays the commands in that category.

  2. In the Commands list, select a command.

    3. The shortcuts assigned to the command appear in the Shortcuts text box.

  3. Select a shortcut to change.
  4. Click in the Press Key text box and enter a new key combination.
  5. Click the Change button to change the shortcut.

    6. Note: If there is a problem with the key combination (for example, if the key combination is already assigned to another command), an explanatory message appears just below the Shortcuts field and you may be unable to add or edit the shortcut.


Adding extensions to Dreamweaver

Extensions are new features that you can add easily to Dreamweaver. You can use many types of extensions; for example, there are extensions that let you reformat tables, connect to back-end databases, or help you write scripts for browsers.

Note: To install extensions that all users can use in a multiuser operating system, you must be logged in as Administrator (Windows) or root (Mac OS X). For more information about multiuser systems, see Customizing Dreamweaver in multiuser systems.

To find the latest extensions for Dreamweaver, use the Macromedia Exchange website. Once there, you can log in and download extensions (many of which are free), join discussion groups, view user ratings and reviews, and install and use the Extension Manager. You must install the Extension Manager before you can install extensions.

The Extension Manager is a separate application that lets you install and manage extensions in Macromedia applications. Launch the Extension Manager from Dreamweaver by choosing Commands > Manage Extensions.

To install and manage extensions:
  1. On the Macromedia Exchange website, click the download link for an extension.

    2. Your browser may allow you to choose to open and install it directly from the site or save it to disk.

    • If you are opening the extension directly from the site, the Extension Manager handles the installation automatically.
    • If you are saving the extension to disk, a good place to save the extension package file (.mxp) is the Downloaded Extensions folder within the Dreamweaver application folder on your computer.
  2. Double-click the extension package file or open the Extension Manager and choose File > Install Extension.

    3. The extension is installed in Dreamweaver. Some extensions aren’t accessible until Dreamweaver has restarted; you may be prompted to quit and restart the application.

Use the Extension Manager to remove extensions or to see more information about an extension.


Customizing Dreamweaver in multiuser systems

You can customize Dreamweaver to suit your needs even in a multiuser operating system such as Windows NT, Windows 2000, Windows XP, or Mac OS X. Dreamweaver prevents any user’s customized configuration from affecting any other user’s customized configuration. To accomplish this goal, the first time you run Dreamweaver in one of the multiuser operating systems that it recognizes, the application creates copies of a variety of configuration files for you. These user configuration files are stored in a folder belonging to you. For example, in Windows XP they’re stored in C:\Documents and Settings\username\Application Data\Macromedia\Dreamweaver MX\Configuration (which may be inside a hidden folder), and in Mac OS X they're stored inside your home folder; specifically, in Users/username/Library/Application Support/Macromedia/Dreamweaver MX/Configuration.

Note: In older operating systems (Windows 98, Windows ME, and Mac OS 9.x), a single set of Dreamweaver configuration files is shared by all users, even if the operating system is configured to support multiple users.

If you reinstall or upgrade Dreamweaver, Dreamweaver automatically makes backup copies of existing user configuration files, so that if you’ve customized those files by hand, you still have access to the changes you made.

Previous


Planning and Setting Up Your Site

A website is a set of linked documents with shared attributes, such as related topics, a similar design, or a shared purpose.

Macromedia Dreamweaver MX is a site creation and management tool, so you can use it to create complete websites, in addition to individual documents. For best results, design and plan your website before you create any of the pages that the site will contain.

Note: If you can’t wait to start creating documents, you can try out some of the Dreamweaver document-creation tools and make a sample document (see Creating a new blank document). But don’t start serious document development until you’ve set up a site.

The first step in creating a website is planning (see About site planning and design). The next step is to set up the basic structure of the site (see Setting up a Dreamweaver site). When you begin to develop site content, consider basing your site on a Dreamweaver template (see About Dreamweaver templates and Creating a Dreamweaver template).

If you already have a site on a web server and you want to begin using Dreamweaver to edit that site, see Editing a Dreamweaver site.

This chapter includes the following sections:

About site planning and design

Setting up a Dreamweaver site

Setting up a local folder

Setting up a remote folder

Editing a Dreamweaver site

Editing existing websites in Dreamweaver

Next


About site planning and design

In Dreamweaver, the term site can refer either to a website or to a local storage location for the documents belonging to a website. When you begin thinking about creating a website, you should follow a series of planning steps to make sure your site succeeds. Even if you are just creating a personal home page that only friends and family will see, it is to your advantage to plan the site carefully to make sure everyone will be able to use it successfully.


Determining your goals

Deciding what your site goals are is the very first step you should take when you create a website. Ask yourself or your client questions about the site. What do you hope to accomplish by having a website? Write down your goals so that you remember them as you go through the design process. Goals help you focus and target your website to your particular needs.

A website that provides news about a specific subject should have a very different look and navigation than that of a website that sells products. The complexity of your goals will affect the navigation, the authoring tools that you use (Flash, Director, and so on), and even the look and feel of your site.


Choosing a target audience

After you have decided what you want to accomplish with your website, you need to decide who you want to visit your site. This may seem to be a silly question, since most people want everyone to visit their website. However, it is difficult to create a website that every single person in the world will be able to use. People use different browsers, connect at different speeds, and may or may not have media plug-ins. All of these factors can affect the use of your site. That is why you need to determine a target audience.

Think about the people who will be attracted to your website, or who you hope to attract. What kinds of computers do you think they will be using? What platform might be the dominant one (Macintosh, Windows, Linux, and so on)? What is the average connection speed (33.6 Kbps modem or DSL)? What kinds of browsers and monitor sizes will they be using? Are you creating an intranet site where everyone will be using the same computer OS and browser? All of these factors can greatly affect the way your web page appears to visitors.

Once you choose the audience and have determined what types of computers, connection speeds, and browsers they will be using, you can target your design.

For example, say your target audience is predominantly made up of Windows users with 17-inch monitors, using Microsoft Internet Explorer 3.0 or above. As you design your web page, you should test that your site works best in Internet Explorer on a Windows computer with a screen size of 800 x 600 pixels. Fewer viewers may use Netscape Navigator on a Macintosh platform, but you should still make sure your site works on those machines, although it may not display as precisely as it does for your target audience.


Creating sites for browser compatibility

As you create your site, you should be aware of the variety of web browsers your visitors are likely to use. Where possible, design sites for maximum browser compatibility, given other design constraints.

There are over two dozen different web browsers in use, most of which have been released in more than one version. Even if you target only Netscape Navigator and Microsoft Internet Explorer, which are used by the majority of web users, be aware that not everyone uses the very latest versions of those browsers. If your site is on the web, sooner or later someone will visit it using Netscape Navigator 2.0, or the browser that AOL provides its customers, or a text-only browser such as Lynx.

There are some circumstances under which there’s no need to create sites that are cross-browser-compatible. For example, if your site is available only on your company’s intranet, and you know that all of your company’s employees use the same browser, you can optimize your site to rely on features of that browser. Similarly, if you’re creating HTML content to be distributed on CD-ROM, and you distribute a browser on the CD, you can assume that all of your customers have access to that particular browser.

Under most circumstances, for websites designed for public viewing, it’s a good idea to make your site viewable in as many browsers as possible. Pick one or two browsers as your target browsers, and design the site for those browsers, but try exploring the site in other browsers now and then to avoid including too much incompatible content. You can also post a message on a discussion board to ask others to view your site. This can be a good way to get feedback from a wide audience.

The more sophisticated your site is—in terms of layout, animation, multimedia content, and interaction—the less likely it is to be cross-browser-compatible. Not all browsers can run JavaScript, for example. A page of plain text that uses no special characters will probably display well in any browser, but such a page may have much less aesthetic appeal than one that uses graphics, layout, and interaction effectively. Try to strike a balance between designing for maximum effect and designing for maximum browser compatibility.

One useful approach is to provide multiple versions of certain important pages, such as your site’s home page. For example, you can design both a framed version and a frameless version of such a page. You can then include in your web page a behavior that automatically shifts visitors without frame-capable browsers to the frameless version. For more information, see Using the behavior actions that come with Dreamweaver.


Organizing the site structure

Organizing your site carefully from the beginning can save you frustration and time later on. If you begin creating documents without thinking about where in your folder hierarchy they should go, you may end up with a huge, unwieldy folder full of files, or with related files scattered through a lot of similarly named folders.

The usual way to set up a site is to create a folder on your local disk that contains all the files for your site (referred to as the local site), and to create and edit documents within that folder. You then copy those files to a web server when you are ready to publish your site and allow the public to view it. This approach is better than creating and editing files on the live public website itself, because it allows you to test changes in the local site before making them publicly viewable, and then when you’re finished, you can upload the local site files and update the entire public site at once.

To coordinate your local site with Dreamweaver, see Setting up a Dreamweaver site. Once you set up the local site with Dreamweaver, you can more easily manage your site files, track links, update pages, and more.

Break down your site into categories Put related pages in the same folder. For example, your company press releases, contact information, and job postings might go all in one folder, and your online catalog pages in another folder. Use subfolders where necessary. This type of organization will make your site easier to maintain and navigate.

Decide where to put items such as images and sound files It’s convenient to place all your images, for example, in one location, so that when you want to insert an image into a page you know where to find it. Designers sometimes place all of the non-HTML items to be used on a site in a folder called Assets. That folder may contain other folders—for example, an Images folder, a Shockwave folder, and a Sound folder. Or you might have a separate Assets folder for each group of related pages on your site, if there aren’t many assets shared among such groups.

This image shows sample file structures for storing site image and sound files.

Use the same structure for local and remote sites Your local site and your remote website should have exactly the same structure. If you create a local site using Dreamweaver and then upload everything to the remote site, Dreamweaver ensures that the local structure is precisely duplicated in the remote site.


Creating your design look

You save a lot of time later in the process if you plan your design and layout before you actually begin working in Dreamweaver. It can be as simple as creating a mock-up drawing of how you want the site layout to look on a piece of paper. A more advanced approach would be to create a composite drawing of your site using software such as Macromedia FreeHand or Fireworks. The important thing is to have a mock-up of your layout and design so you can follow it later as you build your site.

It is important to maintain consistency in your page layout and design. You want users to be able to click through the pages in your site without getting confused because all the pages have a different look, or the navigation is in a different place on each page.


Designing the navigation scheme

Another area where planning pays off is navigation. As you design your site, think about the experience you want your visitors to have. Think about how a visitor to your site will be able to move from one area to another. Consider the following points:

“You are here” information enables visitors to easily know where they are in your site and how to return to your top-level page.

Searching and indexes make it easy for visitors to find any information they are looking for.

Feedback provides a way for visitors to contact the webmaster (if appropriate) if something is wrong with the site, and to contact other relevant people associated with the company or the site.

Design the way your navigation will look. Navigation should be consistent throughout your site. If you place a navigation bar across the top of your home page, try to keep it there for all the linked pages.

Dreamweaver has two navigation tools that you can use to create your navigation scheme. For more information, see Linking and Navigation.


Planning and gathering assets

Once you know what your design and layout will look like, you can create and gather the assets that you will need. Assets can be items such as images, text, or media (Flash, Shockwave, and more). Make sure you have all of these items gathered and ready to go before you begin developing your site. Otherwise, you’ll have to continually stop development to find an image or to create a button.

If you are using images and graphics from a clip-art site or someone else is creating them, make sure you collect them and put them in a folder on your site (see Organizing the site structure). If you are creating the assets yourself, make sure you create them all before you start development, including any images you need if you are using rollovers. Then organize your assets so you can access them easily while creating your site in Dreamweaver.

Dreamweaver can make it easier for you to reuse page layouts and page elements in various documents by using templates and libraries. However, it is easier to create new pages with templates and libraries than it is to apply them to existing documents.

Use templates if many of your pages will use the same layout. Plan and design a template for that layout, and then you can create new pages based on that template. If you decide to change the layout for all the pages, you can simply change the template.

Note: There are certain restrictions on what changes you can make to documents that are based on templates. Templates are best used in collaborative environments, to ensure that everyone is using the same page layout. Library items may provide more flexibility for use outside of collaborative environments.

Use library items if you know that a certain image or other content will appear on many pages throughout your site; design that content ahead of time and make it a library item. Then if you change that item later, the updated version appears on all pages that use it.

For more information on reusing page layouts and elements, see Managing Site Assets, Libraries, and Templates.


Setting up a Dreamweaver site

After you plan your site structure (see Organizing the site structure), or if you already have an existing site, you must designate a new site in Dreamweaver before you start developing.

A Dreamweaver site is a way to organize all of the documents associated with a website. You can think of it as a project. You need to set up a site for each website you develop. Organizing your files in a site enables you to use Dreamweaver with FTP to upload your site to the web server, automatically track and maintain your links, manage files, and share files. You cannot take full advantage of Dreamweaver features unless you define a site.

A Dreamweaver site consists of as many as three parts, depending on your environment and the type of website you are developing:

  • Local folder is your working directory. Dreamweaver refers to this folder as your “local site.” For more information, see Setting up a local folder.
  • Remote folder is where you store your files, depending on your environment, for testing, production, collaboration, or so on. Dreamweaver refers to this folder as your “remote site.” For more information, see Setting up a remote folder).
  • Folder for dynamic pages is the folder where Dreamweaver processes dynamic pages. For more information, see Specifying where dynamic pages can be processed.

To get started, you can set up a Dreamweaver site completely or you can just start with the first step, setting up your local folder. You must at least set up a local folder before you start using Dreamweaver.

There are two ways you can set up a Dreamweaver site: use the Site Definition Wizard, which steps you through the setup process, or use the Site Definition Advanced settings, which enable you to set up local, remote, and testing folders individually, as necessary.

To set up a Dreamweaver site:
  1. Select Site > New Site.

    2. The Site Definition dialog box appears.

  2. Click the Basic tab to use the Site Definition Wizard, or click the Advanced tab to use the Advanced settings.
  3. Complete the Dreamweaver site setup process:
    • For the Site Definition Wizard, answer the questions, and click Next to advance through the setup process (see Using the Site Definition Wizard).
    • For Advanced settings, complete the Local Info category (see Setting up a local folder), the Remote Info category (see Setting up a remote folder), and the Testing Server category (see Specifying where dynamic pages can be processed), as necessary.

Note: Users who are new to Dreamweaver are encouraged to use the Site Definition Wizard; experienced Dreamweaver users might prefer to use the Advanced settings.


Using the Site Definition Wizard

You can use the Site Definition Wizard to set up a Dreamweaver site. The Site Definition Wizard steps you through the site setup process. This method is recommended for users who are new to Dreamweaver.

The wizard has three sections. Each section might have multiple screens, referred to as parts, depending on the settings you select. The three main sections include the following:

  • Editing Files is where you set up your local folder. For more information, see Setting up a local folder.
  • Testing Files is where you set up a folder for Dreamweaver to process dynamic pages. For more information, see Specifying where dynamic pages can be processed.
  • Sharing Files is where you set up your remote folder. For more information, see Setting up a remote folder.

At the top of the dialog box, the bold section name indicates where you are in the setup process. You might not need to set up folders in all three sections. Each section asks you questions to help you determine your needs.

To use the Site Definition Wizard to set up a Dreamweaver site:
  1. Select Site > New Site.

    2. The Site Definition dialog box appears.

  2. Click the Basic tab to use the Site Definition Wizard.
  3. Answer questions on each screen, and then click Next to advance. Click Back to return to a previous screen, if necessary.


Setting up a local folder

The local folder is your working directory for your Dreamweaver site (see Setting up a Dreamweaver site). This folder can be on your local machine or it can be on a network server. It is the place where you store your “in progress” files for a Dreamweaver site.

When you set up a local folder you establish a Dreamweaver site. You might also add remote and testing folders (see Setting up a remote folder and Creating a root folder for the application), but you need to at least set up a local folder before you start developing in Dreamweaver.

Setting up a local folder:
  1. Choose Site > New Site.

    2. The Site Definition dialog box appears.

  2. Click the Advanced button, if the Advanced settings aren’t showing.

    3. The Advanced tab of the Site Definition dialog displays the Local Info category options.
    This is a picture of the feature being described.

  3. Enter the Local Info options.

    4. For more information, see Setting Local Info category options.

  4. Click OK.

    5. Dreamweaver creates the initial site cache, and the new Dreamweaver site appears in the Site panel. For more information about the site panel and site management, see Managing Your Site.

Later, when you’re ready to publish the site on a remote server, you need to add additional information about the site. For information, see Setting up a remote folder.


Setting up a remote folder

After you set up a local folder for a Dreamweaver site (see Setting up a local folder), you can set up a remote folder. The local and remote folders enable you to transfer files between your local disk and web server; this makes it easy for you to manage files in your Dreamweaver sites.

Depending on your environment, the remote folder is where you store files for testing, collaboration, production, deployment, or a number of other scenarios. Typically, your remote folder is on the machine where your web server is running.

Note: You don’t need to specify a remote folder if the folder you specified as your local folder in the Local Info category (see Setting up a local folder) is the same folder you created for your site files on the system running your web server. This implies the web server is running on your local computer.

Determine how your will access the remote folder and note the connection information. When you’ve gathered this information, use the Edit Sites command to set up your remote folder. If you encounter problems, see Troubleshooting remote folder setup.

After you’ve set up a remote folder, you can connect to it, and then browse and manage files in your Dreamweaver site. If you are developing a dynamic site, you need to add a folder for processing dynamic pages (see Specifying where dynamic pages can be processed).

To set up a remote folder:
  1. Choose Site > Edit Sites.

    2. The Edit Sites dialog box appears.

  2. Select an existing Dreamweaver site.

    3. If you have not defined any Dreamweaver sites, create a local folder before proceeding (see Setting up a local folder).

  3. Click Edit.

    4. The Site Definition dialog box appears.

  4. Click the Advanced button if Dreamweaver displays the Site Definition Wizard.
  5. Select Remote Info from the Category list on the left.
  6. Choose an Access option.

    7. For more information, see Setting Remote Info category options.

  7. Click OK.
To connect to a remote folder:

In the Site panel, choose Site > Connect or click the Connect to Remote Host button on the Site panel toolbar.

Note: If your site uses FTP with SSH to access your remote folder, when you try to connect to your remote server, a command prompt launches for you to login to the SSH server. Click OK in the Dreamweaver dialog box after you log in.

To disconnect from a remote folder:

In the Site panel, choose Site > Disconnect or click the Disconnect button on the Site panel toolbar.


Choosing the host directory for FTP access

If you choose FTP to access your remote folder (see Setting up a remote folder), you must determine the remote folder’s host directory. The host directory you specify should correspond to the root folder of the local folder. The following diagram shows a sample local folder on the left and a sample remote folder on the right.

This image shows how a sample remote folder's host directory corresponds to a local folder's root directory.

If the structure of your folder site doesn’t match the structure of your local folder, Dreamweaver uploads your files to the wrong place, and the files aren’t visible to visitors to the site. Also, your image and link paths are broken.

The remote root directory must exist before Dreamweaver can connect to it. If you don’t have a root directory for your remote folder, create one or ask the server’s administrator to create a root directory for you.

If you’re uncertain what to enter in the Host Directory text box, contact the server’s administrator. Or, you can try leaving the text box blank. On some servers, your root directory is the same as the directory you first connect to with FTP. To find out, connect to the server. If a folder with a name like public_html, or www, or your login name, appears in the Remote File view in your Site panel, that’s probably the directory you should use in the Host Directory text box.


Using Secure Shell for FTP access

When you select FTP in the Site Definition dialog box to access your remote folder, in Windows you can choose to use SSH (Secure Shell). To activate SSH in Windows, seeSetting Remote Info options for FTP access.

To use SSH in Macintosh, download the Macintosh SSH client from the The Dreamweaver Support Center website .


Troubleshooting remote folder setup

A web server can be configured in a wide variety of ways. The following list provides information on some common issues you may encounter in setting up a remote folder, and how to resolve them:

  • The Dreamweaver FTP implementation may not work properly with certain proxy servers, multilevel firewalls, and other forms of indirect server access.

    • If you encounter problems with FTP access, ask your local system administrator for help.

  • For the Dreamweaver FTP implementation, you must connect to the remote system’s root folder. (In many applications, you can connect to any remote directory, then navigate through the remote file system to find the directory you want.)

    • Be sure that you indicate the remote system’s root folder as the host directory.

    If you have problems connecting, and you’ve specified the host directory using a single slash (/), you might need to specify a relative path from the directory you are connecting to and the remote root folder.

    For example, if the remote root folder is a higher level directory, you may need to specify a ../../ for the host directory.

  • File and folder names that contain spaces and special characters often cause problems when transferred to a remote site.

    • Use underscores in place of spaces, and avoid special characters in file and folder names wherever possible. In particular, colons, slashes, periods, and apostrophes in file or folder names can cause problems. Special characters in file or folder names may also sometimes prevent Dreamweaver from creating a site map.

  • If you encounter problems with long filenames, rename them with shorter names. On the Macintosh, filenames cannot be more than 31 characters long.
  • Note that many servers use symbolic links (UNIX), shortcuts (Windows), or aliases (Macintosh) to connect a folder on one part of the server’s disk with another folder elsewhere.

    • For example, the public_html subdirectory of your home directory on the server may really be a link to another part of the server entirely. In most cases, such aliases have no effect on your ability to connect to the appropriate folder or directory, but if you can connect to one part of the server but not another, there may be an alias discrepancy.

  • If you encounter an error message such as “cannot put file,” your remote folder may be out of space. Look at the FTP log for more detailed information.

    • In general, when you encounter a problem with an FTP transfer, examine the FTP log by choosing Window > Results > FTP Log in the Site panel (Windows) or Site > FTP Log (Macintosh).


Editing a Dreamweaver site

Use the Site Definition Advanced settings to edit your Dreamweaver sites.

To edit a Dreamweaver site, do one of the following:
  • Choose Site > Edit Sites, select a site, and then click Edit.
  • Choose Site > Open Site, and then select a site.


Editing existing websites in Dreamweaver

You can use Dreamweaver to edit existing sites, even if you didn’t use Dreamweaver to create the original site. You can editing existing sites that are on your local system or sites that are on a remote system.


Editing an existing local website in Dreamweaver

You can use Dreamweaver to edit an existing website on your local disk, even if you didn’t use Dreamweaver to create the original site.

To edit an existing local website:
  1. Open the Site Definition dialog box by doing one of the following:
    • Choose Site > Edit Sites, and then click New.
    • Choose Site > Open Site > Define Sites.

      • The Site Definition dialog box displays the Local Info options.

  2. Complete the dialog box.

    3. For more information, see Setting Local Info category options.

  3. Click OK.


Editing an existing remote website in Dreamweaver

You can use Dreamweaver to copy an existing remote site (or any branch of a remote site) to your local disk and edit it there, even if you didn’t use Dreamweaver to create the original site.

Even if you intend to edit only part of the remote site, you must locally duplicate the entire structure of the relevant branch of the remote site, from the remote site’s root folder down to the files you want to edit.

For example, if your remote site’s root folder, named public_html, contains two folders, Project1 and Project2, and you want to work only on the HTML files in Project1, you don’t need to download the files in Project2, but you must map your local root folder to public_html, not to Project1.

This image shows a sample local site file structure that duplicates the remote site file structure.

To edit an existing remote site:
  1. Create a local folder to contain the existing site, then set it up as the local root folder for the site (see Setting up a local folder).
  2. Set up a remote folder, using information about your existing site (see Setting up a remote folder). Make sure to choose the correct root folder for the remote site.
  3. Click the Connect button in the Site panel to connect to the remote site.
  4. Depending on how much of the remote site you want to edit, do one of the following:
    • If you want to work with the entire site, select the root folder of the remote site, and click Get to download the entire site to your local disk.
    • If you want to work with just one of the files or folders of the site, locate the file or folder in the Remote view of the Site panel, and click Get File(s) to download that file to your local disk.

      • Dreamweaver automatically duplicates as much of the remote site’s structure as is necessary to place the downloaded file in the correct part of the site hierarchy. When editing only one part of a site, you should generally choose to include dependent files.

  5. Proceed as if creating a site from scratch: edit documents, preview and test them, and upload them again to the remote site.


Reference

This section describes the dialog boxes introduced in this chapter.


Setting the Site Definition Wizard Editing Files options

The purpose of this dialog box is to name your Dreamweaver site.

A Dreamweaver site is a way to organize all of the documents associated with a website. You can think of it as a project. You need to set up a site for each website you develop. Organizing your files in a site enables you to use Dreamweaver with FTP to upload your site to the web server, automatically track and maintain your links, manage files, and share files. You cannot take full advantage of Dreamweaver features unless you define a site.

Procedure

Enter a name for your Dreamweaver site.

Related topic

Setting up a Dreamweaver site


Setting the Site Definition Wizard Editing Files options

The purpose of this dialog box is to indicate whether you are building a web application—meaning that your site contains dynamic content. A web application is a collection of web pages that interact with the user, with each other, and with various resources on a web server, including databases.

If you are building a web application, you need to select the server technology running on your web server to support dynamic content.

Procedure
  1. Select No if you do not plan to use a server technology to create a web application, or select Yes if you plan to use a server technology to create a web application.
  2. If you select Yes, choose a server technology.

    3. You can use Dreamweaver to build web applications using five server technologies: ColdFusion, ASP.NET, ASP, JSP, or PHP. Each of these technologies corresponds to a document type in Dreamweaver. Choosing one for your web application depends on several factors, including your level of comfort with various scripting languages and the application server you plan to use.

Related topics

What is a web application?

Choosing a server technology


Setting the Site Definition Wizard Editing Files options

The purpose of this dialog box is to select your development environment.

Procedure
  1. Select the method you will use to work on files during development.
  2. Enter a location to store your files or click the folder icon to browse to the folder.

    3. This is your working directory for your Dreamweaver site—it is the place where you store your “in progress” files for a Dreamweaver site. In the Dreamweaver Site panel, this folder is referred to as your local site.

  3. If you select a method that uses FTP or RDS, you can choose to automatically upload files to the server every time you save.


Setting the Site Definition Wizard Testing Files options

The purpose of this dialog box is to select an access method for Dreamweaver to access your testing server.

Dreamweaver works with a testing server to generate and display dynamic content while you work. The testing server can be your local computer, a development server, a staging server, or a production server. As long as the server can process the kind of dynamic pages you plan to develop, the choice doesn’t matter.

When you set up your testing server, Dreamweaver also sets up a remote server folder for you. Depending on your environment, this folder is where you store files for testing, collaboration, production, deployment, or a number of other scenarios. Typically, your remote folder is on the machine where your web server is running.

In the Dreamweaver Site panel, the remote folder is referred to as your remote site. The remote folder enables you to transfer files between your local disk and web server; this makes it easy for you to manage files in your Dreamweaver sites.

Procedure:

Select an access method from the pop-up menu:

  • Local/Network if you are accessing a network folder or if you are running your testing server on your local machine.
  • FTP if you connect to your testing server using FTP.
  • RDS (Remote Development Services) if you connect to your web server using RDS.

    • For this access method, your remote folder must be on a computer running ColdFusion.

Related topics

Setting local/network access options for testing

Setting FTP access options for testing

Setting RDS access options for testing


Setting local/network access options for testing

The purpose of this dialog box is to select a folder on your local machine or network to store files for testing.

Procedure

Enter the path to the local or network folder where you store your files for testing or click the folder icon to browse to the folder.


Setting FTP access options for testing

The purpose of this dialog box is to complete information about your FTP access to the testing server where you store files for testing.

Procedure
  1. Enter the host name of the FTP host to which you upload files for testing.

    2. Your FTP host is the full Internet name of a computer system, such as ftp.mindspring.com. Enter the full host name without any additional text. In particular, don’t add a protocol name in front of the host name.

    Note: If you do not know your FTP host, contact your ISP.

  2. Enter the path to the folder where you store files for testing or click the folder icon to browse to the folder.
  3. Enter the login name and password that you use to connect to the FTP server.
  4. Click Test Connection to test your login and password.

Related topic

Choosing the host directory for FTP access


Setting RDS access options for testing

The purpose of this dialog box is to complete information about your RDS access to the testing server where you store files.

Procedure

Click the Settings button to enter access information.

Related topic

Setting up RDS access


Setting the Site Definition Wizard Testing Files options

The purpose of this dialog box is to specify a URL prefix so Dreamweaver can use your testing server to display data and connect to databases while you work. A URL prefix comprises the domain name and any of your website’s home directory’s subdirectories or virtual directories.

Procedure
  1. Enter the URL that users type in their browsers to open your web application, but do not include any filename.

    2. Suppose your application’s URL is http://www.macromedia.com/mycoolapp/start.jsp. In this case, you would enter the following URL prefix: http://www.macromedia.com/mycoolapp/.

    If Dreamweaver runs on the same computer as your web server, you can use the term localhost as a stand-in for your domain name. For example, suppose your application’s URL is http://buttercup_pc/mycoolapp/start.jsp. Then, you can enter the following URL prefix: http://localhost/mycoolapp/.

  2. Click Test URL to ensure that your URL works.

Related topic

About the URL prefix


Setting the Site Definition Wizard Sharing Files options

The purpose of this dialog box is to decide whether to set up a remote server folder.

Depending on your environment, this folder is where you store files for testing, collaboration, production, deployment, or a number of other scenarios. Typically, your remote folder is on the machine where your web server is running.

In the Dreamweaver Site panel, this folder is referred to as your remote site. The remote folder enables you to transfer files between your local disk and web server; this makes it easy for you to share and manage files in your Dreamweaver sites.

Procedure

Select Yes to set up a remote folder, or No to skip the remote folder setup.


Setting the Site Definition Wizard Sharing Files options

The purpose of this dialog box is to select an access method for Dreamweaver to access your remote folder.

Procedure

Select an access method from the pop-up menu:

  • Local/Network if you are accessing a network folder or if you are running your testing server on your local machine.
  • FTP if you connect to your testing server using FTP.
  • RDS (Remote Development Services) if you connect to your web server using RDS.

    • For this access method, your remote folder must be on a computer running ColdFusion.

  • SourceSafe Database if you connect to your web server using a SourceSafe Database.

    • SourceSafe Database support is only available for Windows. To use SourceSafe with Windows, you must have Microsoft Visual SourceSafe Client version 6 installed.

  • WebDAV (Web-based Distributed Authoring and Versioning) if you connect to your web server using the WebDAV protocol.

    • For this access method, you must have a server that supports this protocol, such as Microsoft Internet Information Server (IIS) 5.0 or Apache web server.

Related Topics

Setting local/network options for remote access

Setting FTP options for remote access

Setting up RDS access

Setting up SourceSafe database access

Setting up WebDAV access


Setting local/network options for remote access

The purpose of this dialog box is to select a folder on your local machine or network to store files.

Procedure

Enter the path to the local or network folder where you store your file or click the folder icon to browse to the folder.


Setting FTP options for remote access

The purpose of this dialog box is to complete information about your FTP access to the remote server where you store files.

Procedure
  1. Enter the host name of the FTP host to which you upload files.

    2. Your FTP host is the full Internet name of a computer system, such as ftp.mindspring.com. Enter the full host name without any additional text. In particular, don’t add a protocol name in front of the host name.

    Note: If you do not know your FTP host, contact your ISP.

  2. Enter the path to the folder where you store files or click the folder icon to browse to the folder.
  3. Enter the login name and password that you use to connect to the FTP server.
  4. Click Test Connection to test your login and password.

Related topic

Choosing the host directory for FTP access


Setting the Site Definition Wizard Sharing Files options

The purpose of this dialog box is to set up the Dreamweaver file Check In/Check Out system, if you’re working in a collaborative environment (or working alone, but on multiple machines).

Checking out a file makes the file unavailable on the server so that other team members cannot edit the file. Checking in a file makes the file available to others to check out and edit.

Procedure
  1. Select Yes to enable file check in/check out if you are working in a team environment (or working alone but from several different machines), or select No to disable file check in/check out.

    2. This option is useful to let others know that you checked out a file for editing, or to alert yourself that you may have left a more recent version of a file on another machine.

  2. Select Yes if you want to automatically check out files when you open them from the Site panel, or select No if you do not want to automatically check out files when you open them.

    3. Note: Using File > Open to open a file doesn’t check the file out even when this option is selected.

  3. Enter your name.

    4. Your name appears in the Site panel alongside any files that you checked out; this enables team members to communicate when they are sharing files.

    If you work alone from several different machines, use a different check-out name on each machine (for example, AmyR-HomeMac and AmyR-OfficePC) so you’ll know where the latest version of the file is if you forget to check it in.

  4. Enter your e-mail address.

    5. When you enter an e-mail address, and then check out a file, your name appears in the Site panel next to that file as a link (blue and underlined). If a team member clicks the link, their default e-mail program opens a new message with your e-mail address and a subject that corresponds to the file and site name.

Related topic

Using Check In/Check Out


Site Definition Wizard Summary options

This page displays the settings you selected for your site.

Procedure

Do any of the following:

  • Click the Back button to return to a previous page to change a setting.
  • Click the Done button if you are satisfied with the settings and want Dreamweaver to create the site.

    • When you click Done, Dreamweaver creates the site and displays it in the Site panel.

  • Click the Cancel button if you do not want Dreamweaver to create the site.


Setting Local Info category options

The purpose of this dialog box is to set up a local folder for a Dreamweaver site (also known as a local site).

Procedure
  1. In the Site Name text box, enter a name for the Dreamweaver site.

    2. The site name appears in the Site panel and on the Site > Open Site submenu. Use any name you like; it’s only for your reference and does not appear in the browser.

  2. In the Local Root Folder text box, enter the name of the folder on your local disk where you store site files, templates, and library items or click the folder icon to browse to the folder.

    3. When Dreamweaver resolves root-relative links, it does so relative to this folder (see Site root-relative paths). If the local root folder does not yet exist, create it from within the file-browsing dialog box.

  3. In the Refresh Local File List automatically option, indicate whether Dreamweaver should automatically refresh the local file list every time you copy files into your local site.

    4. Deselecting this option improves the speed of Dreamweaver when copying such files, but means that the Local view of the Site panel does not automatically refresh.

    To manually refresh the Site panel, click the Site panel’s Refresh button. To manually refresh the Local view only, in the Site panel choose View > Refresh (Windows) or Site > Site Files View > Refresh [check this](Macintosh).

  4. In the Default Images Folder text box, enter the path to your default images folder for this site, or click the folder icon to browse to the folder.

    5. This folder is where Dreamweaver places images that you add to your site. For example, when you drag an image from your desktop into an active document, Dreamweaver adds that image to the current site in the default images folder.

  5. In the HTTP Address text box, enter the URL that your completed website will use.

    6. This enables Dreamweaver to verify links within the site that use absolute URLs (see Checking links in a page or site).

  6. For the Enable Cache option, indicate whether to create a local cache to improve the speed of link and site management tasks.

    7. If you do not select this option, Dreamweaver asks you if you want to create a cache again before it creates the site. It is a good idea to select this option because the Assets panel (in the Files panel group) only works if a cache is created. For more information, see Using the Assets panel.

Related topics

Setting up a Dreamweaver site

Setting up a local folder


Setting Remote Info category options

The purpose of this dialog box is to select an access method for Dreamweaver to access the web server where your remote folder (also known as a remote site) is located.

Procedure
  1. Select an access method from the pop-up menu. The dialog box changes depending on your selection. Choose one of the following:
    • None if you do not plan to upload your site to a server.
    • Local/Network if you are accessing a network folder or if you are running a web server on your local machine.
    • FTP if you connect to your web server using FTP.
    • RDS (Remote Development Services) if you connect to your web server using RDS.

      • For this access method, your remote folder must be on a computer running ColdFusion.

    • SourceSafe Database if you connect to your web server using a SourceSafe Database.

      • SourceSafe Database support is only available for Windows. To use SourceSafe with Windows, you must have Microsoft Visual SourceSafe Client version 6 installed.

    • WebDAV (Web-based Distributed Authoring and Versioning) if you connect to your web server using the WebDAV protocol.

      • For this access method, you must have a server that supports this protocol, such as Microsoft Internet Information Server (IIS) 5.0 and Apache web server.

  2. For Local/Network and FTP access, complete the dialog box.

    3. For more information, see the appropriate section:

    Setting Remote Info options for Local/Network access

    Setting Remote Info options for FTP access

  3. For RDS, SourceSafe Database, and WebDAV access, select Enable File Check In and Check Out and Automatically Upload Files to Server on Save to enable those options. Then click the Settings button to complete access information.

    4. For more information, see the appropriate section:

    Using Check In/Check Out

    Setting up RDS access

    Setting up SourceSafe database access

    Setting up WebDAV access

  4. Click OK.

Related topics

Setting up a remote folder

Setting Remote Info options for FTP access

Setting Remote Info options for Local/Network access

Setting up RDS access

Setting up SourceSafe database access

Setting up WebDAV access


Setting Remote Info options for Local/Network access

The purpose of this dialog box is to complete information about your local/network access.

Procedure
  1. Click the folder icon beside the Remote Folder text box to browse to and select the folder where you store your site files.
  2. Select the Refresh Remote File List Automatically checkbox if you want the Remote pane of the Site panel to update automatically when you add and delete files.

    3. For increased speed when copying files to the remote site, do not select this option.

    Note: To manually refresh the Site panel at any time, click the Site panel’s Refresh button. To manually refresh the Remote pane only, choose View > Refresh Remote in the Site panel (Windows) or Site > Site Files View > Refresh Remote (Macintosh).

  3. Select the Automatically Upload Files to Server on Save checkbox if you want Dreamweaver to upload your file to your remote site when you save the file.
  4. Select the Enable File Check In and Check Out checkbox if you want to activate the Check In/Out system.

    5. For more information, see Using Check In/Check Out.

  5. Click OK.

Related topics

Setting up a remote folder

Setting Remote Info category options


Setting Remote Info options for FTP access

The purpose of this dialog box is to complete information about your FTP access.

Procedure
  1. Enter the host name of the FTP host to which you upload files for your website.

    2. Your FTP host is the full Internet name of a computer system, such as ftp.mindspring.com. Enter the full host name without any additional text. In particular, don’t add a protocol name in front of the host name.

    Note: If you do not know your FTP host, contact your ISP.

  2. Enter the host directory at the remote site where you store documents that are visible to the public.
  3. Enter the login name and password that you use to connect to the FTP server.
  4. Click Test to test your login and password.
  5. Dreamweaver saves your password by default. Deselect the Save checkbox if you prefer that Dreamweaver prompt you for a password each time you connect to the remote server.
  6. Select the Use Passive FTP checkbox if your firewall configuration requires use of passive FTP.

    7. Passive FTP enables your local software set up the FTP connection rather than requesting the remote server to set it up. If you’re not sure whether you use passive FTP, check with your system administrator.

  7. Select the Use Firewall checkbox if you connect to the remote server from behind a firewall.
  8. Click Firewall Settings to edit your firewall host or port.

    9. For more information, see Setting Site preferences.

  9. (Windows only) Select the Use SSH encrypted secure login check box to use SSH for secure FTP authentication.

    10. Note: To use SSH (Secure Shell) with Macintosh, you must install the SSH client from the Dreamweaver Support Center website.

  10. Select the Automatically Upload Files to Server on Save checkbox if you want Dreamweaver to upload your file to your remote site when you save the file.
  11. Select the Enable File Check In and Check Out checkbox if you want to activate the Check In/Out system.

    12. For more information, see Using Check In/Check Out.

  12. Click OK.

Related topics

Setting up a remote folder

Choosing the host directory for FTP access

Setting Remote Info category options


Setting up RDS access

The purpose of this dialog box is to set up a connection to your remote server using RDS.

Procedure
  1. Enter the name of the host computer where your web server is installed.

    2. The host name is probably an IP address or a URL. If you are not sure, ask your administrator.

  2. Enter the port number that you connect to.
  3. Enter your root remote folder as the host directory. For example, c:\inetpub\wwwroot\myHostDir\.
  4. Enter your RDS username and password.

    5. Note: These options might not appear if you set your username and password in the ColdFusion Administrator security settings.

  5. Select the Save checkbox if you want Dreamweaver to remember your settings.

Related topics

Setting up a remote folder

Setting Remote Info category options


Setting up SourceSafe database access

The purpose of this dialog box is to set up a connection to your SourceSafe Database.

Note: SourceSafe Database support is only available for Windows.

Procedure
  1. In the Database Path text box, click Browse to browse for the VSS database you want, or enter the full file path.

    2. The file you choose becomes the srcsafe.ini file used to initialize SourceSafe.

  2. In the Project text box, enter the project within the VSS database you want to use as the remote site’s root directory.
  3. In the Username and Password text boxes, enter your login user name and password for the selected database.

    4. If you don’t know your username and password, check with your system administrator.

  4. Click OK to return to the Site Definition dialog box.

Related topics

Setting up a remote folder

Setting Remote Info category options


Setting up WebDAV access

The purpose of this dialog box is to set up a connection to your remote server using the WebDAV protocol.

Procedure
  1. In the URL text box, enter the complete URL to the directory on the WebDAV server that you want to connect to.

    2. This URL includes the protocol, port, and directory (if not the root directory). For example, http://apache1/WebDAV/mysite.

  2. Enter your user name and password in the appropriate text boxes.

    3. This information is for server authentication and is not related to Dreamweaver. If you are not sure of your username and password, check with your system administrator or webmaster.

  3. In the Email text box, enter your e-mail address.

    4. This is required. It is used to identify ownership on the WebDAV server and appears in the Site panel for contact purposes.

  4. Click the Save Password checkbox if you want Dreamweaver to remember your password each time you start a new session.
  5. Click OK to return to the Site Definition dialog box.

Related topics

Setting up a remote folder

Setting Remote Info category options


Using the Edit Sites dialog box options

The purpose of this dialog box is to edit sites. From this dialog box you can create a new site, edit a site, duplicate a site, remove a site, and import or export a site.

Procedure
  1. Select a site from the window.
  2. Click a button to choose one of the options:
    • New enables you to create a new site.
    • Edit enables you to edit an existing site.
    • Duplicate creates a copy of the site you selected.

      • The copy appears in the site list window.

    • Remove deletes the selected site.

      • Dreamweaver alerts you that you cannot undo this action.

    • Export enables you to save the exported site as an XML file.
    • Import enables you to select an XML file for a site to import.
  3. Click Done to close the dialog box.

Related topics

Setting up a Dreamweaver site

Editing a Dreamweaver site

Editing an existing remote website in Dreamweaver

Importing and exporting sites

Previous


Managing Your Site

Macromedia Dreamweaver MX helps you organize the files in your local and remote folders (also called “sites”) using the Site panel. It lets you duplicate the structure of your local folder on a remote server, or duplicate a remote folder’s structure on your local system. The relative links you create in your local site continue to work after you transfer files to the remote site, because the structure of the two sites is identical.

You create a local site in Dreamweaver by using the New Site command to create a local root folder for the site or by making an existing folder the local root folder (see Setting up a local folder). You define a remote site when creating a new site, or add that information later using the Edit Sites command (see Setting up a remote folder).

Dreamweaver includes a number of features for managing a site and transferring files to and from a remote server. When you transfer files between local and remote sites, Dreamweaver maintains parallel file and folder structures between the sites. When transferring files between sites, Dreamweaver automatically creates necessary folders when they do not yet exist in a site. You can also synchronize the files between your local and remote sites; Dreamweaver copies files in both directions as necessary, and removes unwanted files when appropriate.

Dreamweaver contains features to make collaborative work on a website easier. You can check files in and out of a remote server so that other members of a web team can see who is working on a file. You can add Design Notes to your files to share information with team members about a file’s status, priority, and so on. You can also use the Workflow Reports feature to run reports on your site to display information on the check-in/check-out status, and to search for Design Notes attached to files.

Once you’ve published your site, you or someone on your team can continue to maintain it. Before and after publishing, you’ll also want to troubleshoot your site on an ongoing basis (for more information, see Testing a Site).

This chapter contains the following sections:

  • About the Site panel
  • About the site map
  • Importing and exporting sites
  • Removing a site from your list of sites
  • Using Check In/Check Out
  • Getting and putting files
  • Synchronizing the files on your local and remote sites
  • Cloaking folders and files in your site
  • Using Design Notes
  • Using reports to improve workflow
  • About the Sitespring panel in Dreamweaver
  • Using the Sitespring panel
Next


About the Site panel

The Site panel enables you to view a site, including all local, remote, and testing server files associated with a selected site. The local site appears by default; change the Site panel layout to view the remote site or testing server (see Changing Site panel layout). Expand the site panel to get a split view (see Using the Site panel).

Note: On the Macintosh, the site panel is always in split view; it does not collapse.

This is a picture of the feature being described.

Use the Site panel for standard file maintenance operations, such as:

  • Creating new HTML documents
  • Viewing, opening, and moving files
  • Creating folders
  • Deleting items
  • Transferring files among local sites, remote sites, and testing servers
  • Designing your site navigation with the site map (see Setting up a remote folder and Using the site map)

The Site panel contains an integrated file browser. This file browser enables you to browse your local disk and network, in addition to the current site (see Using the integrated file browser).


Using the Site panel

The Site panel is integrated into the Dreamweaver integrated workspace by default Exploring the Workspace. You can move the panel or open and close it as necessary (see Using windows and panels in Dreamweaver). You can also expand the panel to get a split view of a site. In the split view, choose to view the local site and the remote site, testing server, or site map (Changing Site panel layout).

To open or close the Site panel:

Choose Window > Site.

To expand or collapse the Site panel:

(Windows only) Click the Expand/Collapse button on the Site panel toolbar.

Note: If you click the Expand/Collapse button to expand the panel while it is docked, the panel maximizes so that you cannot work in the Document window. To return to the Document window, click the Expand/Collapse button again to collapse the panel. If you click the Expand/Collapse button to expand the panel while it is floating, the panel remains a floating panel and you can still work in the Document window. Before you can dock the panel again, you must first collapse the panel.

Use the following buttons and options on the Site panel toolbar to determine what the Site panel displays and to transfer files:

This is a picture of the feature being described.

Note: The Site Files, Testing Server, and Site Map buttons appear only in the expanded Site panel.

Site Files view displays the file structure of the remote and local sites in the panes of the Site panel. (A preference setting determines which site appears in the left pane and which appears in the right pane; see Setting Site preferences.) Site Files view is the default view for the Site panel.

Testing Server view displays the directory structure of the testing server and the local site.

Site Map view displays a graphical map of your site based on how the documents are linked to one another. Hold this button down to choose Map Only or Map and Files from the pop-up menu.

The Site pop-up menu lists sites you’ve defined. To switch sites, choose a different site from the list. To add a site or edit the information for an existing site, choose Edit Sites from the bottom of the menu (see Setting up a remote folder).

Connect/Disconnect (FTP, RDS, WebDAV protocol, and SourceSafe) connects to or disconnects from the remote site. By default, Dreamweaver disconnects from the remote site if it has been idle for more than 30 minutes (FTP only).

To change the time limit, choose Edit > Preferences or Dreamweaver > Preferences (Mac OS X), then select Site from the category list on the left.

Refresh refreshes the local and remote directory lists. Use this button to manually refresh the directory lists if you deselected either Refresh Local File List Automatically or Refresh Remote File List Automatically in the Site Definition dialog box (see Setting up a remote folder).

Get File(s) copies the selected files from the remote site or testing server to your local site (overwriting the existing local copy of the file, if any). If Enable File Check In and Check Out is turned on, the local copies are read-only; the files remain available on the remote site for other team members to check out. If Enable File Check In and Check Out is turned off, getting a file transfers a copy that has both read and write privileges.

The files Dreamweaver copies are the files you select in the active pane of the Site panel. If the Remote or Testing Server panes are active, the selected remote or testing server files are copied to the local site; if the Local pane is active, Dreamweaver copies the remote or testing server version of the selected local files to the local site. For more information, see Getting files from a remote or testing server.

Note: You can get remote and testing server files, but check-in and check-out functionality applies to remote files only.

Put File(s) copies the selected files from the local site to the remote site or testing server.

The files Dreamweaver copies are the files you select in the active pane of the Site panel. If the Local pane is active, the selected local files are copied to the remote site or testing server; if the Remote or Testing Server panes are active, Dreamweaver copies the local versions of the selected remote or testing server files to the remote site. For more information, see Putting files on a remote or testing server.

Note: You can put files on the remote and testing servers, but check-in and check-out functionality applies to remote files only.

If you are putting a file that doesn’t already exist on the remote site. and Enable File Check In and Out is on, Dreamweaver adds the file to the remote site as “checked out.” Click the Check In Files button if you want to add a file without the checked out status.

Check Out File(s) transfers a copy of the file from the remote server to your local site (overwriting the existing local copy of the file, if any) and marks the file as checked out on the server. This option is not available if Enable File Check In and Check Out in the Site Definitions dialog box is turned off for the current site. For more information, see Checking files in to and out of a remote site.

Check In File(s) transfers a copy of the local file to the remote server and makes the file available for editing by others. The local file becomes read-only. This option is not available if the Enable File Check In and Check Out option in the Site Definitions dialog box is turned off for the current site. For more information, see Checking files in to and out of a remote site.

The Expand/Collapse button (Windows only) expands or collapses the Site panel to display one or two panes.


Setting Site preferences

You can control Site panel file-transfer features in the Preferences dialog box.

To edit Site panel preferences:
  1. Choose Edit > Preferences or Dreamweaver > Preferences (Mac OS X).

    2. The Preferences dialog box appears.

  2. Select Site from the category list on the left.

    3. The Site preference options appear.
    This is a picture of the feature being described.

  3. Change options as necessary.

    4. For more information, see Setting Site panel preference options

  4. Click OK.

You can define whether the types of files that you transfer are transferred as ASCII (text) or binary, by customizing the FTPExtensionMap.txt file in the Dreamweaver/Configuration folder (on Macintosh, FTPExtensionMapMac.txt). For more information, see Welcome to Dreamweaver.


Changing file view columns

You can customize the columns displayed in the Site panel’s Local and Remote Site lists. You can do any of the following:

  • Reorder columns
  • Add new columns (for a maximum of 10 columns)
  • Delete columns
  • Hide columns
  • Designate columns to be shared with all users connected to a site

The default columns are Name, Notes, Size, Type, Modified, and Checked Out By. To sort by any column, click the column heading in the Site panel. Clicking a column more than once reverses the order (ascending or descending) by which Dreamweaver sorts the column.

Note: You cannot delete a default column, rename a default column, or associate a Design Note with a default column. You can change the ordering and alignment of default columns, as well as hide them, with the exception of the Name column, which you cannot hide.

To add, delete, or change columns:
  1. In the Site panel, do one of the following to access File Views Columns options:
    • Choose View > File View Columns (Windows) or Site > Site Files View > File View Columns (Macintosh).
    • Choose Site > Edit Sites, select a site, and click Edit. Then, select File View Columns from the category list on the left in the Site Definition dialog box.

      • The Site Definition dialog box displays the File View Columns options.
      This is a picture of the feature being described.

  2. Complete the dialog box.

    3. For more information, see Setting File View Columns category options.

  3. Click OK.

Related topic

Changing Site panel layout


Opening and viewing sites in the Site panel

When the Site panel is collapsed it displays the contents of the local site, the remote site, or the testing server as a list of files. When the Site panel is expanded, it displays the local site and either the remote site or testing server in a split view. When expanded, the Site panel can also display a visual site map of the local site.

Note: Before you can view a remote site or a testing server, you must set up a remote site or testing server (see Setting up a remote folder or Specifying where dynamic pages can be processed). Before you can view a site map, you must set up a home page (see Using the site map).

To open an existing Dreamweaver site:

In the Site panel, select a site from the Site pop-up menu (this is where the current site name appears).

Note: To define a Dreamweaver site, see Setting up a Dreamweaver site.

To change the current site view when the Site panel is collapsed (Windows only):

In the Site panel, with the panel collapsed, select Local View, Remote View, or Testing Server from the pop-up menu where the current view appears.

Note: Local View appears in the pop-up menu by default.

To change site views when the Site panel is expanded:

In the Site panel, with the panel expanded, click the Site Files button (for the remote site), Testing Server button, or Site Map button on the Site panel toolbar.

This is a picture of the feature being described.

Note: If you use the Site Map button, you can choose to view the site map with site files or to view the site map only. For more information, see Using the site map.

Related topic

Changing Site panel layout


Changing Site panel layout

When the Site panel is in split view, the local site appears on the right side of the Site panel, by default. The remote site, testing server, or site map appears on the left side by default. You can switch these displays.

To change the Site panel layout:
  1. (Windows only) In the Site panel, click the Expand/Collapse button to expand the panel, if it isn’t already expanded.
  2. Choose Edit > Preferences or Dreamweaver > Preferences (Mac OS X).

    3. The Preferences dialog box appears.

  3. Select Site from the category list on the left.

    4. The Site preference options appear.
    This is a picture of the feature being described.

  4. Select either Local Files or Remote Files from the Always Show pop-up menu.
  5. Select where you want your Always Show files to appear, either on the right or on the left in the expanded Site panel.
  6. Click OK.
To change the size of the view area:

In the expanded Site panel, do one of the following:

  • Drag the bar that separates the two views to increase or decrease the view area of the right or left pane.
  • Use the scroll bars at the bottom of the Site panel to scroll through the views’ contents.
  • In the site map, drag the arrow above a file to change the space between files.

Related topic

Changing file view columns


Working with files in the Site panel

Use the Site panel to view sites as lists of files, to open files, to rename files, to add new folders or files to a site, or to refresh the view of a site after changes have been made.

You can also use the Site panel to determine which files (on either the local or remote site) have been updated since the last time they were transferred. For information on synchronizing the local site with the remote site, see Synchronizing the files on your local and remote sites.

To open a file from the Site panel, do one of the following:
  • Double-click the file’s icon.
  • Right-click (Windows) or Control-click (Macintosh) the file’s icon, and then choose Open.
  • Choose File > Open (Windows) or Site > Open (Macintosh).
To add a new file or folder to a site:
  1. Select a file or folder in the Site panel.

    2. Dreamweaver will create the new file or folder inside the currently selected folder, or in the same folder as the currently selected file.

  2. For a new folder, choose File > New Folder in the Site panel (Windows) or Site > Site Files View > New Folder (Macintosh).

    3. For a new file, choose File > New File in the Site panel (Windows) or Site > Site Files View > New File (Macintosh).

    Note: Alternatively, choose New File or New Folder from the Site panel’s context menu.

  3. Enter a name for the new file or folder.
  4. Press Enter (Windows) or Return (Macintosh).
To rename a file or folder in a site:
  1. In the Site panel, select the file or folder you want to rename.
  2. Do one of the following to activate the name of the file or folder:
    • Choose File > Rename (Windows) or Site > Rename (Macintosh).
    • Click in the filename, pause, then click again.
    • Right-click (Windows) or Control-click (Macintosh) the file’s icon, and choose Rename.
  3. Type in the new name.
  4. Press Enter (Windows) or Return (Macintosh).
To refresh the Site panel, do one of the following:
  • Choose View > Refresh (Windows) or Site > Site Files View > Refresh (Macintosh).
  • Click the Refresh button in the Site panel (this option refreshes both panes).

Note: Dreamweaver automatically refreshes the Site panel when you make changes in another application and then return to Dreamweaver.

To locate and select checked out files:

In the Site panel, choose Edit > Select Checked Out Files (Windows) or Site > Site Files View > Select Checked Out Files (Macintosh).

To locate and select files that are newer in the local site than in the remote site:

In the Site panel, choose Edit > Select Newer Local (Windows) or Site > Site Files View > Select Newer Local (Macintosh).

To locate and select files that are newer in the remote site than in the local site:

In the Site panel, choose Edit > Select Newer Remote (Windows) or Site > Site Files View > Select Newer Remote (Macintosh).


Finding files in the Site panel

You can search for a file in your local and remote sites from the Site panel. For more information on searching for and replacing text within files, see Searching and replacing text.

To find a file in your local site:
  1. Open the file from the remote site or select the file in the Remote view of the Site panel.
  2. Do one of the following:
    • If you opened the file in the Document window, choose Site > Locate in Site.
    • If you selected the file in the Site panel, right-click (Windows) or Control-click (Macintosh), and then select Locate in Local Site.

      • Dreamweaver highlights the file in the Local view of the Site panel.

To find a file in your remote site:
  1. Open the file from the local site or select the file in the Local view of the Site panel.
  2. Do one of the following:
    • If you opened the file in the Document window, choose Site > Locate in Site.
    • If you selected the file in the Site panel, right-click (Windows) or Control-click (Macintosh), and then select Locate in Remote Site.

      • Dreamweaver highlights the file in the Remote Site view of the Site panel.

Note: If you select Site > Locate in Site while the Document window is active, and if the current file is not part of the currently open site, Dreamweaver attempts to determine which of your locally defined sites the current file belongs to; if the current file belongs to only one local site, Dreamweaver opens that site and then locates the file in it.


Using the integrated file browser

The integrated file browser in the Site panel gives you access to your desktop and local network, including other defined sites and files not associated with a site. Use the integrated file browser to perform the following operations on files outside of the current site:

  • Drag files
  • Delete files
  • Rename files
  • Browse the network
  • Open files in Dreamweaver or another applications
  • Site operations, such as file transfer

Note: You perform these operations the same way you perform operations on files in a defined site (see About the Site panel. The best way to manage your files is to create a Dreamweaver site (see Setting up a Dreamweaver site).

When you drag a file from one site to another or to a folder that is not associated with a site, Dreamweaver copies the file you drag to the location where you drop it. If you drag a file within the same site, Dreamweaver moves the file you drag from its location to the location where you drop it.

When you drag a file that is not associated with a site, to a site, Dreamweaver copies the file to the location where you drop the file. If you drag a file that is not associated with a site to another folder that is not associated with a site, Dreamweaver moves the file to the location where you drop the files.

Note: To move a file that Dreamweaver copies by default, hold down the Shift key (Windows) or the Command key (Macintosh) while you drag. To copy a file that Dreamweaver moves by default, hold the Control key (Windows) or the Option key (Macintosh) while you drag.

In the file browser, site folders appear in a different color than non-site folders so that you can distinguish between the two. If you try to perform a site operation on a folder or file that is not associated with a site, Dreamweaver asks you to define a Dreamweaver site before performing the operation.

To use the integrated file browser:

In the Site panel file tree, click the plus sign (+) beside Desktop (Windows) or the expander arrow beside Computer (Macintosh).


About the site map

Use the site map to view a local folder for a Dreamweaver site as a visual map of linked icons, to add new files to a Dreamweaver site, or to add, modify, or remove links. The site map is ideal for laying out a site structure. You can quickly set up the entire structure of the site and then create a graphic image of the site map.

Note: The site map applies to local sites only.To create a map of a remote site, copy the contents of the remote site into a folder on your local disk, and then use the Edit Sites command to define the site as a local site. For more information, see Setting up a local folder.


Using the site map

You must define a “home page” for your site before you can display the site map. The site’s home page can be any page in your site; it does not have to be the main page for your site. In this case, the home page is simply the starting point of the map.

To define a home page for your site:
  1. Choose Site > Edit Sites.

    2. The Edit Sites dialog box appears.

  2. Choose Edit to open an existing site.

    3. The Site Definition dialog box appears.

  3. Select Site Map Layout from the category list on the left.

    4. The Site Definition dialog box displays the Site Map Layout options.
    This is a picture of the feature being described.

  4. Click the folder icon to browse for a home page for the site, or type a file path in the Home Page text box.
  5. Click OK.
To view a site map:
  1. (Windows only) In the Site panel, click the Expand/Collapse button to expand the Site panel, if it isn’t already expanded.
  2. Select View > Site Map or click the Site Map button, and then select Map Only or Site and Map.

    3. Select Map Only, to view the site map without the local file structure, or Site and Map, to view the site map with the local file structure.

    Note: If you have not defined a home page, or if Dreamweaver can’t find an index.html or index.htm page in the current site to use as the home page, a dialog box appears prompting you to select a home page by clicking Edit Sites. Choose a site, click Edit, and then select Site Map Layout from the category list of the left of the Site Definition dialog box.

    The Site panel displays a site map for the current site or a site map for the current site, along with the local file structure.


Viewing the site map

The site map shows HTML files and other pages as icons. The site map displays links in the order in which they are encountered in the HTML source code, as follows:

  • Text displayed in red indicates a broken link.
  • Text displayed in blue and marked with a globe icon indicates a file on another site or a special link (such as an e-mail or script link).
  • A green check mark indicates a file checked out by you.
  • A red check mark indicates a file checked out by someone else.
  • A lock icon indicates a file that is read-only (Windows) or locked (Macintosh).

By default, the site map displays the site structure two levels deep, starting from the current home page. Click the plus (+) and minus (-) signs next to a page to show or hide pages linked below the second level.

This is a picture of the feature being described.

By default, the site map does not display hidden files and dependent files. Hidden files are HTML files marked as hidden. Dependent files are non-HTML page content such as images, templates, Macromedia Shockwave files, or Macromedia Flash files. For more information, see Showing and hiding site map files.


Modifying the site map layout

Use the Site Map Layout options to customize the appearance of your site map. You can specify the home page, the number of columns displayed, whether the icon labels display the filename or the page title, and whether to show hidden and dependent files.

To modify the site map layout:
  1. Do one of the following to open the Site Definition dialog box:
    • Choose Site > Edit Sites, and then click Edit. Select Site Map Layout in the Category list on the left.
    • In the Site panel, choose Site > Layout (Windows) or Site > Site Map View > Link to New File (Macintosh).

      • The Site Definition dialog box displays Site Map Layout options
      This is a picture of the feature being described.
      .

  2. Make changes as necessary.

    3. For more information, see Setting Site Map Layout category options.

  3. Click OK to close the Site Definition dialog box.
  4. Click Done to close the Edit Sites dialog box, if it is open.


Working with pages in the site map

When working in the site map, you can select pages, open a page for editing, add new pages to the site, create links between files, and change page titles.

To select multiple pages in the site map, do one of the following:
  • Shift-click to select a range of adjacent pages.
  • Starting from a blank part of the view, drag around a group of files to select them.
  • Control-click (Windows) or Command-click (Macintosh) to select nonadjacent pages.
To open a page in the site map for editing, do one of the following:
  • Double-click the file.
  • Select the file, and then choose File > Open (Windows) or Site > Open (Macintosh).
To add an existing file to the site, do one of the following:
  • Drag a file from the Windows Explorer or the Macintosh Finder to a file in the site map. The page is added to the site, and a link is created between it and the file you dragged it to.
  • Select Site > Link to Existing File (Windows) or Site > Site Map View > Link to Existing File (Macintosh), and then browse to the file.
To create a new file and add a link in the site map:
  1. Select an HTML file in the site map, then do one of the following:
    • Choose Site > Link to New File (Windows) or Site > Site Map View > Link to New File (Macintosh).
    • Choose Link to New File from the context menu.

      • The Link to New File dialog box appears.
      This is a picture of the feature being described.

  2. Enter a name, title, and text for the link.
  3. Click OK.

    4. Dreamweaver saves the file in the same folder as the selected file. If you add a new file to a hidden branch, the new file is also hidden (see Showing and hiding site map files).

To modify the title of a page in the site map:
  1. Make sure the Show Page Titles option is selected by choosing View > Show Page Titles (Windows) or Site > Site Map View > Show Page Titles (Macintosh) in the Site panel.
  2. Select a page, and then do one of the following:
    • Click the title. When the title becomes editable, enter a new title.
    • Choose File > Rename (Windows) or Site > Rename (Macintosh).
  3. Press Enter (Windows) or Return (Macintosh) after you type the new name.

Note: When you work in the Site panel, Dreamweaver automatically updates all links to files whose names have changed.

To change the home page in the site map, do one of the following:
  • In the Local view of the Site panel, select a file, and then right-click (Windows) or Control-click (Macintosh), and choose Set as Home Page.
  • In the Local view of the Site panel, click the file you want to make the new home page, and then choose Site > Set as Home Page (Windows) or Site > Site Map View > Set as Home Page (Macintosh).
  • Select a file in the Site map, and choose Site > New Home Page (Windows) or Site > Site Map View > New Home Page (Macintosh).
  • Choose Site > Edit Sites, and click Edit. Select Site Map Layout in the Site Definition dialog box category list. Browse to a new home page, and then click OK.
To update the site map display after making changes:
  1. Click anywhere in the site map to deselect any files.
  2. Choose View > Refresh (Windows) or Site > Site Map View > Refresh Local (Macintosh).


Showing and hiding site map files

You can modify the layout of the site map to show or hide hidden and dependent files. This is useful when you want to emphasize key topics or content and de-emphasize less important material.

To hide a file using the site map, you must mark the file as hidden. When you hide a file, its links are also hidden. When you display a file marked as hidden, the icon and its links are visible in the site map, but the names appear in italics.

Note: By default, dependent files are already hidden.

To mark files as hidden in the site map:
  1. In the site map, select one or more files.
  2. Choose View > Show/Hide Link (Windows) or Site > Site Map View > Show/Hide Link (Macintosh).
To show or hide files marked as hidden in the site map, do one of the following:
  • Choose View > Show Files Marked as Hidden (Windows) or Site > Site Map View > Show Files Marked as Hidden (Macintosh).
  • Choose View > Layout (Windows) or Site > Site Map View > Layout (Macintosh) to open the Site Definition dialog box, and then select the Display Files Marked as Hidden option.
To show dependent files in the site map, do one of the following:
  • Choose View > Show Dependent Files (Windows) or Site > Site Map View > Show Dependent Files (Macintosh).
  • Choose View > Layout (Windows) or Site > Site Map View > Layout (Macintosh) to open the Site Definition dialog box, and select the Display Dependent Files option.
To unmark files marked as hidden in the site map:
  1. In the site map, select one or more files.
  2. Choose View > Show Files Marked as Hidden (Windows) or Site > Site Map View > Show Files Marked as Hidden (Macintosh).
  3. Choose View > Show/Hide Link (Windows) or Site > Site Map View > Show/Hide Link (Macintosh).


Viewing the site from a branch

You can view the details of a specific section of a site by making a branch the focus of the site map.

To view a different branch in the site map:

Select the page you want to view, and then choose View > View as Root (Windows) or Site > Site Map View > View as Root (Macintosh).

The site map is redrawn in the window as if the specified page were at the root of the site. The Site Navigation text box above the site map displays the path from the home page to the specified page. Select any item in the path to view the site map from that level by clicking once.

To expand and contract branches in the site map:

Click a branch’s plus (+) or minus (–) sign.


Saving the site map

You can save the site map as an image, and then view the image in (or print it from) an image editor.

To create an image file of the current site map:
  1. From the site map, do one of the following:
    • In Windows, choose File > Save Site Map. In the Save Site Map dialog box, enter a name in the File Name text box. In the File Type pop-up menu, select .bmp or .png.
    • In Macintosh, select Site > Site Map View > Save Site Map > Save Site Map As PICT or Site > Site Map View > Save Site Map > Save Site Map As JPEG.
  2. Choose a location to save the file, and enter a name for the image.
  3. Click Save.


Importing and exporting sites

With Dreamweaver you can export a site as an XML file, and then import it back into Dreamweaver. This enables you to move sites between machines and product versions or to share with other users.

To export a site:
  1. Choose Site > Edit sites.

    2. The Edit Sites dialog box appears.

  2. Click the Export button.

    3. The Export Site panel appears.

  3. Browse to a location to save the site.
  4. Click Save.

    5. Dreamweaver saves the site as an XML file, with an STE file extension, in the specified location.

  5. Click Done to close the Edit Sites dialog box.
To import a site:
  1. Choose Site > Edit sites.

    2. The Edit Sites dialog box appears.

  2. Click the Import button.

    3. The Import Site panel appears.

  3. Browse to and select a site (saved as an XML file) to import.

    4. Note: You must export the site from Dreamweaver, which saves the site as an XML file, before you can import the file.

  4. Click open.

    5. Dreamweaver imports the site, and the site name appears in the Edit Sites dialog box.

  5. Click Done to close the Edit Sites dialog box.


Removing a site from your list of sites

If you no longer want to work with a site in Dreamweaver, you can remove the site from your list of sites. The files in the site are not removed.

Note: When you remove a site from the list, all setup information about the site is permanently lost.

To remove a site from your site list:
  1. Choose Site > Edit Sites.

    2. The Edit Sites dialog box appears.

  2. Select a site name.
  3. Click Remove.

    4. A dialog box appears asking you to confirm the removal.

  4. Click Yes to remove the site from your list, or click No to leave the site name.
  5. Click Done to close the Edit Sites dialog box.


Using Check In/Check Out

If you’re working in a collaborative environment, you can check files in and out from local and remote servers. If you’re the only person working on the remote server, you can use the Put and Get commands without checking files in or out (see Getting and putting files).

Checking out a file is the equivalent of declaring “I’m working on this file now—don’t touch it!” When a file is checked out, Dreamweaver displays the name of the person who checked out the file in the Site panel, along with a red check mark (if a team member checked out the file) or green check mark (if you checked out the file) next to the file’s icon.

Checking in a file makes the file available to other team members to check out and edit. When you check in a file after editing it, your local version becomes read-only and a lock symbol appears beside the file in the Site panel to prevent you from making changes to the file.

Dreamweaver does not make checked-out files read-only on the remote server. If you transfer files with an application other than Dreamweaver, you can overwrite checked-out files. However, in applications other than Dreamweaver, the .LCK file is visible next to the checked-out file in the file hierarchy to help prevent such accidents.

To enable or disable Check In/Check Out for some sites, see Setting up the Check In/Check Out system. For information about transferring files between local and remote sites without checking them in or out, see Getting files from a remote or testing server and Putting files on a remote or testing server.

Note: You can use Get and Put functionality with a testing server, but you cannot use the Check In/Check Out system with a testing server.


Setting up the Check In/Check Out system

Before you can use the Check In/Check Out system, you must associate your local site with a remote server (see Setting up a remote folder).

To set up the Check In/Check Out system:
  1. Choose Site > Edit Sites.

    2. The Edit Sites dialog box appears.

  2. Select a site, and then click Edit.

    3. The Site Definition dialog box appears.

  3. In the Category list at the left, click Remote Info.

    4. The Site Definition dialog box displays Remote Info options. The Check In/Out section appears at the bottom of the dialog box.
    This is a picture of the feature being described.

    Note: If you do not see Check In/Out options, you have not set up your remote server (see Setting up a remote folder).

  4. Complete the Check In/Out section.

    5. For more information, see Setting Check In/Out options.

  5. Click OK.


Checking files in to and out of a remote site

Use the Site panel or the Document window to check in and check out files on a remote server.

The Dreamweaver Check In/Check Out system uses the following symbols in the Site panel:

  • Green check mark indicates that you have the file checked out.
  • Red check mark indicates that another team member has the file checked.
  • Lock symbol indicates that the file is read-only (Windows) or locked (Macintosh).

If you check out a file and then decide not to edit it (or decide to discard the changes you made), you can undo a check out.

To check out files from a remote server from the Site panel:
  1. Choose a site from the Site pop-up menu.
  2. Select files to check out.

    3. Note: You can select files in the Local or Remote view.

  3. Do one of the following to check out the file(s):
    • Click the Check Out button on the Site panel toolbar.
    • Right-click (Windows) or Control-click (Macintosh), and then choose Check Out from the context menu.
  4. Click Yes at the prompt to download dependent files along with the selected files or click No to refrain from downloading dependent files.

    5. Note: It’s usually a good idea to download dependent files when checking out a new file, but if the latest versions of the dependent files are already on the local disk, there’s no need to download them again.

    A green check mark appears beside the file’s icon indicating that you have checked it out.

To check in files to a remote server from the Site panel:
  1. Choose a site from the Site pop-up menu.
  2. Select checked-out or new file(s).

    3. Note: You can select files in the Local or Remote view.

  3. Do one of the following to check in the file(s):
    • Click the Check In button on the Site panel toolbar.
    • Right-click (Windows) or Control-click (Macintosh), and then choose Check In from the context menu.
  4. Click Yes at the prompt to download dependent files along with the selected files or click No to refrain from downloading dependent files.

    5. Note: It’s usually a good idea to upload dependent files when checking in a new file, but if the latest versions of the dependent files are already on the remote server, there’s no need to upload them again.

    A lock symbol appears beside the file’s icon indicating that it’s now read-only.

To check in or check out an open file from the Document window, do one of the following:
  • Choose Site > Check In or Site > Check Out.
  • Click the File Management icon on the Document window’s toolbar, and then choose Check In or Check Out from the pop-up menu.

    • Note: If you select Site > Check In or Site > Check Out, and the current file is not part of the currently open site, Dreamweaver attempts to determine which locally defined site the current file belongs to. If the current file belongs to only one local site, Dreamweaver opens that site, and then performs the check in or check out operation.

If you check out the currently active file, the currently open version of the file is overwritten by the new checked-out version. If you check in the currently active file, the file may be automatically saved before it’s checked in, depending on the preference options you’ve set (see Setting Site preferences).

To undo a file check-out:
  1. Select the file.
  2. Do one of the following to undo the check-out:
    • Choose Site > Undo Check Out.
    • Right-click (Windows) or Control-click (Macintosh) the file in the Site panel, and then choose Undo Check Out from the context menu.

The local copy of the file becomes read-only, and any changes you’ve made to it are lost.


Getting and putting files

If you’re working in a collaborative environment, use the Check In/Check Out system to transfer files between local and remote sites (see Using Check In/Check Out). If you’re the only person working on the remote site, however, you can use the Get and Put commands to transfer files without checking them in or out.

Note: If you select Site > Get or Site > Put while the Document window is active, and if the current file is not part of the currently open site, Dreamweaver attempts to determine which of your locally defined sites the current file belongs to; if the current file belongs to only one local site, Dreamweaver opens that site, and then performs the Get or Put operation.


Getting files from a remote or testing server

The Get command copies files from the remote site or testing server to your local site, as follows:

  • If you’re using the Check In/Check Out system (that is, if the Enable File Check In and Check Out option is selected), getting a file results in a read-only local copy of the file; the file remains available on the remote site or testing server for other team members to check out (see Using Check In/Check Out).
  • If you’re not using the Check In/Check Out system (that is, if the Enable File Check In and Check Out option is not selected), getting a file transfers a copy that has both read and write privileges.

    • Note: If you’re working in a collaborative environment—that is, if others are working on the same files—you should not turn off Enable File Check In and Check Out. If other people are using the Check In/Check Out system with the site, you should use that system as well.

You can get files by selecting files in either the Local or Remote view of the Site panel. If the Remote view is active, then Dreamweaver copies the selected remote files to the local site; if the Local view is active, then Dreamweaver copies the remote versions of the selected local files to the local site.

To get only those files for which the remote version is more recent than the local version, use the Synchronize command (see Synchronizing the files on your local and remote sites).

Dreamweaver records all FTP file transfer activity. If an error occurs when you are transferring a file using FTP, the Site FTP log can help you determine the problem.

To display the FTP log:

Select View > Site FTP Log.

To get files from a remote or testing server:
  1. In the Site panel, choose a site from the Site pop-up menu.
  2. If you’re using FTP to transfer files, click the Connect button to open a connection to the remote server.

    3. If a connection is already open (indicated by the Disconnect button), skip this step.

    If the remote files are visible in the Remote pane from a previous connection, clicking Connect isn’t required; when you click Get, Dreamweaver connects automatically.

  3. Select the desired files to download.

    4. Usually you select these files in the Remote or Testing Server view, but you can select the corresponding files in the Local view if you prefer.

  4. Do one of the following to get the file:
    • Click the Get button on the Site panel toolbar.
    • Choose Get from the context menu.
    • Choose Site > Get.

      • Note: If the file is currently open in a Document window, you can also choose Site > Get from the Document window.

      A dialog box appears, asking if you want to get dependent files.

  5. To download dependent files, click Yes; to skip them, click No.

    6. If you already have local copies of the dependent files, click No.

To stop the file transfer at any time, click the Cancel button in the status dialog box. The transfer may not stop immediately.


Putting files on a remote or testing server

The Put command copies files from the local site to the remote site, generally without changing the file’s checked out status. There are two common situations in which you might use Put instead of Check In:

  • Use Put when you’re not in a collaborative environment and you aren’t using the Check In/Check Out system.

    • Note: If you want to put a file on a remote server and check it in, use the Check In command (see Checking files in to and out of a remote site).

  • Use Put when you want to put the current version of the file on the server but you’re going to keep editing it.

    • Note: If you put a file that didn’t previously exist on the remote site and you’re using the Check In/Check Out system, the file is copied to the remote site and is then checked out to you to that you can continue editing.

To put only those files for which the local version is more recent than the remote version, see Synchronizing the files on your local and remote sites.

Note: Do not use special characters (such as é, ç, or ¥) or punctuation, such as colons, slashes, or periods, in the names of files you intend to put on a remote or testing server. Many servers change these characters during the upload process, which causes any links to the files to break.

To put files on a remote or testing server:
  1. In the Site panel, choose a site from the Site pop-up menu.
  2. If you’re using FTP to transfer files, you may click Connect to open a connection to the remote server, which enables you to see what’s on the remote site before transferring any files.

    3. Clicking Connect, however, is not required; when you click Put, Dreamweaver connects automatically.

  3. Select files to upload.

    4. Usually you select these in the Local view, but you may select the corresponding files in the Remote view if you prefer.

  4. Do one of the following to put the file:
    • Click the Put button on the Site panel toolbar.
    • Choose Put from the context menu.
    • Choose Site > Put.

      • If the file is currently open in a Document window, you can instead choose Site > Put from the Document window.

  5. If the file hasn’t been saved, a dialog box may appear (depending on your preference setting in the Site panel of the Preferences dialog box) allowing you to save the file before putting it on the remote server.

    6. To save the file, click Yes; to put the previously saved version on the remote server, click No. If you choose not to save the file, any changes you’ve made since last time you saved will not be put onto the remote server. However, the file remains open, so you can still save the changes after putting the file on the server if you want.

    A dialog box appears, asking if you want to put dependent files.

  6. To upload dependent files, click Yes; to skip them, click No.

    7. If the remote site already contains copies of the dependent files, click No. To avoid being asked about dependent files in future uploads, select the Don’t Ask Me Again option.

To stop the file transfer click the Cancel button in the status dialog box. The transfer may not stop immediately.

Dreamweaver records all FTP file transfer activity. If an error occurs when you are transferring a file using FTP, the Site FTP log can help you determine the problem. To display the log, select View > Site FTP Log.


Synchronizing the files on your local and remote sites

Once you’ve created files in your local and remote sites, you can synchronize the files between the two sites. Use the Site > Synchronize command to transfer the latest versions of your files to and from your remote site.

If your remote site is an FTP server (rather than a networked server), then synchronizing your files uses FTP. For more information on using FTP, see Setting up a remote folder.

Before you synchronize your sites, Dreamweaver lets you verify which files you want to put onto or get from your remote server. Dreamweaver also confirms which files have been updated after you complete the synchronization.

To see which files are newer on the local site or the remote site, without synchronizing, do one of the following:
  • Choose Edit > Select Newer Local or Edit > Select Newer Remote (Windows, from the Site panel).
  • Choose Site > Site Files View > Select Newer Local or Site > Site Files View > Select Newer Remote (Macintosh).
To synchronize your files:
  1. In the Site panel, choose a site from the Current Sites list pop-up menu.
  2. Select specific files or folders.

    3. If you want to synchronize the entire site, skip this step.

  3. In the Site panel, do one of the following to synchronize:
    • Choose Site > Synchronize.
    • Right-click (Windows) or Control-click (Macintosh), and then select Synchronize from the context menu.

      • The Synchronize Files dialog box appears.
      This is a picture of the feature being described.

  4. Complete the dialog box.

    5. For more information, see Setting Synchronize Files dialog box options.

Dreamweaver automatically synchronizes files. If the files are already in sync, Dreamweaver lets you know you that no synchronization is necessary.


Cloaking folders and files in your site

Site cloaking enables you to exclude folders and file types in a site from operations such as Get or Put. You can cloak individual folders, but not individual files. To cloak files, you must select a file type, and Dreamweaver cloaks all files of that type. Dreamweaver remembers your settings for each site, so you don’t have to make selections each time you work on that site.

For example, if you’re working on a large site and don’t want to upload your multimedia files each day, you can use site cloaking to cloak your mulitimedia folder, and the system excludes files in that folder from site operations you perform.

You can cloak folders and file types on the remote or local site. Cloaking excludes cloaked folders and files from the following operations:

  • Put, Get, Check In, and Check Out
  • Reports
  • Select newer local and newer remote
  • Sitewide operations, such as check and change links and search/replace
  • Synchronize
  • Asset panel contents
  • Template and library updating

Note: Dreamweaver excludes cloaked templates and library items from Get and Put operations only. Dreamweaver does not exclude these items from batch operations, because it might cause them to get out of sync with their instances.

You can perform an operation on a specific cloaked folder by selecting the item in the Site panel and performing an operation on it. Performing an operation directly on a file or folder overrides cloaking.


Enabling and disabling site cloaking

Site cloaking is enabled by default. You can disable cloaking permanently or just temporarily to perform an operation on all files, including cloaked files. When you disable site cloaking, all cloaked files are uncloaked. When you enable site cloaking again, any previously cloaked files become cloaked again.

Note: You can also use the Uncloak All option to uncloak all files, but this does not disable cloaking; also there is no way to re-cloak all folders and files that were previously cloaked, except to set cloaking again for each folder and file type.

To enable or disable site cloaking:
  1. In the Site panel, select a site from the Site pop-up menu.
  2. In the Site panel, do one of the following:
    • Choose Site > Cloaking to display the submenu.
    • Select a folder or file, right-click (Windows) or Control-click (Macintosh) to display the context menu.
  3. From the submenu, do one of the following:
    • Select Enable/Disable Cloaking.
    • Select Settings. Then, in the Advanced Site Definition dialog box, choose Cloaking from the category list on the left, select or deselect Enable Cloaking, and click OK.

Cloaking is enabled or disabled for the site.


Cloaking and uncloaking site folders

You can cloak specific folders, but you cannot cloak all folders or an entire site. When you cloak specific folders, you can cloak multiple folders at the same time.

To cloak or uncloak specific folders within a site:
  1. In the Site panel, select a site from the Site pop-up menu that has site cloaking enabled.
  2. Select the folder(s) you want to cloak or uncloak.
  3. In the Site panel, do one of the following:
    • Choose Site > Cloaking > Cloak or Site > Cloaking > Uncloak.
    • Right-click (Windows) or control-click (Macintosh), and then choose Cloaking > Cloak or Cloaking > Uncloak from the context menu.

A red line through the folder icon appears or disappears, indicating that the folder is cloaked or uncloaked.


Cloaking and uncloaking specific file types

You can indicate specific file types to cloak, so that Dreamweaver cloaks all files ending with a specified pattern. For example, you can cloak all files ending with the .txt extension. The file types that you enter do not have to be file extensions; they can be any pattern at the end of a filename.

To cloak specific file types within a site:
  1. In the Site panel, select a site from the Site pop-up menu that has site cloaking enabled.
  2. Do one of following:
    • Choose Site > Cloaking > Settings.
    • Right-click (Windows) or Control-click (Macintosh), and then select Settings.

      • The Advanced Site Definition dialog box appears.
      This is a picture of the feature being described.

  3. Select the Cloak Files Ending With checkbox.
  4. Enter the file types to cloak in the text box.

    5. For example, you might enter .jpg to cloak all files with names ending in .jpg in your site.

    Note: Separate multiple file types with one space; do not use a comma or semicolon.

  5. Click OK.

A red line appears through the affected files, indicating that they are cloaked.

Tip: Some software creates backup files ending in a particular suffix, such as .bak. You can cloak such files.

To uncloak specific file types within a site:
  1. In the Site panel, select a site from the Site pop-up menu that has site cloaking enabled.
  2. Do one of following:
    • Choose Site > Cloaking > Settings.
    • Right-click (Windows) or Control-click (Macintosh), and then select Cloaking > Settings.

      • The Advanced Site Definition dialog box appears.

  3. Do one of the following:
    • Deselect the Cloak Files Ending With checkbox to uncloak all the file types listed in the text box.
    • Delete specific file types from the text box to uncloak those file types.
  4. Click OK.

The red lines disappear from the affected files, indicating that they are uncloaked.


Uncloaking all folders and files

You can uncloak all folders and files in a site a the same time. This action cannot be undone; there is no way to re-cloak all items that were previously cloaked. You have to re-cloak items individually.

Note: If you want to temporarily uncloak all folders and files, and then re-cloak those items, disable site cloaking (see Enabling and disabling site cloaking).

To uncloak all folders and files within a site:
  1. In the Site panel, select a site from the Site pop-up menu that has site cloaking enabled.
  2. Select any file or folder in that site.
  3. In the Site panel, do one of the following:
    • Choose Site > Cloaking > Uncloak All.
    • Right-click (Windows) or control-click (Macintosh), and then choose Cloaking > Uncloak All.

      • Note: This step also deselects the Cloak Files Ending With checkbox in the Site > Cloaking > Settings.

      The red lines through folder and file icons disappear, indicating that all files and folders in the site are uncloaked.


Using Design Notes

Design Notes are notes that you create for a file. The Design Notes are associated with the file they describe, but stored in a separate file. You can use Design Notes to keep track of extra file information associated with your documents, such as image source-filenames and comments on file status.

For example, if you copy a document from one site to another, you can add Design Notes for that document, with the comment that the original document is in the other site folder. Then if you update that document (or someone else does), you’ll know that you need to update the original page as well.

You can also use Design Notes to keep track of sensitive information that you can’t put inside a document for security reasons. For example, you can include information about how the document was created, or notes on how a particular price or configuration was chosen, or what marketing factors influenced a design decision.

You can see which files have Design Notes attached in the Site panel: a Design Notes icon appears in the Notes column.

For general information on using Design Notes, see Saving file information in Design Notes. For information on using Design Notes with Fireworks, see Using Design Notes in Fireworks and Flash with Dreamweaver.


Enabling and disabling Design Notes

You enable and disable Design Notes for a site in the Design Notes category of the Site Definition dialog box. When you enable Design Notes, you can choose to use them locally only, if you want.

To enable or disable Design Notes for your site or to use Design Notes locally:
  1. Choose Site > Edit Sites.

    2. The Edit Sites dialog box appears.

  2. Select a site, and then click Edit.

    3. The Site Definition dialog box appears.

  3. Click Design Notes in the Category list on the left.

    4. The Site Definition dialog box appears with the Design Notes options.
    This is a picture of the feature being described.

  4. Complete the dialog box.

    5. For more information, see Setting the Design Notes category options.

  5. Click OK.


Saving file information in Design Notes

You can create a Design Notes file for each document or template in your site. You can also create Design Notes for applets, ActiveX controls, images, Flash movies, and Shockwave objects, and image fields in your documents.

Note: If you add Design Notes to a template file, documents you create with the template do not inherit the Design Notes.

To add Design Notes to a document:
  1. While the document is active in the Document window, choose File > Design Notes.

    2. You can also select the file in the Site panel, and then choose File > Design Notes.

    Note: If the file resides on a remote site, you must first check out or get the file, then select it in the local folder (see Checking files in to and out of a remote site or Getting and putting files).

    The Design Notes dialog box appears.
    This is a picture of the feature being described.

  2. Complete the dialog box.

    3. For more information, see Setting the Design Notes dialog box options.

  3. Click OK to save the notes.

    4. Dreamweaver saves your notes to a folder called _notes, in the same location as the current file. The filename is the document’s filename, plus the extension .mno.

    For example, if the filename is index.html, the associated Design Notes file is named index.html.mno.

To add Design Notes to an object:
  1. Select the object.
  2. Right-click (Windows) or Control-click (Macintosh), and then choose Design Notes from the object’s context menu.

    3. The Design Notes dialog box appears.

  3. Complete the dialog box.

    4. For more information, see Setting the Design Notes dialog box options.

  4. Click OK to save the notes.

    5. Dreamweaver saves an object’s Design Notes file in a _notes folder in the same directory as the object’s source file, which is not necessarily in the same directory as the document that the object appears in.

To open Design Notes associated with a file, do one of the following:
  • Select the file in the Site panel, or open the file, and then choose File > Design Notes.
  • In the Notes column of the Site panel, double-click the yellow Design Notes icon.
To assign a custom Design Notes status:
  1. Open Design Notes for a file or object (see the previous procedure).
  2. Click the All Info tab.
  3. Click the plus (+) button.
  4. In the Name field, enter the word status.
  5. In the Value field, enter the status.

    6. If a status value already existed, it’s replaced with the new one.

  6. Click the Basic Info tab and note that the new status value appears in the Status pop-up menu.

    7. Note: You can have only one custom value in the status menu at a time. If you follow this procedure again, Dreamweaver replaces the status value you entered the first time with the new status value you enter.

To delete unassociated Design Notes from your site:
  1. Choose Site > Edit Sites.

    2. The Edit Sites dialog box appears.

  2. Select the site, and then click Edit.

    3. The Site Definition dialog box appears.

  3. Click Design Notes in the category list on the left.
  4. Click the Clean Up button.

    5. Dreamweaver prompts you to verify that it should delete any Design Notes that are no longer associated with a file in your site.

    If you use Dreamweaver to delete a file that has an associated Design Notes file, Dreamweaver deletes the Design Notes file too; so usually orphan Design Notes files occur only if you delete or rename a file outside of Dreamweaver.

    Note: If you deselect the Maintain Design Notes option before you click Clean Up, Dreamweaver deletes all Design Notes files for your site.


Using Design Notes in Fireworks and Flash with Dreamweaver

If you open a file in Macromedia Fireworks or Macromedia Flash and export it to another format, Fireworks and Flash automatically save the name of the original source file in a Design Notes file.

For example, if you open myhouse.png in Fireworks and export it to myhouse.gif, Fireworks creates a Design Notes file called myhouse.gif.mno. This Design Notes file contains the name of the original file, as an absolute file: URL. So, the Design Notes for myhouse.gif might contain this line:

fw_source="file:///Mydisk/sites/assets/orig/myhouse.png"

A similar Flash Design Note might contain this line:

fl_source="file:///Mydisk/sites/assets/orig/myhouse.fla"

Note: To share Design Notes, users should define the same site-root path. For example, sites/assets/orig.

When you import the graphic into Dreamweaver, the Design Notes file is automatically copied into your site along with the graphic. When you select the image in Dreamweaver and choose to edit it using Fireworks (see Launching an external editor for media files), Fireworks opens the original file for editing.


Using reports to improve workflow

You can use reports to improve collaboration among members of a web team.

You can run workflow reports that display who has checked out a file and which files have Design Notes associated with them. You can further refine Design Note reports by specifying name/value parameters.

For information on running other types of reports, see Using Reports to test a site.

Note: You must have a remote site connection defined to run the Workflow reports.

To run a Checked Out By report:
  1. Open a document.
  2. Choose Site > Reports.

    3. The Reports dialog box appears.
    This is a picture of the feature being described.

  3. Select a report category to report on and report types you want to run.

    4. For more information, see Setting Reports dialog box options.

  4. Click Run.

    5. Depending on what you chose to report on, you may be prompted to save your file, define your site, or select a folder (if you haven’t already done so).

    The report appears in the Site Reports panel (in the Results panel group).

To use a report:
  1. In the Site Reports panel, click the column heading you want to sort by to sort results.

    2. You can sort by filename, line number, or description. You can also run several different reports and keep the different Results panel open.

  2. Select any line in the report, and click the More Info button on the left side of the Site Reports panel for an description of the problem.

    3. The information appears in the Reference panel (in the Code panel group).

  3. Double click any line in the report to view the corresponding code in the Document window.

    4. Note: If you are in Design view, Dreamweaver changes the display to split view to show the reported problem in code.

  4. Click Save Report to save the report.

When you save a report, you can import it into an existing template file. You can then import the file into a database or spreadsheet and print it, or use the file to display the report on a website.


About the Sitespring panel in Dreamweaver

You can use the Sitespring panel to view all your Sitespring directly in Dreamweaver. You can also select a task from the panel and connect to your Sitespring web page and edit the task. You can save any changes you make in Sitespring, return to Dreamweaver and refresh the Sitespring panel to see the changes. The Sitespring panel displays your tasks, along with their priority, status, due date, and project name.


System requirements

To use the Sitespring panel with Dreamweaver, you must have Dreamweaver MX and Sitespring installed on your system or server. If you don’t have Sitespring, you can download a free trial version from the Macromedia Sitespring website. Sitespring is only compatible with Flash-enabled, newer browsers, such as Netscape Communicator 4.06 or later and Microsoft Internet Explorer 5 or later.


Connecting to your Sitespring server

To use the Sitespring panel, you must first connect and log in to your Sitespring server.

Note: For more information on using Macromedia Sitespring, please refer to the Sitespring documentation.

To connect to your Sitespring server from Dreamweaver:
  1. In the Document window, choose Window > Others > Sitespring or press F7.

    2. The Sitespring Login appears.
    This is a picture of the feature being described.

  2. In the Sitespring Server text box, enter the URL for the Sitespring server to which you will be connecting. If you are not sure what this URL is, contact your system administrator.
  3. In the User Name and Password text boxes, enter your Sitespring server user name and password. The User Name text box is case-sensitive.
  4. If you would like to save your password on your computer, select the Save Password and Login Automatically option.

    5. Note: This option only lets you close and reopen the Sitespring panel without login information. If you log out of Sitespring completely, either through Dreamweaver or through the application itself, you will need to reenter this information.

  5. Click Log In to connect to the Sitespring server.

    6. The status of the connection appears above the Sitespring Server text box. The Sitespring panel displays your current tasks when the connection is made.

If you have difficulty connecting to Sitespring, contact your system administrator.


Using the Sitespring panel

You can use the Sitespring panel to view all your tasks or only those associated with a specific project. You can edit a task and refresh the task list to see the changes. The Tasks text box displays tasks, priority, status, due date, and project name.

To use the Sitespring panel:
  1. In the Document window, choose Window > Others > Sitespring or press F7.
  2. Log in to the Sitespring server, if you haven’t already done so (see Connecting to your Sitespring server).

    3. The Sitespring panel displays your current tasks. It consists of a Tasks text box displaying your current open tasks, and a menu and icons for performing certain actions. Tasks are sorted by task name. Click a column heading to sort by that column. The Sitespring panel does not display tasks that have a status of Suspended or Completed.
    This is a picture of the feature being described.

  3. Select from the following options:
    • Choose a specific project from the Project pop-up menu to display only those tasks associated with a specific project, or choose Show All Tasks to display all your current tasks.
    • Click the Refresh icon to refresh the Sitespring panel and see any changes you have made to this task.

      • Note: You must save changes in Sitespring first before they appear in the panel.

    • Select a task in the Name column, and then click the Edit Task button to edit that task.

      • To edit tasks, you must also log in to Sitespring via the Please Log In web page. If you are logged in, the Edit Task page associated with this task appears. If you haven’t yet logged in, the Please Log In web page appears.

    • Click the Sitespring icon to go directly to a Sitespring web page.

      • If you have already logged in, your Sitespring home page appears. If you haven’t yet logged in, the Please Log In page appears.

    • Press F7 to close the Sitespring panel, or click the panel’s Close box to close the Sitespring panel.

      • Note: You may want to close the Sitespring panel rather than log out completely, so you don’t have to log in each time.

    • Click the Log Out link to log out of Sitespring or to switch users.

The Sitespring Login appears. You can enter a new user name and password to switch users, or close the dialog box to disconnect (see Logging out of Sitespring in Dreamweaver).


Logging out of Sitespring in Dreamweaver

When you click the Log Out link from the Sitespring panel, you also log out of Sitespring in Dreamweaver.

To log out of Sitespring:
  1. In the Sitespring panel, click the Log Out link.

    2. The Sitespring Log In appears.
    This is a picture of the feature being described.

  2. Close the dialog box.

The next time you access the Sitespring panel, you don’t have to reenter the URL when you connect (unless you want to access a different Sitespring server), but you will have to enter your password.


Reference

This section provides information about the dialog boxes introduced in this chapter.


Setting Site panel preference options

The purpose of this dialog box is to set user preferences for the Site panel.

Procedure
  1. Change the following options as necessary:

    2. Always Show specifies which site (remote or local) is always shown, and in which Site panel pane (left or right) the local and remote files appear.

    By default, the local site always appears on the right. Whichever pane is not chosen (the left one by default) is the changeable pane: this pane can display either the site map or the files in the other site (the remote site by default).

    Dependent Files displays a prompt for transferring dependent files (such as images, external style sheets, and other files referenced in the HTML file) that the browser loads when it loads the HTML file. By default, both Prompt on Get/Check Out and Prompt on Put/Check In are selected.

    Tip: To force the Include Dependent Files prompt to appear even when these options are deselected, hold down Alt (Windows) or Option (Macintosh) while choosing the Get, Put, Check In, or Check Out commands.

    FTP Connection determines whether the connection to the remote site is terminated after the specified number of minutes have passed with no activity.

    FTP Time Out specifies the number of seconds in which Dreamweaver attempts to make a connection with the remote server.

    If there is no response after the specified amount of time, Dreamweaver displays a warning dialog box alerting you to this fact.

    FTP Transfer options determines whether Dreamweaver selects the default option, after a specified number of seconds, when a dialog box appears during a file transfer and there is no user response.

    Firewall Host specifies the address of the proxy server through which you connect to outside servers if you are behind a firewall.

    If you are not behind a firewall, leave this space blank. If you are behind a firewall, select the Use Firewall option in the Site Definition dialog box. See Setting up a remote folder.

    Firewall Port specifies the port in your firewall through which you pass to connect to the remote server. If you connect through a port other than 21 (the default for FTP), enter the number here.

    Put Options: Save Files Before Putting indicates that unsaved files are saved automatically before being put onto the remote site.

    Edit Sites launches the Edit Sites dialog box, where you can edit an existing site or create a new one.

  2. Click OK.

Related topic

Setting Site preferences


Setting File View Columns category options

The purpose of this dialog box is to make changes to the file view columns in the Site panel. You can change the order of columns, add a new column, or delete a column.

To change the order of the columns:

Select a column name, and then click the up or down arrow button to change the position of the selected column.

Note: You can change the order of any column except Name, which is always the first column.

To add a new column:
  1. Click the plus (+) button.
  2. In the Column Name text box, enter a name for your column.
  3. Choose a value from the Associate with Design Note pop-up menu, or type in your own.

    4. You must associate a new column with a Design Note, so that there is data to display in the Site panel.

  4. Choose an alignment option to determine how Dreamweaver aligns the text within the column.
  5. Select or deselect the Show option to reveal or hide the column.
  6. Select the Share with All Users of This Site option to share the column with all users connected to the remote site.
To delete an added column:

Select a column to delete, and then click the minus (-) button.

Note: The column is deleted immediately and without confirmation, so make certain that you want to delete the column before clicking the minus (-) button.

Related topic

Changing file view columns


Setting Site Map Layout category options

The purpose of this dialog box is to customize the appearance of your site map.

Procedure
  1. In the Home Page text box, enter a file path to the home page for the site or click the folder icon to browse to the file.

    2. The home page must be on the local site. If you don’t specify a home page, or if Dreamweaver cannot find a file called index.html or index.htm at the root, Dreamweaver prompts you to select a home page when you open the site map.

  2. Choose from the Column options:
    • In the Number of Columns text box, type a number to set the number of pages to display per row in the site map window.
    • In the Column Width text box, type a number to set the width, in pixels, of the site map columns.
  3. Under Icon Labels, select whether the name displayed with the document icons in the site map is represented as a filename or as a page title.
  4. Under Options, select which files to display in the site map:
    • Choose Display Files Marked as Hidden to display HTML files you’ve marked as hidden in the site map.

      • If a page is hidden, its name and links appear in italics. For information about hiding files, see Showing and hiding site map files.

    • Choose Display Dependent Files to show all dependent files in the site’s hierarchy.

      • A dependent file is an image or other non-HTML content that the browser loads when it loads the main page.

Related topic

Modifying the site map layout


Setting Check In/Out options

The purpose of the Check In/Check Out section is to set options for file Check In/Check Out.

Procedure
  1. Select the Enable File Check In and Check Out option if you are working in a team environment (or working alone but from several different machines).

    2. This option is useful to let others know that you checked out a file for editing, or to alert yourself that you may have left a more recent version of a file on another machine.

    Note: If your remote access option is Local/Network, SourceSafe Database, or WebDAV, this is your only Check In/Out option. The remaining options in this section apply to FTP access only.

  2. Select the Check Out Files when Opening option if you want to automatically check out files when you double-click to open them from the Site panel.

    3. Note: Using File > Open to open a file doesn’t check the file out even when this option is selected.

  3. Enter a check-out name.

    4. The check-out name appears in the Site panel alongside any files that are checked out; this enables team members to communicate with the right person if a file they need is checked out.

    If you work alone from several different machines, use a different check-out name on each machine (for example, AmyR-HomeMac and AmyR-OfficePC) so you’ll know where the latest version of the file is if you forget to check it in.

  4. Enter an e-mail address.

    5. If you enter an e-mail address and then check out a file, your name appears in the Site panel next to that file as a link (blue and underlined). If a team member clicks on the link, their default e-mail program opens a new message with the user’s e-mail address and a subject that corresponds to the file and site name.

Related topic

Setting up the Check In/Check Out system


Setting Synchronize Files dialog box options

The purpose of this dialog box is to set options for synchronizing files.

Procedure
  1. In the Synchronize pop-up menu, choose one of the following:
    • To synchronize the entire site, choose Entire ‘Site Name’ Site.
    • To synchronize selected files only, choose Selected Local Files Only (or Selected Remote Files Only if the Remote view of the Site panel was where you made the most recent selection).
  2. Choose the direction in which you want to copy the files:
    • Choose Put Newer Files to Remote to upload all the local files that have more recent modification dates than their remote counterparts.
    • Choose Get Newer Files from Remote to download all the remote files that have more recent modification dates than their local counterparts.
    • Choose Get and Put Newer Files to place the most recent versions of all the files on both the local and the remote sites.
  3. Choose whether to delete the files on the destination site that don’t have counterparts on the origin site. (This is not available if you select Get and Put in the direction text box.)

    4. If you choose Put Newer Files to Remote and you select the Delete option, then Dreamweaver deletes any files in your remote site for which there are no corresponding local files. If you choose Get Newer Files from Remote, then Dreamweaver deletes any files in your local site for which there are no corresponding remote files.

  4. Click Preview.

    5. If the newest version of each chosen file is already in both places and nothing needs to be deleted, an alert appears, informing you that no synchronization is necessary.

  5. In the Synchronize Files preview, verify which files you want to delete, put, and get.

    6. If you don’t want Dreamweaver to delete, put, or get a particular file, deselect it by clicking the checkbox to the left of the file (in the Action column).

  6. Click OK.

    7. Dreamweaver automatically transfers (and deletes as necessary), and then updates the dialog box with the status.

  7. To save the verification information to a local file, click Save Log.

Related topic

Synchronizing the files on your local and remote sites


Setting the Design Notes category options

The purpose of this dialog box is to enable or disable Design Notes for a site.

To enable Design Notes:
  1. Select Maintain Design Notes.
  2. Select Upload Design Notes for Sharing to upload Design Notes associated with your site with the rest of your documents.

    3. If you select this option, you can share Design Notes with the rest of your team. When you put or get a file, Dreamweaver automatically puts or gets the associated Design Notes file.

    If you do not select this option, Dreamweaver maintains Design Notes locally but does not upload them with your files. If you work alone on your site, you can deselect this option to improve performance of file transfers.

  3. Click OK.
To disable Design Notes:
  1. Deselect Maintain Design Notes.
  2. Click Clean Up, and then click Yes if you want Dreamweaver to delete all local Design Notes files for your site.
  3. Click OK.

    4. A dialog box appears, asking if you would like to delete existing Design Notes files.

  4. Click Yes to delete Design Notes files or No to leave them in place.
  5. Click OK to close the Site Definition dialog box.
To use Design Notes locally only:

Deselect Upload for Sharing.

Design Notes will not be transferred to the remote site when you check in/put your files. You will still be able to add and modify the Design Notes for your site locally.

Related topics

Using Design Notes

Saving file information in Design Notes


Setting the Design Notes dialog box options

The purpose of this dialog box is to add Design Notes to a file.

Procedure
  1. In the Basic Info tab, choose a status for the document from the Status pop-up menu.
  2. Click the date icon (just above the Notes text box) to insert the current local date in your notes.
  3. Type comments in the Notes text box.
  4. Select Show When File Is Opened to make the Design Notes file appear every time the file is opened.
  5. In the All Info tab, click the plus (+) button to add a new key/value pair; select a pair and click the minus (–) button to remove it.

    6. For example, you might name a key Author (in the Name text box) and define the value as Heidi (in the Value text box).

  6. Click OK.

Related topics

Using Design Notes

Saving file information in Design Notes


Setting Cloaking category options

The purpose of this dialog box is to enable or disable cloaking and to cloak specific file types.

Procedure
  1. Select or deselect the Enable Cloaking check box to enable or disable cloaking.
  2. Select or deselect the Cloak Files Ending With check box to enable or disable cloaking for specific file types.
  3. Enter or delete file suffixes in the text box that you want to cloak or uncloak.
  4. Click OK.

Related topics

Enabling and disabling site cloaking

Cloaking and uncloaking specific file types

Previous


Setting Up a Document

Macromedia Dreamweaver MX offers a flexible environment for working with a variety of web design and development documents. In addition to HTML documents, you can create and open CFML, ASP, JavaScript, CSS, or text-based documents.

The New Document dialog box provides several types of documents from which to create a new document. From this easy-to-use interface you can create a new blank document or template, a document based on one of your existing templates, or a document or template based on one of the designed page layouts that is included with Dreamweaver. You can use these basic designed page’s layouts and templates to quickly get started developing professional looking web pages.

Other document options are also available in the New Document dialog box. You can select text-based documents, such as JavaScript or Cascading Style Sheet (CSS) documents, and dynamic page documents such as Macromedia ColdFusion, Microsoft Active Server Pages (ASP), and PHP pages. If you typically work with one type of document, you can set it as the default document type for new pages you create.

In Dreamweaver, you can easily define document properties, such as meta tags, document title, and background colors and several other page properties in either the Design view or Code view.

This chapter includes the following topics:

  • Working with the New Document dialog box
  • Opening existing documents
  • Setting document properties
  • Selecting elements in the Document window
  • Using visual guides in the design process
  • About automating tasks
  • Reference
Next


Creating Dreamweaver documents

The New Document dialog box presents you with several types of documents from which to create a new page. Dreamweaver opens the New Document dialog box when you choose File > New. If you work predominately with one document type, for example HTML pages, ColdFusion pages, or Active Server Pages, you may want to set up a default document type. Setting up a default document type allows you to open a new document of a preferred document type when you create a new document without opening the New Document dialog box.

Related topics

Creating a new blank document

Opening existing documents

Creating a document based on an existing template

Creating a document based on a Dreamweaver design file


Working with the New Document dialog box

The New Document dialog box provides you with several choices for selecting a new document to work in. You can create a new document in the following ways:

  • You can start with a blank document.
  • You can use a template that defines how a document looks, and sets which parts of a document can be edited.
To open the New Document dialog box:
  • Choose File > New.

The New Document dialog box contains two tabs: General and Templates.

The General tab contains various document types you can use to create a new blank page. You can select a new blank document from the Basic Page, Dynamic Page, and Frameset categories. Create a page based on a special file type such as CSS, JavaScript, VBScript or Text files by selecting a document in the Other category. The Templates category provides you with a choice of document types from which you can create a blank templates: HTML templates as well as templates in which you can insert server behaviors.

The CSS Style Sheets, Page Designs, and Pages Designs (Accessible) categories, provide you with pre-built design files you can use to create your own pages. In the case of CSS style sheets, you can copy a pre-designed styles sheets then apply it to your document.

Depending on the type of document you select, other options appear in the dialog box; for example, if you select HTML document you have the option of making the document XHTML compliant, and when you select a Page Designs file, you have the option of creating a document or creating a template.

The Templates tab contains a list of your defined Dreamweaver sites. You can choose a template from any of the listed sites to create new documents based on that template.

Select a category to see a list of available document types in the Document list to its right. Clicking a document in the list provides you with a description, and in the case of Page Designs, CSS Style Sheets, and Framesets categories document, a preview of the selected document.

You can use the Preferences option located at the bottom of the New Document dialog box to set default document preferences, such as a document type, encoding, and a file extension. Additionally, you can set an option to automatically open a new document without using the New Document dialog box. For information about setting document preferences see Setting New Document preferences.

Use the Get More Content link in the New Document dialog box to go to the Dreamweaver Exchange to download more page design content.


Creating a new blank document

You can use the New Document dialog box to select the type of document you want to create.

If you typically work with a specific document type, you can set a default document and automatically open a new document based on the default document you’ve defined. For information, see Setting New Document preferences.

To create a new blank document:
  1. In Dreamweaver, choose File > New.

    2. The New Document dialog box appears. The General tab is already selected.

  2. In the Category list select the category of document you want to create.

    3. For example, select Basic Page to create an HTML document, or select Dynamic page to create a ColdFusion or ASP document, and so on.

  3. In the document list, select the page type you want to create, then do one of the following:
    • Click Create.
    • Double-click on the item in the document list.
    • Press Enter.

      • The dialog box closes and a new document appears in the Document window.


Creating a document based on a Dreamweaver design file

Dreamweaver comes with several professionally developed page layout and design element files. You can use these design files as starting points for designing pages in your sites.

The design files include documents and templates which adhere to accessibility standards, table-based page layout documents, and CSS Style Sheets. You can preview a document and read a brief description of a document’s design elements for items in the CSS Style Sheets, Framesets, Page Designs, and Page Designs (Accessible) categories.

When you create a document based on a design file, Dreamweaver creates a copy of the file. If the design file includes links to asset files (such as graphics, Flash elements, or an external CSS Style Sheet), when you save the document Dreamweaver prompts you to save a copy of the dependent files. You can choose your own location for the dependent files or use the default folder location Dreamweaver generates (which is based on the design file’s source name).

You can also create a new template based on a design file. The template already has editable regions defined. You can create new editable regions in the template. You’ll be prompted to save the file as a template for your current site. Linked files will also be copied to your site.

Note: If you create a document based on a predefined frameset only the frameset structure is copied, not the frame contents. additionally, you will have to save each frame file separately. For information about saving frames, see Saving frame and frameset files.

To create a Cascading Style Sheet:
  1. Open the New Document dialog box, choose File > New.
  2. In the Category list, select CSS Style Sheets.

    3. The document list to the right, updates with a selection of CSS Style Sheets.

  3. In the document list, select a style sheet to preview it properties and description, then do one of the following:
    • Click Create.
    • Double-click on the item in the document list.
    • Press Enter.

      • The dialog box closes and a new CSS document appears in the Document window. The CSS Style Sheet opens in Code view.

  4. Choose File > Save As.
  5. In the Save As dialog box, browse to the location where you want to save the file, enter a unique filename for the document, and click Save.
To create a Page Designs document:
  1. Open the New Document dialog box, choose File > New.
  2. In the Category list, select Page Design or Page Design (Accessible) depending on you design requirements.
  3. In the Page Designs list select the document you want to base the new page on.
  4. Do one of the following:
    • To create a document, select the Document radio button.
    • To create a new template, select the Template radio button.
  5. Click Create.

    6. A new document appears in the Document window. If you create a template, you’ll see editable regions defined and you’ll be prompted to save the document as a template for your current site.

  6. Choose File > Save to save the document.

    7. If the file contains links to asset files the Copy Dependent Files dialog box appears.

  7. In the Copy Dependent Files dialog box, set options to copy the assets to your current site.
  8. Click Copy to copy the assets to the selected folder and close the dialog box.


Creating a document based on an existing template

You can use the New Document dialog box to select, preview, and create a new document from an existing template. You can select a template from any of your Dreamweaver-defined sites.

Documents in the Page Design category of the New Document dialog box also let you create templates. Once you save a page design document as a template in your site you can create pages based on that template. For information, see Creating a document based on a Dreamweaver design file.

For more information about working with templates and documents based on templates, see About Dreamweaver templates.

To create a new document based on a template:
  1. Choose File > New to open the New Document dialog box.
  2. In the Templates tab, in the Templates For list, select the Dreamweaver site that contains the template you want use.
  3. The Site list displays templates in the selected site, if there are any.
  4. Select the template you want to use.
  5. Deselect the Update Page When Template Changes option if you want to detach the new document from the template.
  6. Click Create.

    7. A new document is created.

  7. Save the document.


Saving a document

When you save a document, avoid using spaces and special characters in file and folder names. In particular, do not use special characters (such as é, ç, or ¥) or punctuation (such as colons, slashes, or periods) in the names of files you intend to put on a remote server; many servers change these characters during upload, which will cause any links to the files to break. Also, do not begin a filename with a numeral.

To save a document:
  1. Choose File > Save.
  2. In the dialog box that appears, navigate to the folder where you want to save the file.
  3. In the File Name text field, type a name for the file.
  4. Click Save to save the file.


Opening existing documents

In Dreamweaver, you can open an existing HTML document or any dynamic document type, even if it wasn’t created in Dreamweaver. You can open the document and use Dreamweaver to edit it taking advantage of Design view or Code view authoring.

You can also open non-HTML text files, such as JavaScript files, XML files, CSS Style Sheets, or text files saved by word processors or text editors.

Certain files open in Code view only and allow you to make edits to the code in the file, such as a CSS document. You can update the document while working in Dreamweaver, then save the changes in the file.

If the document you want to open is a Microsoft Word 97, Word 98 or Word 2000 file which was saved as HTML, you may want to import the document into Dreamweaver rather than open it. When you import a Word HTML file Dreamweaver prompts you to clean up the extraneous markup tags Word inserts into HTML files. You can use the Clean Up Word HTML command to set a page background color and to clean up CSS Style Sheet formatting in the imported document.

To open an existing file, do one of the following:
  1. In Dreamweaver, choose File > Open.
  2. In the dialog box that opens, navigate to and select the file you want to open.
  3. Click Open.

    4. The document opens in the Document window.

    Note: JavaScript, text, and CSS Style Sheets open in Code view by default. For information about changing setting an external text editor for viewing these types of files, see Launching an external editor for media files.

To open and import a Microsoft Word HTML file:
  1. In Dreamweaver, choose File > Import > Word HTML.

    2. The Select Word HTML File to Import dialog box opens.

  2. In the dialog box, navigate to and select the document you want to open.
  3. Click Open.

    4. Dreamweaver opens the document in a new window and the Clean Up Word HTML dialog box opens.

  4. Choose options in the Basic or Detailed tab to select the cleanup options you want to apply to the document.

    5. For more information about the cleanup options, see Cleaning up Microsoft Word HTML.

  5. Click OK.

Dreamweaver applies the clean up settings to the new document and a log of the changes appears.

  1. Save the document.


Setting document properties

Page titles, background images and colors, text and link colors, and margins are basic properties of every HTML document. The page title identifies and names the document. A background image or color sets the overall appearance of the document. Text and link colors help site visitors distinguish regular text from hypertext and to see which links have been visited and which have not.

For information about completing the Page Properties dialog box, see Selecting Page Properties options.


Changing the document title

The title of an HTML page helps site visitors keep track of what they’re viewing as they browse, and it identifies the page in the visitor’s history and bookmark lists. If you don’t title a page, the page will appear in the browser window, bookmark lists, and history lists as Untitled Document. Note that giving the document a filename (by saving it) is not the same as giving the page a title. To locate all untitled documents in your site, use the Site > Reports command; see Using Reports to test a site.

To change the title of a page:
  1. With the document open, do one of the following:
    • Choose Modify > Page Properties.
    • Choose View > Toolbar (if it isn’t already selected).
    • Right-click (Windows) or Control-click (Macintosh) in an empty area in the document, then select Page Properties.
  2. In the Title text box, enter the title for the page, the press Enter or Return.
  3. If you’re editing the title in the Page Properties dialog box, click OK.

    4. The title appears in the title bar of the Document window (and in the toolbar, if it’s showing). The filename of the page and the folder the file is saved and appears in parentheses next to the title in the title bar. An asterisk indicates the document contains changes that have not yet been saved.


Setting a background image or background page color

To define an image or color for the page background, use the Page Properties dialog box. If you use both a background image and a background color, the color appears while the image downloads, and then the image covers up the color. If the background image contains any transparent pixels, the background color shows through.

To define a background image or color:
  1. Choose Modify > Page Properties, or select Page Properties from the context menu in the Design view of the Document window.
  2. To set a background image, click the Browse button, then browse to and select the image. Alternatively, enter the path to the background image in the Background Image box.

    3. Dreamweaver tiles (repeats) the background image if it does not fill the entire window, just as browsers do. (To prevent the background image from tiling, use Cascading Style Sheets to disable image tiling. See Defining CSS Style Background properties.

  3. To set a background color, click the Background color box and select a color from the color picker.


Working with colors

In Dreamweaver, many of the dialog boxes, as well as the Property inspector for many page elements, contain a color box, which opens a color picker. Use the color picker to choose a color for a page element.

To choose a color in Dreamweaver:
  1. Click a color box in any dialog box or in the Property inspector.

    2. The color picker appears.
    This is a picture of the feature being described.

  2. Do one of the following:
    • Use the eyedropper to select a color swatch from the palette. All colors in the Color Cubes (default) and Continuous Tone palettes are web-safe; other palettes are not. (For more information, see About web-safe colors.)
    • Use the eyedropper to pick up a color from anywhere on your screen—even outside the Dreamweaver windows. (If you click the desktop or another application, Dreamweaver picks up the color where you clicked, but you may switch into the other application; in that case, click a Dreamweaver window to continue working in Dreamweaver, or hold down the mouse button when moving from Dreamweaver to the desktop to keep from switching out of Dreamweaver.)
    • To expand your color selection, use the pop-up menu at the top right corner of the color picker. You can select Color Cubes, Continuous Tone, Windows OS, Mac OS, Grayscale, and Snap to Web Safe.

      • Note that the Color Cubes and Continuous Tone palettes are web safe, whereas Windows OS, Mac OS and Grayscale are not. If you are using a palette that isn’t web-safe and then choose Snap to Web Safe, Dreamweaver replaces the selected color with the closest web-safe color. In other words, you may not get the color you see.

    • To clear the current color without choosing a different color, click the Strikethrough button.
    • To open the system color picker, click the Color Wheel button. For more information, see About web-safe colors.


About web-safe colors

In HTML, colors are expressed either as hexadecimal values (for example, #FF0000) or as color names (red). A web-safe color is one that appears the same in Netscape Navigator and Microsoft Internet Explorer on both Windows and Macintosh systems when running in 256-color mode. The conventional wisdom is that there are 216 common colors, and that any hexadecimal value that combines the pairs 00, 33, 66, 99, CC, or FF (RGB values 0, 51, 102, 153, 204, and 255, respectively) represents a web-safe color.

Testing, however, reveals that there are only 212 web-safe colors rather than a full 216, because Internet Explorer on Windows does not correctly render the colors #0033FF (0,51,255), #3300FF (51,0,255), #00FF33 (0,255,51), and #33FF00 (51,255,0).

The Color Cubes (default) and the Continuous Tone palettes in Dreamweaver use the 216-color web-safe palette; selecting a color from these palettes displays the color’s hexadecimal value.

To choose a color outside the web-safe range, open the system color picker by clicking the Color Wheel button in the upper right corner of the Dreamweaver color picker. The system color picker is not limited to web-safe colors.

UNIX versions of Netscape Navigator use a different color palette than the Windows and Macintosh versions. If you are developing exclusively for UNIX browsers (or your target audience is Windows or Macintosh users with 24-bit monitors and UNIX users with 8-bit monitors), consider using hexadecimal values that combine the pairs 00, 40, 80, BF, or FF, which produce web-safe colors for SunOS.


Defining default text colors

Define default colors for regular text, links, visited links, and active links in the Page Properties dialog box, or choose a preset color scheme to define the page background and text colors. (See Working with colors.)

Note: The active link color is the color that a link changes to while it’s being clicked. Some web browsers may not use the color you specify.

To define default text colors, do one of the following:
  • Choose Modify > Page Properties and then choose colors for the Text Color, Link Color, Visited Links, and Active Links options.
  • Choose Commands > Set Color Scheme and then choose a background color and a color set for text and links.

    • The sample box shows how the color scheme will look in the browser.


Selecting elements in the Document window

To select an element in the Design view of the Document window, you generally click the element. If an element is invisible, you must make it visible before you can select it.

To select elements, use these techniques:
  • To select a visible element in the Document window, click the element or drag across the element.
  • To select an invisible element, choose View > Visual Aids > Invisible Elements (if that menu item isn’t already selected) and then click the element’s marker in the Document window.

    • Some objects appear on the page in a place other than where their code is inserted. For example, a layer can be anywhere on the page, but the code defining the layer is in a fixed location. When invisible elements are showing, Dreamweaver displays markers in the Document window to show the location of the code for such elements. Selecting a marker selects the entire element; for example, selecting the marker for a layer selects the entire layer. (See About invisible elements.)

  • To select a complete tag (including its contents, if any), click a tag in the tag selector at the bottom left of the Document window. (The tag selector appears in both Design view and Code view.) The tag selector always shows the tags that contain the current selection or insertion point. The leftmost tag is the outermost tag containing the current selection or insertion point. The next tag is contained in that outermost tag, and so on; the rightmost tag is the innermost one that contains the current selection or insertion point.

    • In the following example, the insertion point is in a paragraph tag, <p>. To select the table in which the paragraph marker exists, you would select the <table> tag to the left of the <p> tag.
    This is a picture of the feature being described.

To see the HTML code associated with the selected text or object, do one of the following:
  • In the Document toolbar, click the Show Code View button.
  • Select View > Code.
  • In the Document toolbar, click the Show Code and Design Views button.
  • Select View > Code and Design.
  • Select Window > Others > Code Inspector.

For more information about the Code view, see Viewing your code.

When you select something in either code editor (the Code view or the Code inspector), it’s generally also selected in the Document window. You may need to synchronize the two views before the selection appears; see Viewing your code.


About invisible elements

Some HTML code doesn’t have a visible representation in a browser. For example, comment tags don’t appear in browsers. However, it can be useful while you’re creating a page to be able to select such invisible elements, edit them, move them, and delete them. Dreamweaver allows you to specify whether it shows icons marking the location of invisible elements in the Design view of the Document window.

To show or hide marker icons for invisible elements, choose View > Visual Aids > Invisible Elements. Showing invisible elements lets you select them and change their properties in the Property inspector; hiding them lets you see the page closer to the way it will appear in a browser. Note that showing invisible elements may slightly change the layout of a page, moving other elements by a few pixels, so for precision layout, hide the invisible elements.

To indicate which element markers appear when you choose View > Visual Aids > Invisible Elements, you can set options in Invisible Elements preferences. For example, you can specify that named anchors should be visible, but not line breaks. See Setting Invisible Elements preferences.

You can create certain invisible elements (such as comments and named anchors) using buttons in the Common category of the Insert bar (see Using the Insert bar). You can then modify these elements using the Property inspector.


Using visual guides in the design process

Dreamweaver provides several kinds of visual guides to help you design documents and predict (approximately) how they will appear in browsers. You can do all of the following:

  • Instantly snap the Document window to a desired window size to see how the elements fit on the page. See Resizing the Document window.
  • Use rulers to provide a visual cue for positioning and resizing layers or tables. See Displaying rulers.
  • Use a tracing image as the page background to help you duplicate a design created in an illustration or image-editing application such as Macromedia Fireworks. See Using a tracing image.
  • Use the grid for precise positioning and resizing of layers. Grid marks on the page help you align layers, and when snapping is enabled, layers automatically snap to the closest grid point when moved or resized. (Other objects, such as images and paragraphs, do not snap to the grid.) Snapping works regardless of whether the grid is visible. See Snapping layers to the grid.


Displaying rulers

Rulers can be displayed on the left and top borders of the page, marked in pixels, inches, or centimeters.

To change ruler settings, do one of the following:
  • To toggle rulers on and off, choose View > Rulers > Show.
  • To change the origin, drag the ruler-origin icon anywhere on the page. (This icon appears at the upper left corner of the Design view of the Document window when rulers are showing.) To reset the origin to its default position, choose View > Rulers > Reset Origin.
  • To change the unit of measure, choose Pixels, Inches, or Centimeters from the View > Rulers submenu.


Using a tracing image

Use a tracing image as a guide to re-create a page design that was mocked up in a graphics application. A tracing image is a JPEG, GIF, or PNG image that is placed in the background of the Document window. You can hide the image, set its opacity, and change its position.

The tracing image is visible only in Dreamweaver. It is never visible when you view the page in a browser. When the tracing image is visible, the page’s real background image and color are not visible in the Document window; however, the background image and color will be visible when the page is viewed in a browser.

To place a tracing image in the Document window:
  1. Do one of the following:
    • Choose View > Tracing Image > Load.
    • Choose Modify > Page Properties and then click the Browse button next to the Tracing Image text box.
  2. In the dialog box that appears, select an image file and click Select (Windows) or Choose (Macintosh).
  3. The Page Properties dialog box appears. Specify the transparency for the image by dragging the Image Transparency slider; then click OK.

    4. To switch to another tracing image or change the transparency of the current tracing image at any time, choose Modify > Page Properties.

To show or hide the tracing image:

Choose View > Tracing Image > Show.

To change the position of a tracing image:

Choose View > Tracing Image > Adjust Position. Then do one of the following:

  • To precisely specify the position of the tracing image, enter coordinate values in the X and Y text boxes.
  • To move the image one pixel at a time, use the arrow keys.
  • To move the image five pixels at a time, press Shift and an arrow key.
To reset the position of the tracing image:

Choose View > Tracing Image > Reset Position. The tracing image returns to the upper left corner of the document window (0,0).

To align the tracing image to a selected element:
  1. Select an element in the Document window.
  2. Choose View > Tracing Image > Align with Selection.

    3. The upper left corner of the tracing image is aligned with the upper left corner of the selected element.


Viewing and editing head content

HTML files are made up of two main sections: the head section and the body section. The body section is the main part of the document, the visible part containing text and images and so on. The head section is invisible, except for the document title, which appears in window title bars in browsers and in Dreamweaver. Give a title to every page you create.

The head section also contains other important information, including the document type, the language encoding, JavaScript and VBScript functions and variables, keywords and content indicators for search engines, and style definitions. You don’t need to provide all of these elements for every page; you might, for example, provide keywords and content indicators for your home page only. You can view the elements in the head section using the View menu, the Document window’s Code view, or the Code inspector.

To view elements in the head section of a document:

Choose View > Head Content. For each element of the head content, a marker appears at the top of the Document window in Design view.

Note: If your Document window is set to show only Code view, View > Head Content is dimmed.

To insert an element into the head section of a document:
  1. Do one of the following:
    • In the Insert bar’s Head category, select click one of the object buttons.
    • Choose an item from the Insert > Head Tags submenu.
  2. Enter options for the element in the dialog box that appears, or in the Property inspector.
To edit an element in the head section of a document:
  1. Choose View > Head Content.
  2. Click one of the icons in the head section to select it.
  3. Set or modify the properties of the element in the Property inspector.

For information about the properties of specific head elements, see the following topics:

  • Setting Meta properties
  • Setting Title properties
  • Setting Keywords properties
  • Setting Description properties
  • Setting Refresh properties
  • Setting Base properties
  • Setting Link properties


About automating tasks

While creating your documents, you may want to perform the same task numerous times. This section explains how to use the History panel to automate repetitive tasks.

To repeat a series of steps once or twice, replay them directly from the History panel, which records your steps as you work on a document. (For basic information about the History panel, see About the History panel.) To automate a task that you perform often, you can create a new command that performs that task automatically.

Some mouse movements, such as selecting something in the Document window by clicking or dragging, can’t be played back or saved as part of saved commands. When you make such a movement, a black line appears in the History panel (although the line does not become obvious until you perform another action). To avoid movements that can’t be played back, use the arrow keys instead of the mouse to move the insertion point within the Document window. To make or extend a selection, hold down the Shift key while pressing an arrow key.

Note: If a black mouse-movement indicator line appears while you’re performing a task you want to repeat later, you can undo back past that step and try another approach, perhaps using the arrow keys.

Certain other steps also aren’t repeatable, such as dragging a page element to somewhere else on the page. When you perform such a step, a menu-command icon with a small red X appears in the History panel.

Steps are replayed exactly as they were originally performed; you can’t modify the steps as you replay them. For example, if you previously changed the color of a table cell to red, applying that step to another table cell changes that cell’s color to red as well; you can’t specify a different color when you apply the step to a new cell.


Repeating steps

To repeat the last step you performed, use the Edit > Repeat command, or use the keyboard shortcut Control+Y (Windows) or Command+Y (Macintosh). The name of this command changes in the Edit menu to reflect the last step you performed; for example, if you’ve just typed some text, the command name is Repeat Typing. (You can’t use the Repeat command immediately after an Undo or Redo operation.)

To repeat steps other than the most recent one, or to repeat multiple steps at once, use the History panel. (For basic information about the History panel, see About the History panel.)

Note that when you replay steps, the steps that are played are the steps that are selected (highlighted), not necessarily the step currently pointed to by the slider.

To repeat one step:

In the History panel, select a step and click the Replay button. The step is replayed, and a copy of it appears in the History panel.

To repeat a series of adjacent steps:
  1. Select steps in the History panel by doing one of the following:
    • Drag from one step to another. (Don’t drag the slider; just drag from the text label of one step to the text label of another step.)
    • Select the first step, then Shift-click the last step; or select the last step and then Shift-click the first step.

      • Note: Although you can select a series of steps that includes a black mouse-movement indicator line, that mouse movement is skipped when you replay the steps.

  2. Click Replay.

    3. The steps are replayed in order, and a new step, labeled Replay Steps, appears in the History panel.

To repeat nonadjacent steps:
  1. Select a step, then Control-click (Windows) or Command-click (Macintosh) other steps.

    2. You can also Control-click or Command-click to deselect a selected step.

  2. Click Replay.

    3. The selected steps are replayed in order, and a new step, labeled Replay Steps, appears in the History panel.


Applying steps to another object

You can apply a set of steps from the History panel to any object in the Document window.

To apply History panel steps to a new object:
  1. Select the object.
  2. Select the relevant steps in the History panel, then click Replay.


Applying steps to multiple objects

If you select multiple objects in a document and then apply steps to them from the History panel, the objects are treated as a single selection, and Dreamweaver attempts to apply the steps to that combined selection. For example, you can’t select five images and apply the same size change to each of them all at once; a size change is an operation that must be applied to each individual image, not to a collective combination of images.

To apply a series of steps to each object in a set of objects, you must make the last step in the series select the next object in the set. The following procedure demonstrates this principle in a particular scenario: setting the vertical and horizontal spacing of a series of images.

To set the vertical and horizontal spacing of a series of images:
  1. Start with a document in which each line consists of a small image (such as a graphical bullet or an icon) followed by text. The goal is to set the images off from the text and from the other images above and below them.
    This is a picture of the feature being described.
  2. Open the Property inspector (Window > Properties), if it isn’t already open.
  3. Select the first image.
  4. In the Property inspector, enter numbers in the V Space and H Space text boxes to set the image’s spacing.
  5. Click the image again to make the Document window active without moving the insertion point.
  6. Press the Left Arrow key to move the insertion point to the left of the image. Then press the Down Arrow key to move the insertion point down one line, leaving it just to the left of the second image in the series. Then press Shift+Right Arrow to select that second image.

    7. Note: Do not select the image by clicking it, or you won’t be able to replay all the steps.

  7. In the History panel, select the steps that correspond to changing the image’s spacing and selecting the next image. Click the Replay button to replay those steps.
    This is a picture of the feature being described.

    8. The current image’s spacing changes, and the next image is selected.
    This is a picture of the feature being described.

  8. Continue to click Replay until all the images are spaced correctly.

To apply steps to an object in another document, use the Copy Steps button; see Copying and pasting steps between documents.


Copying and pasting steps between documents

Each open document has its own history of steps. You can copy steps from one document and paste them into another.

Note: Copy Steps (a button in the History panel) is different from Copy (in the Edit menu). You can’t use Edit > Copy to copy steps, though you do use Edit > Paste to paste them.

Closing a document clears its history. If you know you will want to use steps from a document after that document is closed, copy the steps with Copy Steps (or save them as a command; see Creating new commands from history steps) before you close the document.

Be careful when copying steps that include a Copy or a Paste command:

  • Don’t use Copy Steps if one of the steps is a Copy command; you may not be able to paste such steps the way you want.
  • If your steps include a Paste command, you can’t paste those steps, unless the steps also include a Copy command before the Paste command.

If you paste steps into a text editor or into the Code view or the Code inspector, they appear as JavaScript code. This can be useful for learning to write your own scripts. For more information on using JavaScript in Dreamweaver, see Writing and editing code.

To reuse steps from one document in another document:
  1. Start from the document containing the steps you want to reuse.
  2. Select the steps in the History panel.
  3. Click the History panel’s Copy Steps button to copy those steps.
    This is a picture of the feature being described.
  4. Open the other document.
  5. Place the insertion point where you want it, or select an object to apply the steps to.
  6. Choose Edit > Paste to paste the steps.

    7. The steps are played back as they’re pasted into the document’s History panel. The History panel shows them as only one step, called Paste Steps.


Creating new commands from history steps

You can save a set of history steps as a named command, which then becomes available in the Commands menu.

Create and save a new command if there’s any chance you’ll want to use a given set of steps again in the future, especially if you want to use those steps again the next time you start Dreamweaver; saved commands are retained permanently (unless you delete them), while recorded commands (see Recording commands) are discarded when you exit from Dreamweaver, and copied sequences of steps are discarded when you copy something else.

You can edit the names of commands that you’ve placed in the Commands menu, and you can delete them from the Commands menu, using Commands > Edit Command List. It’s more complicated to edit and delete commands that are built into the Commands menu (that is, commands that you didn’t explicitly add).

To create a command:
  1. Select a step or set of steps in the History panel.
  2. Click the Save As Command button, or choose Save As Command from the History panel’s context menu.
  3. Enter a name for the command and click OK.

    4. The command appears in the Commands menu.

    Note: The command is saved as a JavaScript file (or sometimes an HTML file) in your Dreamweaver/Configuration/Commands folder.

To use a saved command:
  1. Select an object to apply the command to, or place the insertion point where you want it.
  2. Choose the command from the Commands menu.
To edit the names of commands in the Commands menu:
  1. Choose Commands > Edit Command List.
  2. Select a command to rename and enter a new name for it.
  3. Click Close.
To delete a name from the Commands menu:
  1. Choose Commands > Edit Command List.
  2. Select a command.
  3. Click Delete, then click Close.


Recording commands

Dreamweaver allows you to record a temporary command for short-term use. The main differences between this approach and playing back steps from the History panel (see Repeating steps) are as follows:

  • The steps are recorded as you perform them, so you don’t have to select them in the History panel before playing them back.
  • During recording, Dreamweaver prevents you from performing nonrecordable mouse movements (such as clicking to select something in a window, or dragging a page element to a new location).
  • If you switch to another document while recording, Dreamweaver doesn’t record the changes you make in the other document. To determine whether you’re recording or not at any given moment, look at the mouse pointer.

Dreamweaver retains only one recorded command at a time; as soon as you start recording a new command, the old one is lost. To save a new command without losing a recorded one, save the command from the History panel; see Creating new commands from history steps.

Once you’ve recorded a command, you can save it using the History panel.

To temporarily record a series of frequently used steps:
  1. Choose Commands > Start Recording, or press Control+Shift+X (Windows) or Command+Shift+X (Macintosh).

    2. The pointer changes to indicate that you’re recording a command.

  2. When you finish recording, choose Commands > Stop Recording, or press Control+Shift+X (Windows) or Command+Shift+X (Macintosh).
To play back a recorded command:

Choose Commands > Play Recorded Command, or press Control+Shift+R (Windows) or Command+Shift+R (Macintosh).

To save a recorded command:
  1. Choose Commands > Play Recorded Command to play the command back.

    2. A step named Run Command appears in the History panel’s step list.

  2. Select the Run Command step and click the Save As Command button.
  3. Enter a name for the command and click OK.

    4. Note: The command appears in the Commands menu.


Reference

This section provides information about dialog boxes introduced in this chapter.


Setting New Document preferences

You can define which document type Dreamweaver sets as a default document for a site. For example, if most pages in your site will be a specific file type, for example, Cold Fusion, HTML, or ASP documents), you can set document preferences that automatically create new documents of the specified file type.

To view or set new document preferences, choose Edit > Preferences or Dreamweaver > Preferences (Mac OS X), then click the New Document category.

To set new document preferences:
  1. Choose Edit > Preferences or Dreamweaver > Preferences (Mac OS X).
  2. In the Preferences dialog box, under Category select New Document.
  3. Set the options you want to apply:
    • To set a default document type, under Default Document Type pop-up menu, select a document type on which to base new pages you create in the site.
    • To set the default file extension for the Dreamweaver documents you have to edit the document type XML file. Click the associated link in the New Document preferences.
    • To set encoding for documents, use the Default Encoding pop-up menu. For example, you would choose Western (Latin1) to render pages based on English characters.

      • Default Encoding specifies the encoding to be used when a new page is created, as well as when a document is opened that does not specify any encoding. The default encoding is stored with the document in a meta tag inserted in the head of the document; it tells the browser and Dreamweaver how the document should be decoded and what fonts should be used to display the decoded text. For example:

      If you specify Western (Latin1), this meta tag is inserted: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">. Dreamweaver displays the document using the fonts you specify in Fonts Preferences for the Western (Latin1) encoding; a browser displays the document using the fonts the browser user specifies for the Western (Latin1) encoding.

      If you specify Japanese (Shift JIS), this meta tag is inserted: <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">. Dreamweaver displays the document using the fonts you specify for the Japanese encodings; a browser displays the document using the fonts the browser user specifies for the Japanese encodings.

    • Check the Show New Document Dialog on Control+N (Windows) or on Command+N (Macintosh), to automatically create a new document of the default document type when you use the key command.
    • Check the Make Document XHTML Compliant check box to set this option. This option applies to HTML and most dynamic document types.
To change the encoding of the current document:

Choose Modify > Page Properties and then select an encoding from the Document Encoding pop-up menu.

Related topic:

Setting Fonts preferences


Cleaning up Microsoft Word HTML

In Dreamweaver, you can open or import documents saved by Microsoft Word as HTML files, then use the Clean Up Word HTML command to remove the extraneous HTML code generated by Word. The code that Dreamweaver removes is primarily used by Word to format and display documents in Word and is not needed to display the HTML file. Retain a copy of your original Word (.doc) file as a backup, because you may not be able to reopen the HTML document in Word once you’ve applied the Clean Up Word HTML feature. The Clean Up Word HTML command is available for documents saved as HTML files by Word 97 or later.

To clean up HTML or XHTML that was not generated by Microsoft Word, see Cleaning up your code.

To clean up Word HTML:
  1. In Microsoft Word, save your document as an HTML file.
  2. Open the HTML document in Dreamweaver using either of the following methods:
    • Choose File > Import > Import Word HTML and select a file to open.

      • Dreamweaver opens the file and then automatically opens the Clean Up Word HTML dialog box.

    • Choose File > Open and select a file to open.

      • An HTML Corrections log file is automatically generated if Warn when Fixing or Removing Tags is selected in HTML Rewriting preferences. This is not part of the Clean Up Word HTML feature. Click Continue to exit the dialog box. Then, in Dreamweaver, choose Commands > Clean Up Word HTML.

  3. With either of these methods, there may be a slight delay while Dreamweaver attempts to determine which version of Word was used to save the file. If Dreamweaver is unable to determine this, select the correct version using the pop-up menu.
  4. Choose which options the Clean Up Word HTML feature should use. The Basic tab displays the following options:
    • Remove all Word Specific Markup removes all Word-specific HTML, including XML from html tags, Word custom meta data and link tags in the head of the document, Word XML markup, conditional tags and their contents, and empty paragraphs and margins from styles. You can select each of these options individually using the Detailed tab.
    • Clean up CSS removes all Word-specific CSS, including inline CSS styles when possible (where the parent style has the same style properties), style attributes beginning with “mso,” non-CSS style declarations, CSS style attributes from tables, and all unused style definitions from the head. You can further customize this option using the Detailed tab.
    • Clean up <font> Tags removes HTML tags, converting the default body text to size 2 HTML text.
    • Fix Invalidly Nested Tags removes the font markup tags inserted by Word outside the paragraph and heading (block-level) tags.
    • Set Background Color allows you to enter a hexadecimal value to set the background color of your document. If you do not set a background color, your Word HTML document will have a gray background. The default hexadecimal value set by Dreamweaver is white.
    • Apply Source Formatting applies the source formatting options you specify in HTML Format preferences and SourceFormat.txt to the document.
    • Show Log on Completion displays an alert box with details about the changes made to the document as soon as the cleanup is finished.
  5. Click OK.

    6. Depending on the size of your document and the number of options selected, it may take several seconds to complete the cleanup. The preferences you entered are automatically saved as the default Clean Up Word HTML settings.


Selecting Page Properties options

Use the Page Properties dialog box to specify a variety of options for the page.

To open the Page Properties dialog box, choose Modify > Page Properties.

Title specifies the page title that appears in the title bar of the Document window and most browser windows. See Changing the document title.

Background Image and Background specify a background image and background color for the page. See Setting a background image or background page color.

Text and Links define default colors for text, links, visited links, and active links. See Working with colors. You can also control these colors using CSS style sheets; see Applying a custom (class) CSS style.

Left Margin and Top Margin specify the sizes of page margins in the body tag, for Microsoft Internet Explorer only. Netscape Navigator ignores these values, using Margin Width and Margin Height instead. For best cross-browser results, provide margin values for both browsers instead of just one browser; fill in all four margin values instead of just two. To ensure that no margins appear in either browser, set all four values to 0. Dreamweaver doesn’t display page margins in the Document window; to see the margins, use Preview in Browser.

Margin Width and Margin Height specify the sizes of page margins in the body tag, for Netscape Navigator only. Internet Explorer ignores these values, using Left Margin and Top Margin instead. For best cross-browser results, provide margin values for both browsers instead of just one browser; fill in all four margin values instead of just two. To ensure no margins in both browsers, set all four values to 0. Dreamweaver doesn’t display page margins in the Document window; use Preview in Browser to see the margins.

Document Encoding specifies the encoding used for characters in the document. For English and Western European languages, choose Western. Additional options include Central European, Cyrillic, Greek, Icelandic, Japanese, Traditional Chinese, Simplified Chinese, and Korean. If an option for the encoding you want is not available, choose Other to create a document with the encoding your operating system is using. All Asian languages use double-byte encoding.

To change the fonts that Dreamweaver uses to display each encoding, choose Edit > Preferences or Dreamweaver > Preferences (Mac OS X) and select New Document. Note that the fonts you select in the New Document preferences do not affect how visitors see your pages; visitors specify their own fonts (for a given encoding) in their web browsers. For more information, see Setting Fonts preferences.

Tracing Image specifies an image to use as a guide for copying a design. See Using a tracing image. This image is for reference only, and does not appear when the document is displayed in a browser.

Image determines the opacity of the tracing image, from completely transparent to completely opaque.

Document Folder displays the folder in which the current document is saved, if it has been saved.

Site Folder displays the path of the local root folder for the site in which the current document is saved, if it has been saved. See Setting up a Dreamweaver site.


Setting Invisible Elements preferences

Use Invisible Elements preferences to specify which kinds of elements will be visible when you select View > Visual Aids > Invisible Elements. (For more information about invisible elements, see About invisible elements.)

To change Invisible Elements preferences:
  1. Choose Edit > Preferences or Dreamweaver > Preferences (Mac OS X), then click Invisible Elements.
  2. Select which elements should be made visible. A check mark next to the name of the element in the dialog box means the element is visible when View > Visual Aids > Invisible Elements is selected.

These are the invisible elements whose markers you can show or hide:

Named Anchors displays an icon that marks the location of each named anchor (a name = "") in the document.

Scripts displays an icon that marks the location of JavaScript or VBScript code in the body of the document. Select the icon to edit the script in the Property inspector or to link to an external script file.

Comments displays an icon that marks the location of HTML comments. Select the icon to see the comment in the Property inspector.

Line Breaks displays an icon that marks the location of each line break (BR). This option is deselected by default.

Client-Side Image Maps displays an icon marking the location of each client-side image map in the document.

Embedded Styles displays an icon showing the location of CSS styles embedded in the body section of the document. If CSS styles are placed in the head section of a document, they do not appear in the Document window.

Hidden Form Fields displays an icon that marks the location of form fields that have the type attribute set to "hidden".

Form Delimiter displays a border around a form so you can see where to insert form elements. The border shows the extent of the form tag, so any form elements inside that border are properly enclosed in form tags.

Anchor Points for Layers displays an icon that marks the location of code defining a layer. The layer itself can be anywhere on the page. (Layers are not invisible elements; only the code defining the layer is invisible.) Select the icon to select the layer; you can then see the contents of the layer even if the layer is marked as hidden.

Anchor Points for Aligned Elements displays an icon showing the location of HTML code for elements that accept the align attribute. These include images, tables, ActiveX objects, plug-ins, and applets. In some cases, the code for the element may be separated from the visible object.

Visual Server Markup Tags and NonVisual Server Markup Tags display the location of server markup tags (such as Active Server Pages tags and ColdFusion tags) whose content cannot be displayed in the Document window.


Setting Meta properties

A meta tag is a head element that records information about the current page, such as the character encoding, author, copyright, or keywords. These tags can also be used to give information to the server, such as the expiration date, refresh interval, and PICS rating for the page. (PICS, the Platform for Internet Content Selection, provides a method for assigning ratings, such as movie ratings, to web pages.)

Attribute specifies whether the meta tag contains descriptive information about the page (name) or HTTP header information (http-equiv).

Value specifies the type of information you’re supplying in this tag. Some values, such as description, keywords, and refresh, are already well defined (and have their own individual Property inspectors in Dreamweaver), but you can specify practically any value (for example, creationdate, documentID, or level).

Content is the actual information. For example, if you specified level for Value, you might specify beginner, intermediate, or advanced for Content.


Setting Title properties

There is only one title property: the title of the page. The title appears in the title bar of the Document window in Dreamweaver as well as in the browser’s title bar when you view the page in most browsers. The title also appears in the toolbar. Enter the page title in the Title text box.


Setting Keywords properties

Many search-engine robots (programs that automatically browse the web gathering information for search engines to index) read the contents of the Keywords meta tag and use the information to index your pages in their databases. Because some search engines limit the number of keywords or characters they index, or ignore all keywords if you go beyond the limit, it’s a good idea to use just a few well-chosen keywords.

Enter your keywords, separated by commas, in the text box labeled Keywords.


Setting Description properties

Many search-engine robots (programs that automatically browse the web gathering information for search engines to index) read the contents of the Description meta tag. Some use the information to index your pages in their databases, and some also display the information on the search results page (instead of displaying the first few lines of your document). Some search engines limit the number of characters they index, so it’s a good idea to limit your description to a few words (for example, Pork barbecue catering in Albany, Georgia, or web design at reasonable rates for clients worldwide).

Enter descriptive text in the text box labeled Description.


Setting Refresh properties

Use the Refresh element to specify that the browser should automatically refresh your page—by reloading the current page or going to a different one—after a certain amount of time. This element is often used to redirect users from one URL to another, often after displaying a text message that the URL has changed.

Delay is the time in seconds to wait before the browser refreshes the page. To make the browser refresh the page immediately after it finishes loading, enter 0 in this text box.

Action specifies whether the browser should go to a different URL or refresh the current page, after the specified delay. To make a different URL open (rather than refreshing the current page), click the Browse button, then browse to and select the page to load.


Setting Base properties

Use the Base element to set the base URL that all document-relative paths in the page are considered relative to.

Href is the base URL. Click the Browse button to browse to and select a file, or type a path in the text box.

Target specifies the frame or window in which all linked documents should open. Choose one of the frames in the current frameset, or one of the following reserved names:

  • _blank loads the linked document in a new, unnamed browser window.
  • _parent loads the linked document into the parent frameset or window of the frame that contains the link. If the frame containing the link is not nested, then this is equivalent to _top; the linked document loads into the full browser window.
  • _self loads the linked document in the same frame or window as the link. This target is the default, so you usually don’t have to specify it.
  • _top loads the linked document in the full browser window, thereby removing all frames.


Setting Link properties

Use the Link element to define a relationship between the current document and another file. Note that the Link element in the head section is not the same thing as an HTML link between documents in the body section.

Href is the URL of the file that you are defining a relationship to. Click the Browse button to browse to and select a file, or type a path in the text box. Note that this attribute does not indicate a file that you’re linking to in the usual HTML sense; the relationships specified in a Link element are more complex.

ID specifies a unique identifier for the link.

Title describes the relationship. This attribute has special relevance for linked style sheets; for more information, see the External Style Sheets section of the HTML 4.0 specification on the World Wide Web Consortium website.

Rel specifies the relationship between the current document and the document in the Href text box. Possible values include Alternate, Stylesheet, Start, Next, Prev, Contents, Index, Glossary, Copyright, Chapter, Section, Subsection, Appendix, Help, and Bookmark. To specify more than one relationship, separate values with a space.

Rev specifies a reverse relationship (the opposite of Rel) between the current document and the document in the Href text box. Possible values are the same as those for Rel.

Previous


Preparing to Build Dynamic Sites

If you're building a dynamic web application, start by setting up an application server and connecting to a database.

This part contains the following chapters:

  • Setting Up a Web Application
  • Database Connections for ColdFusion Developers
  • Database Connections for ASP.NET Developers
  • Database Connections for ASP Developers
  • Database Connections for JSP Developers
  • Database Connections for PHP Developers


Setting Up a Web Application

This chapter describes how to configure your system to build web applications in Macromedia Dreamweaver MX.

Note: If you want to build the sample web application installed with Dreamweaver, see Developing a Web Application in Dreamweaver MX.

This chapter contains the following sections:

  • A note for Dreamweaver UltraDev 4 users
  • What you need to build web applications
  • Setting up a web server
  • Setting up an application server
  • Creating a root folder for the application
  • Defining a Dreamweaver site
  • Connecting to a database
  • Troubleshooting application server errors
Next


A note for Dreamweaver UltraDev 4 users

If you’re a Macromedia Dreamweaver UltraDev 4 user, your system is probably already configured to build web applications. If you installed Dreamweaver MX alongside UltraDev 4, then all your UltraDev sites were automatically imported into Dreamweaver. You don’t need to redefine the sites in Dreamweaver MX.

However, if an imported site contains Macromedia ColdFusion pages built using UltraDev 4 server behaviors, you must tell Dreamweaver that the site contains UltraDev-generated pages. The reason is that Dreamweaver MX looks for code patterns on the page to identify and display server behaviors in the Server Behaviors panel. For Microsoft Active Server Pages (ASP) and JavaServer Pages (JSP), Dreamweaver MX generates the same code as UltraDev, so it recognizes and displays UltraDev-generated ASP and JSP server behaviors. For ColdFusion pages, however, Dreamweaver MX generates improved and easier-to-understand code. Because Dreamweaver looks for these new code patterns by default, it does not recognize UltraDev-generated ColdFusion server behaviors. You must tell Dreamweaver to look for the UltraDev code patterns if you want to keep working with the old server behaviors.

To tell Dreamweaver to look for ColdFusion code generated by UltraDev 4:
  1. Open the Site Definition dialog box by selecting Site > Edit Sites, selecting your site, and clicking Edit.
  2. If the wizard is showing, click Advanced then select Testing Server from the Category list.

    3. The Testing Server dialog box appears.

  3. In the This Site Contains pop-up menu, choose one of the following options:
    • If you want Dreamweaver to continue generating UltraDev code for new pages, choose UltraDev 4 Pages Only.
    • If you want Dreamweaver to start using the improved code for new pages, choose Both Versions. This will incrementally upgrade the UltraDev 4 site; over time, the site will consist mostly of pages with the new server behaviors.
  4. Click OK, then click Done.

Databases connections are handled differently if you specify that your site contains UltraDev 4 pages only. For more information, see Connecting using UltraDev 4 connectivity.


What you need to build web applications

To build web applications in Dreamweaver, you need the following software:

  • A web server
  • An application server that runs on your web server, or a web server that doubles as an application server, such as Microsoft PWS or IIS

Note: In the context of web applications, the terms “web server” and “application server” refer to software, not hardware.

If you want to use a database with your application, you need the following additional software:

  • A database or database system
  • A database driver that supports your database

For information on setting up a database for your web application, see Connecting to a database.

Several web hosting companies offer plans that let you use their software to test and deploy web applications. If you’re a Windows user, you can install the required software on the same computer as Dreamweaver for development purposes. You can also install the software on a network computer (typically a Windows NT or Windows 2000 computer) so that other developers on your team can work on a project.

If you’re a Macintosh user, you can use a web hosting service or install the required software on a remote computer. If you’re a Mac OS 10.1 user, you can develop PHP sites locally using the Apache web server and PHP application server installed with your operating system. For setup information, see the following websites:

  • http://developer.apple.com/internet/macosx/php.html
  • http://www.entropy.ch/software/macosx/
  • http://www.stepwise.com/Articles/Workbench/2001-10-11.01.html


Setting up a web server

To run web applications, you need a web server. A web server is software that serves files in response to requests from web browsers. A web server is sometimes called an HTTP server. Common web servers include IIS, Netscape Enterprise Server, iPlanet Web Server, and Apache HTTP Server.

If you’re not using a web hosting service, choose a web server and install it on your local computer or on a remote computer. For more information, see the server vendor’s documentation or your system administrator.

Windows users can get a web server up and running quickly on their local computer by installing either PWS or IIS. The web server may already be installed. Check your folder structure to see if it contains a C:\Inetpub or D:\Inetpub folder. PWS and IIS create this folder during installation. If you want to install PWS or IIS, see Installing a Web Server in Windows.

ASP.NET pages only work with one web server: Microsoft IIS 5 or higher. PWS is not supported. Also, because IIS 5 is a service of the Windows 2000 and Windows XP Professional operating systems, you can only use these two versions of Windows to run ASP.NET applications. Windows 98, ME, or NT are not supported. Note, however, that you can develop (as opposed to run) ASP.NET applications on any computer running Dreamweaver MX, including the Macintosh.


Setting up an application server

To run web applications, your web server needs to work with an application server. An application server is software that helps a web server process specially marked web pages. When such a page is requested, the web server sends the page to the application server for processing before sending the page to the browser.

Common application servers include Macromedia ColdFusion MX, Macromedia JRun, Microsoft .NET Framework, PHP, IBM WebSphere, and Jakarta Tomcat. The Microsoft IIS and PWS web servers also double as ASP application servers. The application server is typically installed on the same system that runs the web server.

Here are the topics covered in this section:

  • Choosing your application server
  • Installing a ColdFusion application server
  • Installing an ASP.NET application server
  • Installing an ASP application server
  • Installing a JSP application server
  • Installing a PHP application server


Choosing your application server

Your choice of application server depends on several factors, including your budget, the server technology you want to use (ColdFusion, ASP.NET, ASP, JSP, or PHP), and your choice of web server.

Budget: Some vendors sell high-end application servers that are expensive to buy and administer. Others vendors provide easier, more cost-effective solutions (examples include Macromedia ColdFusion and JRun servers). Some application servers are built into web servers (such as Microsoft IIS and PWS) and others can be downloaded for free from the Internet (such as Jakarta Tomcat and PHP).

Server technology: Application servers use different technologies. Dreamweaver supports five server technologies: ColdFusion, ASP.NET, ASP, JSP, and PHP. For more information, see Choosing a server technology. The following table shows common application servers available for the five server technologies supported by Dreamweaver:

Server technology | Application server
ColdFusion | Macromedia ColdFusion MX
ASP.NET | Microsoft IIS 5 with .NET Framework
ASP | Microsoft IIS or PWS Sun Chili!Soft ASP
JSP | Macromedia JRun IBM WebSphere Apache Tomcat BEA WebLogic
PHP | PHP server

Web server: Your choice of application server can also depend on the web server you want to use. Make sure the application works with your web server. For example, the .NET Framework only works with IIS 5 or higher.


Installing a ColdFusion application server

To run ColdFusion pages, you need the ColdFusion application server. This server is available for Windows, Linux, Solaris, and HP-UX systems.

You can download and install a fully functional, developer edition of ColdFusion MX from the Macromedia website. A copy of ColdFusion MX Server Developer Edition is also available on the Dreamweaver CD (Windows version only).

Macintosh users can use a web hosting service with a ColdFusion plan or install ColdFusion on a remote Windows, Linux, Solaris, or HP-UX computer running a web server.

After installing the application server, create a root folder for your web application. See Creating a root folder for the application.


Installing an ASP.NET application server

To develop ASP.NET pages, you need the following software:

  • A Windows 2000 or Windows XP Professional computer running IIS 5 or later
  • The Microsoft .NET Framework, which you can download from the Microsoft website

Download the .NET Framework from the Microsoft website and follow the installation instructions on the website.

Macintosh users can use a web hosting service with an ASP.NET plan or install the .NET Framework on a remote Windows 2000 or Windows XP Professional computer running IIS 5 or later.

After installing the .NET Framework, create a root folder for your web application. See Creating a root folder for the application.


Installing an ASP application server

To develop ASP pages, you need an application server that supports Microsoft Active Server Pages 2.0. Here are some popular choices:

  • Microsoft IIS, which comes with Windows NT Server, Windows 2000, and Windows XP Professional
  • Microsoft PWS, a scaled-down version of IIS that runs in Windows 98 and NT Workstation
  • Sun Chili!Soft ASP, versions of which run on Windows, Linux, Solaris, and other platforms. For more information, see the Chili!Soft website

Windows users can install and run IIS or PWS on their local computer. For instructions, see Installing a Web Server in Windows.

Macintosh users can use a web hosting service with an ASP plan or install IIS or PWS on a remote computer.

After installing IIS or PWS, create a root folder for your web application. See Creating a root folder for the application.


Installing a JSP application server

To develop JSP pages, you need an application server that supports JavaServer Pages. Here are some popular choices:

  • Macromedia JRun for Windows, Linux, Solaris, or UNIX. You can download a trial version from the Macromedia website.
  • IBM WebSphere for various operating systems. You can download a trial version from the IBM website.
  • Tomcat for Windows and UNIX. You can download a copy of Tomcat from the Jakarta Project website.

Macintosh users can use a web hosting service with a JSP plan or install a JSP application server on a remote computer running a web server.

After installing a JSP application server, create a root folder for your web application. See Creating a root folder for the application.


Installing a PHP application server

To run PHP pages, you need the PHP application server, which is open-source software available on the web. Editions of the application server exist for Windows, Linux, UNIX, HP-UX, Solaris, and Mac OS X systems. The application server works with the following web servers: Apache, Microsoft IIS or PWS, Netscape and iPlanet servers, and almost all web servers that support the CGI interface.

You can download the PHP application server from the PHP website. For information on installing the server, see the PHP documentation, which you can also download from the PHP website.

Macintosh users can use a web hosting service with a PHP plan or install PHP on a remote computer running a web server. If you’re a Mac OS 10.1 user, you can use the PHP application server installed with your operating system. For more information, see the following websites:

  • http://developer.apple.com/internet/macosx/php.html
  • http://www.entropy.ch/software/macosx/
  • http://www.stepwise.com/Articles/Workbench/2001-10-11.01.html

After installing the PHP application server, create a root folder for your web application. See Creating a root folder for the application.


Creating a root folder for the application

After the server software is installed, create a root folder for your web application on the computer running the web server.

Make sure the folder is published by the web server—in other words, the web server can serve any file in this folder or in any of its subfolders in response to an HTTP request from a web browser. For example, on a computer running PWS or IIS, any file in the Inetpub\wwwroot folder or in any of its subfolders can be served to a web browser.


Defining a Dreamweaver site

After configuring your system to develop web applications, define a Dreamweaver site to manage your files.

Note: Macromedia HomeSite and ColdFusion Studio users can think of a Dreamweaver site as a HomeSite or Studio project.

Before you start, make sure you meet the following requirements:

  • You have access to a web server. The web server can be running on your local computer, on a remote computer such as a development server, or on a server maintained by a web hosting company. See Setting up a web server.
  • An application server is installed and running on the system running your web server. See Setting up an application server.
  • You created a root folder for your web application on the system running your web server. For more information, see Creating a root folder for the application.

Defining a Dreamweaver site for your web application consists of three steps:

  1. Define a folder located on your hard disk as a Dreamweaver local folder to store working copies of your site files (see Defining a local folder).
  2. Define a folder located on the computer running your web server as a Dreamweaver remote folder (see Defining a remote folder).
  3. Specify where Dreamweaver should send dynamic pages to be processed while you work (see Specifying where dynamic pages can be processed).

After the Dreamweaver site is defined, you can start building your web application.


Defining a local folder

You can define a Dreamweaver local folder for each new web application you create. The local folder is the folder you use to store working copies of site files on your hard disk. If you don’t define a local folder, Dreamweaver will not work properly.

Defining a local folder also gives you the ability to manage your files and to transfer files to and from your web server at the click of a button.

To define a Dreamweaver local folder:
  1. Create a folder on your local disk to store working copies of your files.

    2. You may want to create subfolders to store image files and other assets.

  2. In Dreamweaver, choose Site > New Site.

    3. The Site Definition dialog box appears.

  3. If the wizard is showing, click Advanced then select Local Info from the Category list (it should be the default).
  4. In the Site Name box, enter a descriptive name for your Dreamweaver site.
  5. In the Local Root Folder box, specify the folder you created in Step 1.

    6. You can enter a path or click the folder icon to browse to and select the folder.

  6. If you want, complete the other options in the Local Info category (they are not required to make the site work).

    7. For more information on these options, see Setting Local Info category options.

Leave the Site Definition dialog box open. You must specify a remote folder next. See Defining a remote folder.


Defining a remote folder

After defining a local folder, you can define a remote folder for your Dreamweaver site. The remote folder is the folder you created for your web application on the web server (see Creating a root folder for the application).

You don’t need to define a remote folder if the folder you defined in Defining a local folder can double as the root folder for your web application. (This implies that the web server is running on your local computer.)

To define a Dreamweaver remote folder:
  1. If the Site Definition dialog box is not open, open it by choosing Site > Edit Sites, selecting your site, and clicking Edit.

    2. The Site Definition dialog box appears.

  2. If the wizard is showing, click Advanced then select Remote Info from the Category list.

    3. The Remote Info dialog box appears.

  3. In the Access pop-up menu, choose one of the following options: Local/Network, FTP, or RDS.

    4. Your choice tells Dreamweaver how you want to transfer files between your local folder and remote folder.

    Note: To use RDS, the remote folder must be on a computer running ColdFusion.

    You can also send your files to a SourceSafe application by choosing SourceSafe Database. (SourceSafe is used by developers for file version control.) If you choose this option, you need to define a separate folder. For instructions, see Specifying where dynamic pages can be processed.

  4. After choosing an access method, set the access options as appropriate.

    5. For more information, see Setting Remote Info category options.

Leave the Site Definition dialog box open. You need to define a folder to process dynamic pages next.See Specifying where dynamic pages can be processed.


Specifying where dynamic pages can be processed

After defining the remote folder in Dreamweaver, specify a folder where dynamic pages can be processed. Dreamweaver uses this folder to generate dynamic content and connect to databases while you work.

Typically, you specify the root folder you created on the web server (see Creating a root folder for the application) because a web server and application server work together.

Note: The root folder can be local or remote, depending on where your web server is running.

To specify where Dreamweaver can get dynamic pages processed:
  1. If the Site Definition dialog box is not open, open it by choosing Site > Edit Sites, selecting your site, and clicking Edit.

    2. The Site Definition dialog box appears.

  2. If the wizard is showing, click Advanced then select Testing Server from the Category list.

    3. The Testing Server dialog box appears. Dreamweaver needs the services of a testing server to generate and display dynamic content while you work. The testing server can be your local computer, a development server, a staging server, or a production server. As long as it can process the kind of dynamic pages you plan to develop, the choice doesn’t matter.

  3. Complete the dialog box and click OK.

    4. For more information, see Setting the Testing Server category options.

Related topics

About the URL prefix

A note for Dreamweaver UltraDev 4 users


About the URL prefix

You must specify a URL prefix so Dreamweaver MX can use the services of a testing server to display data and connect to databases while you work. Dreamweaver uses the testing server to generate the dynamic content displayed in the Live Data window and in your browser when you use the Preview in Browser command.

Dreamweaver also uses the testing server to establish connections to a database at design time. Dreamweaver uses the design-time connection to provide you with useful information about the database, such as the names of the tables in your database and the names of the columns in your tables.

A URL prefix comprises the domain name and any of your website’s home directory’s subdirectories or virtual directories.

Note: This section uses the terminology used in Microsoft IIS. The terminology may vary from server to server, but the same concepts apply to most web servers.

The home directory is the folder on the server mapped to your site’s domain name. Suppose the folder you want to use to process dynamic pages is c:\sites\company\, and this folder is your home directory (that is, this folder is mapped to your site’s domain name—for example, www.mystartup.com). In that case, the URL prefix is http://www.mystartup.com/.

If the folder you want to use to process dynamic pages is a subfolder of your home directory, simply add the subfolder to the URL. Suppose your home directory is c:\sites\company\, your site’s domain name is www.mystartup.com, and the folder you want to use to process dynamic pages is c:\sites\company\inventory. Enter the following URL prefix:

http://www.mystartup.com/inventory/

If the folder you want to use to process dynamic pages is not your home directory or any of its subdirectories, you must create a virtual directory.

A virtual directory is a folder not physically contained in the home directory of the server even though it appears to be in the URL. To create a virtual directory, specify an alias for the folder’s path in the URL. Suppose your home directory is c:\sites\company, your processing folder is d:\apps\inventory, and you define an alias for this folder called warehouse. Enter the following URL prefix:

http://www.mystartup.com/warehouse/

Localhost is a term that refers to the home directory in your URLs when the client (usually a browser, but in this case Dreamweaver) runs on the same system as your web server. Suppose Dreamweaver is running on the same system as the web server, your home directory is c:\sites\company, and you defined a virtual directory called warehouse to refer to the folder you want to use to process dynamic pages. Enter the following URL prefix:

http://localhost/warehouse/

To determine your domain name and home directory in PWS and IIS 4.0, click the Main icon in Personal Web Manager and note the home page specified in the Publishing area.

Related topic

Specifying where dynamic pages can be processed


Connecting to a database

If you want to use a database with your web application, you must first connect to it. For a general discussion of database connections, see Understanding database connections.

Dreamweaver MX handles database connections differently depending on your choice of server technology. See the following chapters:

  • Database Connections for ColdFusion Developers
  • Database Connections for ASP.NET Developers
  • Database Connections for ASP Developers
  • Database Connections for JSP Developers
  • Database Connections for PHP Developers


Troubleshooting application server errors

This section describes some common application server errors and ways to troubleshoot them.

For more information on Macromedia application servers, visit the ColdFusion and JRun Support Centers on the Macromedia website.

For more information on other application servers, see the server’s documentation, visit the vendor’s website, or contact the vendor’s technical support department.

This section covers the following server errors:

  • ColdFusion - 405 Method Not Allowed
  • JRun - Syntax Error: Identifier expected instead of this token
  • JRun - Error 2140
  • WebSphere - Error 403 (forbidden by rule)
  • WebSphere - Error 404 (File Not Found)


ColdFusion - 405 Method Not Allowed

This error occurs with ColdFusion 4 or 5 when you verify your installation. It might be caused by having the FrontPage version of PWS. Make sure you have the full version of PWS, not the FrontPage version.

If you have the correct version of PWS, check the virtual directory name for cfdocs and cfide. In PWS, click the Advanced icon, choose the virtual directory from the list, and click Edit Properties. In the Alias box, remove any commas from the virtual directory name.

You might also want to store your database files outside the web server’s root folder. Web servers can sometimes cache files and place exclusive locks on them, causing write-permission problems. Storing your databases outside the web server’s root folder also provides an additional measure of security.


JRun - Syntax Error: Identifier expected instead of this token

This error occurs when trying to process a JSP page named default.jsp.

The word “default” is a reserved keyword in JRun. To fix the problem, rename the page index.jsp or home.jsp.


JRun - Error 2140

This error may occur for several reasons:

  • The license key was not entered correctly. Cut and paste the license key from your purchase confirmation e-mail to avoid any typing errors. Also make sure there is no space following the license key.
  • The jsm-default was not properly installed as an NT service.

For more information, see article 12015 at the JRun support center.


WebSphere - Error 403 (forbidden by rule)

This error occurs when a servlet or JSP is invoked. Here are possible causes and solutions:

  • You used an incorrect filename when invoking the JSP file. Verify the filename of the JSP file. Correct any errors in the spelling, capitalization, or extension of the filename. Make sure that your JSP filename ends with .jsp.
  • If you’re not using the default port number for your IBM HTTP Server for AS/400 instance (port 80), then you didn’t add the host:port as an alias for your virtual host. To view your virtual hosts aliases, click the Advanced properties tab of your virtual host in the Administrative Console.
  • There is no JSP-enabling servlet for the web application in which the JSP file resides. Verify that the JSP-enabling servlet has been added to the web application in which the JSP resides. Create the JSP-enabling servlet if necessary.
  • If your servlet was created within a web application, your servlet needs to have a uniform resource indicator (URI) path. Verify that the URI path is correct.
  • The Pass or Redirect directives in the active HTTP server configuration are stopping the JSP or servlet from invoking. Verify that the Pass and Redirect directives in the active IBM HTTP Server for AS/400 configuration are correct.

For more information, see the FAQ on the IBM website.

For other problems with WebSphere, see the IBM WebSphere Support Center.


WebSphere - Error 404 (File Not Found)

This error occurs when invoking a servlet or JSP. Here are possible causes and solutions:

  • Verify that the JSP or servlet URL is not misspelled.
  • The application server process does not have sufficient authority to access the folder containing the JSP-generated Java code and class file. Verify that QEJBSVR has authority to the /QIBM/UserData/WebASAdv/default/temp or /QIBM/UserData/WebASAdv/<username>/temp folder structure.
  • This error may be occurring because a class used by your servlet cannot be found. Verify all the classes that your servlet requires are in the web application classpath variable.
  • This error might be caused by a misplaced Pass directive in the HTTP configuration file. If you have the (PASS /*) Pass directive before the Service directives, the Service directive will never be referenced. To correct this problem, either move the Pass directive to the end of your HTTP configuration entries or make it more specific (for example, PASS /*.html). For more information about HTTP configuration directives, see “Editing the HTTP configuration file to add server directives” in the WebSphere documentation.

For more information, see the IBM WebSphere Support Center.


Reference

This section provides information about the dialog box introduced in this chapter.


Setting the Testing Server category options

The purpose of this dialog box is to specify a testing server Dreamweaver MX can use to process dynamic pages for authoring purposes.

Dreamweaver needs the services of a testing server to generate and display dynamic content while you work. The testing server can be your local computer, a development server, a staging server, or a production server. As long as it can process the kind of dynamic pages you plan to develop, the choice doesn’t matter.

Make sure you define a local and remote folder before completing this dialog box. For instructions, see Defining a local folder and Defining a remote folder. You can often use the settings of your remote folder for your testing server because dynamic pages placed in the remote folder can normally be processed by an application server.

Procedure
  1. Select a server technology.
  2. If your site contains legacy ColdFusion pages with server behaviors generated by Dreamweaver UltraDev 4, choose one of the following items in the This Page Contains box:
    • If you want Dreamweaver to generate improved ColdFusion code in any new page and ignore the UltraDev-generated ColdFusion code in existing pages, choose Dreamweaver MX Files Only. If you choose this option, Dreamweaver will not recognize UltraDev 4 server behaviors and will not display them in the Server Behaviors panel.
    • If you want Dreamweaver to continue generating the same ColdFusion code as UltraDev, choose UltraDev 4 Pages Only.
    • If you want Dreamweaver to generate improved ColdFusion code for any new page, choose Both Versions. You can use this option to gradually upgrade the pages in the site.

      • For more information, see A note for Dreamweaver UltraDev 4 users.

  3. Accept the default Testing Server settings, or enter different settings.

    4. By default, Dreamweaver assumes an application server is running on the same system as your web server. If you defined a remote folder in the Remote Info category in the Site Definition dialog box, and if an application server runs on the same system as the remote folder (including your local computer), accept the default settings in the Testing Server category.

    If you did not define a remote folder in the Remote Info category, the Testing Server category defaults to the local folder you defined in the Local Info category. You can leave this setting alone only if you meet the following two conditions:

    • Your web server and application server both run on your local computer. For example, you’re a ColdFusion developer running both PWS and ColdFusion on your local Windows 98 system.
    • Your local root folder is a subfolder of your home directory. For example, if you’re using PWS or IIS, your local root folder is a subfolder of the c:\Inetpub\wwwroot\ folder, or the folder itself.

      • If your local root folder is not a subfolder of your home directory, you must define the local root folder as a virtual directory in your web server.

      For more information on home and virtual directories, see About the URL prefix.

      The application server can run on a different system than your remote site. For example, if the Access option you selected in the Remote Info category is SourceSafe, then you must specify a different server in the Testing Server category.

  4. In the URL Prefix box, enter the URL that users type in their browsers to open your web application, but do not include any filename.

    5. Suppose your application’s URL is http://www.macromedia.com/mycoolapp/start.jsp. In this case, you would enter the following URL prefix: http://www.macromedia.com/mycoolapp/.

    If Dreamweaver runs on the same system as your web server, you can use the term localhost as a stand-in for your domain name. For example, suppose your application’s URL is as follows:

    http://buttercup_pc/mycoolapp/start.jsp

    You could then enter the following URL prefix:

    http://localhost/mycoolapp/

    For more information, see About the URL prefix.

  5. Click OK, then click Done.

Dreamweaver adds the new site to your list of sites.

Related topics

Specifying where dynamic pages can be processed

About the URL prefix

Previous


Database Connections for ColdFusion Developers

This chapter describes how to connect to databases when developing Macromedia ColdFusion applications with Macromedia Dreamweaver MX. For ColdFusion applications, you connect in Dreamweaver by choosing a ColdFusion data source defined in ColdFusion Administrator, the server’s management console.

The chapter assumes you have set up a ColdFusion web application (see Setting Up a Web Application). It also assumes a database is set up on your local computer or on a system to which you have network or FTP access.

This chapter contains the following topics:

  • Connecting to a database
  • Editing or deleting a database connection
  • Connecting using UltraDev 4 connectivity

To learn more about databases and database connections, see Beginner’s Guide to Databases.

Next


Connecting to a database

When developing a ColdFusion web application in Dreamweaver, you connect to a database by choosing a ColdFusion data source defined in ColdFusion Administrator, the server’s management console.

Note: If you’re running ColdFusion 5 on a Windows computer, you can also set up a data source name (DSN) on the computer. System DSNs are automatically treated as data sources by ColdFusion 4 or 5.

Before you can connect to a database, make sure Dreamweaver knows where to find the ColdFusion data sources. To retrieve the ColdFusion data sources at design time, Dreamweaver places scripts in a folder on the computer running ColdFusion. You must specify this folder in the Testing Server category of the Site Definition dialog box. For more information, see Specifying where dynamic pages can be processed.

Next, you must create a ColdFusion data source in ColdFusion Administrator (if one doesn’t already exist). For more information, see Creating a ColdFusion data source.

After creating a ColdFusion data source, you can use it in Dreamweaver to connect to the database. For more information, see Connecting to the database in Dreamweaver.

The section assumes you’re using Dreamweaver MX connectivity, not Dreamweaver UltraDev 4 connectivity. Database connections are handled differently in UltraDev 4. For more information, see Connecting using UltraDev 4 connectivity.


Creating a ColdFusion data source

Before you can connect to a database, you must create a ColdFusion data source in ColdFusion Administrator, the server’s management console.

Note: If you’re running ColdFusion 5 on a Windows computer, you can also set up a DSN on the computer. System DSNs are automatically treated as data sources by ColdFusion 5. For more information, see Setting Up a DSN in Windows.

To create a ColdFusion data source:
  1. In the Databases panel (Window > Databases) in Dreamweaver, click the Modify Data Sources icon (the second icon from the right on the panel toolbar).

    2. ColdFusion Administrator opens in a browser.

  2. Log in to ColdFusion Administrator and create the data source.

    3. For instructions, see the ColdFusion documentation.

You must provide certain parameter values to create the ColdFusion data source. For the parameter values specific to your database driver, see the driver vendor’s documentation or consult your system administrator.

Once you create a ColdFusion data source, you can use it in Dreamweaver. For more information, see Connecting to the database in Dreamweaver.


Connecting to the database in Dreamweaver

After creating a ColdFusion data source in ColdFusion Administrator (see Creating a ColdFusion data source), you can use it to connect to the database in Dreamweaver.

Open any ColdFusion page in Dreamweaver, then open the Databases panel (Window > Databases). Your ColdFusion data sources appear in the panel.

If the data sources don’t appear, make sure Dreamweaver knows where to find the ColdFusion data sources. In the Testing Server category of the Site Definition dialog box, specify the site’s root folder on the computer running ColdFusion. For more information, see Specifying where dynamic pages can be processed.


Editing or deleting a database connection

You edit or delete ColdFusion data sources in ColdFusion Administrator. In the Databases panel (Window > Databases) in Dreamweaver, click the Modify Data Sources icon (the second icon from the right on the panel toolbar). ColdFusion Administrator opens in a browser. Log in and modify the data source. For instructions, see the ColdFusion documentation.

To avoid getting errors after deleting or renaming a ColdFusion data source, update every recordset that uses the old data source in Dreamweaver by double-clicking the name of the recordset in the Bindings panel and choosing a new data source.


Connecting using UltraDev 4 connectivity

This section describes how to connect to a database if you built your ColdFusion application using Dreamweaver UltraDev 4 server behaviors, or if you’re building it in Dreamweaver MX using UltraDev 4 server behaviors. For more information, see A note for Dreamweaver UltraDev 4 users.

The section uses the term “UD4 ColdFusion” to refer to UltraDev 4 connectivity.

This section covers the following topics:

  • Connection requirements
  • Creating a regular UD4 ColdFusion connection
  • Creating an advanced UD4 ColdFusion connection (Macintosh users)
  • Editing or deleting a UD4 ColdFusion connection


Connection requirements

Before creating a UD4 ColdFusion database connection, you must have the following:

  • A Dreamweaver site that specifies that the site contains only UltraDev 4 files. For more information, see Specifying where dynamic pages can be processed
  • A database set up on your local computer or on a system to which you have network or FTP access
  • An appropriate database driver installed on the computer running ColdFusion
  • A ColdFusion data source defined for the database. For more information, see Creating a ColdFusion data source


Creating a regular UD4 ColdFusion connection

This section describes how to create a regular database connection if you’re using UltraDev 4 connectivity.

UltraDev 4’s ColdFusion connectivity on the Macintosh does not support stored procedures in databases other than SQL Server 7.0. If you’re a Macintosh user and want to use a stored procedure in a database other than SQL Server 7.0, create an advanced ColdFusion connection using JDBC to connect to the database at design time. For procedures, see Creating an advanced UD4 ColdFusion connection (Macintosh users).

To create a regular UD4 ColdFusion connection:
  1. Open a ColdFusion page in Dreamweaver, then open the Databases panel (Window > Databases).
  2. Click the plus (+) button on the panel and select Data Source Name from the pop-up menu.
  3. If this is the first connection you create for the site, Dreamweaver prompts you for your ColdFusion RDS (Remote Development Services) user name and password.

    4. After you log in, Dreamweaver connects to the server, retrieves the ColdFusion data sources, and displays the Data Source Name dialog box.

  4. Complete the dialog box and click OK.

    5. For instructions, see Setting the Data Source Name dialog box options.

The new connection appears in the Databases panel.


Creating an advanced UD4 ColdFusion connection (Macintosh users)

UltraDev ColdFusion connectivity on the Macintosh does not support stored procedures in databases other than SQL Server 7.0. If you’re a Macintosh user and want to use a stored procedure in a database other than SQL Server 7.0, you must create an advanced ColdFusion connection.

To create an advanced ColdFusion database connection in Dreamweaver:
  1. Open a ColdFusion page in Dreamweaver, then open the Databases panel (Window > Databases).
  2. Click the plus (+) button on the panel and select Data Source Name - Advanced from the pop-up menu.
  3. If this is the first connection you create for the site, Dreamweaver prompts you for your ColdFusion RDS user name and password.

    4. After you log in, Dreamweaver connects to the server, retrieves the ColdFusion DSNs, and displays the Data Source Name - Advanced dialog box.

  4. Complete the dialog box and click OK.

    5. For instructions, see Setting the Data Source Name - Advanced dialog box options.

The new connection appears in the Databases panel.


Editing or deleting a UD4 ColdFusion connection

When you create a database connection, Dreamweaver stores the connection information in a file in the Connections subfolder in the site’s local root folder. Dreamweaver does not actually create a database connection for your ColdFusion application until you define a recordset for a page in the application (see Defining a recordset). At that point, Dreamweaver writes code in the file to establish the connection, and inserts an include directive in your page. At runtime, the server inserts the connection code in your document.

To update a connection:
  1. Open a ColdFusion page in Dreamweaver MX, then open the Databases panel (Window > Databases).

    2. A list of connections appears in the panel.

  2. Right-click (Windows) or Control-click (Macintosh) the connection and choose Edit Connection from the pop-up menu.

    3. The dialog box you used to create the connection appears.

  3. Make the changes and click OK.

Dreamweaver automatically updates the include file, which updates all the pages in the site that use the connection.

To delete a connection:
  1. Open a ColdFusion page in Dreamweaver, then open the Databases panel (Window > Databases).

    2. A list of connections appears in the panel.

  2. Right-click (Windows) or Control-click (Macintosh) the connection and choose Delete Connection from the pop-up menu.

    3. The dialog box you used to create the connection appears.

  3. Confirm that you want to delete the connection.

To avoid getting errors after deleting a connection, update every recordset that uses the old connection by double-clicking the name of the recordset in the Bindings panel and choosing a new connection.


Setting the Data Source Name dialog box options

The purpose of this dialog box is to define a ColdFusion database connection when building a site with the ColdFusion server model of Dreamweaver UltraDev 4.

Procedure
  1. Enter a name for the new connection.

    2. Note: Do not use any spaces or special characters in the name.

  2. Specify the location of the data source you want to use.
    • If the data source is defined on the same computer as Dreamweaver, select the Using DSN On This Machine option.
    • If the data source is not defined on the same computer as Dreamweaver, select the Using DSN On Testing Server option.

      • Macintosh users can ignore this step because all database connections use the application server.

  3. Select the ColdFusion data source from the list.
  4. If required, complete the User Name and Password boxes.
  5. If you want, restrict the number of database items Dreamweaver retrieves at design time by clicking Advanced and entering a schema or catalog name.

    6. For more information, see Restricting database information displayed in Dreamweaver.

    Note: You cannot create a schema or catalog in Microsoft Access.

  6. Click Test.

    7. Dreamweaver attempts to connect to the database. If the connection fails, double-check the data source name, password, and user name. If the connection still fails, check the settings for the folder Dreamweaver uses to process dynamic pages (see Specifying where dynamic pages can be processed).

  7. Click OK.

    8. The new connection appears in the Databases panel.

Related topic

Creating a regular UD4 ColdFusion connection


Setting the Data Source Name - Advanced dialog box options

The purpose of this dialog box is to define a ColdFusion database connection if you’re a Macintosh user building a site with the ColdFusion server model of UltraDev 4 and you want to use a stored procedure in a database other than SQL Server 7.0.

If you want to use a stored procedure in a SQL Server 7.0 database, then use the normal Data Source Name dialog box. For instructions, see Creating a regular UD4 ColdFusion connection.

Procedure
  1. Enter a name for the new connection.

    2. Note: Do not use any spaces or special characters in the name.

  2. Select the appropriate DSN from the list.
  3. If required, complete the User Name and Password boxes in the Data Source Name - Advanced dialog box.

    4. User name and password information for each ColdFusion data source is usually kept in the ColdFusion Administrator.

  4. Select the Using JDBC Driver on This Machine option.
  5. Define the JDBC connection parameters.

    6. For more information, see About JDBC connection parameters.

  6. If you want, restrict the number of database items Dreamweaver retrieves at design time by clicking Advanced and entering a schema or catalog name.

    7. For more information, see Restricting database information displayed in Dreamweaver.

    Note: You cannot create a schema or catalog in Microsoft Access.

  7. Click Test.

    8. Dreamweaver attempts to connect to the database. If the connection fails, double-check the JDBC connection parameters.

  8. Click OK.

    9. The new connection appears in the Databases panel.

Related topic

Creating an advanced UD4 ColdFusion connection (Macintosh users)

Previous


Database Connections for

Next

Database Connections for
ASP.NET Developers

To use a database with an ASP.NET application, you need to create a database connection in Macromedia Dreamweaver MX. This chapter describes how to create the database connection.

Note: If you’re developing Microsoft Active Server Pages (ASP) applications, see Database Connections for ASP Developers.

The chapter assumes you have set up an ASP.NET application (see Setting Up a Web Application). It also assumes a database is set up on your local computer or on a system to which you have network or FTP access.

This chapter contains the following sections:

  • Connecting to a database
  • Editing or deleting a database connection

To connect to the sample database installed with Dreamweaver, see Setup for Sample ASP.NET Site. To learn more about databases and database connections, see Beginner’s Guide to Databases.

Next


Connecting to a database

This section describes how to connect to a database when developing an ASP.NET application in Dreamweaver MX.

Before you can connect to a database, you must obtain an OLE DB provider for your database. If you want to connect to a Microsoft SQL Server database, you can use the Managed Data Provider for SQL Server that is supplied by the .NET Framework. For more information, see Obtaining an OLE DB provider for your database.

Once the database provider is installed, you can use it to connect to the database. For instructions, see the following sections:

  • Creating a database connection in Dreamweaver
  • Creating a connection using Data Link Properties

Related topic

Sample OLE DB connection parameters for ASP.NET


Obtaining an OLE DB provider for your database

An ASP.NET application must connect to a database through an OLE DB provider. The provider acts as an interpreter that lets an ASP.NET application communicate with a database. For more information on OLE DB and the role of database providers, see Interfacing with the database.

If you want to connect to a Microsoft SQL Server database, you can use the Managed Data Provider for SQL Server that comes with the .NET Framework. This provider, which is optimized for SQL Server and is very fast, is installed when you install the .NET Framework.

If you want to connect to a database other than SQL Server, make sure an OLE DB provider for your database is installed on the computer running the .NET Framework. You automatically installed an OLE DB provider for Microsoft Access when you downloaded and installed the Microsoft Data Access Components (MDAC) 2.7 package on the computer.

Note: Installing MDAC 2.7 is highly recommended when you install the .NET Framework. For more information, see Installing an ASP.NET application server.

You can download OLE DB providers for Oracle9i and Oracle8i databases from the Oracle website (registration is required). You can also purchase OLE DB providers from third-party vendors.

Once you have a provider for your database, you can use it to create database connections in Dreamweaver. See Creating a database connection in Dreamweaver.


Creating a database connection in Dreamweaver

After obtaining an OLE DB provider for your database (see Obtaining an OLE DB provider for your database), you can use it to create a database connection in Dreamweaver.

Another option is to use the Microsoft Data Link Properties dialog box to help you create the connection. For instructions, see Creating a connection using Data Link Properties.

To create a database connection for ASP.NET:
  1. Open an ASP.NET page in Dreamweaver, then open the Databases panel (Window > Databases).

    2. The panel displays the connections defined for the site.

  2. Click the plus (+) button on the panel and select OLE DB Connection or SQL Server Connection from the pop-up menu.

    3. Note: Select SQL Server Connection only if you want to connect to a Microsoft SQL Server database.

    The OLE DB Connection or SQL Server Connection dialog box appears.

  3. Complete the dialog box and click OK.

    4. For more information, see the following:

    • Setting the OLE DB Connection dialog box options
    • Setting the SQL Server Connection dialog box options

The new connection appears in the Databases panel.


Creating a connection using Data Link Properties

After obtaining an OLE DB provider for your database (see Obtaining an OLE DB provider for your database), you can create a database connection by using the Data Link Properties dialog box in Windows.

Important: You can use this method only if the OLE DB provider you want to use is installed on the same Windows computer as Dreamweaver.

To create a database connection using Data Link Properties:
  1. Open an ASP.NET page in Dreamweaver, then open the Databases panel (Window > Databases).

    2. The panel displays the connections defined for the site.

  2. Click the plus (+) button on the panel and select OLE DB Connection from the pop-up menu.

    3. The OLE DB Connection dialog box appears.

  3. Click the Build button.

    4. The Data Link Properties dialog box appears. This Windows dialog box displays the OLE DB providers currently on the Windows computer running Dreamweaver.

  4. Complete the Data Link Properties dialog box and click OK.

    5. Dreamweaver inserts a connection string in the OLE DB Connection dialog box.

  5. Click Test.

    6. Dreamweaver attempts to connect to the database. If the connection fails, double-check the connection string. If the connection still fails, check the settings for the folder Dreamweaver uses to process dynamic pages (see Specifying where dynamic pages can be processed).

  6. Click OK.

    7. The new connection appears in the Databases panel.


Sample OLE DB connection parameters for ASP.NET

An OLE DB connection string combines all the information your ASP.NET application needs to connect to a database. Dreamweaver inserts this string in your page’s server-side scripts for later processing by your application server.

Dreamweaver provides you with string templates to create OLE DB connection strings for ASP.NET applications (see Creating a database connection in Dreamweaver). To create a connection string, you replace placeholders in the template with the requested parameter values. This section gives sample parameters for Microsoft Access and SQL Server databases.

Note: For the parameter values specific to other databases, see the database vendor’s documentation or consult your system administrator.

Case 1: You have the .NET Framework on your local computer and you want to connect to a Microsoft Access database called sdSchool.mdb located in the following folder on your hard disk: c:\Inetpub\wwwroot\SkyDiveSchool\data\sdSchool.mdb. Here are the parameters to create this connection string:

Provider=Microsoft.Jet.OLEDB.4.0;

Data Source=c:\Inetpub\wwwroot\SkyDiveSchool\data\sdSchool.mdb;

Case 2: You use the .NET Framework on a remote development server and you want to connect to a Microsoft Access database called mtnSchool.mdb located on the server in the following folder: d:\users\tara\projects\MtnDrivingSchool\data\mtnSchool.mdb. Here are the parameters to create the connection string:

Provider=Microsoft.Jet.OLEDB.4.0;

Data Source=d:\users\tara\projects\MtnDrivingSchool\data\mtnSchool.mdb;

Case 3: Suppose you use the .NET Framework on a networked development server called Savant and you want to connect to a Microsoft SQL Server database called pubs on the server. Your SQL Server user name is “sa” and there is no password. If you use the Managed Data Provider for SQL Server (that is, if you chose SQL Connection in the Databases panel), here are the parameters to create the connection string:

Data Source=Savant;

Initial Catalog=pubs;

User ID=sa;

Password=;


Editing or deleting a database connection

When you create a database connection, Dreamweaver stores the connection information in a file in the Connections subfolder in the site’s local root folder. Dreamweaver does not create a database connection for your ASP.NET application until you define a DataSet for a page in the application (see Defining a recordset). At that point, Dreamweaver writes code in the file to establish the connection, and inserts an include directive in your page. At runtime, the server inserts the connection code in your document.

To update a connection:
  1. Open an ASP.NET page in Dreamweaver, then open the Databases panel (Window > Databases).

    2. A list of connections appears in the panel.

  2. Right-click (Windows) or Control-click (Macintosh) the connection and choose Edit Connection from the pop-up menu.

    3. The dialog box you used to create the connection appears.

  3. Make the changes and click OK.

Dreamweaver automatically updates the include file, which automatically updates all the pages in the site that use the connection.

If you rename a connection, update every recordset that uses the old connection name by double-clicking the recordset in the Bindings panel and choosing the new connection name in the DataSet dialog box.

To delete a connection:
  1. Open an ASP.NET page in Dreamweaver, then open the Databases panel (Window > Databases).

    2. A list of connections appears in the panel.

  2. Right-click (Windows) or Control-click (Macintosh) the connection and choose Delete Connection from the pop-up menu.

    3. The dialog box you used to create the connection appears.

  3. Confirm that you want to delete the connection.

    4. Note: To avoid getting errors after deleting a connection, update every recordset that uses the old connection by double-clicking the name of the recordset in the Bindings panel and choosing a new connection in the DataSet dialog box.


Setting the OLE DB Connection dialog box options

The purpose of this dialog box is to define a database connection for an ASP.NET connection.

Procedure
  1. Enter a name for the new connection.

    2. Note: Do not use any spaces or special characters in the name.

  2. Enter the connection string.

    3. If you need help with the connection string, click Templates to open the Connection String Template dialog box, choose your OLE DB provider from the list of templates, and click OK.

    Dreamweaver inserts a string template in the Connection String box. Replace the placeholders in the string with the requested information. For more information, see Sample OLE DB connection parameters for ASP.NET.

  3. Click Test.

    4. Dreamweaver attempts to connect to the database. If the connection fails, double-check the connection string. If the connection still fails, check the settings for the folder Dreamweaver uses to process dynamic pages (see Specifying where dynamic pages can be processed).

  4. Click OK.

    5. The new connection appears in the Databases panel.

Related topics

Creating a database connection in Dreamweaver

Obtaining an OLE DB provider for your database

Creating a connection using Data Link Properties

Sample OLE DB connection parameters for ASP.NET


Setting the Connection String Template dialog box options

The purpose of this dialog box is to insert a string template in the Connection String box of the OLE DB Connection dialog box.

Procedure

Choose an OLE DB provider and click OK.

Related topic

Creating a database connection in Dreamweaver


Setting the SQL Server Connection dialog box options

The purpose of this dialog box is to define a connection to a SQL Server database using the Managed Data Provider for SQL Server supplied by the .NET Framework.

Procedure
  1. Enter a name for the new connection.

    2. Note: Do not use any spaces or special characters in the name.

  2. Enter the connection string.

    3. Dreamweaver provides a string template in the Connection String box. Replace the placeholders in the string with the requested information. For more information, see Sample OLE DB connection parameters for ASP.NET.

  3. Click Test.

    4. Dreamweaver attempts to connect to the database. If the connection fails, double-check the connection string. If the connection still fails, check the settings for the folder Dreamweaver uses to process dynamic pages (see Specifying where dynamic pages can be processed).

  4. Click OK.

    5. The new connection appears in the Databases panel.

Related topics

Creating a database connection in Dreamweaver

Obtaining an OLE DB provider for your database

Previous


Database Connections for ASP Developers

To use a database with a Microsoft Active Server Pages (ASP) application, you need to create a database connection in Macromedia Dreamweaver MX. This chapter describes how to create the database connection.

Note: If you’re developing ASP.NET applications, see Database Connections for ASP.NET Developers.

The chapter assumes you have set up an ASP application (see Setting Up a Web Application). It also assumes a database is set up on your local computer or on a system to which you have network or FTP access.

This chapter contains the following sections:

  • Understanding ASP database connections
  • Creating a DSN connection
  • Creating a DSN-less connection
  • Connecting to a database on an ISP
  • Editing or deleting a database connection

To connect to the sample database installed with Dreamweaver, see Setup for Sample ASP Site. To learn more about databases and database connections, see Beginner’s Guide to Databases.

Next


Understanding ASP database connections

An ASP application must connect to a database through an open database connectivity (ODBC) driver or an object linking and embedding database (OLE DB) provider. The driver or provider acts as an interpreter that lets the web application communicate with the database. For more information on the role of database drivers, see Interfacing with the database. The following table shows some drivers you can use with Microsoft Access, Microsoft SQL Server, and Oracle databases:

Database | Database driver
Microsoft Access | Microsoft Access Driver (ODBC)
Microsoft SQL Server | Microsoft SQL Server Driver (ODBC) Microsoft SQL Server Provider (OLE DB)
Oracle | Microsoft Oracle Driver (ODBC) Oracle Provider for OLE DB

You can use a data source name (DSN) or a connection string to connect to the database.

A DSN is a one-word identifier, such as Acme, that points to the database and contains all the information needed to connect to it. You define a DSN in Windows. You can use a DSN if you’re connecting through an ODBC driver installed on a Windows system. For detailed instructions, see Creating a DSN connection.

A connection string is a hand-coded expression that identifies the database and lists the information needed to connect to it. Example:

Driver={SQL Server};Server=Socrates;Database=AcmeMktg;
UID=wiley;PWD=roadrunner

You must use a connection string if you’re connecting through one of the following:

  • An OLE DB provider
  • An ODBC driver not installed on a Windows system

For detailed instructions, see the following sections:

  • Creating a DSN-less connection
  • Connecting to a database on an ISP

Note: You can also use a connection string if you’re connecting through an ODBC driver installed on a Windows system, but using a DSN is easier.


Creating a DSN connection

You can use a DSN to create an ODBC connection between your web application and your database. A DSN is a name containing all the parameters needed to connect to a specific database using an ODBC driver. For more information, see Understanding DSNs.

Note: Because you can only specify an ODBC driver in a DSN, you must use a connection string if you want to use an OLE DB provider. For more information, see Creating an OLE DB connection.

You can define the DSN on a local or remote Windows computer. The following topics describes methods for creating both types of connections:

  • Creating a connection using a local DSN
  • Creating a connection using a remote DSN

Related topic

Creating a DSN-less connection


Creating a connection using a local DSN

You can use a locally defined DSN to create a database connection in Dreamweaver. If you want to use a local DSN, the DSN must be defined on the Windows computer running Dreamweaver.

To create a database connection with a locally defined DSN:
  1. Define a DSN on the Windows computer running Dreamweaver.

    2. For instructions, see Creating a DSN.

  2. Open an ASP page in Dreamweaver, then open the Databases panel (Window > Databases).

    3. Dreamweaver displays all the connections defined for the site.

  3. Click the plus (+) button on the panel and select Data Source Name (DSN) from the pop-up menu.

    4. The Data Source Name (DSN) dialog box appears.
    This is a picture of the feature being described.

  4. Enter a name for the new connection.

    5. Note: Do not use any spaces or special characters in the name.

  5. Select the Using Local DSN option at the bottom of the dialog box.
  6. Select the DSN you want to use from the Data Source Name (DSN) pop-up menu.

    7. If you want to use a local DSN but haven’t defined one yet, click Define to open the Windows ODBC Data Source Administrator. For instructions, see Creating a DSN connection.

  7. If required, complete the User Name and Password boxes.
  8. If you want, restrict the number of database items Dreamweaver retrieves at design time by clicking Advanced and entering a schema or catalog name.

    9. For more information, see Restricting database information displayed in Dreamweaver.

    Note: You cannot create a schema or catalog in Microsoft Access.

  9. Click Test.

    10. Dreamweaver attempts to connect to the database. If the connection fails, double-check the DSN. If the connection still fails, check the settings for the folder Dreamweaver uses to process dynamic pages (see Specifying where dynamic pages can be processed).

  10. Click OK.

    11. The new connection appears in the Databases panel.

Related topics

Creating a connection using a remote DSN

Creating a DSN-less connection


Creating a connection using a remote DSN

You can use a DSN defined on a remote computer to create a database connection in Dreamweaver. If you want to use a remote DSN, the DSN must be defined on the Windows computer running your application server (probably IIS).

To create a database connection with a remotely defined DSN:
  1. Define a DSN on the remote system running your application server.

    2. For instructions, see Creating a DSN.

  2. Open an ASP page in Dreamweaver, then open the Databases panel (Window > Databases).

    3. Dreamweaver displays all the connections defined for the site.

  3. Click the plus (+) button on the panel and select Data Source Name (DSN) from the pop-up menu.

    4. The Data Source Name (DSN) dialog box appears.

  4. Enter a name for the new connection.

    5. Note: Do not use any spaces or special characters in the name.

  5. Select the Using DSN on Testing Server option at the bottom of the dialog box.

    6. Macintosh users can ignore this step because all database connections use DSNs on the application server.

  6. Enter the DSN.

    7. You can click the DSN button to connect to the server and choose from the DSNs defined on it. For more information, see Setting the Select ODBC DSN dialog box options.

  7. If required, complete the User Name and Password boxes.
  8. If you want, restrict the number of database items Dreamweaver retrieves at design time by clicking Advanced and entering a schema or catalog name.

    9. For more information, see Restricting database information displayed in Dreamweaver.

    Note: You cannot create a schema or catalog in Microsoft Access.

  9. Click Test.

    10. Dreamweaver attempts to connect to the database. If the connection fails, double-check the DSN. If the connection still fails, check the settings for the folder Dreamweaver uses to process dynamic pages (see Specifying where dynamic pages can be processed).

  10. Click OK.

    11. The new connection appears in the Databases panel.

Related topics

Creating a connection using a local DSN

Creating a DSN-less connection


Creating a DSN-less connection

You can use a DSN-less connection to create an ODBC or OLE DB connection between your web application and your database.

You use a connection string to create the connection. A connection string combines all the information your web application needs on the server to connect to a database. Dreamweaver inserts this string in your page’s server-side scripts for later processing by your application server.

Here’s an example of a connection string:

Driver={Microsoft Access Driver (*.mdb)};
DBQ=C:\Inetpub\wwwroot\Academy\curriculum.mdb

Here’s a second example:

Driver={SQL Server};Server=Socrates;Database=MedCenter;
UID=mwelby;PWD=realme

This section contains the following topics:

  • Creating a database connection with a connection string
  • Writing a connection string
  • Creating an OLE DB connection


Creating a database connection with a connection string

You can use a connection string to create a database connection between your web application and your database.

To create a DSN-less connection:
  1. Open an ASP page in Dreamweaver, then open the Databases panel (Window > Databases).

    2. Dreamweaver displays all the connections defined for that site, if any.

  2. Click the plus (+) button on the panel and select Custom Connection String from the pop-up menu.

    3. The Custom Connection String dialog box appears as follows.
    This is a picture of the feature being described.

  3. Complete the dialog box and click OK.

For more information, see the following topics:

  • Setting the Custom Connection String dialog box options
  • Writing a connection string

Related topics

Creating an OLE DB connection

Using a virtual path to connect to a database


Writing a connection string

A connection string combines all the information your web application needs on the server to connect to a database. Dreamweaver inserts this string in your page’s server-side scripts for later processing by your application server.

A connection string for Microsoft Access and SQL Server databases consists of a combination of the following parameters separated by semicolons:

Provider specifies the OLE DB provider for your database. For example, here are parameters for common OLE DB providers for Access, SQL Server, and Oracle databases, respectively:

Provider=Microsoft.Jet.OLEDB.4.0;...
Provider=SQLOLEDB;...
Provider=OraOLEDB;...

For the parameter value of your OLE DB provider, see your provider vendor’s documentation, or consult your system administrator.

If you don’t include a Provider parameter, then the default OLE DB provider for ODBC is used and you must specify an appropriate ODBC driver for your database.

Driver specifies the ODBC driver to use if you don’t specify an OLE DB provider for your database.

Server specifies the server hosting the SQL Server database if your web application runs on a different server.

Database is the name of a SQL Server database.

DBQ is the path to a file-based database such as one created in Microsoft Access. The path is the one on the server hosting the database file.

UID specifies the user name.

PWD specifies the user password.

DSN is the data source name, if you use one. Depending on how you define the DSN on your server, you can omit the connection string’s other parameters. For example, DSN=Results can be a valid connection string if you define the other parameters when you create the DSN (see Creating a DSN).

Connection strings for other kinds of databases may not use the parameters listed above, or will have different names or uses for the parameters. For more information, see your database vendor’s documentation, or consult your system administrator.

Here’s an example of a connection string that will create an ODBC connection to an Access database called trees.mdb:

Driver={Microsoft Access Driver (*.mdb)};
DBQ=C:\Inetpub\wwwroot\Research\trees.mdb

Here’s an example of a connection string that will create an OLE DB connection to a SQL Server database called Mothra located on a server called Gojira:

Provider=SQLOLEDB;Server=Gojira;Database=Mothra;UID=jsmith;
PWD=orlando8

Related topics

Creating a database connection with a connection string

Creating an OLE DB connection

Using a virtual path to connect to a database


Creating an OLE DB connection

You can use an OLE DB provider to communicate with your database. Creating a direct OLE DB connection can improve the speed of your connection by eliminating the ODBC layer between your web application and the database. By using a database-specific OLE DB provider, you eliminate the ODBC middleman.

If you don’t specify an OLE DB provider for your database, ASP uses the default OLE DB provider for ODBC drivers to communicate with an ODBC driver, which in turn communicates with the database.

OLE DB is available only on Windows NT, 2000, or XP.

Different OLE DB providers exist for different databases. You can obtain OLE DB providers for Microsoft Access and SQL Server by downloading and installing the Microsoft Data Access Components (MDAC) 2.5 and 2.6 packages on the Windows computer running IIS or PWS (if applicable). You can download the MDAC packages for free from the Microsoft website.

Note: Make sure you install MDAC 2.5 before installing MDAC 2.6.

You can download OLE DB providers for Oracle9i and Oracle8i databases from the Oracle website (registration is required).

In Dreamweaver MX, you create an OLE DB connection by including a Provider parameter in a connection string. For example, here are parameters for common OLE DB providers for Access, SQL Server, and Oracle databases, respectively:

Provider=Microsoft.Jet.OLEDB.4.0;...
Provider=SQLOLEDB;...
Provider=OraOLEDB;...

For the parameter value of your OLE DB provider, see your provider vendor’s documentation, or consult your system administrator.

Related topics

Writing a connection string

Creating a database connection with a connection string


Connecting to a database on an ISP

If you're an ASP developer working with a commercial Internet service provider (ISP), you often don’t know the physical path of the files you upload, including your database file or files. If your ISP doesn’t define a DSN for you or is slow to do so, you must find another way to create the connections to your database files. One alternative is to create a DSN-less connection to a database file, but you can define such a connection only if you know the physical path of the database file on the ISP’s server.

This section describes how you can obtain the physical path of a database file on a server by using the MapPath method of the ASP server object. The section covers the following topics:

  • Understanding physical and virtual paths
  • Finding a file’s physical path with the virtual path
  • Using a virtual path to connect to a database

Note: The techniques discussed in this chapter apply only if your database is file-based, such as a Microsoft Access database where data is stored in an .mdb file.


Understanding physical and virtual paths

After using Dreamweaver to upload your files to a remote server, the files reside in a folder in the server’s local directory tree. For example, on a server running Microsoft IIS, the path to your home page could be as follows:

c:\Inetpub\wwwroot\accounts\users\jsmith\index.htm

This path is known as the physical path to your file.

The URL to open your file, however, does not use the physical path. It uses the name of the server or domain followed by a virtual path, as in the following example:

www.plutoserve.com/jsmith/index.htm

The virtual path, /jsmith/index.htm, stands in for the physical path, c:\Inetpub\wwwroot\accounts\users\jsmith\index.htm.

Related topics

Finding a file’s physical path with the virtual path

Using a virtual path to connect to a database


Finding a file’s physical path with the virtual path

If you work with an ISP, you don’t always know the physical path to the files you upload. ISPs typically provide you with an FTP host, possibly a host directory, and a login name and password. ISPs also specify a URL to view your pages on the Internet, such as www.plutoserve.com/jsmith/.

If you know the URL, then you can get the file’s virtual path—it’s the path that follows the server or domain name in a URL. Once you know the virtual path, you can get the file’s physical path on the server using the MapPath method.

Among other things, the MapPath method takes the virtual path as an argument and returns the file’s physical path and filename. Here’s the method’s syntax:

Server.MapPath("/virtualpath")

Suppose a file’s virtual path is /jsmith/index.htm, then the following expression will return its physical path:

Server.MapPath("/jsmith/index.htm")

You can experiment with the MapPath method as follows.

  1. Open an ASP page in Dreamweaver and switch to Code view (View > Code).
  2. Enter the following expression in the page’s HTML code.
    3. <%Response.Write(stringvariable)%>
  3. Use the MapPath method to obtain a value for the stringvariable argument.

    4. Here’s an example:

    <% Response.Write(Server.MapPath("/jsmith/index.htm")) %>
  4. Switch to Design view (View > Design) and turn on Live Data (View > Live Data) to view the page.

    5. The page displays the physical path of the file on the application server. Using the example discussed in this section, the page displays the following physical path:

    c:\Inetpub\wwwroot\accounts\users\jsmith\index.htm

For more information on the MapPath method, consult the online documentation that comes with Microsoft IIS or PWS.

Related topics

Understanding physical and virtual paths

Using a virtual path to connect to a database


Using a virtual path to connect to a database

To write a DSN-less connection string to a database file located on a remote server, you must know the physical path to the file. For example, here is a typical DSN-less connection string for a Microsoft Access database:

Driver={Microsoft Access Driver (*.mdb)};
DBQ=c:\Inetpub\wwwroot\accounts\users\jsmith\data\statistics.mdb

If you don’t know the physical path of your files on the remote server, you can get the path by using the MapPath method in your connection string.

To create a DSN-less connection with the MapPath method:
  1. Upload the database file to the remote server.

    2. Make a note of its virtual path—for example, /jsmith/data/statistics.mdb.

  2. Open an ASP page in Dreamweaver, then open the Databases panel (Window > Databases).

    3. Dreamweaver displays all the connections defined for the site.

  3. Click the plus (+) button on the panel and select Custom Connection String from the pop-up menu.
  4. Enter a name for the new connection.

    5. Note: Do not use any spaces or special characters in the name.

  5. Enter the connection string and use the MapPath method to supply the DBQ parameter.

    6. Suppose the virtual path to your Microsoft Access database is /jsmith/data/statistics.mdb. The connection string can be expressed as follows if you use VBScript as your scripting language:

    “Driver={Microsoft Access Driver (*.mdb)};DBQ=” & Server.MapPath¬
("/jsmith/data/statistics.mdb")

The ampersand (&) is used to concatenate (combine) two strings. The first string is enclosed in quotation marks and the second is returned by the Server.MapPath expression. When the two strings are combined, the following string is created:

Driver={Microsoft Access Driver (*.mdb)}; ¬
DBQ=C:\Inetpub\wwwroot\accounts\users\jsmith\data\statistics.mdb

If you use JavaScript, the expression is identical except that you use a plus (+) sign instead of an ampersand (&) to concatenate the two strings:

“Driver={Microsoft Access Driver (*.mdb)};DBQ=” + Server.MapPath¬
("/jsmith/data/statistics.mdb")
  6. Select the Using Driver On Testing Server option.

    7. Macintosh users can ignore this step because all database connections use the application server.

  7. Click Test.

    8. Dreamweaver attempts to connect to the database. If the connection fails, double-check the connection string.

    If the connection still fails, contact your ISP to make sure the database driver you specified in the connection string is installed on the remote server. Also check that the ISP has the most recent version of the driver. For example, a database created in Microsoft Access 2000 will not work with Microsoft Access Driver 3.5. You need Microsoft Access Driver 4.0 or later.

  8. Click OK.

    9. The new connection appears in the Databases panel.

  9. Update the database connection of existing dynamic pages, and use the new connection with any new page you build.

    10. To update the connection of a dynamic page, open the page in Dreamweaver, double-click the recordset name in the Bindings panel or Server Behaviors panel, and select the connection you just created from the Connection pop-up menu.

Related topics

Understanding physical and virtual paths

Finding a file’s physical path with the virtual path

Creating a DSN-less connection


Editing or deleting a database connection

When you create a database connection, Dreamweaver stores the connection information in a file in the Connections subfolder in the site’s local root folder. Dreamweaver does not actually create a database connection for your ASP application until you define a recordset for a page in the application (see Defining a recordset). At that point, Dreamweaver writes code in the file to establish the connection, and inserts an include directive in your page. At runtime, the server inserts the connection code in your document.

To update a connection:
  1. Open an ASP page in Dreamweaver, then open the Databases panel (Window > Databases).

    2. A list of connections appears in the panel.

  2. Right-click (Windows) or Control-click (Macintosh) the connection and choose Edit Connection from the pop-up menu, as follows.
    This is a picture of the feature being described.

    3. The dialog box you used to create the connection appears.

  3. Make the changes and click OK.

Dreamweaver automatically updates the include file, which updates all the pages in the site that use the connection.

To delete a connection:
  1. Open an ASP page in Dreamweaver, then open the Databases panel (Window > Databases).

    2. A list of connections appears in the panel.

  2. Right-click (Windows) or Control-click (Macintosh) the connection and choose Delete Connection from the pop-up menu.

    3. The dialog box you used to create the connection appears.

  3. Confirm that you want to delete the connection.

    4. Note: To avoid getting errors after deleting a connection, update every recordset that uses the old connection by double-clicking the name of the recordset in the Bindings panel and choosing a new connection.


Setting the Data Source Name (DSN) dialog box options

The purpose of this dialog box is to create a database connection for an ASP application using a DSN.

Tasks

  • Creating a connection using a local DSN
  • Creating a connection using a remote DSN

Related topic

Creating a DSN


Setting the Select ODBC DSN dialog box options

The purpose of this dialog box is to select a DSN on the remote server when creating an ASP database connection.

Note: Dreamweaver can retrieve only server DSNs created with the Windows ODBC Data Source Administrator.

Procedure
  1. Select a DSN pointing to the database you want.
  2. Click OK.

Related topics

Creating a connection using a remote DSN

Creating a DSN


Setting the Custom Connection String dialog box options

The purpose of this dialog box is to define a DSN-less database connection with a connection string.

Procedure
  1. In the first box, enter a name for the new connection.

    2. Note: Do not use any spaces or special characters in the name.

  2. In the second box, enter a connection string to the database.

    3. If you do not specify an OLE DB provider in the connection string—that is, if you don’t include a Provider parameter—ASP will automatically use the OLE DB provider for ODBC drivers. In that case, you must specify an appropriate ODBC driver for your database.

    If your site is hosted by an ISP and you don’t know the full path to your database, use the MapPath method of the ASP server object in your connection string. For more information, see Connecting to a database on an ISP.

  3. If the database driver specified in the connection string is not installed on the same computer as Dreamweaver, select the Using Driver On Testing Server option.

    4. Macintosh users can ignore this step because all database connections use the application server.

  4. If you want, restrict the number of database items Dreamweaver retrieves at design time by clicking Advanced and entering a schema or catalog name.

    5. For more information, see Restricting database information displayed in Dreamweaver.

    Note: You cannot create a schema or catalog in Microsoft Access.

  5. Click Test.

    6. Dreamweaver attempts to connect to the database. If the connection fails, double-check the connection string. If the connection still fails, check the settings for the folder Dreamweaver uses to process dynamic pages (see Specifying where dynamic pages can be processed).

  6. Click OK.

    7. The new connection appears in the Databases panel.

Related topics

Creating a DSN-less connection

Writing a connection string

Creating an OLE DB connection

Using a virtual path to connect to a database


Setting the Connections dialog box options

The purpose of this dialog box is to manage the database connections for the site. Specifically, you can add, edit, delete, or duplicate database connections.

Note: You can perform the same tasks using the Databases panel.

Procedure
  • To add a new connection, click New.
  • To delete an existing connection, select the connection in the list and click Remove.
  • To update an existing connection, select the connection in the list and click Edit.

To make a copy of an existing connection, select the connection in the list and click Duplicate.

Previous


Database Connections for JSP Developers

To use a database with a JavaServer Pages (JSP) application, you need to create a database connection in Macromedia Dreamweaver MX. This chapter describes how to create the connection.

The chapter assumes you have set up a JSP application (see Setting Up a Web Application). It also assumes you have a database set up on your local computer or on a system to which you have network or FTP access.

This chapter contains the following sections:

  • Understanding JSP connections
  • Connecting to a database
  • Connecting through an ODBC driver
  • Editing or deleting a database connection

To connect to the sample database installed with Dreamweaver, see Setup for Sample JSP Site. To learn more about databases and database connections, see Beginner’s Guide to Databases.

Next


Understanding JSP connections

A JSP application must connect to a database through a JDBC driver. The driver acts as an interpreter that lets a JSP application communicate with a database. For more information on JDBC and the role of database drivers, see Interfacing with the database.

You must specify certain parameter values to connect through your JDBC driver. For more information, see About JDBC connection parameters. For the parameter values specific to your driver, see the driver vendor’s documentation or consult your system administrator.

You can also use an ODBC driver (and so a Windows DSN) if you have a JDBC-ODBC Bridge driver. For more information, see Connecting through an ODBC driver.


Connecting to a database

This section describes how to connect to a database when developing a JSP application in Dreamweaver MX.

The section assumes a JSP application server is running on a local or remote computer. (For most Macintosh users and many development teams, the JSP application server runs on a separate development server.) For more information, see Setting Up a Web Application.

Before you can connect to a database, you must obtain a JDBC driver for your database. For more information, see Obtaining a JDBC driver for your database.

After you install the database driver, you can connect to the database through it. For instructions, see Creating a database connection for JSP.


Obtaining a JDBC driver for your database

Make sure you have a JDBC driver for your database before you try to create a database connection. Some common JDBC drivers include the Oracle Thin JDBC driver, the Oracle Java Driver, and the i-net JDBC drivers for Microsoft SQL Server.

Database system vendors such as Oracle often include drivers with their systems. You can also purchase drivers from third-party vendors. For example, you can obtain a JDBC driver for Microsoft SQL Server from i-net software.

Sun also provides a searchable database of JDBC drivers and their vendors on its website.

Once you have a JDBC driver for your database, you can create a database connection. For instructions, see Creating a database connection for JSP.

Related topics

Installing the Sun JDBC-ODBC Bridge driver

Interfacing with the database


Creating a database connection for JSP

After you install an appropriate JDBC driver for your database on the computer running your application server (see Obtaining a JDBC driver for your database), you can create a database connection in Dreamweaver.

To create a database connection for JSP:
  1. Open a JSP page in Dreamweaver, then open the Databases panel (Window > Databases).

    2. Dreamweaver displays the connections defined for the site.

  2. Click the plus (+) button and choose your driver from the pop-up menu.

    3. If your driver is not listed, choose Custom JDBC Connection.

    A connection dialog box appears.

  3. Enter the connection parameters in the connection dialog box.

    4. For more information, see About JDBC connection parameters.

  4. Specify the location of the JDBC driver you want to use.
    • If your JDBC driver is installed on the same computer as Dreamweaver, select the Using Driver On This Machine option.
    • If your JDBC driver is not installed on the same computer as Dreamweaver, select the Using Driver On Testing Server option.

      • Macintosh users can ignore this step because all database connections use the application server.

  5. Click Test.

    6. Dreamweaver attempts to connect to the database. If the connection fails, double-check the the connection parameters. If the connection still fails, check the settings for the folder Dreamweaver uses to process dynamic pages (see Specifying where dynamic pages can be processed).

  6. Click OK.

The new connection appears in the Databases panel.


About JDBC connection parameters

JDBC connections usually consist of four parameters: the driver, user name, password, and URL (which specifies the location of the database). Generally, the values of the driver parameter and the URL parameter depend on the driver.

This section demonstrate how to define connection parameters in Dreamweaver using the Oracle Thin JDBC driver as an example. For the connection parameters of other drivers, consult the driver vendor’s documentation.

The Oracle Thin JDBC driver supports Oracle databases. If you want to use this driver to connect to your Oracle database, click the plus (+) button on the Databases panel and choose the Oracle Thin Driver (Oracle) driver from the pop-up menu. The following, partially-complete dialog box appears:

This is a picture of the feature being described.

Enter a connection name and replace the placeholders (in square brackets) with valid connection parameters. For the [hostname] placeholder, enter the IP address or the name assigned to the database server by the system administrator. For the [sid] placeholder, enter the database system identifier. If you have more than one Oracle database running on the same system, you use the SID to tell them apart.

For example, if your server is called Aristotle, the database port is 1521, and you defined a database SID called patients on that server, you would enter the following parameter values in Dreamweaver:

This is a picture of the feature being described.


Connecting through an ODBC driver

Although JSP applications must communicate with databases through JDBC drivers, they can communicate through ODBC drivers if you have a JDBC-ODBC bridge driver. Using an ODBC driver lets you use a Windows DSN, which simplifies the task of creating the connection. The bridge driver acts as an interpreter between your JSP application, which talks JDBC, and your ODBC driver, which talks ODBC. This channel of communication lets your JSP application talk to the database.

This kind of connection offers two main advantages. First, you can use the free ODBC drivers from Microsoft. Second, you can use a DSN to simplify the task of creating the connection.

You must meet the following requirements to connect through an ODBC driver:

  • Your JSP application server must be running on a Windows computer.
  • An ODBC driver for your database must be installed on the Windows computer running the application server. For more information, see Checking for the ODBC driver.
  • A JDBC-ODBC bridge driver must be installed on the Windows computer running the application server. For more information, see Installing the Sun JDBC-ODBC Bridge driver.

If you meet these requirements, you can connect through an ODBC driver. For instructions, see Creating an ODBC connection.


Checking for the ODBC driver

Make sure an ODBC driver for your database is installed on the Windows computer running the JSP application server. To find out whether or not an ODBC driver is installed, see Viewing the ODBC drivers installed on a Windows system. If an appropriate driver is not installed, you can download and install the Microsoft Data Access Components (MDAC) 2.5 and 2.6 packages on the computer running the JSP application server. You can download MDAC for free from the Microsoft website. These packages contain the latest ODBC drivers from Microsoft.

Note: Install MDAC 2.5 before installing MDAC 2.6.

If you have an ODBC driver for your database, you can install a JDBC-ODBC driver next. For instructions, see Installing the Sun JDBC-ODBC Bridge driver.


Installing the Sun JDBC-ODBC Bridge driver

To connect through an ODBC driver, you must install the Sun JDBC-ODBC Bridge driver on the Windows computer running the JSP application server. The driver comes with the Sun Java 2 SDK, Standard Edition, for Windows.

To find out if you already have the Java 2 SDK with the driver, check your hard disk for either the c:\jdk1.2.2 or the c:\jdk1.3 folder.

Note: Java 1.2.2 and 1.3 are the same as Java 2.

If you don’t have the SDK, you can download it from the Sun website and install it. The driver installs automatically when you install the SDK.

Although it is adequate for development use with lower-end database systems such as Microsoft Access, the Sun JDBC-ODBC Bridge driver is not intended for production use. For example, it lets only one JSP page connect to the database at a time (in other words, it does not support concurrent use by multiple threads). For more information on the driver’s limitations, see article 12409 on the Macromedia support center .

After you install the bridge driver, you can create the database connection next. For instructions, see Creating an ODBC connection.


Creating an ODBC connection

Before connecting through an ODBC driver, make sure the appropriate ODBC driver and the Sun JDBC-ODBC Bridge driver are installed on the Windows computer running the JSP application server (see Checking for the ODBC driver and Installing the Sun JDBC-ODBC Bridge driver).

To connect through an ODBC driver in JSP:
  1. Define a DSN on the Windows system hosting your application server.

    2. For instructions, see Creating a DSN.

  2. Open a JSP page in Dreamweaver, then open the Databases panel (Window > Databases).

    3. The panel displays the connections defined for that site.

  3. Click the plus (+) button on the panel and choose “Sun JDBC-ODBC Driver (ODBC Database)” from the pop-up menu.

    4. The Sun JDBC-ODBC Driver (ODBC Database) dialog box appears.

  4. Enter a name for the new connection.

    5. Note: Do not use any spaces or special characters in the name.

  5. Replace the [odbc dsn] placeholder in the URL box with the DSN you defined in step 1.

    6. The URL box should look like this:

    jdbc:odbc:myDSN
  6. Specify the user name and password to access the database.

    7. If you don’t need a user name or password, leave the boxes blank. For example, if your DSN is called Acme and you don’t need a user name or password to access the database, enter the following parameter values:

    Driver: sun.jdbc.odbc.JdbcOdbcDriver

    URL: jdbc:odbc:Acme

    Username:

    Password:

  7. Specify the location of the JDBC-ODBC Bridge driver.
    • If the driver is installed on the same computer as Dreamweaver, select the Using Driver On This Machine option.
    • If the driver is not installed on the same computer as Dreamweaver, select the Using Driver On Testing Server option.

      • Macintosh users can ignore this step because all database connections use the application server.

  8. Click Test.

    9. Dreamweaver attempts to connect to the database. If the connection fails, double-check the DSN and the other connection parameters. If the connection still fails, check the settings for the folder Dreamweaver uses to process dynamic pages (see Specifying where dynamic pages can be processed).

  9. Click OK.

    10. The new connection appears in the Databases panel.


Editing or deleting a database connection

When you create a database connection, Dreamweaver stores the connection information in a file in the Connections subfolder in the site’s local root folder. Dreamweaver does not actually create a database connection for your JSP application until you define a recordset for a page in the application (see Defining a recordset). At that point, Dreamweaver writes code in the file to establish the connection, and inserts an include directive in your page. At runtime, the server inserts the connection code in your document.

To update a connection:
  1. Open a JSP page in Dreamweaver, then open the Databases panel (Window > Databases).

    2. A list of connections appears in the panel.

  2. Right-click (Windows) or Control-click (Macintosh) the connection and choose Edit Connection from the pop-up menu.

    3. The dialog box you used to create the connection appears.

  3. Make the changes and click OK.

Dreamweaver automatically updates the include file, which updates all the pages in the site that use the connection.

If you rename a connection, update every recordset that uses the old connection name by double-clicking the recordset in the Bindings panel and choosing the new connection name in the Recordset dialog box.

To delete a connection:
  1. Open a JSP page in Dreamweaver, then open the Databases panel (Window > Databases).

    2. A list of connections appears in the panel.

  2. Right-click (Windows) or Control-click (Macintosh) the connection and choose Delete Connection from the pop-up menu.

    3. The dialog box you used to create the connection appears.

  3. Confirm that you want to delete the connection.

To avoid getting errors after deleting a connection, update every recordset that uses the old connection by double-clicking the name of the recordset in the Bindings panel and choosing a new connection in the Recordset dialog box.


Setting JSP connection dialog box options

The purpose of this dialog box is to create a database connection for a JSP application.

Procedure
  1. Enter a name for the connection.

    2. Note: Do not use any spaces or special characters in the name.

  2. Enter the driver’s connection parameters.

    3. For examples, see About JDBC connection parameters. For driver-specific requirements, see the driver vendor’s documentation or consult your system administrator.

  3. Specify the location of the JDBC driver you want to use.
    • If your JDBC driver is installed on the same computer as Dreamweaver, select the Using Driver On This Machine option.
    • If your JDBC driver is not installed on the same computer as Dreamweaver, select the Using Driver On Testing Server option.

      • Note: Macintosh users can ignore this step because all database connections use the application server.

  4. If you want, restrict the number of database items Dreamweaver retrieves at design time by clicking Advanced and entering a schema or catalog name.

    5. For more information, see Restricting database information displayed in Dreamweaver.

    Note: You cannot create a schema or catalog in Microsoft Access.

  5. Click Test.

    6. Dreamweaver attempts to connect to the database. If the connection fails, double-check the JDBC connection parameters. If the connection still fails, check the settings for the folder Dreamweaver uses to process dynamic pages (see Specifying where dynamic pages can be processed).

  6. Click OK.

    7. The new connection appears in the Databases panel.

Related topics

Obtaining a JDBC driver for your database

About JDBC connection parameters

Connecting through an ODBC driver

Previous


Database Connections for PHP Developers

To use a database with a PHP application, you need to create a database connection in Macromedia Dreamweaver MX. This chapter describes how to create the database connection.

For PHP development, Dreamweaver only supports the MySQL database system. Other database systems such as Microsoft Access or Oracle are not supported. MySQL is open-source software you can download for free from the Internet for non-commercial use. For more information, see the MySQL website.

The chapter assumes you have set up a PHP application (see Setting Up a Web Application). It also assumes a MySQL database is set up on your local computer or on a system to which you have network or FTP access.

This chapter contains the following sections:

  • Connecting to a database
  • Editing or deleting a database connection

To connect to the sample database provided by Dreamweaver, see Setup for Sample PHP Site. To learn more about databases and database connections, see Beginner’s Guide to Databases.

Next


Connecting to a database

This section describes how to connect to a database when developing a PHP application in Dreamweaver. It assumes you have one or more MySQL databases and that the MySQL server is started.

To create a database connection to your MySQL database:
  1. Open a PHP page in Dreamweaver, then open the Databases panel (Window > Databases).
  2. Click the plus (+) button on the panel and choose MySQL Connection from the pop-up menu.

    3. The MySQL Connection dialog box appears.

  3. Complete the dialog box and click OK.

    4. For more information, see Setting the MySQL Connection dialog box options.

The new connection appears in the Databases panel.


Editing or deleting a database connection

When you create a database connection, Dreamweaver stores the connection information in a file in the Connections subfolder in the site’s local root folder. Dreamweaver does not actually create a database connection for your PHP application until you define a recordset for a page in the application (see Defining a recordset). At that point, Dreamweaver writes code in the file to establish the connection, and inserts an include directive in your page. At runtime, the server inserts the connection code in your document.

To update a connection:
  1. Open a PHP page in Dreamweaver, then open the Databases panel (Window > Databases).

    2. A list of connections appears in the panel.

  2. Right-click (Windows) or Control-click (Macintosh) the connection and choose Edit Connection from the pop-up menu.

    3. The dialog box you used to create the connection appears.

  3. Make the changes and click OK.

Dreamweaver automatically updates the include file, which updates all the pages in the site that use the connection.

To delete a connection:
  1. Open a PHP page in Dreamweaver, then open the Databases panel (Window > Databases).

    2. A list of connections appears in the panel.

  2. Right-click (Windows) or Control-click (Macintosh) the connection and choose Delete Connection from the pop-up menu.

    3. The dialog box you used to create the connection appears.

  3. Confirm that you want to delete the connection.

To avoid getting errors after deleting a connection, update every recordset that uses the old connection by double-clicking the name of the recordset in the Bindings panel and choosing a new connection in the Recordset dialog box.


Setting the MySQL Connection dialog box options

The purpose of this dialog box is to create a database connection for a PHP application.

Make sure the MySQL server is started before completing this dialog box.

Procedure
  1. Enter a name for the new connection.

    2. Note: Do not use any spaces or special characters in the name.

  2. In the MySQL Server box, specify the computer hosting MySQL.

    3. Enter an IP address or a server name. If MySQL is running on the same computer as PHP, you can enter localhost.

  3. Enter your MySQL user name and password.
  4. In the Database box, enter the name of the database, or click Select and choose the database from the list of MySQL databases.
  5. Click Test.

    6. Dreamweaver attempts to connect to the database. If the connection fails, double-check the server name, user name, and password. If the connection still fails, check the settings for the folder Dreamweaver uses to process dynamic pages (see Specifying where dynamic pages can be processed).

  6. Click OK.

    7. The new connection appears in the Databases panel.

Related topic

Connecting to a database


Setting the Select Database dialog box options

The purpose of this dialog box is to select a database in a MySQL database system when creating a PHP database connection.

Procedure

Choose a database from the list and click OK.

Related topic

Setting the MySQL Connection dialog box options

Previous


Working with Page Code

Use the advanced coding tools in Dreamweaver to create or modify pages.

This part contains the following chapters:

  • Setting Up Your Coding Environment
  • Coding in Dreamweaver
  • Optimizing and Debugging Your Code
  • Editing Code in Design View


Setting Up Your Coding Environment

You can adapt the coding environment in Macromedia Dreamweaver MX so it fits the way you work. For example, you can change the way you view code, set up different keyboard shortcuts, or import and use your favorite tag library.

This chapter covers the following topics:

  • Viewing your code
  • Setting viewing preferences
  • Setting coding preferences
  • Customizing keyboard shortcuts
  • Setting coding preferences
  • Setting Validator preferences
  • Managing tag libraries
  • Importing custom tags into Dreamweaver
  • Using an external HTML editor with Dreamweaver
Next


Viewing your code

You can view the source code for the current document in several ways: you can display it in the Document window by turning on Code view, you can split the Document window to display both the page and its associated code, or you can work in the Code inspector, a separate coding window.

Note: Code view and Code inspector share the same functionality.

This section contains instructions for changing the way you view your code.

To view code in the Document window:

Choose View > Code.

To view code in a separate window:

Choose Window > Others > Code Inspector.

To code and visually edit a page in the Document window at the same time:
  1. Choose View > Code and Design.

    2. The code appears in the top pane and the page appears in the bottom pane.

  2. To display the page on top, choose View > Design View on Top.
  3. To adjust the size of the panes in the Document window, drag the splitter bar to the desired position.

    4. The splitter bar is located between the two panes.

Code view is updated automatically when you make changes in Design view. However, after making changes in Code view, you must manually update the document in Design view by clicking in Design view and pressing F5.


Setting viewing preferences

You can set word wrapping, display line numbers for the code, highlight invalid HTML code, set syntax coloring for code elements, and set indenting from the View > Code View Options menu.

To set options for Code view and the Code inspector:
  1. Display at least one page in Code view or the Code inspector.
  2. Choose View > Code View Options.

    3. A pop-up menu appears with a check mark beside each option that is already set.

  3. Select any of the following options from the menu:
    • Word Wrap wraps the code so that you can view it without scrolling horizontally. This option doesn’t insert line breaks; it just makes the code easier to view.
    • Line Numbers displays line numbers along the side of the code.
    • Highlight Invalid HTML causes Dreamweaver to highlight in yellow any invalid HTML that browsers don’t support. When you select an invalid tag, the Property inspector displays information on how to correct the error.
    • Syntax Coloring turns code coloring on and off. To change the coloring scheme, see Setting code coloring preferences.
    • Auto Indent makes your code indent automatically when you press the Enter key while writing code. To change the indent spacing or tags that automatically indent, see Setting code formatting preferences.

      • If you selected a checked option, the option is turned off. Otherwise, the option is set.


Setting coding preferences

You can set the following preferences for coding in Dreamweaver:

  • Code formatting preferences determine common code formatting options, such as line length and indentation. See Setting code formatting preferences. You can also apply your new formatting preferences to existing HTML documents. See Applying new formatting preferences to existing documents.
  • Code Hints preferences let you enable or disable Code Hints, and let you customize the hints you see. Code Hints give you inline assistance while you type in Code view. For example, if you type an opening tag bracket (<), a menu appears listing possible tags. Instead of typing the rest of the tag by hand, you can select one of the hints listed in the menu and press Enter to enter it automatically. See Setting Code Hints preferences.
  • Code rewriting preferences determine what changes, if any, Dreamweaver makes to your code when you open an HTML or script document. See Setting code rewriting preferences.
  • Code coloring preferences lets you set special formatting and syntax coloring for code elements such as tags, comments, and scripts. See Setting code coloring preferences.

To set advanced preferences, use the Tag Library Editor (see Managing tag libraries).


Setting code formatting preferences

You can change the look of your code by specifying formatting preferences such as indentation, line length, and the case of tag and attribute names.

Note that all the preferences except “Override Case Of” affect only new documents and new additions to existing documents. That is, when you open a previously created HTML document, these formatting options are not applied to it; to reformat existing HTML documents, use the Apply Source Formatting command. For more information, see Applying new formatting preferences to existing documents.

To set code formatting preferences:
  1. Select Edit > Preferences > Code Format or Dreamweaver > Preferences > Code Format (Mac OS X).

    2. The Code Format dialog box appears.

  2. Adjust any of the following settings in the dialog box:

    3. Use specifies whether to indent using spaces or tabs.

    Indent Size determines the size of indents. The size is measured in spaces if Use is set to spaces, or in tabs if Use is set to tabs.

    Tab Size determines the size of tabs (measured in character spaces).

    Automatic Wrapping adds “hard” returns once a line reaches the specified column width. (Dreamweaver inserts hard returns only in places where they don’t change the appearance of the document in browsers, so some lines may remain longer than the Automatic Wrapping option specifies.) By contrast, the Wrap option in Code view adds a “soft” return for lines that extend beyond the width of the window.

    Line Break Type specifies the type of remote server (Windows, Macintosh, or UNIX) that hosts your remote site. Choosing the correct type of line break characters ensures that your HTML source code appears correctly when viewed on the remote server. (For FTP, this setting applies only to binary transfer mode; Dreamweaver ASCII transfer mode ignores this setting. If you download files using ASCII mode, Dreamweaver sets line breaks based on the operating system of your computer; if you upload files using ASCII mode, the line breaks are all set to CR LF.) This setting is also useful when you are working with an external text editor that recognizes only certain kinds of line breaks. For example, use CR LF (Windows) if Notepad is your external editor, and CR (Macintosh) if SimpleText is your external editor.

    Default Tag Case and Default Attribute Case control the capitalization of tag and attribute names. These options are applied to tags and attributes that you insert or edit in the Document window, but they are not applied to the tags and attributes that you enter directly in Code view, or to the tags and attributes in a document when you open it (unless you also select one or both of the Override Case Of options).

    Override Case Of: Tags and Attributes specify whether to enforce your specified case options at all times, including when you open an existing HTML document. When you select one of these options, all tags or attributes in open documents are immediately converted to the specified case, as are all tags or attributes in each document you open from then on (until you deselect this option again). Tags or attributes you type in Code view and the Quick Tag Editor are also converted to the specified case, as are tags or attributes you insert using the Insert bar. For example, if you want tag names always to be converted to lowercase, specify lowercase in Case for Tags, and then select the Override Case Of: Tags option. Then when you open a document that contains uppercase tag names, Dreamweaver converts them all to lowercase.

    Centering specifies whether elements should be centered using div align="center" or center. Both are part of the HTML 4.0 Transitional specification, but center is supported by a wider range of browsers.


Applying new formatting preferences to existing documents

The code formatting options that you specify in Code Format preferences only apply to any new documents that you create with Dreamweaver. To apply new formatting preferences to existing documents, use the Apply Source Formatting command.

To apply new formatting preferences to an existing document:
  1. Open the document in Dreamweaver.
  2. Choose Commands > Apply Source Formatting.


Setting Code Hints preferences

Code Hints lets you quickly insert tag names, attributes, and values as you enter code. To set the preferences, choose Edit > Preferences > Code Hints or Dreamweaver > Preferences > Code Hints (Mac OS X).

Tip: Even if Code Hints is disabled, you can display a pop-up hint in Code view or the Code inspector by pressing Control-space in Windows.

To set Code Hints preferences:
  1. Select Edit > Preferences > Code Hints or Dreamweaver > Preferences > Code Hints (Mac OS X).

    2. The Code Hints dialog box appears.

  2. Adjust any of the following settings in the dialog box:

    3. Enable Auto Tag Completion enables automatic tag completion.

    Enable Code Hints enables Code Hints while entering code in Code view. Drag the Delay slider to set the time in seconds before the program displays appropriate hints.

    Menus lets you set exactly which type of Code Hints you want displayed while typing. You can use all or some of the menus.


Setting code rewriting preferences

Code rewriting preferences determine what Dreamweaver does while opening documents. These preferences have no effect when you edit HTML or scripts in Code view.

If you turn off the rewriting options, Dreamweaver displays invalid markup items in the Document window for HTML that it would have rewritten.

If you are importing an HTML document from Microsoft Word, you can use the Clean Up Word HTML command to remove any unnecessary HTML code. For more information, see Cleaning up Microsoft Word HTML.

To set code rewriting preferences:
  1. Select Edit > Preferences > Code Rewriting or Dreamweaver > Preferences > Code Rewriting (Mac OS X).

    2. The Code Rewriting dialog box appears.

  2. Adjust any of the following settings in the dialog box:

    3. Fix Invalidly Nested and Unclosed Tags rewrites overlapping tags. For example, <b><i>text</b></i> is rewritten as <b><i>text</i></b>. This option also inserts closing quotation marks and closing brackets if they are missing.

    Rename Form Items When Pasting ensures you don’t have duplicate names for form objects.

    Remove Extra Closing Tags deletes closing tags that have no corresponding opening tag.

    Warn When Fixing or Removing Tags displays a summary of technically invalid HTML that Dreamweaver attempted to correct. The summary notes the location of the problem (using line and column numbers) so that you can find the correction and ensure that it’s rendering as intended.

    Never Rewrite Code: In Files with Extensions allows you to prevent Dreamweaver from rewriting code in files with the specified filename extensions. This option is particularly useful for files that contain third-party tags.

    Encode Special Characters in URL Using % ensures the URL contains only legal characters.

    Encode <, >, &, and " in Attribute Values Using & ensures the URL contains only legal characters.


Setting code coloring preferences

Syntax coloring helps you to identify code blocks in large documents. You can set syntax coloring preferences for code elements such as comments and scripts and for tags in general. To set color preferences for specific tags, edit the tag definition in the Tag Library Editor. For more information, see Editing libraries, tags, and attributes.

To set code coloring preferences:
  1. Choose Edit > Preferences > Code Coloring or Dreamweaver > Preferences > Code Coloring (Mac OS X).
  2. Choose a document type and click Edit Coloring Scheme.

    3. The Edit Color Scheme dialog box appears.

  3. Select an item and set its text color, background color, and style (bold, italic, or underline).

    4. You can preview the color scheme in the Preview pane.

  4. When done, click OK.


Customizing keyboard shortcuts

You can use your favorite keyboard shortcuts in Dreamweaver. If you’re accustomed to using specific keyboard shortcuts—for example, Control-Enter to add a line break, Control-G to go to a specific position in the code, or Shift+F6 to validate a file—you can add them to Dreamweaver using the Keyboard Shortcut Editor. For more information, see Using the Keyboard Shortcut Editor.


Opening files in Code view by default

You can configure Dreamweaver to open files with certain extensions automatically in Code view instead of Design view.

When you open a file type that normally doesn’t contain any HTML (for example, a JavaScript file), the file opens in Code view (or Code inspector) instead of Design view. You can edit the file, and save it as an HTML file or a non-HTML file.

To set the default view for non-HTML files:
  1. Choose Edit > Preferences > File Types/Editors or Dreamweaver > Preferences > File Types/Editors (Mac OS X).
  2. In the Open in Code View text box, type the filename extensions you want to open automatically in Code view. Put a space between each file type.

The default file extensions listed are .js, .txt, and .asa. You can add as many as you like.

Related topic

Using external editors


Setting Validator preferences

You can use the Validator in Dreamweaver to quickly locate tag or syntax errors in your code (see Validating your tags). You can specify the tag-based languages against which the Validator should check, the specific problems that the Validator should check, and the types of errors that the Validator should report.

To set preferences for the Validator:
  1. Choose Edit > Preferences > Validator or Dreamweaver > Preferences > Validator (Mac OS X).
  2. Select the tag libraries against which to validate.

    3. Some tag libraries are built on top of others. For example, if you select HTML 4.0, HTML 3.2 and HTML 2.0 are automatically selected, because the definition for HTML 4.0 is incomplete without them.

    Note: If you validate both CFML and HTML in a single document, the Validator can’t assess the number sign (#). This is because, in CFML, # is an error and ## is correct; while in HTML, ## is an error and # is correct.

  3. Click Options.

    4. The Validator Options dialog box appears.

  4. Select the Display option for every type of error that you want the Validator report to include.
  5. Select items the Validator should look for.
  6. Click OK to close the Validator Options dialog box, then click OK to close the Preferences dialog box.


Managing tag libraries

You can use the Tag Library Editor to manage the tag libraries in Dreamweaver. The Tag Library Editor lets you add and delete tag libraries, tags, and attributes; set properties for a tag library; and edit tags and attributes.

To open the Tag Library Editor, choose Edit > Tag Libraries. The Tag Library Editor appears as follows. (The contents of this dialog box changes depending on the selected tag.)

This is a picture of the feature being described.

This section covers the following topics:

  • Adding libraries, tags, and attributes
  • Editing libraries, tags, and attributes
  • Deleting libraries, tags, and attributes

See also Importing custom tags into Dreamweaver.


Adding libraries, tags, and attributes

You can use the Tag Library Editor to add tag libraries, tags, and attributes to the tag libraries in Dreamweaver.

Note: To import a tag, see Importing custom tags into Dreamweaver.

To add a tag library:
  1. In the Tag Library Editor (Edit > Tag Libraries), click the plus (+) button and choose New Tag Library.

    2. The New Tag Library dialog box appears.

  2. In the Library Name text box, enter a name (for example, PHP Tags).
  3. Click OK.
To add one or more tags to a tag library:
  1. In the Tag Library Editor (Edit > Tag Libraries), click the plus (+) button and choose New Tags.

    2. The New Tags dialog box appears.

  2. In the Tag Library pop-up menu, choose a tag library (for example, CFML Tags).

    3. By default, the tag library selected in the tag editor appears in the Tag Library box.

  3. In the Tag Names text box, enter a name for the tag.

    4. If you are adding more than one tag, enter the names for the tags, separated by a comma and space (for example, cfgraph, cfgraphdata).

  4. To add every tag with a matching end tag (</...>), select Have Matching End Tags.
  5. Click OK.
To add one or more attributes to a tag:
  1. In the Tag Library Editor (Edit > Tag Libraries), click the plus (+) button and choose New Attributes.

    2. The New Attributes dialog box appears.

  2. In the Tag Library pop-up menu, choose a tag library.

    3. By default, the tag library selected in the tag editor appears in the Tag Library text box.

  3. In the Tag pop-up menu, choose a tag (for example, cfgraph).

    4. By default, the tag selected in the tag editor appears in the Tag box.

  4. In the Attribute Names text box, enter a name for the attribute (for example, type).

    5. To add more than one attribute, enter the attributes’ names, separated by a comma and space.

  5. Click OK.

Related topics

Managing tag libraries

Editing libraries, tags, and attributes

Deleting libraries, tags, and attributes


Editing libraries, tags, and attributes

You can use the Tag Library Editor to set properties for a tag library and edit tags and attributes in a library—whether it be their attributes and values, or their format (for easy identification in the code).

To set properties for a tag library:
  1. In the Tag Library Editor (Edit > Tag Libraries), select a tag library in the Tags pop-up menu.
  2. In the Used In box, select every document type that should use the tag library.

    3. The tags in the tag library are only available in the types of documents that you select here.

  3. If the tags in the tag library need a prefix, then enter the prefix in the Tag Prefix text box.
  4. If you are finished making changes in the Tag Library Editor, click OK.
To edit a tag in a tag library:
  1. In the Tag Library Editor (Edit > Tag Libraries), open a tag library in the Tags pop-up menu and select a tag.
  2. Set any of the following Tag Format options:
    • Line Breaks specifies where Dreamweaver inserts line breaks for a tag.
    • Contents specifies how Dreamweaver inserts the contents of a tag; that is, if it applies line break and formatting rules to the content.
    • Case specifies the case for a specific tag. Choose from Default, Lowercase, Uppercase, or Mixed Case. If you choose Mixed Case, the Tag Name Mixed Case dialog box appears. Enter how Dreamweaver should insert the tag (for example, getProperty) and click OK.
    • Set Default sets the default case for all tags. In the Default Tag Case dialog box that appears, choose <UPPERCASE> or <lowercase>, and click OK.

      • Tip: You might want to set your default case to be lowercase to comply with XML and XHTML standards.

To edit an attribute for a tag:
  1. In the Tag Library Editor (Edit > Tag Libraries), open a tag library in the Tags pop-up menu, open a tag, and select a tag attribute.
  2. In the Attribute Case pop-up menu, choose Default, Lowercase, Uppercase, or Mixed Case.

    3. If you choose Mixed Case, in the Attribute Name Mixed Case dialog box, enter how Dreamweaver should insert the attribute (for example, onClick). Click OK.

    Click the Set Default link to set the default case for all attributes.

  3. In the Attribute Type pop-up menu, select the type of attribute.

    4. If you choose Enumerated, enter every allowed value for the attribute in the Values text box. Separate each value by a comma and no space. For example, for the type attribute of the cfgraph tag, enter bar,horizontalBar,line,pie.

Related topics

Managing tag libraries

Adding libraries, tags, and attributes

Deleting libraries, tags, and attributes


Deleting libraries, tags, and attributes

You can use the Tag Library Editor to delete tag libraries, tags, and attributes.

To delete a library, tag, or attribute:
  1. In the Tag Library Editor (Edit > Tag Libraries), select a tag library, tag, or attribute in the Tags pop-up menu.
  2. Click the minus (-) button.
  3. If you are asked to confirm the deletion, click OK.

    4. The item is removed from the Tags pop-up menu.

  4. If you don’t want to permanently delete the item, click Cancel.

    5. The Tag Library Editor closes without deleting the item, and without saving any changes that you have made in the Tag Library Editor since opening it.

  5. To permanently delete the item, click OK.

Related topics

Managing tag libraries

Adding libraries, tags, and attributes

Editing libraries, tags, and attributes


Importing custom tags into Dreamweaver

You can import custom tags into Dreamweaver so that they become an integral part of the authoring environment. For example, when you start typing a custom tag in Code view, the Code Hints feature automatically lists the tag’s attributes and lets you choose one.

This section covers the following topics:

  • Importing tags from XML files
  • Importing custom ASP.NET tags
  • Importing JSP tags from a file
  • Importing JSP tags from a server (web.xml)
  • Importing JRun tags


Importing tags from XML files

You can import tags from an XML Document Type Definition (DTD) file or a schema.

To import tags from an XML DTD or schema:
  1. Open the Tag Library Editor (Edit > Tag Libraries).
  2. Click the plus (+) button and choose DTD Schema > Import XML DTD or Schema File.
  3. Enter the file or URL of the DTD or schema file.
  4. Enter the prefix to be used with the tags.

    5. The prefix is used to identify a tag on a page as part of a particular tag library.

  5. Click OK.


Importing custom ASP.NET tags

You can import custom ASP.NET tags into Dreamweaver.

Before you begin, make sure that the custom tag is installed on the testing server defined in the Site Definition dialog box (see Specifying where dynamic pages can be processed). Compiled tags (.dll files) must be placed in the site root’s bin folder. Non-compiled tags (.ascx files) can reside in any virtual directory or subdirectory on the server. For more information, see the Microsoft ASP.NET documentation.

To import ASP.NET custom tags into Dreamweaver:
  1. Open an ASP.NET page in Dreamweaver.
  2. Open the Tag Library Editor (Edit > Tag Libraries).
  3. Click the plus (+) button and choose one of the following:
    • To import all the ASP.NET custom tags from the application server, choose ASP.NET > Import All ASP.NET Custom Tags.
    • To import only certain custom tags from the application server, choose ASP.NET > Import Selected ASP.NET Custom Tags.

      • The Import Selected ASP.NET Custom Tags dialog box appears, listing every ASP.NET custom tag installed on the application server. Control-click (Windows) or Command-click (Macintosh) tags from the list and click OK.


Importing JSP tags from a file

You can import a JSP tag library into Dreamweaver from a variety of file types.

To import a JSP tag library into Dreamweaver:
  1. Open a JSP page in Dreamweaver.
  2. Open the Tag Library Editor (Edit > Tag Libraries).
  3. Click the plus (+) button and choose JSP > Import From File (*.tld, *.jar, *.zip).
  4. Specify the .tld, .jar, or .zip file containing the tag library.
  5. Enter a URI to identify the tag library.

    6. The URI (Uniform Resource Identifier) often consists of the URL of the organization maintaining the tag library. The URL is not used to access the organization; it is used to uniquely identify the tag library.

  6. Enter the prefix to be used with the tags.

    7. The prefix is used to identify a tag on a page as part of a particular tag library.

  7. Click OK.


Importing JSP tags from a server (web.xml)

You can import JSP tags from a server.

To import JSP tags from a server:
  1. Open a JSP page in Dreamweaver.
  2. Open the Tag Library Editor (Edit > Tag Libraries).
  3. Click the plus (+) button and choose JSP > Import From Server (web.xml).

    4. The Import from Server dialog box appears.

  4. Select a tag library.
  5. Enter a URI to identify the tag library.

    6. The URI (Uniform Resource Identifier) often consists of the URL of the organization maintaining the tag library. The URL is not used to access the organization; it is used to uniquely identify the tag library.

  6. Click OK.


Importing JRun tags

If you use Macromedia JRun, you can import your JRun tags into Dreamweaver.

To import JRun tags into Dreamweaver:
  1. Open a JSP page in Dreamweaver.
  2. Open the Tag Library Editor (Edit > Tag Libraries).
  3. In the Tag Library Editor, click the plus (+) button and choose JSP > Import JRun Server Tags From Folder.
  4. Specify a folder containing the JRun tags.
  5. Enter a URI to identify the tag library.
  6. Enter the prefix to be used with the tags.

    7. The prefix is used to identify a tag on a page as part of a particular tag library.

  7. If you are finished making changes, click OK to close the Tag Library Editor.


Using an external HTML editor with Dreamweaver

You can launch an external HTML or text editor from Dreamweaver to edit the source code for the current document and then switch back to Dreamweaver to continue editing graphically. Dreamweaver detects any changes that have been saved to the document externally and prompts you to reload the document upon returning.

You can use the following integrated HTML editors: Macromedia HomeSite (Windows only) or BBEdit (Macintosh only). You can also use any other text editor, such as Notepad, SimpleText, vi, emacs, and TextPad.


Using an integrated HTML editor

When you install Dreamweaver, you can install HomeSite in Windows or a trial version of BBEdit on the Macintosh. Dreamweaver is tightly integrated with both of these products.

Because of this integration, you can edit a document in both Dreamweaver and HomeSite/BBEdit, switching from one application to the other, and the document is kept in sync automatically in both applications. In addition, both programs track the current selection; for example, if you select text in Dreamweaver and switch to BBEdit, the same element is selected in BBEdit.


Using HomeSite (Windows only)

You don’t need to enable integration for HomeSite; it’s integrated automatically when the program is installed.

To use HomeSite:
  1. Choose Edit > Edit with HomeSite.
  2. Edit the document in HomeSite and save your changes.
  3. To return to Dreamweaver, click Dreamweaver in the Editor toolbar.


Using BBEdit (Macintosh only)

You can disable BBEdit integration if you prefer to work with an older version of BBEdit or a different HTML text editor. Selections are not tracked if BBEdit integration is turned off.

To use BBEdit with Dreamweaver:
  1. Choose Edit > Edit with BBEdit.
  2. Edit the document in BBEdit.
  3. Click the Dreamweaver button on the HTML Tools palette in BBEdit to return to Dreamweaver.
To disable BBEdit integration:
  1. Choose Edit > Preferences or Dreamweaver > Preferences (Mac OS X), and select File Types/Editors.
  2. Deselect Enable BBEdit Integration and click OK.


Using external editors

You can open other external editors from Dreamweaver, but the document is not kept in sync in both applications like it is with HomeSite or BBEdit. When you are finished making changes in the external editor, you must manually refresh the document in Dreamweaver.

To choose an external HTML editor:
  1. Choose Edit > Preferences or Dreamweaver > Preferences (Mac OS X), and select File Types/Editors.
  2. (Macintosh only) To use an HTML editor other than BBEdit, deselect the Enable BBEdit Integration option. To use BBEdit, leave Enable BBEdit Integration selected and skip the rest of these steps.
  3. Click the Browse button beside the External Code Editor text box and choose a text editor.
  4. In the Reload Modified Files option, specify what you want Dreamweaver to do when it detects that changes have been made externally to a document that is open in Dreamweaver.
  5. In the Save on Launch option, specify whether Dreamweaver should always save the current document before launching the editor, never save the document, or prompt you to ask whether to save or not each time you launch the external editor.
To launch an external HTML editor:

Choose Edit > Edit with [editor name].

Related topics

Opening files in Code view by default

Setting external image editor preferences

Launching an external editor for media files


Setting the Tag Library Editor dialog box options

The purpose of this dialog box is to add, edit, and delete tag libraries, tags, and attributes, and to import tag libraries.

Tasks

Adding libraries, tags, and attributes

Editing libraries, tags, and attributes

Deleting libraries, tags, and attributes

Importing custom tags into Dreamweaver

Previous


Coding in Dreamweaver

Macromedia Dreamweaver MX offers a full-featured coding environment designed for any type of web development, from writing simple HTML pages to designing, testing, and deploying complex web applications.

This chapter contains the following topics:

  • About the Dreamweaver coding environment
  • Writing and editing code
  • Copying and pasting code
  • Searching and replacing tags and attributes
  • Accessing language references

For information on migrating from Macromedia HomeSite to Dreamweaver, visit the Dreamweaver MX Support Center.

Related topics

Setting Up Your Coding Environment

Optimizing and Debugging Your Code

Editing Code in Design View

Next


About the Dreamweaver coding environment

The coding environment in Dreamweaver gives you full access to the code in your pages. This section covers the following topics:

  • Supported file types
  • How Dreamweaver respects your code
  • About Roundtrip HTML
  • About the code inserted by server behaviors
Related topic

Viewing your code


Supported file types

For client-side coding, you can work on numerous file types in Dreamweaver, including HTML, XML, Cascading Style Sheets (CSS), JavaScript, VBScript, Wireless Markup Language (WML), Extension Data Markup Language (EDML), Dreamweaver template (.dwt), and Text.

For server-side coding, you can work with the following types of files: ColdFusion, ColdFusion component (.cfc), ASP.NET Visual Basic, ASP.NET C#, ASP VBScript, ASP JavaScript, JSP, and PHP. You can also create stand-alone C#, Visual Basic, and Java files.

Related topics

How Dreamweaver respects your code

About Roundtrip HTML


How Dreamweaver respects your code

Dreamweaver generates valid, clean code in both its coding and visual environments. Dreamweaver also respects the code that you write by hand or that another editor generates. Dreamweaver never rewrites your code. For example, Dreamweaver does not alter your white space or change the case of attributes. If you choose the View > Code View Options > Highlight Invalid HTML option, Dreamweaver highlights any errors in yellow. Optionally, you can clean up your code according to criteria that you specify. You can also customize how Dreamweaver formats code. For more information, see Setting coding preferences.

Related topics

About Roundtrip HTML

About the code inserted by server behaviors


About Roundtrip HTML

Roundtrip HTML lets you move your documents back and forth between a text-based HTML editor and Dreamweaver with little or no effect on the content and structure of the document’s original HTML source code. Its key features include the following:

  • By default, when you switch back to Dreamweaver from an external editor, or when you open an HTML document that was not created with Dreamweaver, Dreamweaver rewrites overlapping tags, adds required closing tags, and removes extra closing tags. However, Dreamweaver does not make any other changes in the code, even if the code is invalid, provided that browsers can properly render the invalid code.

    • You can disable code rewriting (see Setting code rewriting preferences).

  • Dreamweaver does not change tags it doesn’t recognize—including XML tags—because it has no criteria by which to judge them. If an unrecognized tag overlaps another tag (for example, <MyNewTag><b>text</MyNewTag></b>), Dreamweaver marks it as an error but doesn’t rewrite the code.
  • Optionally, you can set Dreamweaver to highlight in yellow invalid HTML that browsers don’t support. When you select a highlighted section, the Property inspector displays information on how to correct the error.
  • Dreamweaver lets you launch a third-party text editor to edit the current document. For more information, see Using an external HTML editor with Dreamweaver.

Related topic

How Dreamweaver respects your code


About the code inserted by server behaviors

When you develop a dynamic page and choose a server behavior from the Server Behaviors panel, Dreamweaver inserts one or more code blocks (or “participants”) into your page to make the server behavior work.

If you change the code within a participant, you can no longer use a visual tool to edit or delete the server behavior. Dreamweaver looks for specific patterns in the page code to detect server behaviors and display them in the Server Behaviors panel. If you change a participant’s code in any way, including changing word spacing and line breaks, Dreamweaver can no longer detect the server behavior and display it in the Server Behaviors panel. However, the server behavior still exists on the page, and you can edit it in the coding environment in Dreamweaver.

Related topics

How Dreamweaver respects your code

Optimizing the Workspace for Visual Development


Writing and editing code

Dreamweaver offers several features to help you write and edit code efficiently. This section covers these features, as follows:

  • Using Code Hints
  • Working with code snippets
  • Inserting code quickly with the Insert bar
  • Inserting tags with the Tag Chooser
  • Editing tags with tag editors
  • Editing tags with the Tag inspector
  • Indenting code blocks
  • Copying and pasting code
  • Inserting HTML comments
  • Listing JavaScript and VBScript functions in your page


Using Code Hints

Code Hints lets you insert and edit code as you type in Code view (or Code inspector). When you type certain characters, a list appears, suggesting options to complete your entry. You can use this feature to insert or edit code, or just to see the available attributes for a tag, the available parameters for a function, or the available methods for an object.

You can set how long Code Hints waits before displaying a list of options, specify the tags to include in the list of tags, or turn off Code Hints altogether. For more information, see Setting Code Hints preferences.

To insert a tag using Code Hints:
  1. Type a start bracket (<) to display a list of tags.
  2. Press the Escape key to close the list.
  3. Scroll down the list and double-click a tag to insert it.
  4. If the tag supports attributes, press the spacebar to display a list of allowed attributes for the tag. Select an attribute and press Enter.
  5. Type the value for the attribute or, if the attribute takes only certain values, select a value from the list of allowed values for the attribute.
  6. For every attribute that you want to add for the tag, repeat the previous two steps, making sure that you don’t press the spacebar between a value and its end quote (").
  7. Type the end bracket for the tag (>) after the last attribute-value pair.
To edit a tag, do any of the following:
  • To add an attribute, place the insertion point to the left of a tag end bracket (>) and press the spacebar to display a list of any supported attributes for the tag. Insert the attribute and its value as previously described.
  • To change an attribute, delete the attribute and add an attribute, as previously described.
  • To change a value, delete the value and add a value, as previously described.
To insert or edit code for a function or object:
  1. Choose Edit > Preferences > Code Hints or Dreamweaver > Preferences > Code Hints (Mac OS X), then set the preferences to show without any delay.
  2. In Code view (or Code inspector), type your functions or object code as usual.

    3. Whenever you type a keyword or character for which Code Hints is available, a pop-up menu of completion options appears. When desired, select from the list and press Enter.

To configure or disable Code Hints, see Setting Code Hints preferences.


Working with code snippets

Code snippets let you store content for quick reuse. You can create and insert snippets of HTML, JavaScript, CFML, ASP, JSP, and more. Dreamweaver also contains some pre-defined snippets that you can use as a starting point.

You can determine if you want the code snippet to wrap around a selection or to exist only as a block of code. For example, you might link to a page that appears many times in your site, but it’s attached to different objects and text. You can select an object, right-click (Windows) or Control-click a snippet in the Snippets panel, and choose Insert from the pop-up menu. The code for the link will wrap around the selection. You can also comment your snippets to help others to use them properly.

To insert a code snippet:
  1. Place the insertion point in the desired position in the document; to insert a code snippet around a selection, make the selection in the document.
  2. In the Snippets panel (Window > Snippets), double-click the snippet.

    3. You can also right-click (Windows) or Control-click (Macintosh) the snippet, then choose Insert from the pop-up menu.

To create a code snippet:
  1. In the Snippets panel, click the New Snippet icon at the bottom of the panel.

    2. The Snippet dialog box appears.

  2. Complete the dialog box and click OK.

    3. For more information, see Setting the Snippet dialog box options.

To edit or delete a code snippet:
  1. In the Snippets panel, select a snippet and click the Edit Snippet or Remove icon at the bottom of the panel.

    2. You can identify the Edit Snippet or Remove icon by its tooltip.

To create code snippet folders and manage code snippets:
  1. In the Snippets panel, click the New Snippet Folder icon at the bottom of the panel.
  2. Drag snippets in the new folder or other folders, as desired.
To share a snippet with other members of your team:
  1. Find the snippet that you want to share in the Configuration\Snippets folder in the Dreamweaver MX application folder.
  2. Copy the snippet to a shared folder on your computer or a network computer.
  3. Have the other members of the team copy the snippet to their Configuration\Snippets folder.

Anyone with access to the shared folder can now add, edit, and delete snippets from the folder.


Inserting code quickly with the Insert bar

You can use the Insert bar to quickly add code to your page. Simply position the insertion point in the code, then click an icon in the Insert bar. When you click an icon, the code may appear in your page immediately, or a dialog box may appear requesting more information to complete the code.

To find out what each icon does, place the mouse over the icon and wait for a tooltip to appear. The number and type of icons available on the Insert bar varies depending on the document type opened in Dreamweaver. It also depends on whether you’re using Code view or Design view.

Though the Insert bar provides a collection of frequently used tags, it is not comprehensive. To choose from a more comprehensive selection of tags, use the Tag Chooser (Inserting tags with the Tag Chooser).


Inserting tags with the Tag Chooser

You can use the Tag Chooser to insert in your page any tag in the Dreamweaver tag libraries (which include ColdFusion and ASP.NET tag libraries). For more information on the tag libraries, see Managing tag libraries.

To insert a tag using Tag Chooser:
  1. Position the insertion point in the code, then right-click (Windows) or Control-click (Macintosh) and choose Insert Tag.

    2. The Tag Chooser appears. The left pane contains a list of supported tag libraries, and the right pane shows the individual tags in the selected tag library folder.

  2. Select a tag from the list.
  3. If you want to view syntax and usage information for the tag, click the Tag Info button.

    4. If available, help for the tag displays in the dialog box.

  4. If you want reference information about the tag, click the <?> icon.

    5. If available, reference information about the tag appears in the Reference panel.

  5. Click Insert to insert the selected tag into your code.

    6. Tags that don’t require additional information, which appear in the right pane with brackets (for example, <HTML></HTML>), are inserted into the document at the insertion point. All other tags display their own tag editor.

  6. If a tag editor opens, enter the additional information and click OK.

    7. See Editing tags with tag editors.


Editing tags with tag editors

Tag editors let you specify or edit the attributes for a tag using a dialog box. If you use the Tag Chooser to insert a tag, and the tag requires additional information, its tag editor appears automatically. Otherwise, the following procedure explains how to open the tag editor for a tag. For more information, see Inserting tags with the Tag Chooser.

To access the tag editor of a tag:
  1. Place the insertion point within a tag.
  2. Right-click (Windows) or Control-click (Macintosh) and select Edit Tag from the pop-up menu.
  3. Make your changes and click OK.

Tip: To get more information about the tag within the tag editor, click Tag Info.


Editing tags with the Tag inspector

You can use the Tag inspector to edit tags in a property sheet similar to the ones found in other integrated development environments (IDEs).

To edit a tag using the Tag inspector:
  1. Make sure the Tag inspector is open (Window > Tag Inspector).
  2. In Code view (or Code inspector), click anywhere inside a tag.

    3. If the tag supports attributes, Dreamweaver displays the attributes and their current values in the Tag inspector’s property sheet.

  3. Make the changes to the tag in the property sheet.

    4. Click an attribute name to type a value or, if the attribute takes pre-defined values, to select from a list.

  4. If the attribute takes a value from a source of dynamic content (like a database), click the lightning bolt icon at the end of the selected attribute’s row and select the source.

    5. For information on defining sources of dynamic content, see Defining Sources of Dynamic Content.

  5. Click elsewhere in the panel to update the tag in your document.


Indenting code blocks

As you write and edit your code in Code view or Code inspector, you can indent code blocks to visually separate the block from the rest, making it easier to find.

To indent a code block:
  1. Select the line or lines of the code block that you want to indent. (You must select the entire line.)
  2. Choose Edit > Indent Code.

The code is indented. Choose Edit > Outdent Code to move the indented code back.


Copying and pasting code

You can copy and paste source code from another application or from Code view itself. You can copy and paste the code as text or as code with tags intact.

To copy and paste source code as text:
  1. Copy the code from Dreamweaver or another application.
  2. Place the insertion point directly in Design view, and choose Edit > Paste.
To copy and paste source code with tags intact:
  1. Copy the code from Dreamweaver or another application.

    2. To copy from Design view, choose Edit > Copy as HTML.

  2. Do one of the following:
    • In Code view, position the insertion point, and choose Edit > Paste. If you are using Design view, press F5 to update its display of the document.
    • In Design view, position the insertion point, and choose Edit > Paste as HTML.


Inserting HTML comments

A comment is descriptive text that you insert in the HTML code to explain the code or provide other information. The text of the comment appears only in Code view and will not display in your web page in the browser.

To insert a comment:
  1. In Code view or Design view, place the insertion point where you want the comment.
  2. Click the Comment icon on the Common tab of the Insert bar.

    3. Use the tooltips to identify the Comment icon.

    • In Code view, Dreamweaver inserts a <!-- --> tag in the page. Enter your comment inside the tag.
    • In Design view, Dreamweaver displays the Comment dialog box. Enter your comment and click OK.

To display comment markers in Design view, choose View > Visual Aids > Invisible Elements. Make sure that comments are selected in the Invisible Elements preferences, or the comment marker will not appear.

To add to an existing comment, do one of the following:
  • Select the Comment marker in Design view and enter text in the Property inspector.
  • Find the comment in the code and add text directly to it.


Listing JavaScript and VBScript functions in your page

You can view all of the JavaScript or VBScript functions in a page open in Code view.

To view the script functions in a page:
  1. Open the document in Code view
  2. Make sure the Document toolbar is displayed (View > Toolbars > Document).
  3. Click the Code Navigation icon in the toolbar.

    4. The icon consists of a pair of braces ({ }).

    Note: The icon is disabled in Design view.

If your code contains JavaScript or VBScript functions, they will appear in the pop-up menu. To see the functions listed in alphabetical order, hold down Control (Windows) or Option (Macintosh) while clicking the Code Navigation button.

To go to a function in your code:

Select a function from the Code Navigation pop-up menu. The function will be highlighted in Code view (or the Code inspector).


Searching and replacing tags and attributes

You can use Dreamweaver to search and replace tags and attributes in your code. This section covers the following topics:

  • About HTML source code searches
  • Searching for tags and attributes
  • Searching for text contained in specific tags
  • Saving search patterns
  • About regular expressions


About HTML source code searches

Use the Source Code option in the Find or Replace dialog box to search for specific text strings in the HTML source code. For example, a search for black dog in the following code would produce two matches (in the alt attribute and in the first sentence):

<img src="barnaby.gif" width="100" height="100"
alt="Barnaby, a black dog."><br>
We saw several black dogs in the park yesterday. The black
<a href="barnaby.html">dog</a> we liked best was called Barnaby.

The phrase black dog also appears in the second sentence, but it doesn’t match because it’s interrupted by a link.

For more information, see Searching and replacing text.

Related topics

Searching for tags and attributes

Searching for text contained in specific tags

Saving search patterns

About regular expressions


Searching for tags and attributes

Use the Specific Tag option in the Find or Replace dialog box to search for specific tags, attributes, and attribute values. For example, you can search for all img tags with no alt attribute.

To perform a tag search:
  1. Choose Edit > Find and Replace, and specify which files to search.
  2. Choose Specific Tag from the Search For pop-up menu.
  3. Choose a specific tag from the pop-up menu next to Search For pop-up menu, enter a tag, or choose [any tag].

    4. If you only want to search for all occurrences of the specified tag, press the minus (-) button and skip to step 6. Otherwise, proceed with step 4.

  4. Limit the search with one of the following tag modifiers:
    • With Attribute chooses an attribute that must be in the tag for it to match. You can specify a particular value for the attribute or choose [any value].
    • Without Attribute chooses an attribute that can’t be in the tag for it to match. For example, choose this option to search for all IMG tags with no ALT attribute.
    • Containing specifies text or a tag that must be contained within the original tag for it to match. For example, in the code <b><font face="Arial">heading 1</font></b>, the font tag is contained within the b tag.
    • Not Containing specifies text or a tag that can’t be contained within the original tag for it to match.
    • Inside Tag specifies a tag that the target tag must be inside of for it to match.
    • Not Inside Tag specifies a tag that the target tag can’t be inside of for it to match.
  5. Click the plus (+) button and repeat step 4 to limit the search further.
  6. Initiate the search:
    • Click Find Next to highlight the next instance of the tag in the current document, then in any subsequent document if searching in more than one document.
    • Click Find All to generate a list of all the instances of the tag in the current document or, if you are searching a directory or site, generate a list of documents that contain the tag. The list appears in the Search tab of the Results panel.

Related topics

Searching for text contained in specific tags

Saving search patterns

About regular expressions


Searching for text contained in specific tags

Use the Text (Advanced) option in the Find or Replace dialog box to search for specific text strings that are either within or not within a set of container tags. For example, you can search for the word Untitled between <title> tags to find all the untitled pages on your site.

To perform an advanced text search:
  1. Choose Edit > Find and Replace, and specify the files to search.
  2. Choose Text (Advanced) from the Search For pop-up menu.
  3. Enter the text you want to search for in the text field adjacent to the Search For pop-up menu.

    4. For example, type the word Untitled.

  4. Choose Inside Tag or Not Inside Tag, and then choose a tag from the adjacent pop-up menu.

    5. For example, choose Inside Tag and then title.

  5. Click the plus (+) button to limit the search to tags with a specific attribute or attributes.

    6. Since the <title> tag has no attributes, you won’t need to use this option to find all the untitled pages on your site.

  6. Initiate the search:
    • Click Find Next to highlight the next instance of the text in the current document, then in any subsequent document if searching in more than one document.
    • Click Find All to generate a list of all the instances of the text in the current document or, if you are searching a directory or site, generate a list of documents that contain the tag. The list appears in the Search tab of the Results panel.

Related topics

Searching for tags and attributes

Saving search patterns

About regular expressions


Saving search patterns

You can save search patterns for later use by clicking the Save Query icon (the disk icon) in the Find or Replace dialog box. Saving a query is a good idea if you regularly perform the same search and don’t want to reconstruct the search pattern every time. For example, you might want to strip out nonstandard tags from documents created with another visual HTML editor, or to confirm that all images in a file have height, width, and alt attributes before the document goes live on the web.

To save a search pattern:
  1. In the Find and Replace dialog box (Edit > Find and Replace), set the parameters for the search.

    2. If you are performing a tag or advanced text search, see Searching for tags and attributes or Searching for text contained in specific tags for information about setting additional search parameters.

  2. Click the Save Query icon (the disk icon).

    3. The default location where queries are saved is the Configuration/Queries folder inside the Dreamweaver application folder.

  3. In the dialog box that appears, give the file a name that identifies the query and click Save.

    4. For example, if the search pattern involves looking for img tags with no alt attribute, you might name the query img_no_alt.dwr. Find queries that end in the extension .dwq; replace queries that end in the extension .dwr.

To recall a search pattern:
  1. Choose Edit > Find and Replace.
  2. Click the Load Query button (the folder icon).

    3. The Load Query dialog box automatically opens in the Configuration/Queries folder. You can navigate to another folder if you have saved queries elsewhere.

  3. Select a query file and click Open.

    4. If you are in the Find dialog box, only Find queries (.dwq files) are available. If you are in the Replace dialog box, both Find queries (.dwq files) and Replace queries (.dwr files) are available.

  4. Click Find Next, Find All, Replace, or Replace All to initiate the search.

Related topics

Searching for tags and attributes

Searching for text contained in specific tags

About regular expressions


About regular expressions

Regular expressions are patterns that describe character combinations in text. Use them in your searches to help describe concepts such as “sentences that begin with ‘The’” and “attribute values that contain a number.” The following table lists the special characters in regular expressions, their meanings, and usage examples.

To search for text containing one of the special characters in the table, “escape” the special character by preceding it with a backslash. For example, to search for the actual asterisk in the phrase some conditions apply*, your search pattern might look like this: apply\*. If you don’t escape the asterisk, you’ll find all the occurrences of “apply” (as well as any of “appl”, “applyy”, and “applyyy”), not just the ones followed by an asterisk.

Character | Matches | Example
^ | Beginning of input or line. | ^T matches “T” in “This good earth” but not in “Uncle Tom’s Cabin”
$ | End of input or line. | h$ matches “h” in “teach” but not in “teacher”
* | The preceding character 0 or more times. | um* matches “um” in “rum”, “umm” in “yummy”, and “u” in “huge”
+ | The preceding character 1 or more times. | um+ matches “um” in “rum” and “umm” in “yummy” but nothing in “huge”
? | The preceding character at most once (that is, indicates that the preceding character is optional). | st?on matches “son” in “Johnson” and “ston” in “Johnston” but nothing in “Appleton” or “tension”
. | Any single character except newline. | .an matches “ran” and “can” in the phrase “bran muffins can be tasty”
x|y | Either x or y. | FF0000|0000FF matches “FF0000” in bgcolor=”#FF0000” and “0000FF’” in font color=”#0000FF”
{n} | Exactly n occurrences of the preceding character. | o{2} matches “oo” in “loom” and the first two o’s in “mooooo” but nothing in “money”
{n,m} | At least n, and at most m, occurrences of the preceding character. | F{2,4} matches “FF” in “#FF0000” and the first four F’s in #FFFFFF
[abc] | Any one of the characters enclosed in the brackets. Specify a range of characters with a hyphen (for example, [a-f] is equivalent to [abcdef]). | [e-g] matches “e” in “bed”, “f” in “folly”, and ”g” in “guard”
[^abc] | Any character not enclosed in the brackets. Specify a range of characters with a hyphen (for example, [^a-f] is equivalent to [^abcdef]). | [^aeiou] initially matches “r” in “orange”, “b” in “book”, and “k” in “eek!”
\b | A word boundary (such as a space or carriage return). | \bb matches “b” in “book” but nothing in “goober” or “snob”
\B | A nonword boundary. | \Bb matches “b” in “goober” but nothing in “book”
\d | Any digit character. Equivalent to [0-9]. | \d matches “3” in “C3PO” and “2” in “apartment 2G”
\D | Any nondigit character. Equivalent to [^0-9]. | \D matches “S” in “900S” and “Q” in “Q45”
\f | Form feed. |
\n | Line feed. |
\r | Carriage return. |
\s | Any single white-space character, including space, tab, form feed, or line feed. | \sbook matches ”book” in “blue book” but nothing in “notebook”
\S | Any single non-white-space character. | \Sbook matches “book” in “notebook” but nothing in “blue book”
\t | A tab. |
\w | Any alphanumeric character, including underscore. Equivalent to [A-Za-z0-9_]. | b\w* matches “barking” in “the barking dog” and both “big” and “black” in “the big black dog”
\W | Any non-alphanumeric character. Equivalent to [^A-Za-z0-9_]. | \W matches “&” in “Jake & Mattie” and “%” in “100%”
Control+Enter or Shift+Enter (Windows), or Control+ Return or Shift+Return or Command+ Return (Macintosh) | Return character. Make sure that you deselect the Ignore Whitespace Differences option when searching for this, if not using regular expressions. Note that this matches a particular character, not the general notion of a line break; for instance, it doesn’t match a <br> tag or a <p> tag. Return characters appear as spaces in the Document window, not as line breaks. |

Use parentheses to set off groupings within the regular expression to be referred to later; use $1, $2, $3, and so on (use ($) in the Find field and use the backslash (\) in the Replace field) to refer to the first, second, third, and later parenthetical groupings. For example, searching for (\d+)\/(\d+)\/(\d+) and replacing it with $2/$1/$3 swaps the day and month in a date separated by slashes (to convert between American-style dates and European-style dates).

Related topics

Searching for tags and attributes

Searching for text contained in specific tags

Saving search patterns


Accessing language references

The Reference panel provides you with a quick reference tool for markup languages, JavaScript objects, and CSS styles with their attributes. The Reference panel provides you with information on the specific tags, objects, or styles that you are working with in Code view (or Code inspector).

To open the Reference panel:
  1. In Code view, right-click (Windows) or Control-click (Macintosh) a tag, attribute, or keyword.
  2. Choose Reference from the pop-up menu.

The Reference panel opens and displays information about the tag, attribute, or keyword you clicked. To adjust the text size in the Reference panel, select Large Font, Medium Font, or Small Font from the options menu (small arrow at top-right of panel).

The Book pop-up menu displays the name of the book that the reference material comes from. To display tags, objects, or styles from another book, choose a different book from the Book pop-up menu.

This is a picture of the feature being described.

The Tag, Object, or Style (depending on which book you have selected) pop-up menu displays the tag, object, or style that you selected in the Code view (or Code inspector). To view information about another tag, object, or style, select a new one from the menu.

Next to the Tag, Object, or Style pop-up menu is a menu that contains the list of attributes for the tag you choose. The default selection is Description, which displays a description of the chosen tag. You can also select an attribute from the menu to view more information about it.


Reference

This section provides information about the dialog boxes and panels introduced in this chapter.


Setting the Snippet dialog box options

The purpose of this dialog box is to create or edit a code snippet for the Snippets panel.

Procedure
  1. In the Name text box, enter a name for the snippet.

    2. Note: Snippet names can’t contain characters that are invalid in filenames, such as slashes(/ or \), special characters, or double quotes (“).

  2. (Optional) In the Description text box, enter descriptive text for the snippet. This makes it easier for other team members to use the snippet.
  3. For Snippet Type, choose Wrap Selection or Insert Block.
  4. If you chose Wrap Selection, complete any of the following text boxes:
    • Insert Before Type or paste in the code you want inserted before the current selection. To set a default spacing between the blocks, press Enter at the end of the start text and at the beginning of the end text.
    • Insert After Enter the code you want inserted after the selection.
  5. If you chose Insert Block, type or paste your code into the Code box.
  6. (Optional) In the Preview pane, select a Preview type: Code or Design.

    7. If you select Design, Dreamweaver renders the code and shows it to you in the Preview pane of the Snippets panel. If you select Code, then Dreamweaver shows only the code in the Preview pane.

  7. Click OK.

Note: Because snippets can be created as start and end blocks, you can use them to surround other tags and content. This is useful for inserting special formatting, links, navigation elements, and script blocks. Simply highlight the content you want to surround, then insert the snippet.

Related topic

Working with code snippets


Setting the Comment dialog box options

The purpose of this dialog box is to enter an HTML comment in a page in Design view.

Procedure

Enter the comment and click OK.

Related topic

Inserting HTML comments


Setting the Comment Property inspector options

The purpose of this Property inspector is to modify an HTML comment in a page.

Procedure

Modify the comment.

Related topic

Inserting HTML comments

Previous


Optimizing and Debugging Your Code

You can use Macromedia Dreamweaver MX to optimize and debug your code. For example, you can validate your tags, make your document XHTML compliant, or debug your JavaScripts.

This chapter covers the following topics:

  • Cleaning up your code
  • Verifying that tags and braces are balanced
  • Validating your tags
  • Making pages XHTML compliant
  • Using the JavaScript debugger
  • Using the ColdFusion debugger
Next


Cleaning up your code

Use the Clean Up HTML or Clean Up XHTML command to remove empty tags, combine nested font tags, and otherwise improve messy or unreadable HTML/XHTML code.

For an XHTML document, the Clean Up XHTML command fixes syntax errors, sets the case of tag attributes to lowercase, and adds or reports the missing required attributes for a tag. (After executing the Clean Up XHTML command, a dialog box appears, listing the number of img and area tags that don’t have an alt attribute.)

To clean up HTML generated from a Microsoft Word document, see Cleaning up Microsoft Word HTML.

To clean up the code:
  1. Open a document.
    • If the document is in HTML, choose Commands > Clean Up HTML.
    • If the document is in XHTML, choose Commands > Clean Up XHTML.
  2. In the dialog box that appears, select from the following options:
    • Remove Empty Container Tags removes any tags that have no content between them. For example, <b></b> and <font color="FF0000"></font> are considered empty tags, but the <b> tag in <b>some text</b> is not.
    • Remove Redundant Nested Tags removes all redundant instances of a tag. For example, in the code <b>This is what I <b>really</b> wanted to say </b>, the b tags surrounding the word “really” are redundant and would be removed.
    • Remove Non-Dreamweaver HTML Comments removes all comments that were not inserted by Dreamweaver. For example, <!--begin body text--> would be removed, but <!-- #BeginEditable "doctitle" --> wouldn’t, because it’s a Dreamweaver comment that marks the beginning of an editable region in a template.
    • Remove Dreamweaver Special Markup
    • Remove Specific Tag(s) removes the tags specified in the adjacent text field. Use this option to remove custom tags inserted by other visual editors and other tags that you don’t want to appear on your site (for example, blink). Separate multiple tags with commas (for example, font, blink).
    • Combine Nested <font> Tags When Possible consolidates two or more font tags when they control the same range of text. For example, <font size="7"><font color="#FF0000">big red</font></font> would be changed to <font font="7" font="#FF0000">big red</font>.
    • Show Log on Completion displays an alert box with details about the changes made to the document as soon as the cleanup is finished.
  3. Click OK.

    4. Depending on the size of your document and the number of options selected, it may take several seconds to complete the cleanup.


Verifying that tags and braces are balanced

As you write and edit your code in Code view or the Code inspector, you can check to make sure the tags or braces ({ }) in the page are balanced. Checking to see if tags are balanced ensures that all tags have matching opening tags and closing tags, and is especially useful when you use multiple nesting levels in your code—for example, if you have nested tables within other tables.

To check for balanced tags:
  1. Open the document in Code view.
  2. Place the insertion point in the nested code you want to check.
  3. Choose Edit > Select Parent Tag.

    4. The enclosing matching tags are highlighted in your code. If you keep choosing Edit > Select Parent Tag, and your tags are balanced, eventually Dreamweaver will highlight the outermost <html> and </html> tags.

To check for balanced braces:
  1. Open the document in Code view.
  2. Place the insertion point in the nested code you want to check.
  3. Choose Edit > Balance Braces.

    4. The enclosing matching tags are highlighted in your code. Choosing Edit > Balance Braces again will highlight the matching tags that enclosed the previous selection.


Validating your tags

You can use the Dreamweaver Validator to find out if your code has tag or syntax errors. The Validator supports many tag-based languages, including several versions of HTML, XHTML, ColdFusion Markup Language (CFML), JavaServer Pages (JSP), and Wireless Markup Language (WML). You can also validate an XML document.

Note: To validate your document for accessibility, see Testing your website for accessibility.

You can set preferences for the Validator, such as specifying the tag-based languages against which the Validator should check, the specific problems that the Validator should check, and the types of errors that the Validator should report. For more information, see Setting Validator preferences.

You can run the Validator for the current document or for a selected tag.

To run the validator:
  1. Do one of the following:
    • For an XML (or XHTML) file, choose File > Check Page > Validate as XML.
    • Otherwise, choose File > Check Page > Validate Markup.

      • The Validation tab of the Results panel displays either a “No errors or warnings” message or lists the syntax errors it found.

  2. Double-click an error message to highlight it in the document.
  3. Right-click (Windows) or Control-click (Macintosh) in the report to save it as an XML file or to view it in a browser (which lets you print the report).


Making pages XHTML compliant

This section describes XML and XHTML, XHTML requirements, Cascading Style Sheets (CSS) requirements for XHTML, and how to create XHTML-compliant documents.

This section covers the following topics:

  • About XML and XHTML
  • About the XHTML code generated by Dreamweaver
  • Using Cascading Style Sheets (CSS) with XHTML
  • Making documents XHTML compliant


About XML and XHTML

Extensible Markup Language, or XML, defines the structure of information, or how the information could be stored in a database. For example, an XML language for cooking could have a <recipe> tag, and <recipe> could contain tags for <header>, <ingredients>, and <instructions>. The power of XML lies in the fact that the information can be stored and retrieved from a database, rendered in a variety of formats, and used for a variety of purposes (for example, on a web page, hand-held computer, or cell phone; or for a cookbook, recipe card club, or book about cilantro).

Extensible Hypertext Markup Language, or XHTML, is a reformulation of HTML as an XML application. It’s almost identical to HTML 4.01, but it’s more strict and clean.


Benefits of XHTML

Generally, using XHTML lets you realize the benefits of XML, while ensuring the backward and future compatibility of your web documents. Following are some specific reasons to use XHTML:

  • XHTML is designed to replace HTML. If you want your Internet website to be visible and properly rendered in the future, it’s a sound investment to begin coding in XHTML now.
  • XHTML is designed to be operable across devices, not just on PCs.
  • XHTML is an XML language, so it offers the potential for extensibility. You can also use standard XML tools to view, edit, and validate your XHTML documents.
  • XHTML documents can use applications such as scripts and applets that rely on the HTML Document Object Model or the XML Document Object Model.
  • XHTML requires quality code. This reduces the discrepancies between how different user agents, such as web browsers, render a web document, since many of these discrepancies are caused by incorrect or poorly formatted code.


Migrating from HTML to XHTML

XHTML works with browsers and other user agents that support HTML 4, as well as those that support XML. So you can switch to XHTML without excluding anyone or waiting for XML user agents to become more prevalent. Because XHTML is so similar to HTML, it’s not difficult to switch from HTML to XHTML.


Web resources for XHTML

For more information about XHTML, see the World Wide Web Consortium (W3C) website, which contains the specification for XHTML 1.1 - Module-Based XHTML (http://www.w3.org/TR/xhtml11/) and XHTML 1.0 (http://www.w3c.org/TR/xhtml1/), as well as XHTML validator sites for web-based files (http://validator.w3.org/) and local files (http://validator.w3.org/file-upload.html).

Related topics

About the XHTML code generated by Dreamweaver

Using Cascading Style Sheets (CSS) with XHTML

Making documents XHTML compliant


About the XHTML code generated by Dreamweaver

Dreamweaver generates XHTML code, and cleans up existing XHTML code, in a way that meets many of the XHTML requirements automatically. For the few XHTML requirements that remain, Dreamweaver provides you with the tools that you need.

Note: Some of the requirements described in this section are also required in various versions of HTML.

The following table describes the XHTML requirements that Dreamweaver meets automatically.

XHTML requirement
To meet this requirement, Dreamweaver does this...
When the character encoding of a document is other than the default UTF-8, the document must have an XML declaration.
Adds an XML declaration to an XHTML document and specifies the encoding; for example:
<?xml version="1.0" encoding="iso-8859-1"?>
There must be a DOCTYPE declaration in the document prior to the root element, and the declaration must reference one of the three Document Type Definition (DTD) files for XHTML (strict, transitional or frameset).
Adds an XHTML DOCTYPE to an XHTML document:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Or, if the XHTML document has a frameset:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
The root element of the document must be “html”, and the html element must designate the XHTML namespace.
Adds the namespace attribute to the html element, as follows:
<html xmlns="http://www.w3.org/1999/xhtml">
A standard document must have the head, title, and body structural elements. A frameset document must have the head, title, and frameset structural elements.
Includes the head, title, and body elements in a standard document and, in a frameset document, includes the head, title, and frameset elements.
All elements in the document must nest properly:
<p>This is a <i>bad example.</p></i>
<p>This is a <i>good example.</i></p>
Generates correctly nested code and, when cleaning up XHTML, corrects nesting in code that was not generated by Dreamweaver.
All element and attribute names must be lowercase.
Forces HTML element and attribute names to be lowercase in the XHTML code that it generates, and when cleaning up XHTML, regardless of your tag and attribute case preferences.
Every element must have an end tag, unless it is declared in the DTD as EMPTY.
Inserts end tags in the code that it generates, and when cleaning up XHTML.
Empty elements must have an end tag, or the start tag must end with />. For example, <br> is not valid; the correct form is <br></br> or <br/>. Following are the empty elements: area, base, basefont, br, col, frame, hr, img, input, isindex, link, meta, and param.
And for backwards-compatibility with browsers that are not XML-enabled, there must be a space before the /> (for example, <br />, not <br/>).
Inserts empty elements with a space before the closing slash in empty tags in the code that it generates, and when cleaning up XHTML.
Attributes can’t be minimized; for example,
<td nowrap> is not valid; the correct form is
<td nowrap="nowrap">.
This affects the following attributes: checked, compact, declare, defer, disabled, ismap, multiple, noresize, noshade, nowrap, readonly, and selected.
Inserts full attribute-value pairs in the code that it generates, and when cleaning up XHTML.
Note: If an HTML browser does not support HTML 4, it might fail to interpret these boolean attributes when they appear in their full form.
All attribute values must be quoted.
Quotes attribute values in the code that it generates, and when cleaning up XHTML.
The following elements must have an id attribute as well as a name attribute: a, applet, form, frame, iframe, img, and map. For example,
<a name="intro">Introduction</a> is not valid; the correct form is
<a id="intro">Introduction</a> or
<a id="section1" name="intro">
Introduction</a>.
Sets the name and id attributes to the same value, whenever the name attribute is set by a Property inspector, in the code that Dreamweaver generates, and when cleaning up XHTML.
For attributes with values of an enumerated type, the values must be lower case.
An enumerated type value is a value from a specified list of allowed values; for example, the align attribute has the following allowed values: center, justify, left, and right.
Forces enumerated type values to be lowercase in the code that it generates, and when cleaning up XHTML.
All script and style elements must have a type attribute.
(The type attribute of the script element has been required since HTML 4, when the language attribute was deprecated.)
Sets the type and language attributes in script elements, and the type attribute in style elements, in the code that it generates and when cleaning up XHTML.
All img and area elements must have an alt attribute.
Sets these attributes in the code that it generates and, when cleaning up XHTML, reports missing alt attributes.

Related topics

About XML and XHTML

Using Cascading Style Sheets (CSS) with XHTML

Making documents XHTML compliant


Using Cascading Style Sheets (CSS) with XHTML

For certain CSS styles, an HTML user agent (such as a web browser) may produce different visual or aural results than an XML user agent. Following are some rules to reduce these discrepancies:

  • Use lowercase for element and attribute names in CSS style sheets.

    • Dreamweaver forces style element and attribute names to be lowercase in an XHTML document, regardless of your preferences, in the code that it generates and when cleaning up XHTML.

  • HTML parsers infer the tbody element, but XML parsers do not. Therefore, if you define a tbody style, add the tbody element to your tables.
  • CSS defines different conformance rules for HTML and XML documents; therefore, be aware that the HTML rules apply to an XHTML document delivered as HTML, and the XML rules apply to an XHTML document delivered as XML.

Note: In documents that specify the XHTML namespace, browsers and other user agents are expected to continue recognizing the class attribute, and the id attribute as an attribute of type ID. Therefore, you can continue to use the shorthand “.” syntax to reference a CSS class for a selector (for example, P.note); and use the shorthand “#” selector syntax, even if the user agent doesn’t read the DTD.

Related topics

About XML and XHTML

About the XHTML code generated by Dreamweaver

Making documents XHTML compliant


Making documents XHTML compliant

This section describes how to make a new document XHTML compliant, and how to make an existing HTML document XHTML compliant.

To create a new, XHTML-compliant document:
  1. Choose File > New.

    2. The New Document dialog box appears.

  2. Choose a document type.
  3. Select the Make Document XHTML Compliant option.
  4. Click OK.
To create XHTML-compliant documents by default:
  1. Choose Edit > Preferences or Dreamweaver > Preferences (Mac OS X) and select the New Document category.
  2. In the New Document category, choose a document type and select the Make Document XHTML Compliant option.
  3. Click OK.
To make an existing HTML document XHTML compliant:

Open a document.

  • For a document without frames, choose File > Convert > XHTML.
  • For a document with frames, select a frame and choose File > Convert > XHTML. To convert the whole document, repeat this step for every frame and the frameset document.

Note: You can’t convert an instance of a template, because it must be in the same language as the template on which it’s based. For example, an instance of an XHTML template will always be XHTML; and an instance of an HTML template will always be HTML and can’t be converted to XHTML or any other language.

Related topics

About XML and XHTML

About the XHTML code generated by Dreamweaver

Using Cascading Style Sheets (CSS) with XHTML


Using the JavaScript debugger

The JavaScript debugger helps you isolate errors in your client-side JavaScript code. You can write code in Code view (or Code inspector), then run the debugger to check your code for syntax and logical errors. If the page has one or more syntax errors, the browser displays an error message; if your page contains a logical error, your page functions incorrectly but the browser doesn’t display an error message.

You can use the JavaScript debugger with Microsoft Internet Explorer and Netscape Navigator 4.0 (not Netscape Navigator 6.0).

The debugger checks your code for syntax errors first, and then runs with the browser to help you identify any logical errors. If you have logical errors, you can use the JavaScript Debugger dialog box to examine variables and document properties while your program is running. You can set breakpoints (similar to alert statements) in your code to stop the execution of the program and display the values of JavaScript objects and properties in a variable list. You can also step to the next statement or step into a function call to see the variable values change.

This section covers the following topics:

  • Running the JavaScript debugger
  • Finding syntax errors
  • Finding and fixing logical errors
  • Setting breakpoints
  • Stepping through code
  • Watching and editing variable values


Running the JavaScript debugger

After you write your JavaScript code, you can start the JavaScript debugger to check for errors. The debugger checks for syntax errors first, then opens your page in the browser so you can check for logical errors.

To start debugging:
  1. Choose File > Debug in Browser, then select a browser from the list.

    2. In Windows, choose Internet Explorer or Netscape Navigator. In Macintosh, choose Netscape.

    If the debugger finds a syntax error, it stops and lists it in the JavaScript Syntax Errors window. For more information, see Finding syntax errors.

  2. If you are using Netscape Navigator, click OK in the debugger warning box that appears, then click Grant in the Java Security dialog box.

    3. Note: If you have already accepted a Macromedia Security Certificate, the Java Security dialog box may not appear.

  3. (Windows only) If you are using Internet Explorer, click Yes in the Java Security dialog box, and click OK in the debugger warning box that appears.

    4. Note: The security dialog box is necessary because the debugger uses an Internet protocol to connect with the browser—it doesn’t actually make a network connection or connect to any Internet servers.

The JavaScript Debugger dialog box appears with the browser window. The debugger stops automatically at the first line of code.

The following figure shows the toolbar in the JavaScript Debugger dialog box:

This is a picture of the feature being described.

To run the debugger:

At the top of the JavaScript Debugger dialog box, click the Run button.

To stop the debugger:

At the top of the JavaScript Debugger dialog box, click the Stop Debugging button. The JavaScript Debugger dialog box closes.

Related topics

Finding syntax errors

Finding and fixing logical errors

Setting breakpoints

Stepping through code

Watching and editing variable values


Finding syntax errors

If the debugger finds syntax errors in a page, it stops and lists the errors in the JavaScript Syntax Errors dialog box, as shown in the following figure:

This is a picture of the feature being described.

To view the error description:

Select an error in the JavaScript Syntax Errors dialog box. A description of the error appears in the Detailed Description box.

To go to the selected error in your code, do one of the following:
  • Double-click the error.
  • Click Go To Line.

The code is highlighted in Code view, or if Code view is not open, in the Code inspector.

Related topics

Running the JavaScript debugger

Finding and fixing logical errors


Finding and fixing logical errors

When you start the debugger, the JavaScript Debugger dialog box opens and stops the execution of the browser in the first line of your code. You can set additional breakpoints at any line of code. The debugger stops execution of the code at each breakpoint, giving you the opportunity to view the values of JavaScript objects and properties in the variable list pane.

This is a picture of the feature being described.

After the debugger stops at a breakpoint, you can step through your code (execute one statement at a time). This lets you see if the program executes as it should. The debugger can even step into linked code. For example, if your code contains a link to a source file, the debugger steps into the source file and displays it in the JavaScript Debugger dialog box. As you step through the code, you can watch as the values of your variables change through your program.

Related topics

Running the JavaScript debugger

Setting breakpoints

Stepping through code

Watching and editing variable values


Setting breakpoints

A breakpoint marks a spot in the code where you want the program execution to stop. When you set a breakpoint, it’s marked with a small red dot in the left margin of the JavaScript Debugger dialog box. When the program stops executing at that breakpoint, a small arrow appears over the dot, and you can examine the objects and properties that exist at that point. This lets you quickly pinpoint the source of the bug in the JavaScript code.

Breakpoints can only be set in the JavaScript code (between script tags) or on a line with an event handler. If you set a breakpoint elsewhere, Dreamweaver will automatically set the breakpoint on the next valid line of code (or place the insertion point there, if the line already has a breakpoint set on it). If there are no valid lines on which a breakpoint can be set, you will hear a beep.

To set a breakpoint:
  1. In the JavaScript Debugger dialog box, place the insertion point in the line where you want the breakpoint.
  2. In the toolbar, click the Set/Remove Breakpoint button.
  3. To remove the breakpoint, click Set/Remove Breakpoint again.
To remove all breakpoints, do one of the following:
  • At the top of the JavaScript Debugger dialog box, click the Remove All Breakpoints button.
  • In the Code view (or Code inspector), choose Edit > Remove All Breakpoints.

Related topics

Running the JavaScript debugger

Finding and fixing logical errors

Stepping through code

Watching and editing variable values


Stepping through code

You can “step through” your code to execute your statements one at a time and see the results. For example, you can step over an if condition and see if the program stops at the first line within the conditional statement or at the next executable line after the if statement.

When the debugger stops at a statement with a function call, you can check the function to make sure it executes correctly. If the function is correct, you can step out of it to allow the debugger to run until the function returns. The program will stop again at the next statement after the function call location. If you attempt to step into a statement that contains a nonstandard JavaScript function, the JavaScript debugger steps over the statement instead.

To step over a statement:

At the top of the JavaScript Debugger dialog box, click the Step Over button.

When the program stops at any statement (including those with a function call), you can step over that statement to continue and pause before the next statement.

To step into a function:

At the top of the JavaScript Debugger dialog box, click the Step In button.

To step out of a function:

At the top of the JavaScript Debugger dialog box, click the Step Out button.

You can only use Step Out when the debugger is within a user-defined function. Stepping out causes the remaining statements in the function definition to be executed. The debugger pauses at the next statement.

Related topics

Running the JavaScript debugger

Finding and fixing logical errors

Setting breakpoints

Watching and editing variable values


Watching and editing variable values

To check the values of your variables as you step through the code, you use the variable list pane located at the bottom of the JavaScript Debugger dialog box. When you add a variable, its name appears in the left column; the right column displays its current value when the program stops execution at a breakpoint, or after you have stepped into the code.

The following figure shows the current value for several variables:

This is a picture of the feature being described.

To add a variable to your variable list, do one of the following:
  • Select the name of the variable in the code portion of the JavaScript Debugger dialog box. Click the plus (+) button and press Enter.
  • Click the plus (+) button, type the name of the variable you want to watch, and press Enter.

The values appear next to each variable as you step through the code. If the variable is an object with properties, you can expand the variable to show its properties and values. To expand the variable, click the plus (+) button (Windows) or triangle button (Macintosh) next to it in the list. The expanded variable collapses automatically whenever you step through the code.

To remove a variable from the list:
  1. Select the item in the variable list.
  2. Click the minus (-) button.
To edit a value:
  1. Select the item in the variable list.
  2. Click the value in the value list.
  3. In the text box that appears, type a new value.
    This is a picture of the feature being described.

Related topics

Running the JavaScript debugger

Finding and fixing logical errors

Setting breakpoints

Stepping through code


Using the ColdFusion debugger

While developing Macromedia ColdFusion applications, you can configure ColdFusion to display information in a browser to help you debug the application. For example, if a page contains an error, ColdFusion displays possible causes for the error at the bottom of a ColdFusion page when you open the page in a browser. If you’re a ColdFusion developer using Macromedia ColdFusion MX as your Dreamweaver testing server, you can view this information and fix the page without leaving Dreamweaver.

Note: This feature is not supported on the Macintosh. Macintosh developers can use Preview in Browser (F12) to open a ColdFusion page in a separate browser. If the page contains errors, information about the possible causes for the error appears at the bottom of the page.

Before starting, make sure debugging settings are enabled in ColdFusion Administrator. For more information, see ColdFusion help in Dreamweaver (Help > Using ColdFusion). Also, make sure your Dreamweaver testing server is running ColdFusion MX. For more information on the Dreamweaver testing server, see “Specifying a folder to process dynamic pages”.

To debug a ColdFusion page:
  1. Open the ColdFusion page in Dreamweaver.
  2. Click the Server Debug icon on the document toolbar (the icon with the globe and lightning bolt), or select View > Server Debug.

    3. Dreamweaver requests the file from the ColdFusion MX server and displays it in an internal Internet Explorer browser window. If the page contains errors, possible causes for the errors appear at the bottom of the page.

    At the same time, a Server Debug panel opens. The panel provides a large amount of useful information, such as all the pages the server processed to render the page, all the SQL queries executed on the page, and all the server variables and their values, if any. The panel also provides a summary of execution times.

  3. If an Exceptions category appears in the Server Debug panel, click the plus (+) icon to expand the category.

    4. The Exceptions category appears if the server encountered a problem or problems with the page. Expand the category to find out more about the problem.

  4. In the Location column of the Server Debug panel, click on the page’s URL to open the page in Code view and fix it.

    5. If Dreamweaver can locate the page, the page opens with the problem line or lines highlighted. If Dreamweaver cannot locate the page, it asks you for the location.

  5. Fix the error, save the file to the server, and click browse.

    6. Dreamweaver renders the page in the internal browser again and updates the Server Debug panel. If there are no more problems with the page, the Exceptions category does not reappear in the panel.

  6. To leave debug mode, switch to Code view (View > Code) or Design view (View > Design).

To ensure the debug information is refreshed every time a page is displayed in the internal browser, make sure Internet Explorer checks for newer versions of the file every time the file is requested. In Internet Explorer, choose Tools > Internet Options, select the General tab, and click the Settings button in the Temporary Internet Files area. In the Settings dialog box, select the “Every visit to page” option.


Setting the JavaScript Debugger options

The purpose of the debugger is to isolate errors in client-side JavaScript code.

Tasks

Running the JavaScript debugger

Finding and fixing logical errors

Setting breakpoints

Stepping through code

Watching and editing variable values

Previous


Editing Code in Design View

Although Macromedia Dreamweaver MX allows you to visually create and edit web pages without worrying about the underlying source code, there are times when you might need to edit the code for greater control or to troubleshoot your web page.

For example, suppose you select text on your document and apply a new font, but it only affects half the sentence. By looking at the code, you discover that the closing </font> tag is in the middle of the sentence. Once you move </font> to the end of your sentence, the problem is fixed.

This chapter is designed for people who prefer to work in Design view, but who also want quick access to the code. Dreamweaver lets you edit code while working in Design view.

The chapter contains the following topics:

  • Editing code with the Property inspector
  • Editing code with a tag editor
  • Editing code with the Quick Tag Editor
  • Editing code with the tag selector
  • Editing scripts
  • Working with server-side includes
Next


Editing code with the Property inspector

You can use the Property inspector to inspect and edit the attributes of text or of objects on your page.

To use the Property inspector:
  1. Click in text or select an object on the page.

    2. The Property inspector for the text or object appears below the Document window. If the Property inspector is not visible, select Window > Properties.

  2. Make changes to the attributes in the Property inspector.


Editing code with a tag editor

You can use a tag editor to inspect and edit the attributes of objects on your page.

To use a tag editor:
  1. Right-click (Windows) or Control-click (Macintosh) the object on the page and choose Edit Tag from the pop-up menu.

    2. The tag editor for that object appears.

  2. Make changes to the object’s attributes and click OK.


Editing code with the Quick Tag Editor

You can use the Quick Tag Editor to quickly inspect and edit HTML tags without leaving Design view. To open the Quick Tag Editor, press Control+T (Windows) or Command+T (Macintosh).

This section contains the following topics:

  • About the Quick Tag Editor
  • Inserting an HTML tag with the Quick Tag Editor
  • Editing an HTML tag with the Quick Tag Editor
  • Applying HTML to a selection with the Quick Tag Editor
  • Using the hints menu


About the Quick Tag Editor

The Quick Tag Editor has three modes:

  • Insert HTML mode to insert new HTML code
  • Edit Tag mode to edit an existing tag
  • Wrap Tag mode to wrap a new tag around the current selection

The mode in which the Quick Tag Editor opens depends on the current selection in Design view. In all three modes, the basic procedure for using the Quick Tag Editor is the same: open the editor, enter or edit tags and attributes, and then close the editor.

You can cycle through the various modes by pressing Control+T (Windows) or Command+T (Macintosh) while the Quick Tag Editor is active.

If you use any invalid HTML in the Quick Tag Editor, Dreamweaver attempts to correct it for you by inserting closing quotation marks and closing angle brackets where needed.

To perform more extensive HTML editing, use the Code view. For more information, see Coding in Dreamweaver.

Related topics

Inserting an HTML tag with the Quick Tag Editor

Editing an HTML tag with the Quick Tag Editor

Applying HTML to a selection with the Quick Tag Editor

Using the hints menu


Inserting an HTML tag with the Quick Tag Editor

You can use the Quick Tag Editor to insert an HTML tag in your document.

To insert an HTML tag with the Quick Tag Editor:
  1. In Design view, click in the page to place the insertion point where you want to insert code.
  2. Press Control+T (Windows) or Command+T (Macintosh).

    3. The Quick Tag Editor opens in Insert HTML mode.
    This is a picture of the feature being described.

  3. Enter the HTML tag and press Enter.

    4. The tag is inserted into your code.

  4. Press Escape to exit without making any changes.

Related topics

About the Quick Tag Editor

Editing an HTML tag with the Quick Tag Editor

Applying HTML to a selection with the Quick Tag Editor

Using the hints menu


Editing an HTML tag with the Quick Tag Editor

You can use the Quick Tag Editor to edit an HTML tag in your document.

To edit an HTML tag with the Quick Tag Editor:
  1. Select an object in Design view.

    2. You can also select the tag you want to edit from the tag selector at the bottom of the Document window. For more information, see Editing code with the tag selector.

  2. Press Control+T (Windows) or Command+T (Macintosh).

    3. The Quick Tag Editor opens in Edit Tag mode.

  3. Enter new attributes, edit existing attributes, or edit the tag’s name.
  4. Press Tab to move forward from one attribute to the next; press Shift+Tab to move back.

    5. By default, changes are applied to the document when you press Tab or Shift+Tab. To disable the automatic updates, select Edit > Preferences > Quick Tag Editor or Dreamweaver > Preferences > Quick Tag Editor (Mac OS X). The Quick Tag Editor Preferences dialog box appears. Deselect the Apply Changes Immediately While Editing option and click OK. For more information, see Setting Quick Tag Editor preferences.

  5. To close the Quick Tag Editor and apply all the changes, press Enter.
  6. To exit without making any further changes, press Escape.

Related topics

About the Quick Tag Editor

Inserting an HTML tag with the Quick Tag Editor

Applying HTML to a selection with the Quick Tag Editor

Using the hints menu


Applying HTML to a selection with the Quick Tag Editor

You can use the Quick Tag Editor to wrap a selection in your document with opening and closing HTML tags.

To apply HTML to a selection with the Quick Tag Editor:
  1. Select unformatted text or an object in Design view.

    2. If you select text or an object that includes an opening or closing HTML tag, the Quick Tag Editor will open in Edit Tag mode.

  2. Press Control+T (Windows) or Command+T (Macintosh), or click the Quick Tag Editor button in the Property inspector.

    3. The Quick Tag Editor opens in Wrap Tag mode.

  3. Enter a single opening tag, such as <font="verdana">, and press Enter.

    4. The tag is inserted at the beginning of the current selection, and a matching closing tag is inserted at the end.

  4. Press Escape to exit without making any changes.

Related topics

About the Quick Tag Editor

Inserting an HTML tag with the Quick Tag Editor

Editing an HTML tag with the Quick Tag Editor

Using the hints menu


Using the hints menu

While in the Quick Tag Editor, you can access an attributes hint menu that lists all the valid attributes of the tag you are editing or inserting. If Dreamweaver doesn’t recognize the tag you’re editing, the hints menu contains all the attributes that Dreamweaver recognizes for any tag.

You can also disable the hints menu or adjust the delay before the menu pops up in the Quick Tag Editor.

To see a list of valid attributes for a tag, pause for a few seconds while editing an attribute name in the Quick Tag Editor. A hints menu appears, listing all the valid attributes for the tag you’re editing.

Use the hints menu as follows:

  • As you begin to type an attribute name, the hints menu scrolls to highlight the first attribute name that starts with the letters you typed.
  • To move the highlighting up and down in the menu, use the Up and Down Arrow keys or the scroll bar.
  • To choose the highlighted attribute name, press Enter. Alternatively, double-click an attribute name in the menu.
  • To dismiss the hints menu without selecting an entry, press Escape or simply continue typing.

If you pause while entering or editing a tag name, a similar hints menu appears, listing tag names instead of attribute names.

To disable the hints menu or change the delay before it appears:
  1. Choose Edit > Preferences or Dreamweaver > Preferences (Mac OS X) and select Quick Tag Editor.

    2. The Quick Tag Editor Preferences dialog box appears.

  2. To disable the hints menu, deselect the Enable Tag Hints option.
  3. To change the delay before the menu pops up, adjust the Delay slider.

    4. For more information, see Setting Quick Tag Editor preferences.

  4. Click OK.

Related topics

About the Quick Tag Editor

Editing an HTML tag with the Quick Tag Editor


Editing code with the tag selector

You can use the tag selector to select, edit, or remove tags without leaving Design view. The tag selector is located in the status bar at the bottom of the Document window and shows a series of tags, as follows.

This is a picture of the feature being described.

To edit a tag:
  1. Click in the document.

    2. The tags that apply at the insertion point appear in the tag selector.

  2. Right-click (Windows) or Control-click (Macintosh) a tag in the tag selector.

    3. A pop-up menu appears.

  3. Select Edit Tag from the menu.

    4. The Quick Tag Editor appears. For more information, see Editing an HTML tag with the Quick Tag Editor.

To remove a tag:
  1. Click in the document.

    2. The tags that apply at the insertion point appear in the tag selector.

  2. Right-click (Windows) or Control-click (Macintosh) a tag in the tag selector.

    3. A pop-up menu appears.

  3. Select Remove Tag from the menu.
To select an object represented by a tag:
  1. Click in the document.

    2. The tags that apply at the insertion point appear in the tag selector.

  2. Click a tag in the tag selector.

    3. The object represented by the tag is selected on the page.

Tip: Use this technique to select individual table rows (tr tags) or cells (td tags).


Editing scripts

You can work with client-side JavaScripts and VBScripts in both Code and Design view. This section covers the following topics:

  • Writing a client-side script in Design view
  • Linking to an external script file
  • Editing a script in Design view


Writing a client-side script in Design view

You can write a JavaScript or VBScript for your page without leaving Design view. Before starting, make sure Dreamweaver displays script markers on the page. To display script markers, select View > Visual Aids > Invisible Elements.

To insert a client-side script in Design view:
  1. Place the insertion point where you want the script.
  2. Select Insert > Script Objects > Script.

    3. The Script dialog box appears.

  3. Complete the dialog box and click OK.

    4. For more information, see Setting the Script dialog box options.

Related topics

Linking to an external script file

Editing a script in Design view


Linking to an external script file

You can create a link in your document to an external script file without leaving Design view. Before starting, make sure Dreamweaver displays script markers on the page. To display script markers, select View > Visual Aids > Invisible Elements.

To link to an external script file:
  1. Place the insertion point where you want the script.
  2. Select Insert > Script Objects > Script.

    3. The Script dialog box appears.

  3. Click OK without typing anything in the Content box.
  4. Select the script marker in Design view of the Document window.
  5. In the Property inspector, click the folder icon to browse to and select the external script file, or type the filename in the Source box.

Related topics

Writing a client-side script in Design view

Editing a script in Design view


Editing a script in Design view

You can edit a script without leaving Design view. Before starting, make sure Dreamweaver displays script markers on the page. To display script markers, select View > Visual Aids > Invisible Elements.

To edit the script in Design view:
  1. Select the script marker.
  2. In the Property inspector, click the Edit button.

    3. The script appears in the Script Properties dialog box.

    If you linked to an external script file, the file automatically opens in Code view, where you can make your edits.

    Note: If there is code between the script tags, the Script Properties dialog box will open even if there is also a link to an external script file.

  3. Make edits to the script and click OK.

    4. For more information, see Setting the Script Properties dialog box options.

Related topics

Writing a client-side script in Design view

Linking to an external script file


Working with server-side includes

Server-side includes are instructions to the web server to include a specified file in a web page before serving the page to the browser. You can use Dreamweaver to insert server-side includes in your pages, edit the includes, or preview pages containing includes.

This section covers the following topics:

  • About server-side includes
  • Inserting a server-side include
  • Editing the contents of a server-side include


About server-side includes

When you open a document that’s on a web server, the server processes the include instructions and creates a new document in which the include instructions are replaced by the contents of the included file. The server then sends this new document to your browser. When you open a local document directly in a browser, however, there’s no server to process the include instructions in that document, so the browser opens the document without processing those instructions, and the file that’s supposed to be included doesn’t appear in the browser. It can thus be difficult, without using Dreamweaver, to look at local files and see them as they’ll appear to visitors after you’ve put them on the server.

With Dreamweaver, though, you can preview documents just as they’ll appear after they’re on the server, both in the Design view and when you preview in a browser.

Placing a server-side include in a document inserts a reference to an external file; it doesn’t insert the contents of the specified file in the current document. Dreamweaver displays the contents of the external file in Design view, making it easier to design pages.

You cannot edit the included file directly in a document. To edit the contents of a server-side include, you must directly edit the file that you’re including. Any changes to the external file are automatically reflected in every document that includes it.

There are two types of server-side includes: Virtual and File. Choose which to use depending on what type of web server you use:

  • If your server is an Apache web server, choose Virtual. (This is the default choice in Dreamweaver.) In Apache, Virtual works in all cases, while File works only in some cases.
  • If your server is a Microsoft Internet Information Server (IIS), choose File. (Virtual works with IIS only in certain specific circumstances.) Unfortunately, IIS won’t allow you to include a file in a folder above the current folder in the folder hierarchy, unless special software has been installed on the server. If you need to include a file from a folder higher in the folder hierarchy on an IIS server, ask your system administrator if the necessary software is installed.
  • For other kinds of servers, or if you don’t know what kind of server you’re using, ask your system administrator which option to use.

Some servers are configured to examine all files to see if they contain server-side includes; other servers are configured to examine only files with a particular file extension, such as .shtml, .shtm, or .inc. If a server-side include isn’t working for you, ask your system administrator if you need to use a special extension in the name of the file that uses the include. (For example, if the file is named canoe.html, you may have to rename it to canoe.shtml.) If you want your files to retain .html or .htm extensions, ask your system administrator to configure the server to examine all files (not just files with a certain extension) for server-side includes. Parsing a file for server-side includes takes a little extra time, though, so pages that the server parses are served a little more slowly than other pages; some system administrators therefore won’t provide the option of parsing all files.

Related topics

Inserting a server-side include

Editing the contents of a server-side include


Inserting a server-side include

You can use Dreamweaver to insert server-side includes in your page.

To insert a server-side include:
  1. Choose Insert > Script Objects > Server-Side Include.
  2. In the dialog box that appears, browse to and select a file.
To change which file is included:
  1. Select the server-side include in the Document window.
  2. Open the Property inspector (Window > Properties).
  3. Do one of the following:
    • Click the folder icon and browse to and select a new file to include.
    • In the text box, type the path and filename of the new file to include.

Related topics

About server-side includes

Editing the contents of a server-side include


Editing the contents of a server-side include

You can use Dreamweaver to edit server-side includes. To edit the content associated with the included file, you must open the file.

To edit a server-side include:
  1. Select the server-side include in either Design view or Code view, and click Edit in the Property inspector.

    2. The included file opens in a new Document window.

  2. Edit the file, then save it.

    3. The changes are immediately reflected in the current document and in any subsequent document you open that includes the file.

Related topics

About server-side includes

Inserting a server-side include


Reference

This section provides information about the dialog boxes and Property inspectors introduced in this chapter.


Setting Quick Tag Editor preferences

The purpose of this dialog box is to let you control whether the edits you make in the Quick Tag Editor are automatically updated in the Document window. It also lets you control the Quick Tag Editor’s hints menu.

Procedure
  1. To automatically update your document as you move between attributes in Edit Tag mode, select the Apply Changes Immediately While Editing option.

    2. If you turn off this option, you must press Enter to apply your changes to the document. (Multiple changes applied by pressing Enter appear as a single step in the History panel, and are undone with a single Undo operation.)

    Note: This option is ignored in Insert HTML mode and in Wrap Tag mode. In those modes, you must always press Enter to apply your changes to the document.

  2. To disable the hints menu, deselect the Enable Tag Hints option.
  3. To adjust the delay before the menu pops up in the Quick Tag Editor, adjust the Delay slider.

Related topic

Editing code with the Quick Tag Editor


Setting the Script dialog box options

The purpose of this dialog box is to insert client-side scripts in code.

Procedure
  1. Choose the scripting language from the Language pop-up menu.

    2. If you are using JavaScript and are unsure of the version, choose JavaScript rather than JavaScript1.1 or JavaScript1.2.

  2. Enter your script code in the Content text box.

    3. You don’t need to include the opening and closing script tags.

Related topic

Editing scripts


Setting the Script Properties dialog box options

The purpose of this dialog box is to modify a script on the page.

Procedure
  1. In the Language text box, specify either JavaScript or VBScript as the language of the script.
  2. In the Type text box, specify the type of script, either client-side or server-side.
  3. In the Source text box, specify an externally linked script file.

    4. Click the folder icon to choose the file, or type the path.

  4. In the Script text box, edit or write your script.
  5. Click OK to apply the edits.

Related topic

Editing a script in Design view


Setting the script Property inspector options

The purpose of this Property inspector is to inspect and modify a script on the page.

Procedure
  1. In the Language text box, specify either JavaScript or VBScript as the language of the script.
  2. In the Type text box, specify the type of script, either client-side or server-side.
  3. In the Source text box, specify an externally linked script file.

    4. Click the folder icon to choose the file, or type the path.

  4. Click Edit to modify the script.

    5. For more information, see Setting the Script Properties dialog box options.

Related topic

Editing a script in Design view


Setting the server-side include Property inspector options

The purpose of this Property inspector is to inspect and modify server-side includes in Design view.

Procedure
  1. To change the file to include in the document, do one of the following:
    • Click the folder icon and browse to and select a new file to include.
    • In the text box, type the path and filename of the new file to include.
  2. To edit the server-side include, click the Edit button, edit the file that opens in a new Document window, then save it.

    3. The changes are immediately reflected in the current document and in any subsequent document you open that includes the file.

Related topics

Inserting a server-side include

Editing the contents of a server-side include

About server-side includes


Setting the ColdFusion tag Property inspector options

The purpose of this Property inspector is to inspect and modify ColdFusion markup in Design view.

Procedure
  1. Click the Attributes button to edit the tag’s attributes or to add new ones.
  2. If the tag holds content between its opening and closing tags, click the Content button to edit the content.

    3. The Content button only appears if the selected tag is not an empty tag (that is, if it has both an opening and closing tag).

  3. If the tag contains a conditional expression, make changes to it in the Expression text box.


Setting the ASP script Property inspector options

The purpose of this Property inspector is to inspect and modify ASP server-side scripts in Design view.

Procedure
  1. Click the Edit button.
  2. Edit the ASP server-side script in the dialog box that appears.
  3. Click OK to apply the edits.
Previous


Designing the Page Layout

Use the visual design tools in Dreamweaver to create sophisticated page layouts.

This part contains the following chapters:

  • Presenting Content with Tables
  • Laying Out Pages in Layout View
  • Using Frames


Presenting Content with Tables

Tables are a powerful tool for presenting tabular data and for laying out text and graphics on an HTML page. A table consists of one or more rows; each row consists of one or more cells. Although columns aren’t usually explicitly specified in HTML code, Dreamweaver allows you to manipulate columns as well as rows and cells.

After you create a table you can easily modify both its appearance and structure. You can do any of the following:

  • Add content
  • Add, delete, split, and merge rows and columns
  • Modify table, row, or cell properties to add color and alignment
  • Copy and paste cells

Note: Many designers use tables to lay out web pages. Dreamweaver provides two ways to view and manipulate tables: Standard view, in which tables are presented as a grid of rows and columns, and Layout view, which allows you to draw, resize, and move boxes on the page while still using tables for the underlying structure (see Laying Out Pages in Layout View).

This chapter contains these sections:

  • Inserting a table
  • Adding content to a table cell
  • Importing tabular data
  • Selecting table elements
  • Formatting tables and cells
  • Resizing tables
  • Changing column widths and row heights
  • Adding and removing rows and columns
  • Nesting tables
  • Cutting, copying, and pasting cells
  • Sorting tables
  • Exporting table data
  • Reference
Next


Inserting a table

Use the Insert bar or the Insert menu to create a new table. For information on creating accessible tables in Dreamweaver, see Authoring for accessibility.

To insert a table:
  1. In the Design view of the Document window, place the insertion point where you want the table to appear.

    2. Note: If your document contains no content, then the only place you can place the insertion point is at the beginning of the document.

  2. Do one of the following:
    • Click the Table button in the Common category of the Insert bar.
    • Choose Insert > Table.

      • The Insert Table dialog box appears.

  3. Enter new values as desired.

    4. For more information, see Setting the Insert Table dialog box options.
    This is a picture of the feature being described.


Adding content to a table cell

You can add text and images to table cells the same way that you add text and images outside of a table.

For more information, see Inserting and Formatting Text and Inserting Images.

When you add or edit content in your table, you can save time by using the keyboard to navigate the table.

To move from one cell to another using the keyboard, do any of the following:
  • Press Tab to move to the next cell.

    • Pressing Tab in the last cell of a table automatically adds another row to the table.

  • Press Shift+Tab to move to the previous cell.
  • Press the arrow keys to move up, down, left, or right.


Importing tabular data

Tabular data that has been created in another application (such as Microsoft Excel) and saved in a delimited text format (with items separated by tabs, commas, colons, semicolons, or other delimiters) can be imported into Dreamweaver and formatted as a table.

To import table data:
  1. Do one of the following:
    • Choose File > Import > Tabular Data.
    • Choose Insert > Table Objects > Import Tabular Data.

      • The Import Tabular Data dialog box appears.
      This is a picture of the feature being described.

  2. In the dialog box, enter information about the file containing your data.

    3. For more information, see Setting the Import Tabular Data dialog box options.

Related topic

Displaying Database Records


Selecting table elements

You can select an entire table, row, or column at once. You can also select a contiguous block of cells within a table. After you’ve selected a table or cells, you can do the following:

  • Modify the appearance of selected cells or of the text contained in them. See Formatting tables and cells.
  • Copy and paste cells. See Cutting, copying, and pasting cells.

You can also select multiple nonadjacent cells in a table and modify the properties of those cells. You cannot copy or paste sets of nonadjacent cells.

To select an entire table, do one of the following:
  • Click the upper left corner of the table or click anywhere on the right or bottom edge.
  • Click in a table cell, and then select the table tag in the tag selector at the lower left corner of the Document window.
  • Click in a table cell, and then choose Modify > Table > Select Table.
  • Click in a table cell, and then select the table tag in the Tag Inspector.

    • Selection handles appear on the selected table’s lower and right edges.
    This is a picture of the feature being described.

To select rows or columns:
  1. Position the pointer to point to the left edge of a row or the top edge of a column.
  2. When the pointer changes to a selection arrow, click to select a row or column, or drag to select multiple rows or columns.
    This is a picture of the feature being described.
To select a single cell, do one of the following:
  • Click in the cell, and then select the td tag in the tag selector at the lower left corner of the Document window.
  • Click in the cell, and then choose Edit > Select All.

    • Tip: Choose Edit > Select All again when a cell is selected to select the entire table.

  • Click in a table cell, and then select the td tag in the Tag Inspector.
To select a line or a rectangular block of cells, do one of the following:
  • Drag from a cell to another cell.
  • Click in one cell, and then Shift-click another cell.

    • All of the cells within the linear or rectangular region defined by the two cells are selected.
    This is a picture of the feature being described.

To select nonadjacent cells:

Control-click (Windows) or Command-click (Macintosh) the cells, rows, or columns you want to select.

If each cell, row, or column you Control-click or Command-click isn’t already selected, it’s added to the selection. If it is already selected, it’s removed from the selection.


Formatting tables and cells

You can change the appearance of tables by setting properties for the table and its cells or by applying a preset design to the table. See Viewing and setting table properties, Viewing and setting cell, row, and column properties, and Using a design scheme to format a table.

To format text in tables, you can apply formatting to selected text or use styles. See Inserting and Formatting Text.


About conflicts in table formatting

When formatting tables in Design view, you can set properties for the entire table or for selected rows, columns, or cells in the table. When a property, such as background color or alignment, is set to one value for the whole table and another value for individual cells, cell formatting takes precedence over row formatting, which in turn takes precedence over table formatting.

The order of precedence for table formatting is:

  1. Cells
  2. Rows
  3. Table

For example, if you set the background color for a single cell to blue, and then set the background color of the entire table to yellow, the blue cell does not change to yellow, since cell formatting takes precedence over table formatting.

Note: When you set properties on a column, Dreamweaver changes the attributes of the td tag corresponding to each cell in the column.


Viewing and setting table properties

When a table is selected, the Property inspector lets you view and change table properties.

To view table properties:
  1. Select the table.
  2. Choose Window > Properties to open the Property inspector.
To view all table properties:

If the Property inspector isn’t expanded, click the expander arrow in the lower right corner to see all properties.

This is a picture of the feature being described.

To format a table in the Property inspector:
  1. Select a table. For more information, see Selecting table elements.
  2. Choose Window > Properties to open the Property inspector.
  3. Change the table’s formatting by setting properties.

    4. For more information, see Setting table properties.

Related topic

Using a design scheme to format a table


Viewing and setting cell, row, and column properties

When a cell or a set of cells is selected, the Property inspector allows you to view and change the cell properties.

Note: When you set properties on a column, Dreamweaver changes the attributes of the td tag corresponding to each cell in the column. When you set certain properties for a row, however, Dreamweaver changes the attributes of the tr tag rather than changing the attributes of each td tag in the row, When you’re applying the same format to all the cells in a row, applying the format to the tr tag produces cleaner, more concise HTML code.

To view table-element properties:
  1. Select a cell or a set of cells in a row or column.
  2. Choose Window > Properties to open the Property inspector.
To view all cell, row, or column properties:

If the Property inspector isn’t expanded, click the expander arrow in the lower right corner to see all properties.

This is a picture of the feature being described.

To format table elements in the Property inspector:
  1. Select a cell, a row, or a column. For more information, see Selecting table elements.
  2. Choose Window > Properties to open the Property inspector.
  3. Change the table element’s formatting by setting properties.

    4. For more information, see Setting cell, row, and column properties.

Related topic

Selecting table elements


Using a design scheme to format a table

Use the Format Table command to quickly apply a preset design to a table. You can then select options to further customize the design.

Note: Only simple tables can be formatted using preset designs. You can’t use these designs to format tables that contain merged cells (colspan or rowspan), column groups, or other unusual formatting that keeps the table from being a simple rectangular grid of cells.

To use a preset table design:
  1. Select a table, and then choose Commands > Format Table.

    2. The Format Table dialog box appears.
    This is a picture of the feature being described.

  2. Customize options as desired.

    3. For more information, see Setting the Format Table dialog box options.

  3. Click Apply or OK to format your table with the selected design.


Resizing tables

You can resize an entire table or individual rows and columns. When you resize an entire table, all of the cells in the table change size proportionately.

Note: If a table’s cells have explicit widths or heights specified, resizing the table changes the visual size of the cells in the Document window but does not change the specified widths and heights of the cells.

To resize a table:
  1. Select the table.
  2. Do one of the following:
    • To resize the table horizontally, drag the selection handle on the right.
    • To resize the table vertically, drag the selection handle on the bottom.
    • To resize in both dimensions, drag the selection handle at the lower right corner.

Related topics

Selecting table elements

Changing column widths and row heights


Changing column widths and row heights

You can change the width of a column or the height of a row by using the Property inspector or by dragging the borders of the column or row. You can also change cell widths and heights directly in the HTML code using Code view.

If you have trouble resizing, you can clear the column widths or row heights and start over.

Tip: You can specify widths and heights as either pixels or percentages, and you can convert from pixels to percentages and back. For more information, see Viewing and setting table properties.

To resize a column or a row visually, do one of the following:
  • To change a column’s width, select the column, and then drag the right border of the column.

    • If the column is not the rightmost column of the table, the adjacent column’s width also changes, keeping the same overall table width. If the column is the rightmost column, the whole table’s width changes, and all of the columns grow wider or narrow proportionately.

  • To change a row’s height, select the row, and then drag the lower border of the row.
To set a column’s width or a row’s height using the Property inspector:
  1. Select the column or row.
  2. Choose Window > Properties to open the Property inspector.
  3. Change the table element’s formatting by setting properties.

    4. For more information, see Setting cell, row, and column properties.

To clear all set widths or heights:
  1. Select the table.
  2. Do one of the following:
    • To clear all specified widths, choose Modify > Table > Clear Cell Widths or click the Clear Column Widths button in the Property inspector.
      This is a picture of the feature being described.
    • To clear all specified heights, choose Modify > Table > Clear Cell Heights or click the Clear Row Heights button in the Property inspector.
      This is a picture of the feature being described.

Related topics

Selecting table elements

Resizing tables

Coding in Dreamweaver


Adding and removing rows and columns

To add and remove rows and columns, use the commands in the Modify > Table submenu.

Tip: Pressing Tab in the last cell of a table automatically adds another row to the table.

To add rows or columns:
  1. Click in a cell.
  2. Do one of the following:
    • To add a row above the current cell, choose Modify > Table > Insert Row.
    • To add a column to the left of the current cell, choose Modify > Table > Insert Column.
    • To add multiple rows or columns at once, or to add a row below the current cell or a column to the right of it, choose Modify > Table > Insert Rows or Columns.

      • The Insert Rows or Columns dialog box appears.

  3. If you chose Insert Rows or Columns, enter the necessary information in the dialog box, then click OK.

    4. For more information, see Setting the Insert Rows or Columns dialog box options.

To delete a row or column:
  1. Click in a cell within the row or column you want to delete.
  2. Do one of the following:
    • To delete a row, choose Modify > Table > Delete Row.
    • To delete a column, choose Modify > Table > Delete Column.

Tip: Alternatively, you can select a complete row or column and then choose Edit > Clear or press Delete; the entire row or column is removed from the table.

To add or delete rows or columns using the Property inspector:
  1. Select the entire table.
  2. In the Property inspector, do one of the following:
    • Increase or decrease the Rows value to add or delete rows.

      • Dreamweaver adds and removes rows at the bottom of the table.

    • Increase or decrease the Cols value to add or delete columns.

      • Dreamweaver adds and removes columns at the right side of the table.

      Note: Dreamweaver does not warn you if you are deleting rows and columns that contain data.

Related topics

Selecting table elements

Inserting a repeating table

Displaying multiple behaviors


Splitting and merging cells

Use the Property inspector or the commands in the Modify > Table submenu to split or merge cells. You can merge any number of adjacent cells—as long as the entire selection is a line or a rectangle of cells—to produce a single cell that spans several columns or rows. You can split a cell into any number of rows or columns, regardless of whether it was previously merged. Dreamweaver automatically restructures the table (adding any necessary COLSPAN or ROWSPAN attributes) to create the specified arrangement.

In the following illustration, the cells in the middle of the first two rows have been merged so that they span two rows.

This is a picture of the feature being described.

As an alternative approach to merging and splitting cells, Dreamweaver also provides tools for increasing and decreasing the number of rows or columns spanned by a cell.

To merge two or more cells in a table:
  1. Select the cells. The selected cells must be contiguous and in the shape of a rectangle.

    2. In the following illustration, the selection is a rectangle of cells, so the cells can be merged.
    This is a picture of the feature being described.

    In the following illustration, the selection is not a rectangle, so the cells can’t be merged.
    This is a picture of the feature being described.

  2. Choose Modify > Table > Merge Cells, or click the Merge Cells button in the Property inspector.

    3. The contents of the individual cells are placed in the resulting merged cell. The properties of the first cell selected are applied to the merged cell.

To split a cell:
  1. Click in the cell.
  2. Choose Modify > Table > Split Cell, or click the Split Cell button in the Property inspector.
  3. In the Split Cell dialog box, specify how to split the cell.

    4. For more information, see Setting the Split Cell dialog box options.

To increase or decrease the number of rows or columns spanned by a cell:
  1. Select a cell.
  2. Choose Modify > Table > Increase Row Span or Modify > Table > Increase Column Span or Modify > Table > Decrease Row Span or Modify > Table > Decrease Column Span.


Nesting tables

A nested table is a table inside a cell of another table. You can format a nested table as you would any other table; however, its width is limited by the width of the cell in which it appears.

This is a picture of the feature being described.

To nest a table within a table cell:
  1. Click in a cell of the existing table.
  2. Choose Insert > Table.
  3. In the Insert Table dialog box, specify the desired properties for the nested table, then click OK.


Cutting, copying, and pasting cells

You can cut, copy, or paste a single table cell or multiple cells at once, preserving the cells’ formatting.

You can paste cells at the insertion point or in place of a selection in an existing table. To paste multiple table cells, the contents of the Clipboard must be compatible with the structure of the table or the selection in the table in which the cells will be pasted.

To cut or copy table cells:
  1. Select one or more cells in the table. The selected cells must be contiguous and in the shape of a rectangle.

    2. In the following illustration, the selection is a rectangle of cells, so the cells can be cut or copied.
    This is a picture of the feature being described.

    In the following illustration, the selection is not a rectangle, so the cells can’t be cut or copied.
    This is a picture of the feature being described.

  2. Cut or copy the cells using Edit > Cut or Edit > Copy.

    3. If you selected an entire row or column and you choose Edit > Cut, the entire row or column is removed from the table (not just the contents of the cells).

To paste table cells:
  1. Choose where you want to paste the cells.
    • To replace existing cells with the cells you are pasting, select a set of existing cells with the same layout as the cells on the clipboard. For example, if you’ve copied or cut a 3 x 2 block of cells, you can select another 3 x 2 block of cells to replace by pasting.
    • To paste a full row of cells above a particular cell, click in that cell.
    • To paste a full column of cells to the left of a particular cell, click in that cell.
    • To create a new table with the pasted cells, place the insertion point outside of the table.

      • Note: If you have less than a full row or column of cells in the clipboard, and you click in a cell and then paste the cells from the clipboard, the cell you clicked in and its neighbors may (depending on its location in the table) be replaced with the cells you are pasting.

  2. Choose Edit > Paste.

    3. If you are pasting entire rows or columns into an existing table, the rows or columns are added to the table. If you are pasting an individual cell, the contents of the selected cell are replaced. If you are pasting outside a table, the rows, columns, or cells are used to define a new table.

To remove cell content but leave the cells intact:
  1. Select one or more cells. (Make sure the selection does not consist entirely of complete rows or columns.)
  2. Choose Edit > Clear or press Delete.

Note: If only complete rows or columns are selected when you choose Edit > Clear or press Delete, the entire rows or columns—not just their contents—are removed from the table.

To delete rows or columns that contain merged cells:
  1. Select the row or column to be deleted.
  2. Choose Modify > Table > Delete Row or Modify > Table > Delete Column.


Sorting tables

You can sort the rows of a table based on the contents of a single column. You can also perform a more complicated table sort based on the contents of two columns.

You cannot sort tables that contain COLSPAN or ROWSPAN attributes—that is, tables that contain merged cells. (For more information, see Splitting and merging cells.)

To sort a table:
  1. Select the table (or click in any cell).
  2. Choose Commands > Sort Table.

    3. The Sort Table dialog box appears.

  3. In the Sort Table dialog box, specify how to sort the table.

    4. For more information, see Setting the Sort Table dialog box options.


Exporting table data

You can export table data from Dreamweaver into a text file, with the contents of adjacent cells separated by a delimiter. You can use commas, colons, semicolons, or spaces as delimiters.

When you export a table, the entire table is exported; you cannot select portions of a table to export. If you want only some of the data from a table—for example, the first six rows or the first six columns—then copy the cells containing that data, paste those cells outside of the table (to create a new table), and export the new table.

To export a table:
  1. Place the insertion point in any cell of the table.
  2. Choose File > Export > Table.

    3. The Export Table dialog box appears.
    This is a picture of the feature being described.

  3. In the Export Table dialog box, specify options for exporting the table.

    4. For more information, see Setting the Export Table dialog box options.

  4. Click Export.
  5. In the dialog box that appears, enter a name for the file, and then click Save.


Reference

This section provides information about the dialog boxes and inspectors introduced in this chapter.


Setting the Insert Table dialog box options

This dialog box allows you to specify the attributes of a table before inserting it.

To fill out the Insert Table dialog box:
  1. Specify the following options:

    2. Rows determines the number of rows the table has.

    Columns determines the number of columns the table has.

    Cell Padding determines the number of pixels between a cell’s content and the cell boundaries.

    Cell Spacing determines the number of pixels between adjacent table cells.

    Tip: When you don’t explicitly assign values for cell spacing and cell padding, most browsers display the table as if cell padding were set to 1 and cell spacing were set to 2. To ensure that browsers display the table with no padding or spacing, set Cell Padding and Cell Spacing to 0.

    Width specifies the width of the table in pixels, or as a percentage of the browser window’s width.

    Border specifies the width, in pixels, of the table’s borders.

    Tip: When you don’t explicitly assign a value for border, most browsers display the table as if the border were set to 1. To ensure that browsers display the table with no border, set Border to 0. To view cell and table boundaries when the border is set to 0, choose View > Visual Aids > Table Borders.

  2. Click OK to create the table.

To insert a table without having to specify these options, turn off the Show Dialog when Inserting Objects option in the General preferences. See Setting General preferences.

Related topic

Inserting a table


Setting the Import Tabular Data dialog box options

This dialog box allows you to specify information about a tabular data file and to specify attributes for the table to be created using that data.

To fill out the Import Tabular Data dialog box:
  1. Specify the following options:

    2. Data File is the name of the file to import. Click the Browse button to choose a file.

    Delimiter is the delimiter used in the file you’re importing.

    If you select Other, a text box appears to the right of the pop-up menu. Enter the delimiter used in your file.

    Note: Make sure to specify the delimiter that was used when the data file was saved. If you don’t, the file will not be imported properly, and your data will not be correctly formatted in a table.

    Table Width is the width of the table that will be created. Select Fit to Data to make each column wide enough to fit the longest text string in the column. Select Set to specify a fixed table width in pixels or as a percentage of the browser window’s width.

    Cell Padding is the number of pixels between a cell’s content and the cell boundaries.

    Cell Spacing is the number of pixels between adjacent table cells.

    Tip: When you don’t explicitly assign values for cell spacing and cell padding, most browsers display the table as if cell padding were set to 1 and cell spacing were set to 2. To ensure that browsers display the table with no padding or spacing, set Cell Padding and Cell Spacing to 0.

    Format Top Row determines what formatting, if any, is applied to the top row of the table. Choose from four formatting options: no formatting, bold, italic, or bold italic.

    Border specifies the width, in pixels, of the table’s borders.

    Tip: When you don’t explicitly assign a value for border, most browsers display the table as if the border were set to 1. To ensure that browsers display the table with no border, set Border to 0. To view cell and table boundaries when the border is set to 0, choose View > Visual Aids > Table Borders.

  2. Click OK.

Related topic

Importing tabular data


Setting table properties

This Property inspector allows you to set properties for tables.

To set table properties:
  1. Set any of the following options:

    2. Table Id is an ID for the table.

    Rows and Cols are the number of rows and columns in the table.

    W and H are the width and height of the table in pixels, or as a percentage of the browser window’s width.

    Note: You usually don’t need to set the height of a table.

    CellPad is the number of pixels between a cell’s content and the cell boundaries.

    CellSpace is the number of pixels between adjacent table cells.

    Tip: When you don’t explicitly assign values for cell spacing and cell padding, most browsers display the table as if cell padding were set to 1 and cell spacing were set to 2. To ensure that browsers display the table with no padding or spacing, set Cell Padding and Cell Spacing to 0.

    Align determines where the table appears, relative to other elements in the same paragraph such as text or images. Left aligns the table to the left of other elements (so that text in the same paragraph wraps around the table to the right); Right aligns the table to the right of other elements (with text wrapping around it to the left); and Center centers the table (with text appearing above and/or below the table). Default indicates that the browser should use its default alignment.

    Tip: When alignment is set to Default, other content is not displayed next to the table. To display a table next to other content, use Left or Right alignment.

    Border specifies the width, in pixels, of the table’s borders.

    Tip: When you don’t explicitly assign a value for border, most browsers display the table as if the border were set to 1. To ensure that browsers display the table with no border, set Border to 0. To view cell and table boundaries when the border is set to 0, choose View > Visual Aids > Table Borders.

    Clear Column Widths and Clear Row Heights buttons delete all explicitly specified row height or column width values from the table.

    Convert Table Widths to Pixels and Convert Table Heights to Pixels buttons set the width or height of each column in the table to its current width in pixels (also sets the width of the whole table to its current width in pixels).

    Convert Table Widths to Percent and Convert Table Heights to Percent buttons set the width or height of each column in the table to its current width expressed as a percentage of the Document window’s width (also sets the width of the whole table to its current width as a percentage of the Document window’s width).

    Bg Color is the table’s background color.

    Brdr Color is the color for the table’s borders.

    Bg Image is the table’s background image.

  2. If you have entered a value in a text box, press Tab or Enter (Windows) or Return (Macintosh) to apply the value.

Related topics

Viewing and setting table properties

Working with colors

Linking files and documents

Selecting table elements

Viewing and setting cell, row, and column properties


Setting cell, row, and column properties

This Property inspector allows you to set properties for table elements (cells, row, and columns).

Note: When you set properties on a column, Dreamweaver changes the attributes of the td tag corresponding to each cell in the column. When you set certain properties for a row, however, Dreamweaver changes the attributes of the tr tag rather than changing the attributes of each td tag in the row, When you’re applying the same format to all the cells in a row, applying the format to the tr tag produces cleaner, more concise HTML code.

To set properties for a table element:
  1. Set any of the following options:

    2. Horz specifies the horizontal alignment of the contents of a cell, row, or column. You can align the contents to the left, right, or center of the cells, or you can indicate that the browser should use its default alignment (usually left for regular cells and center for header cells).

    Vert specifies the vertical alignment of the contents of a cell, row, or column. You can align the contents to the top, middle, bottom, or baseline of the cells, or indicate that the browser should use its default alignment (usually middle).

    W and H are the width and height of selected cells in pixels, or as a percentage of the entire table’s width or height. To specify a percentage, follow the value with a percent symbol (%). To let the browser determine the proper width or height based on the contents of the cell and the widths and heights of the other columns and rows, leave the field blank (the default).

    By default, a browser chooses a column width to accommodate the widest image or the longest line in a column. This is why a column sometimes becomes much wider than the other columns in the table when you add content to it.

    By default, a browser chooses a row height to accommodate all the text and images in the row.

    Note: You can specify a height as a percentage of the total table height, but the row may not display at the specified percentage height in browsers.

    Bg (upper text field) is the filename for the background image for a cell, column, or row. Click the folder icon to browse to an image, or use the Point-to-File icon to select an image file.

    Bg (lower color swatch and text field) is the background color for a cell, column, or row, using the color picker.

    Brdr is the border color for the cells.

    Merge Cells button combines selected cells, rows, or columns into one cell (see Splitting and merging cells). You can merge cells only if they form a rectangular or linear block.

    Split Cell button divides a cell, creating two or more cells. See Splitting and merging cells. You can split only one cell at a time; this button is disabled if more than one cell is selected.

    No Wrap prevents line wrapping, keeping all text in a given cell on a single line. If No Wrap is enabled, cells widen to accommodate all data as you type it or paste it into a cell. (Normally, cells expand horizontally to accommodate the longest word or widest image in the cell, and then expand vertically as necessary to accommodate other contents.)

    Header formats the selected cells as table header cells. The contents of table header cells are bold and centered by default.

  2. If you have entered a value in a text box, press Tab or Enter (Windows) or Return (Macintosh) to apply the value.

Related topics

Viewing and setting cell, row, and column properties

Selecting table elements

Viewing and setting table properties

Working with colors

Linking files and documents


Setting the Format Table dialog box options

This dialog box allows you to choose a preformatted table design to apply to a table.

To fill out the Format Table dialog box:
  1. Choose a design scheme from the list on the left.

    2. The sample table displays an example of the chosen design.

  2. Specify the following options:

    3. Row Colors options specify the colors to apply to rows, and how frequently the colors alternate.

    Top Row options specify the alignment, text style, background color, and text color for the top row of the table, which may contain column headings.

    Left Col options specify the alignment and text style for the left column of the table, which may contain row headings.

    Border is the width, in pixels, of the table’s borders.

    Tip: When you don’t explicitly assign a value for border, most browsers display the table as if the border were set to 1. To ensure that browsers display the table with no border, set Border to 0. To view cell and table boundaries when the border is set to 0, choose View > Visual Aids > Table Borders.

    Apply All Attributes to TD Tags Instead of TR Tags applies the design to the table cells (td tags) rather than table rows (tr tags).

    By default, the formatting specified in the Format Table dialog box is applied to entire rows rather than to individual cells. When you’re applying the same format to all the cells in a row, applying the format to the tr tag produces cleaner, more concise HTML code. However, this option allows you to apply the formatting to individual cells if that’s your coding preference. For more information, see Formatting tables and cells.

  3. Do one of the following:
    • Click Apply to apply the format to your table without closing the dialog box. Then make changes to the formatting or click OK or Cancel to close the dialog box.
    • Click OK to apply the format to your table and close the dialog box.


Setting the Insert Rows or Columns dialog box options

This dialog box allows you to insert one or more rows or columns into a table.

To fill out the Insert Rows or Columns dialog box:
  1. Specify the following options:

    2. Insert indicates whether to insert rows or columns.

    Number of Rows or Number of Columns is the number of rows or columns to insert.

    Where specifies whether the new rows or columns should appear before or after the row or column of the selected cell.

  2. Click OK.

Related topic

Adding and removing rows and columns


Setting the Split Cell dialog box options

This dialog box allows you to specify how to split a table cell.

To fill out the Split Cell dialog box:
  1. Specify the following options:

    2. Split Cell Into specifies whether to split the cell into rows or columns.

    Number of Rows/Number of Columns specifies how many rows or columns to split the cell into.

  2. Click OK.


Setting the Sort Table dialog box options

This dialog box allows you to specify how a table should be sorted.

To fill out the Sort Table dialog box:
  1. Specify the following options:

    2. Sort By determines which column’s values will be used to sort the table’s rows.

    Order determines whether to sort the column alphabetically or numerically, and whether to sort it in ascending order (A to Z, lower numbers to higher numbers) or descending order.

    When the contents of a column are numbers, choose Numerically. An alphabetic sort applied to a list of one- and two-digit numbers results in the numbers being sorted as if they were words (resulting in ordering such as 1, 10, 2, 20, 3, 30) rather than being sorted as numbers (resulting in ordering such as 1, 2, 3, 10, 20, 30).

    Then By/Order determines the sorting order for a secondary sort on a different column. Specify the secondary-sort column in the Then By pop-up menu, and the secondary sort order in the Order pop-up menus.

    Sort Includes First Row specifies that the first row of the table should be included in the sort. If the first row is a heading that should not be moved, leave this option unselected.

    Sort THEAD Rows (If Any) specifies to sort all the rows in the table’s thead section (if any) using the same criteria as the body rows. (Note that thead rows remain in the thead section and still appear at the top of the table even after sorting.) For information about the thead tag, see the Reference panel (choose Help > Reference).

    Sort TFOOT Rows (If Any) specifies to sort all the rows in the table’s tfoot section (if any) using the same criteria as the body rows. (Note that tfoot rows remain in the tfoot section and still appear at the bottom of the table even after sorting.) For information about the tfoot tag, see the Reference panel (choose Help > Reference).

    Keep TR Attributes With Sorted Row specifies that table row attributes (such as color) should remain associated with the same content after the sort. If your table rows are formatted with two alternating colors, leave this option unselected to ensure that the sorted table still has alternating-colored rows. If the row attributes are specific to the content of each row, then select this option to ensure that those attributes remain associated with the correct rows in the sorted table.

  2. Click Apply or OK.


Setting the Export Table dialog box options

This dialog box allows you to set a delimiter and a style of line breaks for a text file to be created by exporting data from a table.

To fill out the Export Table dialog box:
  1. Specify the following options:

    2. Delimiter specifies which delimiter character should be used to separate items in the exported file.

    Line Breaks specifies which operating system you’ll be opening the exported file in: Windows, Macintosh, or UNIX. (Different operating systems have different ways of indicating the end of a line of text.)

  2. Click Export.
Previous


Laying Out Pages in Layout View

Dreamweaver gives you several different ways to lay out web pages.

One common method for creating a page layout is to use HTML tables to position elements. Tables can be difficult to use for layout, however, because they were originally created for displaying tabular data, not for laying out web pages.

To streamline the process of using tables for page layout, Dreamweaver provides Layout view. In Layout view, you can design your page using tables as the underlying structure, while avoiding some of the problems that often occur when creating table-based designs using traditional means. For example, in Layout view you can easily draw layout cells on your page, then move the cells where you want them. You can also easily create both fixed-width layouts and layouts that automatically stretch to the full width of the browser window (see Setting column width).

You can still lay out your pages using tables in the traditional way (see Presenting Content with Tables), or lay out pages using layers and then convert them to tables (see Using tables and layers for layout). However, Layout view is the easiest way to set up your page layout.

Note: In Layout view, you can’t use the Insert Table and Draw Layer tools that you can use in Standard view. To use those tools, you must first switch to Standard view.

This chapter contains these sections:

  • About layout cells and tables
  • Switching into and out of Layout view
  • Drawing layout cells and tables
  • Adding content to a layout cell
  • Moving and resizing layout cells and tables
  • Formatting layout cells and tables
  • Setting column width
  • Setting Layout view preferences
  • Reference
Next


About layout cells and tables

In Layout view, you can lay out your page before adding any content. For example, you could draw a cell along the top of your page to hold a header graphic, another cell on the left side of the page to hold a navigation bar, and a third cell on the right to hold content.

This is a picture of the feature being described.

(Another approach is to draw each cell only when you’re ready to put content into it. This approach allows you maximum flexibility; it leaves more blank space in the layout table for a longer time, which allows you to move or resize cells more easily.)

When you draw a layout cell that isn’t inside a layout table, Dreamweaver automatically creates a layout table as a container for the cell. A layout cell cannot exist outside of a layout table.

You can lay out your page using several layout cells within one layout table, which is the most common approach to web-page layout, or you can use multiple layout tables for more complex layouts. Using multiple layout tables isolates sections of your layout, so that they aren’t affected by changes in other sections.

You can also nest layout tables, by placing a new layout table inside an existing layout table. This structure allows you to simplify the table structure when the rows or column in one part of the layout don’t line up with the rows or columns in another part of the layout. For example, using nested layout tables you could easily create a two-column layout with four rows in the left column and three rows in the right column. For more information, see Drawing a nested layout table.


Switching into and out of Layout view

Before you can draw layout tables or layout cells, you must switch from Standard view into Layout view.

Tip: If you create a table in Standard view, then switch into Layout view, the resulting layout table may contain empty layout cells. You may need to delete these empty layout cells before you can create new layout cells or move layout cells around. When you create a new layout that you’re going to edit in Layout view, it’s easier to create the table in Layout view than to create it in Standard view.

To switch into Layout view:
  1. If Design view isn’t visible, choose View > Design or View > Code and Design.

    2. Layout view cannot be enabled or disabled in Code view.

  2. Choose View > Table View > Layout View or click the Layout View button in the Insert bar’s Layout category. (In the Dreamweaver 4-style floating workspace, with a vertical Insert bar, the layout-related items appear at the bottom of the panel, rather than in a separate category.)

    3. A gray bar labeled Layout View appears across the top of Design view, to indicate that you’re in Layout view. If there are tables on your page, they appear as layout tables.

To switch out of Layout view:
  1. If Design view isn’t visible, choose View > Design or View > Code and Design.

    2. Layout view cannot be enabled or disabled in Code view.

  2. Choose View > Table View > Standard View or click the Standard View button in the Insert bar’s Layout category.


Drawing layout cells and tables

You can draw layout cells and tables on your page in Layout view. When you draw a layout cell that isn’t inside a layout table, Dreamweaver automatically creates a layout table as a container for the cell. A layout cell cannot exist outside of a layout table.

Note: When Dreamweaver automatically creates a layout table, the table initially appears to fill the entire Design view, even if you change the size of your Document window. This full-window default layout table allows you to draw layout cells anywhere in Design view. You can set the table to a specific size by clicking the table border and then dragging the table’s resize handles.

To draw a layout cell:
  1. Make sure you are in Layout view (see Switching into and out of Layout view), then click the Draw Layout Cell button
    This is a picture of the feature being described.
    in the Layout category of the Insert bar. (In the Dreamweaver 4-style floating workspace, with a vertical Insert bar, the layout-related items appear at the bottom of the panel, rather than in a separate category.)

    2. The pointer changes to a plus sign (+).

  2. Position the pointer where you want to start the cell on the page, then drag to create the layout cell. To create multiple cells without having to click the Draw Layout Cell button each time, create each layout cell by Control-dragging (Windows) or Command-dragging (Macintosh).

The cell appears outlined in blue on your page. (Blue is the default outline color for layout cells. To change the outline color, see Setting Layout view preferences.) The width of each cell is displayed in the column header area at the top of the column, if layout table tabs are showing (see Setting Layout view preferences). For more information on column widths, see Setting column width.

A light grid of lines appears, extending from the edges of the new layout cell out to the edges of the layout table that contains it. These lines help you align new cells with old cells, and help you visualize the underlying HTML table’s structure.

Dreamweaver automatically snaps the edges of new cells into alignment with nearby edges of existing cells. (Layout cells cannot overlap.) Cell edges also automatically snap to the edges of the containing layout table if you draw a cell close to the edge of a table. To temporarily disable snapping, hold down Alt (Windows) or Option (Macintosh) while drawing the cell.

To draw a layout table:
  1. Make sure you are in Layout view. Then do one of the following:
    • To draw one layout table, click the Draw Layout Table button
      This is a picture of the feature being described.
      in the Layout category of the Insert bar. The pointer changes to a plus sign (+).
    • To draw more than one layout table without having to repeatedly click the Draw Layout Table button, Control-click (Windows) or Command-click (Macintosh) the Draw Layout Table button. When you finish drawing a layout table, you can immediately draw another one.
  2. Position the pointer on the page, then drag to create the layout table.

    3. If there’s no other content on the page, the new table is automatically positioned at the upper left corner of the page.

The table appears outlined in green on your page. (Green is the default outline color for layout tables. To change the outline color, see Setting Layout view preferences.) A tab labeled Layout Table appears at the top of each table you draw, to help you select the table and distinguish it from other elements of your page.

The width of the table (in pixels, or as a percentage of the page width) is displayed in the column header area along the top of the table, if layout table tabs are showing (see Setting Layout view preferences). For more information on table and column width, see Setting column width.

This is a picture of the feature being described.

You can create a layout table in an empty area of your page layout, or around existing layout cells and tables, or nested inside an existing layout table. Tables cannot overlap each other, but a table can be completely contained inside another table. For more information, see Drawing a nested layout table.

Tip: You can’t draw a layout table next to existing content. If your page already contains any content, you can draw a new layout table only below the bottom of the existing content. If you try to draw a layout table below existing content but the no-draw pointer appears, try resizing the Document window to create more blank space between the bottom of the existing content and the bottom of the window.


Drawing a nested layout table

You can draw a layout table inside another layout table, to create a nested table. The cells inside a nested table are isolated from changes made to the outer table; for example, when you change the size of a row or column in the outer table, the cells in the inner table don’t change size.

You can insert multiple levels of nested tables. A nested layout table cannot be larger than the table that contains it.

Note: If you draw a layout table in the middle of your page before drawing a layout cell, the table you draw is automatically nested inside a larger table.

This is a picture of the feature being described.

To draw a nested layout table:
  1. Make sure you are in Layout view, then click the Draw Layout Table button
    This is a picture of the feature being described.
    in the Layout category of the Insert bar.

    2. The pointer changes to a plus sign (+).

  2. Point to an empty (gray) area in an existing layout table, then drag to create the nested layout table.

    3. Note: You can’t create a layout table inside a layout cell. You can create a nested layout table only in an empty area of an existing layout table, or around existing cells.

To draw a layout table around existing layout cells or tables:
  1. Make sure you are in Layout view, then click the Draw Layout Table button in the Layout category of the Insert bar.

    2. The pointer changes to a plus sign (+).

  2. Drag to draw a rectangle around a set of existing layout cells or tables.

    3. A new nested layout table appears, enclosing the existing cells or tables.

    Tip: To make an existing layout cell fit snugly into one corner of the new nested table, start dragging near the corner of the cell; the new table’s corner snaps to the cell’s corner. You can’t start dragging in the middle of a layout cell, because you can’t create a layout table entirely inside a layout cell.


Snapping layout cells to the grid

You can turn on the Dreamweaver grid to use as a visual guide while you draw your layout. You can make page elements automatically snap to the grid as you move them, and change the grid or control the snapping behavior by specifying grid settings. Snapping works whether or not the grid is visible.

To show or hide the grid:

Choose View > Grid > Show Grid.

To enable or disable snapping:

Choose View > Grid > Snap to Grid.

To change grid settings:
  1. Choose View > Grid > Grid Settings.

    2. The Grid Settings dialog box appears.
    This is a picture of the feature being described.

  2. Set options as desired.

    3. For more information, see Setting the Grid Settings dialog box options.

  3. Click OK.


Adding content to a layout cell

You can add text, images, and other content to layout cells in Layout view just as you would add content to table cells in Standard view. Click in the cell where you want to add content, then type text or insert other content.

You can insert content only into a layout cell, not into an empty (gray) area of a layout table, so before you can add content, you must first create layout cells (see Drawing layout cells and tables).

A layout cell expands automatically when you add content that is wider than the cell. As the cell expands, the column that the cell is in also expands, which might change the sizes of surrounding cells. The column header area for that column changes to show the width that appears in the code, followed by the visual width of the column (the width as it appears on your screen) in parentheses. (For more information about column widths, see Setting column width.)

This is a picture of the feature being described.

To add text to a layout cell:

Place the insertion point in the layout cell where you want to add text and do one of the following:

  • Type text into the cell. The cell automatically expands as you type, if necessary.
  • Paste text copied from another document. Use the Paste command. For more information, see Inserting and formatting HTML text.
To add an image to a layout cell:
  1. Place the insertion point in the layout cell where you want to add the image.
  2. Do one of the following:
    • Click the Insert Image button in the Insert bar’s Common category.
    • Choose Insert > Image.
  3. In the Select Image dialog box, select an image file.

For more information, see Inserting an image.


Clearing automatically set cell heights

When you create a layout cell, Dreamweaver automatically specifies a height for the cell, to make the cell display at the height you drew even though the cell is empty. After you insert content into the cell, you may no longer need the height to be specified, so you can remove the explicit cell heights from the table.

To clear cell heights, do one of the following:
  • Select Clear Cell Heights from the column-header menu.

    • Dreamweaver clears all the heights specified in the table. Some of the table cells may shrink vertically.
    This is a picture of the feature being described.

  • Select a layout table by clicking the tab at the top of the table, then click the Clear Row Heights button in the Property inspector.

    • Dreamweaver clears all the heights specified in the table.


Moving and resizing layout cells and tables

To adjust your page layout, you can move and resize layout cells and nested layout tables. (The outermost layout table can only be resized.)

Layout cells cannot overlap. You cannot move or resize a cell to make it cross the boundaries of the layout table that contains it. A layout cell cannot be made smaller than its contents.

A layout table cannot be resized to be smaller than the smallest rectangle containing all of its cells. A layout table also cannot be resized so that it overlaps other tables or cells.

To resize a layout cell:
  1. Select a cell by clicking an edge of the cell or by Control-clicking (Windows) or Command-clicking (Macintosh) anywhere in the cell.

    2. Selection handles appear around the cell.

  2. Drag a selection handle to resize the cell.
    This is a picture of the feature being described.

    3. The cell edges automatically snap to align with other cells’ edges.

To move a layout cell:
  1. Select a cell by clicking an edge of the cell or by Control-clicking (Windows) or Command-clicking (Macintosh) anywhere in the cell.

    2. Selection handles appear around the cell.

  2. Do one of the following:
    • Drag the cell to another location within its layout table.
    • Press the arrow keys to move the cell 1 pixel at a time. Hold down Shift while pressing an arrow key to move the cell 10 pixels at a time.
To resize a layout table:
  1. Select a table by clicking the tab at the top of the table.

    2. Selection handles appear around the table.

  2. Drag the selection handles to resize the table.

    3. The table edges automatically snap to align with the edges of other cells and tables.

To move a layout table:
  1. Select a table by clicking the tab at the top of the table.

    2. Selection handles appear around the table.

  2. Do one of the following:
    • Drag the table to another location on the page.

      • Note: You can move a layout table only if it’s nested inside another layout table.

    • Press the arrow keys to move the table 1 pixel at a time. Hold down Shift while pressing an arrow key to move the table 10 pixels at a time.

Related topic

To use the Dreamweaver grid as a guide while you move or resize your cells and tables, see Snapping layout cells to the grid.


Formatting layout cells and tables

You can change the appearance of any layout cell or table by using the Property inspector.


Formatting layout cells

You can set various attributes of a layout cell in the Property inspector, including width and height, background color, and alignment of the cell’s contents.

This is a picture of the feature being described.

To format a layout cell in the Property inspector:
  1. Select a cell by clicking an edge of the cell or by Control-clicking (Windows) or Command-clicking (Macintosh) anywhere in the cell.
  2. Open the Property inspector by choosing Window > Properties.
  3. Change the cell’s formatting by setting properties.

    4. For more information, see Setting layout cell properties.


Formatting layout tables

You can set various attributes of a layout table in the Property inspector, including width, height, padding, and spacing.

This is a picture of the feature being described.

To format a layout table:
  1. Select a table by clicking the tab at the top of the table, or by clicking the <table> tag in the tag selector.
  2. Open the Property inspector by choosing Window > Properties.
  3. Change the table’s formatting by setting properties.

    4. For more information, see Setting layout table properties.


Setting column width

A column in Layout view can have either a fixed width or a width that automatically expands to fill as much of the browser window as possible (“autostretch”). Information about the width appears in the column header area at the top of each column of the selected table, if layout table tabs are showing (see Setting Layout view preferences).

A fixed-width column has a specific numeric width, such as 300 pixels; the width appears in the column header area (unless the column is too narrow for the numbers to be displayed). An autostretch column’s width changes automatically depending on the browser window’s width; the column header area for an autostretch column shows a wavy line instead of a number. If your layout includes an autostretch column, the layout always fills the entire width of the visitor’s browser window.

Note: The width you specify for a column applies to all the cells in that column.

You can make only one column in a given layout table autostretch. A common layout is to make the column containing the main content of the page autostretch, which automatically sets all the other columns to fixed width.

For example, suppose your layout has a wide image on the left side of the page and a column of text on the right. You might set the left column to a fixed width and make the sidebar area autostretch.

This is a picture of the feature being described.

When you make a column autostretch, Dreamweaver inserts spacer images in the fixed width columns to ensure that those columns stay as wide as they should be, unless you specify that no spacer image should be used. A spacer image is a transparent image, used to control spacing, that is not visible in the browser window. For more information, see Using spacer images.

Note: Making a column autostretch before your layout is complete may have unexpected effects on table layout. To prevent columns from growing unexpectedly wider or narrower, create your complete layout before making a column autostretch, and use spacer images when making a column autostretch. (However, if each column contains other content that will keep the column at the desired width, you don’t need spacer images.)

Sometimes the visual width of a column as it appears in Layout view doesn’t match the width specified in the HTML code. In that case, two numbers appear in the column header area. (For more information on inconsistent widths, see Setting layout table properties.)

To make a column autostretch, do one of the following:
  • In the column header area at the top of a fixed width column, select Make Column Autostretch from the column header menu. You can make only one column in a given table autostretch.
    This is a picture of the feature being described.
  • Select a cell in the column by clicking an edge of the cell or by Control-clicking (Windows) or Command-clicking (Macintosh) anywhere in the cell. Then, in the Property inspector, click Autostretch.
To set a column to a fixed width, do one of the following:
  • In the column header area at the top of an autostretch column, select Make Column Fixed Width from the column header menu.

    • Make Column Fixed Width specifies a width for the column (in the code) that matches the current visual width of the column.

  • Select a cell in the column by clicking an edge of the cell or by Control-clicking (Windows) or Command-clicking (Macintosh) anywhere in the cell. Then, in the Property inspector, click Fixed and type a numeric value.

    • If you enter a numeric value that is less than the width of the column’s content, Dreamweaver automatically sets the width to match the width of the content.

To set the width of cells as specified in the HTML code to match the cells’ visual width:

Select Make Cell Widths Consistent from the column header menu for any column.

Related topics

Setting Layout view preferences

Setting layout table properties


Using spacer images

A spacer image (also known as a spacer GIF) is a transparent image that’s used to control spacing in autostretch tables. A spacer image consists of a single-pixel transparent GIF image, stretched out to be a specified number of pixels wide. A browser can’t draw a table column narrower than the widest image contained in a cell in that column, so placing a spacer image in a table column requires browsers to keep the column at least as wide as the image.

Dreamweaver automatically adds spacer images when you set a column to autostretch, unless you specify that no spacer image should be used. You can manually insert and remove spacer images in each column if you prefer. Columns that contain spacer images have a double bar in the column header area.

Note: If you choose not to use spacer images in autostretch tables, fixed-width columns may change size or even disappear completely from Design view when they do not contain content. (The columns still exist in the code, even if they don’t appear in Design view.)

When you insert a spacer image in a column or set a column to autostretch, a dialog box appears, asking how you want to set up your spacer image file. If you have already set a spacer image for the site in the Dreamweaver preferences, the dialog box does not appear (see Setting Layout view preferences).

You can manually insert and remove spacer images in specific columns or remove all spacer images in the page.

To set up a spacer image:
  1. Make a column autostretch, or choose Add Spacer Image from the column header menu.
    This is a picture of the feature being described.

    2. The Choose Spacer Image dialog box appears.

  2. Choose one of the options.

    3. For more information, see Setting the Choose Spacer Image dialog box options.

  3. Click OK.
To insert a spacer image into a column:

Select Add Spacer Image from the column header menu.

The spacer image is inserted into the column. The image is not visible, but the column may shift slightly and a double bar appears at the top to indicate that it contains a spacer image.

To remove a spacer image from a column:

Select Remove Spacer Image from the column header menu.

The spacer image is removed. The column may shift.

To remove all spacer images from a table:

Do one of the following:

  • Select Remove All Spacer Images from the column header menu of any column in the table.
  • Click the Remove All Spacers button in the layout table Property inspector.
    This is a picture of the feature being described.

The layout of your whole table may shift. If there is no content in some columns, the columns may disappear completely from the Design view.


Setting Layout view preferences

Use the Layout View category in the Preferences dialog box to specify information about spacer image files and about the colors that Dreamweaver uses to draw layout tables and layout cells.

By default, a tab labeled Layout Table appears at the top of each layout table in Layout view, and a set of column-width controls appears at the top of the currently selected layout table. You can prevent the tabs and controls from appearing if you prefer.

Note: Even when tabs are showing, the layout table at the top of the page doesn’t have a tab when it’s selected. The tab for a layout table at the top of the page appears only when the table is not selected.

To set Layout view preferences:
  1. Choose Edit > Preferences.
  2. Select Layout View from the Category list.
  3. Make changes as necessary.

    4. For more information, see Setting the Layout View Preferences dialog box options.

  4. Click OK to close the dialog box.
To turn off the layout table tabs and column-width controls in Layout view:

Choose View > Table View > Show Layout Table Tabs.


Setting layout cell properties

This Property inspector allows you to set properties for layout cells.

To set properties for a layout cell:
  1. Set any of the following options:

    2. Fixed sets the cell to a fixed width. Enter a width (in pixels) in the adjacent text box (see Setting column width).

    Autostretch makes the cell autostretch (see Setting column width).

    Height is the cell’s height (in pixels).

    Bg is the background color for the layout cell. Click the color box and choose a color in the Color Picker, or enter a hexadecimal number corresponding to a color in the adjacent text box.

    Horz sets the horizontal alignment of the cell’s contents. You can set the alignment to Left, Center, Right, or Default.

    Vert sets the vertical alignment of the cell’s contents. You can set the alignment to Top, Middle, Bottom, Baseline, or Default.

    No Wrap prevents word wrapping. When this option is selected, the layout cell widens as necessary to accommodate text, rather than continuing the text on a new line.

  2. If you have entered a value in a text box, press Tab or Enter (Windows) or Return (Macintosh) to apply the value.

Related topic

Formatting layout cells and tables


Setting layout table properties

This Property inspector allows you to set properties for layout tables.

To set properties for a layout table:
  1. Set any of the following options:

    2. Fixed sets the table to a fixed width. Enter a width (in pixels) in the adjacent text box (see Setting column width).

    Autostretch makes the rightmost column of the table autostretch (see Setting column width).

    Height is the table’s height (in pixels).

    CellPad sets the amount of space between the content of a layout cell and the cell boundary (in pixels).

    If you change cell padding and a number appears in parentheses in a column header for your layout table, use the Make Widths Consistent option described below.

    CellSpace sets the amount of space between adjacent layout cells (in pixels).

    If you change cell spacing and a number appears in parentheses in a column header for your layout table, use the Make Widths Consistent option described below.

    Clear Row Heights removes explicit height settings for all the cells in the layout table.

    Dreamweaver specifies explicit cell heights to show your layout as you drew it, even if some cells are empty. Therefore, you should click this button only after placing content in layout cells; otherwise, empty cells may collapse vertically.

    Note: Clearing row heights may have unexpected effects on empty (gray) areas in the layout table (that is, areas that don’t contain any cells). In particular, some empty rows may be removed from the table entirely, and the table may appear to collapse vertically.

    Make Widths Consistent makes cell widths in the HTML code match their apparent width on the screen, if you have fixed-width cells in your layout.

    When you click Make Widths Consistent, Dreamweaver resets the width specified in the HTML for each cell in the table to match the width of the content within that cell.

    For example, if you set a layout cell’s width to 200 pixels (or draw a 200-pixel-wide layout cell), then add content that stretches the width to 250 pixels, two numbers are displayed in the header area at the top of that cell’s column: "200" in quotation marks (the width specified in the code) and (250) in parentheses (the visual width—that is, the width of the cell as it’s currently displayed on your screen). Clicking Make Widths Consistent changes the width specified in the code to be 250, to match the visual width.

    Remove All Spacers removes spacer images (transparent images that are used to control the spacing in your layout) from your layout table. (For more information, see Using spacer images.)

    Note: Removing spacer images may cause some columns of your table to become very narrow. You should generally leave spacer images in place unless each column contains other content that will keep the column at the desired width.

    Remove Nesting removes a layout table that’s nested inside another layout table, without losing any of its contents.

    The inner layout table disappears; the layout cells that it contained become part of the outer table.

  2. If you have entered a value in a text box, press Tab or Enter (Windows) or Return (Macintosh) to apply the value.

Related topic

Formatting layout cells and tables


Setting the Choose Spacer Image dialog box options

If you’re making a column autostretch, this dialog box allows you to choose whether to use a spacer image, and which spacer image to use.

If you’re adding a spacer image to a column, this dialog box allows you to choose which spacer image to use.

To fill out the Choose Spacer Image dialog box:
  1. Choose one of the following options:

    2. Create a spacer image file creates a GIF image to use as a spacer image, and allows you to choose a folder in which to store the spacer image file, such as your site’s images folder. This is the recommended option, unless you’ve already created a spacer image file for your site.

    Use an existing spacer image file allows you to specify an existing spacer image file to use in autostretch tables. The spacer image should be a single-pixel transparent GIF.

    Don’t use spacer images for autostretch tables specifies that Dreamweaver should refrain from automatically adding spacer images to tables. (This option does not appear if you’re inserting a spacer imager without making a column autostretch.) If you select this option, fixed-width columns in your layout may collapse to a small width, or even to zero width; spacer images help maintain the structure of your layout as you originally drew it. Use this option only if you’ve already placed enough content in your fixed-width columns to prevent them from collapsing, or if you have already added spacer images manually.

  2. Click OK.

Related topic

Using spacer images


Setting the Layout View Preferences dialog box options

This dialog box allows you to set Layout view preferences.

To fill out the Layout View Preferences dialog box:
  1. Specify any of the following options:

    2. Autoinsert Spacers specifies whether or not Dreamweaver should automatically insert spacer images when you set a column to autostretch (see Setting column width).

    Spacer Image sets the spacer image file for your sites. Choose a site from the For Site menu, and then click the Create button to create a new spacer image file, or click the Browse button to locate an existing spacer image file in that site.

    Cell Outline sets the color of the outlines of layout cells.

    Cell Highlight sets the color that layout cell outlines change to when you move the pointer to point to a cell.

    Table Outline sets the color of the outlines of layout tables.

    Table Background sets the color used for areas of layout tables where there are no layout cells.

  2. Click OK.

Related topic

Setting Layout view preferences

Previous


Using Frames

Frames provide a way to divide a browser window into multiple regions, each of which can display a different HTML document. In the most common use of frames, one frame displays a document containing navigation controls, while another frame displays a document with content.

For example, your frame layout might consist of three frames: one narrow frame on the side that contains a navigation bar, one frame that runs along the top, containing the logo and title of the website, and one large frame that takes up the rest of the page and contains the main content. Each of these frames displays a separate HTML document.

This is a picture of the feature being described.

In this example, the document displayed in the top frame never changes as the visitor navigates the site. The side frame navigation bar contains links; clicking one of these links changes the content of the main content frame, but the contents of the side frame itself remain static. The main content frame on the right displays the appropriate document for whichever link the visitor clicks on the left.

A detailed discussion of all the ways to design and use frames, and the code required for hand-coding them, is beyond the scope of this chapter. If you need detailed information about the code used in advanced frame layouts, see a book about frames and framesets.

This chapter contains the following sections:

  • About frames and framesets
  • Deciding whether to use frames
  • About creating frame-based web pages in Dreamweaver
  • Creating frames and framesets
  • Selecting frames and framesets
  • Saving frame and frameset files
  • Viewing and setting frame properties
  • Viewing and setting frameset properties
  • Controlling frame content with links
  • Handling browsers that can’t display frames
  • Using JavaScript behaviors with frames
  • Reference
Next


About frames and framesets

A frame is a region in a browser window that can display an HTML document independent of what’s being displayed in the rest of the browser window.

A frameset is an HTML file that defines the layout and properties of a set of frames, including the number of frames, the size and placement of the frames, and the URL of the page to be initially displayed in each frame. The frameset file itself doesn’t contain HTML content to be displayed in a browser, except in the noframes section (see Handling browsers that can’t display frames); the frameset file simply provides information to the browser about how a set of frames should be displayed and what documents should be displayed in them.

To view a set of frames in a browser, enter the URL of the frameset file; the browser then opens the relevant documents to display in the frames. The frameset file for a site is often named index.html, so that it displays by default if a visitor doesn’t specify a filename.

Note that a frame is not a file. It’s easy to think of the document that’s currently displayed in a frame as an integral part of the frame, but the document isn’t actually part of the frame—any frame can display any document.

Note: The word page can be used loosely to refer either to a single HTML document or to the entire contents of a browser window at a given moment, even if several HTML documents are being displayed at once. The phrase “a page that uses frames,” for example, usually refers to a set of frames and the documents that initially appear in those frames.

In Dreamweaver, you can create a frameset in either of the following ways:

  • To create a frameset with the current document displayed in one of the frames, use the Insert bar’s Frames category.
  • To create a frameset with all its frames blank, use the Frameset category in the New Document dialog box.

You can format all of your frames and framesets through the Property inspector. You can set scrolling on or off, set width and height, name each frame, and more. For more information, see Viewing and setting frame properties and Viewing and setting frameset properties.

A site that appears in a browser as a single page comprising three frames actually consists of at least four separate HTML documents: the frameset file, plus the three documents containing the content that initially appears inside the frames. When you design a page using framesets in Dreamweaver, you must save each of these four files in order for the page to work properly in the browser. For more information about how to create successful web pages that use frames, see About creating frame-based web pages in Dreamweaver.


Deciding whether to use frames

The most common use of frames is for navigation. A set of frames often includes one frame containing a navigation bar and another frame to display the main content pages.

However, designing with frames can be confusing, and in many cases you can create a web page without frames that accomplishes many of the same goals as a set of frames. For example, if you want a navigation bar to appear on the left side of your page, you can either replace your page with a set of frames, or just include the navigation bar on every page in your site. (Dreamweaver helps you create multiple pages that use the same layout; see About Dreamweaver templates.) The following image shows a page design with a frame-like layout that doesn’t use frames.

This is a picture of the feature being described.

Many professional web designers prefer not to use frames, and many people who browse the web dislike frames. In most cases this dislike is due to having encountered sites that use frames poorly or unnecessarily (such as a frameset that reloads the contents of the navigation frames every time the visitor clicks a navigation button). When frames are used well (such as when they’re used to keep navigation controls static in one frame while allowing the contents of another frame to change), they can be very useful for some sites.

Not all browsers provide good frame support, and frames may be difficult for visitors with disabilities to navigate, so if you do use frames, always provide a noframes section in your frameset, for visitors who can’t view them. You may also want to provide an explicit link to a frameless version of the site, for visitors whose browsers support frames but who don’t like using frames.

Advantages to using frames include the following:

  • A visitor’s browser doesn’t need to reload the navigation-related graphics for every page.
  • Each frame has its own scrollbar (if the content is too large to fit in a window), so a visitor can scroll the frames independently. (For example, a visitor who has scrolled down to the bottom of a long page of content in a frame doesn’t need to scroll back up to the top to use the navigation bar if the navigation bar is in a different frame.)

Disadvantages to using frames include the following:

  • Precise graphical alignment of elements in different frames can be difficult.
  • Testing the navigation can be time-consuming.
  • The URLs of the individual framed pages aren’t displayed in the browser, so it can be difficult for a visitor to bookmark a specific page (unless you provide server code that allows them to load a framed version of a particular page).

Related topics

Controlling frame content with links

Handling browsers that can’t display frames


About creating frame-based web pages in Dreamweaver

Dreamweaver allows you to view and edit all of the documents associated with a set of frames, all in one Document window. This approach lets you see approximately how the framed pages will appear in a browser as you edit them. However, some aspects of this approach can be confusing until you get used to them.

This is a picture of the feature being described.

In particular, remember that each frame displays a separate HTML document. Even if the documents are empty, you must save them all before you can preview them (because the frameset can be accurately previewed only if it contains the URL of a document to display in each frame).

To ensure that your frameset appears correctly in browsers:
  1. Create your frameset and specify a document to appear in each frame (see Creating frames and framesets).
  2. Save every file that’s going to be displayed in a frame. Remember that each frame displays a separate HTML document, and each document must be saved. Also save the frameset file. (See Saving frame and frameset files.)
  3. Set the properties for each frame and for the frameset. This includes naming each frame, setting scrolling and non-scrolling options, and more. (See Viewing and setting frame properties and Viewing and setting frameset properties.)

    4. Tip: You may also want to set the title attribute for a frame, to improve accessibility. (Note that the title attribute is not the same as the name attribute.) To set the title attribute, select the frame and choose Modify > Edit Tag; then select the Style Sheet/Accessibility category and enter a title in the Title text box. Alternatively, enable the accessibility authoring option for frames; for more information, see Authoring for accessibility.

  4. Make sure to set the Target property in the Property inspector for all your links so that the linked content appears in the correct area (see Controlling frame content with links).


Creating frames and framesets

There are two ways to create a frameset in Dreamweaver: you can design it yourself, or you can select from several predefined framesets. Choosing a predefined frameset automatically sets up all the framesets and frames needed to create the layout and is the easiest way to create a frames-based layout quickly. You can insert a predefined frameset only in the Document window’s Design view.


Creating a predefined frameset

Predefined framesets make it easy for you to select the type of frameset you want to create.

There are two ways to create a predefined frameset: using the Insert bar and using the New Document dialog box. The Insert bar allows you to create a frameset and display the current document in one of the new frames; the New Document dialog creates a new empty frameset.

The predefined frameset icons in the Frames category of the Insert bar and in the Framesets category of the New Document dialog box provide a visual representation of each frameset as applied to the current document.

This is a picture of the feature being described.

When you apply a frameset using the Insert bar, Dreamweaver automatically sets up the frameset to display the current document (the document in which the insertion point is located) in one of the frames. The blue area of a predefined frameset icon represents the current document, and the white areas represent frames that will display other documents.

To create a predefined frameset and display an existing document in a frame:
  1. Place the insertion point in a document.
  2. Do one of the following:
    • In the Frames category of the Insert bar, click the icon for a predefined frameset.
    • Choose a predefined frameset from the Insert > Frames submenu.
To create a new empty predefined frameset:
  1. Choose File > New.
  2. In the New Document dialog box, select the Framesets category.
  3. Select a frameset from the Framesets list.
  4. Click Create.


Creating and editing a frameset

Before creating a frameset or working with frames, make the frame borders visible in the Document window’s Design view by choosing View >Visual Aids > Frame Borders.

To create a frameset:

Choose a splitting item (such as Split Frame Left or Split Frame Right) from the Modify > Frameset submenu.

The window is split into frames, and the document you started with appears in one of the frames.

To split a frame into smaller frames, do one of the following:
  • To split the frame where the insertion point is, choose a splitting item from the Modify > Frameset submenu.
  • To split a frame or set of frames vertically or horizontally, drag a frame border from the edge of the Design view into the middle of the Design view.
  • To split a frame using a frame border that isn’t at the edge of the Design view, Alt-drag (Windows) or Option-drag (Macintosh) a frame border.
  • To divide a frame into four frames, drag a frame border from one of the corners of the Design view into the middle of a frame.

    • Tip: To create three frames, start with two frames and then split one of them. It’s not easy to merge two adjacent frames without editing the frameset code, so turning four frames into three frames is harder than turning two frames into three frames.

To delete a frame:

Drag a frame border off the page or to a border of the parent frame.

If there’s unsaved content in a document in a frame that’s being removed, Dreamweaver prompts you to save the document.

Note: You can’t remove a frameset entirely by dragging borders. To remove a frameset, close the Document window that displays it. If the frameset file has been saved, delete the file.


About nested framesets

A frameset inside another frameset is called a nested frameset. A single frameset file can contain multiple nested framesets. Most web pages that use frames are actually using nested frames, and most of the predefined framesets in Dreamweaver also use nesting. Any set of frames in which there are different numbers of frames in different rows or columns requires a nested frameset.

For example, the most common frame layout has one frame in the top row (where the company’s logo appears) and two frames in the bottom row (a navigation frame and a content frame). This layout requires a nested frameset: a two-row frameset, with a two-column frameset nested in the second row.

This is a picture of the feature being described.

Dreamweaver takes care of nesting framesets as needed; if you use the frame-splitting tools in Dreamweaver, you don’t need to worry about the details of which frames are nested and which aren’t. For more information about the frame-splitting tools, see Creating and editing a frameset.

There are two ways to nest framesets in HTML: the inner frameset can be defined either in the same file as the outer frameset, or in a separate file of its own. Each predefined frameset in Dreamweaver defines all of its framesets in the same file.

Both kinds of nesting produce the same visual results; it’s not easy to tell, without looking at the code, which kind of nesting is being used. The most likely situation in which an external frameset file would be used in Dreamweaver is when you use the Open in Frame command to open a frameset file inside a frame; doing this may result in problems with setting targets for links. It’s generally simplest to keep all framesets defined in a single file.


Selecting frames and framesets

To make changes to the properties of a frame or frameset, begin by selecting the frame or frameset you want to change. You can select a frame or frameset either in the Document window or by using the Frames panel.

When you select a frame or frameset, a selection outline appears around the frame or frameset in both the Frames panel and the Document window’s Design view.


Selecting frames and framesets in the Frames panel

The Frames panel provides a visual representation of the frames within a frameset. You can click a frame or frameset in the Frames panel to select that frame or frameset in the document, and then you can view or edit the properties of the selected item in the Property inspector. For more information, see Viewing and setting frame properties and Viewing and setting frameset properties.

The Frames panel shows the hierarchy of the frameset structure in a way that may not be apparent in the Document window. In the Frames panel, a very thick border surrounds each frameset; each frame is surrounded by a thin gray line and is identified by a frame name.

This is a picture of the feature being described.

To display the Frames panel:

Choose Window > Others > Frames.

To select a frame in the Frames panel:

Click the frame in the Frames panel.

To select a frameset in the Frames panel:

Click the border that surrounds the frameset in the Frames panel.


Selecting frames and framesets in the Document window

In the Document window’s Design view, when a frame is selected, its borders are outlined with a dotted line; when a frameset is selected, all the borders of the frames within the frameset are outlined with a light dotted line.

Note: Placing the insertion point in a document that’s displayed in a frame is not the same as selecting a frame. There are various operations (such as setting frame properties) for which you must select a frame.

When you select a frame or frameset, the Property inspector displays the properties of the selected item, allowing you to change the properties (see Viewing and setting frame properties and Viewing and setting frameset properties).

To select a frame in the Document window:

Alt-click (Windows) or Option-Shift-click (Macintosh) inside a frame in Design view.

To select a frameset in the Document window:

Click one of the frameset’s internal frame borders in Design view. (Frame borders must be visible to do this; choose View >Visual Aids > Frame Borders to make frame borders visible if they aren’t.)

Note: It’s generally easier to select framesets in the Frames panel than in the Document window. For more information, see Selecting frames and framesets in the Frames panel.

To select a different frame or frameset, do one of the following:
  • To select the next or previous frame or frameset at the same hierarchical level as the current selection, press Alt-Left Arrow or Alt-Right Arrow (Windows) or Command-Left Arrow or Command-Right Arrow (Macintosh). Using these keys, you can cycle through frames and framesets in the order in which they’re defined in the frameset file.
  • To select the parent frameset (the frameset that contains the current selection), press Alt-Up Arrow (Windows) or Command-Up Arrow (Macintosh).
  • To select the first child frame or frameset of the currently selected frameset (that is, first in the order in which they’re defined in the frameset file), Press Alt-Down Arrow (Windows) or Command-Down Arrow (Macintosh).


Opening a document in a frame

You can specify the initial content of a frame by either inserting new content into an empty document in a frame, or opening an existing document in a frame.

To open an existing document in a frame:
  1. Place the insertion point in a frame.
  2. Choose File > Open in Frame.
  3. Select a document to open in the frame and click OK (Windows), Choose (Mac OS X), or Open (Mac OS 9).

    4. The document appears in the frame.

  4. To make that document the default document to display in the frame when the frameset is opened in a browser, save the frameset. For more information, see Saving frame and frameset files.


Saving frame and frameset files

Before you can preview a frameset in a browser, you must save the frameset file and all of the documents that are to be displayed in the frames. You can save each frameset file and framed document individually, or you can save the frameset file and all documents appearing in frames at once.

When you use visual tools in Dreamweaver to create a set of frames, each new document that appears in a frame is given a default filename. For example, the first frameset file is named UntitledFrameset-1, while the first document in a frame is named UntitledFrame-1.

When you select one of the save commands, a dialog box appears, ready to save a document with its default filename. Because the default filenames are so similar, it may be difficult for you to determine which document you are saving. To identify the frame that displays the document you’re saving, look at the frame selection outline in the Document window (in Design view).

This is a picture of the feature being described.

To save a frameset file:
  1. Select the frameset in the Frames panel or the Document window.
  2. Choose one of the following:
    • To save the frameset file, choose File > Save Frameset.
    • To save the frameset file as a new file, choose File > Save Frameset As.

      • If the frameset file has not previously been saved, these two commands are equivalent.

To save a document that appears in a frame:

Click in the frame, then choose File > Save Frame or File > Save Frame As.

To save all files associated with a set of frames:

Choose File > Save All Frames.

This saves all open documents in the frameset, including the frameset file and all framed documents. If the frameset file has not yet been saved, a heavy border appears around the frameset in the Design view, and a dialog box allows you to choose a filename. Then for each frame that hasn’t yet been saved, a heavy border appears around the frame, and a dialog box allows you to choose a filename.

Note: If you used File > Open in Frame to open a document in a frame, then when you save the frameset, the document you opened in the frame becomes the default document to be displayed in that frame. If you don’t want that document to be the default, don’t save the frameset file.


Viewing and setting frame properties

Use the Property inspector to view and set most frame properties. To change the background color of a frame, set the background color of the document in the frame.

To view or set frame properties:
  1. Select a frame by doing one of the following:
    • Alt-click (Windows) or Shift-Option-click (Macintosh) a frame in the Document window’s Design view.
    • Click a frame in the Frames panel.
  2. Choose Window > Properties to open the Property inspector if it isn’t already open.
    This is a picture of the feature being described.
  3. To see all of the frame properties, click the expander arrow in the lower right corner of the Property inspector.

    4. For information on how to set specific options in the frame Property inspector, see Setting frame Property inspector options.

To change the background color of a document in a frame:
  1. Place the insertion point in the frame.
  2. Choose Modify > Page Properties.
  3. Click the Background pop-up menu to select a color.

Related topics

Viewing and setting frameset properties

Setting document properties


Viewing and setting frameset properties

Use the Property inspector to view and set most frameset properties. To set the title of the selected frameset, use the Page Properties dialog box or the Title field in the Document window’s toolbar.

To view or set frameset properties:
  1. Select a frameset by doing one of the following:
    • Click a border between two frames in the frameset in the Document window’s Design view.
    • Click the border that surrounds a frameset in the Frames panel.
  2. Choose Window > Properties to open the Property inspector if it isn’t already open.
  3. To see all of the frameset properties, click the expander arrow in the lower right corner of the Property inspector.
    This is a picture of the feature being described.

    4. For information on how to set specific options in the frameset Property inspector, see Setting frameset Property inspector options.

To set a title for a frameset document:
  1. Select a frameset by doing one of the following:
    • Click a border between two frames in the frameset in the Document window’s Design view.
    • Click the border that surrounds a frameset in the Frames panel.
  2. In the Title field of the Document toolbar, type a name for the document.

    3. When a visitor views the frameset in a browser, the title appears in the browser’s title bar.

Related topics

Viewing and setting frame properties

Setting document properties

Using the Document toolbar


Controlling frame content with links

To use a link in one frame to open a document in another frame, you must set a target for the link. The target attribute of a link specifies the frame or window in which the linked content opens. For example, if your navigation bar is in the left frame, and you want the linked material to appear in the main content frame on the right, you must specify the name of the main content frame as the target for each of the navigation bar links. When a visitor clicks a navigation link, the specified content opens in the main frame.

To select a frame in which to open a file, use the Target pop-up menu in the Property inspector. You can set a file to replace the document being displayed in another frame, to appear in place of the entire frameset, to appear in the frame where the link was (by not choosing a target), or to open in a new browser window.

To target a frame:
  1. In Design view, select text or an object.
  2. In the Link field of the Property inspector, do one of the following:
    • Click the folder icon and select the file to link to.
    • Drag the Point to File icon to select the file to link to.
  3. In the Target pop-up menu, choose the frame or window in which the linked document should appear.
    • If you named your frames in the Property inspector, the frame names appear in this menu. Select a named frame to open the linked document in that frame.

      • Note: Frame names appear only when you’re editing a document within a frameset. When you edit a document in its own Document window, outside of the frameset, frame names do not appear in the Target pop-up menu. If you’re editing a document outside of the frameset, you can type the target frame’s name into the Target text box.

    • _blank opens the linked document in a new browser window, leaving the current window untouched.
    • _parent opens the linked document in the parent frameset of the frame the link appears in, replacing the entire frameset.
    • _self opens the link in the current frame, replacing the content in that frame.
    • _top opens the linked document in the current browser window, replacing all frames.

      • Tip: If you’re linking to a page outside of your site, always use target="_top" or target="_blank" to ensure that the page doesn’t appear to be part of your site.

Related topic

Setting frame Property inspector options


Handling browsers that can’t display frames

Dreamweaver lets you specify content to display in text-based browsers and in older graphical browsers that do not support frames. This content is stored in the frameset file, wrapped in a noframes tag. When a browser that doesn’t support frames loads the frameset file, the browser displays only the content enclosed by the noframes tag.

Note: Content in the noframes area should be more than just a note saying “You should upgrade to a browser that can handle frames.” Some people have good reasons for using a system that doesn’t allow them to view frames. Try to make your content as accessible as possible to such visitors.

To provide content for browsers that don’t support frames:
  1. Choose Modify > Frameset > Edit NoFrames Content.

    2. Dreamweaver clears the Design view, and the words “NoFrames Content” appear at the top of the Design view.

  2. To create the NoFrames content, do one of the following:
    • In the Document window, type or insert the content just as you would for an ordinary document.
    • Choose Window > Code Inspector, place the insertion point between the body tags that appear inside the noframes tags, and type the HTML code for the content.
  3. Choose Modify > Frameset > Edit NoFrames Content again to return to the normal view of the frameset document.


Using JavaScript behaviors with frames

There are several JavaScript behaviors and navigation-related commands that are particularly appropriate for use with frames.

Set Text of Frame replaces the content and formatting of a given frame with the content you specify. The content can include any valid HTML. Use this action to dynamically display information in a frame. (See Set Text of Frame.)

Go to URL opens a new page in the current window or in the specified frame. This action is particularly useful for changing the contents of two or more frames with one click. (See Go to URL.)

The Insert Navigation Bar command adds a navigation bar to a page; after inserting a navigation bar, you can attach behaviors to its images and set which image displays based on a visitor’s actions. For example, you may want to show a button image in its Up or Down state to let a visitor know which page of a site is being viewed. (See Inserting a navigation bar.)

The Insert Jump Menu command lets you set up a menu list of links that open files in a browser window when clicked. You can also target a particular window or frame in which the document will open. (See Inserting a jump menu.)


Setting frame Property inspector options

Use the Property inspector to name a frame and to set borders and margins.

Tip: To make a link change the contents of another frame, you must name the target frame. To make it easier to create cross-frame links later, name each of your frames when you create it.

To specify properties for the selected frame:
  1. Name the frame.

    2. Frame Name is the name used by a link’s target attribute or by a script to refer to the frame.

    Note: A frame name must be a single word; underscores (_) are allowed, but hyphens (-), periods (.), and spaces are not. A frame name must start with a letter (as opposed to a numeral). Frame names are case-sensitive. Don’t use terms that are reserved words in JavaScript (such as top or navigator) as frame names.

  2. Change the following options as desired:

    3. Src specifies the source document to display in the frame. Click the folder icon to browse to and select a file. You can also open a file in a frame by placing the insertion point in the frame and choosing File > Open in Frame.

    Scroll specifies whether scroll bars appear in the frame. Setting this option to Default doesn’t set a value for the corresponding attribute, allowing each browser to use its default value. Most browsers default to Auto, meaning that scroll bars appear only when there is not enough room in a browser window to display the full contents of the current frame.

    No Resize prevents visitors from dragging the frame borders to resize the frame in a browser. (You can always resize frames in Dreamweaver; this option applies only to visitors viewing the frames in a browser.)

    Borders shows or hides the borders of the current frame when it’s viewed in a browser. Choosing a Borders option for a frame overrides the frameset’s border settings. The options are Yes (show borders), No (hide borders), and Default; most browsers default to showing borders, unless the parent frameset has Borders set to No. A border is hidden only when all frames that share the border have Borders set to No, or when the parent frameset’s Borders property is set to No and the frames sharing the border have Borders set to Default.

    Border Color sets a border color for all of the frame’s borders. This color applies to all borders that touch the frame, and overrides the specified border color of the frameset.

    Note: There is an underlying logic to which frame borders have a given border color applied to them, but that logic is complex; it may be difficult to understand why certain borders change color when you specify a border color. For detailed information about the effects of specifying border colors, see a book on frames and framesets.

  3. Set the following margin options if you wish (if margin options aren’t visible, click the expander arrow in the lower right corner of the Property inspector):

    4. Margin Width sets the width in pixels of the left and right margins (the space between the frame borders and the content).

    Margin Height sets the height in pixels of the top and bottom margins (the space between the frame borders and the content).

    Note: Setting the margin width and height for a frame is not the same as setting margins in the Modify > Page Properties dialog box.

Related topics

Viewing and setting frame properties

Setting frameset Property inspector options


Setting frameset Property inspector options

Use frameset properties to set borders and frame sizes for a frameset.

Setting a frame property overrides the setting for that property in a frameset. For example, setting border properties in a frame overrides the border properties set in the frameset.

To set approximate sizes for frames, drag frame borders in the Document window’s Design view. Then use the Property inspector to specify exact sizes, and to specify how much space the browser allocates to a row or column of frames when the browser window size doesn’t allow the frames to display at full size.

To specify border properties for the selected frameset:

Change the following options as desired:

Borders determines whether borders should appear around frames when the document is viewed in a browser. To display borders, select Yes; to prevent the browser from displaying borders, select No. To allow the browser to determine how borders are displayed, select Default.

Border Width specifies a width for all the borders in the frameset.

Border Color sets a color for the borders. Use the color picker to select a color, or type the hexadecimal value for a color.

To set frame sizes for rows and columns of the selected frameset:
  1. Click a tab on the left side of the RowCol Selection area to select a row, or click a tab on the top to select a column.
    This is a picture of the feature being described.
  2. In the Value field, enter a height for the selected row or a width for the selected column.
  3. To specify how much space the browser allocates to each frame, choose from the following choices in the Units menu:

    4. Pixels sets the size of the selected column or row to an absolute value. This option is the best choice for a frame that should always be the same size, such as a navigation bar. Frames with sizes specified in pixels are allocated space before frames with sizes specified as percent or relative. The most common approach to frame sizes is to set a left-side frame to a fixed pixel width and to set a right-size frame to relative, which allows the right frame to stretch to take up all the remaining space after the pixel width is allocated.

    Note: If all of your widths are specified in pixels, and a visitor views the frameset in a browser that’s too wide or too narrow for the width you specified, then the frames stretch or shrink proportionately to fill the available space. The same applies to heights specified in pixels. Thus, it’s generally a good idea to specify at least one width and height as relative.

    Percent specifies that the selected column or row should be a percentage of the total width or height of its frameset. Frames with units set to Percent are allocated space after frames with units set to Pixels, but before frames with units set to Relative.

    Relative specifies that the selected column or row be allocated the rest of the available space after Pixels and Percent frames have had space allocated; that remaining space is divided proportionally among the frames with sizes set to Relative.

    Note: When you choose Relative from the Units menu, any number you’ve entered in the Value field disappears; if you want to specify a number, you must re-enter it. If there’s only one row or column set to Relative, though, there’s no need to enter a number, since that row or column receives all the remaining space after the other rows and columns have space allocated. To be certain of full cross-browser compatibility, you can enter 1 in the Value field; that’s equivalent to entering no value.

    Space allocations for frames are complicated; for detailed information, see a book on frames and framesets.

Previous


Adding Content

Use the visual tools in Dreamweaver to add a variety of content to your web pages. Add and format elements such as text, images, colors, movies, sound, and other forms of media. Be sure to make your pages accessible to visitors with disabilities.

This part contains the following chapters:

  • Inserting and Formatting Text
  • Inserting Images
  • Dreamweaver Integration with Other Applications
  • Inserting Media
  • Dreamweaver and Accessibility


Inserting and Formatting Text

Macromedia Dreamweaver MX offers several ways for you to add and format text in a document. This chapter describes how to insert text, set font type, size, color, and alignment attributes, as well as how to create and apply your own custom styles using HTML styles and Cascading Style Sheet (CSS) styles.

This chapter covers the following topics:

  • Inserting and formatting HTML text
  • Formatting text
  • Using HTML styles to format text
  • About Cascading Style Sheets
  • Converting CSS styles to HTML tags
  • Searching and replacing text
  • Reference
Next


Inserting and formatting HTML text

Formatting in Dreamweaver is similar to using a standard word processor. Use the Text > Paragraph Format submenu or the Format pop-up menu in the Property inspector to set the default formatting style (Paragraph, Preformatted, Heading 1, Heading 2, and so on) for a block of text. To change the font, size, color, and alignment of selected text, use the Text menu or the Property inspector. To apply text formatting such as bold, italic, code, underline, and so on, use the Text > Style submenu.

You can also combine several standard HTML tags to form a single style, called an HTML style. For example, you can manually apply HTML formatting using a combination of tags and attributes, and save that formatting as an HTML style; it’s stored in the HTML Styles panel. The next time you want to format text using that combination of HTML tags, you can simply select the saved style from the HTML Styles panel. HTML styles are supported by almost all web browsers and save time over manually formatting text.

Another kind of style, called a CSS style (CSS stands for Cascading Style Sheets), lets you apply text and page formatting with the advantage of automatic updating. You can store CSS styles directly in the document or, for more power and flexibility, in an external style sheet. If you attach an external style sheet to several web pages, all the pages automatically reflect any changes you make to the style sheet. To access CSS styles, use the CSS Styles panel or the CSS mode of the text Property inspector. For more information about using the text Property inspector to apply HTML or CSS styles, see Setting Text property options

Manual HTML formatting and HTML styles apply formatting using standard HTML tags (such as b, i, font, and code) that are supported by all popular web browsers. CSS styles define the formatting for all text in a particular class or redefine the formatting for a particular HTML tag (such as h1, h2, p, or li). CSS styles are supported only by the web browsers Netscape Navigator 4.0 and later versions, and Microsoft Internet Explorer 4.0 and later versions.

You can use CSS styles, HTML styles, and manual HTML formatting within the same page. Formatting is applied in a hierarchical manner, manual HTML formatting overrides formatting applied by an HTML style or CSS style, and CSS styles embedded in a document override external CSS styles. See About Cascading Style Sheets.


Adding text to a document

There are a number of ways to add text to a Dreamweaver document. You can type text directly in the Dreamweaver document window, or you can cut and paste or import text from other documents.

To add text to your document, do one of the following:
  • Type text directly into the Document window.
  • Copy text from another application, switch to Dreamweaver, position the insertion point in the Design view of the Document window, and choose Edit > Paste. Dreamweaver doesn’t preserve text formatting applied in the other application, but it does preserve line breaks.


Importing text from other documents

You can import tabular data into your document by first saving the files (such as Microsoft Excel files or a database files) as delimited text files. For additional information on importing and formatting table data, see Importing tabular data in the Inserting and Formatting Text.

You can also import text from Microsoft Word HTML documents. For information on importing Word HTML documents, see Opening existing documents.

To import tabular data:
  1. Choose File > Import > Import Tabular Data, or choose Insert > Tabular Data.

    2. The Import Table dialog box appears.

    Browse for the file you want or enter its name in the text box.

  2. Select the delimiter used when the file was saved as delimited text. Your options are Tab, Comma, Semicolon, Colon, and Other.

    3. If you select Other, a blank field appears next to the option. Enter the character that was used as a delimiter.

  3. Use the remaining options to format or define the table into which the data will be imported.
  4. Click OK when you’re done.


Adding space between characters

HTML only allows for one space between characters; to add additional space in a document you must insert a non-breaking space.

You can set a preference to automatically add non-breaking spaces in a document. To set this preference, choose Edit > Preferences or Dreamweaver > Preferences (Mac OS X) and in the General category make sure Allow Multiple Consecutive Spaces is checked.

To insert a non-breaking space, do one of the following:
  • In the Insert bar, select Character, then click the Insert Non-breaking Space icon.
  • Choose Insert > Special Characters > Non-Breaking Space.
  • Press Control+Shift+Spacebar (Windows) or Option+Spacebar (Macintosh).


Adding paragraph spacing

Dreamweaver works similarly to many word processing application: you press Enter (Windows) or Return (Macintosh) to create a new paragraph. Web browsers automatically insert a blank line of space between paragraphs. You can add a single line of space between paragraphs by inserting a line break.

To add a paragraph return:
  • Press Enter (Windows) or Return (Macintosh).
To add a line break, do one of the following:
  • Press Shift+Enter (Windows) or Shift+Return (Macintosh).
  • In the Insert bar, select Character, then click the Line Break icon.
  • Choose Insert > Special Characters > Line Break.


Formatting text

You can apply HTML text formatting to one letter or build an entire site using Text > Paragraph Format commands or options in the Property inspector. This kind of manual formatting replaces or overrides formatting set by an HTML style or CSS style.

When you apply HTML text formatting, you use the Property inspector and commands in the Text menu, such as Text > Paragraph Format and Text > Style.

Related topics

Using HTML styles to format text

Creating an HTML style

Creating a new CSS style


Setting and changing fonts and styles

Use options in the Property inspector or the Text menu to set or change font characteristics for selected text. You can set the font type, style (such as bold or italic), and size.

When you use the Property inspector to apply bold or italic style, Dreamweaver automatically applies the <strong> or <em> tag, respectively. If you are designing pages for viewers with 3.0 or older version browsers, you should change this preference in the General category of the Preferences dialog box (Edit > Preferences).

HTML font sizes are relative, not specific, point sizes. Users set the point size of the default font for their browsers; this is the font size that they will see when you select Default or 3 in the Property inspector or Text > Size submenu. Sizes 1 and 2 will appear smaller than the default font size; sizes 4 through 7 will appear larger. Also, fonts generally look larger in Windows than on the Macintosh, though Macintosh Internet Explorer 5 uses the same default font size as Windows.

Tip: One way to ensure consistency with font size is to use CSS styles with your font size set in pixels. For more information on CSS, see About Cascading Style Sheets.

Related topic

Modifying font combinations

To set or change font characteristics:
  1. Select the text. If no text is selected, the change applies to subsequent text you type.
  2. Choose from the following options:
    • To change the font, choose a font combination from the Property inspector or from the Text > Font submenu.

      • Choose Default to remove previously applied fonts; Default applies the default font for the selected text (either the browser default font or the font assigned to that tag in the CSS style sheet).

    • To change the font style, click Bold or Italic in the Property inspector, or choose a font style (Bold, Italic, Underline, and so on) from the Text > Style submenu.
    • To change the font size, choose a size (1 through 7) from the Property inspector or from the Text > Size submenu.
    • To increase or decrease the size of selected text, choose a relative size (+ or –1 to + 4 or –3) from the Property inspector or from either the Text > Size Change submenu.

      • Note: These numbers indicate a relative difference from the basefont size. The default basefont value is 3. Thus, a +4 value results in a font size of 3 + 4, or 7. The maximum sum for your font size values is 7. If you try to set them higher, they display as 7. Dreamweaver does not display the basefont tag (which goes in the head section), although the font size should display properly in a browser. To test this, compare text set at 3 and text set at +3.


Modifying font combinations

Use the Edit Font List command to set the font combinations that appear in the Property inspector and the Text > Font submenu.

Font combinations determine how a browser displays text in your web page. A browser uses the first font in the combination that is installed on the user’s system; if none of the fonts in the combination are installed, the browser displays the text as specified by the user’s browser preferences.

To modify font combinations:
  1. Choose Text > Font > Edit Font List.
  2. Select the font combination from the list at the top of the dialog box.

    3. The fonts in the selected combination are listed in the Chosen Fonts list in the lower left corner of the dialog box. To the right is a list of all available fonts installed on your system.

  3. Choose from the following options:
    • To add or remove fonts from a font combination, click the arrows button (<< or >>) between the Chosen Fonts list and the Available Fonts list.
    • To add or remove a font combination, click the plus (+) and minus (–) buttons at the top of the dialog box.
    • To add a font that is not installed on your system, type the font name in the text field below the Available Fonts list and click the << button to add it to the combination. Adding a font not installed on your system is useful, for example, for specifying a Windows-only font when you are developing pages on a Macintosh.
    • To move the font combination up or down in the list, click the arrow buttons at the top of the dialog box.
To add a new combination to the font list:
  1. Choose Text > Font > Edit Font List.
  2. Select a font from the Available Fonts list and click the << button to move the font to the Chosen Fonts list.
  3. Repeat step 2 for each subsequent font in the combination.

    4. To add a font that is not installed on your system, type the font name in the text field below the Available Fonts list and click the << button to add the font to the combination. Adding a font not installed on your system is useful, for example, for specifying a Windows-only font when you are developing pages on a Macintosh.

  4. When you have finished selecting specific fonts, select a generic font family from the Available Fonts menu and click the << button to move the generic font family to the Chosen Fonts list.

    5. Generic font families include cursive, fantasy, monospace, sans-serif, and serif. If none of the fonts in the Chosen Fonts list are available on the user’s system, the text appears in the default font associated with the generic font family. For example, the default monospace font on most systems is Courier.


Formatting paragraphs

Use the Format pop-up menu in the Property inspector or the Text > Paragraph Format submenu to apply the standard paragraph and heading tags.

When you apply a heading tag to a paragraph, Dreamweaver automatically adds the next line of text as a standard paragraph. To change this setting, choose Edit > Preferences or Dreamweaver > Preferences (Mac OS X), then in the General category, under Editing Options make sure Switch to Plain Paragraph after Heading is unchecked.

Related Topics

Creating an HTML style

Setting Text property options

Defining CSS Type properties

To apply a paragraph or heading tag:
  1. Place the insertion point in the paragraph, or select some of the text in the paragraph.
  2. Using the Text > Paragraph Format submenu or the Format pop-up menu in the Property inspector, choose an option:
    • Choose a paragraph format (for example, Heading 1, Heading 2, Preformatted Text, and so on). The HTML tag associated with the selected style (for example, h1 for Heading 1, h2 for Heading 2, pre for Preformatted text, and so on) is applied to the entire paragraph.
    • Choose None to remove a paragraph format.


Aligning text

You align text on the page using the Property inspector or the Text > Align submenu. You can center any element on a page using the Text > Align > Center command.

To align text:
  1. Select the text you want to align or simply insert the pointer at the beginning of the text.
  2. Click an alignment option (Left, Right, or Center) in the Property inspector, or choose Text > Align and choose an alignment command.
To center elements:
  1. Select the element (image, plug-in, table, or other page element) you want to center.
  2. Choose Text > Align > Center.

Note: You can align and center complete blocks of text; you cannot align or center part of a heading or part of a paragraph.


Indenting text

Using the Indent command applies the blockquote HTML tag to a paragraph of text, indenting text on both sides of the page.

To indent text and remove indentation:
  1. Place the insertion point in the paragraph you want to indent.
  2. Click the Indent or Outdent button in the Property inspector, choose Text > Indent or Outdent, or choose List > Indent or Outdent from the context menu.

Note: You can apply multiple indents to a paragraph. Each time you choose this command the text indents further from both sides of the document.


Changing the text color

You can change the color of selected text so that the new color overrides the text color set in Page Properties. (If no text color has been set in Page Properties, the default text color is black.)

To change the color of text:
  1. Select the text.
  2. Choose from the following options:
    • Choose a color from the palette of browser-safe colors by clicking the color picker in the Property inspector.
    • Choose Text > Color. The system color picker dialog box appears. Select a color and click OK.
    • Enter the color name or hexadecimal number directly in the Property inspector field.
    • To define the default text color, use the Modify > Page Properties command. See Defining default text colors.
To return text to the default color:
  1. In the Property inspector, click the color box to open the palette of web-safe colors.
  2. Click the Strike-through button (the white square button with a red line through it, found in the upper right corner).


Creating bulleted and numbered lists

You can create numbered (ordered) lists, bulleted (unordered) lists, and definition lists from existing text or from new text as you type in the Document window. Definition lists do not use leading characters like bullet points or numbers and are often used in glossaries or descriptions. Lists can also be nested. Nested lists are lists that contain other lists. For example, you might want an ordered or bulleted list nested within another numbered or ordered list.

For information about setting a specific list type and other list options for an entire list or a specific list item (for example, reset numbering or use Roman numerals in an ordered list, or to set square bullets), see Setting List property options.

To create a new list:
  1. In the Dreamweaver document, place the insertion point where you want to add a list, then do one of the following:
    • Click either the Bulleted or Numbered List button in the Property inspector
    • Choose Text > List and select the type of list desired—Unordered (bulleted) List, Ordered (numbered) List, or Definition List.

      • The leading character for the specified list item appears in the document window.

  2. Type the list item text, then press Enter (Windows) or Return (Macintosh) to create another list item.
  3. To complete the list, press Enter twice (Windows) or press Return twice (Macintosh).
To create a list using existing text:
  1. Select a series of paragraphs to make into a list.
  2. Click the Bulleted or Numbered List button in the Property inspector, or choose Text > List and select the type of list desired—Unordered List, Ordered List, or Definition List.
To create a nested list:
  1. Select the list items you want to nest.
  2. Click the Indent button in the Property inspector, or choose Text > Indent.

    3. Dreamweaver indents the text and creates a separate list with the original list’s HTML attributes.

  3. Apply a new list type or style to the indented text by following the same procedure used above.


Inserting dates

Dreamweaver provides a convenient Date object, which inserts the current date in whatever format you prefer (with or without the time) and provides the option of updating that date whenever you save the file.

Note: The dates and times shown in the Insert Date dialog box are not the current date, nor do they reflect the dates/times that a visitor sees when they display your site. They are examples only of the way you want to display this information.

To insert the current date into a document:
  1. In the Document window, place the insertion point where you want the date to be inserted.
  2. Do one of the following:
    • Choose Insert > Date.
    • In the Insert bar, select Common, then click the Date button.
  3. In the resulting dialog box, select a format for the name of the day of the week, a format for the date, and a format for the time.
  4. If you want the inserted date to be updated every time you save the document, select Update Automatically on Save. If you want the date to become plain text when it’s inserted, and never update automatically, deselect that option.
  5. Click OK to insert the date.

Tip: If you have selected Update Automatically on Save, you can edit the date format after it has been inserted into the document by clicking on the formatted text and selecting Edit Date Format in the Property inspector.


Inserting special characters

Certain special characters are represented in HTML by a name or a number, referred to as an entity. HTML includes entity names for characters such as the copyright symbol (&copy;) the ampersand (&amp;), and the registered-trademark symbol (&reg;). Each entity has both a name (such as &mdash;) and a numeric equivalent (such as &#151;).

Tip: HTML uses the angle brackets <> in its code, but you may need to express the special characters for greater than or less than without Dreamweaver interpreting them as code. In this case, use &gt; for greater than (>) and &it; for less than (<).

Unfortunately, many browsers (especially older browsers, and browsers other than Navigator and Internet Explorer) don’t properly display many of the named entities.

You can insert several special characters (in the form of HTML entities) by choosing the Characters category in the Insert bar.

To insert a special character into a document:
  1. In the Document window, place the insertion point where you want to insert a special character.
  2. Do one of the following:
    • Choose the name of the character from the Insert > Characters submenu.
    • In the Insert bar, choose the Characters category and select the character you want.

Tip: There are many other special characters available; to select one of them, choose Insert > Characters > More or select the Insert More Characters icon in the Insert bar, select a character, then click OK.


Using horizontal rules

Horizontal rules (lines) are useful for organizing information. On a page, you can visually separate text and objects with one or more rules.

To create a horizontal rule:
  1. In the Document window, place the insertion point where you want to insert a horizontal rule.
  2. Do one of the following:
    • Choose Insert > Horizontal Rule.
    • In the Insert bar, select Common, and then click the Horizontal Rule button.
To modify a horizontal rule:
  1. In the Document window, select the horizontal rule.
  2. Choose Window > Properties to open the Property inspector, and modify the properties as desired.

    3. W and H specify the width and height of the rule in pixels or as a percentage of the page size.

    Align specifies the alignment of the rule (Default, Left, Center, or Right). This setting applies only if the width of the rule is less than the width of the browser window.

    Shading specifies whether the rule is drawn with shading. Deselect this option to draw the rule in a solid color.


Using HTML styles to format text

By setting up HTML styles you can quickly and consistently apply font formatting to text in your documents. HTML styles can consist of single or multiple HTML font tag attributes such as color, face, size, as well as other formatting attributes such as bold or italic. For example, you can create an HTML style for text which is Arial, size 4+, green, and italic. You can then quickly apply the style by selecting the text you want it applied to and then selecting the HTML style from the HTML Styles panel.

Since HTML styles consist only of font tags, they can be viewed by browsers that don't support cascading style sheets (CSS), such as 3.0 and earlier browsers.

One disadvantage of HTML styles is that changes you make to an HTML style aren't automatically updated in the document. If you applied a style and later change it, you'll have to reapply the style to the text in order to update the formatting.

Unlike CSS styles, HTML style formatting only affects text that you apply it to, or text that you create using a selected HTML style. If you want the ability to change formatting, and automatically update all instances of that formatting, use CSS styles; see About Cascading Style Sheets.

You can use the HTML Styles panel to set up the HTML styles you use in your site, and then share them with other users, local sites, or remote sites. For information, see Using your HTML styles in other sites.

To display the HTML Styles panel, do one of the following:
  • Choose Window > HTML Styles.
  • Press Control + F11 (Windows) or Command + F11 (Macintosh).
  • Click the HTML Styles icon in the Launcher.


Using the HTML styles panel

The HTML Styles panel displays the HTML Styles that are available for the current local site.

This is a picture of the feature being described.

There are two types of HTML Styles: Paragraph Styles and Selection Styles. They can be identified by the symbol in the first column of the HTML Styles panel:

Paragraph Styles are preceded by a paragraph mark and allow you to format paragraphs.

Selection Styles are preceded by an a and allow you to format text you have selected.The first two styles in the HTML Styles panel, Clear Selection Style and Clear Paragraph Style, let you remove all format tags from the text you select and apply them to.

In the HTML Styles panel above, notice the Bold style. A plus sign (+) preceding a style indicates the style adds formatting to the text it is applied to. If a style doesn't have a plus sign, any existing style is cleared before the selected style is applied. For example, using the HTML Style "a+ Red" simply adds red to any formatting which has already been applied to the selected text, while using the HTML style "Emphasis" clears any existing formatting before applying this style.

To view the style attributes of an existing HTML style:
  1. In the HTML Styles panel, select a style.
  2. While in the HTML Styles panel, right-click (Windows) or Control-click (Macintosh) and choose Edit from the context menu, or double-click the HTML style and choose Edit from the context menu.
  3. In the Define HTML Style dialog box, specify the settings for the style.

    4. The Apply To options determine whether the style applies to the selected text (Selection) or the current text block (Paragraph). The When Applying options determine whether the settings for the style are added to the original text formatting (Add to Existing Style), or removed from the existing formatting and replaced with the new settings (Clear Existing Style).

To apply an existing HTML style:

In the HTML Styles panel, select a style.

  • If the Auto Apply checkbox at the bottom of the panel is selected, click the style once.
  • If the Auto Apply checkbox is not selected, click the style, then click Apply.
To clear text formatting in your document:
  1. Select the formatted text.
  2. In the HTML Styles panel, click Clear Paragraph Style or Clear Selection Style.

    3. Clear Paragraph Style removes any formatting from the current text block in the document. Clear Selection Style removes any formatting from the selected text.

Note: You can use Clear Paragraph Style and Clear Selection Style to remove any formatting (except CSS formatting), regardless of how the original formatting was applied (for example, through the HTML Styles panel or the Property inspector).

To remove a style from the HTML Styles panel:
  1. In the HTML Styles panel, deselect the checkbox to turn off the Auto Apply option.
  2. Select an HTML style.
  3. Click the Delete Style (trash can) icon in the lower right corner of the panel.


Creating an HTML style

You can create styles in two ways: you can format the text in the document and then create a style based on the selected text or you can create a style in the HTML Styles panel by selecting the formatting attributes you want to apply.

To create a new HTML style:
  1. In the HTML Styles panel, click the New Style icon; you can also choose Text > HTML Styles > New Style.

    2. The Define HTML Style dialog box appears.
    This is a picture of the feature being described.

  2. In the Name text box, enter a name for the style.
  3. Under Apply To, choose how this style will be applied by doing one of the following:
    • To set a selection style, choose Selection.
    • To set a paragraph style, choose Paragraph.

      • Note: A paragraph style applies to the entire text block in which the insertion point is located, regardless of what text is actually selected.

  4. For When Applying, choose whether to apply the HTML style in addition to the existing style of the selected text or paragraph, or to clear the formatting of the selection or paragraph and apply the new HTML style.

    5. Note: The hierarchy for applying styles is as follows: HTML styles take precedence over CSS styles, which take precedence over external CSS styles. For more information, see About Cascading Style Sheets.

  5. Under Font Attributes, use the pop-up menus to select the formatting options you want to apply.
  6. If you are creating a paragraph style, under Paragraph Attributes, in the Format pop-up menu, choose a paragraph tag (for example, paragraph, Heading1, Preformatted).
  7. For Alignment, click the left, center, or right alignment button to set the paragraph alignment you want.
  8. Click OK.

    9. The style is added to the HTML Styles list.

To create a new HTML style based on existing text:
  1. In your document, select or create text that has the formatting you want to use for your new HTML style.

    2. Tip: You can use the Property inspector to view and apply formatting, then save the formatting as an HTML style.

  2. In the HTML Styles panel, click the New Style icon (+) located in the lower right corner.

    3. The Define HTML Style dialog box appears.

  3. In the Name text box, enter a name for the style.
  4. Under Apply To, choose how this style will be applied by doing one of the following:
    • To set a selection style, choose Selection.
    • To set a paragraph style, choose Paragraph.

      • Note: A paragraph style applies to the entire text block in which the insertion point is located, regardless of what text is actually selected.

  5. For When Applying, choose whether to apply the HTML style in addition to the existing style of the selected text or paragraph, or to clear the formatting of the selection or paragraph and apply the new HTML style.

    6. Note: The hierarchy for applying styles is as follows: HTML styles take precedence over CSS styles, which take precedence over external CSS styles. For more information, see About Cascading Style Sheets.

  6. If you are creating a paragraph style, under Paragraph Attributes, in the Format pop-up menu, choose a paragraph tag (for example, paragraph, Heading1, Preformatted).
  7. For Alignment, click the left, center, or right alignment button to set the paragraph alignment you want.
  8. Click OK.


Applying an HTML style

Applying a style is as easy as selecting the text or paragraph you want the style applied to, and then selecting the style in the HTML Styles panel.

To apply an HTML Style:
  1. In the lower left corner of the HTML Styles panel make sure the Apply option is selected, to automatically apply the style you select.
  2. In the Document window do one of the following to select the text you want the style applied to:
    • Place the insertion point anywhere in a paragraph to apply a paragraph style.
    • Use the cursor to select the text you want a selection style applied to.
  3. In the HTML Styles panel, click the HTML style you want to apply to the text.

    4. The text automatically updates in the Document window.


Editing an HTML style

When you edit an HTML style, Dreamweaver does not automatically update text that was previously formatted using the HTML style. To update the style to previously formatted text, you must manually re-apply the style.

To edit an existing HTML style:
  1. Make sure no text is selected in the Document window.
  2. In the HTML Styles panel, make sure the Auto Apply checkbox is deselected.

    3. If the Auto Apply option is turned on, the HTML style will be applied when you select it in the HTML Styles panel.

  3. In the HTML Styles panel, do one of the following:
    • Right-click (Windows) or Control-click (Macintosh) the style, then choose Edit from the context menu.
    • Double-click the style.

      • The Define HTML Style dialog box appears.

  4. In the dialog box, set style attribute options for the style.
  5. To reset it to the default options, click Clear.


Using your HTML styles in other sites

You can use the HTML Styles panel to record the HTML styles you use in your site, and then share them with other users, local sites, or remote sites.

HTML styles are automatically stored in your local site's Library folder in a file named Styles.xml. You can copy the Styles.xml file from the Library folder of one local site to the Library folder of another local site and reuse styles you create.

Note: Each site can only contain one Styles.xml file; therefore, if you created new HTML styles in the site to which you are copying a Styles.xml file, the file you copy there will replace the existing file. You won't lose any formatting changes you've already applied, and you can recreate the styles by selecting text in the document and defining a new HTML style.

To share your HTML styles with other sites or users:
  1. Choose Window > Site or Site > Site Files to open the Site panel in Site Files view.
  2. In the Site panel, locate and then open the Library folder.

    3. You’ll notice a file called styles.xml. This file contains all your HTML styles for the site. You can put, get, check in, check out, and copy this file as you would any other file in your site. You can also create Design Notes for the styles.xml file. You must first check out the styles.xml file before you can create or edit a style for a remote site.

    For more information on using these options, see Setting up a remote folder.


About Cascading Style Sheets

Cascading Style Sheets (CSS) are a collection of formatting rules which control the appearance of content in a web page. With CSS styles you have great flexibility and control of the exact page appearance, from precise positioning of layout to specific fonts and styles.

CSS styles let you control many properties that cannot be controlled using HTML alone. For example, you can assign custom list bullets and specify different font sizes and units (pixels, points, and so on). By using CSS styles and setting font sizes in pixels, you can ensure a more consistent treatment of your page layout and appearance in multiple browsers. In addition to text formatting, you can control the format and positioning of a block-level elements in a web page. For example, you can set margins, borders, float text around other text, and so on.

A CSS style rule consists of two parts—the selector and the declaration. The selector is the name of the style (such as TR, or P) and the declaration defines what the style elements are. The declaration consists of two parts, the property (such as font-family), and value (such as Helvetica). The term cascading refers to your ability to apply multiple style sheets to the same web page. For example, you can create one style sheet to apply color and another to apply margins, and apply them both to the same page to create the design you want.

A major advantage of CSS styles is that they provide easy update capability; when you update a CSS style, the formatting of all the documents that use that style are automatically updated to the new style.

In Dreamweaver, you use the CSS Styles panel to create, view, and attach style attributes to your documents. For information about using the CSS Styles panel, see Using the CSS Styles panel. In addition to styles and style sheets you create, you can use style sheets that come with Dreamweaver to apply styles to your documents. See Creating a document based on a Dreamweaver design file.

You can define the following types of CSS style sheets in Dreamweaver:

  • Custom CSS styles, also called class styles, let you set style attributes to any range or block of text. See Applying a custom (class) CSS style.
  • HTML tag styles redefine the formatting for a particular tag, such as h1. When you create or change a CSS style for the h1 tag, all text formatted with the h1 tag is immediately updated.
  • CSS selector styles redefine the formatting for a particular combination of tags (for example, td h2 applies whenever an h2 header appears inside a table cell) or for all tags that contain a specific id attribute (for example, #myStyle applies to all tags that contain the attribute-value pair ID="myStyle").

CSS style sheets reside in the head area of a document. CSS styles can define the formatting attributes for HTML tags, ranges of text identified by a class attribute. Dreamweaver MX recognizes styles defined in existing documents as long as they conform to CSS style guidelines.

Tip: To display the O’Reilly CSS reference guide included with Dreamweaver, click the Reference button found on the toolbar and choose O’Reilly CSS Reference from the pop-up menu.

Manual HTML formatting overrides formatting applied with CSS (or HTML) styles. For CSS styles to control the formatting of a paragraph, you must remove all manual HTML formatting or HTML styles.

Most styles attributes you apply can be viewed in the Document window. You can also preview the document in a browser window to see it applied. Some of the CSS style attributes are rendered differently in Microsoft Internet Explorer 4.0 and Netscape Navigator 4.0, and some are not currently supported by any browser.

While working in the CSS Styles panel, you can use the Design Time Style Sheet feature of Dreamweaver. This feature allows you to hide or show style sheet attributes while you are designing a page in Dreamweaver (for example to view a document with a style sheet designed for Navigator or for Internet Explorer). For information about using Design Time Style Sheets see Using Design Time style sheets.


Using the CSS Styles panel

You use the CSS Styles panel to create, view properties of, and apply CSS styles to elements in a document.

To open the CSS Styles panel, do one of the following:
  • Choose Window > CSS Styles.
  • Press Shift+F11.

The Apply Styles and Edit Styles radio buttons located at the top of the CSS Styles panel let you select different views of the CSS styles associated with the current document.

You use the Apply Styles view to select a class style to apply to an element in your document. The Apply Styles view only displays custom (class) styles. Redefined HTML styles and selector styles do not appear in this pane. Since they are associated with an HTML tag, their style attributes are automatically applied to any tags in the document affected by the defined style. For example, if you define style attributes for the table tag, a table in your document will automatically update with the style definitions you selected.

This is a picture of the feature being described.

The Edit Styles view allows you to look at the style definition of the styles associated with the current document. The Edit Styles view displays style definition of custom (class) CSS styles, redefined HTML tags, and CSS selector styles. You also use the Edit Styles view to view Design Time style sheets you have applied to the document.

This is a picture of the feature being described.

As you create or attach a CSS style sheet, the style’s name and attributes appear in the CSS Styles panel’s Edit Styles view. Edit Styles lists all the selectors defined in all style tags and externally linked or imported style sheets. Apply Styles lets you view styles applied in the current document, as well as styles available in an attached external style sheet.

When you create a custom (class) style, it appears in the CSS Styles panel and in the Text > CSS Styles submenu.

The following buttons are located at the bottom of the CSS Styles panel:

This is a picture of the feature being described.

Attach Style Sheet opens the Link External Style Sheet dialog box. Select an external style sheet to link to or import into your current document. For information about attaching an external style sheet, see Creating and linking to an external CSS style sheet.

New CSS Style opens the New CSS Style dialog box. You use the New CSS Styles dialog to select the type of style you’re creating—for example, to create a class style, redefine an HTML tag, or to define a CSS selector. For information about creating a new style, see Creating a new CSS style.

Edit Style Sheet opens the CSS Style Definition dialog box. Edit any of the styles in the current document or in an external style sheet. For information about updating a style sheet, see Editing a CSS style.

Delete CSS Style removes the selected style from the CSS Styles panel, and removes the formatting from any element to which it was applied.

Note: Right-click (Windows) or Control-click (Macintosh) the CSS Styles panel to open a context menu of options for working with CSS Style Sheet commands.


Creating a new CSS style

Create a CSS style to automate the formatting of HTML tags or a range of text identified by a class attribute.

To create a new CSS style:
  1. Place the insertion point in the document, then do one of the following to open the New CSS Style dialog box:
    • In the CSS Styles panel (Window > CSS Styles), click the New CSS Style button (+) located in the lower right area of the panel.
    • In the text Property inspector, click the Toggle CSS/HTML Mode button, if necessary, to switch to CSS Mode, then in the CSS Style pop-up menu, select New CSS Style.
    • Choose Text > CSS Styles > New CSS Style.

      • The New CSS Style dialog box appears.

  2. Define the type of CSS style you want to create:
    • To create a custom style that can be applied as a class attribute to a range or block of text, select Make Custom Style (Class), then in the Name field, enter a name for the style.

      • Note: Custom style (class) names must begin with a period and can contain any combination of letters and numbers. For example, .myhead1. If you don’t enter a beginning period, Dreamweaver automatically enters it for you.

    • To redefine the default formatting of a specific HTML tag, select Redefine HTML Tag, then in the Tag field, enter an HTML tag or choose one from the pop-up menu.
    • To define the formatting for a particular combination of tags or for all tags that contain a specific Id attribute, select Use CSS Selector, then in the Selector field, enter one or more HTML tags or choose one from the pop-up menu. The selectors available from the pop-up menu are a:active, a:hover, a:link, and a:visited.
  3. Select the location in which the style will be defined:
    • To create an external style sheet, choose New Style Sheet File.
    • To embed the style in the current document, choose This Document Only.
  4. Click OK.

    5. The Style Definition dialog box appears.

  5. Choose the style options you want to set for the new CSS style.
  6. When you are done setting style attributes, click OK.

For information on specific CSS style settings, see the following topics:

  • Defining CSS Type properties
  • Defining CSS Style Background properties
  • Defining CSS Style Block properties
  • Defining CSS Style Box properties
  • Defining CSS Style Border properties
  • Defining CSS Style List properties
  • Defining CSS Style Positioning properties
  • Defining CSS Style Extensions properties


Applying a custom (class) CSS style

Custom (class) CSS styles are the only type of CSS style that can be applied to any text in a document, regardless of which tags control the text. All custom (class) styles associated with the current document are displayed in the Apply Style view of the CSS Styles panel and in the CSS mode of the text Property inspector.

You’ll see most styles updated immediately, however, you should preview your page in a browser to verify a style was applied as expected. When you apply two or more CSS styles to the same text, the styles may conflict and produce unexpected results. See About conflicting styles for more information.

To apply a custom CSS style:
  1. In the document, select the text to which you want to apply a CSS style.

    2. Place the insertion point in a paragraph to apply the style to the entire paragraph.

    If you select a range of text within a single paragraph, the CSS style affects only the selected range.

    To specify the exact tag to which the CSS style should be applied, select the tag in the tag selector located at the bottom left of the Document window.

  2. To apply a class style, do one of the following:
    • In the CSS Styles panel (Window > CSS Styles), select Apply Styles, then in the CSS Styles list, click the name of the style you want to apply.
    • In the text Property inspector, click the Toggle CSS/HTML Mode button, if necessary, to switch to CSS Mode, then in the CSS Style pop-up menu, select the class style you want to apply.
    • In the Document window, right-click (Windows) or Control-click (Macintosh) the selected text, and in the context menu choose CSS Styles and then select the style you want to apply.
    • Select Text > CSS Styles, and in the submenu select the style you want to apply.
To remove a custom style from a selection:

Select the object or text you want to remove the style from, then do one of the following:

  • In the text Property inspector, click the Toggle CSS/HTML Mode button, if necessary, to switch to CSS Mode, then in the CSS Style pop-up menu, select No CSS Style.
  • In the CSS Styles panel, select Apply Styles view, then choose No CSS Style.


Creating and linking to an external CSS style sheet

A CSS style sheet is an external text file containing styles and formatting specifications. When you edit an external CSS style sheet, all documents linked to that CSS style sheet are updated to reflect those edits. You can export the CSS styles found in a document to create a new CSS style sheet, and attach or link to an external style sheet to apply the styles found there.

In addition to CSS style sheets you create, you can use CSS style sheets that ship with Dreamweaver to attach to pages in a site. For information about using the design style sheets that come with Dreamweaver, see Creating a document based on a Dreamweaver design file.

For information about applying a style, see Applying a custom (class) CSS style.

To link to or import an external CSS style sheet:
  1. Open the CSS Styles panel by doing one of the following:
    • Choose Window > CSS Styles
    • Press Shift + F11
    • Click the CSS Styles icon in the Launcher.
  2. In the CSS Styles panel, click the Attach Style Sheet button.

    3. The Link External Style Sheet appears.

  3. In the Link External Style Sheet dialog box, do one of the following:
    • Click Browse (Windows) or Choose (Macintosh) to browse to an external CSS style sheet, or type the path to the style sheet in the File/URL box.
  4. In Add As, select one of the options:
    • To create a link between the current document and an external style sheet, choose Link. This creates a link href tag in the HTML code, and references the URL where the published style sheet is located. This method is supported by both Microsoft Internet Explorer and Netscape Navigator.
    • To reference an external style sheet, choose Import. This creates an @import tag in the HTML code, and references the URL where the published style sheet is located. This method does not work with Netscape Navigator.
  5. Click OK

    6. The name of the external CSS style sheet appears in the Edit Styles view of the CSS Styles panel, and custom (class) styles appear in the Apply Styles view preceded by the external style sheet identifier.


Editing a CSS style

You can easily edit both internal and external styles you have applied to a document. In Edit Styles view, select the style you want to change, then open the CSS Style Definition dialog box and modify the style.

When you edit a CSS style sheet that controls the text in your document, you instantly reformat all of the text controlled by that CSS style sheet. Edits to an external style sheet affect all the documents linked to it.

You can set an external editor for editing style sheets. For information about setting up an external editor, see Launching an external editor for media files.

Note: If you have installed TopStyle, a CSS editor from Bradbury Software on your computer, Dreamweaver automatically detects it and sets it as your external editor for .css files. An evaluation copy of Topstyle comes with Dreamweaver.

To edit a CSS style:
  1. In the CSS Styles Panel, click the Edit Styles radio button to view the styles in the current document.
  2. Click the style you want to edit to select it, then do one of the following:
    • Double-click the selected style.
    • Right-click (Windows) or Control-click (Macintosh), then choose Edit.
    • Click the Edit Style Sheet button located at the bottom of the CSS Styles panel.

      • The CSS Style Definition dialog box opens.

  3. Modify the style as desired, then click OK.


Editing a CSS Style Sheet

A CSS style sheet typically includes one or more styles. You can edit an individual style in a CSS style sheet (see Editing a CSS style), but sometime you want to edit several styles.

The Edit Style Sheet dialog box lets you work with style sheets in a number of ways. Use it to link to an external CSS style sheet, create a newCSS style sheet, edit an existing CSS style sheet, or to duplicate or remove a CSS style sheet.

To edit a CSS style sheet:
  1. In the CSS Styles panel, select Edit Styles.
  2. In the Styles list, click the style sheet you want to edit to select it, then do one of the following:
    • Click the Edit Style Sheets button located at the bottom of the CSS Styles panel.
    • Right-click the style sheet, then choose Edit Style Sheet, then in the dialog box that appears, select the style sheet you want to edit, and then click Edit.

      • The styles for the selected CSS style sheet appear in the dialog box.

  3. In the dialog box, select the style you want to edit, then click Edit.

    4. The CSS Style Definition dialog box appears.

  4. Modify the styles as desired, then click OK.


Using Design Time style sheets

Design Time style sheets allow you to show or hide design applied by a CSS style sheet as you work in a Dreamweaver document. For example, you can use this option to include or exclude the effect of a Macintosh-only or a Windows-only style sheet as you design a page.

Design Time style sheets only apply while you are designing working in the Dreamweaver document; when the page is displayed in a browser window, only the styles that are actually attached to or embedded in the document appear in a browser.

To show or hide a CSS style sheet at design time:
  1. Open the Design Time Style Sheets dialog box by doing one of the following:
    • Right-click in the CSS Styles panel, in the context menu select Design Time Style Sheet.
    • Choose Text > CSS Styles > Design Time Style Sheets.
  2. In the dialog box, set options to show or hide a selected style sheet.
    • To display a CSS style sheet at design time, click the (+) plus button above Show Only at Design Time, then in the Select a Style Sheet dialog box, browse to the CSS style sheet you want to show.
    • To hide a CSS style sheet, click the (+) plus button above Hide at Design Time, then in the Select a Style Sheet dialog box, browse to the CSS style sheet you want to show.
    • To remove a style sheet from either list, click the style sheet you want to remove, then click the appropriate (–) minus button.
  3. Click OK to close the dialog.

The CSS Styles panel updates with the selected style sheet’s name along with an indicator, “hidden” or “design,” to reflect the style sheet’s status.


Exporting styles to create a CSS style sheet

You can export styles from a document to create a new CSS style sheet. You can then link to other documents to apply these styles.

To export CSS styles from a document and create a CSS style sheet:
  1. Choose File > Export > Export CSS Styles or choose Text > Export Style Sheet.

    2. The Export Styles as CSS File dialog box appears.

  2. Enter a name for your style and click Save.

    3. The style is saved as a CSS style sheet.


About conflicting styles

When you apply two or more CSS styles to the same text, the styles may conflict and produce unexpected results. Browsers apply style attributes according to the following rules:

  • If two styles are applied to the same text, the browser displays all attributes of both styles unless specific attributes conflict. For example, one style may specify blue as the text color and the other style may specify red.
  • If attributes from two styles applied to the same text conflict, the browser displays the attribute of the innermost style (the style closest to the text itself).
  • If there is a direct conflict, the attributes from CSS styles (styles applied with the class attribute) overrule attributes from HTML tag styles.

In the example that follows, the style defined for h1 might specify the font, size, and color for all h1 paragraphs, but the custom CSS style .Blue applied to this paragraph overrules the color setting in the H1 style. The second custom CSS style .Red overrules .Blue because it is inside the .Blue style.

<h1><span class="Blue">This paragraph is controlled by the .Blue custom style and h1
HTML tag style.<span class="Red">Except this sentence is controlled by the .Red style.</span>
Now we're back to the .Blue style.</span></h1>


Converting CSS styles to HTML tags

If you have used CSS styles to specify text formatting (such as the family, size, color, and decoration of fonts) and later decide that you want to make the formatting viewable on a 3.0 browser, you can use the File > Convert > 3.0 Browser Compatible command to convert as much of the style information as possible to HTML tags.

Note: Not all CSS styles can be converted to HTML, because HTML tags do not cover or support all the attributes possible in CSS.

To convert a file that uses CSS styles to a 3.0 browser–compatible file:
  1. Choose File > Convert > 3.0 Browser Compatible.
  2. In the dialog box that appears, select CSS Styles to HTML Markup.

    3. When you choose the Layers to Tables option, Dreamweaver replaces all layers with a single table that preserves the original positioning.

    CSS styles are replaced, where possible, with HTML tags such as b and font. Any CSS markup that cannot be converted to HTML is removed. See CSS to HTML markup conversion table for information on which styles are converted and which are removed.

  3. Click OK. Dreamweaver opens the converted file in a new, untitled window.

Note: You must perform this conversion procedure each time you change the original file in order to update the 3.0-compatible file. For this reason, it’s best to perform this procedure only after you are completely satisfied with your original file.


CSS to HTML markup conversion table

The CSS attributes listed in the following table are converted to HTML markup with the File > Convert > 3.0 Browser Compatible command. (See Converting CSS styles to HTML tags.) Attributes not listed in the table are removed.

CSS attribute | Converted to
color | FONT COLOR
font-family | FONT FACE
font-size | FONT SIZE="[1-7]"
font-style: oblique | I
font-style: italic | I
font-weight | B
list-style-type: square | UL TYPE="square"
list-style-type: circle | UL TYPE="circle"
list-style-type: disc | UL TYPE="disc"
list-style-type: upper-roman | OL TYPE="I"
list-style-type: lower-roman | OL TYPE="i"
list-style-type: upper-alpha | OL TYPE="A"
list-style-type: lower-alpha | OL TYPE="a"
list-style | UL or OL with TYPE as appropriate
text-align | P ALIGN or DIV ALIGN as appropriate
text-decoration: underline | U
text-decoration: line-through | STRIKE


Checking spelling

Use the Check Spelling command in the Text menu to check the spelling in the current document. The Check Spelling command ignores HTML tags and attribute values.

By default, the spelling checker uses the U.S. English spelling dictionary. To change the dictionary, choose Edit > Preferences > General or Dreamweaver > Preferences > General (Mac OS X), then in the Spelling Dictionary pop-up menu select the dictionary you want to use. Dictionaries for additional languages can be downloaded from the Dreamweaver Support Center.

To check and correct spelling:
  1. Choose Text > Check Spelling or press Shift+F7.

    2. When Dreamweaver encounters an unrecognized word the Check Spelling dialog box appears.

  2. In the Check Spelling dialog box, choose the appropriate option based on how you want the discrepancy handled:

    3. Add to Personal adds the unrecognized word to your personal dictionary.

    Ignore ignores this instance of the unrecognized word.

    Ignore All ignores all instances of the unrecognized word.

    Change replaces this instance of the unrecognized word with text that you type in the Change To text box or with the selection in the Suggestions list.

    Change All replaces all instances of the unrecognized word in the same manner.


Searching and replacing text

You can search the current document, selected files, a directory, or an entire site for text, text surrounded by specific tags, or HTML tags and attributes. You use different commands to search for files, and to search for text and/or HTML 1 tags within files: Locate in Local Site and Locate in Remote Site search for files, while Edit > Find and Replace search for text and tags within files.

To search for text and/or HTML within documents:
  1. Choose from the following options:
    • In Design view, from the Document window or Site panel, choose Edit > Find and Replace.
    • While in Code view, right-click (Windows) or Control-click (Macintosh) and choose Find and Replace from the context menu.
  2. In the Find or Replace dialog box that appears, use the Find In option to specify which files to search:
    • Current Document confines the search to the active document. This option is available only when you choose Find or Replace with the Document window active, or from the context menu in the Code inspector.
    • Entire Local Site expands the search to all the HTML documents, library files, and text documents in the current site. After you choose Current Site, the name of the current site appears to the right of the pop-up menu. If this is not the site you want to search, choose a different site from the current site’s pop-up menu in the Site panel.
    • Selected Files in Site confines the search to the files and folders that are currently selected in the Site panel. This option is available only when you choose Find or Replace with the Site panel active (that is, in front of the Document window).
    • Folder confines the search to a specific group of files. After choosing Folder, click the folder icon to browse to and select the directory you want to search.
  3. Use the Search For option to specify the kind of search you want to perform.
    • Source Code lets you search for specific text strings in the HTML source code. See Searching and replacing tags and attributes.
    • Text lets you search for specific text strings in the Document window. A text search ignores any HTML that interrupts the string. For example, a search for the black dog would match both the black dog and the <i>black</i> dog.
    • Text (Advanced) lets you search for specific text strings that are either within or not within a tag or tags. For example, in a document that contains the following HTML, searching for tries not inside i would find only the second instance of the word tries: John <i>tries</i> to get his work done on time, but he doesn’t always succeed. He tries very hard. See Searching for text contained in specific tags.
    • Specific Tag lets you search for specific tags, attributes, and attribute values, such as all td tags with valign set to top. See Searching for tags and attributes.

      • Note: Pressing Control+Enter or Shift+Enter (Windows), or Control+Return, Shift+Return, or Command+Return (Macintosh), adds line breaks within the text search fields, allowing you to search for a Return character. Make sure to deselect the Ignore Whitespace Differences option when performing this search, if you’re not using regular expressions. Note that this finds a Return character in particular, not simply the occurrence of a line break; for instance, it doesn’t find a <br> tag or a <p> tag. Return characters appear as spaces in the Design view, not as line breaks.

  4. Use the following options to expand or limit the search:
    • The Match Case option limits the search to text that exactly matches the case of the text you want to find. For example, if you search for the brown derby, you will not find The Brown Derby.

      • Note: The Ignore Whitespace Differences option, when selected, treats all whitespace as a single space for the purposes of matching. For example, with this option selected, this text would match this text but not thistext. This option is not available when the Use Regular Expressions option is selected; you must explicitly write your regular expression to ignore whitespace. Note that <p> and <br> tags do not count as whitespace.

    • The Use Regular Expressions option causes certain characters and short strings (such as ?, *, \w, and \b) in your search string to be interpreted as regular expression operators. For example, a search for the b\w*\b dog will match both the black dog and the barking dog. See About regular expressions.

      • Note: If you are working in Code view and make changes to your document, and try to find and replace anything other than source code, a dialog box appears letting you know that Dreamweaver is synchronizing the two views before doing the search. For more information on synchronizing views, see Viewing your code.

Related topic

Searching and replacing text


Reference

This section provides information about the dialog boxes, Property inspectors, and panels introduced in this chapter.


Setting Text property options

The text Property inspector displays the current formatting attributes of the text that is selected in the document. You can change the formatting by setting new options. The style is immediately applied to the text.

You can use the text Property inspector to apply HTML formatting or Cascading Style Sheet (CSS) formatting. HTML formatting lets you select text formatting options such as font, size, bold, and italic, while CSS formatting lets you apply a CSS class style to the selected text.

When you use the Property inspector to apply bold or italic style, Dreamweaver automatically applies the <strong> or <em> tag, respectively. If you are designing pages for viewers with 3.0 or older version browsers, you should change this preference in the General category of the Preferences dialog box (Edit > Preferences).

For information about creating a class style, see Creating a new CSS style

To switch text formatting modes:

In the Property inspector, click the Toggle CSS/HTML Mode button.

To set CSS formatting options:
  1. Open the Property inspector (Window > Properties), if it isn’t already open.
  2. Select the text you want to format.
  3. In the Property inspector, if CSS Mode isn’t already selected, click the Toggle CSS/HTML Mode button to switch to CSS Mode.
  4. Set the CSS options you want to apply to the selected text.

    5. Format sets the paragraph style of the selected text. Paragraph applies the default format for a <p> tag, Heading 1 adds an H1 tag, and so on.

    CSS Style displays the class style that is currently applied to the selected text. If no styles have been applied to the selection, the pop-up menu shows No CSS Style. If multiple styles have been applied to the selection, the pop-up menu is blank.

    Use the CSS Style pop-up menu to do any of the following:

    • Select the class style you want to apply to the selection.
    • Select No CSS Style to remove the currently applied CSS style.
    • Select New CSS Style to open the New CSS Style dialog box to create a new style that will automatically be applied to the selected text. If no text is selected, the style is applied to the paragraph or block-level tag that contains the insertion point.
    • Select Edit CSS Style to open the Edit Style Sheet dialog box to edit a CSS style. For more information, see Editing a CSS style.
    • Select Attach Style Sheet to attach a CSS style sheet to your document. For more information, see Creating and linking to an external CSS style sheet.

      • Bold applies either <b> or <strong> to the selected text according to the style preference set in the General category of the Preferences dialog box.

      Italic applies either <i> or <em> to the selected text according to the style preference set in the General category of the Preferences dialog box.

      For information about setting General preferences, see Setting General preferences.

To set HTML formatting options:
  1. Open the Property inspector (Window > Properties), if it isn’t already open.
  2. Select the text you want to format.
  3. In the Property inspector, if HTML Mode isn’t already selected, click the Toggle CSS/HTML Mode button to switch to HTML Mode.
  4. Set the options you want to apply to the selected text.

    5. Format sets the paragraph style of the selected text. Paragraph applies the default format for a <p> tag, Heading 1 adds an H1 tag, and so on.

    Font Combination applies the selected font combination to the text. Use the pop-up menu to choose the font combination you want to apply, or choose Edit Font List to create or edit a font combination.

    Size applies either a specific font size (1 through 7) or a font size (+ or –1 through + or –7) relative to the basefont size (the default is 3).

    Text Color displays the text in the selected color. Select a web-safe color by clicking the color box, or enter a hexadecimal value (for example, #FF0000) in the adjacent text field.

    Bold applies either <b> or <strong> to the selected text according to the style preference set in the General category of the Preferences dialog box.

    Italic applies either <i> or <em> to the selected text according to the style preference set in the General category of the Preferences dialog box.

    For information about setting General preferences, see Setting General preferences.

    Left, Center, and Right Align apply the respective alignment.

    Link lets you create a hypertext link of the selected text. Click the folder icon to browse to a file in your site; type the URL; drag the Point-to-File icon to a file in the Site panel; or drag a file from the Site panel into the box.

    Target lets you specify the frame or window in which the linked document will load:

    • _blank loads the linked file in a new, unnamed browser window.
    • _parent loads the linked file in the parent frameset or window of the frame that contains the link. If the frame containing the link is not nested, the linked file loads into the full browser window.
    • _self loads the linked file in the same frame or window as the link. This target is implied, so you generally don’t need to specify it.
    • _top loads the linked file in the full browser window, thereby removing all frames.

      • Unordered List creates a bulleted list of the selected text. If no text is selected, a new bulleted list is started.

      Ordered List creates a numbered list of the selected text. If no text is selected, a new numbered list is started.

      List Item opens the List Properties dialog box. See Setting List property options.

      Indent and Outdent indent or remove indentation from the selected text by applying or removing the blockquote tag. In a list, indenting creates a nested list and removing the indentation unnests the list.

Related Topics

Formatting paragraphs

Setting and changing fonts and styles

Creating a new CSS style

Setting General preferences


Setting List property options

You use the List Properties dialog box to set the appearance of an entire list or for an individual list item. You can set number style, reset the count, or set bullet style options for individual list items or for the entire list.

This is a picture of the feature being described.

For information about using Cascading Style sheets to set list properties, see Defining CSS Style List properties.

To set list properties for an entire list:
  1. In the Document window, create at least one list item. The new style will automatically apply to additional items you add to the list.
  2. With the insertion point in the list item’s text, choose Text > List > Properties to open the List Properties dialog box.
  3. In the dialog box that appears, set the options you want to define the list:

    4. List Type specifies list properties while List Item specifies an individual item in a list. Use the pop-up menu to select a bulleted, numbered, directory, or menu list. Depending on the List Type you select different options appear in the dialog box.

    Style determines the style of numbers or bullets used for a numbered or bulleted list. All items in the list will have this style unless you specify a new style for items within the list.

    Start Count sets the value for the first item in a numbered list.

  4. Click OK, to set the choices and close the dialog box.
To set list properties for a list item:
  1. In the Document window, place the insertion point in the text of a list item you want to affect
  2. Choose Text > List > Properties.
  3. In the dialog box that appears, under List Item, set the options you want to define the list item:

    4. New Style lets you specify a style for the selected list item. Styles in the New Style pop-up menu are related to the type of list displayed in the List Type pop-up menu. For example, if the List Item pop-up menu displays Bulleted List, only bullet options are available in the New Style pop-up menu.

    Reset Count To lets you set a specific number from which to number list item entries.

  4. Click OK, to set the options and close the dialog box.


Setting CSS Styles preferences

CSS Styles preferences control how Dreamweaver writes the code that defines CSS styles. CSS styles can be written in a shorthand form that some people find easier to work with. Some older versions of browsers, however, do not correctly interpret the shorthand.

To display CSS Styles Sheet Format preferences
  1. Choose Edit > Preferences or Dreamweaver > Preferences (Mac OS X) and from the Category list select CSS Styles.
  2. Set the CSS Style options you want to apply:

    3. Use Shorthand For lets you select which CSS style attributes Dreamweaver writes in shorthand.

    When Editing CSS Styles Use Shorthand controls whether Dreamweaver rewrites existing styles in shorthand.

    Choose If Original Used Shorthand to make Dreamweaver leave all styles as they are.

    Choose According to Settings Above to make Dreamweaver rewrite styles in shorthand for the attributes selected in Use Shorthand For.

  3. Click OK.


Defining CSS Type properties

You use the Type category in the CSS Style Definition dialog box to define basic font and type settings for a CSS style.

See also About Cascading Style Sheets and Editing a CSS style

To define type settings for a CSS style:
  1. Open the CSS Styles panel (Shift + F11), if it isn’t already open.
  2. Open the CSS Style Definition dialog box by doing one of the following:
    • Add a new style. For detailed information, see Creating a new CSS style.
    • Double-click an existing style to open it for editing.
  3. In the CSS Style Definition dialog box, choose Type, then set the style attributes you want.

    4. Leave any of the following attributes empty if they are not important to the style:

    Font sets the font family (or series of families) for the style. Browsers display text in the first font in the series that is installed on the user’s system. For compatibility with Internet Explorer 3.0, list a Windows font first. The font attribute is supported by both browsers.

    Size defines the size of the text. You can choose a specific size by selecting the number and the unit of measurement, or you can choose a relative size. Pixels as a unit work well to prevent browsers from distorting your text. The size attribute is supported by both browsers.

    Style specifies Normal, Italic, or Oblique as the font style. The default setting is Normal. The style attribute is supported by both browsers.

    Line Height sets the height of the line on which the text is placed. This setting is traditionally called leading. Select Normal to have the line height for the font size calculated automatically, or enter an exact value and select a unit of measurement.The line height attribute is supported by both browsers.

    Decoration adds an underline, overline, or line-through to the text, or makes the text blink. The default setting for regular text is None. The default setting for links is Underline. When you set the link setting to none, you can remove the underline from links by defining a special class.The decoration attribute is supported by both browsers.

    Weight applies a specific or relative amount of boldface to the font. Normal is equivalent to 400; Bold is equivalent to 700. The weight attribute is supported by both browsers.

    Variant sets the small caps variant on text. Dreamweaver does not display this attribute in the Document window. The variant attribute is supported by Internet Explorer but not Navigator.

    Case capitalizes the first letter of each word in the selection or sets the text to all uppercase or lowercase. The case attribute is supported by both browsers.

    Color sets the text color. The color attribute is supported by both browsers.

  4. When you are finished setting these option, select another CSS category on the left side of the panel to set additional style attributes, or click OK.


Defining CSS Style Background properties

You use the Background category of the CSS Style Definition dialog box to define background settings for a CSS style. You can apply background properties to any element in a web page. For example, create a style which adds a background color or background image to any page element, for example behind text, a table, the page, and so on. You can also set the positioning of a background image. See also About Cascading Style Sheets and Editing a CSS style.

To define background settings:
  1. Open the CSS Styles panel (Shift+F11), if it isn’t already open.
  2. Open the CSS Style Definition dialog box by doing one of the following:
    • Add a new style. For detailed information, see Creating a new CSS style.
    • Double-click an existing style to open it for editing.
  3. In the CSS Style Definition dialog box, choose Background, then set the style attributes you want.

    4. Leave any of the following attributes empty if they are not important to the style:

    Background Color sets the background color for the element. The background color attribute is supported by both browsers.

    Background Image sets the background image for the element.The background image attribute is supported by both browsers.

    Repeat determines whether and how the background image is repeated. The Repeat attribute is supported by both browsers.

    No Repeat displays the image once at the beginning of the element.

    Repeat tiles the image horizontally and vertically behind the element.

    Repeat-x and Repeat-y display a horizontal and vertical band of images, respectively. Images are clipped to fit within the boundaries of the element.

    Note: Use the Repeat property to redefine the body tag and set a background image that does not tile or repeat.

    Attachment determines whether the background image is fixed at its original position or scrolls along with the content. Note that some browsers may treat the Fixed option as Scroll. This is supported by Internet Explorer but not Netscape Navigator.

    Horizontal Position and Vertical Position specify the initial position of the background image in relation to the element. This can be used to align a background image to the center of the page, both vertically and horizontally. If the attachment property is Fixed, the position is relative to the Document window, not to the element. This attribute is supported by Internet Explorer but not Netscape Navigator.

  4. When you are finished setting these options, select another CSS category on the left side of the panel to set additional style attributes, or click OK.


Defining CSS Style Block properties

You use the Block category of the CSS Style Definition dialog box to define spacing and alignment settings for tags and attributes.

To define block settings:
  1. Open the CSS Styles panel (Shift+F11), if it isn’t already open.
  2. Open the CSS Style Definition dialog box by doing one of the following:
    • Add a new style. For detailed information, see Creating a new CSS style.
    • Double-click an existing style to open it for editing.
  3. In the CSS Style Definition dialog box, choose Block, then set the style attributes you want.

    4. Leave any of the following attributes empty if they are not important to the style:

    Word Spacing sets the spacing between words. To set a specific value, in the pop-up menu, choose Value, then enter a numeric value. In the second pop-up menu, choose a measurement unit (for example, choose pixel, points, and so on).

    Note: You can specify negative values, but the display depends on the browser. Dreamweaver does not display this attribute in the Document window.

    Letter Spacing increases or decreases space between letters or characters. To decrease the space between characters specify a negative value, for example (-4). Letter spacing settings override justified text settings. The Letter Spacing attribute is supported by Internet Explorer 4 and later and Netscape Navigator 6.

    Vertical Alignment specifies the vertical alignment of the element to which it is applied. Dreamweaver displays this attribute in the Document window only when it is applied to the <img> tag.

    Text Align sets how text is aligned within the element. The Text Align attribute is supported by both browsers.

    Text Indent specifies how far the first line of text indents.
    A negative value may be used to create an outdent, but the display depends on the browser. Dreamweaver displays this attribute in the Document window only when the tag is applied to block-level elements. The Text Indent attribute is supported by both browsers.

    Whitespace determines how white space within the element is handled. Choose from three options: Normal collapses white space; Pre handles it as if the text were enclosed in pre tags (that is, all white space, including spaces, tabs, and returns, is respected); Nowrap specifies that the text only wraps when a br tag is encountered. Dreamweaver does not display this attribute in the Document window. The Whitespace attribute is supported by Netscape Navigator and Internet Explorer 5.5.

    Display specifies whether an element is displayed and if so how it is displayed. None turns off the display of an element to which it is assigned.

  4. When you are finished setting these option, select another CSS category on the left side of the panel to set additional style attributes, or click OK.


Defining CSS Style Box properties

Use the Box category of the CSS Style Definition dialog box to define settings for tags and attributes that control the placement of elements on the page.

You can apply settings to individual sides of an element when applying padding and margin settings, or use the Same For All setting to apply the same setting to all sides of an element.

To define how elements are placed on the page:
  1. Open the CSS Styles panel (Shift + F11), if it isn’t already open.
  2. Open the CSS Style Definition dialog box by doing one of the following:
    • Add a new style. For detailed information, see Creating a new CSS style.
    • Double-click an existing style to open it for editing.
  3. In the CSS Style Definition dialog box, choose Box, then set the style attributes you want.

    4. Leave any of the following attributes empty if they are not important to the style:

    Width and Height sets the width and height of the element.

    Float sets which side other elements, such as text, layers, tables and so on, will float around an element. Other elements wrap around the floating element as usual. The Float attribute is supported by both browsers.

    Clear defines the sides that do not allow layers. If a layer appears on the clear side, the element with the clear setting moves below it. The Clear attribute is supported by both browsers.

    Padding specifies the amount of space between the content of an element and its border (or margin if there is no border). Deselect the Same For All option to set the padding for individual sides of the element.

    Same For All sets the same padding attributes to the Top, Right, Bottom, and Left of the element to which it is applied.

    Margin specifies the amount of space between the border of an element (or the padding if there is no border) and another element. Dreamweaver displays this attribute in the Document window only when it is applied to block-level elements (paragraphs, headings, lists, and so on). Deselect Same For All to set the margin for individual sides of the element.

    Same For All sets the same margin attributes to the Top, Right, Bottom, and Left of the element to which it is applied.

  4. When you are finished setting these option, select another CSS category on the left side of the panel to set additional style attributes, or click OK.


Defining CSS Style Border properties

Use the Border category of the CSS Style Definition dialog box defines settings, such as width, color, and style, for the borders around elements.

To set the border style for elements:
  1. Open the CSS Styles panel (Shift+F11), if it isn’t already open.
  2. Open the CSS Style Definition dialog box by doing one of the following:
    • Add a new style. For detailed information, see Creating a new CSS style.
    • Double-click an existing style to open it for editing.
  3. In the CSS Style Definition dialog box, choose Border, then set the style attributes you want.

    4. Leave any of the following attributes empty if they are not important to the style:

    Style sets the style appearance of the border. The way the style appears depends on the browser. Dreamweaver renders all styles as solid in the Document window. The style attribute is supported by both browsers. Deselect Same For All to set the border style for individual sides of the element.

    Same For All sets the same border style attributes to the Top, Right, Bottom, and Left of the element to which it is applied.

    Width sets the thickness of the element’s border. The Width attribute is supported by both browsers. Deselect Same For All to set the border width for individual sides of the element.

    Same For All sets the same border width to the Top, Right, Bottom, and Left of the element to which it is applied.

    Color sets the color of the border. You can set each side’s color independently, but the display depends on the browser. Deselect Same For All to set the border color for individual sides of the element.

    Same For All sets the same border color to the Top, Right, Bottom, and Left of the element to which it is applied.

  4. When you are finished setting these option, select another CSS category on the left side of the panel to set additional style attributes, or click OK.


Defining CSS Style List properties

The List category of the CSS Style Definition dialog box defines list settings, such as bullet size and type, for list tags.

To define a list style:
  1. Open the CSS Styles panel (Shift + F11), if it isn’t already open.
  2. Open the CSS Style Definition dialog box by doing one of the following:
    • Add a new style. For detailed information, see Creating a new CSS style.
    • Double-click an existing style to open it for editing.
  3. In the CSS Style Definition dialog box, choose List, then set the style attributes you want.

    4. Leave any of the following attributes empty if they are not important to the style:

    Type sets the appearance of bullets or numbers. Type is supported by both browsers.

    Bullet Image lets you specify a custom image for bullets. Click Browse (Windows) or Choose (Macintosh) to browse to an image, or type the image’s path.

    Position sets whether list item text wraps and indents (outside) or whether the text wraps to the left margin (inside).

  4. When you are finished setting these options, select another CSS category on the left side of the panel to set additional style attributes, or click OK.


Defining CSS Style Positioning properties

The Positioning style attributes change the tag or block of selected text into a new layer using the default tag for defining layers as set in the Layer preferences. (See Setting Layers preferences.)

To set the layer positioning attributes:
  1. Open the CSS Styles panel (Shift + F11), if it isn’t already open.
  2. Open the CSS Style Definition dialog box by doing one of the following:
    • Add a new style. For detailed information, see Creating a new CSS style.
    • Double-click an existing style to open it for editing.
  3. In the CSS Style Definition dialog box, choose Positioning, then set the style attributes you want.

    4. Leave any of the following attributes empty if they are not important to the style:

    Type determines how the browser should position the layer as follows:

    Absolute places the layer using the coordinates entered in the Placement boxes relative to the top left corner of the page.

    Relative places the layer using the coordinates entered in the Placement boxes relative to object’s position in the text flow of the document. This option is not displayed in the Document window.

    Static places the layer at its location in the text flow.

    Visibility determines the initial display condition of the layer. If you do not specify a visibility property, by default most browsers inherit the parent’s value. Select one of the following visibility options:

    Inherit inherits the visibility property of the layer’s parent. If the layer has no parent, it will be visible.

    Visible displays the layer contents, regardless of the parent’s value.

    Hidden hides the layer contents, regardless of the parent’s value.

    Z-Index determines the stacking order of the layer. Higher numbered layers appear above lower-numbered layers. Values can be positive or negative. (It’s easier to change the stacking order of layers using the Layers panel; see Changing the stacking order of layers.)

    Overflow (CSS layers only) determines what happens if the contents of a layer exceed its size. These properties control how this expansion is handled as follows:

    Visible increases the layer’s size so that all of its contents are visible. The layer expands down and to the right.

    Hidden maintains the layer’s size and clips any content that doesn’t fit. No scroll bars are provided.

    Scroll adds scroll bars to the layer regardless of whether the contents exceed the layer’s size. Specifically providing scroll bars avoids confusion caused by the appearance and disappearance of scroll bars in a dynamic environment. This option is not displayed in the Document window and works only in browsers that support scroll bars. Supported by Internet Explorer and Netscape Navigator 6.

    Auto makes scroll bars appear only when the layer’s contents exceed its boundaries. This option is not displayed in the Document window.

    Placement specifies the location and size of the layer. How the browser interprets the location depends on the setting for Type. Size values are overridden if the content of the layer exceeds the specified size.

    The default units for location and size are pixels. For CSS layers, you can also specify the following units: pc (picas), pt (points), in (inches), mm (millimeters), cm (centimeters), (ems), (exs), or % (percentage of the parent’s value). The abbreviations must follow the value without a space: for example, 3mm.

    Clip defines the part of the layer that is visible. If you specify a clipping region, you can access it with a scripting language such as JavaScript and manipulate the properties to create special effects such as wipes. These wipes can be set up by using timelines and the Change Property behavior.

  4. When you are finished setting these option, select another CSS category on the left side of the panel to set additional style attributes, or click OK.


Defining CSS Style Extensions properties

The Extensions style attributes include filters, page break, and cursor options, most of which aren’t supported in any browser or are supported only in Internet Explorer 4.0 and above.

To specify extension attributes:
  1. Open the CSS Styles panel (Shift + F11), if it isn’t already open.
  2. Open the CSS Style Definition dialog box by doing one of the following:
    • Add a new style. For detailed information, see Creating a new CSS style.
    • Double-click an existing style to open it for editing.
  3. In the CSS Style Definition dialog box, choose Extensions, then set the style attributes you want.

    4. Leave any of the following attributes empty if they are not important to the style:

    Pagebreak forces a page break during printing either before or after the object controlled by the style. Choose the option you want to set in the pop-up menu. This option is not supported by any 4.0 browser, but support may be provided by future browsers.

    Cursor changes the pointer image when the pointer is over the object controlled by the style. Choose the option you want to set in the pop-up menu. Internet Explorer 4.0 and later, and Netscape Navigator 6 support this attribute.

    Filter applies special effects to the object controlled by the style, including blur and inversion. Choose an effect from the pop-up menu.

  4. When you are finished setting these option, select another CSS category on the left side of the panel to set additional style attributes, or click OK.


Setting CSS Style Sheet editing options

You use the Edit Style Sheet dialog box to make edits to a selected CSS style sheet.

See Editing a CSS Style Sheet for information about opening the Edit Style Sheet dialog box.

To edit a CSS style sheet:
  1. In the Edit Style Sheet dialog box, select the name of the external style sheet you want to edit, then click Edit.

    2. The selected style sheet’s name and defined styles appear in dialog box.

  2. In the dialog box, select the style you want to edit and click Edit.

    3. The CSS Style definition dialog box appears.

  3. Select options in the CSS Style definition dialog box to edit the style.
  4. When you are done updating the styles in the style sheet, click Save.
Previous


Inserting Images

Images are commonly used to add graphical interfaces (such as navigation buttons), visual appeal (for example, photographs), or interactive design elements, such as rollover images or an image map.

In Macromedia Dreamweaver MX, you can work in Design view or Code view to insert images in a document. As you add images in a Dreamweaver document, you can set or modify image properties and view the changes directly in the Document window.

To set up an efficient web design workflow, you can select an image editor preference, and automatically launch it to edit images while you work in Dreamweaver.

This chapter contains the following sections:

  • About images
  • Inserting an image
  • Resizing an image
  • Creating a rollover image
  • Using an external image editor
  • Applying behaviors to images
  • Reference
Next


About images

Many different types of graphic file formats exist, but three graphic file formats are generally used in web pages—GIF, JPEG, and PNG. Currently, GIF and JPEG file formats are the best supported and can be viewed by most browsers.

PNG files are best suited for almost any type of web graphic due to their flexibility and small file size; however, the display of PNG images is only partially supported in Microsoft Internet Explorer (4.0 and later browsers) and Netscape Navigator (4.04 and later browsers). So unless you are designing for a specific target audience using a browser that supports the PNG format, use GIFs or JPEGs for broader appeal.

GIF (Graphic Interchange Format) files use a maximum of 256 colors, and are best for displaying noncontinuous-tone images or those with large areas of flat colors, such as navigation bars, buttons, icons, logos, or other images with uniform colors and tones.

JPEG (Joint Photographic Experts Group) file format is the superior format for photographic or continuous-tone images, because JPEG files can contain millions of colors. As the quality of a JPEG file increases, so does the file size and the file download time. You can often strike a good balance between the quality of the image and the file size by compressing a JPEG file.

PNG (Portable Network Group) file format is a patent-free replacement for GIFs that includes support for indexed-color, grayscale, and true-color images, and alpha channel support for transparency. PNG is the native file format of Macromedia Fireworks MX. PNG files retain all the original layer, vector, color, and effects information (such as drop shadows), and all elements are fully editable at all times. Files must have the .png file extension to be recognized as PNG files by Macromedia Dreamweaver MX.

Note: PNG support in browsers is inconsistent; therefore, if you work with PNG files, you should also export them as GIFs or JPEGs to ensure you have web-ready versions of them.


Inserting an image

When you insert an image into a Dreamweaver document, Dreamweaver automatically generates a reference to the image file in the HTML source code. To ensure that this reference is correct, the image file must be in the current site. If it is not in the current site, Dreamweaver asks whether you want to copy the file into the site.

You can also add images as dynamic content; for information, see Making images dynamic.

To insert an image:
  1. Place the insertion point where you want the image to appear in the Document window, then do one of the following:
    • In the Common category of the Insert bar, click the Image icon.
      This is a picture of the feature being described.
    • In the Common category of the Insert bar, drag the Image icon to the Document window (or to the Code view window if you are working in the code).
    • Choose Insert > Image.
    • Drag an image from the Assets panel (Window > Assets) to the desired location in the Document window; then skip to step 3.
    • Drag an image from the Site panel to the desired location in the Document window; then skip to step 3.
    • Drag an image from the desktop to the desired location in the Document window; then skip to step 3.
  2. In the dialog box that appears, do one of the following:
    • Choose File System to choose a graphic file.
    • Choose Data Source to choose a dynamic image source.
  3. Browse to choose the image or content source you want to insert.

    4. If you are working in an unsaved document, Dreamweaver generates a file:// reference to the image file. When you save the document anywhere in the site, Dreamweaver converts the reference to a document-relative path.

  4. In the Property inspector (Window > Properties), set properties for the image.

    5. For more information, see Setting image properties.

Related Topics

Setting a background image or background page color

Using spacer images


Inserting an image placeholder

An image placeholder is a graphic you use until final artwork is ready to be added to a web page.

You can define certain attributes of the placeholder: you can set the placeholder’s size and color, as well as provide it with a text label. An image placeholder’s color, size attributes, and label appear when the image placeholder is viewed in the Dreamweaver Document window.

This is a picture of the feature being described.

When viewed in a browser window the label and size text do not appear.

To insert an image placeholder:
  1. In the Document window, place the insertion point where you want to insert a placeholder graphic.
  2. Do one of the following:
    • In the Insert bar, select Common then click the Image Placeholder icon.
      This is a picture of the feature being described.
    • In the Insert bar, select Common, then drag the Image Placeholder icon to the Document window.
    • Choose Insert > Image Placeholder.

      • The Image Placeholder dialog box appears.

  3. In the dialog box, select options for the image placeholder.

    4. For detailed information about setting these options, see Completing the Image Placeholder dialog box.

  4. Click OK.

Related topics

Replacing an image placeholder

Resizing an image

Setting image placeholder properties

Updating a Dreamweaver image placeholder in Fireworks.


Replacing an image placeholder

An image placeholder is not a graphic image that displays in a browser. Before you publish your site you should replace any image placeholders you’ve added with web-friendly graphic files such as GIFs or JPEGs.

If you have Fireworks MX, you can create a new graphic from the Dreamweaver image placeholder. The new image is set to the same size as the placeholder image. You can edit the image, then replace it in Dreamweaver. For information about creating a replacement image in Fireworks MX, see Updating a Dreamweaver image placeholder in Fireworks.

To update the image source:
  1. In the Document window, do one of the following:
    • Double-click the image placeholder
    • Click the image placeholder to select it, then in the Property inspector (Window > Properties), click the folder icon next to the Src field

      • The Image Source dialog box appears.

  2. In the dialog box, navigate to the image you want to replace the image placeholder with.
  3. Click OK.

    4. The selected image appears in the document.


Aligning an image

Use the image Property inspector to set the alignment of an image in relation to other elements in the same paragraph or line.

Note: HTML does not provide a way to wrap text around the contours of an image, as you can with some word processing applications

You can align an image to text, another image, a plug-in, or other elements in the same line. You can also use the alignment buttons (left, right, and center) to set the horizontal alignment of an image.

This is a picture of the feature being described.

Default generally specifies a baseline alignment. (The default may vary depending on the site visitor’s browser.)

Baseline and Bottom align the baseline of the text (or other element in the same paragraph) to the bottom of the selected object.

Top aligns the top of an image to the top of the tallest item (image or text) in the current line.

Middle aligns the middle of the image with the baseline of the current line.

TextTop aligns the top of the image with the top of the tallest character in the text line.

Absolute Middle aligns the middle of the image with the middle of the text in the current line.

Absolute Bottom aligns to the bottom of the image with the bottom of the line of text (which includes descenders, as in the letter g).

Left places the selected image on the left margin, wrapping text around it to the right. If left-aligned text precedes the object on the line, it generally forces left-aligned objects to wrap to a new line.

Right places the image on the right margin, wrapping text around the object to the left. If right-aligned text precedes the object on the line, it generally forces right-aligned objects to wrap to a new line.


Resizing an image

You can visually resize elements such as images, plug-ins, Macromedia Shockwave or Flash movies, applets, and ActiveX controls in the Design View of the Dreamweaver Document window. Visual resizing helps you determine how an element affects the layout at different dimensions.

Resizing changes the width and height attributes of the element back to their original size. The W and H fields in the Property inspector display the current width and height of the element as you resize it. The element’s file size does not change.

Bitmap elements such as GIF, JPEG, and PNG images may become distorted if you increase or decrease their width and height attributes. To maintain the same aspect ratio, hold down the Shift key while you resize a bitmap. However, it is recommended that you visually resize bitmaps in Dreamweaver only to determine the layout. After you have determined the ideal size for your image, edit the file in an image-editing application. Editing the image may also reduce its file size and thus reduce download time.

To resize an element:
  1. Select the element (for example, an image or Shockwave movie) in the Document window.

    2. Resize handles appear at the bottom and right sides of the element and in the bottom right corner. If resize handles don’t appear, either click away from the element you want to resize and then reselect it, or click the appropriate tag in the tag selector to select the element.

  2. Resize the element by doing one of the following:
    • To adjust the width of the element, drag the selection handle on the right side.
    • To adjust the height of the element, drag the bottom selection handle.
    • To adjust the width and the height of the element at the same time, drag the corner selection handle.
    • To preserve the element’s proportions (its width-to-height ratio) as you adjust its dimensions, Shift-drag the corner selection handle.

Elements can be visually resized to a minimum of 8 x 8 pixels. To adjust the width and height of an element to a smaller size (for example, 1 x 1 pixel), use the Property inspector to enter a numeric value.

To return a resized element to its original dimensions, in the Property inspector, delete the values in the W and H fields, or click the Reset Size button.


Creating a rollover image

A rollover is an image that, when viewed in a browser, changes when the pointer moves across it. A rollover actually consists of two images: the primary image (the image displayed when the page first loads) and a secondary image (the image that appears when the pointer moves over the primary image). Both images in a rollover should be the same size; if the images are not the same size, Dreamweaver automatically resizes the second image to match the properties of the first image.

You cannot see the effect of a rollover image in the Dreamweaver Document window. To see the rollover effect, press F12 to preview the page in a browser, then roll the pointer over the image.

Rollover images are automatically set to respond to the onMouseOver event. For information about setting an image to respond to a different event (for example, a mouse click) or about editing a rollover to display a different image, see Swap Image.

A more complex form of rollover image is a navigation bar. To create a navigation bar, use the Insert > Interactive Images > Navigation Bar command (see Inserting a navigation bar).

To create a rollover:
  1. In the Document window, place the insertion point where you want the rollover to appear.
  2. Insert the rollover using one of these methods:
    • In the Insert bar, select Common, then click the Rollover Image icon.
    • In the Insert bar, select Common, then drag the Rollover Image icon to the desired location in the Document window.
    • Choose Insert > Interactive Images >Rollover Image.

      • The Insert Rollover Image dialog box appears.

  3. In the Image Name text box, type a name for the rollover.
  4. In the Original Image text box, click Browse and select the image you want displayed when the page loads, or enter the image file’s path in the text box.
  5. In the Rollover Image text box, click Browse and select the image you want displayed when the pointer rolls over the original image, or enter the image file’s path in the text box.
  6. If you want the images preloaded in the browser’s cache so no delay occurs when the user rolls the pointer over the image, select the Preload Images option.
  7. In Alternate Text, enter text to describe the image for viewers using a text-only browser. (optional)
  8. In the When Clicked Go to URL text box, click Browse and select the file, or type the path to the file that you want to open when a user clicks the rollover image.

    9. Note: If you don’t set a link for the image, Dreamweaver inserts a null link (#) in the HTML source code to which the rollover behavior is attached. If you remove the null link, the rollover image will no longer work.

  9. Click OK to close the Insert Rollover Image dialog box.
  10. Choose File > Preview in Browser or press F12.
  11. In the browser, move the pointer over the original image.

    12. The display should switch to the rollover image.


Using an external image editor

While in Dreamweaver, you can open a selected image in an external image editor; when you return to Dreamweaver after saving the edited image file, any changes you made to the image are visible in the Document window.

You can use Macromedia Fireworks as your external image editor. Fireworks 3 and later use Design Notes to track where the original PNG file is stored on your local hard disk; when you open the image in Fireworks, it lets you edit the original PNG.

If you set any other image-editing application as the external image editor and launch the editor from within Dreamweaver, the application launches and opens the selected image. Use the image editor to modify the image, save your changes, and then view the updated image in Dreamweaver.

If the image file was generated from a PNG file, you can manually open the original file, make changes, and save the changed image. Dreamweaver still updates the image in the Document window when you return.

If you don’t see an updated image after returning to the Dreamweaver window, select the image and then click the Refresh button in the Property inspector.

Related topics

Setting external image editor preferences

Launching an external image editor


Launching an external image editor

You choose Edit > Preferences > File Types/Editor or Dreamweaver > Preferences > File Types/Editor (Mac OS X) to set an external image editor for the image file types you specify. For more information about choosing an image editor, see Setting external image editor preferences.

To launch the external image editor, do one of the following:
  • Double-click the image you want to edit.
  • Right-click (Windows) or Control-click (Macintosh) the image you want to edit, then choose Edit With >Browse and select an editor.
  • Select the image you want to edit, and click Edit in the Property inspector.
  • Double-click the image file in the Site panel to launch the primary image editor. If you haven’t specified an image editor, Dreamweaver launches the default editor for the file type.

    • Note: When you open an image from the Site panel, the Fireworks integration features are not in effect; Fireworks does not open the original PNG file. To use the Fireworks integration features, open images from within the Document window.


Applying behaviors to images

You can apply any available behavior to an image or image hotspot. When you apply a behavior to a hotspot, Dreamweaver inserts the HTML source code into the area tag. Three behaviors apply specifically to images: Preload Images, Swap Image, and Swap Image Restore.

Preload Images loads images that do not appear on the page right away (such as those that will be swapped in with timelines, behaviors, layers, or JavaScript) into the browser cache. This prevents delays caused by downloading when it is time for the images to appear. See Preload Images.

Swap Image swaps one image for another by changing the SRC attribute of the img tag. Use this action to create button rollovers and other image effects (including swapping more than one image at a time). See Swap Image.

Swap Image Restore restores the last set of swapped images to their previous source files. This action is automatically added whenever you attach the Swap Image action to an object by default; you should never need to select it manually. See Swap Image Restore.

You can also use behaviors to create more sophisticated navigation systems, such as a navigation bar or a jump menu. See Creating navigation bars and Creating jump menus.


Reference

This section provides information about the panels, dialog boxes, and inspectors introduced in this chapter.

Setting image properties

Completing the Image Placeholder dialog box

Setting image placeholder properties

Setting external image editor preferences


Setting image properties

This Property inspector allows you to set properties for an image. If you do not see all of the image properties as shown below, click the expander arrow in the lower right corner

This is a picture of the feature being described.

To set image properties:
  1. Set any of the following options:
    • Use the text field below the thumbnail image to set a name so you can refer to the image when using a Dreamweaver behavior (such as Swap Image) or when using a scripting language such as JavaScript or VBScript.

      • W and H are the width and height of the image, in pixels. Dreamweaver automatically updates these fields with the image’s original dimensions when you insert an image in a page. You can specify the image size in the following units: pc (picas), pt (points), in (inches), mm (millimeters), cm (centimeters), and combinations, such as 2in+5mm; Dreamweaver converts the values to pixels in the HTML source code.

      If you set W and H values that do not correspond to the actual width and height of the image, the image may not display properly in a browser. (To restore the original values, click the W and H field labels.)

      Note: You can change these values to scale the display size of this instance of the image, but this does not reduce download time, because the browser downloads all image data before scaling the image. To reduce download time and to ensure that all instances of an image appear at the same size, use an image-editing application to scale images.

      Src specifies the source file for the image. Click the folder icon to browse to the source file, or type the path.

      For information about dynamic image sources, see Making images dynamic.

      Link specifies a hyperlink for the image. Drag the Point-to-File icon to a file in the Site panel, click the folder icon to browse to a document on your site, or manually type the URL. For information about creating links, see Creating links.

      Align aligns an image and text on the same line. See Aligning an image.

      Alt specifies alternative text that appears in place of the image for text-only browsers or for browsers that have been set to download images manually. For visually impaired users who use speech synthesizers with text-only browsers, the text is spoken out loud. In some browsers, this text also appears when the pointer is over the image.

      Map Name and the Hotspot tools allow you to label and create a client-side image map. See Creating image maps.

      V Space and H Space add space, in pixels, along the sides of the image. V Space adds space along the top and bottom of an image. H Space adds space along the left and right of an image.

      Target specifies the frame or window in which the linked page should load. (This option is not available when the image isn’t linked to another file.) The names of all the frames in the current frameset appear in the Target list. You can also choose from the following reserved target names:

      _blank loads the linked file into a new, unnamed browser window.

      _parent loads the linked file into the parent frameset or window of the frame that contains the link. If the frame containing the link is not nested, the linked file loads into the full browser window.

      _self loads the linked file into the same frame or window as the link. This target is the default, so you usually don’t need to specify it.

      _top loads the linked file into the full browser window, thereby removing all frames.

      Low Src specifies the image that should load before the main image. Many designers use a 2-bit (black and white) version of the main image because it loads quickly and gives visitors an idea of what they’re waiting to see.

      Border is the width, in pixels, of the image’s border. The default is no border.

      Edit launches the image editor you specified in External Editors preferences and opens the selected image. For information about setting an external image editor, see Using an external image editor.

      Reset Size resets the W and H values to the original size of the image.


Completing the Image Placeholder dialog box

The purpose of this dialog box is to create an image placeholder graphic.

This is a picture of the feature being described.

To complete the dialog box, set the options you want to set:
  1. In the Name text box, enter text you want to appear as a label for the image placeholder.
    This is an optional field; leave the field blank if you do not want a label to appear.

    2. The name must begin with a letter and can contain only letters and numbers; spaces and high ASCII characters are not allowed.

  2. In the Width and Height text boxes, type a number to set the image size in pixels. (required)
  3. For Color, do one of the following to apply a color: (optional)
    • Use the color picker to select a color.
    • Type the color’s hexadecimal value (for example, #FF0000).
    • Type a web-safe color name (for example, red).
  4. In Alternate Text, enter text to describe the image for viewers using a text-only browser. (optional)
  5. Click OK.

    6. An image placeholder appears in the document.

    Note: An image tag is automatically inserted into the HTML code containing an empty src attribute.


Setting image placeholder properties

To set properties for an image placeholder, select the placeholder in the Document window; then choose Window > Properties to display the Property inspector. To see all properties, click the expander arrow in the lower right corner.

Use the Property inspector to set a name, width, height, image source, alternate text description, alignment and color for a placeholder image.

This is a picture of the feature being described.

In the placeholder Property inspector, the gray fields and the Align text field are disabled. You can set these properties in the image Property inspector when you replace the placeholder with an image.

To set image properties:

Set any of the following options:

W and H set the width and height of the image placeholder, in pixels.

Note: Do not leave a space between the value and the unit type. For example, to set width or height to two inches, enter 2in.

Src specifies the source file for the image. For a placeholder image this text box is empty. Click the Browse button to select a replacement image for the placeholder graphic.

Link specifies a hyperlink for the image placeholder. Drag the Point-to-File icon to a file in the Site panel, click the folder icon to browse to a document on your site, or manually type the URL.

Alt specifies alternative text that appears in place of the image for text-only browsers or for browsers that have been set to download images manually. For visually impaired users who use speech synthesizers with text-only browsers, the text is spoken out loud. In some browsers, this text also appears when the pointer is over the image.

Create lets you launch Fireworks MX to create a replacement image. The Create button is disabled unless Fireworks MX is also installed on your computer. For information about creating a replacement image in Fireworks, see Updating a Dreamweaver image placeholder in Fireworks.

Reset Size resets the W and H values to the original size of the image.

Color lets you specify a color for the image placeholder.


Setting external image editor preferences

Use File Types/Editors preference to select an image editor for launching and editing graphic files. You can set which file types an editor opens; and you can select multiple image editors. For example, you can tell Dreamweaver to launch Fireworks when you want to edit a GIF, and to launch a different image editor when you want to edit a JPG or JPEG.

This is a picture of the feature being described.

To set an external image editor for an existing file type:
  1. Open the File Types/Editors Preferences dialog box by doing one of the following:
    • Choose Edit > Preferences or Dreamweaver > Preferences (Mac OS X) and select File Types/Editors in the Category list on the left.
    • Choose Edit > Edit with External Editor and select File Types/Editors.
  2. In the Extensions list, select the file extension you want to set an external editor for.
  3. Click the Add (+) button above the Editors list.
  4. In the Select External Editor dialog box, browse to the application you want to launch as an editor for this file type.
  5. In the Preferences dialog box, click Make Primary if you want this editor to be the primary editor for this file type.
  6. If you want to set up an additional editor for this file type, repeat steps 3 and 4.

    7. Dreamweaver automatically uses the primary editor when you choose to edit this image type. You can choose the other listed editors from the context menu for the image in the Document window.

To add a new file type to the Extensions list:
  1. In the File Types/Editors Preferences dialog box, click the Add (+) button above the Extensions list.

    2. A text box appears in the Extensions list.

  2. Type the file extension of the file type you want to launch an editor for.
  3. To select an external editor for the file type, click the Add (+) button above the Editors list.
  4. In the dialog box that appears, choose the application you want to use to edit this image type.
  5. Click Make Primary if you want this editor to be the primary editor for the image type.
To change an existing editor preference:
  1. In the File Types/Editors preferences dialog box, in the Extensions list select the file type you are changing to view the existing editor(s).
  2. In the Editors list, select the editor you want to want to affect, then do one of the following:
    • Click the Add (+) or Delete (–) buttons above the Editors list to add or remove an editor.
    • Click the Make Primary button, to change which editor launches by default for editing.

For more information on the other options in External Editors preferences, see Launching an external editor for media files.

Previous


Dreamweaver Integration with Other Applications

Macromedia Fireworks MX and Macromedia Flash MX are powerful web development tools designed to create graphics and SWF movie which are viewable in web pages. Macromedia Dreamweaver MX is tightly integrated with these tools to enable you to simplify your web design workflow.

To set up smooth integration between Dreamweaver and Flash or Fireworks, make sure to enable Design Notes when you define your Dreamweaver sites. By default, this option is preselected in the Site definition setup. For information about enabling Design Notes, see Enabling and disabling Design Notes.

When you export files from Fireworks or Flash directly to a Dreamweaver defined site, Design Notes which contain references to the PNG or Flash authoring file (FLA) are automatically exported to the site along with the web-ready file (GIF, JPEG, or SWF).

You can easily insert Fireworks images or tables and Flash movies in a Dreamweaver document. You can also take advantage of the integration features between Dreamweaver and Fireworks or Flash to make changes to an image or movie after you’ve inserted in a Dreamweaver document.

While working in Dreamweaver, you can also initiate the graphic production process by inserting, and then updating an image placeholder graphic. For information about image placeholders, see Inserting an image placeholder. After you insert an image placeholder in Dreamweaver, you can launch Fireworks MX to create a new graphic. In Fireworks, you can design the graphic, add hotspots or behaviors or whatever elements you want. You can then save the graphic as a PNG and export it as a web-ready graphic file or files, such as a GIF, or JPEG, or in the case of a sliced table export it as HTML and images.

When you return to Dreamweaver the replacement image or Fireworks table is updated in the document.

This chapter contains the following sections:

Specifying launch-and-edit preferences for Fireworks source files

Working with Dreamweaver and Fireworks

Editing a Fireworks image or table

Creating a Web photo album

Working with Dreamweaver and Flash

Editing a Flash movie from Dreamweaver

Next


About Fireworks and Flash integration

Roundtrip editing and Design Notes enable Dreamweaver to integrate operations with Fireworks and Flash. Roundtrip editing ensures that code updates transfer correctly between Dreamweaver and these other applications, for example to preserve rollover behaviors, or links to other files, while Design Notes allow Dreamweaver to locate the appropriate source document for an exported image or movie file. For information about using Design Notes in Dreamweaver, see Using Design Notes in Fireworks and Flash with Dreamweaver.

In addition to location information, Design Notes contain other pertinent information about exported files. For example, when you export a Fireworks table, Fireworks writes a Design Note for each exported image file in the table. If the exported file contains hotspots or rollovers, the JavaScript for the hotspots or rollovers is contained in the HTML document that Fireworks exports.

For best results, when developing graphics and movies for web publication, save the Fireworks and Flash source and web-ready files in a Dreamweaver defined site. This ensures that any user sharing the site will be able to locate the source document when editing a Fireworks image or table or when editing a SWF movie while working in Dreamweaver.

The key to developing a smoothly integrated workflow with these applications is to first set up the work environment. For information about setting up the Dreamweaver and Fireworks work environment, see Working with Dreamweaver and Fireworks. For information about setting up the Dreamweaver and Flash work environment, see Working with Dreamweaver and Flash.


Working with Dreamweaver and Fireworks

Dreamweaver and Fireworks recognize and share many of the same file edits, including changes to links, image maps, table slices, and more. Together, the two applications provide a streamlined workflow for editing, optimizing, and placing web graphics files in HTML pages.

To set up an integrated work environment, you must complete some preliminary tasks, such as defining a local site in Dreamweaver and making sure Design Notes are enabled for the site. Design Notes are automatically enabled unless you alter your default settings.

You must also set Fireworks as the primary external image editor for Dreamweaver to easily launch Fireworks for editing. For information about setting Fireworks as an external editor, see Using an external image editor.

To ensure smooth integration for launch-and-edit, when you are ready to export your Fireworks HTML and graphic files export them to the Dreamweaver site folder. When you export a GIF or JPEG graphic from Fireworks to a Dreamweaver site folder, Fireworks creates a folder named _notes in the same folder. This folder contains the Design Notes, small files with the Macromedia Note file extension (.mno).

Design Notes contain information about the graphic files that Fireworks exports. When you launch and edit a Fireworks image or table in Dreamweaver, Dreamweaver uses this information to locate the source PNG. For information about specifying whether Dreamweaver automatically launches the PNG file when available, see Specifying launch-and-edit preferences for Fireworks source files.

When you select an image in a Dreamweaver document that was exported from Fireworks and has a corresponding .mno file, the Property inspector displays the Fireworks icon and the file’s source path.

Setting Fireworks as the external image editor for Dreamweaver allows you to go between Dreamweaver and Fireworks effortlessly when you need to edit an image. In Dreamweaver preferences, set Fireworks as the primary editor for your graphic file types—GIF, PNG, and JPEG files. For information about setting an image editor, see Setting external image editor preferences.


Specifying launch-and-edit preferences for Fireworks source files

The Fireworks launch-and-edit preferences let you specify how to handle source PNG files when launching Fireworks files from another application, such as Dreamweaver.

Dreamweaver recognizes the Fireworks launch-and-edit preferences only in certain cases where you launch and optimize a Fireworks image. Specifically, you must be launching and optimizing an image that is not part of a Fireworks table and does not contain a correct Design Notes path to a source PNG file. In all other cases, including all launch-and-edit cases of Fireworks images, Dreamweaver automatically launches the source PNG file, prompting you to locate the source file if it cannot be found.

To specify launch-and-edit preferences for Fireworks:
  1. In Fireworks, choose Edit > Preferences or Fireworks > Preferences (Mac OSX) and then click the Launch and Edit tab (Windows) or choose Launch and Edit from the pop-up menu (Macintosh).
  2. Specify the preference options to use when editing or optimizing Fireworks images placed in an external application:

    3. Always Use Source PNG automatically launches the Fireworks PNG file that is defined in the Design Note as the source for the placed image. Updates are made to both the source PNG and its corresponding placed image.

    Never Use Source PNG automatically launches the placed Fireworks image, whether or not a source PNG file exists. Updates are made to the placed image only.

    Ask When Launching lets you specify each time whether or not to launch the source PNG file. When you edit or optimize a placed image, Fireworks displays a message prompting you to make a launch-and-edit decision. You can also specify global launch-and-edit preferences from this message.


Inserting a Fireworks image in a Dreamweaver document

Fireworks graphics can be placed in a Dreamweaver document a number of ways. You can place a Fireworks exported graphic directly in a Dreamweaver document using the Insert Image command, or you can create a new Fireworks graphic from a Dreamweaver image placeholder.

To insert a Fireworks image into a Dreamweaver document:
  1. In the Dreamweaver document, place the insertion point where you want the image to appear, then do one of the following:
    • Choose Insert > Image.
    • In the Common category of the Insert bar, click the Image button or drag it to the document.
  2. Navigate to the desired Fireworks exported file, and click OK (Windows) or Open (Macintosh).

    3. Note: If the Fireworks file is not in the current Dreamweaver site, a message appears asking whether you want to copy the file to the root folder. Click Yes.


Updating a Dreamweaver image placeholder in Fireworks

You can create a placeholder image in a Dreamweaver document and then launch Fireworks to design a graphic image or Fireworks table to replace it. For information about inserting an image placeholder, see Inserting an image placeholder.

To create a new image from an image placeholder, you must have both Dreamweaver MX and Fireworks MX installed on your system. Fireworks recognizes the following image placeholder settings you may have set while working with the image placeholder in Dreamweaver: image size which correlates to the Fireworks canvas size, image ID which Fireworks uses as the default document name for the source file and export file you create, text alignment, and behaviors that are recognized by Fireworks (such as swap image, pop-up menu, navigation bar, and set text). Fireworks also recognizes links you attached to the image placeholder while working in Dreamweaver.

Note: Although links you’ve added to an image placeholder can’t be seen in Fireworks, they are preserved. If you draw a hotspot and add a link in Fireworks MX, it will not delete the link you added to the image placeholder in Dreamweaver, However, if you draw out a slice in Fireworks in the new image, it will delete the link in the Dreamweaver. document when you replace the image placeholder.

These image placeholder settings are disabled in the image placeholder Property inspector since they are not recognized by Fireworks: image alignment, color, Vspace and Hspace, and maps.

In Fireworks MX, create the new image, then click Done. Fireworks prompts you to save the file as a PNG file (source document), and to export the file in a web-ready format such as a GIF, JPEG, or in the case of sliced images as HTML and images. The new image or Fireworks table automatically replaces the image placeholder in the Dreamweaver document.

To edit a Dreamweaver placeholder image in Fireworks:
  1. Make sure you’ve already set Fireworks as the image editor for .png files. For information, see Setting external image editor preferences.
  2. In the Document window, click the image placeholder to select it.
  3. Do one of the following to launch Fireworks for editing:
    • In the Property inspector, click Create.
    • Press Control (Windows) or Command (Macintosh) then double-click the image placeholder.
    • Right-click the image placeholder, then choose Create Image in Fireworks.

      • Fireworks launches, in Editing from Dreamweaver mode
      This is a picture of the feature being described.

  4. Use Fireworks options to design the image.
  5. When you are finished, click Done.

    6. The Save As dialog box appears. Fireworks prompts you to save the PNG file.

  6. In the Save In field, choose the folder you defined as your Dreamweaver local site folder.

    7. If you named the image placeholder when you inserted it in the Dreamweaver document, Fireworks populates the File Name field with that name. You can change the name if you want to.

  7. Click Save, to save the PNG file.

    8. The Export dialog box appears. Use this dialog box to export the image as a GIF.

  8. In the dialog box, for Save In choose the Dreamweaver local site folder.
  9. The Name text field automatically updates to the same name you used for the PNG file. Enter text to change the name if you want to.
  10. For Save As Type, select the type of file or files you want to export, for example Images only or HTML and Images.
  11. Click Save, to save the exported file.

    12. The file is saved, and focus returns Dreamweaver. In the Dreamweaver document, the exported file or Fireworks table replaces the image placeholder.


Editing a Fireworks image or table

You can launch Fireworks to edit images inserted in a Dreamweaver document. When you launch and edit an image or an image slice that is part of a Fireworks table, Dreamweaver launches Fireworks and the PNG file from which the image or table was exported.

When the image is part of a Fireworks table, you can launch the entire Fireworks table for edits, as long as the <!--fw table--> comment exists in the HTML code. If the source PNG was exported from Fireworks to a Dreamweaver site using the Dreamweaver Style HTML and images setting, the Fireworks table comment is automatically inserted in the HTML code.

To launch and edit a Fireworks image placed in Dreamweaver:
  1. In Dreamweaver, choose Window > Properties to open the Property inspector if it isn’t already open.
  2. Click the image or image slice to select it.

    3. The Property inspector identifies the selection as a Fireworks image or table based on the selected item, and displays the name of the PNG source file.

  3. To launch Fireworks for editing, do one of the following:
    • In the Property inspector, click Edit.
    • Hold down Control (Windows) or Command (Macintosh), and double-click the selected image.
    • Right-click (Windows) or Control-click (Macintosh) the selected image, and choose Edit With Fireworks from the context menu.

      • Fireworks launches and opens the associated PNG for editing.

      Note: If Fireworks cannot locate the source file, you are prompted to locate the PNG source file. When you work with the Fireworks source file, changes are saved to both the source file and the exported file; otherwise, only the exported file is updated.

  4. In Fireworks, edit the source PNG.
  5. When you are finished making edits, click Done.

    6. Fireworks saves the changes in the PNG file, exports the updated image (or HTML and images), and returns focus to Dreamweaver. In Dreamweaver, the updated image or table appears.


Opening a Fireworks Pop-up Menu in Dreamweaver

Fireworks supports image-based pop-up menus and HTML-based pop-up menus. Dreamweaver only supports HTML-based pop-up menus. In Dreamweaver, you can open a Fireworks pop-up menu and make edits to all menu item properties except for the background images of image-based pop-up menus.

The Show Pop-Up Menu behavior, in Dreamweaver, allows you to edit or update the contents of a Fireworks HTML-based pop-up menu. You can add, delete, or change menu items, rearrange them, and set where a menu is positioned in a page. For information about setting or modifying pop-up menu options in Dreamweaver, see Show Pop-Up Menu.

If the pop-up menu you want to edit is an image-based pop-up menu and you want to preserve the image-based cell backgrounds, you should use edit the pop-up menu in Fireworks rather than in Dreamweaver.

To edit the background images in an image-based pop-up menu, select the image you want to update, then click Edit. For information about editing a Fireworks image see Editing a Fireworks image or table.

To open the Fireworks pop-up menu:
  1. In the Dreamweaver document, select the hotspot or image that triggers the pop-up menu.
  2. Open the Behaviors panel (Shift+F3), if it isn’t already open, then in the Actions list, double-click Show Pop-Up Menu.

    3. The Show Pop-Up Menu dialog box appears.

  3. Make the changes you want to make to the pop-up menu.
  4. When you finish modifying the pop-up menu, click OK.


Launching Fireworks to optimize an image

You can launch Fireworks from Dreamweaver to make quick export changes, such as resizing an image or changing the file type, to placed Fireworks images and animations. Fireworks lets you make changes to optimization settings, animation settings, and the size and area of the exported image.

To change optimization settings for a Fireworks image placed in Dreamweaver:
  1. In Dreamweaver, select the desired image and choose Commands > Optimize Image in Fireworks.
  2. If prompted, specify whether to launch a source Fireworks file for the placed image.
  3. In Fireworks, make the desired edits in the Optimization dialog box:
    • To edit optimization settings, click the Options tab. For more information, see Using Fireworks.
    • To edit the size and area of the exported image, click the File tab.
  4. When you are finished editing the image, click Update.

    5. Clicking Update exports the image using the new optimization settings, updates the GIF or JPEG placed in Dreamweaver, and saves the PNG source file if a source file was selected.

    If you changed the format of the image, the Dreamweaver link checker prompts you to update references to the image. For example, if you changed the format of an image called my_image from GIF to JPEG, clicking OK at this prompt changes all references to my_image.gif in your site to my_image.jpg.


Inserting Fireworks HTML code in a Dreamweaver document

The Export command in Fireworks lets you export and save optimized images and HTML files to a location inside the desired Dreamweaver site folder. You can then insert the file in Dreamweaver.

For information about exporting Fireworks files as HTML, see Using Fireworks.

Dreamweaver lets you insert Fireworks-generated HTML code, complete with associated images, slices, and JavaScript, into a document. This insertion feature makes it easy for you to create design elements in Fireworks then incorporate them into an existing Dreamweaver document.

To insert Fireworks HTML into a Dreamweaver document:
  1. In Dreamweaver, place the insertion point in the document where you want the Fireworks HTML code to begin.
  2. Do one of the following:
    • Choose Insert > Interactive Images > Fireworks HTML.
    • In the Common category of the Insert bar, click the Insert Fireworks HTML button.
  3. In the dialog box that appears, click Browse to choose the desired Fireworks HTML file.
  4. Select the Delete File After Insertion option to move the original Fireworks HTML file to the Recycle Bin (Windows) or Trash (Macintosh) when the operation is complete.

    5. Use this option if you no longer need the Fireworks HTML file after inserting it. This option does not affect the source PNG file associated with the HTML file.

    Note: If the HTML file is on a network drive, it is permanently deleted—not moved to the Recycle Bin or Trash.

  5. Click OK to insert the HTML code, along with its associated images, slices, and JavaScript, into the Dreamweaver document.


Pasting Fireworks HTML into Dreamweaver

A fast way to place Fireworks-generated images and tables in Dreamweaver is to copy and paste Fireworks HTML code directly into a Dreamweaver document.

To copy and paste Fireworks HTML into Dreamweaver:
  1. In Fireworks, choose Edit > Copy HTML Code.
  2. Follow the wizard as it guides you through the settings for exporting your HTML and images. When prompted, specify your Dreamweaver site folder as the destination for the exported images.

    3. The wizard exports the images to the specified destination and copies the HTML code to the Clipboard.

  3. In Dreamweaver, place the insertion point in the document where you want to paste the HTML code, and choose Edit > Paste.

    4. All HTML and JavaScript code associated with the Fireworks files you exported is copied into the Dreamweaver document, and all links to images are updated.

To export and paste Fireworks HTML into Dreamweaver:
  1. In Fireworks, choose File > Export.
  2. In the Export dialog box, specify your Dreamweaver site folder as the destination for the exported images.
  3. In the Save As pop-up menu, choose HTML and Images.
  4. In the HTML pop-up menu, choose Copy to Clipboard, then click Save.
  5. In Dreamweaver, place the insertion point in the document where you want to paste the exported HTML code, and choose Edit > Paste.

    6. All HTML and JavaScript code associated with the Fireworks files you exported is copied into the Dreamweaver document, and all links to images are updated.


Updating Fireworks HTML placed in Dreamweaver

In Fireworks, the File > Update HTML command provides an alternative to the launch-and-edit technique for updating Fireworks files placed in Dreamweaver. With Update HTML, you can edit a source PNG image in Fireworks and then automatically update any exported HTML code and image files placed in a Dreamweaver document. This command lets you update Dreamweaver files even when Dreamweaver is not running.

To update Fireworks HTML placed in Dreamweaver:
  1. In Fireworks, open the source PNG and make the desired edits to it.
  2. Choose File > Save
  3. In Fireworks, choose File > Update HTML.
  4. Navigate to the Dreamweaver file containing the HTML you want to update, and click Open.
  5. Navigate to the folder destination where you want to place the updated image files, and click Select (Windows) or Choose (Macintosh).

    6. Fireworks updates the HTML and JavaScript code in the Dreamweaver document. Fireworks also exports updated images associated with the HTML and places the images in the specified destination folder.

    If Fireworks cannot find matching HTML code to update, it gives you the option of inserting new HTML code into the Dreamweaver document. Fireworks places the JavaScript section of the new code at the beginning of the document and places the HTML table or link to the image at the end.


Creating a Web photo album

The Create Web Photo Album command in Dreamweaver lets you automatically generate a web site that showcases an album of images from a given folder. This command uses JavaScript to call Fireworks, which creates a thumbnail and a larger-sized image for each of the images in the folder. Dreamweaver then creates a web page containing all the thumbnails, as well as links to the larger images. To use the Create Web Photo Album, you must have both Dreamweaver and Fireworks 4 or later installed on your system.

Before you begin, place all of the images for your photo album in a single folder. (The folder is not required to be in a site.) In addition, make sure that the image filenames end in extensions recognized by the Create Web Photo Album command (.gif, .jpg, .jpeg, .png, .psd, .tif, or .tiff). Images with unrecognized file extensions are not included in the photo album.

To create a Web photo album:
  1. In Dreamweaver, choose Commands > Create Web Photo Album.
  2. In the Photo Album Title text field, enter a title. The title will be displayed in a gray rectangle at the top of the page containing the thumbnails.

    3. If desired, you can enter up to two lines of additional text to appear directly beneath the title, in the Subheading Info and Other Info text fields.

  3. Choose the folder containing source images by clicking the Browse button next to the Source Images Folder text field. Then choose (or create) a destination folder in which to place all the exported images and HTML files by clicking the Browse button next to the Destination Folder text field.

    4. The destination folder should not already contain a photo album—if it does, and if any new images have the same names as previously used images, you might overwrite existing thumbnail and image files.

  4. Specify display options for the thumbnail images:
    • Choose a size for the thumbnail images from the Thumbnail Size pop-up menu. Images are scaled proportionally to create thumbnails that fit within a square that has the indicated pixel dimensions.
    • To display the filename of each original image below the corresponding thumbnail, select Show Filenames.
    • Enter the number of columns for the table that displays the thumbnails.
  5. Choose a format for the thumbnail images from the Thumbnail Format pop-up menu:

    6. GIF WebSnap 128 creates GIF thumbnails that use a web adaptive palette of up to 128 colors.

    GIF WebSnap 256 creates GIF thumbnails that use a web adaptive palette of up to 256 colors.

    JPEG—Better Quality creates JPEG thumbnails with relatively higher quality and larger file sizes.

    JPEG—Smaller File creates JPEG thumbnails with relatively lower quality and smaller file sizes.

  6. Choose a format for the large-size images from the Photo Format pop-up menu. A large-size image of the specified format is created for each of your original images. You may specify a format for the large-size images that differs from the format you specified for the thumbnails.

    7. Note: The Create Web Photo Album command does not let you use your original image files as the large-size images, because original image formats other than GIF and JPEG might not display properly on all browsers. Note that if your original images are JPEG files, the large-size images generated may have larger file sizes or lower quality than the original files.

  7. Choose a Scale percentage for the large-size images.

    8. Setting Scale to 100% creates large-size images the same size as the originals. Note that the scale percentage is applied to all of the images; if your original images aren’t all the same size, scaling them by the same percentage may not produce the desired results.

  8. Select Create Navigation Page for Each Photo to create an individual web page for each source image, containing navigation links labeled Back, Home, and Next.

    9. If you select this option, the thumbnails link to the navigation pages. If you don’t select this option, the thumbnails link directly to the large-size images.

  9. Click OK to create the HTML and image files for the web photo album.

    10. Fireworks launches (if it’s not already running) and creates the thumbnails and large-size images. This may take several minutes if you’ve included a large number of image files. When the processing is complete, Dreamweaver becomes active again, and creates the page containing the thumbnails.

  10. When a dialog appears that says “Album Created,” click OK. You may have to wait a few seconds for your photo album page to appear. The thumbnails are shown in alphabetical order by filename.
    This is a picture of the feature being described.

Note: Clicking the Cancel button in the Dreamweaver dialog box after processing has begun does not stop the process of creating the photo album; it merely prevents Dreamweaver from displaying the main photo album page.


Working with Dreamweaver and Flash

You can easily insert a Flash movie (SWF file) in a Dreamweaver document. You can then use the Property inspector to set playback and display options for the SWF file in the web page. For information about inserting a Flash movie in Dreamweaver see Inserting Flash movies.

The link checker in Dreamweaver lets you easily edit links in files you insert in a Dreamweaver document, including Flash movies. You can update the link in the SWF movie, and then update the change in the Flash authoring document. For information, see Updating links in a SWF file.

If you have Macromedia Flash MX and Dreamweaver MX you can also update a movie that has been placed in a Dreamweaver document. When both applications are installed on your computer, and a SWF movie is selected in the Dreamweaver document, the Property inspector displays an active Edit button. If you do not have Flash MX, the Edit button is disabled.

When Edit is clicked, Dreamweaver launches Flash, and Flash attempts to locate the Flash authoring file (.FLA) for the selected SWF file. Information about the original source file is automatically stored in a Design Note for the SWF file when you export it to a Dreamweaver site (if Design Notes are enabled for the Dreamweaver site). If Flash cannot locate the Flash authoring file, you are prompted to locate it. You cannot update a SWF file directly, you make changes to the source file, then export it as a SWF movie file.

After successfully launching a source document to edit, you can work in Flash to make changes to a movie. Click Done when you are finished making changes. Flash updates the Flash authoring document, re-exports the movie file, closes, and then returns the focus to the Dreamweaver document. You can view the updated SWF in the document by clicking Play in the Property inspector, or press F12 to preview your page in a browser window.

Related Topics

Editing a Flash movie from Dreamweaver

Updating links in a SWF file


Editing a Flash movie from Dreamweaver

You cannot directly edit a SWF file, if you want to make changes to an exported SWF, select the Flash movie placeholder in the Dreamweaver document, and in the Property inspector click Edit. Edit launches Flash and if the path to the source document (FLA) is available, also launches the FLA file. When the edits are complete, Flash saves the changes in the FLA source document and re-exports the SWF movie file.

To launch and edit a Flash movie inserted from Dreamweaver:
  1. In Dreamweaver, choose Window > Properties to open the Property inspector, if it isn’t already open.
  2. In the Dreamweaver document, do one of the following:
    • Click the Flash movie placeholder to select it; then in the Property inspector click Edit.
      This is a picture of the feature being described.
    • Hold down Control (Windows) or Command (Macintosh), and double-click the movie placeholder for the movie you want to edit.
    • Right-click (Windows) or Control-click (Macintosh) the desired movie, and choose Edit With Flash from the context menu.

      • Dreamweaver launches Flash, and opens the FLA file for you to edit or prompts you to open it if it cannot locate the FLA file.

      Note: If the FLA file or SWF file is locked, Dreamweaver prompts you to check the file out, cancel the request, or view the file.

  3. In Flash, edit the movie. The Document window indicates that you are modifying a movie from Dreamweaver.
    This is a picture of the feature being described.
  4. When you are finished making edits, click Done.

    5. Clicking Done saves changes to the source FLA file, and updates the SWF file.


Updating links in a SWF file

You can update a link in a SWF file in the Dreamweaver Site Map view. For information about Site Map view, see Using the site map. Before you can create a site map, you must set a home page for your site. In Site Map view, you need to display dependent files in order to update a link in a SWF file. By default the site map does not show dependent files, for information about displaying dependent files, see Showing and hiding site map files.

Select the link you want to update, then select one of the change links options depending on what you want to do—change an individual link or change the link sitewide.

Any links updated by Dreamweaver in the SWF file are conveyed to the FLA source document when a launch-and-edit is performed. Dreamweaver automatically logs any link changes to the SWF file in the Design Notes, and when Flash passes the changes to the FLA file it removes them from the Design Notes.

To update a URL link in a SWF file:
  1. Set up a home page for the site, if you haven’t already done so. You need to set up a home page in order to build a site map.
  2. Open Site Map view.
  3. To show dependent files, choose View > Show Dependent Files (Windows) or Site > Site Map View > Show Dependent Files (Macintosh).

    4. The link appears beneath the SWF file.

  4. Change the link by doing one of the following:
    • To change the link in the selected SWF, right-click the link, then choose Change Link, then in the dialog box that appears in the URL field, type the new URL path.
    • To update all instances of the link, choose Site > Change Link Sitewide, then in the dialog box that appears, in the Change All Links To field, browse to or type the path of the link you are changing and in the Into Links To field, browse to or type the path of the new URL.
  5. Click OK.
Previous


Inserting Media

Macromedia Dreamweaver lets you add sound and movies to your website quickly and easily. You can incorporate and edit multimedia files and objects, such as Macromedia Flash and Shockwave movies, Java applets, QuickTime, Active X, and audio files. You can attach Design Notes to these objects, which let you communicate with your team. You can also insert Flash button and text objects from within Dreamweaver itself.

This chapter contains the following sections:

  • Inserting and playing media objects
  • Launching an external editor for media files
  • Using Design Notes with media objects
  • About Flash content
  • Inserting a Flash button object
  • Inserting a Flash text object
  • Inserting Flash movies
  • Inserting Shockwave movies
  • Adding video
  • Adding sound to a page
  • Inserting Netscape Navigator plug-in content
  • Inserting an ActiveX control
  • Inserting a Java applet
  • Using behaviors to control media
  • Reference
Next


Inserting and playing media objects

You can insert a Flash movie or object, QuickTime or Shockwave movie, Java applet, ActiveX control, or other audio or video objects in a Dreamweaver document.

You use the Media category of the Insert bar or the Insert menu to select the type of object you want to insert in a document. Flash movie and objects, Shockwave, Applets, and ActiveX have defined buttons. Use the Netscape Navigator plug-in button to insert other media files. For more information, see Inserting Netscape Navigator plug-in content.

To insert a media object in a page:
  1. Place the insertion point in the Document window where you want to insert the object, then do one of the following:
    • In the Insert bar, select Media, then click the button for the type of object you want to insert, or drag it to the Document window.
      This is a picture of the feature being described.
    • Choose the appropriate object from the Insert > Media or Insert > Interactive Images submenu.

In most cases, a dialog box appears letting you select a source file and specify certain parameters for the media object.

Tip: To prevent such dialog boxes from appearing, choose Edit > Preferences > General or Dreamweaver > Preferences > General (Mac OS X) and deselect the Show Dialog When Inserting Objects option. To override whatever preference is set for showing dialog boxes, hold down the Control (Windows) or Option (Macintosh) key while inserting the object. (For example, to insert a placeholder for a Shockwave movie without specifying the file, hold down Control or Option and click the Shockwave button.)

Dreamweaver automatically inserts the necessary HTML source code to make the object or placeholder appear on the page. To specify a source file, set dimensions and other parameters and attributes, use the Property inspector for each object.


Launching an external editor for media files

You can double-click most files in the Site panel to edit them directly. If the file is an HTML file, it opens in Dreamweaver. If it’s another kind of file, such as an image file, it opens in an appropriate external editor, such as Macromedia Fireworks.

Each file type that Dreamweaver doesn’t handle directly can be associated with one or more external editors found on your system. The editor that launches when you double-click the file in the Site panel is called the primary editor. You can set which editor is associated with a file type in File Types/Editors preferences.

If more than one editor is associated with the file type, you can launch a secondary editor for a particular file. Right-click (Windows) or Control-click (Macintosh) the filename in the Site panel, and choose an editor from the Open With submenu of the context menu.

To explicitly specify which external editors should be launched for a given file type, choose Edit > Preferences and select File Types/Editors from the Category list. Filename extensions, such as .gif, .wav, and .mpg, are listed on the left under Extensions. Associated editors for a selected extension are listed on the right under Editors.

You can also browse to find an external editor to edit your file. Right-click (Windows) or Control-click (Macintosh) the file in the Design view of the Document window, and choose Edit With > Browse or select the file and choose > Edit > Edit with External Editor.

To add a file type to the list of extensions in File Types/Editors preferences:
  1. Click the plus (+) button above the Extensions list.
  2. Enter a file type extension (including the period at the beginning of the extension), or several related extensions separated by spaces.

    3. For example, you might enter .css, .png .jpg.

To add an editor for a given file type:
  1. Select the file type extension in the Extensions list.
  2. Click the plus (+) button above the Editors list.
  3. In the dialog box that appears, choose an application to add to the Editors list.

    4. For example, choose the application icon for Excel to add that application to your Editors list.

To remove a file type from the list:
  1. Select the file type in the Extensions list.

    2. Note: You can’t undo after removing a file type, so be sure that you want to remove it.

  2. Click the minus (-) button above the Extensions list.
To make an editor the primary editor for a file type:
  1. Select the file type.
  2. Select the editor (or add it if it isn’t on the list).
  3. Click Make Primary.
To dissociate one editor from a file type:
  1. Select the file type in the Extensions list.
  2. Select the editor in the Editors list.
  3. Click the minus (-) button above the Editors list.


Using Design Notes with media objects

As with other objects in Dreamweaver, you can add Design Notes to a media object. For more information on working with Design Notes, see Using Design Notes.

To add Design Notes to a media object:
  1. Right-click (Windows) or Control-click (Macintosh) the object in the Document window.

    2. Note: You must define your site before adding Design Notes to any object (see Enabling and disabling Design Notes).

  2. Choose Design Notes from the context menu.
  3. Enter the information you want in the Design Note.

    4. Tip: You can also add a Design Note to a media object from the Site panel by selecting the file, revealing the context menu, and choosing Design Notes from the context menu.


About Flash content

Macromedia Flash technology is the premier solution for the delivery of vector-based graphics and animations. The Flash Player is available as both a Netscape Navigator plug-in and an ActiveX control for Microsoft Internet Explorer on the PC, and it is incorporated in the latest versions of Netscape Navigator, Microsoft Internet Explorer, and America Online.

Dreamweaver comes with Flash objects you can use whether you have Flash or not. You can use these objects to create Flash buttons and Flash text you can insert in a Dreamweaver document. If you have Flash, see Working with Dreamweaver and Flash for information about using these applications in an integrated manner.

Before you use the Flash commands available in Dreamweaver, you should know about the three different Flash file types:

The Flash file (.fla) is the source file for any project and is created in the Flash program. This type of file can only be opened in Flash (not in Dreamweaver or in browsers). You can open the Flash file in Flash, then export it as an SWF or SWT file to use in browsers.

The Flash movie file (.swf) is a compressed version of the Flash (.fla) file, optimized for viewing on the web. This file can be played back in browsers and previewed in Dreamweaver, but cannot be edited in Flash. This is the type of file you create when using the Flash button and text objects. For more information, see Inserting a Flash button object, Inserting a Flash text object, and Inserting Flash movies.

The Flash template (.swt) files enable you to modify and replace information in a Flash movie file. These files are used in the Flash button object, which lets you modify the template with your own text or links, to create a custom SWF to insert in your document. In Dreamweaver, these template files can be found in the Dreamweaver/Configuration/Flash Objects/Flash Buttons and Flash Text folders.

You can download new button templates from the Macromedia Exchange for Dreamweaver website and place them in your Flash Button folder. For more information on creating new button templates, see the article on that topic found on the Macromedia website.


Inserting a Flash button object

The Flash button object is an updateable button that is based on a Flash template. You can customize a Flash button object, adding text, background color, and links to other files. Flash buttons can be inserted while working in Design view or in Code view.

Note: You must save your document before inserting a Flash button or text object.

You use the Insert Flash Button dialog box to select from a set of designed Flash buttons. You can view an example of the button in the Sample field. Click the sample to see how it functions in the browser. While you are defining the Flash button (for example, changing text or font choices), the Sample field does not automatically update to reflect the changes. These changes will appear when you close the dialog box and view the button in Design view.

To insert a Flash button object:
  1. In the Document window, place the insertion point where you want to insert the Flash button.
  2. To open the Insert Flash Object dialog box, do one of the following:
    • In the Insert bar, select Media and then click the Flash Button icon.
      This is a picture of the feature being described.
    • In the Insert bar, select Media and then drag the Flash Button icon to the Document window, or to the Code view window if you are working in the code.
    • Choose Insert > Interactive Images > Flash Button.

      • The Insert Flash Button dialog box appears.
      This is a picture of the feature being described.

  3. Select the button style you want from the Style list.
  4. In the Button Text field (optional), type the text you want to appear.

    5. This field only accepts changes if the selected button has a {Button Text} parameter defined. This is shown in the Sample field. The text you type in replaces the {Button Text} when you preview the file.

  5. In the Font pop-up menu, select the font you want to use.

    6. If the default font for a button is not available on your system, select another font from the pop-up menu. You will not see the font you selected in the Sample field, but you can click Apply to insert the button in the page to see what the text will look like.

  6. In the Size field, enter a numeric value for the font size.
  7. In the Link field (optional), enter a document-relative or absolute link for the button.
  8. In the Target field (optional), specify the location in which the linked document will open. You can select a frame or window option in the pop-up menu. Frame names are listed only if the Flash object is being edited while in a frameset.
  9. In the Bg Color field (optional), set the background color for the Flash movie. Use the color picker or type in a web hexadecimal value (such as #FFFFFF).
  10. In the Save As field, enter a filename to save the new SWF file.

    11. You can use the default filename (for example, button1.swf), or type in a new name. If the file contains a document-relative link, you must save the file to the same directory as the current HTML document to maintain document-relative links.

  11. Click Get More Styles to go the Macromedia Exchange site and download more button styles.

    12. For more information, see Adding extensions to Dreamweaver.

  12. Click Apply or OK to insert the Flash button in the Document window.

Tip: Select Apply to see changes in Design view, while keeping the dialog box open—this way you can continue making changes to the button.


Modifying a Flash button object

You can modify the properties and content of a Flash button object.

To modify a Flash button object:
  1. In the Document window, click the Flash button object to select it.
  2. Open the Property inspector, if it is not already open.

    3. The Property inspector displays the Flash button properties. You can use the Property inspector to modify the button’s HTML attributes, such as width, height, and Bg color.

  3. To make changes to content, display the Insert Flash Button dialog box using one of the following methods:
    • Double-click the Flash button object.
    • Click Edit in the Property inspector.
    • Right-click (Windows) or Control-click (Macintosh) and choose Edit from the context menu.
  4. In the Insert Flash Button dialog box, make your edits in the fields described in Inserting a Flash button object.

    5. In the Design view, you can resize the object easily by using the resizing handles. You can return the object to its original size by selecting Reset Size on the Property inspector (see Resizing an image).


Playing a Flash button object in the document

You can preview a Flash button in the Dreamweaver Document window.

To see the Flash button object play in the Document window:
  1. While in Design view, in the document, select the Flash button object.
  2. In the Property inspector, click Play.
  3. Click Stop to end the preview.

Note: You can’t edit the Flash button object while it is playing.

It’s also a good idea to preview your document in the browser to see exactly how the Flash button looks.


Inserting a Flash text object

The Flash text object lets you create and insert a Flash movie that contains just text. This allows you to create a small, vector-graphic movie with the designer fonts and text of your choice.

To insert a Flash text object:
  1. In the Document window, place the insertion point where you want to insert the Flash text.
  2. To open the Insert Flash Text dialog box, do one of the following:
    • In the Insert bar, select Media and then click the Flash Text icon.
      This is a picture of the feature being described.
    • In the Insert bar, select Media and then drag the Flash Text icon to the Document window (or to the Code view window if you are working in the code).
    • Choose Insert > Interactive Images > Flash Text.

      • The Insert Flash Text dialog box appears.
      This is a picture of the feature being described.

  3. Select a font from the Font pop-up menu.

    4. This menu lists all TrueType fonts currently loaded on your system.

  4. Enter a font size in the Size field; these are point sizes.
  5. Specify style attributes, like bold or italic, and text alignment by clicking the appropriate style buttons.
  6. In the Color field, set the color of the text by using the color picker or entering a web hexadecimal value (such as #FFFFFF).
  7. In the Rollover Color field, set the color that appears when the pointer rolls over the Flash text object. Use the color picker or enter a web hexadecimal value (such as #FFFFFF).
  8. Enter the text you want in the Text field.

    9. To see the font style displayed in the Text field, select Show Font.

  9. If you want to associate a link with the Flash text object, enter a document-relative or absolute link in the Link field.

    10. Site-relative links are not accepted because browsers don’t recognize them within Flash movies. If you use a document-relative link, make sure to save the SWF file to the same directory as the HTML file. (Browsers vary in their interpretation of document-relative links and saving to the same directory ensures that the links will work correctly.)

  10. If you entered a link, you can specify a target frame or target window for that link to go to in the Target field.
  11. In the Bg Color field, choose a background color for the text. Use the color picker or enter a web hexadecimal value (such as #FFFFFF).
  12. In the Save As field, enter a name for the file.

    13. You can use the default filename (for example, tex1.swf), or type in a new name. If the file contains a document-relative link, you must save the file to the same directory as the current HTML document to maintain document-relative links.

  13. Click Apply or OK to insert the Flash text in the Document window.

    14. If you click Apply, the dialog box remains open, and you can preview the text in your document.

To modify or play the Flash text object, use the same procedure as you would for a Flash button (see Modifying a Flash button object).


Inserting Flash movies

When you insert a Flash movie into a document, Dreamweaver uses both the object tag (defined by Microsoft Internet Explorer for ActiveX controls) and the embed tag (defined by Netscape Navigator) to get the best results in all browsers. When you make changes in the Property inspector for the movie, Dreamweaver maps your entries to the appropriate parameters for both the object and embed tags.

To insert a Flash movie:
  1. In the Design view of the Document window, place the insertion point where you want to insert the movie, then do one of the following:
    • In the Insert bar, select Media and then click the Insert Flash icon.
      This is a picture of the feature being described.
    • In the Insert bar, select Media and then drag the Insert Flash icon to the Document window.
    • Choose Insert > Media > Flash.
  2. In the dialog box that appears, select a Flash movie file (.swf).

    3. A Flash placeholder appears in the Document window (unlike Flash button and text objects). For information about setting properties for a Flash movie, see Setting Flash and Shockwave movie properties.

To preview a Flash movie in the Document window:
  1. In the Document window, click the Flash placeholder to select the Flash movie you want to preview.
  2. In the Property inspector, click the Play button. Click Stop to end the preview. You can also preview the Flash movie in a browser by pressing F12.

Tip: To preview all Flash content in a page, press Control+Alt+Shift+P (Windows) or Shift+Option+Command+P (Macintosh). All Flash objects and movies are set to Play.


Inserting Shockwave movies

Shockwave, the Macromedia standard for interactive multimedia on the web, is a compressed format that allows media files created in Macromedia Director to be downloaded quickly and played by most popular browsers.

The software that plays Shockwave movies is available as both a Netscape Navigator plug-in and an ActiveX control. When you insert a Shockwave movie, Dreamweaver uses both the object tag (for the ActiveX control) and the embed tag (for the plug-in) to get the best results in all browsers. When you make changes in the Property inspector for the movie, Dreamweaver maps your entries to the appropriate parameters for both the object and embed tags.

To insert a Shockwave movie:
  1. In the Document window, place the insertion point where you want to insert a Shockwave movie and then do one of the following:
    • In the Insert bar, select Media and then click the Shockwave icon.
      This is a picture of the feature being described.
    • In the Insert bar, select Media and then drag the Shockwave icon to the Document window, or to the Code view window if you are working in the code.
    • Choose Insert > Media > Shockwave.
  2. In the dialog box that appears, select a movie file.
  3. In the Property inspector, enter the width and height of the movie in the W and H boxes.

    4. For information on the other properties, see Setting Flash and Shockwave movie properties.


Adding video

You can add video to your web page in different ways and using different formats. Video can be downloaded to the user or it can be streamed so that it plays while it is downloading. The most common streaming formats available on the web for the transmission of video files are RealMedia, QuickTime, and Windows Media. You must download a helper application to view these formats. With these formats, you can stream audio and video simultaneously.

If you’d like to include a short clip that can be downloaded rather than streamed, you can link to the clip or embed it in your page. These clips are often in the AVI or MPEG file format.

You can use Director to create Shockwave movies or Flash to create interactive, low-bandwidth, multimedia presentations for the web. With Flash, file size is surprisingly small, and the technology works across many platforms. (Of course, users must first download the free player plug-in before they can view these files.)


Adding sound to a page

There are several different types of sound files and formats, and several different ways to add sound to a web page. Some factors to consider before deciding on a format and method for adding sound are its purpose, your audience, file size, sound quality, and differences in browsers.

Note: Sound files are handled very differently and inconsistently by different browsers. You may want to add a sound file to a Flash movie, then embed the SWF file to improve consistency.


About audio file formats

The following list describes the more common audio file formats along with some of the advantages and disadvantages of each for web design.

.midi or .mid (Musical Instrument Digital Interface) format is for instrumental music. MIDI files are supported by many browsers and don’t require a plug-in. Although their sound quality is very good, it can vary depending on a visitor’s sound card. A small MIDI file can provide a long sound clip. MIDI files cannot be recorded and must be synthesized on a computer with special hardware and software.

.wav (Waveform Extension) format files have good sound quality, are supported by many browsers, and don’t require a plug-in. You can record your own WAV files from a CD, tape, microphone, and so on. However, the large file size severely limits the length of sound clips that you can use on your web pages.

.aif (Audio Interchange File Format, or AIFF) format, like WAV format, has good sound quality, can be played by most browsers, and doesn’t require a plug-in; you can also record AIFF files from a CD, tape, microphone, and so on. However, the large file size severely limits the length of sound clips that you can use on your web pages.

.mp3 (Motion Picture Experts Group Audio, or MPEG-Audio Layer-3) format is a compressed format that makes sound files substantially smaller. The sound quality is very good: if an MP3 file is recorded and compressed properly, its quality can rival that of a CD. New technology lets you “stream” the file so that a visitor doesn’t have to wait for the entire file to download before hearing it. However, the file size is larger than a Real Audio file, so a whole song could still take quite a while to download over a normal phone line connection. To play MP3 files, visitors must download and install a helper application or plug-in such as QuickTime, Windows Media Player or RealPlayer.

.ra, .ram, .rpm, or Real Audio format has a very high degree of compression with smaller file sizes than MP3. Whole song files can be downloaded in a reasonable amount of time. Because the files can be “streamed” from a normal web server, visitors can begin listening to the sound before the file has completely downloaded. The sound quality is poorer than that of MP3 files, but new players and encoders have improved quality considerably. Visitors must download and install the RealPlayer helper application or plug-in to play these files.


Linking to an audio file

Linking to an audio file is a simple and effective way to add sound to a web page. This method of incorporating sound files lets visitors choose whether they want to listen to the file, and makes the file available to the widest audience. (Some browsers may not support embedded sound files.) See Embedding a sound file.

To create a link to an audio file:
  1. Select the text or image you want to use as the link to the audio file.
  2. In the Property inspector, click the folder icon to browse for the audio file, or type the file’s path and name in the Link field.


Embedding a sound file

Embedding audio incorporates the sound player directly into the page, but the sound only plays if visitors to your site have the appropriate plug-in for the chosen sound file. Embed files if you want to use the sound as background music, or if you want more control over the sound presentation itself. For example, you can set the volume, the way the player looks on the page, and the beginning and ending points of the sound file.

To embed an audio file:
  1. In Design view, place the insertion point where you want to embed the file and then do one of the following:
    • In the Insert bar, select Media then click the Plugin icon.
    • In the Insert bar, select Media then drag the Plugin icon to the Document window, or to the Code view window if you are working in the code.
    • Choose Insert > Media > Plugin.

      • For more information about the Plugin object, see Inserting Netscape Navigator plug-in content.

  2. In the Property inspector, click the folder icon to browse for the audio file, or type the file’s path and name in the Link field.
  3. Enter the width and height by entering the values in the appropriate fields or by resizing the plug-in placeholder in the Document window.

    4. These values determine the size at which the audio controls are displayed in the browser. For example, try a width of 144 pixels and a height of 60 pixels to see how the audio player appears in both Navigator and Internet Explorer.


Inserting Netscape Navigator plug-in content

Plug-ins enhance Netscape Navigator, providing ways to view media content in a wide variety of formats. Plug-ins are the means by which content files are played and displayed on your website. For example, typical plug-ins include RealPlayer and QuickTime, while some content files themselves include MP3s and QuickTime movies.

After you create content for a Navigator plug-in, you can use Dreamweaver to insert that content into an HTML document. Dreamweaver uses the embed tag to mark the reference to the content file.

To insert Navigator plug-in content:
  1. In the Design view of the Document window, place the insertion point where you want to insert the content, then do one of the following:
    • In the Insert bar, select Media and then click the Plugin icon.
      This is a picture of the feature being described.
    • Choose Insert > Media > Plugin.
  2. In the dialog box that appears, select a content file for a Navigator plug-in.

For information on the available properties, see Setting Netscape Navigator plug-in properties.


Playing plug-ins in the Document window

You can preview movies and animations that rely on Navigator plug-ins—that is, elements that use the embed tag—directly in the Design view of the Document window. (You cannot preview movies or animations that rely on ActiveX controls in the Document window.) You can play all plug-in elements at one time to see how the page will look to the user, or you can play each one individually to ensure that you have embedded the correct media element.

To play movies, the proper plug-ins must be installed on your computer. When Dreamweaver starts up, it automatically searches for all installed plug-ins, looking first in the Configuration/Plugins folder and then in the plugin folders of all installed browsers.

To play plug-in content in the Document window:
  1. Insert one or more media elements by choosing Insert > Media > Shockwave, Insert > Media > Flash, or Insert > Media > Plugin.
  2. Play plug-in content:
    • Select one of the media elements you have inserted, and choose View > Plugins > Play or click the Play button in the Property inspector.
    • Choose View > Plugins > Play All to play all of the media elements on the selected page that rely on plug-ins.

Note: Play All only applies to the current document; it does not apply to other documents in a frameset, for example.

To stop playing plug-in content:

Select a media element and choose View > Plugins > Stop, or click the Stop button in the Property inspector.

You can also choose View > Plugins > Stop All to stop all plug-in content from playing.


Troubleshooting Navigator plug-ins

If you have followed the steps to play plug-in content in the Document window, but some of the plug-in content does not play, try the following:

  • Make sure the associated plug-in is installed on your computer, and that the content is compatible with the version of the plug-in you have.
  • Open the file Configuration/Plugins/UnsupportedPlugins.txt in a text editor and look to see if the problematic plug-in is listed. This file keeps track of plug-ins that cause problems in Dreamweaver and are therefore unsupported. (If you experience problems with a particular plug-in, consider adding it to this file.)
  • Check that you have enough memory (and on the Macintosh, check that enough memory is allocated to Dreamweaver). Some plug-ins require an additional 2 to 5 MB of memory to run.


Inserting an ActiveX control

ActiveX controls (formerly known as OLE controls) are reusable components, somewhat like miniature applications, that can act like browser plug-ins. They run in Internet Explorer with Windows, but they don’t run on the Macintosh or in Netscape Navigator. The ActiveX object in Dreamweaver lets you supply attributes and parameters for an ActiveX control in your visitor’s browser.

Dreamweaver uses the object tag to mark the place on the page where the ActiveX control will appear, and to provide parameters for the ActiveX control.

To insert ActiveX control content:
  1. In the Document window, place the insertion point where you want to insert the content and do one of the following:
    • In the Insert bar, select Media and then click the ActiveX icon.
      This is a picture of the feature being described.
    • In the Insert bar, select Media and then drag the ActiveX icon to the Document window (or to the Code view window if you are working in the code).
    • Choose Insert > Media > ActiveX.

      • An icon marks where the ActiveX control will appear on the page in Internet Explorer.

For information on the available properties, see Setting ActiveX properties.


Inserting a Java applet

Java is a programming language that allows the development of lightweight applications (applets) that can be embedded in web pages.

After you create a Java applet, you can insert it into an HTML document using Dreamweaver. Dreamweaver uses the applet tag to mark the reference to the applet file.

To insert a Java applet:
  1. In the Document window, place the insertion point where you want to insert the applet, then do one of the following:
    • In the Insert bar, select Media and then click the Applet icon.
      This is a picture of the feature being described.
    • In the Insert bar, select Media and then drag the Applet icon to the Document window (or to the Code view window if you are working in the code).
    • Choose Insert > Media > Applet. You can also drag the Flash button icon over to the Document window.
  2. In the dialog box that appears, select a file containing a Java applet.

For information on the available properties, see Setting Java applet properties.


Using behaviors to control media

You can add behaviors to your page to start and stop various media objects.

Control Shockwave or Flash lets you play, stop, rewind, or go to a frame in a Shockwave or Flash movie (see Control Shockwave or Flash).

Play Sound lets you play a sound; for example, you can play a sound effect whenever the user moves the mouse pointer over a link (see Play Sound).

Check Plugin lets you check to see if visitors to your site have the required plug-in installed, then route them to different URLs, depending on whether they have the right plug-in. This only applies to Netscape Navigator Plug-ins, as the Check plugin behavior does not check for ActiveX controls. For more information, see Check Plugin.


Setting Flash object properties

The Property inspector for Flash objects—button and text objects generated in Dreamweaver—initially displays the most commonly used properties. Click the expander arrow in the lower right corner to see more properties.

Name specifies the name to identify the button for scripting. Enter a name in the unlabeled field on the far left side of the Property inspector.

W and H specify the width and height of the object in pixels. You can also specify the following units: pc (picas), pt (points), in (inches), mm (millimeters), cm (centimeters), or % (percentage of the parent object’s width or height). The abbreviations must follow the value without a space (for example, 3mm).

File specifies the path to the Flash object file. Click the folder icon to browse to a file, or type a path.

Edit opens the Flash object dialog box for edits to the selected Flash object.

Reset Size resets the selected button to the original movie size.

V Space and H Space specify the number of pixels of white space above, below, and on both sides of the button.

Quality sets the quality parameter for the object and embed tags that define the button. A movie looks better with a high setting, but it requires a faster processor to render correctly on the screen. Low emphasizes speed over appearance, whereas High favors appearance over speed. Auto Low emphasizes speed at first, but improves appearance when possible. Auto High emphasizes both qualities at first, but sacrifices appearance for speed if necessary.

Scale sets the scale parameter for the object and embed tags that defines the button or text object. This parameter defines how the movie displays within the area defined for the movie by the width and height values. The choices are Default (Show All), No Border, and Exact Fit. Show All makes the entire movie visible in the specified area, maintaining the aspect ratio of the movie and preventing distortion; borders of the background color may appear on two sides of the movie. No Border is similar to Show All, except portions of the movie may be cropped. With Exact Fit, the entire movie fills the specified area, but the aspect ratio of the movie is not maintained and distortion may occur.

Align defines how the object is aligned on the page. For a description of each option, see Aligning an image.

Bg specifies a background color for the object.

Play/Stop lets you preview the Flash object in the Document window. Click the green Play button to see the object in Play mode; click the red Stop button to stop the movie and be able to edit the object.

Parameters opens a dialog box for entering additional parameters (see Using parameters to control media objects).


Using parameters to control media objects

Use the Parameters dialog box to enter values for special parameters defined for Shockwave and Flash movies, ActiveX controls, Navigator plug-ins, and Java applets. Parameters are used with the object, embed, and applet tags. Parameters set attributes specific to the type of object being inserted. For example, a Flash movie object can have a quality parameter <param name=”quality” value=”best”> for the object tag. The Parameter dialog box is available from the Property inspector. See the documentation for the object you’re using for information on the parameters it requires.

Note: There is no widely accepted standard for identifying data files for ActiveX controls. Consult the documentation for the ActiveX control you’re using to find out which parameters to use.

To open the Parameters dialog box:
  1. Select an object that can have parameters (such as a Shockwave movie, an ActiveX control, a Navigator plug-in, or a Java applet) in the Document window.
  2. Open the dialog box using one of these methods:
    • Right-click (Windows) or Control-click (Macintosh) the object, and choose Parameters from the context menu.
    • Open the Property inspector if it isn’t already open, and click the Parameters button found in the lower half of the Property inspector. (Make sure the Property inspector is expanded.)
To enter a value for a parameter in the Parameters dialog box:
  1. Click the plus (+) button.
  2. Enter the name of the parameter in the Parameter column.
  3. Enter the value of the parameter in the Value column.
To remove parameters:

Select a parameter and press the minus (-) button.

To reorder parameters:

Select a parameter and use the up and down arrow buttons.


Setting Flash and Shockwave movie properties

To ensure the best results in both Internet Explorer and Netscape Navigator, Dreamweaver inserts Flash and Shockwave movies using both the object and embed tags. (The object tag is defined by Microsoft for ActiveX controls; embed is defined by Navigator for plug-ins.) To view the following properties in the Property inspector, select a Flash movie or a Shockwave movie. See also About Flash content, and Inserting Shockwave movies.

To see all Flash movie properties, click the expander arrow in the lower right corner.

Name specifies a name to identify the movie for scripting. Enter a name in the unlabeled field on the far left side of the Property inspector.

W and H specify the width and height of the movie in pixels. You can also specify the following units: pc (picas), pt (points), in (inches), mm (millimeters), cm (centimeters), or % (percentage of the parent object’s value). The abbreviations must follow the value without a space (for example, 3mm).

File specifies the path to the Flash or Shockwave movie file. Click the folder icon to browse to a file, or type a path.

Src specifies the path to a Flash source document (FLA), when Dreamweaver MX and Flash MX are both installed on your computer. To edit a Flash movie file (SWF), you update the movie’s source document.

Edit lets you launch Macromedia Flash MX to update a FLA file. This button is disabled if you do not have Macromedia Flash MX loaded on your computer. For information about editing an inserted Flash movie, see Editing a Flash movie from Dreamweaver.

Reset Size returns the selected movie to its original size.

Loop, when checked, makes the movie play continuously; when unchecked, the movie plays once and stops.

Autoplay, when checked, automatically plays the movie when the page loads.

V Space and H Space specify the number of pixels of white space above, below, and on both sides of the movie.

Quality controls anti-aliasing during playback of the movie. A movie looks better with a high setting, but it requires a faster processor to render correctly on the screen. Low emphasizes speed over appearance, whereas High favors appearance over speed. Auto Low emphasizes speed at first, but improves appearance when possible. Auto High emphasizes both qualities at first, but sacrifices appearance for speed if necessary.

Scale determines how the movie fits into the dimensions set in the width and height fields. The Default setting displays the entire movie.

No Border fits the movie into the set dimensions so that no borders show and maintains the original aspect ratio.

Exact Fit scales the movie to the set dimensions, regardless of the aspect ratio.

Align determines how the movie is aligned on the page. For a description of each align option, see Aligning an image.

Bg specifies a background color for the movie area. This color also appears while the movie is not playing (while loading and after playing).

Parameters opens a dialog box for entering additional parameters to pass to the movie. For more information adding or deleting parameters, see Using parameters to control media objects. The movie must have been designed to receive these additional parameters.


Setting Netscape Navigator plug-in properties

After inserting content for a Netscape Navigator plug-in (see Inserting Netscape Navigator plug-in content), use the Property inspector to set parameters for that content. To view the following properties in the Property inspector, select a Netscape Navigator plug-in object.

The Property inspector initially displays the most commonly used properties. Click the expander arrow in the lower right corner to see all properties.

Name specifies a name to identify the plug-in for scripting. Enter a name in the unlabeled field on the far left side of the Property inspector.

W and H specify, in pixels, the width and height allocated to the object on the page. You can also specify the following units: pc (picas), pt (points), in (inches), mm (millimeters), cm (centimeters), or % (percentage of the parent object’s width and height). The abbreviations must follow the value without a space (for example, 3mm).

Src specifies the source data file. Click the folder icon to browse to a file, or enter a filename.

Plg Url specifies the URL of the pluginspace attribute. Enter the complete URL of the site where users can download the plug-in. If the user viewing your page does not have the plug-in, the browser tries to download it from this URL.

Align determines how the object is aligned on the page. For a description of each option, see Aligning an image.

V Space and H Space specify the amount of white space in pixels above, below, and on both sides of the plug-in.

Border specifies the width of the border around the plug-in.

Parameters opens a dialog box for entering additional parameters to pass to the Netscape Navigator plug-in (see Using parameters to control media objects). Many plug-ins respond to special parameters. The Flash plug-in, for example, includes parameters for bgcolor, salign, and scale.

You can also view the attributes assigned to the selected plug-in by clicking the Attribute button. You can edit, add, and delete attributes such as width and height in this dialog box.


Setting ActiveX properties

After inserting an ActiveX object (see Inserting an ActiveX control), use the Property inspector to set attributes of the object tag and parameters for the ActiveX control. Click Parameters in the Property inspector to enter names and values for properties that don’t appear in the Property inspector. There is no widely accepted standard format for parameters for ActiveX controls; to find out which parameters to use, consult the documentation for the ActiveX control you’re using.

The Property inspector initially displays the most commonly used properties. Click the expander arrow in the lower right corner to see all properties.

Name specifies a name to identify the ActiveX object for scripting. Enter a name in the unlabeled field on the far left side of the Property inspector.

W and H specify the width and height of the object, in pixels. You can also specify the following units: pc (picas), pt (points), in (inches), mm (millimeters), cm (centimeters), or % (percentage of the parent object’s width and height). The abbreviations must follow the value without a space (for example, 3mm).

Class ID identifies the ActiveX control to the browser. Enter a value or choose one from the pop-up menu. When the page is loaded, the browser uses the class ID to locate the ActiveX control required for the ActiveX object associated with the page. If the browser doesn’t locate the specified ActiveX control, it attempts to download it from the location specified in Base.

Embed adds an embed tag within the object tag for the ActiveX control. If the ActiveX control has a Netscape Navigator plug-in equivalent, the embed tag activates the plug-in. Dreamweaver assigns the values you entered as ActiveX properties to their Netscape Navigator plug-in equivalents.

Align determines how the object is aligned on the page. For a description of each option, see Aligning an image.

Parameters opens a dialog box for entering additional parameters to pass to the ActiveX object (see Using parameters to control media objects). Many ActiveX controls respond to special parameters.

Src defines the data file to be used for a Netscape Navigator plug-in if the Embed option is turned on. If you don’t enter a value, Dreamweaver attempts to determine the value from the ActiveX properties entered already.

V Space and H Space specify the amount of white space, in pixels, above, below, and on both sides of the object.

Base specifies the URL containing the ActiveX control. Internet Explorer downloads the ActiveX control from this location if it has not been installed in the visitor’s system. If you don’t specify a Base parameter and if your visitor doesn’t already have the relevant ActiveX control installed, the browser can’t display the ActiveX object.

Alt Img specifies an image to be displayed if the browser doesn’t support the object tag. This option is available only when the Embed option is deselected.

Data specifies a data file for the ActiveX control to load. Many ActiveX controls, such as Shockwave and RealPlayer, do not use this parameter.


Setting Java applet properties

After inserting a Java applet (see Inserting a Java applet), use the Property inspector to set parameters. To view the following properties in the Property inspector, select a Java applet.

The Property inspector initially displays the most commonly used properties. Click the expander arrow in the lower right corner to see all properties.

Name specifies a name to identify the applet for scripting. Enter a name in the unlabeled field on the far left side of the Property inspector.

W and H specify the width and height of the applet in pixels. You can also specify the following units: pc (picas), pt (points), in (inches), mm (millimeters), cm (centimeters), or % (percentage of the parent object’s width or height). The abbreviations must follow the value without a space (for example, 3mm).

Code specifies the file containing the applet’s Java code. Click the folder icon to browse to a file, or enter a filename.

Base identifies the folder containing the selected applet. When you choose an applet, this field is filled automatically.

Align determines how the object is aligned on the page. For a description of each option, see Aligning an image.

Alt specifies alternative content (usually an image) to be displayed if the user’s browser doesn’t support Java applets or has Java disabled. If you enter text, Dreamweaver renders the text with the alt attribute of the applet tag. If you choose an image, Dreamweaver inserts an img tag between the opening and closing applet tags.

Note: To specify alternative content that is viewable in both Netscape Navigator (with Java disabled) and Lynx (a text-based browser), select an image and then manually add an alt attribute to the img tag in the Code inspector.

V Space and H Space specify the amount of white space in pixels above, below, and on both sides of the applet.

Parameters opens a dialog box for entering additional parameters to pass to the applet. See Using parameters to control media objects. Many applets respond to special parameters.

Previous


Dreamweaver and Accessibility

Accessibility refers to making websites and web products usable for people with visual, auditory, motor, and other disabilities. Macromedia Dreamweaver MX provides tools that make the product accessible and it provides tools that help you author accessible content.

Examples of accessibility features for software products and websites include screen reader support, text equivalents for graphics, keyboard shortcuts, change of display colors to high contrast, and so on.

As the number of people with disabilities who access the web continues to grow, it is increasingly important that developers make their products and websites accessible to all potential users. To that end, the U.S. government and other organizations have established legislation and guidelines to ensure that developers produce accessible content. For more information about two significant initiatives, see the World Wide Web Consortium Web Accessibility Initiative and Section 508 of the Federal Rehabilitation Act.

If you are a Dreamweaver web designer who needs to use the Dreamweaver accessibility features, this chapter tells you about Dreamweaver screen reader support, keyboard navigation, and operating system accessibility support.

If you are a Dreamweaver web designer who needs to create accessible content, this chapter tells you about using the Dreamweaver Accessibility dialog boxes and testing your site for accessibility.

Designing accessible websites requires you to understand accessibility requirements and make many ongoing subjective decisions. Dreamweaver aids you in creating accessible websites. For example, Dreamweaver enables you to add text equivalents for graphics—and can even remind you to do so if you forget. However, no authoring tool can automate the development process. Designers need to think about how users with disabilities interact with webpages. The best way to ensure that a website is accessible is through deliberate planning, development, testing, and evaluation.

This chapter covers the following topics:

  • Using Dreamweaver accessibility features
  • Authoring for accessibility
  • Testing your website for accessibility
Next


Using Dreamweaver accessibility features

Dreamweaver provides features that make it accessible to users with disabilities. Specifically, Dreamweaver supports screen readers, operating system accessibility features, and keyboard navigation.

Note: The Dreamweaver 4 Workspace and Dreamweaver 5 Workspace modes both support Dreamweaver accessibility features, but we recommend that you use the Dreamweaver 4 workspace. To change modes, select Edit > Preferences or Dreamweaver > Preferences (Mac OS X), then select General from the category list on the left. Click the Change Workspace button, select Dreamweaver 4 Workspace, then click OK.


Using screen readers with Dreamweaver

A screen reader recites text that appears on the computer screen. It also reads non-textual information, such as button labels or image descriptions in the application, provided in accessibility tags or attributes during authoring.

Dreamweaver supports JAWS for Windows, from Freedom Scientific, and Window Eyes screen readers, from GW Micro. As a Dreamweaver user, you can use a screen reader to assist you in creating your web pages. The screen reader starts reading in the top left corner of the Document window.


Using operating system accessibility features

Dreamweaver supports the Windows operating system high contrast setting. You activate this option through the Windows control panel. When high contrast is on, it affects Dreamweaver as follows:

  • Dialog boxes and panels use system color settings.

    • For example, if you set the color to White on Black, then all Dreamweaver dialog boxes and panels appear with a white foreground color and black background.

  • Code view syntax coloring is off.

    • Code view uses the system window and window text color, and ignores color settings in Preferences. For example, if you set the system color to White on Black, and then change text colors in Preferences > Code Coloring, Dreamweaver ignores the colors set in Preferences and displays the code text with a white foreground color and black background.

  • Design view uses the background and text colors you set in Modify > Page Properties so that pages you design render colors as a browser will.


Using the keyboard to navigate Dreamweaver

You can use the keyboard to navigate Dreamweaver floating panels, Property inspector, dialog boxes, frames, and tables without a mouse.

This section covers the following topics:

  • Navigating panels
  • Navigating the Property inspector
  • Navigating dialog boxes
  • Navigating frames
  • Navigating tables


Navigating panels

You can use the keyboard to navigate the panels.

Note: Tabbing and the use of arrow keys are supported for Windows only.

To navigate panels:
  1. In the Document window, press Control+Alt+Tab to shift focus to a panel.

    2. A white outline around the panel title bar indicates that focus is on that panel. The screen reader reads the panel title bar that has focus.

  2. Press Control+Alt+Tab again to shift focus to the next panel.

    3. Continue until you have focus on the panel you want to work in.

  3. Press Control+Alt+Shift+Tab to shift focus to the previous panel, if necessary.
  4. If the panel you want to work in is not open, use the keyboard shortcuts listed in the Windows menu to display the appropriate panel, then press Control+Alt+Tab to shift focus to that panel.

    5. If the panel you want to work in is open, but not expanded, place focus on the panel title bar, and then press the Space bar. Press the Space bar again to collapse the panel.

  5. Press the Tab key to move through the options in the panel.

    6. A dotted outline around the option indicates that focus is on that option.

  6. Use the arrow keys as appropriate:
    • If an option has choices, use the arrow keys to scroll through the choices, and then press the Space bar to make a selection.
    • If there are tabs in the panel group to open other panels, place focus on the open tab, and then use the left or right arrow key to open another tabs. Once you open a new tab, press the Tab key to move through the options in that panel.


Navigating the Property inspector

You can use the keyboard to navigate the Property inspector and make changes to your document.

Note: Tabbing and the use of arrow keys are supported for Windows only.

To navigate the Property inspector:
  1. Press Control+F3 to display the Property inspector, if it is not visible.
  2. Press Control+Alt+Tab until you shift focus to the Property inspector.
  3. Press the Tab key to move through the Property inspector options.
  4. Use the arrow keys as appropriate to move through option choices, and press Enter (Windows) or Return (Macintosh) to make a selection.
  5. Press Control+Tab (Windows) or Option+Tab (Macintosh) to open and close the expanded section of the Property inspector, as necessary, or, with focus on the expander arrow at the bottom right, press the Space bar.


Navigating dialog boxes

You can use the keyboard to navigate dialog boxes.

Note: Tabbing and the use of arrow keys are supported for Windows only.

To navigate a dialog box:
  1. Press the Tab key to move through the options in a dialog box.
  2. Use the arrow keys to move through choices for an option.

    3. For example, if an option has a pop-up menu, move focus to that option, and then use the down arrow to move through the choices.

  3. If the dialog box has a Category list, press Control+Tab (Windows) or Option+Tab (Macintosh) to shift focus to the category list, and then use the arrow keys to move up or down the list.
  4. Press Control+Tab (Windows) or Option+Tab (Macintosh) again to shift to the options for a category.
  5. Press Enter (Windows) or Return (Macintosh) to exit the dialog box.


Navigating frames

If your document contains frames, you can use the arrow keys to shift focus to a frame.

Note: Tabbing and the use of arrow keys are supported for Windows only.

To select a frame:
  1. Place the insertion point in the Document window.
  2. Press Alt+Up Arrow to select the frame that currently has focus.

    3. A dotted line indicates the frame that has focus.

  3. Continue pressing Alt+Up Arrow to shift focus to the frameset, and then parent framesets, if there are nested framesets.
  4. Press Alt+Down Arrow to shift focus to a child frameset or a single frame within the frameset.
  5. With focus on a single frame, press Alt+Left or Right Arrow to move between frames.
  6. Press Alt+Down Arrow to place the insertion point in the Document window.


Navigating tables

After you select a table, you can use the keyboard to navigate through it.

Note: Tabbing and the use of arrow keys are supported for Windows only.

To navigate a table:
  1. In the Document window, do one of the following to select the table:
    • If the insertion point is to the left of the cell, press Shift+Right Arrow.
    • If the insertion point is to the right of the cell, press Shift+Left Arrow.
  2. Press the down arrow to position the cursor in the first cell.
  3. Use the arrow keys or press Tab to move to other cells as necessary.

    4. Tip: Pressing Tab in a right-most cell adds another row to the table.

  4. To select a cell, press Control+A while the insertion point is in the cell.
  5. To exit the table, use the Select All command (Control+A in Windows or Option+A in Macintosh) twice, and then press the up, left, or right arrow key.


Authoring for accessibility

Dreamweaver assists you in creating accessible pages that contain useful content for screen readers and comply with government guidelines.

When you activate the accessibility dialog boxes (see Activating the Accessibility dialog boxes), Dreamweaver prompts you to enter accessibility attributes whenever you insert page elements.

Note: To see sample pages that were designed for accessibility, select File > New. In the New Document dialog box, select Page Design (Accessibility) from the category list, and then select a page from the Page Design (Accessibility) list. For more information, see Working with the New Document dialog box.


Developing content for screen readers

To make information accessible to screen readers and your website users, Dreamweaver makes it easy to add text equivalents for graphic elements of a page, and enables you to mark up tables and forms in HTML for screen readers and other assistive technologies.

For example, you can add a product image to your document and associate a description of “Boy’s red jacket size large.” Then, when the image appears on a page for a user with visual disabilities, the screen reader reads the description, and the user knows which product is displayed on the page.

Dreamweaver prompts you to add text equivalents for graphic elements and accessibility-related mark up when you activate the Accessibility dialog boxes as described in Activating the Accessibility dialog boxes.


Activating the Accessibility dialog boxes

When you create accessible pages, you need to associate information, such as labels and descriptions, with your page objects to make your content accessible to all users. To do this, activate the Accessibility dialog boxes so that Dreamweaver prompts you for the information you need to add for accessibility. These dialog boxes appear when you insert an object for which you activated the corresponding Accessibility dialog box.

To activate the Accessibility dialog boxes:
  1. Choose Edit > Preferences or Dreamweaver > Preferences (Mac OS X).

    2. The Preferences dialog box appears.

  2. Select Accessibility from the category list on the left.

    3. The Preferences dialog box displays accessibility options.
    This is a picture of the feature being described.

  3. Complete the dialog box.

    4. For more information, see Setting accessibility user preference options.

  4. Click OK.

For each element you select, an Accessibility dialog box prompts you to enter accessibility tags and attributes when you insert that element in a document.

For more information on adding accessible content to your website, see the following sections:

  • Inserting accessible images
  • Inserting accessible form objects
  • Inserting accessible frames
  • Inserting accessible media objects
  • Inserting accessible tables


Inserting accessible images

When you insert an image, and you’ve selected the Images option in Accessibility preferences, Dreamweaver prompts you to enter information to make the image accessible.

Note: To make image placeholders and interactive images, such as a rollover images and navigation bars, accessible, enter Alternated text when you insert the image. For more information see Inserting Images.

To insert an accessible image:
  1. Place the insertion point in the Document window where you want the image to appear.
  2. Do one of the following:
    • Choose Insert > Image.
    • Click the Image button on the Common tab of the Insert bar.
    • Drag the Image icon from the Insert bar into the document.

      • The Image Source dialog box appears.

  3. Click Browse to choose a file or type the path for the image file.

    4. If you are working in an unsaved document, Dreamweaver generates a file location reference to the image file. When you save the document anywhere in the site, Dreamweaver converts the reference to a document-relative path.

  4. Click OK.

    5. The Image Tag Accessibility Attributes dialog box appears.
    This is a picture of the feature being described.

  5. Enter values in the Alt and Longdesc text boxes.

    6. For more information see Setting the Image Tag Accessibility Attributes dialog box options.

    Note: You can enter one or both text boxes depending on your needs.

  6. Click OK.

    7. The image appears in your document.

    Note: If you press Cancel, the image appears in the document, but Dreamweaver does not associate accessibility tags or attributes with it.

To edit accessibility values for an image:
  1. In the Document window, select the image.
  2. Do one of the following:
    • Edit the appropriate image attributes in Code view.
    • Right-click (Windows) or Control-click (Macintosh), and then choose Edit Tag Code.
    • Edit the Alt value in the Property inspector.


Inserting accessible form objects

When you insert a form object, and you’ve selected the Form Object option in Accessibility preferences, Dreamweaver prompts you to enter information to make the form object accessible.

To add an accessible form object:
  1. In the document, place the insertion point where you want the form to appear.
  2. Do one of the following to insert a form object:
    • Choose Insert > Form Object, and then select a form object to insert.
    • Select the Forms tab in the Insert bar, and then click an object button.
    • Select the Forms tab in the Insert bar, and then drag the appropriate icon into the document.

      • The Input Tag Accessibility Attributes dialog box appears.
      This is a picture of the feature being described.

  3. Complete the dialog box.

    4. For more information, see Setting the Object Tag Accessibility Attributes dialog box options.

  4. Click OK.

    5. Note: If you press Cancel, the form object appears in the document, but Dreamweaver does not associate accessibility tags or attributes with it.

  5. If Dreamweaver asks if you want to insert a form tag, click Yes.

    6. The form object appears in the document.

To edit accessibility values for a from object:
  1. In the Document window, select the object.
  2. Do one of the following:
    • Edit the appropriate attributes in Code view.
    • Right-click (Windows) or Control-click (Macintosh), and then choose Edit Tag Code.
To make an accessible form object dynamic:
  1. In the Document window, select the form object you want to make dynamic.
  2. Right-click (Windows) or Control-click (Macintosh), and then choose Edit Tag Code.
  3. Edit attributes as necessary to make the object dynamic.

Note: You cannot use the Bindings panel to add an accessible dynamic form object.


Inserting accessible frames

When you insert a frameset, and you’ve selected the Images option in Accessibility preferences, Dreamweaver prompts you to enter a name for each frame to make it accessible.

To insert an accessible frameset:
  1. Place the insertion point in the document.
  2. Do one of the following to insert a frameset:
    • Choose Insert > Frames, then select a frameset.
    • Click the Frames tab in the Insert bar, then click the appropriate frameset button.
    • Click the Frames tab in the Insert bar, then drag the appropriate frameset icon into the document.

      • The frameset appears in your document and the Frame Tag Accessibility Attributes dialog box appears.
      This is a picture of the feature being described.

  3. Select a frame from the pop-up menu, and then enter a name for the frame.

    4. For more information, see Setting the Frame Tag Accessibility Attributes dialog box options.

    Tip: Choose Windows > Others > Frames to view a diagram of the frames you are naming.

  4. Repeat the previous step until you name each frame.
  5. Click OK.

    6. Note: If you press Cancel, the frameset appears in the document, but Dreamweaver does not associate accessibility tags or attributes with it.

To edit accessibility values for a frame:
  1. Display Code view or Split view for your document, if you’re currently viewing design.
  2. Choose Windows > Others > Frames to open the Frames panel.
  3. Select a frame by placing the insertion point in one of the frames.

    4. Dreamweaver highlights the frame tag in the code.

  4. Do one of the following:
    • Edit the code in Code view.
    • Right-click (Windows) or Control-click (Macintosh), and then choose Edit Tag Code.


Inserting accessible media objects

When you insert a media object, and you’ve selected the Media option in Accessibility preferences, Dreamweaver prompts you to enter information to make the media object accessible.

To insert an accessible media object:
  1. Place the insertion point in the Document window where you want the media object to appear.
  2. Do one of the following:
    • Choose Insert > Media, then select an item.
    • Click the Media tab in the Insert bar, then click an object button.
    • Click the Media tab in the Insert bar, then drag the appropriate icon into the document.

      • A Select File or an Insert Flash dialog box appears.

      Note: For Active X objects, the accessibility dialog box appears. For these objects, skip the next step.

  3. Complete the Select File or Insert Flash dialog box, and then click OK.

    4. The Object Tag Accessibility Attributes dialog box appears.
    This is a picture of the feature being described.

  4. Complete the dialog box.

    5. For more information, see Setting the Object Tag Accessibility Attributes dialog box options.

  5. Click OK.

    6. The media object appears in the document.

    Note: If you press Cancel, a media object placeholder appears in the document, but Dreamweaver does not associate accessibility tags or attributes with it.

To edit accessibility values for a media object:
  1. In the Document window, select the object.
  2. Do one of the following:
    • Edit the appropriate attributes in Code view.
    • Right-click (Windows) or Control-click (Macintosh), and then choose Edit Tag Code.


Inserting accessible tables

When you insert a table, and you’ve selected the Tables option in Accessibility preferences, Dreamweaver prompts you to enter a name for each table to make it accessible.

To insert an accessible table:
  1. Place the insertion point in the Document window where you want the table to appear.
  2. Do one of the following:
    • Choose Insert > Table.
    • Click the Table button on the Common tab in the Insert bar.
    • Drag the Table icon from the Common tab in the Insert bar into the document.

      • The Insert Table with Accessibility Attributes dialog box appears.
      This is a picture of the feature being described.

  3. Complete the dialog box.

    4. For more information, see Setting the Insert Table with Accessibility Attributes dialog box options.

  4. Click OK.

    5. The table appears in the document.

    Note: If you press Cancel, the table does not appears in the document.

To edit accessibility values for a table:
  1. In the Document window, select the table.
  2. Do one of the following:
    • Edit the appropriate table attributes in Code view.
    • Right-click (Windows) or Control-click (Macintosh), and then choose Edit Tag Code.


Testing your website for accessibility

The best way to ensure that your site is accessible to all users is to design your site according to the Section 508 accessibility guidelines of the 1998 Rehabilitation Act. Then, use the Dreamweaver reports feature to check that you have implemented the guidelines in your site.

You can run an Accessibility report on the current document, selected files, a folder, or an entire site.

To run an Accessibility report on the current document:
  1. Open the document you want to check.
  2. Choose File > Check Page > Check Accessibility.

    3. The report results appear in the Site Reports panel (in the Results panel group).

To run an Accessibility report on selected content:
  1. Do one of the following to select the content you want to check:
    • Open a document.
    • Select files in the Site panel.
    • Select a site from the Site pop-up menu in the Site panel.

      • Note: To run an Accessibility report on a folder, you do not need to select the folder now; you select the folder in the Reports dialog box.

  2. Choose Site > Reports

    3. The Reports dialog box appears.
    This is a picture of the feature being described.

  3. Select the content you want to report on from the Report On pop-up menu, and then select Accessibility.

    4. Note: If you select Folder from the Report On pop-up menu, click the Browse to select a folder.

  4. Click Run.

    5. The report results appear in the Site Reports panel (in the Results panel group).

To view and edit reported problems:
  1. Run an Accessibility report on selected website content, if you haven’t already.

    2. The report results appear in the Site Reports panel (in the Results panel group). Select any line in the report, and click the More Info button on the left side of the Site Reports panel for an description of the problem and suggestions for fixing the problem.

    The information appears in the Reference panel (in the Code panel group).

  2. Double click any line in the report to view the corresponding code in the Document window.

    3. Note: If you are in Design view, Dreamweaver changes the display to split view to show the reported problem in code.

  3. In the Document window, in Code view, edit or add attributes to the appropriate tags to make your content comply with accessibility guidelines.

    4. To use the tag editor to assist in coding, select code, right-click (Windows) or Control-click (Macintosh), and choose tag editor. For more information about tags and attributes, select O’Reilly HTML Reference in the Reference panel (in the Code panel group), and then select a tag.

To save an accessibility report:

Click the Save button on the left side of the Site Reports panel.


About this feature

The accessibility validation feature in Dreamweaver MX uses technology from UsableNet. UsableNet is an industry leader in developing easy-to-use software to automate usability and accessibility testing and repair. For additional assistance with accessibility testing, try the UsableNet LIFT for Macromedia Dreamweaver, a complete solution for developing usable and accessible websites. UsableNet Lift for Macromedia Dreamweaver includes fix wizards for complex tables, forms, and images; a global ALT editor; customizable reporting; and a new active monitoring mode that ensures content is accessible as pages are being built. Request a demo of Lift for Macromedia Dreamweaver at http://www.usablenet.com

This is a picture of the feature being described.


Setting accessibility user preference options

The purpose of this dialog box is to activate the accessibility dialog boxes and enable large fonts for panels.

Procedure
  1. Under Show Attributes When Inserting, select the elements for which you want to activate accessibility dialog boxes.

    2. For each element you select, an Accessibility dialog box prompts you to enter accessibility tags or attributes when you insert that element in a document.

  2. Select the Make Dreamweaver Use Large Fonts checkbox if you want to use large fonts.
  3. Deselect the Offscreen Rendering checkbox if you have problems with your screen reader.
  4. Click OK.

Related topic

Activating the Accessibility dialog boxes


Setting the Image Tag Accessibility Attributes dialog box options

The purpose of this dialog box is to set image tag accessibility options. You can enter one or both attributes depending on your needs. The screen reader reads the Alt attribute for the image.

Procedure
  1. In the Alt text box, enter a name or brief description for the image.

    2. The screen reader reads the information you enter here. You should limit your entry to around 50 characters. For longer descriptions, consider providing a link, in the Longdesc text box, to a file that gives more information about the image.

  2. In the Longdesc text box, enter the location of a file that displays when the user click the image or click the folder icon to browse to the file.

    3. This field provides a link to a file that is related to, or give more information about, the image.

  3. Click OK.

    4. Note: If you press Cancel, the image appears in the document, but Dreamweaver does not associate accessibility tags or attributes with it.

Related topic

Inserting accessible images


Setting the Input Tag Accessibility Attributes dialog box options

The purpose of this dialog box is to set form object accessibility options.The screen reader reads the Label attribute for the object.

Procedure
  1. Enter a name for the form object in the Label text box.
  2. Select a style:

    3. Wrap with Label tag wraps a label tag around the form item, as follows:

    <label>
<input type="radio" name="radiobutton" value="radiobutton">
RadioButton1</label>

Attach Label Tag using for uses the “for” attribute to wrap a label tag around the form item, as follows:

<input type="radio" name="radiobutton" value="radiobutton" id="radiobutton">
<label for="radiobutton">RadioButton2</label>

This choice causes the browser to render text associated with a checkbox and radio button with a focus rectangle and enables the user to select the checkbox and radio button by clicking anywhere in the associated text instead of just the checkbox or radio button control.

    Note: This is the preferred option for accessibility, however the functionality may vary depending on the browser.

No Label Tag does not use a label tag, as follows:

<input type="radio" name="radiobutton" value="radiobutton">
RadioButton3
  3. Select a Position for the label in relation to the form object: After Form Item or Before Form Item.
  4. Enter a keyboard equivalent (one letter) in the Access Key text box to select the form object in the browser.

    5. Use the Control key (Windows) with the Access Key to access the object. For example, if you enter B as the Access Key, use Control+B to select the object in the browser.

  5. Enter a number for the tab order of the form object in the Tab Index text box.

    6. Setting a tab order is useful when you have other links and form objects on the page and need the user to tab through them in a specific order. If you set tab order for one object, be sure to set the tab order for all of them.

  6. Click OK.

    7. Note: If you press Cancel, the form object appears in the document, but Dreamweaver does not associate accessibility tags or attributes with it.

Related topic

Inserting accessible form objects


Setting the Frame Tag Accessibility Attributes dialog box options

The purpose of this dialog box is to set frame accessibility options. The screen reader reads the name of the frame.

Procedure
  1. Select a frame from the pop-up menu.
  2. Enter a meaningful name for the frame.

    3. Tip: Choose Windows > Others > Frames to view a diagram of the frames you are naming.

  3. Repeat for each frame.
  4. Click OK.

    5. Note: If you press Cancel, the frameset appears in the document, but Dreamweaver does not associate accessibility tags or attributes with it.

If you do not make any changes to this dialog box, and click OK, then Dreamweaver gives the frame the same title as its name. The frame name corresponds to its position.

Related topic

Inserting accessible frames


Setting the Object Tag Accessibility Attributes dialog box options

The purpose of this dialog box is to set media object accessibility options. The screen reader reads the title of the object.

Procedure
  1. Enter a title for the media object in the Title text box.
  2. Enter a keyboard equivalent (one letter) in the Access Key text box to select the form object in the browser.

    3. Use the Control key (Windows) with the Access Key to access the object. For example, if you enter B as the Access Key, use Control+B to select the object in the browser.

  3. Enter a number for the tab order of the form object in the Tab Index text box.

    4. Setting a tab order is useful when you have other links and form objects on the page and need the user to tab through them in a specific order. If you set tab order for one object, be sure to set the tab order for all of them.

  4. Click OK.

    5. Note: If you press Cancel, a media object placeholder appears in the document, but Dreamweaver does not associate accessibility tags or attributes with it.

Related topic

Inserting accessible media objects


Setting the Insert Table with Accessibility Attributes dialog box options

The purpose of this dialog box is to set table accessibility options. The screen reader reads the Caption and Summary.

Procedure
  1. Complete the standard table fields: Rows, Columns, Cell Padding, Cell Spacing, Width, and Border.

    2. For more information, see Inserting a table.

  2. Enter a title, to display outside of the table, in the Caption text box.
  3. Select an Align option for your caption in relation to your table.
  4. Enter a table description in the Summary text box.

    5. The screen reader reads the summary text, but it does not appear in the user’s browser.

  5. Select a header option, to help screen-reader users keep track of table information, from the Header pop-up menu:
    • None does not enable column or row headings for the table
    • Column makes the first column of the table a column for headings, so that you can enter a heading for each row of the table.
    • Row makes the first row of the table a row for headings, so that you can enter a heading for each column of the table.
    • Both enables you to enter column and row headings in the table.
  6. Click OK.

    7. Note: If you press Cancel, the table does not appear in the document.

Related topic

Inserting accessible tables

Previous


Working with Behaviors and Animations

Many web pages contain only text and images, with no interactive elements. Use JavaScript behaviors and layer-animation timelines in Dreamweaver to provide interactivity and animation to capture the interest of your visitors.

This part contains the following chapters:

  • Using JavaScript Behaviors
  • Animating Layers


Using JavaScript Behaviors

Dreamweaver behaviors place JavaScript code in documents to allow visitors to interact with a web page to change the page in various ways, or to cause certain tasks to be performed. A behavior is a combination of an event with an action triggered by that event. In the Behaviors panel, you add a behavior to a page by specifying an action and then specifying the event that triggers that action.

Note: Behavior code is client-side JavaScript code; that is, it runs in browsers, not on servers.

Events are, effectively, messages generated by browsers indicating that a visitor to your page has done something. For example, when a visitor moves the pointer over a link, the browser generates an onMouseOver event for that link; the browser then checks to see whether there’s some JavaScript code (specified in the page being viewed) that the browser is supposed to call when that event is generated for that link. Different events are defined for different page elements; for example, in most browsers onMouseOver and onClick are events associated with links, whereas onLoad is an event associated with images and with the body section of the document.

An action consists of prewritten JavaScript code that performs a specific task, such as opening a browser window, showing or hiding a layer, playing a sound, or stopping a Shockwave movie. The actions provided with Macromedia Dreamweaver MX are carefully written by Dreamweaver engineers to provide maximum cross-browser compatibility.

After you attach a behavior to a page element, whenever the event you’ve specified occurs for that element, the browser calls the action (the JavaScript code) that you’ve associated with that event. (The events that you can use to trigger a given action vary from browser to browser.) For example, if you attach the Popup Message action to a link and specify that it will be triggered by the onMouseOver event, then whenever someone points to that link with the mouse pointer in the browser, your message pops up in a dialog box.

A single event can trigger several different actions, and you can specify the order in which those actions occur.

Dreamweaver MX provides about two dozen behavior actions; additional actions can be found on the Macromedia Exchange website as well as on third-party developer sites. (See Downloading and installing third-party behaviors.) You can write your own behavior actions if you are proficient in JavaScript. For more information on writing behavior actions, see Extending Dreamweaver.

Note: The terms behavior and action are Dreamweaver terms, not HTML terms. From the browser’s point of view, an action is just like any other piece of JavaScript code.

This chapter contains these sections:

  • Using the Behaviors panel
  • About events
  • Applying a behavior
  • About behaviors and text
  • Attaching a behavior to a timeline
  • Changing a behavior
  • Updating a behavior
  • Creating new actions
  • Downloading and installing third-party behaviors
  • Using the behavior actions that come with Dreamweaver
Next


Using the Behaviors panel

Use the Behaviors panel to attach behaviors to page elements (more specifically to tags) and to modify parameters of previously attached behaviors. For background information about what behaviors are and how they work, see the beginning of Using JavaScript Behaviors. For information on how to attach a behavior to an event, see Applying a behavior.

To open the Behaviors panel, choose Window > Behaviors.

Behaviors that have already been attached to the currently selected page element appear in the behavior list (the main area of the panel), listed alphabetically by event. If there are several actions for the same event, the actions will execute in the order in which they appear on the list. If no behaviors appear in the behavior list, then no behaviors have been attached to the currently selected element.

The Behaviors panel has the following options:

Actions (+) is a pop-up menu of actions that can be attached to the currently selected element. When you choose an action from this list, a dialog box appears in which you can specify parameters for the action. If all of the actions are dimmed, then there are no events that can be generated by the selected element.

Delete (-) removes the selected event and action from the behavior list.

Up and down arrow buttons move the selected action up or down in the behavior list for a particular event. Actions for a given event are executed in the specified order. The order of actions can be changed only for a particular event—for example, you can change the order in which several actions occur for the onLoad event, but all the onLoad actions stay together in the behavior list. The arrow buttons are disabled for actions that can’t be moved up or down in the list.

Events (the menu that appears when you click the arrow button next to the selected event name in the behavior list) is a pop-up menu of all the events that can trigger the action. This menu is visible only when an event in the behavior list is selected. Different events appear depending on the object selected. If the events you expect don’t appear, make sure the correct page element or tag is selected. (To select a specific tag, use the tag selector at the bottom left of the Document window.) Also make sure you’ve selected the correct browser or browsers in the Show Events For submenu.

Note: Event names in parentheses are available only for links; choosing one of these event names automatically adds a null link to the selected page element, and attaches the behavior to that link instead of to the element itself. The null link is specified as a href="javascript:;" in the HTML code.

Show Events For (the submenu in the Events menu) specifies the browsers in which the current behavior should work. The selection you make from this menu determines which events appear in the Events pop-up menu. Older browsers generally support fewer events than newer browsers, and in most cases, the more general your choice of target browsers, the fewer events are shown, because only events that are available in all of the requested browsers are shown. For example, if you select 3.0 and Later Browsers, then the only events you can choose are those that were available in all Netscape Navigator and Microsoft Internet Explorer versions from 3.0 on—a very limited list of events.


About events

Each browser provides a set of events that you can associate with the actions listed in the Behaviors panel’s Actions (+) pop-up menu. When a visitor to your web page interacts with the page—for example, by clicking an image—the browser generates events; those events can be used to call JavaScript functions that cause an action to occur. (Events can also be generated without user interaction, such as when you set a page to automatically reload every 10 seconds.) Dreamweaver supplies many common actions that you can trigger using these events.

For names and descriptions of the events provided by each browser, see the Dreamweaver Support Center.

Note that most events can be used only with certain page elements. To find out what events a given browser supports for a given page element, insert the page element in your document and attach a behavior to it, then look at the Events pop-up menu in the Behaviors panel. For a detailed advanced look at precisely which tags can be used with a given event in a given browser, search for the event in one of the files in your Dreamweaver/Configuration/Behaviors/Events folder.


Applying a behavior

You can attach behaviors to the entire document (that is, to the body tag) or to links, images, form elements, or any of several other HTML elements. The target browser you choose determines which events are supported for a given element. Internet Explorer 4.0, for example, has a much wider array of events for each element than Navigator 4.0 or any 3.0 browser.

Note: You can’t attach a behavior to plain text. For more information, see About behaviors and text.

You can specify more than one action for each event. Actions occur in the order in which they’re listed in the Actions column of the Behaviors panel. For information on changing the order of actions, see Changing a behavior.

To attach a behavior:
  1. Select an element on the page, such as an image or a link.

    2. To attach a behavior to the entire page, click the <body> tag in the tag selector at the bottom left of the Document window.

  2. Choose Window > Behaviors to open the Behaviors panel.
  3. Click the plus (+) button and choose an action from the Actions pop-up menu.

    4. Actions that are dimmed in the menu can’t be chosen. They may be dimmed because a required object doesn’t exist in the current document. For example, the Play Timeline action is dimmed if the document has no timelines, and the Control Shockwave or Flash action is dimmed if the document contains no Shockwave or Flash movies. If no events are available for the selected object, all actions are dimmed.

    When you choose an action, a dialog box appears, displaying parameters and instructions for the action.

  4. Enter parameters for the action, and click OK.

    5. All actions provided in Dreamweaver work in 4.0 and later browsers. Some actions do not work in older browsers. See Using the behavior actions that come with Dreamweaver.

  5. The default event to trigger the action appears in the Events column. If this is not the trigger event you want, choose another event from the Events pop-up menu. (To open the Events pop-up menu, select an event or action in the Behaviors panel, and click the downward-pointing black arrow that appears between the event name and the action name.)

    6. Different events appear in the Events pop-up menu depending on the selected object and on the browsers specified in the Show Events For submenu. Events may be dimmed if the relevant objects do not yet exist on the page or if the selected object cannot receive events. If the expected events don’t appear, make sure the correct object is selected, or change the target browsers in the Show Events For pop-up menu.

    If you’re attaching a behavior to an image, some events (such as onMouseOver) appear in parentheses. These events are available only for links. When you choose one of them, Dreamweaver wraps an a tag around the image to define a null link. The null link is represented by javascript:; in the Property inspector’s Link text box. You can change the link value if you want to turn it into a real link to another page, but if you delete the JavaScript link without replacing it with another link, you will remove the behavior.


About behaviors and text

You can’t attach a behavior to plain text. Tags like p and span don’t generate events in browsers, so there’s no way to trigger an action from those tags.

However, you can attach a behavior to a link. Therefore, to attach a behavior to text, the easiest approach is to add a null link (that doesn’t point to anything) to the text, then attach the behavior to the link. Note that if you do this, your text will appear as a link. You can change the link color and remove the underlining if you really don’t want it to look like a link, though site visitors may then be unaware that there’s a reason to click that text.

To attach a behavior to the selected text:
  1. In the Property inspector, enter javascript:; in the Link field. Be certain to include both the colon and the semicolon.

    2. Note: You can instead use a number sign (#) in the Link field if you want. The problem with using a number sign is that when a visitor clicks the link, some browsers may jump to the top of the page. Clicking the JavaScript null link has no effect at all on the page, so the JavaScript approach is generally preferable.

  2. With the text still selected, open the Behaviors panel (Window > Behaviors).
  3. Choose an action from the Actions pop-up menu, enter parameters for the action, and choose an event to trigger the action. For details, see Applying a behavior.
To change the appearance of linked text to make it look like it isn’t a link:
  1. Open the Document window’s Code view by choosing View > Code.
  2. Find the link.
  3. In the link’s a href tag, insert this attribute: style="text-decoration:none; color:black".

    4. This attribute setting disables underlining and sets the color of the text to black. (Of course, if the surrounding text is a different color, use that color instead of black.)

    Note that this attribute is an inline CSS style. An inline style applied to a single link overrides other CSS styles that apply to that link, but has no effect outside of that link. To change the appearance of linked text everywhere on a page or across your entire site, use CSS styles to create a new style for links. For details, see Inserting and Formatting Text.


Attaching a behavior to a timeline

To trigger a behavior at a certain frame in a timeline (rather than having a visitor’s interaction trigger it), place the behavior in the timeline. (For information on creating a timeline, see Animating your layers.) For example, you can start a sound playing at frame 15 of a timeline.

Only one kind of event can trigger an action in a timeline: the animation reaching a certain frame number (an onFrame7 event, for example).

The behavior can affect any object on the page, not just objects in the timeline. Preview the timeline in a browser to see the behavior working. You cannot preview behaviors inside Dreamweaver.

To place a behavior in a timeline:
  1. Click in a frame in the Behaviors channel in the Timelines panel.
  2. Use the Behaviors panel to choose an action to perform at that frame.

    3. The action appears in the Behaviors panel, with an event indicating the frame number at which the action is triggered. A minus sign (–) appears in the Behaviors channel of the timeline frame.


Changing a behavior

After attaching a behavior, you can change the event that triggers the action, add or remove actions, and change parameters for actions.

To change a behavior:
  1. Select an object with a behavior attached.
  2. Choose Window > Behaviors to open the Behaviors panel.

    3. Behaviors appear in the panel alphabetically by event. If there are several actions for the same event, the actions appear in the order in which they will execute.

  3. Choose from the following options:
    • To edit an action’s parameters, double-click the behavior name, or select it and press Enter (Windows) or Return (Macintosh); then change parameters in the dialog box and click OK.
    • To change the order of actions for a given event, select an action and click the up or down arrow button.
    • To delete a behavior, select it and click the minus (–) button or press Delete.


Updating a behavior

If your pages contain behaviors created with Dreamweaver 1 or Dreamweaver 2, those behaviors are not updated automatically when you open the pages in the current version of Dreamweaver. However, when you update one occurrence of a behavior in a page (by following the procedure below), all other occurrences of that behavior in that page are also updated. Behaviors created in Dreamweaver 3 work without modification in Dreamweaver 4.

To update a behavior in a page:
  1. Select an element that has the behavior attached to it.
  2. Open the Behaviors panel.
  3. Double-click the behavior.
  4. Click OK in the behavior’s dialog box.

All occurrences of that behavior in that page are updated.


Creating new actions

Actions consist of JavaScript and HTML code. If you are proficient with JavaScript, you can write new actions and add them to the Actions pop-up menu in the Behaviors panel. For more information, see Extending Dreamweaver.


Downloading and installing third-party behaviors

One of the most useful features of Dreamweaver is its extensibility—that is, it offers users who are proficient in JavaScript the opportunity to write JavaScript code that extends the capabilities of Dreamweaver. Many of these users have chosen to share their extensions with others by submitting them to the Macromedia Exchange for Dreamweaver website.

To download and install new behaviors from the Exchange site:
  1. Open the Behaviors panel and choose Get More Behaviors from the Actions (+) pop-up menu.

    2. Your primary browser opens, and the Exchange site appears. (You must be connected to the web to download behaviors.)

  2. Browse or search for packages.
  3. Download and install the extension package you want.

    4. For details, see Adding extensions to Dreamweaver.


Using the behavior actions that come with Dreamweaver

The behavior actions included with Dreamweaver have been written to work in Netscape Navigator 4.0 and later, and in Internet Explorer 4.0 and later. Most of these behavior actions also work in Netscape Navigator version 3.0 and later. (The layer-related behaviors do not work in Navigator 3.0.) Most of these behavior actions fail silently in Internet Explorer version 3.0.

Note: The Dreamweaver actions have been carefully written to work in as many browsers as possible. If you remove code from a Dreamweaver action by hand, or replace it with your own code, you may lose cross-browser compatibility.

Although the Dreamweaver actions were written to maximize cross-browser compatibility, some actions do not work in older browsers. Also, some browsers do not support JavaScript at all, and many people who browse the web keep JavaScript turned off in their browsers. For best cross-platform results, provide alternative interfaces enclosed in noscript tags so that people without JavaScript can still use your site.


Call JavaScript

The Call JavaScript action lets you use the Behaviors panel to specify that a custom function or line of JavaScript code should be executed when an event occurs. (You can write the JavaScript yourself, or you can use code provided by various freely available JavaScript libraries on the web.)

To use the Call JavaScript action:
  1. Select an object and open the Behaviors panel.
  2. Click the plus (+) button and choose Call JavaScript from the Actions pop-up menu.
  3. Type the exact JavaScript to be executed, or type the name of a function.

    4. For example, to create a Back button, you might type if (history.length > 0){history.back()}. If you have encapsulated your code in a function, type only the function name (for example, hogback()).

  4. Click OK.
  5. Check that the default event is the one you want.

    6. If it isn’t, choose another event from the pop-up menu. If the events you want are not listed, change the target browser in the Show Events For pop-up menu.


Change Property

Use the Change Property action to change the value of one of an object’s properties (for example, the background color of a layer or the action of a form). The properties you can affect are determined by the browser; many more properties can be changed by this behavior in Internet Explorer 4.0 than in IE 3.0 or Navigator 3.0 or 4.0. For example, you can set the background color of a layer dynamically.

Note: Use this action only if you are very familiar with HTML and JavaScript.

To use the Change Property action:
  1. Select an object and open the Behaviors panel.
  2. Click the plus (+) button and choose Change Property from the Actions pop-up menu.
  3. From the Type of Object pop-up menu, choose the type of object whose property you want to change.

    4. The Named Object pop-up menu now lists all the named objects of the type you chose.

  4. Choose an object from the Named Object pop-up menu.
  5. Choose a property from the Property pop-up menu, or enter the name of the property in the text field.

    6. To see the properties that can be changed in each browser, choose different browsers or browser versions from the browser pop-up menu. If you are typing a property name, be sure to use the exact JavaScript name of the property (and remember that JavaScript properties are case-sensitive).

  6. Enter the new value for the property in the New Value field, and click OK.
  7. Check that the default event is the one you want. (When the event occurs, the action will execute and the property will change.)

    8. If it isn’t, choose another event from the pop-up menu. If the events you want are not listed, change the target browser in the Show Events For pop-up menu.


Check Browser

Use the Check Browser action to send visitors to different pages depending on their browser brands and versions. For example, you might want visitors to go to one page if they have Navigator 4.0 or later, to go to another page if they have Internet Explorer 4.0 or later, and to stay on the current page if they have any other kind of browser.

It’s useful to attach this behavior to the body tag of a page that is compatible with practically any browser (and that does not use any other JavaScript); this way, visitors who come to the page with JavaScript turned off will still see something.

Another option is to attach this behavior to a null link (such as <a href="javascript:;">) and have the action determine the link’s destination based on the visitor’s browser brand and version.

To use the Check Browser action:
  1. Select an object and open the Behaviors panel.
  2. Click the plus (+) button and choose Check Browser from the Actions pop-up menu.
  3. Determine how you want to separate your visitors: by browser brand, by browser version, or both.

    4. For example, do you want everyone with a 4.0 browser to see one page, and all others to see a different page? Or perhaps you want Netscape Navigator users to see one page and Internet Explorer users to see another.

  4. Specify a version of Netscape Navigator.
  5. In the adjacent pop-up menus, choose options for what to do if the browser is the Netscape Navigator version you specified or later and what to do otherwise.

    6. The options are Go to URL, Go to Alt URL, and Stay on This Page.

  6. Specify a version of Internet Explorer.
  7. In the adjacent pop-up menus, choose options for what to do if the browser is the Internet Explorer version you specified or later and what to do otherwise.

    8. The options are Go to URL, Go to Alt URL, and Stay on This Page.

  8. Choose an option from the Other Browsers pop-up menu to specify what to do if the browser is neither Navigator nor Internet Explorer. (For example, the visitor may be using a text-based browser like Lynx.)

    9. Stay on This Page is the best option for browsers other than Navigator and IE because most do not support JavaScript—and if they cannot read this behavior, they will stay on the page anyway.

  9. Enter the paths and filenames of the URL and the alternate URL in the text fields at the bottom of the dialog box. If you enter a remote URL, you must enter the http:// prefix in addition to the www address.
  10. Click OK.
  11. Check that the default event is the one you want.

    12. If it isn’t, choose another event from the pop-up menu. If the events you want are not listed, change the target browser in the Show Events For pop-up menu. Remember that the purpose of this behavior is to check for different browser versions, so it’s best to choose an event that works on 3.0 and later browsers.


Check Plugin

Use the Check Plugin action to send visitors to different pages depending on whether they have the specified plug-in installed. For example, you might want visitors to go to one page if they have Shockwave and another page if they do not.

Note: You cannot detect specific plug-ins in Internet Explorer using JavaScript. However, selecting Flash or Director will add the appropriate VBScript code to your page to detect those plug-ins in IE on Windows. Plug-in detection is impossible in Internet Explorer on the Macintosh.

To use the Check Plugin action:
  1. Select an object and open the Behaviors panel.
  2. Click the plus (+) button and choose Check Plugin from the Actions pop-up menu.
  3. Choose a plug-in from the Plugin pop-up menu, or click Enter and type the exact name of the plug-in in the adjacent field.

    4. You must use the exact name of the plug-in as specified in bold on the About Plug-ins page in Navigator. (In Windows, choose Navigator’s Help > About Plug-ins command; on the Macintosh, choose About Plug-ins from the Apple menu.)

  4. In the If Found, Go To URL field, specify a URL for visitors who have the plug-in.

    5. If you specify a remote URL, you must include the http:// prefix in the address.

    To make visitors with the plug-in stay on the same page, leave this field blank.

  5. In the Otherwise, Go To URL field, specify an alternative URL for visitors who don’t have the plug-in.

    6. To make visitors without the plug-in stay on the same page, leave this field blank.

  6. Plug-in detection is not possible in Internet Explorer on the Macintosh, and most plug-ins cannot be detected in Internet Explorer on Windows. By default, when detection is impossible, the visitor is sent to the URL listed in the Otherwise field. To instead send the visitor to the first (If Found) URL, select the Always go to first URL if detection is not possible option. When selected, this option effectively means “assume that the visitor has the plug-in, unless the browser explicitly indicates that the plug-in is not present.”

    7. In general, if the plug-in content is integral to your page, select the “Always go to first URL if detection is not possible” option; visitors without the plug-in will often be prompted by the browser to download the plug-in. If the plug-in content is not essential to your page, leave this option unselected.

    This option applies only to Internet Explorer; Navigator can always detect plug-ins.

  7. Click OK.
  8. Check that the default event is the one you want.

    9. If it isn’t, choose another event from the pop-up menu. If the events you want are not listed, change the target browser in the Show Events For pop-up menu.


Control Shockwave or Flash

Use the Control Shockwave or Flash action to play, stop, rewind, or go to a frame in a Macromedia Shockwave or Macromedia Flash movie.

To use the Control Shockwave or Flash action:
  1. Choose Insert > Media > Shockwave or Insert > Media > Flash to insert a Shockwave or Flash movie, respectively.
  2. Choose Window > Properties and enter a name for the movie in the upper leftmost field (next to the Shockwave or Flash icon). You must name the movie to control it with the Control Shockwave or Flash action.
  3. Select the item you want to use to control the Shockwave or Flash movie. For example, if you have an image of a “Play” button that will be used to make the movie play, select that image.
  4. Open the Behaviors panel (Window > Behaviors).
  5. Click the plus (+) button and choose Control Shockwave or Flash from the Actions pop-up menu.

    6. A parameters dialog box appears.

  6. Choose a movie from the Movie pop-up menu.

    7. Dreamweaver automatically lists the names of all Shockwave and Flash movies in the current document. (Specifically, Dreamweaver lists movies with filenames ending in .dcr, .dir, .swf, or .spl that are in object or embed tags.)

  7. Choose to play, stop, rewind, or go to a frame in the movie. The Play option plays the movie starting from the frame where the action occurs.
  8. Click OK.
  9. Check that the default event is the one you want.

    10. If it isn’t, choose another event from the pop-up menu. If the events you want are not listed, change the target browser in the Show Events For submenu of the Events pop-up menu.


Drag Layer

The Drag Layer action lets the visitor drag a layer. Use this action to create puzzles, slider controls, and other movable interface elements.

You can specify in which direction the visitor can drag the layer (horizontally, vertically, or in any direction), a target to which the visitor should drag the layer, whether to snap the layer to the target if the layer is within a certain number of pixels of the target, what to do when the layer hits the target, and more.

Because the Drag Layer action must be called before the layer can be dragged by the visitor, make sure the event that triggers the action occurs before the visitor attempts to drag the layer. It’s best to attach Drag Layer to the body object (with the onLoad event), though you can also attach it to a link that fills the entire layer (such as a link around an image) using the onMouseOver event.

To use the Drag Layer action:
  1. Choose Insert > Layer or click the Draw Layer button on the Insert bar and draw a layer in the Document window’s Design view.
  2. Select the body tag by clicking <body> in the tag selector at the bottom of the Document window.
  3. Open the Behaviors panel.
  4. Click the plus (+) button and choose Drag Layer from the Actions pop-up menu.

    5. If Drag Layer is unavailable, you probably have a layer selected. Because layers do not accept events in both 4.0 browsers, you must select a different object—such as the body tag or a link (a tag)—or change the target browser to IE 4.0 in the Show Events For pop-up menu.

  5. In the Layer pop-up menu, select the layer that you want to make draggable.
  6. Choose either Constrained or Unconstrained from the Movement pop-up menu.

    7. Unconstrained movement is appropriate for puzzles and other drag-and-drop games. For slider controls and moveable scenery such as file drawers, curtains, and mini-blinds, choose constrained movement.

  7. For constrained movement, enter values (in pixels) in the Up, Down, Left, and Right fields.

    8. Values are relative to the starting position of the layer. To constrain movement within a rectangular region, enter positive values in all four fields. To allow only vertical movement, enter positive values for Up and Down and 0 for Left and Right. To allow only horizontal movement, enter positive values for Left and Right and 0 for Up and Down.

  8. Enter values (in pixels) for the drop target in the Left and Top fields.

    9. The drop target is the spot to which you want the visitor to drag the layer. A layer is considered to have reached the drop target when its left and top coordinates match the values you enter in the Left and Top fields. Values are relative to the top left corner of the browser window. Click Get Current Position to automatically fill the fields with the current position of the layer.

  9. Enter a value (in pixels) in the Snap if Within field to determine how close the visitor must get to the drop target before the layer snaps to the target.

    10. Larger values make it easier for the visitor to find the drop target.

  10. For simple puzzles and scenery manipulation, you can stop here. To define the drag handle for the layer, track the movement of the layer while it is being dragged, and trigger an action when the layer is dropped, click the Advanced tab.
  11. To specify that the visitor must click a particular area of the layer to drag the layer, choose Area Within Layer from the Drag Handle pop-up menu; then enter the left and top coordinates and the width and height of the drag handle.

    12. This option is useful when the image inside the layer has an element that suggests dragging, such as a title bar or drawer handle. Do not set this option if you want the visitor to be able to click anywhere in the layer to drag it.

  12. Choose any While Dragging options that you want to use:
    • Select Bring Layer to Front if the layer should move to the front of the stacking order while it is being dragged. If you select this option, use the pop-up menu to choose whether to leave the layer in front or restore it to its original position in the stacking order.
    • Enter JavaScript code or a function name (for example, monitorLayer()) in the Call JavaScript field to repeatedly execute the code or function while the layer is being dragged. For example, you could write a function that monitors the coordinates of the layer and displays hints such as “you’re getting warmer” or “you’re nowhere near the drop target” in a text field. See Gathering information about the draggable layer.
  13. Enter JavaScript code or a function name (for example, evaluateLayerPos()) in the second Call JavaScript field to execute the code or function when the layer is dropped. Select Only if Snapped if the JavaScript should be executed only if the layer has reached the drop target.
  14. Click OK.
  15. Check that the default event is the one you want.

    16. If it isn’t, choose another event from the pop-up menu. If the events you want are not listed, change the target browser in the Show Events For pop-up menu. Remember that layers are not supported by 3.0 browsers.

Note: You cannot attach the Drag Layer action to an object with the onMouseDown or onClick events.


Gathering information about the draggable layer

When you attach the Drag Layer action to an object, Dreamweaver inserts the MM_dragLayer() function into the head section of your document. In addition to registering the layer as draggable, this function defines three properties for each draggable layer—MM_LEFTRIGHT, MM_UPDOWN, and MM_SNAPPED—that you can use in your own JavaScript functions to determine the relative horizontal position of the layer, the relative vertical position of the layer, and whether the layer has reached the drop target.

Note: The information provided here is intended for the use of experienced JavaScript programmers only.

For example, the following function displays the value of the MM_UPDOWN property (the current vertical position of the layer) in a form field called curPosField. (Form fields are useful for displaying continuously updated information because they are dynamic—that is, you can change their contents after the page has finished loading—in both Navigator and Internet Explorer.)

function getPos(layername){
   var layerRef = MM_findObj(layername);
   var curVertPos = layerRef.MM_UPDOWN;
   document.tracking.curPosField.value = curVertPos;
}

Instead of displaying the value of MM_UPDOWN or MM_LEFTRIGHT in a form field, you could write a function that displays a message in the form field depending on how close the value is to the drop zone, or you could call another function to show or hide a layer depending on the value. How you react to the value of MM_UPDOWN or MM_LEFTRIGHT is limited only by your imagination and your JavaScript skills.

It is especially useful to read the MM_SNAPPED property when you have several layers on the page, all of which must reach their targets before the visitor can advance to the next page or task. For example, you could write a function to count how many layers have an MM_SNAPPED value of true and call it whenever a layer is dropped. When the snapped count reaches the desired number, you could send the visitor to the next page or display a message of congratulations.

If you have used the onMouseOver event to attach the Drag Layer action to links within several layers, you must make a minor change to the MM_dragLayer() function to prevent the MM_SNAPPED property of a snapped layer from being reset to false if the mouse pointer rolls over the layer. (This can happen if you have used Drag Layer to create a picture puzzle, because the visitor is likely to roll the mouse pointer over snapped pieces while positioning others.) The MM_dragLayer() function does not prevent this behavior, because it is sometimes desirable—for example, if you want to set multiple drop targets for a single layer.

To prevent re-registration of snapped layers:
  1. Make a backup copy of your document before making any changes to the code. (You can do this in the Site panel in Dreamweaver, or in Windows Explorer (Windows) or the Finder (Macintosh).)
  2. Choose Edit > Find.
  3. Choose HTML Source from the Find What pop-up menu.
  4. Type (!curDrag) in the adjacent text field.
  5. Click Find Next.

    6. If Dreamweaver asks if you want to continue searching from the beginning of the document, click Yes. Dreamweaver finds a statement that reads:

    if (!curDrag) return false;
  6. Close the Find dialog box and then modify the statement in the Document window’s Code view or in the Code inspector so that it reads:
    7. if (!curDrag || curDrag.MM_SNAPPED != null) return false;

The two pipes (||) mean “or,” and curDrag is a variable that represents the layer that is being registered as draggable. In English the statement means “If curDrag is not an object, or if it already has an MM_SNAPPED value, don’t bother executing the rest of the function.”


Go to URL

The Go to URL action opens a new page in the current window or in the specified frame. This action is particularly useful for changing the contents of two or more frames with one click. It can also be called in a timeline to jump to a new page after a specified time interval.

To use the Go To URL action:
  1. Select an object and open the Behaviors panel.
  2. Click the plus (+) button and choose Go to URL from the Actions pop-up menu.
  3. Choose a destination for the URL from the Open In list.

    4. The Open In list automatically lists the names of all frames in the current frameset as well as the main window. If there are no frames, the main window is the only option.

    Note: This action may produce unexpected results if any frame is named top, blank, self, or parent. Browsers sometimes mistake these names for reserved target names.

  4. Click Browse to select a document to open, or enter the path and filename of the document in the URL field.
  5. Repeat steps 3 and 4 to open additional documents in other frames.
  6. Click OK.
  7. Check that the default event is the one you want.

If it isn’t, choose another event from the pop-up menu. If the events you want are not listed, change the target browser in the Show Events For pop-up menu.


Jump Menu

When you create a jump menu by using Insert > Form Objects > Jump Menu, Dreamweaver creates a menu object and attaches the Jump Menu (or Jump Menu Go) behavior to it. There is usually no need to attach the Jump Menu action to an object by hand. For information about jump menus and how to create them, see Inserting a jump menu.

You can edit an existing jump menu in either of two ways:

  • You can edit and rearrange menu items, change the files to jump to, and change the window in which those files open, by double-clicking an existing Jump Menu action in the Behaviors panel.
  • You can edit the items in the menu just as you would edit items in any menu, by selecting the menu and using the List Values button in the Property inspector. See Creating pop-up menus for details.
To edit a jump menu using the Behaviors panel:
  1. Create a jump menu object if there isn’t one already in your document.
  2. Select the jump menu object and open the Behaviors panel.
  3. Double-click Jump Menu in the Actions column.
  4. Make changes as desired in the Jump Menu dialog box, then click OK.


Jump Menu Go

The Jump Menu Go action is closely associated with the Jump Menu action; Jump Menu Go lets you associate a Go button with a jump menu. (Before you use this action, a jump menu must already exist in the document.) Clicking the Go button opens the link that’s selected in the jump menu. A jump menu doesn’t normally need a Go button; choosing an item from a jump menu generally causes a URL to load without any need for further user action. But if the visitor chooses the same item that’s already chosen in the jump menu, the jump doesn’t occur. In general, that doesn’t matter, but if the jump menu appears in a frame, and the jump menu items link to pages in other frames, a Go button is often useful, to allow visitors to re-choose an item that’s already selected in the jump menu.

To add a Jump Menu Go action:
  1. Select an object to use as the Go button (generally a button image), and open the Behaviors panel.
  2. Click the plus (+) button and choose Jump Menu Go from the Actions pop-up menu.
  3. In the Choose Jump Menu pop-up menu, choose a menu for the Go button to activate.
  4. Click OK.


Open Browser Window

Use the Open Browser Window action to open a URL in a new window. You can specify the properties of the new window, including its size, attributes (whether it is resizable, has a menu bar, and so on), and name. For example, you can use this behavior to open a larger image in a separate window when the visitor clicks a thumbnail image; with this behavior, you can make the new window the exact size of the image.

If you specify no attributes for the window, it opens at the size and with the attributes of the window that launched it. Specifying any attribute for the window automatically turns off all other attributes that are not explicitly turned on. For example, if you set no attributes for the window, it might open at 640 x 480 pixels and have a navigation bar, location toolbar, status bar, and menu bar. If you explicitly set the width to 640 and the height to 480 and set no other attributes, the window opens at 640 x 480 pixels and has no navigation bar, no location toolbar, no status bar, no menu bar, no resize handles, and no scroll bars.

To use the Open Browser Window action:
  1. Select an object and open the Behaviors panel.
  2. Click the plus (+) button and choose Open Browser Window from the Actions pop-up menu.
  3. Click Browse to select a file, or enter the URL you want to display.
  4. Set any of the following options:

    5. Window Width specifies the width of the window in pixels.

    Window Height specifies the height of the window in pixels.

    Navigation Toolbar is the row of browser buttons that includes Back, Forward, Home, and Reload.

    Location Toolbar is the row of browser options that includes the location field.

    Status Bar is the area at the bottom of the browser window in which messages (such as the load time remaining and the URLs associated with links) appear.

    Menu Bar is the area of the browser window (Windows) or the desktop (Macintosh) where menus such as File, Edit, View, Go, and Help appear. You should explicitly set this option if you want visitors to be able to navigate from the new window. If you do not set this option, the user can only close or minimize the window (Windows) or close the window or quit the application (Macintosh) from the new window.

    Scrollbars as Needed specifies that scroll bars should appear if the content extends beyond the visible area. If you do not explicitly set this option, scroll bars do not appear. If the Resize Handles option is also turned off, visitors have no easy way of seeing content that extends beyond the original size of the window. (Though they may be able to make the window scroll by dragging off the edge of the window.)

    Resize Handles specifies that the user should be able to resize the window, either by dragging the lower right corner of the window or by clicking the maximize button (Windows) or size box (Macintosh) in the upper right corner. If this option is not explicitly set, the resize controls are unavailable and the lower right corner is not draggable.

    Window Name is the name of the new window. You should name the new window if you want to target it with links or control it with JavaScript. This name cannot contain spaces or special characters.

  5. Click OK.
  6. Check that the default event is the one you want.

    7. If it isn’t, choose another event from the pop-up menu. If the events you want are not listed, change the target browser in the Show Events For pop-up menu.


Play Sound

Use the Play Sound action to play a sound. For example, you might want to play a sound effect whenever the mouse pointer rolls over a link, or you might want to play a music clip when the page loads.

Note: Browsers may require some kind of additional audio support (such as an audio plug-in) to play sounds. Therefore, different browsers with different plug-ins often play sounds differently. It’s difficult to reliably predict how visitors to your site will experience the sounds you provide.

To use the Play Sound action:
  1. Select an object and open the Behaviors panel.
  2. Click the plus (+) button and choose Play Sound from the Actions pop-up menu.
  3. Click Browse to select a sound file, or enter the path and filename in the Play Sound field.
  4. Click OK.
  5. Check that the default event is the one you want.

    6. If it isn’t, choose another event from the pop-up menu. If the events you want are not listed, change the target browser in the Show Events For pop-up menu.


Popup Message

The Popup Message action displays a JavaScript alert with the message you specify. Because JavaScript alerts have only one button (OK), use this action to provide information rather than to present the user with a choice.

You can embed any valid JavaScript function call, property, global variable, or other expression in the text. To embed a JavaScript expression, place it inside braces ({}). To display a brace, precede it with a backslash (\{).

Example

The URL for this page is {window.location}, and today is {new Date()}.

Note: You can’t control how the JavaScript alert looks; that’s determined by the visitor’s browser. If you want more control over the appearance of your message, consider using the Open Browser Window behavior. For details, see Open Browser Window.

To use the Popup Message action:
  1. Select an object and open the Behaviors panel.
  2. Click the plus (+) button and choose Popup Message from the Actions pop-up menu.
  3. Enter your message in the Message field.
  4. Click OK.
  5. Check that the default event is the one you want.

    6. If it isn’t, choose another event from the pop-up menu. If the events you want are not listed, change the target browser in the Show Events For pop-up menu.


Preload Images

The Preload Images action loads images that do not appear on the page right away (such as those that will be swapped in with timelines, behaviors, or JavaScript) into the browser cache. This prevents delays caused by downloading when it is time for the images to appear.

Note: The Swap Image action automatically preloads all highlight images when you select the Preload Images option in the Swap Image dialog box, so you do not need to manually add Preload Images when using Swap Image.

To use the Preload Images action:
  1. Select an object and open the Behaviors panel.
  2. Click the plus (+) button and choose Preload Images from the Actions pop-up menu.
  3. Click Browse to select an image file to preload, or enter the path and filename of an image in the Image Source File field.
  4. Click the plus (+) button at the top of the dialog box to add the image to the Preload Images list.

    5. Note: If you do not click the plus button before entering the next image, the image you have just chosen will be replaced in the list with the image you choose next.

  5. Repeat steps 3 and 4 for all remaining images that you want to preload on the current page.
  6. To remove an image from the Preload Images list, select the image in the list and click the minus (–) button.
  7. Click OK.
  8. Check that the default event is the one you want.

    9. If it isn’t, choose another event from the pop-up menu. If the events you want are not listed, change the target browser in the Show Events For pop-up menu.


Set Nav Bar Image

Use the Set Nav Bar Image action to turn an image into a navigation bar image, or to change the display and actions of images in a navigation bar. (For more information, see Inserting a navigation bar.)

Use the Basic tab of the Set Nav Bar Image dialog box to create or update a navigation bar image or set of images, to change which URL is displayed when a navigation-bar button is clicked, and to select a different window in which to display a URL.

Use the Advanced tab of the Set Nav Bar Image dialog box to change the state of other images in a document based on the current button’s state. By default, clicking an element in a navigation bar automatically causes all other elements in the navigation bar to return to their Up states; use the Advanced tab if you want to set a different state for an image when the selected image is in its Down or Over state.

To edit a Set Nav Bar Image action:
  1. Select an image in the navigation bar to edit, and open the Behaviors panel.
  2. In the Behaviors panel, in the Actions column, double-click the Set Nav Bar Image action associated with the event you’re altering.
  3. In the Basic tab of the Set Nav Bar Image dialog box, select image edit options.
To set multiple images for a navigation bar button:
  1. Select an image in the navigation bar to edit, and open the Behaviors panel.
  2. In the Behaviors panel, in the Actions column, double-click the Set Nav Bar Image action associated with the event you’re altering.
  3. Click the Advanced tab of the Set Nav Bar Image dialog box.
  4. In the When Element Is Displaying pop-up menu, choose an image state. For information about image states, see Creating navigation bars.
    • Choose Down Image if you want to change the display of another image after a user has clicked the selected image.
    • Choose Over Image or Over While Down Image if you want to change the display of another image when the pointer is over the selected image.
  5. In the Also Set Image list, select another image on the page to set.
  6. Click Browse to select the image file to display, or type the path of the image file in the To Image File field.
  7. If you selected Over Image or Over While Down Image in step 4, you have an additional option. In the If Down, To Image File text field, click Browse to select the image file, or type the path to the image file to display.


Set Text of Frame

The Set Text of Frame action allows you to dynamically set the text of a frame, replacing the content and formatting of a frame with the content you specify. The content can include any valid HTML code. Use this action to dynamically display information.

Although the Set Text of Frame action replaces the formatting of a frame, you can select Preserve Background Color to preserve the page background and text color attributes.

You can embed any valid JavaScript function call, property, global variable, or other expression in the text. To embed a JavaScript expression, place it inside braces ({}). To display a brace, precede it with a backslash (\{).

Example

The URL for this page is {window.location}, and today is {new Date()}.
To create a frameset:

Choose Modify > Frameset > Split Frame Left, Right, Up, or Down.

For more information, see Creating frames and framesets.

To use the Set Text of Frame action:
  1. Select an object and open the Behaviors panel.
  2. Click the plus (+) button and choose Set Text > Set Text of Frame from the Actions pop-up menu.
  3. In the Set Text of Frame dialog box, choose the target frame from the Frame pop-up menu.
  4. Click the Get Current HTML button to copy the current contents of the target frame’s body section.
  5. Enter a message in the New HTML field, then click OK.
  6. Check that the default event is the one you want. If it isn’t, choose another event from the pop-up menu.

    7. If you don’t see the events you want, change the target browser in the Show Events For pop-up menu.


Set Text of Layer

The Set Text of Layer action replaces the content and formatting of an existing layer on a page with the content you specify. The content can include any valid HTML source code.

Set Text of Layer replaces the content and formatting of the layer, but retains layer attributes, including color. Format the content by including HTML tags in the New HTML field of the Set Text of Layer dialog box.

You can embed any valid JavaScript function call, property, global variable, or other expression in the text. To embed a JavaScript expression, place it inside braces ({}). To display a brace, precede it with a backslash (\{).

Example

The URL for this page is {window.location}, and today is {new Date()}.
To create a layer:
  1. Choose Insert > Layer.

    2. For more information, see Creating layers on your page.

  2. In the Property inspector, type a name for the layer.
To attach a Set Text of Layer action:
  1. Select an object and open the Behaviors panel.
  2. Click the plus (+) button and choose Set Text > Set Text of Layer from the Actions pop-up menu.
  3. In the Set Text of Layer dialog box, use the Layer pop-up menu to choose the target layer.
  4. Enter a message in the New HTML field, then click OK.
  5. Check that the default event is the one you want. If it isn’t, choose another event from the pop-up menu.

    6. If you don’t see the events you want, change the target browser in the Show Events For pop-up menu.


Set Text of Status Bar

The Set Text of Status Bar action shows a message in the status bar at the bottom left of the browser window. For example, you can use this action to describe the destination of a link in the status bar instead of showing the URL associated with it. To see an example of a status message, roll your mouse over any of the navigation buttons in Dreamweaver Help. Note, however, that visitors often ignore or overlook messages in the status bar (and not all browsers provide full support for setting the text of the status bar); if your message is important, consider displaying it as a pop-up message or as the text of a layer.

You can embed any valid JavaScript function call, property, global variable, or other expression in the text. To embed a JavaScript expression, place it inside braces ({}). To display a brace, precede it with a backslash (\{).

Example

The URL for this page is {window.location}, and today is {new Date()}.
To use the Set Text of Status Bar action:
  1. Select an object and open the Behaviors panel.
  2. Click the plus (+) button and choose Set Text > Set Text of Status Bar from the Actions pop-up menu.
  3. In the Set Text of Status Bar dialog box, type your message in the Message field.

    4. Keep the message concise. The browser truncates the message if it doesn’t fit in the status bar.

  4. Click OK.
  5. Check that the default event is the one you want.

    6. If it isn’t, choose another event from the pop-up menu. If the events you want are not listed, change the target browser in the Show Events For pop-up menu.


Set Text of Text Field

The Set Text of Text Field action replaces the content of a form’s text field with the content you specify.

You can embed any valid JavaScript function call, property, global variable, or other expression in the text. To embed a JavaScript expression, place it inside braces ({}). To display a brace, precede it with a backslash (\{).

Example

The URL for this page is {window.location}, and today is {new Date()}.
To create a named text field:
  1. Choose Insert > Form Objects > Text Field.

    2. If Dreamweaver prompts you to add a form tag, click Yes. For more information, see Creating Interactive Forms.

  2. In the Property inspector, type a name for the text field. Make sure the name is unique on the page (don’t use the same name for multiple elements on the same page, even if they’re in different forms).
To use the Set Text of Text Field action:
  1. Select a text field and open the Behaviors panel.
  2. Click the plus (+) button and choose Set Text > Set Text of Text Field from the Actions pop-up menu.
  3. In the Set Text of Text Field dialog box, choose the target text field from the Text Field pop-up menu.
  4. Enter text in the New Text field, then click OK.
  5. Check that the default event is the one you want. If it isn’t, choose another event from the pop-up menu.

    6. If you don’t see the events you want, change the target browser in the Show Events For pop-up menu.


Show-Hide Layers

The Show-Hide Layers action shows, hides, or restores the default visibility of one or more layers. This action is useful for showing information as the user interacts with the page. For example, as the user rolls the mouse pointer over an image of a plant, you could show a layer that gives details about the plant’s growing season and region, how much sun it needs, how large it can grow, and so on.

Show-Hide Layers is also useful for creating a preload layer—that is, a large layer that obscures the contents of the page at first and then disappears when all the page components have finished loading.

To use the Show-Hide Layers action:
  1. Choose Insert > Layer or click the Layer button in the Insert bar, and draw a layer in the Document window.

    2. Repeat this step to create additional layers.

  2. Click in the Document window to deselect the layer, then open the Behavior panel.
  3. Click the plus (+) button and choose Show-Hide Layers from the Actions pop-up menu.

    4. If Show-Hide Layers is unavailable, you probably have a layer selected. Because layers do not accept events in both 4.0 browsers, you must select a different object—such as the body tag or a link (a tag)—or change the target browser to IE 4.0 in the Show Events For pop-up menu.

  4. From the Named Layers list, select the layer whose visibility you want to change.
  5. Click Show to show the layer, Hide to hide the layer, or Default to restore the layer’s default visibility.
  6. Repeat steps 4 and 5 for all remaining layers whose visibility you want to change at this time. (You can change the visibility of multiple layers with a single behavior.)
  7. Click OK.
  8. Check that the default event is the one you want.

    9. If it isn’t, choose another event from the pop-up menu. If the events you want are not listed, change the target browser in the Show Events For pop-up menu.

When viewed in a Netscape Navigator browser window, layers may shrink to fit the content. To keep this from happening, add text or images to layers, or set layer clip values.

To create a preload layer:
  1. Click the Draw Layer button in the Common category of the Insert bar and draw a large layer in the Document window’s Design view.

    2. Be sure the layer covers all the content on the page.

  2. In the Layers panel, drag the layer name to the top of the list of layers to specify that the layer should be at the front of the stacking order.
  3. Select the layer if it’s not selected, and name it loading, using the leftmost field in the layer Property inspector.
  4. With the layer still selected, set the background color of the layer to the same color as the page background in the Property inspector.
    This is a picture of the feature being described.
  5. Click inside the layer (which should now be obscuring the rest of the page contents) and type a message, if desired.

    6. For example, “Please wait while the page loads” or “Loading...” are messages that tell visitors what is happening so that they know the page contains content.

  6. Click the <body> tag in the tag selector in the bottom left corner of the Document window.
  7. In the Behaviors panel, choose Show-Hide Layers from the Actions pop-up menu.
  8. Select the layer called loading from the Named Layers list.
  9. Click Hide.
  10. Click OK.
  11. Make sure that the event listed next to the Show-Hide Layers action in the behaviors list is onLoad. (If it isn’t, select the event and click the downward-pointing triangle that appears between the event and the action. Choose onLoad from the list of events in the pop-up menu.)


Show Pop-Up Menu

You use the Show Pop-Up Menu behavior to create or edit a Dreamweaver pop-up menu or to open and modify a Fireworks pop-up menu you’ve inserted in a Dreamweaver document.

You set options in the Show Pop-Up Menu dialog box to create a horizontal or vertical pop-up menu. You can use this dialog box to set or modify the color, text, and position of a pop-up menu.

Note: You must use the Edit button in the Dreamweaver Property inspector to edit images in a Fireworks image-based pop-up menu. You can, however, use the Show Pop-Up Menu command to change the text in an image-based pop-up menu. For information about editing images in Fireworks MX see, Dreamweaver Integration with Other Applications.

To view a pop-up menu in a document, you must open the document in a browser window, then roll the pointer over the triggering image or link.

To use the Show Pop-up Menu action:
  1. Select an object to attach the behavior to and open the Behaviors panel (Shift+F3).
  2. Click the plus (+) button and choose Show Pop-Up Menu from the Actions pop-up menu.
  3. In the Show Pop-Up Menu dialog box that appears, use the following tabs to set options for the pop-up menu:

    4. Contents allows you to set the name, structure, URL, and target of individual menu items.

    Appearance enables you to set the appearance of the menu’s Up State and Over State and to set font choices for menu item text.

    Advanced allows you to set the properties of the menu cells. For example, you can set cell width and height, cell color and border width, text indention, and the length of delay before the menu appears after the user moves the pointer over the trigger.

    Position lets you set where the menu is positioned relative to the triggering image or link.


Adding, removing, and changing the order of pop-up menu items

You use the Contents tab in the Show Pop-up Menu dialog box to create menu items. You can also use this tab to remove existing items, or to change the order in which they appear in a menu.

To add pop-up menu items:
  1. In the Contents tab, create a pop-up menu item by doing the following:

    2. In the Text field, select the default text (New Item), then type the text you want to appear in the pop-up menu.

  2. Set additional options, as desired:

    3. If you want the menu item to open another file when clicked, in the Link field, type the file path or click the Folder icon and browse to the document you want to open.

    If you want to set a location in which the document opens, for example in a new window or in a specific frame, in the Target pop-up menu choose the desired location.

    Note: If the frame you want to target doesn’t appear on the Target pop-up menu, close the Show Pop-Up Menu dialog box, then in the Document window select and name the frame.

  3. Click the plus (+) button to add additional entries to the Show Pop-Up Menu preview list.

    4. When you finish adding menu items, click OK to accept the default settings or select another Show Pop-Up Menu tab to set additional options.

To create a submenu item:

In the Show Pop-Up Menu list, select the item you want to make into a submenu item, then do one of the following:

  • To indent an item in the menu list, click the Indent Item button.
  • To remove an indent, click the Outdent Item button.

    • Note: You cannot make the first menu item in a list a submenu item.

To change the order of an item in the menu:

In the Show Pop-Up Menu list, select the item you want to move up or down, then click the Up or Down arrow to move the item where you want it to appear.

To remove an item from the menu:
  1. In the Contents tab, select the menu entry you want to remove in the Show Pop-Up Menu list.
  2. Click the minus (-) button.


Setting the appearance of a pop-up menu

After you create the menu items, use the Show Pop-Up Menu’s Appearance tab to set the orientation, font attributes, and button state attributes for the pop-up menu.

Note: The Appearance tab’s preview pane provides an approximate rendering of the options you set in this tab.

To set the appearance of a pop-up menu:
  1. In the pop-up menu at the top of the Appearance tab, choose Vertical Menu or Horizontal Menu to set the menu’s orientation.
  2. Set the text formatting options you want:

    3. In the Font pop-up menu, select the font you want to apply to the menu items.

    Note: If the font you want to apply is not in the font list, use the Edit Font List option, to add the desired font to the font list. To ensure the menu appears as desired, you should choose a font that site visitor’s are likely to have.

    Set the font size, style attributes, and text alignment or justification options for the menu item text.

  3. In the Up State and Over States boxes, use the color picker to set the text and cell colors of the menu item buttons.
  4. When you finish setting appearance options, click OK or select another Show Pop-Up Menu tab to set additional options.


Setting advanced appearance options

Use options in the Advanced tab to specify additional attributes of the menu cells. For example, you can set the width, height, cell spacing or padding of the menu button, indent text, and set border attributes.

To set advanced formatting attributes for a pop-up menu:
  1. Click the Advanced tab, then set the options you want to apply to the menu items:

    2. Cell Width sets a specific width, in pixels, for the menu buttons. Cell width is set automatically based on the widest item; to increase the cell width, select Pixels in the pop-up menu and enter a value larger than the one that appears in the Cell Width text box.

    Cell Height sets a specific height, in pixels, for the menu buttons. To increase the cell height, select Pixels in the pop-up menu and enter a value larger than the one that appears in the Cell Height text box.

    Cell Padding specifies the number of pixels between a cell’s content and its boundaries.

    Cell Spacing specifies the number of pixels between adjacent cells.

    Text Indent allows you to specify, in pixels, how far text in a menu item is indented within the cell.

    Menu Delay sets the length of time between when the user moves the pointer over the triggering image or link, and when the menu appears. Values are in milliseconds so the default setting, 1000, equals 1 second. For every second of delay you want, add 000; for example, for a 3 second delay, type 3000.

    Pop-up Borders determines whether a border appears around the items in the menu. If you want a border to appear around the menu items, make sure the Show Borders checkbox is checked.

    Border Width sets the border’s width, in pixels.

    Shadow, Border Color, and Highlight allow you to pick a color for these border options. Shadow and highlight are not reflected in the preview.

  2. When you finish setting advanced appearance options, click OK or select another Show Pop-Up Menu tab to set additional options.


Setting a pop-up menu’s position in a document

Use position options to set where the pop-up menu displays relative to the triggering image or link. You can also set whether the menu hides or not when the user moves the pointer away from the trigger.

To set pop-up menu position options:
  1. In the Show Pop-Up Menu dialog box, click the Position tab.
  2. Set the location of the pop-up menu by doing one of the following:
    • Choose one of the preset options.
    • Set customized position coordinates by typing a number in the X text box to set the horizontal coordinate and by typing a number in the Y text box to set the vertical coordinate. Coordinates count from the top left corner of the menu.
  3. To hide the pop-up menu when the pointer is not over it, make sure Hide Menu onMouseOut Event is checked. To leave the menu displayed, deselect this option.
  4. When you finish creating or modifying the pop-up menu, click OK.


Modifying a pop-up menu

The Show Pop-Up Menu behavior allows you to edit or update the contents of a pop-up menu. You can add, delete, or change menu items, rearrange them, and set where a menu is positioned relative to the triggering image or link.

To open an existing HTML-based pop-up menu:
  1. In the Dreamweaver document, select the link or image that triggers the pop-up menu.
  2. Open the Behaviors panel (Shift + F3), if it isn’t already open, then in the Actions list, double-click Show Pop-Up Menu.

    3. The Show Pop-Up Menu dialog box appears.

  3. Make the changes you want to make to the pop-up menu.
  4. When you finish modifying the pop-up menu, click OK.

For detailed information about setting pop-up menu options, see Show Pop-Up Menu.


Swap Image

The Swap Image action swaps one image for another by changing the src attribute of the img tag. Use this action to create button rollovers and other image effects (including swapping more than one image at a time). Inserting a rollover image automatically adds a Swap Image behavior to your page.

Note: Because only the src attribute is affected by this action, you should swap in an image that has the same dimensions (height and width) as the original. Otherwise, the image you swap in appears compacted or expanded to fit the original image’s dimensions.

To use the Swap Image action:
  1. Choose Insert > Image or click the Image button on the Insert bar to insert an image.
  2. In the Property inspector, enter a name for the image in the leftmost text box.

    3. The Swap Image action still works if you do not name your images; it names unnamed images automatically when you attach the behavior to an object. However, it is easier to distinguish images in the Swap Image dialog box if all of the images are named beforehand.

  3. Repeat steps 1 and 2 to insert additional images.
  4. Select an object (generally the image you’re going to swap) and open the Behaviors panel.
  5. Click the plus (+) button and choose Swap Image from the Actions pop-up menu.
  6. From the Images list, select the image whose source you want to change.
  7. Click Browse to select the new image file, or enter the path and filename of the new image in the Set Source To text box.
  8. Repeat steps 6 and 7 for any additional images you want to change. Use the same Swap Image action for all the images you want to change at once; otherwise, the corresponding Swap Image Restore action won’t restore all of them.
  9. Select the Preload Images option to load the new images into the browser’s cache when the page is loaded.

    10. This prevents delays caused by downloading when it is time for the images to appear.

  10. Click OK.
  11. Check that the default event is the one you want.

    12. If it isn’t, choose another event from the pop-up menu. If the events you want are not listed, change the target browser in the Show Events For pop-up menu.


Swap Image Restore

The Swap Image Restore action restores the last set of swapped images to their previous source files. This action is automatically added whenever you attach the Swap Image action to an object; if you left the Restore option selected while attaching Swap Image, you should never need to select the Swap Image Restore action manually.


Go to Timeline Frame

The Go to Timeline Frame action moves the playback head to the specified frame. You can use this action in the Behavior channel of the Timelines panel to make portions of the timeline loop a specific number of times, to create a Rewind link or button, or to let the user jump to different parts of the animation.

To use the Go To Timeline Frame action:
  1. Choose Window > Timeline to open the Timelines panel, and make sure that your document contains a timeline.

    2. If you don’t see any purple animation bars in the Timelines panel, your document does not contain a timeline. See Moving a layer using a timeline animation.

  2. Select an object to attach the behavior to.

    3. To attach the behavior to a frame in the Timeline, click in the Behavior channel at the desired frame.

  3. Open the Behaviors panel.
  4. Click the plus (+) button and choose Timeline > Go to Timeline Frame from the Actions pop-up menu. (If this action is dimmed, your document doesn’t contain a timeline.)
  5. Choose a timeline from the Timeline pop-up menu.
  6. Enter a frame number in the Go to Frame text box.
  7. If you are adding this action in the Behavior channel of a timeline and want a portion of the timeline to loop, enter the number of times the segment should loop in the Loop text box.

    8. You must leave this text box blank if you are not attaching Go to Timeline Frame to a frame in a timeline.

  8. Click OK.
  9. Check that the default event is the one you want.

    10. If it isn’t, choose another event from the pop-up menu. If the events you want are not listed, change the target browser in the Show Events For pop-up menu.


Play Timeline and Stop Timeline

Use the Play Timeline and Stop Timeline actions to let visitors start and stop a timeline by clicking a link or button, or to start and stop a timeline automatically when the user rolls over a link, image, or other object. The Play Timeline action is automatically attached to the body tag with the onLoad event when you select Autoplay in the Timelines panel.

To use the Play Timeline and Stop Timeline actions:
  1. Choose Window > Timeline to open the Timelines panel, and make sure that your document contains a timeline.

    2. If you don’t see any purple animation bars in the Timelines panel, your document does not contain a timeline. See Moving a layer using a timeline animation.

  2. Select an object and open the Behaviors panel.
  3. Click the plus (+) button and choose Play Timeline or Stop Timeline from the Actions pop-up menu.
  4. Select the timeline you want to play or stop, or choose to stop all timelines, from the pop-up menu.
  5. Click OK.
  6. Check that the default event is the one you want.

    7. If it isn’t, choose another event from the pop-up menu. If the events you want are not listed, change the target browser in the Show Events For pop-up menu.


Validate Form

The Validate Form action checks the contents of specified text fields to ensure that the user has entered the correct type of data. Attach this action to individual text fields with the onBlur event to validate the fields as the user is filling out the form, or attach it to the form with the onSubmit event to evaluate several text fields at once when the user clicks the Submit button. Attaching this action to a form prevents the form from being submitted to the server if any of the specified text fields contains invalid data.

To use the Validate Form action:
  1. Choose Insert > Form or click the Form button in the Insert bar to insert a form.
  2. Choose Insert > Form Objects > Text Field or click the Text Field button in the Insert bar to insert a text field.

    3. Repeat this step to insert additional text fields.

  3. Do one of the following:
    • To validate individual fields as the user fills out the form, select a text field and choose Window > Behaviors.
    • To validate multiple fields when the user submits the form, click the <form> tag in the tag selector in the bottom left corner of the Document window and choose Window > Behaviors.
  4. Choose Validate Form from the Actions pop-up menu.
  5. Do one of the following:
    • If you are validating individual fields, select the same field that you have selected in the Document window from the Named Fields list.
    • If you are validating multiple fields, select a text field from the Named Fields list.
  6. Select the Required option if the field must contain some data.
  7. Choose from one of the following Accept options:
    • Use Anything if the field is required but need not contain any particular kind of data. (If the Required option is not selected, the Anything option is meaningless—that is, it is the same as if the Validate Form action were not attached to the field.)
    • Use E-mail address to check that the field contains an @ symbol.
    • Use Number to check that the field contains only numerals.
    • Use Number From to check that the field contains a number in a specific range.
  8. If you are validating multiple fields, repeat steps 6 and 7 for any additional fields that you want to validate.
  9. Click OK.

    10. If you are validating multiple fields when the user submits the form, the onSubmit event automatically appears in the Events pop-up menu.

  10. If you are validating individual fields, check that the default event is onBlur or onChange.

    11. If it isn’t, select onBlur or onChange from the pop-up menu. Both of these events trigger the Validate Form action when the user moves away from the field. The difference between them is that onBlur occurs whether or not the user has typed in the field, and onChange occurs only if the user changed the contents of the field. The onBlur event is preferred when you have specified that the field is required.

Previous


Animating Layers

A layer is an HTML page element that you can position anywhere on your page. Layers can contain text, images, or any other content that you can place in the body of an HTML document.

With Dreamweaver, you can place and animate layers without having to do any JavaScript or HTML coding. You can place layers in front of and behind each other, hide some layers while showing others, and move layers across the screen. You can place a background image in one layer, then place a second layer, containing text with a transparent background, in front of that. And you can animate layers fading in and out.

Layers provide a great deal of flexibility in placing content. However, web browsers older than Microsoft Internet Explorer 4.0 and Netscape Navigator 4.0 can’t display layers, and the version 4 browsers aren’t completely consistent in how they display layers. To ensure that everyone can view your web page, you can design your page layout using layers, then convert the layers to tables. For more information, see Using tables and layers for layout. If your audience is likely to be using more recent browsers, however, you can design layouts entirely with layers, without converting them to tables.

Note: If you’re unfamiliar with using layers and CSS, we recommend that you use tables or Layout view for page layout (see Presenting Content with Tables and Laying Out Pages in Layout View). Layout view is an easy way to implement your page layout with tables as the underlying structure.

This chapter contains the following sections:

  • About HTML code for layers
  • Creating layers on your page
  • Nesting layers
  • Manipulating layers
  • Adding content to layers
  • Viewing and setting layer properties
  • Using tables and layers for layout
  • Animating your layers
  • Animating layers using behavior actions
Next


About HTML code for layers

When you place a layer in a document, Dreamweaver inserts the HTML tag for that layer in your code. You can choose to have Dreamweaver use either the div tag or the span tag for your layers. By default, Dreamweaver creates layers using the div tag.

Note: There are two other tags that you can use to create layers: layer and ilayer. However, these tags are supported only in Netscape Navigator 4; Internet Explorer does not support these tags, and Netscape discontinued support for these tags in later browsers. Dreamweaver recognizes the layer and ilayer tags, but does not create layers using these tags.

To change the default tag, see Setting Layers preferences.

The difference between the div and span tags is that browsers that don’t support layers place extra line breaks before and after the div tag; that is, the div tag is a block-level element, while the span tag is an inline element. In most cases, it’s better for layer content to appear in a paragraph of its own in browsers that don’t support layers, so in most cases it’s better to use div than span. To further improve readability in older browsers, be careful where you place the code for a layer.

The code that defines a layer can be anywhere in the body of an HTML file. When you draw a layer in Dreamweaver, the layer is displayed where you drew it, but Dreamweaver inserts the layer’s code at the beginning of the page, just after the body tag. (If you use the Insert Layer command instead of drawing a layer, the layer code is inserted at the insertion point.) If you create a nested layer, Dreamweaver inserts the code inside the tag that defines the parent layer.

Note: Regardless of which tag you use, versions of both Internet Explorer and Netscape Navigator prior to 4.0 display the contents of a layer, but do not position the layer. The layer’s contents appear at the point in the page where the layer’s code is; for example, if the layer’s code is at the beginning of the page, the layer’s contents will appear at the beginning of the page in browsers that don’t support layers.

The following is sample HTML code for a layer:

<div id="Layer1" style="position:absolute; visibility:inherit; width:200px; height:115px; z-index:1">
</div>

The following is sample HTML code for a layer nested inside another layer:

<div id="Parent" style="position:absolute; left:56px; top:54px; width:124px; height:158px; z-index:1;">
Content inside the parent layer.
<div id="Nested" style="position:absolute; left:97px; top:114px; width:54px; height:69px; z-index:1;">
  Content inside the nested layer.
  </div>
</div>

You can set properties for layers on your page, including x and y coordinates, z-index (also called the stacking order), and visibility. For more information, see Viewing and setting layer properties.


Creating layers on your page

Dreamweaver lets you create layers on your page easily and position them precisely.

To create a layer, do one of the following:
  • To draw a layer, click the Draw Layer button in the Insert bar, then drag in the Document window’s Design view to draw the layer.
  • To insert a layer’s code at a particular place in the document, place the insertion point in the Document window and then choose Insert > Layer.

    • If you have Invisible Elements showing, a layer-code marker appears in the Design view each time you place a layer on the page. If layer-code markers aren’t visible and you want to see them, choose View > Visual Aids > Invisible Elements.

    Note: When the Invisible Elements option is turned on, the elements on your page may appear to shift position. However, invisible elements don’t appear in browsers, so when you view your page in a browser, all the visible elements appear in the correct positions.

To draw multiple layers consecutively:
  1. Click the Draw Layer button in the Insert bar.
  2. Control-drag (Windows) or Command-drag (Macintosh) to draw each layer.

    3. You can continue to draw new layers as long as you do not release the Control or Command key.

Related topics

About the Layers panel

Setting Layers preferences

Preventing layer overlaps

Setting Invisible Elements preferences


About the Layers panel

The Layers panel is a way to manage the layers in your document. To open the Layers panel, choose Window > Others > Layers. Layers are displayed as a list of names, in order of z-index; the first created layer appears at the bottom of the list, and the most recently created layer at the top of the list. Nested layers are displayed as names connected to parent layers. Click the plus (+) or minus (–) icons (Windows) or the expander arrow (Macintosh) to show or hide nested layers.

This is a picture of the feature being described.

Use the Layers panel to prevent overlaps, to change the visibility of layers, to nest or stack layers, and to select one or more layers.

Related topics

Creating layers on your page

Setting Layers preferences

Nesting layers

Selecting layers

Viewing and setting layer properties

Changing the stacking order of layers

Changing layer visibility

Preventing layer overlaps


Setting Layers preferences

Use the Layers category in the Preferences dialog box to specify the default settings for new layers you create.

To view or set layer preferences:
  1. Choose Edit > Preferences or Dreamweaver MX > Preferences (Mac OS X).
  2. Select Layers from the Category list.
  3. Make changes as necessary.

    4. For more information, see Setting the Layers preferences dialog box options.

  4. Click OK to close the dialog box.

Related topics

Nesting layers

Selecting layers

Changing the stacking order of layers

Changing layer visibility

Preventing layer overlaps


Nesting layers

A nested layer is a layer whose code is contained in another layer. Nesting is often used to group layers together. A nested layer moves with its parent layer and can be set to inherit visibility from its parent.

This is a picture of the feature being described.

To create a nested layer, insert or draw a layer inside another layer, or use the Layers panel. To force layers to automatically nest when you draw a layer starting inside another layer, select the Nesting option in the Layer preferences. For more information, see Setting Layers preferences.

Note: Use the Netscape Resize Fix when you use nested layers in your page (Commands > Add/Remove Netscape Resize Fix). Otherwise, layers lose their positions when a visitor resizes a browser window in Netscape Navigator 4 versions. You can set a preference option to always insert the Netscape Resize Fix; for more information, see Setting the Layers preferences dialog box options.

To create a nested layer, do one of the following:
  • To insert a nested layer, place the insertion point inside an existing layer and choose Insert > Layer.
  • To draw a nested layer, click the Draw Layer button in the Insert bar, then drag to draw a layer inside an existing layer. If Nesting is turned off in Layers preferences, Alt-drag (Windows) or Option-drag (Macintosh) to draw a layer inside an existing layer.

    • Tip: Nested layers may appear differently in different browsers. When you create nested layers, check their appearance in various browsers frequently during the design process.

To nest an existing layer inside another layer using the Layers panel:
  1. Choose Window > Others > Layers to open the Layers panel.
  2. Select a layer in the Layers panel, then Control-drag (Windows) or Command-drag (Macintosh) the layer to the target layer in the Layers panel. Release the mouse button when the name of the target layer is highlighted.


Manipulating layers

As you work with your page layout, you can select, move, resize, and align layers. You must select a layer before you can move, resize, or align it.

To prevent layers from overlapping each other as you move and resize them, use the Prevent Overlap option (see Preventing layer overlaps).


Selecting layers

Select one or more layers to manipulate them or change their properties.

To select a layer, do one of the following:
  • Click the name of the layer in the Layers panel.
  • Click a layer’s selection handle. If the selection handle isn’t visible, click anywhere inside the layer to make the handle visible.
    This is a picture of the feature being described.
  • Click a layer’s border.
  • Control-Shift-click (Windows) or Command-Shift-click (Macintosh) inside a layer. If multiple layers are selected, this deselects all other layers and selects only the one that you clicked.
  • Click the layer-code marker (in the Design view) that represents the layer’s location in the HTML code. If the layer-code marker isn’t visible, choose View > Visual Aids > Invisible Elements.
To select multiple layers, do one of the following:
  • Shift-click two or more layer names in the Layers panel.
  • Shift-click inside or on the border of two or more layers.

When multiple layers are selected, the handles of the last selected layer are highlighted in black. The resize handles of the other layers are highlighted in white.


Resizing layers

You can resize an individual layer, or simultaneously resize multiple layers to make them the same width and height.

If the Prevent Overlaps option is on, you will not be able to resize a layer so that it overlaps with another layer (see Preventing layer overlaps).

To resize the selected layer, do one of the following:
  • To resize by dragging, drag any of the layer’s resize handles.
  • To resize one pixel at a time, hold down Control (Windows) or Option (Macintosh) while pressing an arrow key.

    • Note: The arrow keys move the right and bottom borders of the layer; you can’t resize using the top and left borders with this technique.

  • To resize by the grid snapping increment, hold down Shift-Control (Windows) or Shift-Option (Macintosh) while pressing an arrow key. For information about setting the grid snapping increment, see Snapping layers to the grid.
  • In the Property inspector, type values for width (W) and height (H).

Resizing a layer changes the width and height of the layer. It does not define how much of the layer’s content is visible. To define the visible region within a layer, see Viewing and setting layer properties.

To resize multiple layers at once:
  1. In the Design view, select two or more layers.
  2. Do one of the following:
    • Choose Modify > Align > Make Same Width or Modify > Align > Make Same Height.

      • The first selected layers conform to the width or height of the last selected layer (highlighted in black).

    • In the Property inspector, under Multiple Layers, enter width and height values. The values are applied to all selected layers.


Moving layers

You can move layers in the Design view in much the same way that you move objects in most basic graphics applications.

If the Prevent Overlaps option is on, you will not be able to move a layer so that it overlaps another layer. See Preventing layer overlaps.

To move one or more selected layers, do one of the following:
  • To move by dragging, drag the selection handle of the last selected layer (highlighted in black).
  • To move one pixel at a time, use the arrow keys. Hold down Shift while pressing an arrow key to move the layer by the current grid snapping increment. For information about setting the grid snapping increment, see Snapping layers to the grid.


Aligning layers

Use the layer alignment commands to align one or more layers with a border of the last layer selected.

When you align layers, child layers that aren’t selected may move because their parent layer is selected and moved. To prevent this, don’t use nested layers.

To align two or more layers:
  1. Select the layers.
  2. Choose Modify > Align, then select an alignment option.

For example, if you select Top, all of the layers move so that their top borders are in the same vertical position as the top border of the last selected layer (highlighted in black).


Snapping layers to the grid

Use the grid as a visual guide for drawing, positioning, or resizing layers in the Document window’s Design view. You can make page elements automatically snap to the grid as you move them, and change the grid or control the snapping behavior by specifying grid settings. Snapping works whether or not the grid is visible.

To show or hide the grid:

Choose View > Grid > Show Grid.

To enable or disable snapping:

Choose View > Grid > Snap to Grid.

To change grid settings:
  1. Choose View > Grid > Grid Settings.

    2. The Grid Settings dialog box appears.

  2. Set options as desired.

    3. For more information, see Setting the Grid Settings dialog box options.

  3. Click OK.


Adding content to layers

Before you place objects in a layer, you must place the insertion point in the layer.

To place the insertion point in a layer:

Click anywhere inside the layer’s borders.

The layer’s borders highlight, and the selection handle appears, but the layer itself is not selected. For information on selecting layers, see Selecting layers.


Viewing and setting layer properties

You can view and set various attributes of a layer in the Property inspector.

To view all layer properties:
  1. Select a layer. For information on selecting layers, see Selecting layers.
  2. Open the Property inspector by choosing Window > Properties.
  3. If the Property inspector isn’t expanded, click the expander arrow in the lower right corner to see all properties.
    This is a picture of the feature being described.
To set layer properties with the Property inspector:
  1. Select a layer. For information on selecting layers, see Selecting layers.
  2. Open the Property inspector by choosing Window > Properties.
  3. Change the layer’s attributes by setting properties.

    4. For more information, see Setting layer properties.


Viewing and setting properties for multiple layers

When you select two or more layers, the layer Property inspector displays text properties and a subset of the full layer properties, allowing you to modify several layers at once.

To select multiple layers:

Hold down Shift while selecting layers. For information on selecting layers, see Selecting layers.

To view all properties for multiple layers:
  1. Select multiple layers.
  2. Open the Property inspector by choosing Window > Properties.
  3. If the Property inspector isn’t expanded, click the expander arrow in the lower right corner to see all properties.
    This is a picture of the feature being described.
To set properties for multiple layers at once with the Property inspector:
  1. Select multiple layers.
  2. Open the Property inspector by choosing Window > Properties.
  3. Change the layers’ attributes by setting properties.

    4. For more information, see Setting properties for multiple layers.

Related topics

Viewing and setting layer properties

Selecting layers

Setting Text property options


Changing the stacking order of layers

Use the Property inspector or the Layers panel to change the stacking order of layers. The layer at the top of the Layers panel list is at the top of the stacking order, and appears in front of the other layers.

In HTML code, the stacking order, or z-index, of the layers determines the order in which they are drawn in a browser. You can change the z-index for each layer using the Layers panel or using the Property inspector.

To change the stacking order of layers in the Layers panel:

Choose Window > Others > Layers to open the Layers panel. Then do one of the following:

  • Select and drag a layer up or down to the desired stacking order. A line appears as you move the layer, indicating where the layer will appear. Release the mouse button when the placement line appears in the desired place in the stacking order.
  • In the Z column, click the number of the layer you are changing. Type a higher number than the existing number to move the layer up in the stacking order, or type a lower number to move the layer down in the stacking order.
To change the stacking order of layers using the Property inspector:
  1. Choose Window > Others > Layers to open the Layers panel to see the current stacking order.
  2. Select a layer in the Layers panel or in the Document window.
  3. In the layer Property inspector, type a number in the Z-index text box.
    • Type a higher number to move the layer up in the stacking order.
    • Type a lower number to move the layer down in the stacking order.


Changing layer visibility

While working on your document, you can show and hide layers manually, using the Layers panel, to see how the page will appear under different conditions.

Note: The currently selected layer always becomes visible and appears in front of other layers while it’s selected.

To change layer visibility:
  1. Choose Window > Others > Layers to open the Layers panel.
  2. Click in the eye-icon column for a layer to change its visibility.
    • An open eye means the layer is visible.
    • A closed eye means the layer is invisible.
    • If there is no eye icon, usually the layer inherits visibility from its parent. (When layers are not nested, the parent is the document body, which is always visible.) Also, no eye icon appears when no visibility is specified (which appears in the Property inspector as Default visibility).
      This is a picture of the feature being described.
To change the visibility of all layers at once:
  1. Choose Window > Others > Layers to open the Layers panel.
  2. Click the header eye icon at the top of the column.

    3. Note: This procedure can set all layers to visible or hidden, but not to inherit.

Related topic

For information on setting the default visibility for new layers, see Setting Layers preferences.


Using tables and layers for layout

Instead of using tables or Layout view to create your layout (see Presenting Content with Tables and Laying Out Pages in Layout View), some web designers prefer to work with layers and tables. Dreamweaver allows you to create your layout using layers, and then (if you wish) convert them into tables, since 3.0 browsers don’t support layers. You can convert back and forth between layers and tables to adjust the layout and optimize page design.

You can’t convert layers to tables or tables to layers in a template document or in a document to which a template has been applied. Instead, create your layout in a non-template document, and convert it before saving it as a template.

A single table or layer cannot be converted. You can convert layers to tables and tables to layers only for an entire page.

If you want to generate separate 3.0 browser-compatible files from a file that uses layers, use the Convert option in the File menu (see Converting to 3.0 browser compatibility).

Note: Converting from layers to tables may result in tables with a large number of empty cells.


Converting between layers and tables

You can create your layout using layers, then convert the layers to tables so that your layout can be viewed in older browsers.

To convert layers to a table:
  1. Choose Modify > Convert > Layers to Table.
  2. In the dialog box that appears, select the desired options.

    3. For more information, see Setting the Convert Layers to Table dialog box options.

  3. Click OK.

    4. The layers are converted to a table.

To convert tables to layers:
  1. Choose Modify > Convert > Tables to Layers.
  2. In the dialog box that appears, select the desired options.

    3. For more information, see Setting the Convert Tables to Layers dialog box options.

  3. Click OK.

    4. The tables are converted to layers. Empty cells are not converted to layers unless they have background colors.

    Note: Page elements that were outside of tables are also placed in layers.


Preventing layer overlaps

Because table cells cannot overlap, Dreamweaver cannot create a table from overlapping layers. If you plan to convert the layers in a document to tables for compatibility with 3.0 browsers, use the Prevent Overlap option to constrain layer movement and positioning so that layers don’t overlap.

To prevent layers from overlapping, do one of the following:
  • Select the Prevent Overlaps option in the Layers panel.
  • Choose Modify > Arrange > Prevent Layer Overlaps.

When this option is on, a layer can’t be created in front of, moved or resized over, or nested within an existing layer. If you activate this option after creating overlapping layers, drag each overlapping layer to move it away from other layers. Dreamweaver does not automatically fix existing overlapping layers in the page when you enable Prevent Layer Overlaps.

When this option and snapping are enabled, a layer won’t snap to the grid if it would cause two layers to overlap. Instead, it will snap to the edge of the closest layer.

Note: Certain actions allow you to overlap layers even when the Prevent Overlaps option is enabled. If you insert a layer using the Insert menu, enter numbers in the Property inspector, or reposition layers by editing the HTML source code, you can cause layers to overlap or nest while this option is enabled. If overlaps happen, drag overlapping layers in the Design view to separate them.


Converting to 3.0 browser compatibility

You can convert a page that uses layers or CSS to using tables and HTML markup, to make the page compatible with version 3.0 browsers. Dreamweaver creates a separate, converted document, while preserving the original document.

In general, you should convert a document only when you are completely satisfied with your original document’s layout; otherwise, you must convert the document each time you change the original.

To convert a file for use with 3.0 browsers:
  1. Choose File > Convert > 3.0 Browser Compatible.
  2. In the dialog box that appears, choose whether to convert layers to tables, CSS styles to HTML markup (character styles), or both.
  3. Click OK.

Dreamweaver opens the converted file in a new, untitled window. If you selected Convert Layers to Table or Both, all layers are replaced with a single table that preserves the original positioning of content.

Note: Overlapping layers cannot be converted, nor can layers that are off the page to the left or top.

If you selected Convert CSS Styles to HTML Markup or Both, CSS markup is replaced, where possible, with HTML character styles. Any CSS markup that cannot be converted to HTML is removed. For information on which styles are converted and which are removed, see the CSS to HTML markup conversion table.

Timeline code that animates layers is removed. Timeline code that is unrelated to layers (for example, behaviors or changes to an image’s source file) will continue to execute as specified. The timeline is automatically rewound to frame 1. For more information on timelines, see Moving a layer using a timeline animation.


Animating your layers

Dynamic HTML, or DHTML, refers to the combination of HTML with a scripting language that allows you to change style or positioning properties of HTML elements. Timelines, in Dreamweaver, use dynamic HTML to change the properties of layers and images over time. Use timelines to create animations that do not require any ActiveX controls, plug-ins, or Java applets (but do require JavaScript).

Note: The word dynamic can mean different things in different web-related contexts. Don’t confuse Dynamic HTML with the idea of a dynamic web page, which means a web page generated dynamically by server-side code before being served to a visitor. For more information about creating dynamic pages, see The Dreamweaver Workflow for Dynamic Page Design.

Timelines allow you to change the position, size, visibility, and stacking order of a layer. (The layer functions of timelines work only in 4.0 or later browsers.) Timelines are also useful for other actions that you want to occur after a page loads. For example, timelines can change the source file of an image tag so different images appear in the page over time.

To see the JavaScript code generated by a timeline, open the Document window’s Code view. The timeline code is in the MM_initTimelines function, inside a script tag in the head section of the document.

When editing the HTML of a document containing timelines, make sure you do not move, rename, or delete anything that a timeline refers to.


Using the Timelines panel

The Timelines panel shows how the properties of layers and images change over time. Choose Window > Others > Timelines to open the Timelines panel.

This is a picture of the feature being described.

Timeline pop-up menu specifies which of the document’s timelines is currently displayed in the Timelines panel.

Playback head shows which frame of the timeline is currently displayed in the Document window.

Frame numbers indicate the sequential numbering of frames. The number between the Back and Play buttons is the current frame number. You control the duration of animation by setting the total number of frames and the number of frames per second (fps). The default setting of 15 frames per second is a good average rate to use for most browsers running on common Windows and Macintosh systems.

Note: Faster rates may not improve performance. Browsers always play every frame of the animation, even if they cannot attain the specified frame rate. The frame rate is ignored if it is higher than the browser can manage.

Context menu contains various timeline-related commands.

Behaviors channel is the channel for behaviors that should be executed at a particular frame in the timeline.

Animation bars show the duration of each object’s animation. A single row can include multiple bars representing different objects. Different bars cannot control the same object in the same frame.

Keyframes are frames in a bar where you have specified properties (such as position) for the object. Dreamweaver calculates intermediate values for frames in between keyframes. Small circles mark keyframes.

Animation channels display bars for animating layers and images.


Playback options

The following are the playback options for viewing the animation.

This is a picture of the feature being described.

Rewind moves the playback head to the first frame in the timeline.

Back moves the playback head one frame to the left. Click Back and hold down the mouse button to play the timeline backward.

Play moves the playback head one frame to the right. Click Play and hold down the mouse button to play the timeline forward.

Autoplay makes a timeline begin playing automatically when the current page loads in a browser. Autoplay attaches a behavior to the page’s body tag that executes the Play Timeline action when the page loads.

Loop makes the current timeline loop indefinitely while the page is open in a browser. Loop inserts the Go to Timeline Frame behavior in the Behaviors channel after the last frame of the animation. Double-click the behavior’s marker in the Behaviors channel to edit the parameters for this behavior and change the number of loops.


Moving a layer using a timeline animation

The most common kind of timeline animation involves moving a layer along a path. Timelines can move only layers. To make images or text move, create a layer using the Draw Layer button on the Insert bar and then insert images, text, or any other type of content in the layer (see Creating layers on your page).

Timelines can also change other attributes of layers and images; for more information, see Changing image and layer properties with timelines.

To animate a layer using a timeline:
  1. Move the layer to where it should be when the animation begins.
  2. Choose Window > Others > Timelines.
  3. Select the layer you want to animate.

    4. Make sure you have selected the desired element. Click the layer marker or the layer selection handle, or use the Layers panel to select a layer. For more information, see Manipulating layers. When a layer is selected, handles appear around it as shown in the following illustration.
    This is a picture of the feature being described.

    Clicking inside the layer places a blinking insertion point inside the layer, but it does not select the layer.

  4. Choose Modify > Timeline > Add Object to Timeline or simply drag the selected layer into the Timelines panel.

    5. A bar appears in the first channel of the timeline. The name of the layer appears in the bar.

  5. Click the keyframe marker at the end of the bar.
  6. Move the layer on the page to where it should be at the end of the animation.

    7. A line appears showing the path of the animation in the Document window.

  7. If you want the layer to move in a curve, select its animation bar and Control-click (Windows) or Command-click (Macintosh) a frame in the middle of the bar to add a keyframe at the frame you clicked, or click a frame in the middle of the animation bar and choose Add Keyframe from the context menu.

    8. Repeat this step to define additional keyframes.

  8. Hold down the Play button to preview the animation on the page.

    9. Repeat the procedure to add additional layers and images to the timeline and to create a more complex animation.


Creating a timeline by dragging a path

If you want to create an animation with a complex path, it may be more efficient to record the path as you drag the layer rather than creating individual keyframes.

To create a timeline by dragging a path:
  1. Select a layer.
  2. Move the layer to where it should be when animation begins.

    3. Make sure you have selected the layer; if the insertion point is in the layer, the layer is not selected. To select a layer, click the layer marker or the layer selection handle, or use the Layers panel. For more information, see Manipulating layers.

  3. Choose Modify > Timeline > Record Path of Layer.
  4. Drag the layer around the page to create a path.
  5. Release the layer at the point where the animation should stop.

    6. Dreamweaver adds an animation bar to the timeline, containing the appropriate number of keyframes.

  6. In the Timelines panel, click the Rewind button; then hold down the Play button to preview your animation.


Modifying timelines

After defining a timeline’s basic components, you can make changes such as adding and removing frames, changing the start time of the animation, and so on.

To modify a timeline, do any of the following:

To make the animation play longer, drag the end frame marker to the right. All the keyframes in the animation shift so that their relative positions remain constant. To prevent the other keyframes from moving, Alt-drag (Windows) or Option-drag (Macintosh) the end frame marker.

  • To make the layer reach a keyframe position earlier or later, move the keyframe marker left or right in the bar.
  • To change the start time of an animation, select one or more of the bars associated with the animation (press Shift to select more than one bar at a time) and drag left or right.
  • To shift the location of an entire animation path, select the entire bar and then drag the object on the page. Dreamweaver adjusts the position of all keyframes. Making any type of change with an entire bar selected changes all the keyframes.
  • To add or remove frames in the timeline, choose Modify > Timeline > Add Frame or Modify > Timeline > Remove Frame.
  • To make the timeline play automatically when the page opens in a browser, click Autoplay. Autoplay attaches a behavior to the page that executes the Play Timeline action when the page loads.
  • To make the timeline loop continuously, click Loop. Loop inserts the Go To Timeline Frame action in the Behaviors channel after the last frame of the animation. You can edit the parameters for this behavior to define the number of loops.


Changing image and layer properties with timelines

In addition to moving layers with timelines, you can change the visibility, size, and stacking order of a layer; you can also change the source file of an image.

To change image and layer properties with a timeline:
  1. In the Timelines panel, do one of the following:
    • Select an existing keyframe in the bar controlling the object you want to change. (The start and end frames are always keyframes.)
    • Create a new keyframe by clicking a frame in the middle of the animation bar and choosing Modify > Timeline > Add Keyframe. You can instead create a new keyframe by Control-clicking (Windows) or Command-clicking (Macintosh) a frame in the animation bar.
  2. Define new properties for the object by doing one of the following:
    • To change the source file of an image, click the folder icon next to the Src text box in the Property inspector, then browse to and select a new image.
    • To change the visibility of a layer, choose inherit, visible, or hidden from the pop-up menu in the Vis text box of the Property inspector. Alternatively, use the eye icons in the Layers panel. See Changing layer visibility.
    • To change the size of a layer, drag the layer’s resize handles or enter new values in the Width and Height text boxes in the Property inspector. Not all browsers can dynamically change the size of a layer.
    • To change the stacking order of a layer, enter a new value in the Z-Index text box or use the Layers panel to change the stacking order of the current layer (see Changing the stacking order of layers).
  3. Hold down the Play button to see the animation.


Using multiple timelines

Instead of trying to control all the action on a page with one timeline, it’s easier to work with separate timelines that control discrete parts of the page. For example, a page might include interactive elements that each trigger a different timeline.

To manage multiple timelines, do any of the following:
  • To create a new timeline, choose Modify > Timeline > Add Timeline.
  • To remove the selected timeline, choose Modify > Timeline > Remove Timeline. This permanently removes all animations from the selected timeline.
  • To rename the selected timeline, choose Modify > Timeline > Rename Timeline or enter a new name in the Timeline pop-up menu in the Timelines panel.
  • To view a different timeline in the Timelines panel, choose a new timeline from the Timeline pop-up menu in the Timelines panel.


Copying and pasting animations

Once you have an animation sequence that you like, you can copy it and paste it into another area of the current timeline, into another timeline in the same document, or into a timeline in another document. You can also copy and paste multiple sequences at once.

To cut or copy and paste animation sequences:
  1. Click an animation bar to select a sequence. To select multiple sequences, Shift-click multiple animation bars; to select all sequences, press Control+A (Windows) or Command+A (Macintosh).
  2. Copy or cut the selection.
  3. Do one of the following:
    • Move the playback head to another spot in the current timeline.
    • Select another timeline from the Timeline pop-up menu.
    • Open another document, or create a new one, and then click in the Timelines panel.
  4. Paste the selection into the timeline.

    5. Animation bars for the same object cannot overlap, because a layer cannot be in two places at one time (nor can an image have two different sources at a time). If the animation bar you are pasting would overlap another animation bar for the same object, Dreamweaver automatically shifts the selection to the first frame that doesn’t overlap.

There are two principles to keep in mind when pasting animation sequences into another document:

  • If you copy an animation sequence for a layer and the new document contains a layer with the same name, Dreamweaver applies the animation properties to the existing layer in the new document.
  • If you copy an animation sequence for a layer and the new document does not contain a layer with the same name, Dreamweaver pastes the layer and its contents from the original document along with the animation sequence. To apply the pasted animation sequence to another layer in the new document, choose Change Object from the context menu and select the name of the second layer from the pop-up menu. Delete the pasted layer if desired. See Applying an animation sequence to a different object.


Applying an animation sequence to a different object

To save time, you can create an animation sequence once and apply it to each of the remaining layers in your document.

To apply an existing animation sequence to other objects:
  1. In the Timelines panel, select the animation sequence and copy it.
  2. Click any frame of the Timelines panel and paste the sequence at that frame.
  3. Right-click (Windows) or Control-click (Macintosh) the pasted animation sequence and choose Change Object from the context menu.
  4. In the dialog box that appears, choose another object from the pop-up menu and click OK.
  5. Repeat steps 2 through 4 for any remaining objects that you want to follow the same animation sequence.

You can also change your mind about which layer should be animated after creating an animation sequence; simply follow steps 3 and 4 above (no copying or pasting is necessary).


Renaming timelines

To rename the timeline currently displayed in the Timelines panel:
  1. Choose Modify > Timeline > Rename Timeline.
  2. In the Rename Timeline dialog box, enter a new name.

If your document contains the Play Timeline behavior action (for example, if it contains a button that the visitor must click to start the timeline), you must edit the behavior to reflect the new timeline name.


Animation tips for timelines

The following suggestions can improve the performance of your animations and make creating animations easier:

  • Show and hide layers instead of changing the source file for multiple-image animations. Switching the source file of an image can slow down the animation, because the new image must be downloaded. There will be no noticeable pauses or missing images if all images are downloaded at once in hidden layers before the animation runs.
  • Extend animation bars to create smoother motion. If animation looks choppy and images jump between positions, drag the end frame of the layer’s animation bar to extend the motion over more frames. Making the animation bar longer creates more data points between the start and end point of the movement and also makes the object move more slowly. Try increasing the number of frames per second (fps) to improve speed, but be aware that most browsers running on average systems cannot animate much faster than 15 fps. Test the animation on different systems with different browsers to find the best settings.
  • Don’t animate large bitmaps. Animating large images results in slow animations. Instead, create composites and move small parts of the image. For example, show a car moving by animating only the wheels.
  • Create simple animations. Do not create animations that demand more than current browsers can provide. Browsers always play every frame in a timeline animation, even when system or Internet performance decreases.


Animating layers using behavior actions

Attach the following behavior actions to a link, button, or other object to control timelines and layers. To create interesting effects, you can place behaviors containing these actions in the Behaviors channel. For example, you can make a timeline stop itself. For more information, see Attaching a behavior to a timeline and Using JavaScript Behaviors.

Drag Layer lets the visitor drag a layer. Use this action to create puzzles, slider controls, and other moveable user interface elements. See Drag Layer.

Show-Hide Layers shows, hides, or restores the default visibility of one or more layers. This action is useful for showing information as the visitor interacts with the page. See Show-Hide Layers.

Play Timeline and Stop Timeline let visitors start and stop a timeline by clicking a link or button. These actions can also start and stop a timeline automatically when the visitor points to a link, image, or other object. See Play Timeline and Stop Timeline.

Go To Timeline Frame causes the timeline to jump to a certain frame. The Loop check box in the Timelines panel adds the Go To Timeline Frame action after the last frame of the animation, causing it to go to frame 1 and start the animation again. See Go to Timeline Frame.

Set Text of Layer replaces the content and formatting of an existing layer on a page with the content you specify. The content can include any valid HTML. See Set Text of Layer.


Setting the Layers preferences dialog box options

The purpose of this dialog box is to set Layers preferences.

To fill out the Layers Preferences dialog box:

  1. Specify any of the following options:

    2. Tag sets the HTML tag for Dreamweaver to use when creating layers. The options are div (the default) and span.

    Visibility determines whether layers are visible by default. The options are default, inherit, visible, and hidden. For more information about those options, see Setting layer properties.

    Width and Height specify a default width and height (in pixels) for layers you create using Insert > Layer.

    Background Color specifies a default background color. Select a color from the color picker.

    Background Image specifies a default background image. Click Browse to locate the image file on your computer.

    Nesting: Nest when Created Within a Layer specifies whether a layer that you draw starting from a point within the boundaries of an existing layer should be a nested layer. Hold down Alt (Windows) or Option (Macintosh) to temporarily change this setting while you’re drawing a layer.

    Netscape 4 Compatibility: Add Resize Fix When Inserting a Layer inserts JavaScript code in the head content of the document to fix a known problem in Netscape 4 browsers that causes layers to lose their positioning coordinates when a visitor resizes a browser window. The JavaScript forces the page to reload each time the browser window is resized, re-assigning the layers to the correct position. You can also add or remove the JavaScript code manually, by choosing Commands > Add/Remove Netscape Resize Fix.

  2. Click OK.

Related topic

Setting Layers preferences


Setting the Grid Settings dialog box options

The purpose of this dialog box is to edit grid settings.

To fill in the Grid Settings dialog box:
  1. Set the following options as desired:

    2. Color specifies the color of the grid lines. Click the color swatch and select a color from the Color Picker, or type a hexadecimal number in the text box.

    Show Grid makes the grid visible in Design view.

    Snap to Grid makes page elements snap to the lines of the grid.

    Spacing controls how far apart the grid lines are. Enter a number in the text box and select Pixels, Inches, or Centimeters from the menu.

    Display specifies whether the grid lines appear as lines or dots.

  2. Click Apply to apply the changes without closing the dialog box, or OK to apply the changes and close the dialog box.

    3. Note: If Show Grid is not selected, the grid does not appear and no changes are visible.

Related topics

Snapping layers to the grid

Working with colors


Setting layer properties

Use the Property inspector to view and set properties for a layer.

To set properties for a layer:
  1. Set any of the following options:

    2. Layer ID allows you to specify a name to identify the layer in the Layers panel and in JavaScript code. Enter a name. Use only standard alphanumeric characters; do not use special characters such as spaces, hyphens, slashes, or periods. Every layer must have its own unique name.

    L and T (left and top) specify the position of the layer’s top left corner relative to the top left corner of the page, or of the parent layer if nested.

    W and H specify the width and height of the layer.

    Note: If the content of the layer exceeds the specified size, the bottom edge of the layer (as it appears in the Design view in Dreamweaver) stretches to accommodate the content. (The bottom edge doesn’t stretch when the layer appears in a browser, unless the Overflow property is set to Visible.)

    The default unit for position and size is pixels (px). You can instead specify the following units: pc (picas), pt (points), in (inches), mm (millimeters), cm (centimeters), or % (percentage of the parent layer’s corresponding value). The abbreviations must follow the value without a space: for example, 3mm indicates 3 millimeters.

    Z-Index determines the z-index, or stacking order, of the layer. In a browser, higher-numbered layers appear in front of lower-numbered layers. Values can be positive or negative. It’s easier to change the stacking order of layers using the Layers panel than to enter specific z-index values (see Changing the stacking order of layers).

    Netscape layers (those that use the layer or ilayer tag) can be stacked relative to other layers on the page. When you select a Netscape layer, two additional options appear in the lower right corner of the Property inspector. Choose the name of another layer from the new pop-up menu in the lower right corner (only layer names you’ve already defined appear in this menu); then use the A/B option to indicate whether the specified layer should appear Above (in front of) the current layer or Below (behind) it. Note that you can’t specify both an Above/Below stacking order and a z-index for a given layer.

    Vis specifies whether the layer is initially visible or not. Choose from the following options:

    • Default does not specify a visibility property. When no visibility is specified, most browsers default to Inherit.
    • Inherit uses the visibility property of the layer’s parent.
    • Visible displays the layer contents, regardless of the parent’s value.
    • Hidden hides the layer contents, regardless of the parent’s value. Note that hidden layers created with ilayer still take up the same space as if they were visible.

      • Use a scripting language, such as JavaScript, to control the visibility property and dynamically display layer contents.

      Bg Image specifies a background image for the layer. Click the folder icon to browse to and select an image file.

      Bg Color specifies a background color for the layer. Leave this option blank to specify a transparent background.

      Tag specifies the HTML tag used to define the layer.

      Overflow (div and span only) controls how layers appear in a browser when the content exceeds the layer’s specified size. Visible indicates that the extra content appears in the layer; effectively, the layer stretches to accommodate it. Hidden specifies that extra content is not displayed in the browser. Scroll specifies that the browser should add scroll bars to the layer whether they’re needed or not. Auto causes the browser to display scroll bars for the layer only when needed (that is, when the layer’s contents exceed its boundaries.)

    Note: The overflow option has uneven support across browsers.

    Use Left, Top or PageX, PageY (layer and ilayer only) lets you specify whether to position a layer in relation to its parent or to the page. The Left, Top option places the layer relative to the top left corner of its parent. The PageX, PageY option places the layer in an absolute location relative to the top left corner of the page, regardless of the position of the parent layer.

    Clip defines the visible area of a layer. Specify left, top, right, and bottom coordinates to define a rectangle in the coordinate space of the layer (counting from the top left corner of the layer). The layer is “clipped” so that only the specified rectangle is visible. For example, to make a layer’s contents invisible except for a 50-pixel-wide, 75-pixel-high visible rectangle at the top left corner of the layer, set L to 0, T to 0, R to 50, and B to 75.

    Note: Although the Cascading Style Sheets specification specifies different semantics for clip, Dreamweaver interprets clip the way that most browsers do.

    Src (layer and ilayer only) lets you display another HTML document within the layer. Click the folder icon to browse to and select the document. Note that Dreamweaver does not display the other document in the layer.

  2. If you have entered a value in a text box, press Tab or Enter (Windows) or Return (Macintosh) to apply the value.

Related topic

Viewing and setting layer properties


Setting properties for multiple layers

Use the Property inspector to view and set properties for a layer.

To set properties for multiple layers at once:
  1. Set any of the following options:

    2. L and T (left and top) specify the position of the layers’ top left corners relative to the top left corner of the page, or of the parent layer if nested.

    W and H specify the width and height of the layers.

    Note: If the content of any layer exceeds the specified size, the bottom edge of the layer (as it appears in the Design view in Dreamweaver) stretches to accommodate the content. (The bottom edge doesn’t stretch when the layer appears in a browser, unless the Overflow property is set to Visible.)

    The default unit for position and size is pixels (px). You can instead specify the following units: pc (picas), pt (points), in (inches), mm (millimeters), cm (centimeters), or % (percentage of the parent layer’s corresponding value). The abbreviations must follow the value without a space: for example, 3mm indicates 3 millimeters.

    Vis specifies whether the layers are initially visible or not. Choose from the following options:

    • Default does not specify a visibility property. When no visibility is specified, most browsers default to Inherit.
    • Inherit uses the visibility property of the layers’ parent.
    • Visible displays the layers’ contents, regardless of the parent’s value.
    • Hidden hides the layer contents, regardless of the parent’s value. Note that hidden layers created with ilayer still take up the same space as if they were visible.

      • Use a scripting language, such as JavaScript, to control the visibility property and dynamically display layer contents.

      Tag specifies the HTML tag used to define the layers.

      Bg Image specifies a background image for the layers. Click the folder icon to browse to and select an image file.

      Bg Color specifies a background color for the layers. Leave this option blank to specify a transparent background.

  2. If you have entered a value in a text box, press Tab or Enter (Windows) or Return (Macintosh) to apply the value.

Related topic

Viewing and setting properties for multiple layers


Setting the Convert Layers to Table dialog box options

The purpose of this dialog box is to convert layers to tables for better compatibility with older browsers.

To fill out the Convert Layers to Table dialog box:

  1. Specify any of the following options:

    2. Most Accurate creates a cell for every layer, plus any additional cells that are necessary to preserve the space between layers.

    Smallest: Collapse Empty Cells specifies that the layers’ edges should be aligned if they are positioned within the specified number of pixels. If you select this option, the resulting table will have fewer empty rows and columns, but may not match your layout precisely.

    Use Transparent GIFs fills the table’s last row with transparent GIFs. This ensures that the table is displayed with the same column widths in all browsers.

    When this option is enabled, you cannot edit the resulting table by dragging its columns. When this option is disabled, the resulting table will not contain transparent GIFs, but the widths of the columns may vary from browser to browser.

    Center on Page centers the resulting table on the page.

    If this option is disabled, the table starts at the left edge of the page.

  2. Select the desired layout tools and grid options, and click OK.

Related topic

Using tables and layers for layout


Setting the Convert Tables to Layers dialog box options

The purpose of this dialog box is to convert layers to tables for better compatibility with older browsers.

To fill out the Convert Tables to Layers dialog box:

  1. Specify any of the following options:

    2. Show Grid and Snap to Grid let you use a grid to help position layers (see Snapping layers to the grid).

    Prevent Layer Overlaps constrains the positions of layers when they are created, moved, and resized so that they don’t overlap (see Preventing layer overlaps).

    Show Layer Palette displays the Layers panel (see About the Layers panel).

  2. Click OK.

The tables are converted to layers. Empty cells are not converted to layers unless they have background colors.

Note: Page elements that were outside of tables are also placed in layers.

Related topic

Using tables and layers for layout

Previous


Working with Multiple Pages

Link your pages together, and reuse design elements and layouts from one page to another. Then test your site.

This part contains the following chapters:

  • Linking and Navigation
  • Managing Site Assets, Libraries, and Templates
  • Testing a Site


Linking and Navigation

Once you’ve set up a Dreamweaver site to store your website documents and have created HTML pages, you’ll want to create connections from your documents to other documents.

Macromedia Dreamweaver MX provides several ways to create hypertext links to documents, images, multimedia files, or downloadable software. You can establish links to any text or image anywhere within a document, including text or images located in a heading, list, table, layer, or frame.

For a visual representation of how your files are linked together, use the site map. In the site map you can add new documents to your site, create and remove document links, and check links to dependent files (see Using the site map).

There are several different ways of creating and managing links. Some web designers prefer creating links to nonexistent pages or files as they work, while others prefer creating all the files and pages first, then adding the links. Another way to manage links is to create “placeholder” pages which stand in for the final file and let you add links quickly and check them before you have actually completed all the pages. For more information about checking links, see Checking links in a page or site.

This chapter contains the following sections:

About document locations and paths

Creating links

Managing links

Creating jump menus

Creating navigation bars

Creating image maps

Attaching behaviors to links

Next


About document locations and paths

Understanding the file path between the document you’re linking from and the document you’re linking to is essential to creating links.

Each web page has a unique address, called a Uniform Resource Locator (URL). (For more information on URLs, see the World Wide Web Consortium page on naming and addressing.) However, when you create a local link (a link from one document to another on the same site), you generally don’t specify the entire URL of the document you’re linking to; instead, you specify a relative path from the current document or from the site’s root folder.

The three types of link paths are as follows:

  • Absolute paths (such as http://www.macromedia.com/support/dreamweaver/contents.html). See Absolute paths.
  • Document-relative paths (such as dreamweaver/contents.html). See Document-relative paths.
  • Site root-relative paths (such as /support/dreamweaver/contents.html). See Site root-relative paths.

Using Dreamweaver, you can easily select the type of document path to create for your links. See Linking files and documents.

Note: It is best to use the type of linking you prefer and are most comfortable with either site or document relative. Browsing to links, as opposed to typing in the paths, ensures that you always enter the right path.


Absolute paths

Absolute paths provide the complete URL of the linked document, including the protocol to use (usually http:// for web pages). For example, http://www.macromedia.com/support/dreamweaver/contents.html is an absolute path.

You must use an absolute path to link to a document on another server. While you can also use absolute-path links for local links (to documents in the same site), that approach is discouraged—if you move the site to another domain, all of your local absolute-path links will break. Using relative paths for local links also provides greater flexibility if you need to move files within your site.

Note: When inserting images (not links): if you use an absolute path to an image that resides on a remote server and is not available on the local hard drive, you will not be able to view the image in your document window. Instead, you must preview the document in a browser to see it. If possible, use document or site root-relative paths for images. For more information, see Inserting an image.


Document-relative paths

Document-relative paths are the most appropriate paths to use for local links in most websites. They’re particularly useful when the current document and the linked document are in the same folder and are likely to remain together. You can also use a document-relative path to link to a document in another folder by specifying the path through the folder hierarchy from the current document to the linked document.

The basic idea of document-relative paths is to omit the part of the absolute URL that is the same for both the current document and the linked document, providing only the portion of the path that differs.

  • To link to another file in the same folder as the current document, simply enter the filename.
  • To link to a file in a subfolder of the current document’s folder, provide the name of the subfolder, then a forward slash (/), and then the filename.
  • To link to a file in the parent folder of the current document’s folder, precede the filename with ../ (where “..” means “up one level in the folder hierarchy”).

For example, suppose you have a site with the following structure:

This image shows a sample site file structure.

To link from contents.html to other files:
  • To link from contents.html to hours.html (both files are in the same folder), the filename is the relative path: hours.html.
  • To link to tips.html (in the subfolder named resources), use the relative path resources/tips.html.

    • Each forward slash (/) represents moving down one level in the folder hierarchy.

  • To link to index.html (in the parent folder, one level above contents.html), use the relative path ../index.html.

    • Each ../ represents moving up one level the folder hierarchy.

  • To link to catalog.html (in a different subfolder of the parent folder), use the relative path ../products/catalog.html.

    • The ../ moves up to the parent folder; the products/ moves down into the products subfolder.

Note: Always save a new file before creating a document-relative path; a document-relative path is not valid without a definite starting point. If you create a document-relative path before saving the file, Dreamweaver temporarily uses an absolute path beginning with file:// until the file is saved; when you save the file, Dreamweaver converts the file:// path into a relative path.

When you move a group of files as a group—for example, when you move an entire folder, so that all the files inside that folder retain the same relative paths to each other—you don’t need to update document-relative links between those files. However, when you move an individual file that contains document-relative links, or an individual file that’s linked to by a document-relative link, you do need to update those links. (If you move or rename files using the Site panel, Dreamweaver updates all relevant links automatically.)


Site root-relative paths

Site root-relative paths provide the path from the site’s root folder to a document. You may want to use these types of paths if you are working on a large website that uses several servers, or one server that hosts several different sites. However, if you are not familiar with this type of path, you may want to stick to document-relative paths.

A site root-relative path begins with a leading forward slash, which stands for the site root folder. For example, /support/tips.html is a site root-relative path to a file (tips.html) in the support subfolder of the site’s root folder.

A site root-relative path often provides the best way to specify links in a website in which you need to frequently move HTML files from one folder to another. When you move a document that contains root-relative links, you don’t need to change the links; for example, if your HTML files use root-relative links for dependent files (such as images), then if you move an HTML file, its dependent-file links are still valid. However, when you move or rename the documents linked to with root-relative links, you do need to update those links, even if the documents’ paths relative to each other haven’t changed.

For example, if you move a folder, all root-relative links to files within that folder must be updated. (If you move or rename files using the Site panel, Dreamweaver updates all relevant links automatically.)

To use site root-relative paths, first define a local folder in Dreamweaver by choosing a local root folder to serve as the equivalent of the document root on a server (see Setting up a Dreamweaver site).

Dreamweaver uses this folder to determine the site root-relative paths to files.

Note: Root-relative links are interpreted by servers, not by browsers, so if you open a local page that uses root-relative links in your browser (without using Preview in Browser from within Dreamweaver), the links don’t work. When you use the Preview in Browser command to preview a document that uses root-relative links, Dreamweaver temporarily converts those links (in the previewed file only) to use document-relative paths. However, you can preview only one page that uses root-relative links at a time—if you follow a link from the previewed page, the next page’s root-relative links are not converted, and the browser can’t follow such links. Previewing pages in framesets that use root-relative links results in similar problems.

To preview a set of pages that use root-relative links, do one of the following:
  • Put the files on a remote server and view them from there.
  • (Windows only) Choose Edit > Preferences, select Preview in Browser from the category list on the left, and then select Preview Using Local Server.

    • Note: To use this option, you must be running a web server on your local computer.


Creating links

The HTML tag for creating a hypertext link is called an anchor tag or an a tag. Dreamweaver creates an anchor tag for objects, text, or images you create links from. You can create links to other documents and files, and links to specific places in a single document using the a href tag.

For example, if you select the text Home Page in the Document window, then create a link to a file named home.htm, the HTML source code for the link looks like this:

<a href="home.htm">Home Page</a>

If you are creating a link to a specific place in a document, first create a named anchor (for example, a name="MainMenu"). Then create a link within the page that refers to that named anchor (for example, a href="#MainMenu").

Before creating links, make sure you understand how document-relative paths, site root-relative paths, and absolute paths work (see About document locations and paths).

You can create several types of links in a document:

  • A link to another document or to a file, such as a graphic, movie, PDF, or sound file. See Linking files and documents.
  • A named anchor link, which jumps to a specific location within a document. See Linking to a specific place in a document.
  • An e-mail link, which creates a new blank e-mail message with the recipient’s address already filled in. See Creating a hyperlink.
  • Null and script links, which enable you to attach behaviors to an object or to create a link that executes JavaScript code. See Creating null and script links.

Using Dreamweaver, there are several ways to create local links (links between documents in the same site):

  • Use the site map to view, create, change, or delete links.
  • In the Document window, select text or a page element, and then use Modify > Make Link to select a file to link to.
  • Use the Property inspector, by selecting text or a page element in the document, and then using the Property inspector folder icon or Point-to-File icon to select a file to link to or typing the path of the file.

    • Note: Typing URLs or paths to a file can lead to incorrect paths and links that don’t work. To ensure that the path is correct, use the folder icon to browse to your link.

  • In the Document window, select text or a page element, choose Make Link from the context menu, and then select a file to link to.

To create an external link (to a document on another site), you must type the absolute path (with proper protocol) in the Property inspector. Make sure that you enter the entire path (including http://) when creating external links.


Linking files and documents

You can use the Property inspector and the Point-to-File icon to create links from an image, an object, or text to another document or file. For information about using the site map to create links, see Creating and modifying links in the site map.

To link documents using the Property inspector’s folder icon or link text box:
  1. Select text or an image in the Document window’s Design view.
  2. Open the Property inspector (Window > Properties), and then do one of the following:
    This is a picture of the feature being described.
    • Click the folder icon to the right of the Link text box to browse to and select a file.

      • The path to the linked document appears in the URL field. Use the Relative To pop-up menu in the Select HTML File dialog box to indicate whether to make the path document-relative or root-relative, then click Select.

      Note: When you change the path type in the Relative To field, Dreamweaver uses your choice as the default path type for any future links until you change the path type again.

    • Type the path and filename of the document in the Link text box.

      • To link to a document in your site, enter a document-relative or site root-relative path. To link to a document outside your site, enter an absolute path including the protocol (such as http://). You can use this approach to enter a link for a file that hasn’t been created yet.

  3. From the Target pop-up menu, select a location in which to open the document.

    4. To make the linked document appear somewhere other than in the current window or frame, select an option from the Target pop-up menu on the Property inspector:

    • _blank loads the linked document in a new, unnamed browser window.
    • _parent loads the linked document in the parent frame or parent window of the frame that contains the link. If the frame containing the link is not nested, then the linked document loads in the full browser window.
    • _self loads the linked document in the same frame or window as the link. This target is the default, so you usually don’t have to specify it.
    • _top loads the linked document in the full browser window, thereby removing all frames.

      • Tip: If all the links on your page will be set to the same target, you can specify this target once by choosing Insert > Head Tag > Base and selecting the target information. For information about targeting frames, see Controlling frame content with links.

To link documents using the Point-to-File icon:
  1. Select text or an image in the Document window’s Design view.
  2. Drag the Point-to-File icon at the right of the Link text box in the Property inspector and point to another open document, a visible anchor in an open document, or a document in the Site panel.

    3. The Link text box updates to show the link.

    Note: You can link to an open document only if your documents are not maximized in the Document window. When you point to an open document, that document moves to the foreground of your screen while you are making your selection.

  3. Release the mouse button.
To create a link from a selection in an open document:
  1. Select text in the Document window.
  2. Shift-drag from the selection.

    3. The Point-to-File icon appears as you drag.

  3. Point to another open document, a visible anchor in an open document, or a document in the Site panel.

    4. Note: You can link to an open document only if your documents are not maximized in the Document window. When you point to an open document, that document moves to the foreground of your screen while you are making your selection.

  4. Release the mouse button.
To link documents using the site map and the Point-to-File icon:
  1. Expand the Site panel, and then display both the Site Files and the Site Map views by holding down the Site Map icon and choosing Map and Files.
  2. Select an HTML file in the site map.

    3. The Point-to-File icon appears next to the file.

  3. Drag the Point-to-File icon and point to another file in the site map or to a local file in the Site Files view.
  4. Release the mouse button.

    5. A hypertext link with the name of the linked file is placed at the bottom of the selected HTML file. This method works well when you are building your site and you want to create links across the site quickly.


Linking to a specific place in a document

You can use the Property inspector to link to a particular section of a document by first creating named anchors. Named anchors let you set markers in a document, which are often placed at a specific topic or at the top of a document. You can then create links to these named anchors, which quickly take your visitor to the specified position.

Creating a link to a named anchor is a two-step process. First, create a named anchor; then create a link to the named anchor.

To create a named anchor:
  1. In the Document window’s Design view, place the insertion point where you want the named anchor.
  2. Do one of the following:
    • Choose Insert > Named Anchor.
    • Press Control+Alt+A (Windows) or Command+Option+A (Macintosh).
    • Select the Common tab in the Insert bar and click the Named Anchor button.

      • The Named Anchor dialog box appears.
      This is a picture of the feature being described.

  3. In the Anchor Name field, type a name for the anchor.

    4. For more information, see Setting the Named Anchor option.

    The anchor marker appears at the insertion point.

    Note: If you do not see the anchor marker, choose View > Visual Aids > Invisible Elements.

To link to a named anchor:
  1. In the Document window’s Design view, select text or an image to create a link from.
  2. In the Link text box of the Property inspector, type a number sign (#) and the name of the anchor. For example:
    • To link to an anchor named “top” in the current document, type #top.
    • To link to an anchor named “top” in a different document in the same folder, type filename.html#top.

      • Note: Anchor names are case sensitive.

To link to a named anchor using the point-to-file method:
  1. Open the document containing the named anchor you want.

    2. Note: Choose View > Visual Aids > Invisible Elements to make the anchor visible if you don’t see it.

  2. In the Document window’s Design view, select text or an image you want to link from. (If this is another open document, you must switch to it.)
  3. Do one of the following:
    • Click the Point-to-File icon to the right of the Link text box in the Property inspector and drag it to the anchor you want to link to: either an anchor within the same document or an anchor in another open document.
    • Shift-drag in the Document window from the selected text or image to the anchor you want to link to: either an anchor within the same document or an anchor in another open document.


Creating a hyperlink

You can add hyperlink text to link to another file.

To add a hyperlink using the Hyperlink command:
  1. Place the insertion point in the document where you want the hyperlink to appear.
  2. Do one of the following to display the Insert Hyperlink dialog box:
    • Choose Insert > Hyperlink.
    • Select the Common tab in the Insert bar, and then click the Hyperlink button.

      • The Hyperlink dialog box appears.
      This is a picture of the feature being described.

  3. Complete the dialog box.

    4. For more information, see Setting hyperlink options.

  4. Click OK.


Creating an e-mail link

An e-mail link opens a new blank message window (using the mail program associated with the user’s browser) when clicked. In the e-mail message window, the To field is automatically updated with the address specified in the e-mail link.

To create an e-mail link using the Insert E-Mail Link command:
  1. In the Document window’s Design view, position the insertion point where you want the e-mail link to appear, or select the text or image you want to appear as the e-mail link.
  2. Do one of the following to insert the link:
    • Choose Insert > E-Mail Link.
    • Select the Common tab in the Insert bar, and then click the Insert E-Mail Link button.

      • The E-Mail Link dialog box appears.
      This is a picture of the feature being described.

  3. Complete the dialog box.

    4. For more information, see Setting Email Link options.

  4. Click OK.
To create an e-mail link using the Property inspector:
  1. Select text or an image in the Document window’s Design view.
  2. In the Link text box of the Property inspector, type mailto: followed by an e-mail address.

    3. Do not type any spaces between the colon and the e-mail address. For example, type mailto:jdoe@macromedia2.com.


Creating null and script links

The most familiar kinds of links are those to documents and named anchors (described in Linking files and documents and Linking to a specific place in a document, respectively), but there are other types of links as well.

A null link is an undesignated link. Use null links to attach behaviors to objects or text on a page. Once you have created a null link, you can attach a behavior to it to swap an image or to display a layer when the pointer is moved over the link. For information about attaching behaviors to objects, see Applying a behavior.

Script links execute JavaScript code or call a JavaScript function and are useful for giving visitors additional information about an item without leaving the current web page. Script links can also be used to perform calculations, form validations, and other processing tasks when a visitor clicks a specific item.

To create a null link:
  1. Select text, an image, or an object in the Document window’s Design view.
  2. In the Property inspector, type javascript:; (the word javascript, followed by a colon, followed by a semicolon) in the Link text box.
To create a script link:
  1. Select text, an image, or an object in the Document window’s Design view.
  2. In the Link text box of the Property inspector, type javascript: followed by some JavaScript code or a function call.

    3. For example, typing javascript:alert('This link leads to the index') in the Link text box produces a link that, when clicked, displays a JavaScript alert box with the message This link leads to the index.

    Note: Because the JavaScript code appears in the HTML between double quotation marks (as the value of the href attribute), you must use single quotation marks in the script code or “escape” any double quotation marks by preceding them with a backslash (for example, \"This link leads to the index\").


Managing links

Dreamweaver can update links to and from a document whenever you move or rename the document within a local site. This feature works best when you store your entire site (or an entire self-contained section of it) on your local disk. Dreamweaver does not change files in the remote folder until you put the local files on or check them in to the remote server.

To turn on link management in Dreamweaver:
  1. Choose Edit > Preferences or Dreamweaver > Preferences (Mac OS X).

    2. The Preferences dialog box appears.

  2. Select General from the category list on the left.

    3. The General preferences options appear.
    This is a picture of the feature being described.

  3. In the Document Options section, select Always or Prompt from the Update Links when Moving Files pop-up menu.

    4. If you choose Always, Dreamweaver automatically updates all links to and from a selected document whenever you move or rename it. (For specific instructions on what to do when you delete a file, see Changing a link sitewide.)

    If you choose Prompt, Dreamweaver first displays a dialog box that lists all the files affected by the change. Click Update to update the links in these files, or click Don’t Update to leave the files unchanged.

  4. Click OK.

To make the updating process faster, Dreamweaver can create a cache file in which to store information about all the links in your local folder. This cache file is created when you select the Cache option in the Site Definition dialog box, and the cache file updates invisibly as you use Dreamweaver to add, change, or delete links to files on your local site.

To create a cache file for your site:
  1. Choose Site > Edit Sites.

    2. The Edit Sites dialog box appears.

  2. Select a site, and then click Edit.
  3. Select Local Info from the category list on the left.

    4. The Site Definition dialog box displays the Local Info options.

  4. In the Local Info category, select the Enable Cache checkbox.

The first time you change or delete links to files in your local folder after launching Dreamweaver, Dreamweaver prompts you to load the cache. If you click Yes, the cache loads and Dreamweaver updates all the links to the file you just changed. If you click No, the change is noted in the cache, but the cache does not load, and Dreamweaver does not update links.

It may take a few minutes for the cache to load on larger sites; most of this time is spent comparing the time stamps of the files on the local site with the time stamps recorded in the cache to see if the cache is out of date. If you have not changed any files outside Dreamweaver, you can safely click the Stop button when it appears.

To re-create the cache for your site:

In the Site panel, choose Site > Recreate Site Cache.


Creating and modifying links in the site map

You can modify the structure of the site in the site map by adding, changing, and removing links. Dreamweaver automatically updates the site map to display the changes to the site.

To add a link, do one of the following:
  • Drag a page from the Windows Explorer or the Macintosh Finder onto a page in the site map.

    • Note: Make sure the Site panel is docked, and then click the Expand arrow. Hold down the Site Map button, and then select Files and Map.

  • Select an HTML page in the site map, and then choose Site > Link to Existing File (Windows) or Site > Site Map View > Link to Existing File (Macintosh), or choose Link to Existing File from the context menu.
  • Select an HTML page in the site map, and then choose Site > Link to New File (Windows) or Site > Site Map View > Link to New File (Macintosh), or choose Link to New File from the context menu.
  • Select an HTML page in the site map; the Point-to-File icon appears. Drag the icon to the object you want to link to: either a file in the Site Files view, an open Dreamweaver document, or a named anchor in a document open on the desktop.

    • Note: For more information, see Linking files and documents.

To change a link:
  1. In the site map, select a page to which you want to change the link (so that the document that currently links to this page will point to another page), and then do one of the following:
    • Choose Site > Change Link (Windows) or Site > Site Map View > Change Link (Macintosh).

      • Note: Use the Site panel’s Site menu.

    • Right-click (Windows) or Control-click (Macintosh), and choose Change Link from the context menu.
  2. Browse to the file you want the link to point to or type a URL.
  3. Click OK.
To remove a link, do one of the following:
  • Select the page in the site map, and then choose Site > Remove Link (Windows) or Site > Site Map View > Remove Link (Macintosh).

    • Note: Use the Site panel’s Site menu.

  • Select the page in the site map, and right-click (Windows) or Control-click (Macintosh), and choose Remove Link from the context menu.

    • Removing a link does not delete the file, but removes the link from the HTML source on the page that is pointing to the link.

To open the source of a link:

Select a file in the site map, and do one of the following:

  • Choose Site > Open Source of Link (Windows) or Site > Site Map View > Open Source of Link (Macintosh).
  • Right-click (Windows) or Control-click (Macintosh), and choose Open Source of Link from the context menu.

    • The Property inspector and the source file containing the link open in the Document window, with the link highlighted.


Changing a link sitewide

In addition to having Dreamweaver update links automatically whenever you move or rename a file, you can manually change all links (including e-mail, FTP, null, and script links) to point somewhere else.

You can use this option at any time (for example, you might have the words “this month’s movies” linked to /movies/july.html throughout your site, and on August 1 you must change those links to point to /movies/august.html), but it’s particularly useful when you want to delete a file that other files link to.

To change a link sitewide:
  1. Select a file in the Local view of the Site panel.

    2. Note: If you are changing an e-mail, FTP, null, or script link, you do not need to select a file.

  2. Choose Site > Change Link Sitewide.

    3. The Change Link Sitewide dialog box appears.
    This is a picture of the feature being described.

  3. Complete the dialog box

    4. For more information, see Setting the Change Link Sitewide options.

  4. Click OK.

    5. Dreamweaver updates any documents that link to the selected file, making them point to the new file, using the path format already used in the document (for example, if the old path was document relative, the new path is also document relative). The type of the link, whether document or root-relative, doesn’t matter. Dreamweaver automatically updates the link.

After you change a link sitewide, the selected file becomes an orphan (that is, no files on your local disk point to it). You can safely delete it without breaking any links in your local Dreamweaver site.

Note: Because these changes occur locally, you must manually delete the corresponding orphan file in the remote folder and put or check in any files in which links were changed; otherwise, visitors to your site won’t be able to see the changes.


Creating jump menus

A jump menu is a pop-up menu in a document, visible to your site visitors, listing options that link to documents or files. You can create links to documents in your website, links to documents on other websites, e-mail links, links to graphics, or links to any file type that can be opened in a browser.

A jump menu can contain three basic components:

  • A menu selection prompt, such as a category description for the menu items, or instructions, such as “Choose one:” (Optional)
  • A list of linked menu items: a user chooses an option and a linked document or file opens. (Required)
  • A Go button. (Optional)


Inserting a jump menu

To insert a jump menu in your document, use the Jump Menu form object.

To create a jump menu:
  1. Open a document, and then place the insertion point in the Document window.
  2. Do one of the following:
    • Choose Insert > Form Object > Jump Menu.
    • Select the Form tab in the Insert bar, and then click the Jump Menu button.

      • The Insert Jump Menu dialog box appears.
      This is a picture of the feature being described.

  3. Complete the dialog box.

    4. For more information, see Setting Insert Jump Menu options.

  4. Click OK.

    5. The jump menu appears in your document.


Editing jump menu items

To make changes to jump menu items, use the Property inspector or the Behaviors panel. You can change the list order or the file an item links to, or you can add, delete, or rename an item.

To change the location in which a linked file opens, or to add or change a menu selection prompt, you must use the Behaviors panel (see Jump Menu).

To edit a jump menu item using the Property inspector:
  1. Choose Window > Properties to open the Property inspector, if it isn’t open.
  2. In the Document window’s Design view, click the jump menu object to select it.

    3. The List/Menu icon appears in the Property inspector.

  3. In the Property inspector, click the List Values button.

    4. The List Values dialog box appears.
    This is a picture of the feature being described.

  4. Make changes to the menu items as necessary, and then click OK.


Troubleshooting jump menus

Once users choose a jump menu item, there is no way to reselect that menu item if they navigate back to that page, or if the Open URL In field specifies a frame. There are two ways to work around this problem:

  • Use a menu selection prompt, such as a category, or a user instruction, such as “Choose one:”. The menu selection prompt is reselected automatically after each menu selection.
  • Use a Go button, which allows a user to revisit the currently chosen link.

Note: Select only one of these options per jump menu, in the Insert Jump Menu dialog box, because they apply to an entire jump menu.


Creating navigation bars

A navigation bar consists of an image (or set of images) whose display changes based on the actions of a user. Navigation bars often provide an easy way to move between pages and files on a site.

This is a picture of the feature being described.

Before using the Insert Navigation Bar command, create a set of images for the display states of each navigation element. (It can be helpful to think of a navigation bar element as a button, because when clicked, it takes the user to another page.)

A navigation bar element can have four states:

  • Up: the image that appears when the user hasn’t yet clicked or interacted with the element.

    • For example, the element in this state looks like it hasn’t been clicked.
    This is a picture of the feature being described.

  • Over: the image that appears when the pointer is moved over the Up image. The element’s appearance changes (for example, it may get lighter) to let users know they can interact with it.
    This is a picture of the feature being described.
  • Down: the image that appears after the element has been clicked.

    • For example, when a user clicks an element, a new page loads and the navigation bar is still displayed, but the clicked element is darkened to show that it’s been selected.

  • Over While Down: the image that appears when the pointer is rolled over the Down image after the element has been clicked.

    • For example, the element appears dimmed or gray. You can use this state as a visual clue to users that this element cannot be clicked again while they are in this part of the site.

You don’t have to include navigation bar images for all four of these states; for example, you may just want Up and Down states.

You can create a navigation bar, copy it to other pages in your site, use it with frames, and edit the page behaviors to show different states as pages are accessed.


Inserting a navigation bar

When you insert a navigation bar, you name the navigation bar elements and select images to use for them.

To create a navigation bar:
  1. Do one of the following:
    • Choose Insert > Interactive Images > Navigation Bar.
    • Select the Common tab of the Insert bar, and then click the Insert Navigation Bar button.

      • The Insert Navigation Bar dialog box appears.
      This is a picture of the feature being described.

  2. Complete the dialog box.

    3. For more information, see Setting Navigation Bar options.

  3. Click OK.


Modifying a navigation bar

Once you create a navigation bar for a document, you can add images to or remove them from the navigation bar by using the Modify Navigation Bar command. You can use this command to change an image or set of images, to change which file opens when an element is clicked, to select a different window or frame in which to open a file, and to reorder the images.

To modify a navigation bar:
  1. Choose Modify > Navigation Bar.

    2. The Modify Navigation Bar dialog box appears.
    This is a picture of the feature being described.

  2. In the Nav Bar Elements list, select the element you want to edit.
  3. Make changes as necessary.

    4. For more information, see Setting Navigation Bar options.

  4. Click OK.


Creating image maps

An image map is an image that has been divided into regions, or “hotspots”; when a user clicks a hotspot, an action occurs (for example, a new file opens). Use the image Property inspector to graphically create and edit client-side image maps.

Client-side image maps store the hypertext link information in the HTML document—not in a separate map file as server-side image maps do. When a site visitor clicks a hotspot in the image, the associated URL is sent directly to the server. This makes client-side image maps faster than server-side image maps, because the server does not need to interpret where the visitor clicked. Client-side image maps are supported by Navigator 2.0 and later versions, NCSA Mosaic 2.1 and 3.0, and all versions of Internet Explorer.

Dreamweaver does not alter references to server-side image maps in existing documents; you can use both client-side image maps and server-side image maps in the same document. However, browsers that support both types of image maps give priority to client-side image maps. To include a server-side image map in a document, you must write the appropriate HTML code.


Inserting client-side image maps

When you insert a client-side image map, you create a hotspot area, and then define a link that opens when a user clicks the hotspot area.

Note: You can create multiple hotspot areas, but they are part of the same image map.

To create a client-side image map:
  1. In the Document window, select the image.
  2. In the Property inspector, click the expander arrow in the lower right corner to see all properties.
  3. In the Map Name field, type a unique name for the image map.

    4. Note: If you are using multiple image maps in the same document, make sure each map has a unique name.

  4. To define the image map areas, do one of the following:
    • Select the circle tool and drag the pointer over the image to create a circular hotspot.
    • Select the rectangle tool and drag the pointer over the image to create a rectangular hotspot.
    • Select the polygon tool and define an irregularly shaped hotspot by clicking once for each corner point. Click the arrow tool to close the shape.

      • After you create the hotspot, the hotspot Property inspector appears.

  5. Complete the hotspot Property inspector.

    6. For more information, see Setting the Hotspot Property inspector options.

  6. When you finish mapping the image, click a blank area in the document to change the Property inspector.


Modifying an image map

You can easily edit the hotspots you create in an image map. You can move a hotspot area, resize hotspots, or move a hotspot forward or back in layer.

You can also copy an image with hotspots from one document to another, or copy one or more hotspots from an image and paste them on another image; hotspots associated with the image are also copied to the new document.

To select multiple hotspots in an image map:
  1. Use the pointer hotspot tool to select a hotspot.
  2. Do one of the following:
    • Shift-click the other hotspots you want to select.
    • Press Control+A (Windows) or Command+A (Macintosh) to select all of the hotspots.
To move a hotspot:
  1. Use the pointer hotspot tool to select the hotspot you want to move.
  2. Do one of the following:
    • Drag the hotspot to a new area.
    • Use the Shift + arrow keys to move a hotspot by 10 pixels in the selected direction.
    • Use the arrow keys to move a hotspot by 1 pixel in the selected direction.
To resize a hotspot:
  1. Use the pointer hotspot tool to select the hotspot you want to resize.
  2. Drag a hotspot selector handle to change the size or shape of the hotspot.


Attaching behaviors to links

You can attach a behavior to any link in a document (see Applying a behavior). Consider using the following behaviors when you insert linked elements into documents:

Set Text of Status Bar determines the text of a message and display it in the status bar at the bottom left of the browser window. For example, you can use this action to describe the destination of a link in the status bar instead of showing the URL associated with it. (See Set Text of Status Bar.)

Open Browser Window opens a URL in a new window. You can specify the properties of the new window, including its size, attributes (whether it is resizable, has a menu bar, and so on), and name. (See Open Browser Window.)

Jump Menu edits a jump menu. You can change the menu list, specify a different linked file, or change the browser location in which the linked document opens. (See Jump Menu.)

Set Nav Bar Image changes how a navigation bar behaves. Use this behavior to customize how the images in a navigation bar display. For example, when the pointer is over part of the navigation bar, the display of other images in the navigation bar or in the document change. (See Set Nav Bar Image.)


Reference

This section contains information about the dialog boxes introduced in this chapter.


Setting the Named Anchor option

The purpose of this dialog box is to provide a name for a named anchor.

Procedure
  1. Enter a name for the named anchor.

    2. Anchor names cannot contain spaces and should not be placed inside a layer.

  2. Press OK.

Related topic

Linking to a specific place in a document


Setting hyperlink options

The purpose of this dialog box is to create a hyperlink.

Procedure
  1. In the Text field, enter the text to appear as a hyperlink in the document.
  2. In the Link text box, enter the name of the file to link to, or click the folder icon to browse to and select the file.
  3. In the Target pop-up menu, choose the window in which the file should open in the Target field.

    4. The names of all the frames you’ve named in the current document appear in the pop-up list. If you specify a frame that doesn’t exist, when the document opens in a browser, the linked page loads into a new window that has the name you specified.

    You can also choose from the following reserved target names:

    • _blank loads the linked file into a new, unnamed browser window.
    • _parent loads the linked file into the parent frameset or window of the frame that contains the link. If the frame containing the link is not nested, the linked file loads into the full browser window.
    • _self loads the linked file into the same frame or window as the link. This target is the default, so you usually don’t need to specify it.
    • _top loads the linked file into the full browser window, thereby removing all frames.
  4. In the Tab Index field, enter a number for the tab order.
  5. In the Title field, enter a title for the hyperlink.
  6. In the Access Key field, enter a keyboard equivalent (one letter) to select the hyperlink in the browser.

Related topic

Creating a hyperlink


Setting Email Link options

The purpose of this dialog box is to create an e-mail link.

Procedure
  1. In the Text field, type or edit the text to appear in the document as an e-mail link.
  2. In the E-Mail field, type the e-mail address that the mail should be addressed to.
  3. Click OK.

Related topic

Creating a hyperlink


Setting the Change Link Sitewide options

The purpose of this dialog box is to change a link to a file in your site.

Procedure
  1. Beside the Change All Links to text box, click the folder icon to browse to and select the file that you want to change the link to.

    2. Note: If you are changing e-mail, FTP, null, or script links, type the full text of the link you are changing.

  2. Beside the Into Links To field, click the folder icon to browse to and select the new file to link to.

    3. If you are changing e-mail, FTP, null, or script links, type the full text of the replacement link. For example, to update all the e-mail links that point to your old address, you might type mailto:juser@isp.com in the Change All Links To text box, and type mailto:juser-interface@isp.com in the Into Links To text box.

  3. Click OK.

Related topic

Changing a link sitewide


Setting Insert Jump Menu options

The purpose of this dialog box is to set up a jump menu.

Procedure
  1. Click the plus (+) button to add a menu item.

    2. Click the button again to add additional menu items. Select a menu item and click the minus (-) button to remove an item.

  2. Select a menu item, and then use the arrow keys to move it up or down in the list.
  3. In the Text field, type the text you want to appear in the menu list for a menu item.

    4. To use a menu selection prompt, such as “Choose One,” enter your selection text in the Text field for the first menu item.

  4. In the When Selected Go To URL text box, click the folder icon to browse to the file to open, or type the file path in the text box.
  5. In the Open URLs In pop-up menu, select a location in which to open the file:
    • Main Window opens the file in the same window.
    • Frame opens the file in the frame you select.

      • Note: If the frame you want to target doesn’t appear on the Open URLs In pop-up menu, close the Insert Jump Menu dialog box, and name the frame in your document. For information about naming a frame, see Viewing and setting frame properties.

  6. In the Menu Name text box, type a name for the menu item.
  7. Under Options, select Insert Go Button After Menu to add a Go button instead of a menu selection prompt.
  8. Under Options, select Select First Item After URL Change if you use a menu selection prompt (such as Choose One).
  9. Click OK.

Related topics

Inserting a jump menu

Troubleshooting jump menus


Setting Navigation Bar options

The purpose of this dialog box is to name navigation bar elements and select images to use for them.

Procedure
  1. In the Element Name text box, type a name for a navigation bar element—for example, Home.

    2. Each element corresponds to a button with a set of up to four state images. Element names appear in the Nav Bar Elements list. Use the arrow buttons to arrange elements in the navigation bar.

  2. In the Up Image text box, click Browse to select the image to display initially.

    3. Note: This field is required; the other image state options are optional.

  3. In the Over Image text box, click Browse to select the image to display when the user moves the pointer over the element when the Up image is showing.
  4. In the Down Image text box, click Browse to select the image to display after the user has clicked the element.
  5. In the Over While Down Image text box, click Browse to select the image to display when the user moves the pointer over the Down image.
  6. In the Alternate text box, enter a descriptive name for the element.

    7. Alternate text appears in place of images for text-only browsers or for browsers that have been set to download images manually. Screen readers read alternate text, and some browsers display alternate text when the user mouses over the navigation bar element.

  7. In the When Clicked, Go To URL text box, click the Browse button to select a linked file to open, and then choose a location from the pop-up menu where the file will open. Choose one of the following:
    • Select Main Window to open the file in the same window.
    • Select a frame in which to open the file if the navigation bar is in a frameset.

      • Note: If the frame you want to target doesn’t appear in the pop-up menu, close the Insert Navigation Bar dialog box and name the frame (see Viewing and setting frame properties).

  8. Select Preload Images to download the images when the page loads.

    9. If you don’t select this option, there may be a delay when the user moves the pointer over the rollover image.

  9. Select Show “Down Image” Initially to display the selected element in its Down state when the page is displayed instead of its default Up state.

    10. For example, when the home page loads, the “Home” element on the navigation bar should be in its Down state.

    When this option is selected, an asterisk appears after the element in the Nav Bar Elements list.

  10. In the Inserts pop-up menu choose whether to insert the navigation bar elements vertically or horizontally in the document.
  11. Select the Use Tables checkbox to insert the navigation bar elements as a table.
  12. Click the plus (+) button to add another element to the navigation bar, then repeat the previous steps to define the element.
  13. Click OK when you finish adding and defining elements to the navigation bar.

Related topics

Inserting a navigation bar

Modifying a navigation bar


Setting the Hotspot Property inspector options

The purpose of this dialog box is to create a client-side image map.

Procedure
  1. In the hotspot Property inspector’s Link text box, click the folder icon to browse to and select the file you want to open when the user clicks the hotspot, or type the filename.

    2. If you are linking to a file from within the same site, enter a path that is relative to your document. (Filenames that begin with file:// are not relative.)

  2. In the Target pop-up menu, choose the window in which the file should open in the Target field.

    3. The names of all the frames you’ve named in the current document appear in the pop-up list. If you specify a frame that doesn’t exist, when the document opens in a browser, the linked page loads into a new window that has the name you specified. You can also choose from the following reserved target names:

    _blank loads the linked file into a new, unnamed browser window.

    _parent loads the linked file into the parent frameset or window of the frame that contains the link. If the frame containing the link is not nested, the linked file loads into the full browser window.

    _self loads the linked file into the same frame or window as the link. This target is the default, so you usually don’t need to specify it.

    _top loads the linked file into the full browser window, thereby removing all frames.

    Note: The target option isn’t available until the selected hotspot contains a link.

  3. In the Alt field, type the text you want to appear as alternative text in text-only browsers or for browsers that have been set to download images manually.

    4. Some browsers display this text as a tooltip when the user pauses the mouse pointer over the hotspot.

  4. Repeat steps 4 through 7 to define additional hotspots in the image map.
  5. When you finish mapping the image, click a blank area in the document to change the Property inspector.

Related topic

Creating image maps

Previous


Managing Site Assets, Libraries, and Templates

As you develop websites, you accumulate a growing number of assets. In some cases, you might use the same assets across multiple sites, or perhaps you have a set of favored assets that you use in all your sites. In Macromedia Dreamweaver MX, you can use the Assets panel to help manage your site assets. The Assets panel lets you easily keep track of and preview several kinds of assets that you have stored in your site, such as images, movies, colors, scripts, and links. You can easily drag an asset from the Assets panel directly to your current document to insert it in a page.

The Assets panel also provides access to two special types of assets—libraries and templates. Library items and templates are linked assets: editing a library item or template updates all documents in which these assets have been applied. Use library items and templates when you want to reuse specific content or design elements throughout a site or across multiple sites. Library items are intended for individual design elements, such as a site’s copyright information or a logo. Templates let you control a larger design area. A template author designs a page and defines which areas of the page can accept either design or content edits.

The following topics are covered in this chapter:

  • Using the Assets panel
  • Managing the Assets panel
  • Working with Library items
  • Creating, managing, and editing library items
  • About Dreamweaver templates
  • Creating a Dreamweaver template
  • About defining template regions
  • Creating a template-based document
  • Creating a nested template
  • Editing and updating templates
  • Exporting and importing template XML content
Next


Using the Assets panel

Assets covers a variety of elements that you store in a site, such as an image or movie file.

You can obtain assets from various sources. For example, you might create assets in an application such as Macromedia Fireworks or Macromedia Flash, receive them from a co-worker or client, copy them from a clip-art CD, or copy an image from a graphics web site. For more information about planning and gathering assets, see About site planning and design.

You can use the Assets panel in two ways: as an easily accessible list of the assets in your site (the Site list), or as a way to organize the assets that you use most frequently (the Favorites list). The Assets panel automatically puts your site’s assets in the Site list. You add whatever assets you want to the Favorites list.

Most of the Assets panel operations work the same in the Site list and in the Favorites list. There are a few tasks, however, that you can perform only in the Favorites list (see Setting up a Favorites list of assets).


Opening the Assets panel

Use the Assets panel to view assets in the current site or to view assets that you’ve saved to a Favorites list.

You must define a local site before you can view assets in the Assets panel.

To open the Assets panel:

Choose Window > Assets.

The Assets panel appears. By default, the Images category is selected.

This is a picture of the feature being described.


Selecting an assets category

The Assets panel helps you manage and organize your site’s assets more easily than you can in the Site panel. Assets are categorized and display in a list.

To view assets in a particular category, click the appropriate icon. Dreamweaver displays the following categories of assets:

Images are image files in GIF, JPEG, or PNG formats. For information about images, see Inserting Images.

This is a picture of the feature being described.

Colors are the colors that are used in documents and style sheets in your site, including text colors, background colors, and link colors.

This is a picture of the feature being described.

URLs are the external links in your current site documents. This category includes the following types of links: FTP, gopher, HTTP, HTTPS, JavaScript, e-mail (mailto), and local file (file://).

This is a picture of the feature being described.

Flash movies are files in any version of Macromedia Flash format. The Assets panel displays only SWF files (compressed Flash files), but not FLA (Flash source) files. See About Flash content.

This is a picture of the feature being described.

Shockwave movies are files in any version of Macromedia Shockwave format. See Inserting Shockwave movies.

This is a picture of the feature being described.

Movies are files in QuickTime or MPEG format. See Inserting Media.

This is a picture of the feature being described.

Scripts are JavaScript or VBScript files. Note that scripts in HTML files (rather than in independent JavaScript or VBScript files) do not appear in the Assets panel. For information on working with JavaScript in Macromedia Dreamweaver, see Using the JavaScript debugger.

This is a picture of the feature being described.

Templates provide an easy way to reuse the same page layout on multiple pages and to modify the layout on all pages attached to a template when a template is modified. See About Dreamweaver templates.

This is a picture of the feature being described.

Library items are elements that you use in multiple pages; when you modify a library item, all pages that contain that item are updated. See Working with Library items.

This is a picture of the feature being described.

Note: Only files that fit into these categories show in the Assets panel. There are other types of files that are sometimes called assets, but they aren’t shown in the panel.


Viewing assets in the Assets panel

The Assets panel provides two ways to view assets: the Site list, which shows all of the assets in your site, and the Favorites list, which shows only the assets you’ve explicitly chosen.

In both lists, assets are divided into categories: You select which category of assets to list by clicking one of the category buttons on the left side of the panel. The Site list and the Favorites list are both available for all categories of assets except templates and library items.

The Site list displays all assets that exist as files in your site, as well as all colors and URLs that are used in any document in your site.

Most of the following procedures can be performed in either the Site list or the Favorites list.

To view the Site list:

Click Site at the top of the Assets panel.

Note: In the Templates and Library categories, the Site and Favorites choices are unavailable.

To view the Favorites list:

Click Favorites at the top of the Assets panel.

The Favorites list is empty until you explicitly add assets to it.

To display assets in a particular category:

Click the appropriate category icon, and click either Site or Favorites. For example, to display all of the images in your site, click the Images icon and then click Site.

To preview an asset:

Select the asset in the Assets panel.

The preview area at the top of the panel shows a visual preview of the asset. For example, when you select a movie asset, the preview area shows an icon. To view the movie, click the Play button (the green triangle) in the upper right corner of the preview area.

To change the size of the preview area:

Drag the splitter bar (between the preview area and the list of assets) up or down.


Refreshing the Assets panel

It can take a few seconds for the Assets panel to create the Site list, because it has to read the site cache to create the list.

Certain changes don’t appear immediately in the Assets panel:

  • When you add or remove an asset from your site, the changes won’t appear in the Assets panel until you refresh the Site list by clicking the Refresh Site List button. If you add or remove an asset outside of Dreamweaver—using Windows Explorer or the Finder, for example—you must rebuild the site cache to update the Assets panel.
  • When you remove the only instance of a particular color or URL in your site, or when you save a new file that contains a color or URL that isn’t already used in the site, the changes won’t appear in the Assets panel until you refresh the Site list.
To manually refresh the Site list:
  1. Click Site on the Assets panel to see the Site list
  2. Click the Refresh Site List button at the bottom of the Assets panel.
    This is a picture of the feature being described.

    3. The site cache is created or updated as necessary, and the Assets panel updates to show the site assets.

To manually rebuild the site cache and refresh the Site list:

Control-click (Windows) or Command-click (Macintosh) in the Assets Panel List, then select Refresh Site List.


Adding an asset to a page

You can insert most kinds of assets into a document by dragging them into the Code view or Design view in the Document window, or by using the Insert button. You can either insert colors and URLs or apply them to selected text in the Design view. (URLs can also be applied to other elements in the Design view, such as images.) Templates are applied to the entire document.

To insert an asset in a document:
  1. Place the insertion point in the Design view where you want the asset to appear.
  2. Choose Window > Assets to open the Assets panel (if it’s not already open).
  3. Select the asset category for the type of asset you want to insert.

    4. Select any category except Templates. A template can be applied only to an entire document; it can’t be inserted into a document.

  4. Select either Site or Favorites, and locate the desired asset.

    5. There are no Site or Favorites lists for library items; skip this step if you’re inserting a library item.

  5. Do one of the following:
    • Drag the asset from the panel to the document. You can drag scripts into the head content area of the Document window; if that area isn’t showing, choose View > Head Content.
    • Select the asset in the panel and click Insert.

      • The asset is inserted into the document. (If the asset is a color, it applies starting at the insertion point; that is, subsequent typing appears in that color.)


Using the Assets panel to apply a color

The colors in the Assets panel represent colors you’ve applied to various elements in your site, such as text, table border, background color, and so on. You can use the color swatches in the Color category to consistently apply your color choices to objects on a page.

For information about adding a color to the Color category, see Creating a new color or URL to add to the Favorites list.

To change the color of selected text in a document:
  1. Select the text in the document.
  2. Select the Colors category in the Assets panel.
    This is a picture of the feature being described.
  3. Select the desired color.
  4. Click Apply.


Using the Assets panel to add a URL link in a document

You can use the Assets panel to insert a URL link in a document or to apply a URL link to selected text.

To add a link to the current selection in a document:
  1. Select the text or image where you want to apply the URL.
  2. Select the URLs category in the Assets panel, and locate the desired URL.
    This is a picture of the feature being described.
  3. Do one of the following:
    • Drag the URL from the panel to the selection in the Design view.
    • Select the URL, and click the Insert button.
To add a link in a document:
  1. Place the insertion point in the document where you want to add the URL.
  2. Select the URLs category in the Assets panel, and locate the desired URL.
    This is a picture of the feature being described.
  3. Do one of the following:
    • Drag the URL from the panel to the selection in the Design view.
    • Select the URL, and click the Insert button.


Selecting and editing assets

The Assets panel allows you to select multiple assets at once. It also provides a quick way to begin editing assets.

To select multiple assets:

Select one of the assets by clicking it. Then select the other assets in one of the following ways:

  • Shift-click to select a consecutive series of assets.
  • Control-click (Windows) or Command-click (Macintosh) to add an individual asset to the selection (whether or not it’s adjacent to the existing selection). Control-click or Command-click a selected asset to deselect it.
To edit an asset:
  1. Do one of the following:
    • Double-click the asset.
    • Select the asset, then click Edit.

      • For some kinds of assets, such as images, editing the asset starts an external editing application. For colors and URLs, editing the asset lets you change the asset’s value in the Favorites list only. (You can’t edit colors and URLs in the Site list.) For templates and library items, editing the asset allows you to make changes to the asset within Dreamweaver.

      If an external editor doesn’t open for an asset that’s supposed to use one, choose Edit > Preferences or Dreamweaver > Preferences (Mac OS X), select the File Types/Editors category, and make sure you have an external editor defined for the asset’s file type. See Launching an external editor for media files.

  2. Change the asset as desired.
  3. When you’re done editing the asset, do one of the following:
    • If the asset is a file-based asset (anything other than a color or URL), save it (using whatever editor you used to edit it) and close it.
    • If the asset is a URL, click OK when you’re finished editing in the Edit URL dialog box.

      • If the asset is a color, the Dreamweaver color picker is dismissed automatically when you pick a color. (To dismiss the color picker without picking a color, press Escape.)


Using the Library category of the Assets panel

The Library category of the Assets panel displays all of the items in the current site’s library.

For information about changing or updating a library item see Editing a library item.

To create a new empty library item in the Assets panel:
  1. Make sure nothing is selected in the Document window.

    2. If something is selected, it will be placed in the new library item.

  2. Click the New Library Item button at the bottom of the Assets panel.

    3. A new, untitled library item is added to the list in the panel.

  3. While the item is still selected, enter a name for it.
To add a library item in a document:
  1. In the Document window, place the pointer where you want to insert the library item.
  2. Select the Library category in the Assets panel, and locate the desired library item.
  3. Do one of the following:
    • Drag the library item from the panel to the selection in the Design view.
    • Select the library item, and click the Insert button.
To edit a Library item:

Select a library item from the list and click the Edit button, or double-click the item’s name in the list.

To delete a library item:
  1. Select the library item in the Assets panel.
  2. Click the Delete button or press the Delete key, and confirm that you want to delete the library item.

    3. The library item is deleted from your site.

Related topic

Using the Assets panel


Using the Assets panel to work with templates

You can use the Templates category of the Assets panel to create new templates and manage existing templates.

For more details about creating and editing templates, see Creating a Dreamweaver template. For more information about using the Assets panel to manage your assets, see Using the Assets panel.

To use the Assets panel to create a new, blank template
  1. Choose Window > Templates.

    2. The Assets panel appears, with the Templates category selected.

  2. In the Assets panel, click the New Template button at the bottom of the Assets panel.
    This is a picture of the feature being described.

    3. A new, untitled template is added to the list of templates in the panel.

  3. While the template is still selected, enter a name for the template.
  4. This creates a new blank template in the Assets panel and in the Templates folder but does not create a .dwt file. To start defining editable regions, click the Edit button at the bottom of the Assets panel.

    5. For information about defining editable template regions see Inserting an editable region.

To edit a template file:
  1. Choose Window > Assets, then click the Templates icon to view templates.

    2. The bottom of the Assets panel lists all of the available templates for your site. The top area displays a preview of the selected template.

  2. In the Name list, do one of the following:
    • Double-click the name of the template.
    • Click the Edit Template button at the bottom of the Assets panel.
      This is a picture of the feature being described.
  3. Edit the template in the Document window. Create editable regions in the template as desired (see About defining template regions).
  4. Save the edited template by choosing File > Save.

    5. Note: If you haven’t defined any editable regions, Dreamweaver warns you that the template contains no editable regions. You can save or modify the template even if it doesn’t contain editable regions, but you won’t be able to modify documents based on that template until it has an editable region.

To apply a template to the active document:
  1. Open the document you’re applying the template to.
  2. Select the Templates category in the Assets panel, and locate the template you want to apply.
    This is a picture of the feature being described.
  3. Do one of the following:
    • Drag the template from the panel to the Document window.
    • Select the template and click the Apply button.

      • Note: You must assign the existing content in the document to an editable region of the template, or Dreamweaver discards the content.

To rename a template in the Assets panel:
  1. Click the name of the template to select it.
  2. Click the name again so that the text is selectable, then enter a new name.

    3. Note: This method of renaming works in the same way as renaming a file in Windows Explorer (Windows) or the Finder (Macintosh). As with Windows Explorer and the Finder, be sure to pause briefly between clicks. Do not double-click the name; because that opens the template for editing.

  3. Click in another area of the Asset panel, or press Enter (Windows) or Return (Macintosh) for the change to take affect.
  4. Dreamweaver asks if you want to update documents that are based on this template.
    • To update all documents in the site that are based on this template, click Update.
    • To not update any documents that are based on this template, click Don’t Update. A document that you choose not to update is still based on the original template (not detached). To update this document later, open the document and choose Modify > Templates > Update.
To delete a template file:
  1. Select the template in the Assets panel.
  2. Click the Delete button and confirm that you want to delete the template.

    3. If you delete a template file, you can’t retrieve it. The template file is deleted from your site. Documents that were based on this template are not detached from the template; they retain the structure and editable regions that the template file had before it was deleted.

    To turn such a document into a normal HTML file without editable or locked regions, use Modify > Templates > Detach from Template. For more information, see Detaching a document from a template.


Working with assets and sites

You may want to locate the file in the Site panel that corresponds to an asset in the Assets panel. This can be useful, for example, when you want to transfer the asset to or from your remote site.

The Assets panel shows all the assets (of recognized types) in your current site. (The current site is the site that contains the active document.) To use an asset from the current site in another site, you must copy it to the other site. You can copy an individual asset, a set of individual assets, or an entire Favorites folder at once.

Note: The Site panel may show a different site from the one that the Assets panel shows. This is because the Assets panel is associated with the active document. To determine which site the Assets panel is showing, look at the panel’s title bar.

To locate an asset’s file in the Site panel:

Right-click (Windows) or Control-click (Macintosh) the asset’s name or icon in the Assets panel, and choose Locate in Site from the context menu.

The Site panel appears, with the asset file selected.

Locate in Site is unavailable for colors and URLs, which do not correspond to files in the site.

Note that Locate in Site locates the file corresponding to the asset itself; it does not locate a file that uses that asset.

To copy assets from the Site list or the Favorites list to another site:
  1. Right-click (Windows) or Control-click (Macintosh) the icon or name of the asset or assets to copy.

    2. In the Favorites list, you can copy a Favorites folder as well as individual assets. (For information about Favorites folders, see Grouping assets in a Favorites folder.)

  2. From the context menu, choose Copy to Site, and choose the target site name from the submenu. (The submenu lists all the sites you’ve defined.)

    3. The assets are copied to the specified site, into locations corresponding to their locations in the current site. Dreamweaver creates new folders in the target site’s hierarchy as needed.

    The assets are also added to the specified site’s Favorites list.

    When you open a document in the target site, the Assets panel switches to that site, and shows the copied asset.

    Note: If the asset you copied is a color or a URL, it appears only in the other site’s Favorites list, not in the other site’s Site list. This is because there is no file corresponding to the color or URL, so there’s no file to copy into the other site.


Managing the Assets panel

By default, assets in a given category are listed in alphabetical order by name. The asset name may be a filename (as for images), a hexadecimal number (as for colors), or a URL. You can instead list the assets by any of several other criteria.

To list assets in a different order:

Click one of the column headings.

For example, to sort the list of images by type (so that all the GIF images are together, all the JPEG images are together, and so on), click the Type column heading.

To change the width of a column:
  1. Position the pointer over the line that separates two column headings.
  2. Drag that line to change the column width.


Setting up a Favorites list of assets

Most of the operations of the Assets panel are the same in the Favorites list as in the Site list (see Using the Assets panel). However, there are several tasks that you can perform only in the Favorites list.

Because the Assets panel’s Site list always shows all of the recognized assets in the site, this list can become cumbersome for some large sites. If you add frequently used assets to your Favorites list, you can group related assets together, give them nicknames to remind you what they’re for, and find them easily in the Assets panel.

Note: Favorite assets are not stored as separate files on your disk; they’re references to the assets in the Site list. Dreamweaver keeps track of which assets from the Site list to display in the Favorites list.


Adding assets to and removing assets from the Favorites list

There are several ways to add assets to your site’s Favorites list.

To add assets to your Favorites list, do one of the following:
  • Select one or more assets in the Site list, and click the Add to Favorites button.
    This is a picture of the feature being described.
  • Select one or more assets in the Site list, and choose Add to Favorites from the context menu.
  • Right-click (Windows) or Control-click (Macintosh) an element in the Document window’s Design view, and choose the context menu command to add the element to the appropriate Favorites category.

    • For example, you can select an image and choose Add to Image Favorites from the context menu. Note that the context menu for text contains either Add to Color Favorites or Add to URL Favorites, depending on whether the text has a link attached. Also note that only elements that fit one of the categories in the Assets panel can be added to the Favorites list.

  • Select one or more files in the Site panel and choose Add to Favorites from the context menu. Files that don’t fit a category in the Assets panel are ignored.

Whichever method you choose, the assets are added to your Favorites list, and the Assets panel displays the Favorites list.

Note: There are no Favorites lists for templates and library items.

To remove assets from your Favorites list:
  1. Select one or more assets (or a Favorites folder) in the Favorites list.
  2. Click the Remove From Favorites button at the bottom of the Assets panel.
    This is a picture of the feature being described.

    3. The assets are removed from the Favorites list, but they still appear in the Site list. If you remove a Favorites folder, the folder and all of the assets in it are removed from the Favorites list.


Creating a new color or URL to add to the Favorites list

You can use the Assets panel to add new colors or URLs to your Favorites list. Note that you can’t add new colors or URLs to the Site list; the Site list contains only assets that are already in use in your site.

To create a new color:
  1. Click the Colors category button.
    This is a picture of the feature being described.
  2. Click Favorites to show the Favorites list.
  3. Click the New Color button.
    This is a picture of the feature being described.
  4. Select a color using the color picker.

    5. To exit from the color picker without choosing a color, press Escape or click the gray bar at the top of the color picker. (For more information on using the color picker, see Working with colors.)

  5. Give the color a nickname if desired.
To create a new URL:
  1. Click the URLs category button.
    This is a picture of the feature being described.
  2. Click Favorites to show the Favorites list.
  3. Click the New URL button.
    This is a picture of the feature being described.
  4. Enter a URL and a nickname in the Add URL dialog box, and click OK.


Creating a nickname for a favorite asset

You can give nicknames to assets in the Favorites list. The nickname is displayed instead of the asset’s filename or value. For example, if you have a color named #999900, you might use a more descriptive nickname, such as PageBackgroundColor or ImportantTextColor.

You can give nicknames only to assets in the Favorites list. In the Site list, the assets are listed by their real filenames (or values, in the case of colors and URLs).

To give a nickname to a favorite asset:
  1. Click the category that contains your asset.
  2. Click Favorites to display the Favorites list.
  3. Do one of the following:
    • Right-click (Windows) or Control-click (Macintosh) the asset’s name or icon in the Assets panel, and choose Edit Nickname from the context menu.
    • Click the asset’s name once, pause, then click it again. (Don’t double-click.)
  4. Type a nickname for the asset, then press Enter (Windows) or Return (Macintosh).

    5. The nickname appears in the Nickname column.


Grouping assets in a Favorites folder

In the Favorites list, within a given category, you can create named groups of assets, called Favorites folders. For example, if you have a set of images that you use on numerous catalog pages in an e-commerce site, you could group them together in a folder called CatalogImages.

Note: Placing an asset in a Favorites folder does not change the location of the asset’s file on your disk.

To create a Favorites folder:
  1. Click Favorites (at the top of the Assets panel) to display the Favorites list.
  2. Click the New Favorites Folder button.
    This is a picture of the feature being described.
  3. Name the folder.
  4. Drag assets into the folder.


Working with Library items

A library is a special Dreamweaver file that contains a collection of individual “assets” or copies of assets you have created for placement in your web pages. If you simply want your pages to have the same headers and footers, yet have different page layouts, use library items to store the headers and footers. Library items are stored page elements that you can reuse in multiple pages; you can update all the pages that use a library item whenever you change the item’s contents.

You can store all sorts of page elements, such as images, tables, sounds, and Flash movies in a library.

When you use a library item, Dreamweaver doesn’t insert the library item in the web page, rather it inserts a link to the library item. If you later need to make changes to a library item, for example change some text, or an image, updating the library item automatically updates the instance of the library in any page in which you’ve inserted the library item.

Related topics

Creating a library item

Inserting a library item in a document

Editing a library item

Making library items editable in a document


Creating, managing, and editing library items

Libraries are a way to store page elements such as images, text, and other objects that you want to reuse or update frequently throughout your web site. These elements are called library items.

When you place a library item in a document, Dreamweaver inserts a copy of the HTML source code for that item into the document, and adds an HTML comment containing a reference to the original, external item. The reference to the external library item makes it possible to update the content on an entire site all at once by changing the library item and then using the update commands in the Modify > Library submenu.

Dreamweaver stores library items in a Library folder within the local root folder for each site. Each site has its own library; to copy a library item from one site to another site, use the Assets panel’s Copy to Site command. For more information, see Using the Library category of the Assets panel.

Note: If the library item contains links, the links may not work in the new site. Also, images in a library item aren’t copied to the new site.

Here’s an example of how you might use a library item: suppose you’re building a large site for a company. The company has a slogan that it wants to appear on every page of the site, but the marketing department is still finalizing the text of the slogan. If you create a library item to contain the slogan and use that library item on every page, then when the marketing department provides the final slogan, you can change the library item and automatically update every page that uses it.

Library items can also contain behaviors, but there are special requirements for editing the behaviors in library items; see Editing a behavior in a library item. Library items cannot contain timelines or style sheets, because the code for those elements is part of the head section.


Creating a library item

You can create a library item from any element in the body section of a document, including text, tables, forms, Java applets, plug-ins, ActiveX elements, navigation bars, and images.

For linked items such as images, the library stores only a reference to the item. The original file must remain at the specified location for the library item to work correctly. It can still be useful to store an image in a library item, though; for example, you could store a complete img tag in a library item, which would allow you to easily change the image’s alt text, or even its src attribute, throughout the site. (Don’t use this technique to change an image’s width and height attributes, though, unless you also use an image editor to change the actual size of the image.)

To create a library item:
  1. Select a portion of a document to save as a library item.
  2. Do one of the following:
    • Choose Window > Library and drag the selection into the Library category of the Assets panel.
    • Click the New Library Item button at the bottom of the Assets panel (in the Library category).
    • Choose Modify > Library > Add Object to Library.
  3. Enter a name for the new library item.

    4. Each library item is saved as a separate file (with the file extension .lbi) in the Library folder of the site’s local root folder.


Inserting a library item in a document

When you add a library item to a page, the actual content is inserted in the document along with a reference to the library item.

To insert a library item in a document:
  1. Place the insertion point in the Document window.
  2. Choose Window > Library.

    3. The Assets panel appears, showing the Library category.

  3. Drag a library item from the Assets panel to the Document window, or select an item and click the Insert button.

    4. To insert the contents of a library item without including a reference to the item in the document, press Control (Windows) or Option (Macintosh) while dragging an item out of the Library category of the Assets panel. If you insert an item this way, you can edit the item in the document, but the document won’t update when you update pages that use that library item.


Editing a library item

When you change a library item, you can choose to update all documents that use that item. If you choose not to update, the documents remain associated with the library item; you can update them later by choosing Modify > Library > Update Pages.

Other kinds of changes to library items include renaming items to break their connection with documents or templates, deleting items from the site’s library, and recreating a missing library item.

Note: The CSS Styles panel and Timelines panel are unavailable when you are editing a library item, since library items can contain only body elements, and Timeline and CSS style sheet code inserts in the head section of a document. The Page Properties dialog box is also unavailable, because a library item can’t include a body tag or its attributes.

To edit a library item:
  1. Choose Window > Library.

    2. The Library category of the Assets panel appears.

  2. Select a library item.

    3. A preview of the library item appears at the top of the Assets panel. (You can’t edit anything in the preview.)

  3. Click the Edit button at the bottom of the Assets panel. Alternatively, double-click the library item.

    4. Dreamweaver opens a new window for editing the library item. This window is much like a Document window, but its Design view has a gray background to indicate that you’re editing a library item instead of a document.

  4. Edit the library item and then save your changes.
  5. In the dialog box that appears, choose whether to update the documents on the local site that use the edited library item:
    • Choose Update to update all documents in the local site with the edited library item.
    • Choose Don’t Update to avoid changing any documents until you use Modify > Library > Update Current Page or Update Pages.
To update the current document to use the current version of all library items:

Choose Modify > Library > Update Current Page.

To update the entire site or all documents that use a particular library item:
  1. Choose Modify > Library > Update Pages.

    2. The Update Pages dialog box appears.

  2. In the Look In pop-up menu, do one of the following:
    • Choose Entire Site, and then choose the site name from the adjacent pop-up menu. This updates all pages in the selected site to use the current version of all library items.
    • Choose Files That Use, and then choose a library item name from the adjacent pop-up menu. This updates all pages in the current site that use the selected library item.
  3. Make sure Library Items is selected in the Update option. (To update templates at the same time, make sure Templates is also selected. For more information, see Updating documents that are based on a template.)
  4. Click Start.

    5. Dreamweaver updates the files as indicated. If you selected the Show Log option, Dreamweaver provides information about the files it attempts to update, including information on whether they were updated successfully.

To rename a library item in the Assets panel:
  1. Click the name of the library item once to select it.
  2. After a brief pause, click again.
  3. When the name becomes editable, enter a new name.

    4. Note: This method of renaming works the same way that renaming a file in Windows Explorer (Windows) or the Finder (Macintosh) does. As with Windows Explorer and the Finder, make sure to pause briefly between clicks. Do not double-click the name; that opens the library item for editing.

  4. Click elsewhere, or press Enter (Windows) or Return (Macintosh).
  5. Dreamweaver asks if you want to update documents that use the item.
    • To update all documents in the site that use the item, click Update.
    • To refrain from updating any documents that use the item, click Don’t Update.
To delete a library item from a library:
  1. Select the item in the Library category of the Assets panel.
  2. Click the Delete button and confirm that you want to delete the item.

    3. Be careful; if you delete a library item, you can’t use Undo to retrieve it. You may be able to recreate it, however, as described in the next procedure.

    Deleting a library item removes the item from the library, but doesn’t change the contents of any documents that use the item.

To recreate a missing or deleted library item:
  1. Select an instance of the item in one of your documents.
  2. Click the Recreate button in the Property inspector.


Making library items editable in a document

If you’ve added a library item to your document and you want to edit the item specifically for that page, you must break the link between the item in the document and the library. Once you’ve made an instance of a library item editable, that instance cannot be updated when the library item changes.

To make a library item editable:
  1. Select a library item in the current document.
  2. Click Detach from Original in the Property inspector.

    3. The selected instance of the library item loses its highlighting (if you had highlighting visible), and can no longer be updated when the original library item changes.


Editing a behavior in a library item

When you create a library item that includes an element with a Dreamweaver behavior attached to it, Dreamweaver copies the element and its event handler (the attribute that specifies which event triggers the action (such as onClick, onLoad, or onMouseOver), and which action to call when the event occurs) to the library item file. Dreamweaver does not copy the associated JavaScript functions into the library item. Instead, when you insert the library item into a document, Dreamweaver automatically inserts the appropriate JavaScript functions into the head section of that document (if they aren’t already there).

Note: If you hand-code JavaScript (that is, if you create it without using Dreamweaver behaviors), you can make it part of a library item if you use the Call JavaScript behavior to execute the code. If you don’t use a Dreamweaver behavior to execute the code, the code isn’t retained as part of the library item.

To edit a behavior in a library item, you must first insert the item in a document, then make the item editable in that document. After you’ve made the desired changes, you can re-create the library item, replacing the item in the library with the edited item from your document.

For more information about behaviors, see Using JavaScript Behaviors.

To edit a behavior in a library item:
  1. Open a document that contains the library item.

    2. Note the name of the library item, as well as the exact tags it contains. You’ll need this information in steps 8 and 9.

  2. Select the library item and click Detach from Original in the Property inspector.
  3. Select the element that has the behavior attached to it.
  4. Choose Window > Behaviors to open the Behaviors panel. In the Behaviors panel, double-click the action you want to change.
  5. In the dialog box that appears, make the necessary changes and click OK.
  6. Choose Window > Library to open the Library category of the Assets panel.
  7. Make sure you have recorded the exact name of the original library item; then select the original library item, and delete it by clicking the Delete button in the Assets panel.
  8. In the Document window, select all of the elements that make up the library item.

    9. Be careful to select exactly the same elements that were in the original library item.

  9. In the Assets panel, click the New Library Item button, and give the new item the same name as the item you deleted in step 7.

    10. Be sure to use exactly the same spelling and capitalization.

  10. To update the library item in your site’s other documents, choose Modify > Library > Update Pages.
  11. In the Update Pages dialog box, in the Look in pop-up menu, select Files That Use.
  12. In the adjacent pop-up menu, choose the name of the library item you just created.
  13. In the Update option, make sure Library Items is selected, and then click Start.
  14. When the updates are complete, click Close to exit the Update Pages dialog box.


About Dreamweaver templates

A Dreamweaver template is a special type of document that you use to design a “locked” page layout. A template author designs the page layout, and creates regions in the template that are editable in documents that are based on a template. In a template, the designer controls which page elements a template user— such as writers, graphic artists, or other web developers— can edit. For information about authoring a template see Creating a Dreamweaver template. For information about creating a page based on a template, see Creating a template-based document.

One of the most powerful uses of templates is the ability to update multiple pages at once. A document that is created from a template remains connected to that template (unless you detach the document later). You can modify a template and immediately update the design in all document based on it.

A template controls the editable and fixed regions of a document based on a template. There are several types of template regions that you can include in a document. For information about these types of template regions, see About defining template regions.

You can add a Cascading Style Sheet (CSS), timeline, or behavior to a document that is based on a template, because Dreamweaver automatically inserts an editable region in the head section of a document.

Template-related operations (such as adding editable regions) are enabled in both Code view and Design view. Some template customizing options are only available in Code view. For information about adding template expressions, see Writing a template expression.

If you want to store additional information about a template (such as who created it, when it was last changed, or why you made certain layout decisions), you can create a Design Notes file for the template. Documents based on a template do not inherit the template’s Design Notes. (For more information, see Saving file information in Design Notes.)


About defining template regions

A template determines the basic structure for a document and contains elements such as text, images, page layout, styles, and editable regions.

Dreamweaver automatically locks most regions of a document when you save the document as a template. As a template author you define which regions of a template-based document will be editable by inserting editable regions or editable parameters in the template. As you create the template, you can make changes to both editable and locked regions. In a document based on the template, however, a template user can make changes only in the editable regions; the locked regions can’t be modified.

There are four types of template regions: editable regions, repeating regions, optional regions, and editable tag attributes.

An editable region is an unlocked region in a template-based document; a section a template user can edit. A template author can define any area of a template as editable. For a template to be effective, it should contain at least one editable region; otherwise, pages based on the template can’t be edited. For information about inserting an editable region, see Inserting an editable region.

A repeating region is a section in a document that is set to repeat. For example, you can repeat a table row. By repeating the table row, you allow the template user to create an expanding list, while keeping the design under the control of the template author. In a document based on the template you use repeat region control options to add or delete copies of the repeated region. There are two types of repeating regions you can insert in a template—repeating region and repeating table. For information about inserting a repeating region in a template, see Creating a repeating region in a template. For information about creating a repeating table, see Inserting a repeating table. For information about working with a repeating region in a template-based page, see Adding, deleting, and changing the order of a repeating region entry

An optional region is a section of a template that a designer defines as optional, to hold content such as optional text or an image which may or may not appear in a document based on the template. In the template-based page, the content editor usually controls whether the content shows or not. For information about setting a optional regions in a template, see Inserting an optional region. For information about editing optional regions in a template-based page, see Modifying optional region template parameters.

An editable tag attribute lets you unlock a tag attribute in a template, so the attribute can be edited in a template-based page. For example, you can “lock” which image appears in the document but let the page author set the alignment to left, right, or center. For information about setting editable tag attributes, see Defining editable tag attributes in a template. For information about editing the tags in a template-based page, see Modifying template properties.


About template parameters

You can use template parameters to define optional regions, editable tag attributes, or to set values you want to pass to an attached document.

Creating a template parameter lets you define values for controlling content in documents based on a template. For each parameter you define a name, a data type, and a default value. Each parameter must have a unique name and is case sensitive.

Template parameters are passed to the document as instance parameters, and can be accessed by the Modify > Template Properties command. In most cases, a template user can edit the parameter’s default value to customize what appears in a template-based document. In other cases, the template author might use a computed-text expression to determine what appears in the document, based on the value in the expression. For information, see Writing a template expression.


Editing code outside of HTML tags

Some server scripts are inserted at the very beginning or end of the document (before the <html> tag or after the </html> tag). Such scripts require special treatment in templates and template-based documents. Normally, if you make changes to script code before the <html> tag or after the </html> tag in a template, the changes will not be copied to documents based on that template. This can cause server errors if other server scripts, within the main body of the template, depended on the scripts that were not copied. As a result, Dreamweaver warns you if you make a change to scripts before the <html> tag or after the </html> tag in a template.

To avoid this problem, you can insert the following code in the head section of the template:

<!-- TemplateInfo codeOutsideHTMLIsLocked="true" -->

When this code is present in a template, changes to scripts before the <html> tag or after the </html> tag will be copied to documents based on that template. However, you will no longer be allowed to edit those scripts in documents based on the template. Thus, you can choose to be able to edit these scripts in the template, or in documents based on the template, but not both.


About links in templates

To create a link in a template file, use the folder icon or the Point-to-File icon in the Property inspector; don’t type in the name of the file to link to. If you type the name, the link might not work. This section explains how Dreamweaver handles links in templates.

When you create a template file from an existing page, then save that page as a template, Dreamweaver updates the links so they point to the same files as before. Because templates are saved in the Templates folder, the path for a document-relative link changes when you save the page as a template. In Dreamweaver, when you create a new document based on that template and save the new document, all the document-relative links are updated to continue to point to the correct files.

When you add a new document-relative link to a template file, however, if you type the path into the link text box in the Property inspector, it’s easy to enter the wrong path name. The correct path is the path from the Templates folder to the linked document, not the path from the template-based document’s folder to the linked document.

For information about linking using the Point-to-File icon, see Linking files and documents.

Note: In some cases, (such as file paths in event handlers in templates) you can’t use the folder icon or the Point-to-File icon; in those cases, you must enter the correct path name.


Viewing templates in Design view

In template files and documents based on templates, editable regions appear in the Document window’s Design view surrounded by rectangular outlines in a preset highlight color. (For information about setting highlighting color preferences, see Setting template highlighting preferences.) A small tab appears at the upper left corner of each region, showing the name of each defined region. Template regions are also include a highlighted outline. You can make changes to both editable and locked content.

Template files can be identified by the <<Template>> title and .dwt file extension in the Document window.

This is a picture of the feature being described.


Viewing templates in Code view

In Code view, you can make changes to both editable and locked HTML source code in a template. Editable content is marked in HTML with the comments <!-- TemplateBeginEditable> and <!-- TemplateEndEditable -->. Everything between these comments is editable in documents based on the template. The HTML source code for the editable region from the previous example might look like this:

<table width="75%"  border="1"  cellspacing="0" cellpadding="0">
  <tr bgcolor="#333366">
    <td>Name</td>
    <td><font color="#FFFFFF">Address</font></td>
    <td><font color="#FFFFFF">Telephone Number</font></td>
  </tr>
  <!-- TemplateBeginEditable name="LocationList" -->
  <tr>
    <td>Enter name</td>
    <td>Enter Address</td>
    <td>Enter Telephone</td>
  </tr>
  <!-- TemplateEndEditable -->
</table>


Viewing template-based documents in Design view

In a document based on a template (a template-based document), in addition to the editable-region outlines, the entire page is surrounded by a different-colored outline, with a tab at the upper right giving the name of the template that the document is based on. This highlighted rectangle is there to remind you that the document is based on a template and that you can’t change anything outside the editable regions.

This is a picture of the feature being described.

Note: If you try to edit a locked region in a document based on a template when highlighting is turned off, the mouse pointer changes to indicate that you can’t click in a locked region.

This is a picture of the feature being described.


Viewing template-based documents in Code view

In Code view, editable regions of a document derived from a template are displayed in a different color than code in the non-editable regions; you can make changes only to code in the editable regions or editable parameters.

Editable content is marked in HTML with the Dreamweaver comments
<!-- InstanceBeginEditable> and <!-- InstanceEndEditable -->. Everything between these comments is editable.

The HTML source code for an editable region might look like this:

<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>

<body bgcolor="#FFFFFF" leftmargin="0">
<table width="75%"  border="1"  cellspacing="0" cellpadding="0">
  <tr bgcolor="#333366">
    <td>Name</td>
    <td><font color="#FFFFFF">Address</font></td>
    <td><font color="#FFFFFF">Telephone Number</font></td>
  </tr>
  <!-- InstanceBeginEditable name="LocationList" -->
  <tr>
    <td>Enter name</td>
    <td>Enter Address</td>
    <td>Enter Telephone</td>
  </tr>
  <!-- InstanceEndEditable -->
</table>
</body>
<!-- InstanceEnd -->

The default setting for non-editable text is gray, you can define a different color for the editable and non-editable regions in the Preferences dialog box. Choose Edit > Preferences or Dreamweaver > Preferences (Mac OS X), and select Code Coloring. For more information, see Setting code color preferences for a template document.

Note: Dreamweaver prevents you from typing in locked regions in the Code view of the Document window.


Creating a Dreamweaver template

You can create a template from an existing document (such as an HTML, Macromedia ColdFusion, or Microsoft Active Server Pages document) or you can create a template from a new, blank document.

The New Document dialog box (File >New) provides several options for creating new templates, and creating template-based pages. For information, see Working with the New Document dialog box.

Dreamweaver saves templates with the file extension .dwt. Templates are saved in a special Templates folder in the local root folder of the site. If the Templates folder does not already exist in the site, Dreamweaver automatically creates it when you save a new template.

Note: Do not move your templates out of the Templates folder, or put any non-template files in the Templates folder. Also, do not move the Templates folder out of your local root folder. Doing so causes errors in paths in the templates.

Related topics

Saving a document as a template

Inserting an editable region

Creating a nested template


Saving a document as a template

You can create a template from a new document or from an existing document.

If you insert a template region in a document that hasn’t been saved as a template, Dreamweaver advises you that the document will automatically be saved as a template.

To create a template:
  1. Open the document you want to save as a template in the Document window, by doing one of the following:
    • To open an existing document, choose File > Open and select the document.
    • To open a new blank document, choose File > New. In the dialog box that opens, choose Basic Pages or Dynamic pages. In the document list select the type of page you want to work with, then click Create.
  2. When the document opens, choose File > Save as Template.

    3. Note: Unless you selected Don’t Show This Dialog Again, you’ll receive a warning that says the document you’re saving has no editable regions. Click OK to save the document as a template, or click Cancel to exit this dialog box without creating a template.

  3. In the dialog box that appears, select a site to save the template in from the Site pop-up menu, and enter a unique name for the template in the Save As text box.
    This is a picture of the feature being described.
  4. Click Save.

    5. The template file is saved in the site’s Templates folder, with a .dwt filename extension.

To create a new template using the Assets panel:
  1. Open the Assets panel (Window > Assets or F11), if it isn’t already open.
  2. Select the Templates category.
  3. Click the New Template button in the Assets panel.

    4. A new document is added to the Name list. The document name is highlighted.

  4. Type a name for the document.
  5. Click the Edit button in the Assets panel.

    6. A template document opens in the Document window.

    For information about creating editable regions in the template see Inserting an editable region.


Creating editable regions

Editable template regions control which areas of a template-based page can be edited.

You can mark an entire table or an individual table cell as editable, but you can’t mark multiple table cells as a single editable region. If <td> is selected the editable region includes the region around the cell; if not, the editable region affects content inside the cell.

Layers and layer content are separate elements; making a layer editable lets you change the position of the layer as well as its contents, and making a layer’s contents editable lets you change only the content of the layer, not its position. To select the layer’s content, click in the layer and choose Edit > Select All. To select the layer, make sure invisible elements are showing, and click the icon that represents the location of the layer. For more information about layers, see Animating Layers.


Inserting an editable region

Before you insert an editable region, you should save the document you are working in as a template. If you insert an editable region in a document rather than a template file, Dreamweaver warns you that the document will automatically be saved as a template.

To define an editable template region:
  1. In the Document window, do one of the following to select the region:
    • Select the text or content that you want to set as an editable region.
    • Place the insertion point where you want to insert an editable region.
  2. Do one of the following to insert an editable region:
    • Choose Insert > Template Objects > New Editable Region.
    • Right-click (Windows) or Control-click (Macintosh) the selected text or object, and choose New Editable Region from the context menu.
    • In the Insert bar, select Templates, then click the Editable Region button.

      • The Editable Region dialog box appears.

  3. In the Name text box, enter a unique name for the region. (You cannot use the same name for more than one editable region in a particular template.)

    4. Note: Do not use special characters in the Name field.

  4. Click OK.

    5. The editable region is enclosed in a highlighted rectangular outline in the template, using the highlighting color that is set in preferences. For information about setting template highlighting options, see Setting template highlighting preferences.

    A tab at the upper-left corner of the region shows the name of the region. If you inserted an empty editable region in the document, the name of the region also appears inside the region.


Removing an editable region

If you’ve marked a region of your template file as editable and you want to lock it (make it noneditable) again, use the Remove Template Markup command.

Note: You can’t lock a region in a file based on a template; you can lock a region only in a template file.

To remove an editable region:
  1. In the document or in the tag selector, select the editable region you want to change.
  2. Choose Modify > Templates > Remove Template Markup.

    3. The region is now no longer editable.


Creating repeating regions

A repeating region adds multiple copies of the selected region in a template-based document. You can use repeating regions to control the layout of regions you want repeated in a page such as a catalogue item and description layout, or to repeat a row for data such as a list of items.

There are two repeating region template objects you can use:

Repeating Region lets you repeat a region but doesn’t include an editable region. However, you can insert an editable region in a repeating region to make it editable.

The example below shows a repeating region in a template. In a document based on this template, the user is able to repeat the highlighted table row to expand the table

This is a picture of the feature being described.

.

Repeating Table lets you define a table and define where editable regions are in each cell in the repeating region. You define options to control which rows are included in the repeating region.

Related topics

Creating a repeating region in a template

Inserting a repeating table

Adding, deleting, and changing the order of a repeating region entry


Creating a repeating region in a template

A repeating region is a section of a template that can be duplicated as often as desired in a template-based page. Repeating regions are typically used with tables; however, you can define a repeating region for other page elements as well.

A repeating region is not an editable region. To make content in a repeating region editable (for example, to allow a user to enter text in a table cell), you must insert an editable region in the repeating region. For information about creating editable regions, see Inserting an editable region. For information about creating an editable repeating table, see Inserting a repeating table.

To insert a repeating region in a template:
  1. In the Document window, do one of the following:
    • Select the text or content you want to set as a repeating region.
    • Place the insertion point in the document where you want to insert the repeating region.
  2. Do one of the following, to create a repeating region:
    • Choose Insert > Template Objects > Repeating Region.
    • Right-click (Windows) or Control-click (Macintosh) the selected content, and choose New Repeating Region from the context menu.
    • In the Templates category of the Insert bar, click the Repeating Region button.

      • The Repeating Region dialog box appears.

  3. In the Name text box, enter a unique name for the template region. (You cannot use the same name for more than one repeating region in a template.)

    4. Note: When you name a region, do not use special characters.

  4. Click OK.

    5. The repeating region is inserted in the document.

    Note: A repeating region isn’t editable in the template-based document, unless it contains an editable region.
    For information about inserting an editable region see Inserting an editable region.


Inserting a repeating table

You use a repeating table to define a repeating region that includes editable regions in a table format You can define table attributes and set which table cells are editable.

To insert a repeating table:
  1. In the Document window, place the insertion point in the document where you want to insert the repeating table.
  2. Do one of the following:
    • Choose Insert > Template Objects > New Repeating Table.
    • Right-click (Windows) or Control-click (Macintosh) the selected content, and choose New Repeating Table from the context menu.
    • In the Templates category of the Insert bar, click the Repeating Table button.

      • The Repeating Table dialog box appears.
      This is a picture of the feature being described.

  3. Enter new values as desired.

    4. For more information, see Setting the Insert Repeating Table dialog box options.

  4. Click OK.


Setting alternating background colors in a repeating region

You can customize a repeating table by alternating the background color of the table rows.

To set alternating table row background colors:
  1. In the Document window, select the repeat region table row.
  2. Click the Show Code view or Show Code and Design view button in the Document toolbar so you can access the code for the selected table row.
  3. In Code view, edit the <tr> tag to include the following code:
    4. <tr bgcolor="@@(_index & 1) ? '#FFFFFF' : '#CCCCCC'@@">

You can replace the #FFFFFF and #CCCCCC hexadecimal values with other color choices.

This is a code example of a table that includes alternating background table row colors:

<table width="75%"  border="1"  cellspacing="0" cellpadding="0">
<tr><th>Name</th><th>Phone Number</th><th>Email Address</th></tr>

<!-- TemplateBeginRepeat name="contacts" -->
<tr bgcolor="@@(_index & 1) ? '#FFFFFF' : '#CCCCCC' @@">
<td> <!-- TemplateBeginEditable name="name" --> name <!-- TemplateEndEditable -->
</td>
<td> <!-- TemplateBeginEditable name="phone" --> phone <!-- TemplateEndEditable -->
</td>
<td> <!-- TemplateBeginEditable name="email" --> email <!-- TemplateEndEditable -->
</td>
</tr>
  <!-- TemplateEndRepeat -->

</table>


Defining editable tag attributes

You use the Make Attribute Editable command to allow a template user to modify specified tag attributes in a document created from a template. For example, you can set a background color in the template document yet allow a template user to set a different background color for pages they create. The user can update only the attributes you define as editable.

Creating an editable tag attribute inserts a template parameter in the code. An initial value for the attribute is set in the template document; when a template-based document is created, it inherits the parameter. A template user can then edit the parameter in the document.

The following data types are supported: text, boolean (true/false), color, and URL. For information about setting editable tag attributes, see Defining editable tag attributes in a template.

For information about editing the tag in the template-based document, see Modifying template properties.


Defining editable tag attributes in a template

You can set multiple editable attributes for a page element. Only tag attributes that are currently set for the element initially appear in the Attribute pop-up menu. For example, with an image tag the width and height attributes may be the only ones that appear in the menu.

If the attribute that you want to make editable isn’t listed in the Attribute pop-up menu, click Add to add the attribute to the list.

To define an editable tag attribute:
  1. In the Document window, select an item you want to set an editable tag attribute for.
  2. Choose Modify > Templates > Make Attribute Editable.
  3. In the dialog box that appears, do one of the following:
    • If the attribute you want to make editable is listed in the Attribute pop-up menu, select it.
    • If the attribute you want to make editable isn’t listed in the Attribute pop-up menu, click Add, and in the dialog box that opens, enter the name of the attribute you want to add, and click OK.
  4. Make sure the Make Attribute Editable option is selected.

    5. In the dialog box complete the fields to set the values you want.

  5. In the Label text box, enter a unique name for the attribute.

    6. Tip: To make it easier to identify a specific editable tag attribute later, use a label that identifies the element and the attribute. For example, you might label an image whose source is editable logoSrc or label the editable background color of a body tag bodyBgcolor.

  6. In the Type pop-up menu, select the type of value allowed for this attribute by setting one of the following options:
    • To let a user enter a text value for the attribute, choose Text. For example, you can use text with the align attribute; the user can then set the attribute’s value to left, right, or center.
    • To set the link to an element, such as the file path to an image, choose URL. Using URL allows Dreamweaver to automatically update the path used in a link. If the user moves the image to a new folder, the Update Links dialog appears.
    • To make the color picker available for selecting a value, choose Color.
    • To let a template user type a numerical value to update an attribute (for example, to change the height or width values of an image), choose Number.
  7. The Default Value field displays the value of the selected tag attribute in the template. Enter a new value in this field to set a different initial value for the parameter in the template-based document.
  8. If you want to make changes to another attribute of the selected tag, repeat steps 3 through 7.
  9. Click OK.


Making an editable tag attribute uneditable

A tag previously marked as editable can be marked as uneditable. Make the change in the template and update the pages derived from the template.

To reset an editable tag attribute:
  1. In the template document, click the element associated with the editable attribute or use the tag selector to select the tag.
  2. Choose Modify > Templates > Make Attribute Editable.
  3. In the Attributes pop-up menu, select the attribute you want to affect.
  4. Deselect the Make Attribute Editable checkbox.
  5. Click OK.


About optional regions

An optional region is a region in a template that can be set to show or to hide in a template-based document. Use an optional region when you want to set conditions for displaying content in a document. You can set specific values for a template parameter or define conditional statements in a template. Based on the conditions you define a template users can edit the parameters in documents they create and control whether the optional region displays or not.

You can create template parameters and expressions in the Optional Region dialog box or directly in Code view. When you use the Optional Region template object, Dreamweaver inserts template comments in the code.

A template parameter is defined in the head section:

<!-- TemplateParam name="departmentImage" type="boolean" value="true" -->

At the location where the optional region is inserted, code similar to the code below appears:

<!-- TemplateBeginIf cond="departmentImage" -->
<p><img src="/images/airfare_on.gif" width="85" height="22"> </p>
<!-- TemplateEndIf -->

Template parameters you create for optional regions can be accessed and edited in the template-based document by using the Template Properties dialog box (Modify > Template Properties).

There are two optional region objects: one lets the template author control which regions show and hide without letting a user edit the content, while the other lets template users edit content and set whether the region shows or hides.

Related topics

Inserting an optional region

Modifying template properties

Writing a template expression


Inserting an optional region

Use an optional region to control content which may or may not be shown in a template-based document. An optional region is controlled by a conditional statement. The template tab of an optional region is preceded by the word if. Based on the condition set in the template, a template user can define whether the region is viewable in pages they create.

An editable optional region allows a template user to edit the content in an optional region. For example, if the optional region includes an image or text, the template user can set whether the content is displayed, as well as make edits to the content if desired. Editable regions are controlled by a conditional statement. You create template parameters and expressions in the Optional Region dialog box, or by typing parameters and conditional statements in Code view.

To insert an optional region:
  1. In the Document window, select the element you want to set as an optional region.
  2. Do one of the following:
    • In the Insert bar, select the Templates category, then select the Optional Region button.
    • Choose Insert > Template Objects > Optional Region.
    • Right-click the selected content, and in the context menu select New Optional Region.
  3. Define options for the optional region.

    4. For information about defining the optional region, see Setting the Optional Region dialog box options.

  4. Click OK.
To insert an editable optional region:
  1. In the Document window, position the pointer where you want the optional region inserted.

    2. Tip: You cannot wrap a selection to create an editable optional region. Insert the region, then insert the content in the region.

  2. Do one of the following to open the Optional Region dialog box:
    • In the Insert bar, select the Templates category, then select the Editable Optional Region button.
    • Choose Insert > Template Objects > Editable Optional Region.
    • Right-click the selected content, and in the context menu select Editable Optional Region.

      • The Optional Region dialog box appears.

  3. Define options for the optional region.

    4. For information about defining the optional region, see Setting the Optional Region dialog box options.

  4. Click OK.


Modifying an Optional Region

You can edit optional region settings after you’ve inserted the region in a template. For example, you can change whether the default for the content is set to show or not, link a parameter to an existing optional region, or modify a template expression.

To reopen the Optional Region dialog box:
  1. Open the Property inspector, if it isn’t already open.
  2. In the Document window, do one of the following:
    • In Design view, click the template tab of the editable region you want to modify.
    • In Design view, click content in the template region, then in the tag selector click the template tag, <mmtemplate:if>.
    • In Code view, click the comment tag of the template region you want to modify.
  3. In the Property inspector, click Edit.

    4. The Optional Region dialog box opens.

  4. Make the changes you want, then click OK.


Creating a template-based document

Once you set the template design, you apply a template to either a blank document or a document that already contains content.

To create a new document based on a template, you can use the Assets panel or the New Document dialog box. The Assets panel lists templates in your current Dreamweaver site. You can right-click in the Templates category of the Assets panel to create a new template, and to create new documents from a template.

In the New Document dialog box, you can select a template from any of your currently defined Dreamweaver sites to create a new document from. When you create a new document based on a template, you can choose whether the document remains attached to the template. By default, when you change a template, all attached documents update to reflect the template changes. If you deselect the Update Page When Template Changes option when creating a new document, the new document is created as stationery: an independent HTML file, with no template regions. Updates to the template do not change the document.

To create a template-based document in the New Document dialog box:
  1. Choose File > New to open the New Document dialog box.
  2. In the New Document dialog box, select the Templates tab.
  3. In the Templates For list, select the site which contains the template you want to use.

    4. The site templates list updates to display templates in the selected site.

  4. In the list, select the template you want to use.
  5. Click Create to create a new template-based page.

    6. The document opens in the Document window.

To create a new document from a template in the Assets panel:
  1. Open the Assets panel (F11), if it is not already open.
  2. In the Assets panel, click the Templates icon to view your site templates.

    3. Tip: If you just created the template you want to apply, you may need to click the Refresh button to see it.

  3. Right-click the template you want to apply, then select New From Template.

    4. The document opens in the Document window.


Editing content in a template-based page

You can easily identify and select template regions in both the template document and in template-based documents. Editable template regions are listed at the bottom of the Modify > Templates submenu.

Editable regions that are inside a repeated region do not appear in the menu. You must locate these regions by looking for tabbed borders in the Document window.

For information about locating and modifying editable tags in a template-based document, see Modifying template properties.

To find an editable region and select it in the document:

Choose Modify > Templates, and choose the name of the region from the list at the bottom of that submenu.

The editable region is selected in the document.


Modifying template properties

When you create parameters in a template, documents based on the template automatically inherit the parameters and their initial value settings. A template user can update editable tag attributes and other template parameters (such as optional region settings) in the Template Properties dialog box.

For information about creating an editable tag in a template see Defining editable tag attributes in a template. For information about creating optional regions, see Inserting an optional region.

To modify an editable tag attribute:
  1. Open the template-based document, then choose Modify > Template Properties.

    2. The Template Properties dialog box opens. The following example shows two template properties. One is an optional region, the other an editable tag attribute for the template’s background color.
    This is a picture of the feature being described.

  2. In the Name list, select a the property.

    3. The bottom area of the dialog box updates to show the selected property’s label and its assigned value.
    This is a picture of the feature being described.

  3. In the field to the right of the property label, edit the value to modify the property in the document.

    4. Note: The field name and updateable values are defined in the template. Attributes which do not appear in the Name list are not updateable in the document.

  4. If you are defining an editable tag attribute in a nested template, do one of the following to set whether the parameter is passed through to documents based on the nested template:
    • Check the Allow Nested Templates to Control This checkbox, to pass the editable property to documents based on the nested template; the parameter will appear in the Templates Properties dialog box for documents based on that nested template.
    • To prevent the parameter from passing through do not check this option.


Modifying optional region template parameters

  1. Open the template-based document, then choose Modify > Template Properties.

    2. The Template Properties dialog box opens.

  2. In the Name list, select a property.

    3. The dialog box updates to show the selected property’s label and its assigned value.
    This is a picture of the feature being described.

  3. Select the Show checkbox, to show the optional region in the document, or deselect the checkbox to hide it.

    4. Note: The field name and default setting are defined in the template,.

  4. Check the Allow Nested Templates to Control This checkbox, to pass the editable property along to a documents based on the nested template.


Adding, deleting, and changing the order of a repeating region entry

Use repeating region controls to add, delete, or change the order of entries. When you add a repeating region entry, a copy of the entire repeating region is added. In order to update the content in the repeating regions, the original template must include an editable region in the repeating region.

This is a picture of the feature being described.

Options for editing repeating regions are also available in the Modify > Templates menu and the Edit > Repeating Entries menu.

To add, delete, or change the order of a repeating region:

Place the insertion point in the repeating region to select it, then do one of the following:

  • Click the plus (+) button to add a repeating region entry below the currently selected entry.
  • Click the minus (-) button to delete the selected repeating region entry.
  • Click the Down Arrow button to move the selected entry down one position.
  • Click the Up Arrow button to move the selected entry up one position.
  • Choose Modify > Template > Repeating Entries, and select one of the options in the menu. You can use this menu to insert a new repeating entry or move the selected entry’s position.
To cut, copy, and delete entries:

Place the insertion point in the repeating region to select it, then do one of the following:

  • Choose Edit > Repeating Entries > Cut Repeating Entries to cut a repeating entry.
  • Choose Edit > Repeating Entries > Copy Repeating Entries to copy a repeating entry.
  • Choose Edit > Repeating Entries > Delete Repeating Entries to remove a repeating entry.
  • Choose Edit > Paste to paste a repeating entry.

    • Pasting inserts a new entry; it does not replace an existing entry.


About nested templates

A nested template is a template whose design and editable regions are based on another template. To create a nested template, you must first save the original or base template, then create a new document based on the template, and then save that document as a template. In the new template, you can further define editable regions in areas originally defined as editable from the base template.

Nested templates are useful for controlling content in pages of a site that share many design elements, but have a few variations between pages. For example, a base template might contain broader design areas and be usable by many content contributors for a site, while a nested template might further define the editable regions in pages for a specific section in a site.

Editable regions in a base template are passed through to the nested template, and remain editable in pages created from a nested template unless new template regions are inserted in these regions.

Changes to a base template are automatically updated in templates based on the base template, and in all template-based documents that are based on the main and nested templates.

Example: The Global Car Rental site’s base template contains two editable regions, named body and footer:

This is a picture of the feature being described.

To create a nested template, we created a new document based on the template, then saved the document as a template and named it globalNested. In the nested template, we made changes in the editable region named body. We inserted a graphic in the left column and inserted a new editable region in the right column.

This is a picture of the feature being described.

When you add a new editable region in an editable region passed through to the nested template, the highlighting color of the editable region changes to orange. Content you add in an editable region, such as the graphic in the left column, is no longer editable in documents based on the nested template. The blue highlighted editable areas, whether added in the nested template or passed through from the base template, remain editable in documents based on the nested template. Template regions you do not insert an editable region in, pass through to template-based documents as editable regions.

This is a picture of the feature being described.

Related topic

Controlling editable regions in a nested template


Creating a nested template

You can create a nested template by saving a document based on a template, then creating a new template of that document. Nested templates let you create variations of a base template. You can nest multiple templates to define increasingly specific layout.

To create a nested template:

  1. Create a document from the template you want to base the nested template on by doing one of the following:
    • In the Assets panel’s Templates category, right-click the template you want to create a new document from, then select New From Template.
    • Choose File > New. In the New Document dialog box, click the Templates tab and select the site that contains the template you want to use; then in the document list, double-click the template to create a new document.

      • A new document appears in the Document window.

  2. Choose File > Save as Template or click the Make Nested Template button in the Insert bar, to save the new document as a template
  3. In the new template, add additional content and editable regions.
  4. Save the template.

    5. In documents based on the nested template, you can add or change content in editable regions passed through from the base template, as well, as editable regions created in the new template.


Applying a template to an existing document

When you apply a template to a document which contains existing content, Dreamweaver attempts to match the existing content to a region in the template. If you are applying a revised version of one of your existing templates, the names are likely to match. Dreamweaver compares the names of the editable regions in the document to the names of the editable regions in the new template; for each region name that matches, Dreamweaver places the existing contents of that region into the new region with the same name.

If you apply a template to a document that hasn’t had a template applied to it, there are no editable regions to compare and a mismatch occurs.

Dreamweaver tracks these mismatches and lists them in the Inconsistent Region Names dialog box. You can then select which region or regions to move the current page’s content to, or you can choose to delete the mismatched content. If you want to keep the content, select the name of an editable region from the pop-up menu in the dialog box; otherwise, choose “nowhere”, which discards the unresolved content.

To apply a template to an existing document:
  1. Choose File > Open to open the document you want to apply the template to.
  2. Perform one of the following actions:
    • Click in the Document window, then choose Modify > Templates > Apply Template to Page. Choose a template from the list and click Select.
    • Select the template in the Templates category of the Assets panel, and click the Apply button.
    • Drag the template from the Templates category of the Assets panel to the Document window’s Design view.
  3. If content exists in the document that can’t be automatically assigned to a template region, the Inconsistent Region Names dialog box appears. It lists all the editable regions in the template being applied. Use it to choose a destination for the content.

    4. For information about moving existing content to editable regions in the document, see Resolving inconsistent region names.


Detaching a document from a template

To make changes to the locked regions of a document based on a template, you must detach the document from the template. When the document is detached, the whole document becomes editable.

To detach a document from a template:
  1. Open the template-based document you want to detach.
  2. Choose Modify > Templates > Detach from Template.

    3. The document is detached from the template and all template code is removed.


Editing and updating templates

When you save a template, Dreamweaver asks if it should update all documents attached to the template. You can use the Modify > Templates > Update Pages command. Dreamweaver updates template-based documents in the same site as the template. Dreamweaver will automatically update documents based on the template, including nested templates that are based on a template you’re updating.


Updating Dreamweaver 4 templates

You can continue to work with templates that you created in Dreamweaver 4 in the current version of Dreamweaver. Dreamweaver will not automatically change the template syntax in the Dreamweaver 4 template files, so these files can be used with both Dreamweaver 4 and Dreamweaver MX. However, if you insert a new template region in a Dreamweaver 4 template using Dreamweaver MX, it will use the new Dreamweaver MX template syntax, and you will no longer be able to use that template in Dreamweaver 4.


Updating documents that are based on a template

When you make a change to a template, Dreamweaver prompts you to update the documents based on the template. You can also use the update commands to manually update the current document or the entire site. Using the update commands is the same as reapplying the template.

To open and modify an attached template:
  1. With the template-based document in the Document window, select Modify > Templates > Open Attached Template.
  2. Modify the content of the template as desired. To modify the template’s page properties, choose Modify > Page Properties. (Documents based on a template inherit the template’s page properties.)
  3. Save your document. Dreamweaver prompts you to update pages based on the template.
To apply template changes to the document:

Select Modify > Templates > Update Current Page.

To update the entire site or all documents that use the attached template:
  1. Select Modify > Templates > Update Pages.

    2. The Update Pages dialog box appears.

  2. In the Look In pop-up menu, do one of the following:
    • Select Entire Site, and then choose the site name from the adjacent pop-up menu. This updates all pages in the selected site to their corresponding templates.
    • Select Files That Use, and then choose the template name from the adjacent pop-up menu. This updates all pages in the current site that use the selected template.
  3. Make sure Templates is selected in the Update option.
  4. Click Start.

    5. Dreamweaver updates the files as indicated. If you selected the Show Log option, Dreamweaver provides information about the files it attempts to update, including information on whether they were updated successfully.


Checking template syntax

Dreamweaver automatically checks the template syntax when you save a template. An error message dialog appears if the syntax is badly formed. The error message describes the error and refers to the specific line in the code where the error exists.

You can use the Check Template Syntax command to check the template syntax prior to saving a template. For example, if you manually add a template parameter or expression in Code view, use the command to check that the code follows correct syntax.

To check for valid template syntax, do the following:

Choose Modify > Templates > Check Template Syntax.

Related topics

Writing a template expression

About the Expression Object Model

Template tag syntax


About XML

Extensible Markup Language (XML) is a markup language for structured documents. You can think of it as being like a generalization of HTML that lets you define tags. XML is derived from the Standard Generalized Markup Language (SGML). Like SGML, XML is a language for defining sets of tags and the relationships among them.

Tags in XML look similar to HTML tags, consisting of a tag name plus optional attributes, surrounded by angle brackets. As with HTML, content is contained between an opening tag and a closing tag (in which the tag name is preceded by a slash). One syntactical difference is that in XML, an empty tag (one that uses only a single tag, such as <img>, instead of an opening tag and a closing tag containing text or other material) must end with a slash just before the closing angle bracket. For example, an <img> tag in XML might look like the following example:

<img src="test.png" />

XML is more strict about its syntax than HTML; files that do not strictly conform to XML syntax are rejected by XML parsers.

XML provides a way to mark literal strings, which can include tags that should not be parsed. This method involves an element called a CDATA section, which includes a literal string in square brackets. Anything inside the square brackets is skipped by the XML parser. Dreamweaver-exported XML uses CDATA sections extensively.


Exporting and importing template XML content

A document based on a template contains a set of data represented by name/value pairs. Each pair consists of the name of an editable region, and the contents of that region. Suppose your template contains three editable regions: item_number, item_price, and item_color. You could fully describe a document based on that template by providing the name of the template and the name/value pairs.

Dreamweaver lets you export the name/value pairs into an XML file so that you can work with the data outside of Dreamweaver (for example, in an XML editor or a text editor, or a database application). Conversely, if you have an XML document that’s structured appropriately, you can import the data from it into a document based on a Dreamweaver template. For more information, see About XML.

To export a document’s editable regions as XML:
  1. Choose File > Open, and open a document that’s based on a template and contains editable regions.
  2. Choose File > Export > Template Data as XML.
  3. In the Export Template Data as XML dialog box, under Notation, select one of the following options:
    • If the document contains repeating regions or template parameters, select Use Standard Dreamweaver XML tag.
    • For templates that do not contain repeating regions or template parameters, select Use Editable Region Names as XML Tags.
  4. Click OK.
  5. In the dialog box that appears, enter a name for the XML file and click Save.

    6. Dreamweaver generates an XML file that contains the material from the document’s parameters and editable regions, including editable regions inside repeating regions or optional regions. The XML file includes the name of the original template, as well as the name and contents of each template region.

    Note: Content in the non-editable regions is not exported to the XML file.

To import XML content:
  1. Choose File > Import > Import XML into Template.
  2. In the Import XML dialog box, select the XML file and click Open.

Dreamweaver creates a new document based on the template specified in the XML file. It fills in the contents of each editable region in that document using the data from the XML file. The resulting document appears in a new Document window.

Note that if your XML file isn’t set up exactly the way Dreamweaver expects, you may not be able to import your data. One solution to this problem is to export a dummy XML file from Dreamweaver, so that you’ll have an XML file with exactly the right structure. Then copy the data from your original XML file into the exported XML file. The result is an XML file with the correct structure that contains the appropriate data, all ready to be imported.

Related topic

Exporting a site without template markup


Using XML tag notations

Dreamweaver lets you export XML content using standard Dreamweaver XML tags.

The easiest way to see the tag notations, if you understand XML syntax, is to look at an example. The following XML code was exported from a document based on a template named newstemplate. The document contains one defined editable region, named News_Story (and a default editable region, doctitle, which contains the document’s title tag).

Standard Dreamweaver XML tags use a tag named item. The item tag has a name attribute that gives the name of the editable region; the tag contains a CDATA section that in turn contains the contents of the editable region. In this example, the item tag with name="doctitle" identifies the title of the document, and the item tag with name="News_Story" identifies the editable region.

<?xml version="1.0"?>
<templateItems template="/Templates/newstemplate.dwt">
   <item name="doctitle">
      <![CDATA[<title>Today’s Headline Story</title>]]>
   </item>
   <item name="News_Story">
      <![CDATA[<p>This is where the story goes.</p>]]>
   </item>
</templateItems>


Setting Library highlighting preferences

You can customize the highlight color for library items and show or hide highlighting of library items by setting Highlighting preferences.

To change the highlight color for library items:
  1. Choose Edit > Preferences or Dreamweaver > Preferences (Mac OS X), and select the Highlighting category.
  2. Click the Library Items color box and select a highlight color using the color picker (or enter the hexadecimal value for the highlight color in the text box). For information about using the color picker, see Working with colors.
  3. Select Show to display the highlighted library color in the Document window.
  4. Click OK to close the Preferences dialog box.
To view highlight colors in the Document window:

Choose View > Visual Aids > Invisible Elements.

Highlight colors appear in the document window only when View > Visual Aids > Invisible Elements is enabled and the appropriate options are enabled in Highlighting preferences.

Related topic

Setting Highlighting preferences


Setting Library item properties

Use library item properties to specify the source file of an item, to make it editable, or to re-create the original library item after editing an instance of it in a document. To open the Property inspector, select a library item in a document.

For more information about library items, see Exporting and importing template XML content.

Src displays the filename and location of the source file for the library item. You can’t edit this information.

Open opens the library item’s source file for editing. This is equivalent to selecting the item in the Assets panel and clicking the Edit button.

Detach from Original breaks the link between the selected library item and its source file. When an item is detached it can be edited in the document, but it’s no longer a library item and can’t be updated when you change the original library item.

Recreate overwrites the original library item with the current selection. Use this option to re-create library items if the original library item is missing or has been accidentally deleted.


Setting template highlighting preferences

You can use the Dreamweaver highlighting preferences to customize the highlight colors for the outlines around the editable and locked regions of a template in Design view. The editable region color appears in the template as well as in documents based on the template.

To change template highlight colors:
  1. Choose Edit > Preferences or Dreamweaver > Preferences (Mac OS X), and select the Highlighting category.
  2. Click the Editable Regions color box and select a highlight color using the color picker (or enter the hexadecimal value for the highlight color in the text box). The process is the same for Nested Regions, and Locked Regions. For information about using the color picker, see Working with colors.
  3. Click the Show option to enable or disable displaying colors in the Document window.

    4. Nested Region does not have a Show option; it’s display is controlled by the Editable Region option.

  4. Click OK.
To view highlight colors in the Document window:

Choose View > Visual Aids > Invisible Elements.

Highlight colors appear in the document window only when View > Visual Aids > Invisible Elements is enabled and the appropriate options are enabled in Highlighting preferences.

Note: If invisible elements are showing but the highlight colors are not, choose Edit > Preferences or Dreamweaver > Preferences (Mac OS X) and make sure that the Show option next to the appropriate highlight color is selected. Also make sure that the desired color is visible against the background color of your page. (If you’re color-blind, you might need to change the highlight color from its default to a more visible color.)

Related topic

Setting Highlighting preferences


Setting code color preferences for a template document

You can set color preferences for formatting code in your template and other HTML documents. Color preferences control how HTML tags and scripts are color coded in the Code view. You can use color preferences to control the text, background color, and style attributes of the text displayed in Code view.

You can use the Preference’s Code Coloring category to set your own color scheme so you can easily distinguish template regions while viewing a document in Code view.

To set a Code view color scheme for templates:
  1. Choose Edit > Preferences or Dreamweaver > Preferences (Mac OS X).
  2. In the Category list, select Code Coloring, and in the Document Type list select HTML, then click Edit Coloring Scheme.
  3. In the dialog box that appears, in the Styles For list select Template Tags.
  4. Set color, background color, and style attributes for the Code view text by doing the following:
    • If you want to change the text color, in the Text Color text box type the hexadecimal value for the color you want to apply to the selected text, or use the color picker to select a color to apply to the text. Do the same in the Background field to add or change an existing background color for the selected text.
    • If you want to add a style attribute to the selected code, click the B (bold), I (italic), or U (underline) buttons to set the desired style.

Related topic

Setting code coloring preferences


Setting the Insert Repeating Table dialog box options

This dialog box allows you to specify the attributes of a repeating table before inserting it.

This is a picture of the feature being described.

To complete the Insert Repeating Table dialog box:
  1. Specify the following options:

    2. Rows determines the number of rows the table has.

    Columns determines the number of columns the table has.

    Cell Padding determines the number of pixels between a cell’s content and the cell boundaries.

    Cell Spacing determines the number of pixels between adjacent table cells.

    Tip: When you don’t explicitly assign values for cell spacing and cell padding, most browsers display the table as if cell padding were set to 1 and cell spacing were set to 2. To ensure that browsers display the table with no padding or spacing, set Cell Padding and Cell Spacing to 0.

    Width specifies the width of the table in pixels, or as a percentage of the browser window’s width.

    Border specifies the width, in pixels, of the table’s borders.

    Tip: When you don’t explicitly assign a value for border, most browsers display the table as if the border were set to 1. To ensure that browsers display the table with no border, set Border to 0. To view cell and table boundaries when the border is set to 0, choose View > Visual Aids > Table Borders.

    Repeat Rows of the Table specify which rows in the table are included in the repeating region.

    Starting Row sets the row number entered as the first row to include in the repeating region.

    Ending Row sets the row number entered as the last row to include in the repeating region.

    Region Name lets you define a unique name for the repeat region.

  2. Click OK to insert the table.


Setting the Optional Region dialog box options

You use the Optional Region dialog box to create template parameters and to define conditional statements (If...else statements) for template regions. You can use simple true/false operations, or define more complex conditional statements and expressions.

Options in the Advanced tab allow a template author to link multiple optional regions to a named parameter. In the template-based document both parameters will show or hide as a unit. For example, you can show a “closeout” image and sales price text area for a sale item. You can also use the Advanced tab to write a template expression which evaluates a value for the optional region and shows it or hides it based on the value. For more information about writing expressions, see Writing a template expression.

To create a template parameter:
  1. In the Basics tab of the Optional Region dialog box, enter a name for the parameter in the Name field.
  2. In the Show By Default check box, select the check box to set the selected region to show in the document. Deselect it to set the default value to false.
  3. Click OK.

    4. Note: To set a different value for the parameter, in Code view locate the parameter in the head section of the document and edit the value.

To link optional region parameters:
  1. In the Advanced tab of the Optional Region dialog box, select Use Parameter.
  2. In the pop-up menu to the right of the Use Parameter option, select the existing parameter you want to link the selected content to.
To control display of an optional region with a template expression:
  1. In the Advanced tab of the Optional Region dialog box, select Enter Expression.
  2. In the text box enter the expression.

    3. Tip: Dreamweaver automatically inserts double-quotation marks around the text you enter.

  3. Click OK.


Resolving inconsistent region names

You use the Inconsistent Region Names dialog box to assign content in a document to a region of a template. You can resolve the inconsistencies by assigning the content to a template region or by discarding the content.

This dialog box appears when the template you are applying and the document you are applying the template to do not have matching editable region names. This can occur if you are applying a template to a document that has never had a template applied to it and therefore contains no editable region names; or it occurs when you apply a template to a document that is attached to another template and contains different editable region names, editable tag attributes or template parameters.

To resolve the inconsistencies, you must direct Dreamweaver where to move the document content, or direct Dreamweaver to discard the content.

You can click Cancel to cancel the application of the template to the document. Depending on your familiarity with the templates in your site, you might be able to resolve the inconsistencies by comparing the region names in the template you’re applying and the template regions in the document. You can then add new regions with the same name as those in the new template file by updating the original template, or alter the region names in the new template to match the regions in the document. For information about locating the template regions in a document, see Editing content in a template-based page.

To assign existing content to an editable region in the new document:
  1. In the Inconsistent Region dialog box, select the unresolved region. In the Move Content to New Region pop-up menu, select a region in the new template to move the existing content to, or select Nowhere to remove the content from the document.
  2. To move all unresolved content to the selected region, click Use For All.
  3. Click OK.
To undo the template changes:

After you’ve applied a template to a document, if the results aren’t what you expected, you can use Edit > Undo Apply Template to revert to the document’s state before the template was applied.


Exporting a site without template markup

If you do not want to include template markup in the template-based documents you export to another site, use the Export Site Without Template Markup command.

To remove template markup in an exported site:
  1. Choose Modify > Templates > Export Without Markup.

    2. The Export Site Without Template Markup dialog box appears.

  2. In the Folder text field, enter the file path to the folder you want to export the file to or click Browse and select the folder.

    3. You must select a folder outside of the current site to extract the site to.

  3. Select additional file export options if desired.

    4. To save an XML version of exported template-based documents, select Keep Template Data Files, then click OK.

    To update changes to previously exported files, select Extract Only Changed Files.

Related topic

Exporting and importing template XML content


Controlling editable regions in a nested template

A nested template is a template which inherits its editable regions from the template it is based on. By default, all editable template regions from the base template pass through the nested template to the document based on the nested template. That means, if you create an editable region in a base template, and then create a nested template, the editable region will appear in documents based on the nested template if you did not insert any new template regions in that region in the nested template.

While working on a nested template, you get immediate feedback on whether a region will be editable in a document based on it. Pass through editable regions have a blue border. If you insert template markup inside the editable region the border changes to orange indicating the region won’t pass through to the document.

The following code is only necessary when you don’t want to insert a new template object in the editable region, and don’t want the region to be editable in documents based on the nested template. This code inserts an empty string in the template region.

To prevent an editable region from passing through to a nested template:
  1. In Code view, locate the template comment tag of the editable region you want to prevent from passing through.
  2. Enter @@” “@@.


Writing a template expression

Template expressions are statements you use to compute or evaluate a value. You can define expressions in Code view or in the Optional Region dialog box.

There are two ways to define expressions in code: using the <!-- TemplateExpr: expr = “your expresson”--> comment, or @@your expression@@. You insert the expression in the template. When you apply the template, Dreamweaver evaluates the expression and displays the value in the template-based document.

You can use an expression to store a value and display it in a document. For example, an expression can be as simple as the value of a parameter, such as @@ParamA@@, or complex enough to compute values which alternate the background color in a table row, such as @@(_index&1) ? red : blue @@ .

You can also define expressions for if and multiple-if conditions. When an expression is used in a conditional statement, it is evaluated as true or false. If the condition is true, the optional region will show; if it is false it won’t.

You can write basic template expressions using the Insert Optional Region command; for information about inserting optional regions, see Inserting an optional region. You can define more complex conditions, such as a multiple-if condition or a computed text condition, directly in Code view. To see a multiple-if code example, see Creating a Multiple If condition.

When you write a template expression in the code, an expression marker appears in Design view. To edit the expression in Design view, select the marker and in the Property inspector modify your entry.

The template expression language is a small subset of JavaScript, and uses JavaScript syntax and precedence rules. You can use JavaScript operators to write an expression like this:

@@firstName+lastName@@

The following features and operators are supported:

  • numeric literals, string literals (double-quote syntax only), boolean literals (true or false)
  • variable reference (see Expression Object Model for the defined variables)
  • field reference (the "dot" operator)
  • unary operators: +, -, ~, !
  • binary operators: +, -, *, /, %, &, |, ^, &&, ||, <, <=, >, >=, ==, !=, <<, >>
  • conditional operator: ?:
  • parentheses: ()

The following types are used: boolean, IEEE 64-bit floating point, string, and object. The only objects available are those defined by the About the Expression Object Model.

Dreamweaver templates do not support the use of JavaScript "null" or "undefined" types. Nor do they allow scalar types to be implicitly converted into an object; thus, the expression "abc".length would trigger an error, instead of yielding the value 3.


About the Expression Object Model

The Expression Object Model defines the variables you can use in an expression. The following variables are defined:

_document
Contains the document-level template data. There is a field for each parameter in the template, as well as several fields providing built-in information about the document.
_repeat
Only defined for expressions which appear inside a repeating region. Provides built-in information about the region:
_index
The numerical index (from 0) of the current entry
_numRows
The total number of entries in this repeating region
_isFirst
True if the current entry is the first entry in its repeating region
_isLast
True if the current entry is the last entry in its repeating region
_prevRecord
The "_repeat" object for the previous entry. It is an error to access this property for the first entry in the region.
_nextRecord
The "_repeat" object for the next entry. It is an error to access this property for the last entry in the region.
_parent
In a nested repeated region, this gives the _repeat object for the enclosing (outer) repeated region. It is an error to access this property outside of a nested repeated region.

During expression evaluation, all fields of the _document object and _repeat object are implicitly available. For example, you can enter title instead of _document.title to access the document’s title parameter.

In cases where there is a field conflict, fields of the _repeat object take precedence over fields of the _document object. Therefore, you shouldn’t need to explicitly reference _document or _repeat except that _document may be needed inside a repeat region to reference document parameters that are hidden by repeated region parameters.

When nested repeated regions are used, only fields of the innermost repeated regions are available implicitly. Outer regions must be explicitly referenced using _parent.


Creating a Multiple If condition

This example demonstrates defining a parameter named “Dept”, setting an initial value, and defining a multiple if condition which determines which logo to display.

This is an example of the code which is entered in the head section of the template:

<!-- TemplateParam name= “Dept” type = “number” value = “1”>

This condition statement checks the value assigned to the Dept parameter. When the condition is true or matches, the appropriate image is displayed.

<!-- TemplateBeginMultipleIf -->
<!-- checks value of Dept and shows appropriate image-->

<!-- TemplateBeginClause cond = “Dept == 1”> <img src = “.../sales.gif”> <!-- TemplateEndIfClause-->
<!-- TemplateBeginIfClause cond = “Dept == 2”> <img src = “.../support.gif”> <!-- TemplateEndIfClause-->
<!-- TemplateBeginIfClause cond = “Dept == 3”> <img src = “.../hr.gif”> <!-- TemplateEndIfClause-->
<!-- TemplateBeginIfClause cond = “Dept != 3”> <img src = “.../spacer.gif”> <!-- TemplateEndIfClause-->

<!-- TemplateEndMultipleIf -->

When a document is created, the template parameters are automatically passed to it. The template user determines which image to display by editing the “Dept” parameter’s value in the Template properties dialog box (Modify > Template Properties).


Template tag syntax

Following are the general syntax rules and a list of the comment tags used to define template and template instances (documents) regions. Dreamweaver automatically inserts template tags in the code when you insert a template object. If you prefer to add your own template regions you can enter them directly in Code view.


General rules:

Wherever a space appears, you can substitute any amount of whitespace (spaces, tabs, line breaks). The whitespace is mandatory except at the very beginning or end of a comment.

Attributes can be given in any order. For example, in a TemplateParam, you can specify the type before the name.

Comment and attribute names are case sensitive.

All attributes must be quoted. Single or double quotes can be used.

Related topic

Checking template syntax


Template tags:

The following tags define template regions:

<!-- TemplateBeginEditable name="..." -->
<!-- TemplateEndEditable -->

<!-- TemplateParam name="..." type="..." value="..." -->

<!-- TemplateBeginRepeat name="..." -->
<!-- TemplateEndRepeat -->

<!-- TemplateBeginIf cond="..." -->
<!-- TemplateEndIf -->

<!-- TemplateBeginPassthroughIf cond="..." -->
<!-- TemplateEndPassthroughIf -->

<!-- TemplateBeginMultipleIf -->
<!-- TemplateEndMultipleIf -->

<!-- TemplateBeginPassthroughMultipleIf -->
<!-- TemplateEndPassthroughMultipleIf -->

<!-- TemplateBeginIfClause cond="..." -->
<!-- TemplateEndIfClause -->

<!-- TemplateBeginPassthroughIfClause cond="..." -->
<!-- TemplateEndPassthroughIfClause -->

<!-- TemplateExpr expr="..." --> (equivalent to @@...@@)

<!-- TemplatePassthroughExpr expr="..." -->

<!-- TemplateInfo codeOutsideHTMLIsLocked="..." -->


Instance tags:

The following tags define template-based document regions:

<!-- InstanceBegin template="..." codeOutsideHTMLIsLocked="..." -->
<!-- InstanceEnd -->
<!-- InstanceBeginEditable name="..." -->
<!-- InstanceEndEditable -->
<!-- InstanceParam name="..." type="..." value="..." passthrough="..." -->
<!-- InstanceBeginRepeat name="..." -->
<!-- InstanceEndRepeat -->
<!-- InstanceBeginRepeatEntry -->
<!-- InstanceEndRepeatEntry -->

Previous


Testing a Site

Before uploading your site to a server and declaring it ready for viewing, it’s a good idea to test it locally. (In fact, it’s a good idea to test and troubleshoot your site frequently throughout its construction—you can catch problems early and avoid repeating them.)

You should make sure that your pages look and work as expected in the browsers you’re targeting, that there are no broken links, and that the pages don’t take too long to download. You can also test and troubleshoot your entire site by running a site report.

The following guidelines will help you create a good experience for visitors to your site:

  • Make sure your pages function as expected in the browsers you’re targeting and that they either work or “fail gracefully” in other browsers.

    • Your pages should be legible and functional in browsers that do not support styles, layers, plug-ins, or JavaScript (see Checking for browser compatibility). For pages that fail badly in older browsers, consider using the Check Browser behavior to automatically redirect visitors to another page (see Check Browser).

  • Preview your pages in as many different browsers and on as many different platforms as possible.

    • This gives you an opportunity to see differences in layout, color, font sizes, and default browser window size that cannot be predicted in a target browser check (see Previewing pages in browsers).

  • Check your site for broken links, and then fix them.

    • Other sites undergo redesign and reorganization too, and the page you’re linking to may have been moved or deleted. You can run a link check report to test your links (see Checking links in a page or site, Fixing broken links, Opening linked documents in Dreamweaver, or Using Reports to test a site).

  • Monitor the file size of your pages and the time they take to download (see Setting download time and size).

    • Keep in mind that for pages that consist of one large table, visitors will see nothing until the entire table finishes loading. Consider breaking up large tables; if this is not possible, consider putting a small amount of content—such as a welcome message or an advertising banner—outside the table at the top of the page so users can view this material while the table downloads.

  • Run a few site reports to test and troubleshoot the entire site.

    • You can check your entire site for problems, such as untitled documents, empty tags, and redundant nested tags (see Using Reports to test a site).

  • Once the bulk of the site has been published, continue to update and maintain it.

    • Publishing your site—that is, pushing it out and making it live—can be accomplished in several ways and is an ongoing process. An important part of the process is defining and implementing a version-control system, either with the tools Macromedia Dreamweaver MX includes or through an external version-control application.

  • Use the Macromedia Dreamweaver discussion forums found on the Macromedia website.

    • The forums are a great resource for getting information on different browsers, platforms, and so on. You can also discuss technical issues and share helpful hints with other Dreamweaver users.

This chapter contains the following sections:

  • Checking for browser compatibility
  • Using Behaviors to detect browsers and plug-ins
  • Previewing pages in browsers
  • Checking links in a page or site
  • Fixing broken links
  • Opening linked documents in Dreamweaver
  • Setting download time and size
  • Using Reports to test a site
Next


Checking for browser compatibility

Dreamweaver enables you to construct web pages with elements that are supported by all browsers (for example, images and paragraph text), as well as elements that are supported only by newer browsers (for example, styles and layers).

The Check Target Browsers feature tests the HTML in your documents to see if any tags or attributes are unsupported by your target browsers. The check does not alter the document in any way.

The Check Target Browsers feature uses text files called browser profiles to determine which tags particular browsers support. Dreamweaver includes predefined profiles for Netscape Navigator versions 2.0 and later, for Microsoft Internet Explorer versions 2.0 and later, and Opera versions 2.1 and later. To modify the existing profiles or to create new ones, see the Customizing Dreamweaver section at http://www.macromedia.com/support/dreamweaver/.

You can run a target browser check on a document, on a directory, or on an entire site.

Note: Running a target browser check does not check scripts in your site.

To run a target browser check:
  1. Choose from the following options:
    • To run the check on the current document, first save your file. Dreamweaver performs the check on the last saved version of the file and does not include unsaved changes.
    • To run the check on a directory or site, select a site from the Current Sites pop-up menu in the Site panel. Dreamweaver performs the target browser check on all the HTML files in this folder and any folders in it. You can perform target browser checks on local files only.
  2. Choose File > Check Page > Check Target Browsers.

    3. If you have not yet selected a primary browser, Dreamweaver prompts you to do so.

  3. From the list of browsers, select the target browser against which you want to check your site.
  4. Click Check.

    5. The report appears in the Target Browser Check panel (in the Results panel group).

  5. To save the report, click the Save Report button in the Target Browser Check panel.

    6. Note: The target browser report is a temporary file—it will be lost if you don’t save it.


Using Behaviors to detect browsers and plug-ins

You can use behaviors to determine which browser your visitors are using and whether they have a particular plug-in installed. For more information on behaviors, see Using JavaScript Behaviors.

Check Browser sends visitors to different pages depending on their browser brands and versions (see Check Browser). For example, you might want visitors to go to one page if they have Netscape Navigator 4.0 or later, to go to another page if they have Microsoft Internet Explorer 4.0 or later, and to stay on the current page if they have any other kind of browser.

Check Plugin sends visitors to different pages depending on whether they have the specified plug-in installed (see Check Plugin). For example, you might want visitors to go to one page if they have Macromedia Shockwave and another page if they do not.


Previewing pages in browsers

It’s a good idea to test your pages by previewing them in browsers often throughout the design and creation process. By using this strategy, you can catch errors early and not copy or repeat them.

You can preview a document in your target browsers at any time; you don’t have to save the document first. All browser-related functions work, including JavaScript behaviors, document-relative and absolute links, ActiveX controls, and Netscape Navigator plug-ins, provided that you have installed the required plug-ins or ActiveX controls in your browsers.

Content linked with a root-relative path does not appear when you preview documents in a local browser (unless you select the Preview Using Temporary File option in Preferences; see Previewing pages in browsers). This is because browsers don’t recognize site roots—servers do. To preview content linked with root-relative paths, put the file on a remote server, then choose File > Preview in Browser to view it (see Site root-relative paths).

You can define up to 20 browsers for previewing. All the browsers you define appear on the Preview in Browser menu. It’s a good idea to preview in the following browsers: Internet Explorer 4.0, Netscape Navigator 4.0, and at least one text-only browser, like Lynx.

To preview your document in a browser, do one of the following:
  • Choose File > Preview in Browser, then choose one of the listed browsers.

    • If you haven’t selected a browser yet, choose Edit > Preferences or Dreamweaver > Preferences (Mac OS X), and then select the Preview in Browser category on the left to select a browser (see Setting the Preview in Browser Preferences options).

  • Press F12 to display the current document in the primary browser.
  • Press Control+F12 (Windows) or Command+F12 (Macintosh) to display the current document in the secondary browser.
To test links in a browser:
  1. Choose File > Preview in Browser or press F12.
  2. Click the active links to verify that each one works properly.
To set or change preferences for your primary and secondary browsers:
  1. Do one of the following to open the Preview in Browser options:
    • Choose Edit > Preferences or Dreamweaver > Preferences (Mac OS X), and then select Preview in Browser from the category list on the left.
    • Choose File > Preview in Browser > Edit Browser List.

      • The Preferences dialog box appears with the Preview in Browser options.
      This is a picture of the feature being described.

  2. Make changes as necessary.

    3. For more information, see Setting the Preview in Browser Preferences options.

  3. Click OK.


Checking links in a page or site

Fixing broken links (links that no longer follow a valid path or point to a nonexistent file) on a large site can be a tedious and time-consuming problem. This is because a large site can contain hundreds of links to internal and external documents, and the links might change over time. Orphaned files (files that still exist in the site but no other files in the site link to) can be a problem too, because they take up disk space and may confuse other team members working on the site.

Use the Check Links feature to search for broken links and unreferenced files in an open file, a portion of a local site, or an entire local site. The only links that Dreamweaver verifies are links to documents within the site; Dreamweaver compiles a list of external links that appear in the selected document or documents, but does not verify them.

When Dreamweaver finishes checking links in the specified files, it opens the Link Checker panel (in the Results panel group). This dialog box displays a list of broken links, external links (links that Dreamweaver can’t check), and orphaned files. For more information, see Opening linked documents in Dreamweaver.

To check links within the current document:
  1. Save the file to a location within your local Dreamweaver site.
  2. Choose File > Check Page > Check Links.

    3. The report appears in the Link Checker panel (in the Results panel group).

  3. To save the report, click the Save Report button in the Link Checker panel.

    4. Note: The target browser report is a temporary file—it will be lost if you don’t save it.

To check links within a portion of a local site:
  1. In the Site panel, choose a site from the Current Sites pop-up menu.
  2. In Local view, select the files or folders to check.
  3. Initiate the check by doing one of the following:
    • Right-click (Windows) or Control-click (Macintosh) one of the selected files, and then choose Check Links > Selected Files/Folders from the context menu.
    • Choose File > Check Page > Check Links.

      • The report appears in the Link Checker panel (in the Results panel group).

  4. In the Link Checker panel, select a specific link report from the Show pop-up menu to view another report.

    5. Your report choices are Broken Links and External Links. You can check for Orphaned Files when you check links across an entire site (see the next procedure).

  5. To save a report, click the Save Report button in the Link Checker panel.
To check links in the entire site:
  1. In the Site panel, choose a site from the Current Sites pop-up menu.
  2. Choose Site > Check Links Sitewide.

    3. The report appears in the Link Checker panel (in the Results panel group).

  3. In the Link Checker panel, select a specific link report from the Show pop-up menu to view another report.

    4. Your report choices are Broken Links, External Links, and Orphaned Files.

  4. A list of files that fit the report type you selected appears in the Link Checker dialog box.

    5. Note: If you select Orphaned Files as your report type, you can delete orphaned files from the Link Checker panel directly by selecting a file from the list and pressing the Delete key.

    A list of files that fit the report type you selected appears in the Link Checker panel.

  5. To save a report, click the Save Report button in the Link Checker panel.


Fixing broken links

When you check links in Dreamweaver, the Link Checker panel displays a report of broken links, external links, and—if you chose to check the entire site—orphaned files (see Checking links in a page or site).

You can fix broken links and image references directly in the Link Checker panel, or you can open files from the list and fix links in the Property inspector.

To fix links in the Link Checker panel:
  1. Run a link check report (see Checking links in a page or site).
  2. In the Broken Links column (not the Files column) of the Link Checker panel (in the Results panel group), select the broken link.

    3. A folder icon appears next to the broken link.

  3. Click the folder icon to browse to the correct file to link to, or type the correct path and filename.
  4. Press Tab or Enter (Windows) or Return (Macintosh).

    5. If there are other broken references to this same file, a dialog box appears prompting you to fix the references in the other files as well. Click Yes to have Dreamweaver update all the documents on the list that reference this file. Click No to have Dreamweaver update the current reference only.

Note: If Enable File Check In and Check Out is turned on for the site, Dreamweaver attempts to check out files that require changes. If it cannot check out a file, Dreamweaver displays a warning dialog box and leaves broken references unchanged. See Using Check In/Check Out.

To fix links in the Property inspector:
  1. Run a link check report (see Checking links in a page or site).
  2. In the Link Checker panel (in the Results panel group), double-click an entry in the File column.

    3. Dreamweaver opens the document, selects the offending image or link, and highlights the path and filename in the Property inspector. (If the Property inspector is not visible, choose Window > Properties to open it.)

  3. To set a new path and filename in the Property inspector, click the folder icon to browse to the correct file, or type over the highlighted text.

    4. If you are updating an image reference and the new image appears at the incorrect size, click the W and H labels in the Property inspector or click the Refresh button to reset the height and width values. The W and H labels change from bold to normal type.

  4. Save the file.

As links are fixed, their entries disappear from the Link Checker list. If an entry still appears in the list after you enter a new path or filename in the Link Checker (or after you save changes in the Property inspector), it means that Dreamweaver cannot find the new file and still considers the link broken.


Opening linked documents in Dreamweaver

Links are not active within Dreamweaver; that is, you cannot open a linked document by clicking the link in the Document window.

To open linked documents in Dreamweaver, do one of the following:
  • Select the link and choose Modify > Open Linked Page.
  • Press Control (Windows) or Command (Macintosh) and double-click the link.

Note: The linked document must reside on your local disk.


Setting download time and size

Dreamweaver calculates size based on the entire contents of the page, including all linked objects, such as images and plug-ins. Dreamweaver estimates download time based on the connection speed entered in Status Bar preferences. Actual download time varies depending on general Internet conditions.

A good guideline to use when checking download times for a particular web page is the 8-second rule. That is, most users will not wait longer than 8 seconds for a page to load.

To set download time and size preferences:
  1. Choose Edit > Preferences or Dreamweaver > Preferences (Mac OS X).

    2. The Preferences dialog box appears.

  2. Select Status Bar from the Category list on the left.

    3. The Status Bar preference options appear.
    This is a picture of the feature being described.

  3. Choose a connection speed with which to calculate download time.

    4. The average connection speed in the United States is 28.8. If you are designing for an intranet, you may want to choose 1500 (T1 speed).

    For more information about Status Bar preferences, see Setting Status Bar preferences.

  4. Click OK.


Using Reports to test a site

When testing your site, you can compile and generate reports for several HTML attributes by using the Reports command. This command lets you check external links, combinable nested font tags, missing Alt text, redundant nested tags, removable empty tags, and untitled documents. You can check selected documents or an entire site for these HTML problems before you publish.

After you run a report, you can save it as an XML file, and then import it into a template instance or a database or spreadsheet and print it, or display it on a website. You can also add different report types to Dreamweaver through the Macromedia Dreamweaver Exchange website (see Adding extensions to Dreamweaver).

To use the Reports command to work with the Check In/Check Out system and Design Notes, see Using reports to improve workflow.

To run reports to test a site:
  1. Choose Site > Reports.

    2. The Reports dialog box appears.
    This is a picture of the feature being described.

  2. Choose a category to report on and a report type to run.

    3. For more information, see Setting Reports dialog box options.

  3. Click Run to create the report.

    4. Depending on what you chose to report on, you may be prompted to save your file, define your site, or select a folder (if you haven’t already done so).

    A list of results appears in the Site Reports panel (in the Results panel group).

To use and save a report:
  1. To sort the results, click the column heading you want to sort by.

    2. You can sort by filename, line number, or description.

  2. Select an item in the report, and then double-click to open the file in the Document window.
  3. Click Save Report to save the report.

    4. When you save a report, you can import it into a template instance or a database or spreadsheet and print it, or display it on a website.

Tip: After running HTML reports, use the Clean Up HTML command to correct any HTML errors the reports listed.


Setting the Preview in Browser Preferences options

The purpose of this dialog box is to set user preferences for the Preview in Browser category. This dialog box displays the currently defined primary and secondary browsers and their settings.

Procedure
  1. To add a browser to the list, click the plus (+) button, complete the Add Browser dialog box, and then click OK.

    2. The new browser name appears in the list.

  2. To delete a browser from the list, select the browser, and then click the minus (-) button.

    3. The browser name disappears from the list.

  3. To change settings for a selected browser, click the Edit button, make changes in the Edit Browser dialog box, and then click OK.
  4. Select the Primary Browser or the Secondary Browser option to specify whether the selected browser is the primary or secondary browser.

    5. F12 opens the primary browser; Control+F12 (Windows) or Command+F12 (Macintosh) opens the secondary browser.

  5. Select the Preview Using Temporary File option to create a temporary copy for previewing and server debugging.

    6. Deselect this option if you want to update the document directly.

Related topic

Previewing pages in browsers


Setting Reports dialog box options

The purpose of this dialog box is to run a report on a document or site. You can run reports to improve workflow, test a site, and check accessibility.

Procedure
  1. Choose what to report on from the Report On pop-up menu.

    2. Note: You cannot run a Selected Files in Site report unless you have already selected files in the Site panel.

  2. In the Workflow section, select a report type to run.

    3. You can run one or both of the following reports:

    • Checked Out By creates a report listing all documents checked out by a specific team member.
    • Design Notes creates a report listing all Design Notes for selected documents or for the site.
  3. In the HTML section, select a report type to run a report to test a site.

    4. You can run any of the following reports:

    • Combinable Nested Font Tags creates a report that lists all nested font tags that can be combined to clean up the code.

      • For example, <font color="#FF0000"><font size="4">STOP!</font></font> is reported.

    • Missing Alt Text creates a report listing all the img tags that don’t have alternate text.

      • Alternate text appears in place of images for text-only browsers or for browsers that have been set to download images manually. Screen readers read alternate text, and some browsers display alternate text when the user mouses over the image.

    • Redundant Nested Tags creates a report detailing nested tags that should be cleaned up.

      • For example, <i> The rain <i> in</i> Spain stays mainly in the plain</i> is reported.

    • Removable Empty Tags creates a report detailing all empty tags that can be removed to clean up the HTML code.

      • For example, you may have deleted an item or image in Code view, but left behind the tags that applied to that item.

    • Untitled Documents creates a reporting listing all the untitled documents found within the selected parameters. Dreamweaver reports all documents with default titles, duplicate titles, or missing title tags.
  4. If you selected Checked Out By or Design Notes, click the Report Settings button. Otherwise, skip this step.

    5. Note: If you selected both report types, you need to click the Report Settings button twice. Select one report, click Report Settings, and enter settings; then, select the other report, click Report Settings, and enter settings.

    • For Checked Out By, enter the name of a team member, and then click OK to return to the Reports dialog box.
    • For Design Notes, enter one or more name and value pairs, and select comparison values from the corresponding pop-up menus. Then click OK to return to the Reports dialog box.
  5. Click Run to create the report or reports.

    6. Depending on what you chose to report on, you may be prompted to save your file, define your site, or select a folder (if you haven’t already done so).

Related topics

Testing your website for accessibility

Using Reports to test a site

Using reports to improve workflow

Previous


Making Pages Dynamic

Use the web application development tools in Dreamweaver to add dynamic content to your pages.

This part contains the following chapters:

  • Optimizing the Workspace for Visual Development
  • The Dreamweaver Workflow for Dynamic Page Design
  • Storing and Retrieving Data for Your Page
  • Defining Sources of Dynamic Content
  • Adding Dynamic Content to Web Pages
  • Displaying Database Records
  • Using ColdFusion Components
  • Using Web Services
  • Adding Custom Server Behaviors
  • Creating Interactive Forms


Optimizing the Workspace for Visual Development

You can optimize the Macromedia Dreamweaver MX workspace to develop web applications visually. For example, you can use panels to rapidly build dynamic pages and you can view data live on your pages while you work.

This chapter contains the following sections:

  • Displaying useful panels
  • Viewing your database structure within Dreamweaver
  • Viewing live data in Design view
  • Working in Design view without live data
  • Previewing dynamic pages in a browser
  • Restricting database information displayed in Dreamweaver
Next


Displaying useful panels

Click the Application tab in the Insert bar to display a set of buttons that let you add dynamic content and server behaviors to your page, as follows.

This is a picture of the feature being described.

The number and type of icons that appear depend on the document type opened in the Document window. The Insert bar includes buttons to add the following items to the page:

  • Recordsets
  • Dynamic text or tables
  • Forms to insert or update records in a database
  • Record navigation bars

If you switch to Code view (View > Code), additional panels may appear to allow you to insert code in the page. For example, if you view a JSP page in Code view, a JSP panel appears on the Insert bar as follows:

This is a picture of the feature being described.

To find out what each icon on the Insert bar does, move your mouse over an icon. A tooltip appears, as follows:

This is a picture of the feature being described.

If you want to define sources of dynamic content for your page and add the content to the page, select Window > Data Bindings. The Bindings panel appears as follows:

This is a picture of the feature being described.

For more information, see Setting the Bindings panel options.

If you want to add server-side logic to your dynamic pages, select Window > Server Behaviors. The Server Behaviors panel appears as follows:

This is a picture of the feature being described.

A server behavior is the set of instructions inserted in a dynamic page at design time and executed on the server at runtime. For more information, see Setting the Server Behaviors panel options.

If you want to explore databases or create database connections, select Window > Databases. The Databases panel appears as follows:

This is a picture of the feature being described.

For more information, see Setting the Databases panel options.

If you want to inspect, add, or modify code for JavaBeans, Macromedia ColdFusion components, or web services, select Window > Components. The Components panel appears as follows:

This is a picture of the feature being described.

Note: The Components panel is enabled only if you open a ColdFusion, a JSP, or an ASP.NET page. Also, the document might not support certain components. For example, ColdFusion documents do not support JavaBeans.

For more information, see Setting the Components panel options.


Viewing your database structure within Dreamweaver

After connecting to your database, you can view its structure within Dreamweaver. For example, you can view the names of the tables, columns, views, and stored procedures in the database. Dreamweaver also identifies the primary key of each table, and the data types of each column. You can even view the data stored in your database tables.

To view the structure of a database:
  1. Open the Databases panel (Window > Databases).

    2. Dreamweaver populates the Databases panel with all the databases for which connections have been created. If you’re developing a ColdFusion site, Dreamweaver populates the panel with all the databases for which data sources have been defined in ColdFusion Administrator.

    Note: Dreamweaver looks at the ColdFusion server you defined for the current site. See Specifying where dynamic pages can be processed.

    If no database appears in the panel, you must create a database connection. For more information, see Connecting to a database.

  2. To display the tables, stored procedures, and views in the database, click the plus (+) icon beside a connection in the list.
  3. To display the columns in the table, click a table name.

    4. The columns icons reflect the data type and also indicates the primary key.

  4. To view the data in a table, right-click (Windows) or Control-click (Macintosh) the table name in the list and choose View Data from the pop-up menu.


Viewing live data in Design view

By default, Design view (View > Design) gives you a visual representation of the page without dynamic content. The default view is not ideal if you’re designing a dynamic page because the dynamic content can fundamentally change the layout of the page.

To see how dynamic content can affect the layout of a page, choose View > Live Data. Dreamweaver displays the page in Design view complete with dynamic content. The following illustration shows a dynamic page with Live Data turned off:

This is a picture of the feature being described.

The following illustration shows the same page with Live Data turned on:

This is a picture of the feature being described.

When Live Data is turned on in Design view, you can do the following:

  • Adjust the page’s layout using the page-design tools
  • Add, edit, or delete dynamic content
  • Add, edit, or delete server behaviors

Note: Links don’t work in Design view. To test your links, use the Preview in Browser feature. (See Previewing dynamic pages in a browser.)

When you make a change to the page affecting dynamic content, you can refresh the page by clicking the Refresh button (the circle-arrow icon). Dreamweaver can also refresh the page for you automatically. For more information, see Refreshing the page.

Related topics

Requirements for displaying live data

Copying dependent files

Providing the page with expected parameters

Troubleshooting Live Data view

Working in Design view without live data


Requirements for displaying live data

To view live data in Design view, you must do the following:

  • Define a folder to process dynamic pages. For instructions, see Specifying where dynamic pages can be processed.

    • When you turn on Live Data, a temporary copy of the open document is sent to the folder for processing. The resulting page is returned and displayed in Design view, and the temporary copy on the server is deleted.

    If the page displays an error message when you turn on Live Data, make sure the URL prefix in the Site Definition dialog box is correct. For more information, see About the URL prefix.

  • Copy related files (if any) to the folder. For more information, see Copying dependent files.
  • Provide the page with any parameters a user would normally provide. For instructions, see Providing the page with expected parameters.

If you have difficulty getting Live Data view to work, see Troubleshooting Live Data view.

Related topics

Viewing live data in Design view

Working in Design view without live data


Copying dependent files

Some dynamic pages rely on other files to work properly. You must upload all related files, including server-side includes and dependent files such as image files and JSP class files, to the folder you defined for processing dynamic pages (see Specifying where dynamic pages can be processed). Dreamweaver does not automatically copy dependent files to the folder when you turn on Live Data in Design view.

Note: Live Data supports code in server-side includes and application files such as global.asa (ASP) and application.cfm (ColdFusion). Make sure to upload these files to the server before turning on Live Data.

To copy dependent files to the application server:
  1. Open the Site panel (Window > Site Files), then click the Expand button (the last icon on the panel toolbar).

    2. The Site panel expands to full size.

  2. Click the Application Server icon on the expanded Site panel toolbar (the second icon from the left).

    3. The application server’s root folder appears under Remote Site.

  3. Under Local Folder, select the dependent files.
  4. Click the blue up arrow on the toolbar to copy the files to the application server, or drag the files to the appropriate folder under Remote Site.

You need to do this only once for your site unless you add more dependent files, in which case you must copy them to the folder too.

Related topics

Viewing live data in Design view

Requirements for displaying live data

Providing the page with expected parameters

Refreshing the page

Troubleshooting Live Data view


Providing the page with expected parameters

To generate dynamic content, some pages require parameters from the user—for example, a page needs the ID number of a record to find and display that record. Without that data, Dreamweaver cannot generate dynamic content to display in Design view.

If a page expects parameters from the user, you must provide the parameters as follows.

To provide the page with data expected from users:
  1. In the Document window, choose Live Data Settings from the View menu.

    2. The Live Data Settings dialog box appears.
    This is a picture of the feature being described.

  2. Complete the dialog box and click OK.

    3. For more information, see Setting the Live Data Settings dialog box options.

If you specified the GET method in the Live Data Settings dialog box, a text box appears on the Design view toolbar. Use this text box to enter different URL parameters, then click the Refresh button (the circle-arrow icon) to see how the parameters affect the page.

Enter each URL parameter in the following format:

name=value;

In this format, name is the URL parameter name expected by your page and value is the value held by that parameter. For more information, see Understanding URL parameters.

Related topics

Viewing live data in Design view

Requirements for displaying live data

Copying dependent files

Refreshing the page

Troubleshooting Live Data view


Refreshing the page

With Live Data turned on, click the Refresh button (the circle-arrow icon) on the document toolbar if you want to refresh the page after making a change affecting dynamic content.

You can also select the Auto Refresh option on the toolbar. With this option turned on, the page refreshes whenever you make a change affecting dynamic content. If you have a slow database connection, you might want to leave this option off when working in the Live Data window.

Related topics

Viewing live data in Design view

Requirements for displaying live data

Copying dependent files

Providing the page with expected parameters

Troubleshooting Live Data view


Troubleshooting Live Data view

Many problems with Live Data view can be traced back to missing or incorrect values in the Site Definition dialog box (Site > Edit Sites).

Check the Testing Server category of the Site Definition dialog box. The Remote Folder box should specify a folder capable of processing dynamic pages (see Specifying where dynamic pages can be processed). Here’s an example of a suitable remote folder if you’re running IIS or PWS on your hard disk:

C:\Inetpub\wwwroot\myapp\

Verify that the URL Prefix box specifies a URL that corresponds (or “maps”) to the remote folder. For example, if PWS or IIS is running on your local computer, then the following remote folders have the following URL prefixes:

Remote folderx | URL prefix
C:\Inetpub\wwwroot\ | http://localhost/
C:\Inetpub\wwwroot\myapp\ | http://localhost/myapp/
C:\Inetpub\wwwroot\fs\planes | http://localhost/fs/planes

For more information, see About the URL prefix.

Related topics

Viewing live data in Design view

Requirements for displaying live data

Copying dependent files

Providing the page with expected parameters

Refreshing the page


Working in Design view without live data

If Live Data is turned off or if you’re temporarily disconnected from your application server, you can still work on your dynamic pages in Design view. Dreamweaver uses placeholders to visually represent dynamic content on the page. For example, the placeholder for dynamic text extracted from a database uses the syntax {RecordsetName.ColumnName}, where Recordset is the name of the recordset and ColumnName is the name of the column you chose from the recordset.

Sometimes, the length of the placeholders for dynamic text distorts the page’s layout in Design view. You can solve the problem by using empty curly braces as placeholders.

To use empty curly braces as placeholders for dynamic text:
  1. Choose Edit > Preferences > Invisible Elements or Dreamweaver > Preferences > Invisible Elements (Mac OS X).
  2. In the Show Dynamic Text As pop-up menu, choose {}.
  3. Click OK.

Related topics

Viewing live data in Design view

Requirements for displaying live data


Previewing dynamic pages in a browser

Web application developers often debug their pages by checking them quickly and often in a web browser. Dreamweaver accommodates this work style with the Preview in Browser command (F12). The command lets you quickly view dynamic pages in a browser without uploading them to a server first.

Tip: You can also use Design view to quickly check your pages while working on them. Design view displays a fully editable, visual representation of your page, including live data. For more information, see Viewing live data in Design view.

When you use this command, Dreamweaver runs a temporary copy of the page on a web server before displaying it in your browser. (Dreamweaver then deletes the temporary file from the server.)

To preview dynamic pages, you must complete the Testing Server category of the Site Definition dialog box. For more information, see Specifying where dynamic pages can be processed.

Preview in Browser does not upload related pages such as a results or a detail page, dependent files such as image files, or server-side includes. To upload a missing file, choose Window > Site to open the Site panel, select the file under Local Folder, and click the blue up arrow on the toolbar to copy the file to the web server folder.


Restricting database information displayed in Dreamweaver

Advanced users of large database systems like Oracle should restrict the number of database items retrieved and displayed by Dreamweaver at design time. An Oracle database may contain items that Dreamweaver cannot process at design time. You can create a schema in Oracle, then use it in Dreamweaver to filter out unnecessary items at design time.

Note: You cannot create a schema or catalog in Microsoft Access.

Other users may benefit from restricting the amount of information Dreamweaver retrieves at design time. Some databases contain dozens or even hundreds of tables, and you might not want Dreamweaver to list them all while you work. In the Recordset dialog box in Dreamweaver, for example, clicking the Tables pop-up menu lists all the tables in the specified database. If that database contains dozens of tables, the list will be long and hard to use. If the database contains hundreds of tables, Dreamweaver might take a long time to retrieve them on certain systems. A schema or catalog can restrict the number of database items Dreamweaver gets at design time.

You must create a schema or catalog in your database system before you can apply it in Dreamweaver. Consult your database system documentation or your system administrator.

You cannot apply a schema or catalog in Dreamweaver if you’re developing a ColdFusion application.

To apply a schema or catalog in Dreamweaver if you’re developing an application other than a ColdFusion one:
  1. Open a dynamic page in Dreamweaver, then open the Databases panel (Window > Databases).

    2. If the database connection already exists, a list of connections appears in the panel. Right-click (Windows) or Control-click (Macintosh) the connection, and choose Edit Connection from the pop-up menu. The dialog box appropriate for the connection appears.

    If the connection does not exist, click the plus (+) button and create it. For more information, see Connecting to a database.

  2. In the dialog box for the connection, click Advanced.

    3. The Restrict dialog box appears.

  3. Specify your schema or catalog, and click OK.


Setting the Bindings panel options

The purpose of this panel is to define sources of dynamic content for the page, and add the content to the page.

Tasks

Defining Sources of Dynamic Content

Adding Dynamic Content to Web Pages

Changing or deleting content sources

Applying formats to data


Setting the Server Behaviors panel options

The purpose of this panel is to add Dreamweaver server behaviors to a page, edit server behaviors, and create new server behaviors.

Tasks

Displaying Database Records

Building Master/Detail Pages

Building Pages that Search Databases

Building Pages that Modify Databases

Building Pages that Restrict Access to Your Site

Deleting dynamic content

Adding Custom Server Behaviors


Setting the Databases panel options

The purpose of the Databases panel is to create database connections, to inspect databases, and to insert database-related code in your pages.

Tasks

Viewing your database structure within Dreamweaver

Connecting to a database


Setting the Components panel options

The purpose of the Components panel is to create and inspect components, and to insert component code in your pages.

Note: The panel does not work in Design view.

Tasks

Defining JavaBeans (JSP only)

Using ColdFusion Components

Using Web Services


Setting the Live Data Settings dialog box options

The purpose of this dialog box is to provide a page with data expected from users so that Dreamweaver can display the page in Design view with live data.

Procedure
  1. In the URL Request area, click the plus (+) button and enter a parameter your page expects.

    2. Specify a name and a test value for each parameter.

  2. In the Method pop-up menu, select the HTML form method your page expects: POST or GET.
  3. In the Initialization Script text area, include any source code you want to insert at the top of the page before it runs.

    4. Initialization scripts usually consists of code that set session variables. For more information, see Understanding session variables.

  4. To save your settings for the current page, click Save Settings For This Document.

    5. Note: To save the settings, Design Notes (File > Design Notes) must be enabled.

  5. Click OK.

Related topics

Providing the page with expected parameters

Viewing live data in Design view

Understanding form parameters

Understanding URL parameters


Setting the Restrict dialog box options

The purpose of this dialog box is to use a predefined database schema or catalog to restrict the number of database items Dreamweaver retrieves at design time.

You must first create a schema or catalog in your database application before you can apply it in Dreamweaver. Consult your database system’s documentation or your system administrator.

Note: You cannot create a schema or catalog in Microsoft Access.

Procedure

Specify your schema or catalog, and click OK.

Related topic

Restricting database information displayed in Dreamweaver

Previous


The Dreamweaver Workflow for

Next

The Dreamweaver Workflow for
Dynamic Page Design

A key benefit provided by Macromedia Dreamweaver MX is the ability to create dynamic websites without having to be experienced in programming languages. Dreamweaver’s visual tools let you develop dynamic websites without having to hand code the complex programmatic logic required to create a site supporting the display of dynamic content stored in a database. Dreamweaver lets you create dynamic websites using any of several popular web programming languages and server technologies. These include Macromedia ColdFusion, ASP.NET, Microsoft Active Server Pages (ASP), JavaServer Pages (JSP), and PHP.

This chapter outlines the key steps you must follow to successfully design and create a dynamic website. At the end of each section, you will find references to the specific procedures necessary to develop a dynamic page. The five key steps to developing a dynamic web page are:

  • Designing the page
  • Creating a source of dynamic content
  • Adding dynamic content to a web page
  • Enhancing the functionality of a dynamic page
  • Testing and debugging the page
Next


Designing the page

A key step in designing any website—whether static or dynamic—is the visual design of the page. When adding dynamic elements to a web page, the design of the page becomes crucial to its usability. Carefully consider how users will interact with both individual pages, and the website as a whole.

A common method of incorporating dynamic content into a web page is to create a table to present content, and import dynamic content into one or more of the table’s cells. Using this method you can present information of various types in a structured format.

For information on designing pages, see the following chapters:

  • Laying Out Pages in Layout View
  • Presenting Content with Tables
  • Inserting and Formatting Text
  • Inserting Images


Creating a source of dynamic content

Dynamic websites require a content source from which to extract data before they can display it on a web page. In Dreamweaver, these data sources can be databases, request variables, server variables, form variables, or stored procedures.

Before you can use these content sources in a web page, you must:

  • Create a connection to the dynamic content source (such as a database) and the application server processing the page
  • Specify what information in the database you want to display, or what variables you want to include in the page
  • Use Dreamweaver’s point-and-click interface to select and insert dynamic content elements into the selected page

Dreamweaver allows you to easily connect to a database and create a recordset from which to extract dynamic content. A recordset is the result of a database query. It extracts the specific information you request and allows you to display that information within a specified page. You define the recordset based on the information contained in the database and the content you want to display.

Different technology vendors may use different terminology for a recordset. In ASP and ColdFusion, a recordset is defined as a query. In JSP, a recordset is called a resultset. ASP.NET refers to a recordset as a DataSet. If you are using other sources of data, such as user input or server variables, the name of the data source that is defined in Dreamweaver is the same as the data source name itself.

To use a content source in Dreamweaver, you use the Bindings panel to create the data source. The Bindings panel, shown below, lets you create data sources for databases and different variable types. When you create a data source it is stored in the Bindings panel, where it can be selected and inserted into the current page.

This is a picture of the feature being described.

To create a recordset in Dreamweaver, you use the Recordset dialog box. You can launch the Recordset dialog from either the Server pane of the Insert bar, or from the Bindings panel. The Simple Recordset dialog box lets you select an existing database connection and create a database query by selecting the table or tables whose data you want to include in the recordset. You can even use the Filter section of the dialog box to create simple search and return criteria for the query. You can test the query from within the Recordset dialog box, and make any needed adjustments before adding it to the Bindings panel.

Once a database connection is established, and a recordset defined, the recordset appears in the Bindings panel. From here you can import it into any web page within the defined site. The illustration below shows the Bindings panel with the recordset for an employee database open. You can insert any of the values shown into a web page by selecting the item, and clicking the Insert button at the bottom of the panel. The selected item is inserted into the specified placeholder within the page.

This is a picture of the feature being described.

For information on databases, and the procedures needed to create a database connection, see the following chapters:

  • Defining Sources of Dynamic Content
  • Beginner’s Guide to Databases
  • Setting Up a DSN in Windows


Adding dynamic content to a web page

After you define a recordset or other data source, and add them to the Bindings panel, you can insert the dynamic content the recordset represents into the page. The Dreamweaver menu-driven interface makes adding dynamic content elements as easy selecting a dynamic content source from the Bindings panel, and inserting it into an appropriate text, image, or form object within the current page.

When you insert a dynamic content element or other server behavior into a page, Dreamweaver inserts a server-side script into the page’s source code. This script instructs the server to retrieve data from the defined data source and render it within the web page.

To place dynamic content within a web page, you can:

  • Place it at the insertion point specified by the cursor in either Code or Design view.
  • Replace a text string or other placeholder.
  • Insert it into an HTML attribute. For example, dynamic content can define the src attribute of an image or the value attribute of a form field.

For detailed procedures on adding dynamic content to a page, see:

  • Adding Dynamic Content to Web Pages
  • Creating Interactive Forms


Enhancing the functionality of a dynamic page

In addition to adding dynamic content, Dreamweaver lets you easily incorporate complex application logic into web pages. You do this using Server behaviors. Server behaviors are predefined pieces of server-side code that add application logic to web pages, providing greater interaction and functionality. The Dreamweaver server behaviors allow you to add application logic to a web site without having to write the code yourself. The server behaviors supplied with Dreamweaver MX support ColdFusion, ASP, ASP.NET, JSP and PHP document types.

The server behaviors are written and tested to be fast, secure, and robust. Dreamweaver’s built-in server behaviors have been designed to support cross-platform web pages for all browsers.


Adding server behaviors to a page

To add server behaviors to a page, select them from either the Insert bar, or the Server Behaviors panel. To use the Insert bar, click the Application tab and click a server behavior button. To use the Server Behaviors panel, choose Window > Server Behaviors, click the plus (+) button on the panel, and choose a server behavior from the pop-up menu. The illustration below shows the Server Behavior buttons available from the Insert bar.

This is a picture of the feature being described.

Dreamweaver provides a point-and-click interface that makes applying dynamic content and complex behaviors to a page as easy as inserting textual and design elements. The following server behaviors are available:

  • Define a recordset from an existing database. The recordset you define is then stored in the Bindings panel.
  • Display multiple records on a single page. You select either an entire table or individual cells or rows that contain dynamic content, and specify the number of records to display on each page view.
  • Create and insert a dynamic table into a page, and associate the table with a recordset. You can later modify both the tables appearance and the repeated region using the Property inspector and Repeated Region Server Behavior respectively.
  • Insert a dynamic text object into a page. The text object you insert is an item from a predefined recordset, to which you can apply any of the Dreamweaver MX data formats.
  • Create record navigation and status controls, master/detail pages, and forms for updating information in a database.
  • Displaying more than one record from a database record.
  • Creating recordset navigation links that allow users to view the previous or next records
    from a database record.
  • Adding a record counter to help users keep track of how many records where returned, and where they are in the returned result.

You can also extend Dreamweaver server behaviors by writing your own, or installing server behaviors written by third-parties.

For more information on enhancing the functionality of web pages using server behaviors, see the following chapters:

  • Displaying Database Records
  • Building Pages that Search Databases
  • Building Pages that Modify Databases
  • Building Pages that Restrict Access to Your Site
  • Adding Custom Server Behaviors


Testing and debugging the page

Before making a dynamic page—or an entire website—available on the web, you will want to test its functionality. Testing a Site provides guidelines to help you test a website’s usability and cross-platform compatibility. For more information about designing web sites for people with auditory, visual, and other disabilities, see Dreamweaver and Accessibility. You should become familiar with the issues described in this chapter and consider how your application’s functionality might affect people with disabilities.


Testing Dynamic Content

Dreamweaver allows you to preview and edit dynamic content using the Live Data Window.

Note: Links don’t work in the Live Data window. To test your links, use the Dreamweaver Preview in Browser feature. (See Previewing pages in browsers.)

While dynamic content is displayed, you can perform the following tasks:

  • Adjust the page’s layout using the Dreamweaver page-design tools
  • Add, edit, or delete dynamic content
  • Add, edit, or delete server behaviors

To achieve this effect, Dreamweaver runs the dynamic page on your server before displaying it in the Live Data window. Whenever you switch to the Live Data window, a temporary copy of the open document is sent to your application server for processing. The resulting page is returned and displayed in the Live Data window, and the temporary copy on the server is deleted.

You can toggle between the Document window and the Live Data window by choosing Live Data from the View menu. If a page expects data from the user—for example, the ID number of a record selected in a master page—you can provide the page with that data yourself in the Live Data Settings dialog box.

To enter live data parameters:
  1. Make the necessary changes to the page.
  2. If your page expects URL parameters from an HTML form using the GET method, enter the name/value pairs in the text box on the toolbar and click the Refresh button (the circle-arrow icon).

    3. Enter the test data in the following format:

    name=value;

In this format, name is the URL parameters name expected by your page and value is the value held by that parameter.

You can also define name/value pairs in the Live Data Settings dialog box (View > Live Data Settings) and save them with the page.
  3. Click the Refresh button if your page needs refreshing.


Editing dynamic content on a page

You can modify or remove dynamic content from a page by changing the server behavior that provides the content, or deleting the behavior altogether. For example, you can edit a recordset server behavior to return more records to the page.

Dynamic content on a page is listed in the Server Behaviors panel. For example, if you add a recordset to your page, the Server Behaviors panel lists it as follows:

Recordset(myRecordset)

If you add another recordset to your page, the Server Behaviors panel lists both recordsets as follows:

Recordset(mySecondRecordset)
Recordset(myRecordset)
To edit a server behavior providing dynamic content:
  1. Open the Server Behaviors panel (Window > Server Behaviors).
  2. Click the plus (+) button to display the server behaviors, and double-click the server behavior in the Server Behaviors panel.

    3. The dialog box you used to define the original data source appears.

  3. Make your changes in the dialog box and click OK.

You can also use the Property inspector to edit the recordsets on the page. Open the Property inspector (Window > Properties), then select the recordset in the Server Behaviors panel (Window > Server Behavior). Here’s the Property inspector for a recordset:

This is a picture of the feature being described.


Deleting dynamic content

After adding dynamic content to a page, you can delete it by selecting the dynamic content on the page and pressing Delete. You can also delete it by selecting the dynamic content in the Server Behaviors panel and clicking the minus (-) button.

Note: This operation removes the server-side script in the page that retrieves the dynamic content from the database. It does not delete the data in the database.
Previous


Storing and Retrieving Data for Your Page

Web-based applications and dynamic websites require a content source from which to retrieve data. Both data and data sources can take many forms. Typically, data consists of text or numerical information returned to a web page, and displayed in some form to the user.

This chapter contains the following sections:

  • Using a database to store content
  • Collecting data submitted by users
  • Accessing data stored in session variables
Next


Using a database to store content

Using a database to store content allows you to separate your website’s design from the content you want to display to users of the site. Instead of writing individual HTML files for every page, you only need to write a page—or template—for the different kinds of information you want to present. Using a database, you can provide new content to a website by simply uploading content into a database and then retrieving that content dynamically in response to a user’s request. A key advantage of storing content information in a database is the ability to update information in a single source, and then populate that change throughout the website without having to search through the pages that might contain the information, and manually edit each page.

Databases come in many forms depending upon the amount and the complexity of the data they must store. A database commonly installed on Windows computers is Microsoft Access. If you are new to databases, Access provides an easy-to-use interface that lets you work with database tables. While you can use Access as a data source for most website applications, be aware that Access has a file size limitation of 2 gigabytes (GB), and is limited to 255 concurrent users. For this reason, Access is a reasonable choice for website development and corporate workgroups. However, if you anticipate a large user community accessing the site, plan on using a database designed to support your sites intended user base.

For websites requiring a greater degree of flexibility in their modeling of data, and the ability to support large, concurrent user communities, server-based relational databases (typically referred to as RDBMS) are commonly used. Common relational databases used to store content for web-based applications and dynamic sites include MySQL, Microsoft SQL Server, and Oracle.

Whatever database you choose to support your website, you can use Dreamweaver to design web forms to insert, update, or delete data from the database.

To learn more about databases, see Beginner’s Guide to Databases.


Accessing data stored in a database

Web pages can’t directly access the data stored in a database. Instead, they interact with a recordset. A recordset is a subset of the information, or records, extracted from the database. This subset of information is extracted using a database query. A query is a search statement designed to find and extract specific information from a database. Macromedia Dreamweaver MX uses the Structured Query Language (SQL) to build queries. Although you do not need to learn SQL (pronounced “sequel”) to be able to create simple queries using Dreamweaver, a basic knowledge of this easy-to-understand language lets you create more advanced queries, and thus provides you with greater flexibility in designing dynamic pages. To learn the basics of SQL, see SQL Primer.

A SQL query can produce a recordset that includes only certain columns, only certain records, or a combination of both. A recordset can also include all the records and columns of a database table. However, because applications rarely need to use every piece of data in a database, you should strive to make your recordsets as small as possible. Because the web server temporarily holds the recordset in memory, using a smaller recordset uses less memory, and can potentially improve server performance.


Collecting data submitted by users

You can use web pages to gather information from users, store that information in the server’s memory, then use the information to create a dynamic response based on the user’s input. The most common tools for gathering information are HTML forms and hypertext link selections.

HTML forms let you gather information from users and store it in the server’s memory. An HTML form can send the information either as form parameters or as URL parameters. If you set the form’s method attribute to POST, the browser includes the form’s values in the body of the message sent to the server. If you set the form’s method attribute to GET, the browser appends the form values to the URL specified in the action attribute and sends the information to the server.

Hypertext links also let you gather information from users and store it in the server’s memory. You specify a value (or values) to be submitted when a user clicks a link—a preference, for example—by appending the value to the URL specified in the anchor tag. When a user clicks the link, the browser sends the URL and the appended value to the server.

This section describes how to create form and URL parameters for use in web applications. The following topics are discussed in this section:

  • Understanding form parameters
  • Understanding URL parameters
  • Creating URL parameters using HTML links
  • Creating URL parameters using HTML links
  • Retrieving form and URL parameters


Understanding form parameters

Form parameters are sent to the server using an HTML form using either the POST or GET method. When using the POST method, parameters are sent in the body of the message. In contrast, the GET method appends parameters to the requested URL.

You can use Dreamweaver to quickly design HTML forms that send form parameters to the server. For instructions, see Creating Interactive Forms. Be aware of the method you choose to transmit information from the browser to the server. The example below illustrates a form’s property inspector with the form method set to POST:

This is a picture of the feature being described.

Form parameters take the names of their corresponding form objects. For example, if your form contains a text field named txtLastName, then the following form parameter is sent to the server when the user clicks the Submit button:

txtLastName=enteredvalue

In cases where a web application expects a precise parameter value (for example, when it performs an action based on one of several options), use a radio button, check box, or list/menu form object to control the possible values the user can submit. This prevents users from mis-typing information, and causing an application error. The example below depicts a pop-up menu form offering three choices:

This is a picture of the feature being described.

Each menu choice corresponds to a hard-coded value that is submitted as a form parameter to the server. The List Values dialog box—shown below—matches each list item to a value (Add, Update, or Delete):

This is a picture of the feature being described.


Understanding URL parameters

A URL parameter is a name/value pair appended to a URL. The parameter begins with a question mark (?) and takes the form name=value. If more than one URL parameter exists, each parameter is separated by an ampersand (&). The example below shows a URL parameter with two name/value pairs:

http://server/path/document?name1=value1&name2=value2

Use URL parameters to pass user-supplied information from the browser to the server. When a server receives a request, and parameters are appended to the URL of the request, the server puts the parameters at the disposal of the requested page before serving that page to the browser.

In this example, imagine that the application is a web-based storefront. Because they want to reach the widest possible audience, the developers of the site have designed the site to support foreign currencies. When users log in to the site, they can select what currency in which to view the prices of the available items.

  1. The browser requests the page report.cfm from the server. The request includes the URL parameter Currency=“euro”. The Currency=“euro” variable specifies that all monetary amounts retrieved be displayed as the European Union’s Euro.
  2. The server temporarily stores the URL parameter in memory.
  3. The report.cfm page retrieves and uses the parameter to retrieve the cost of items in Euros. These monetary amounts can either be stored in a database table of different currencies, or converted from a single currency associated with each item any currency supported by the application.
  4. The server sends the report.cfm page to the browser, and displays the value of items in the requested currency. When this user terminates the session, the server destroys the value of the URL parameter, freeing up server memory to hold the requests of new users logging in to the site.
    The following illustration shows how an application server processes a URL parameter.

URL parameters are created when the HTTP’s GET method is used in conjunction with an HTML form. The GET method specifies that the parameter value be appended to the URL request when the form is submitted.

Typical uses of URL parameters include personalizing websites based on a user’s preferences. For example, a URL parameter consisting of a username and password can be used to authenticate a user, displaying only information that user has subscribed to. Common examples of this include financial websites that display individual stock prices based on stock market symbols the user has previously chosen. Web application developers commonly use URL parameters to pass values to variables within applications. For example, you could pass search terms to SQL variables in a web application to generate search results.


Creating URL parameters using HTML links

Creating a URL parameters within an HTML link consists of using the href attribute of the HTML anchor tag. You can enter the URL parameters directly in the attribute by switching to Code view (View > Code). In the example below, three links create a single URL parameter (action) with three possible values (Add, Update, and Delete). Depending on the link the user clicks, a different parameter value is sent to the server, and the requested action performed:

<a href=”http://www.mysite.com/myfiles/
   index.asp?action=Add”>Add a record</a>
<a href=”http://www.mysite.com/myfiles/
   index.asp?action=Update”>Update a record</a>
<a href=”http://www.mysite.com/myfiles/
   index.asp?action=Delete”>Delete a record</a>

You can use Dreamweaver’s Property inspector to create the same URL parameters by selecting the link and choosing Window > Properties. In the following example, the URL parameter was entered in the Property inspector:

This is a picture of the feature being described.


Retrieving form and URL parameters

After a form or URL parameter is created, Dreamweaver can retrieve the value and use it in a web application. For more information, see Defining URL parameters.

After defining the form or URL parameter in Dreamweaver, you can insert its value within a page. For more information, see Adding Dynamic Content to Web Pages.


Accessing data stored in session variables

Session variables provide a mechanism through which user information can be stored and accessed for use by web applications. Typically, session variables store information (usually form or URL parameters submitted by users) and make that information available to all of the applications’s pages for the duration of the user’s visit. For example, when users log on a web portal that provides access to e-mail, stock quotes, weather reports, and daily news, the web application stores the login information in a session variable that identifies the user throughout the site’s pages. This allows the user to see only the types of content they have selected as they navigate through the site. Session variables can also provide a safety mechanism in the form of a time-out that terminates the user’s session if the account remains inactive for too long a period of time. This also frees server memory and processing resources if the users forgets to log off of a website.

Session variables are commonly used to store user display preferences, answers to multipart questionnaires, items chosen for purchase in so-called “shopping cart” applications, and running score tallies for online games.

This section describes the following session variable topics:

  • Understanding session variables
  • Collecting information to store in session variables
  • Storing information in session variables
  • Example of information stored in session variables
  • Retrieving data from session variables


Understanding session variables

Web servers (or more correctly, the HTTP protocol) are stateless, meaning that they do not keep track of the browsers connecting to them, or of the individual page requests by users. Every time a web server receives a request for a web page and responds to it by delivering the relevant page to the user’s browser, the web server “forgets” about both the browser making the request and the web page it sent. When the same user requests a related page at a later time, the web server sends the page without knowing the last page that it sent to that user.

While the stateless nature of HTTP makes for a simple, easy-to-implement protocol, it makes more advanced web applications, such as personalized content generation, more difficult. For example, in order to customize a site’s content for an individual user, the user must first be identified. Most websites use some form of username/password login to accomplish this. If multiple customized pages will be displayed, a mechanism for keeping track of which users are logged in is necessary, as most users would find it unacceptable to provide their username/password for each of the site’s pages.

To allow for the creation of complex web applications, and the storage of user-supplied data across all of a site’s pages, most application server technologies include support for session management. Session management allows web applications to maintain state across multiple HTTP requests, allowing a user’s requests for web pages during a given time period to be viewed as part of the same interactive session.

Session variables store information for the life of the user’s session. The user’s session begins when he or she first opens a page within the application. The session ends when the user does not open another page in the application for a certain period of time, or when the user explicitly terminates the session (typically by clicking a “log-off” link). While it exists, the session is specific to an individual user, and every user has a separate session.

Use session variables to store information that every page in a web application can access. The information can be as diverse as the user’s name, preferred font size, or a flag indicating whether or not the user has successfully logged in. Another common use of session variables is to keep a running tally, such as the number of questions the user answered correctly so far on an online quiz, or the products the user selected so far from an online catalog.

Note that session variables can only function if the user’s browser is configured to accept cookies. The server creates a session ID number that uniquely identifies the user when the session is first initiated, then sends a cookie containing the ID number to the user’s browser. When the user requests another page on the server, the server reads the cookie in the browser to identify the user and to retrieve the user’s session variables stored in the server’s memory.


Collecting information to store in session variables

Before creating a session variable, you must first obtain the information you want to store, then send it to the server for storage. This section describes how to gather and send information to the server using HTML forms or hypertext links containing URL parameters. You can also obtain information from cookies stored on the user’s computer, from the HTTP headers sent by the user’s browser with a page request, or from a database.


Storing URL parameters in session variables

In the following example, a product catalog uses hard-coded URL parameters created using a hypertext link to send product information back to the server to be stored in a session variable. When a user clicks the “Add to shopping cart” link, the product ID (3202 in this example), is stored in a session variable while the user continues to shop. When the user proceeds to the check-out page, the product number stored in the session variable is retrieved.

This is a picture of the feature being described.


Storing form parameters in session variables

In this example, a form-based quiz page sends the selected information back to the server, where the marks.cfm page scores the quiz, and stores the number of correct answers in a session variable.

This is a picture of the feature being described.


Storing information in session variables

Once information is sent to the server, you store the information in session variables by adding the appropriate code for your server model to the page specified by the URL or form parameter. Referred to as the “destination” page, this page is specified in either the action attribute of the HTML form or the href attribute of the hypertext link on the starting page.

The HTML syntax for each appears as follows:

<form action="destination.html" method="get" name="myform"> </form>
<param name="href"value="destination.html">

Both the server technology used and the method you use to obtain the information determines the code used to store the information in a session variable. The basic syntax for each server technology is as follows:

ColdFusion

<CFSET session.variable_name = value>

ASP and ASP.NET

<% Session("variable_name") = value %>

The value expression is usually a server expression such as Request.Form(“lastname”). For example, if you use a URL parameter called product (or an HTML form with the get method and a text field called product) to gather information, the following statements store the information in a session variable called prodID:

ColdFusion

<CFSET session.prodID = url.product>

ASP and ASP.NET

<% Session("prodID") = Request.QueryString("product") %>

If you use an HTML form with the post method and a text field called txtProduct to gather the information, then the following statements store the information in the session variable:

ColdFusion

<CFSET session.prodID = form.txtProduct>

ASP and ASP.NET

<% Session("prodID") = Request.Form("txtProduct") %>


Example of information stored in session variables

You’re working on a site with a large audience of senior citizens. In Dreamweaver, you add two links to the start page that let users customize the size of the site’s text. For larger, easy-to-read text, the user clicks one link, and for regular-size text, the user clicks another link:

This is a picture of the feature being described.

Each link has a URL parameter called fontsize that submits the user’s text preference to the server, as the following Macromedia ColdFusion example shows:

<a href="resort.cfm?fontsize=large">Larger Text</a><br>
<a href="resort.cfm?fontsize=small">Normal Text</a>

You decide to store the user’s text preference in a session variable and use it to set the font size on each page the user requests.

Near the top of the destination page, you enter the following code to create a session called font_pref that stores the user’s font size preference.

ColdFusion

<CFSET session.font_pref = url.fontsize>

ASP and ASP.NET

<% Session("font_pref") = Request.QueryString("fontsize") %>

When the user clicks the hypertext link, the page sends the user’s text preference in a URL parameter to the destination page. The code on the destination page stores the URL parameter in the font_pref session variable. For the duration of the user’s session, all the pages of the application retrieve this value, and display the selected font size.


Retrieving data from session variables

Once you store a value in a session variable, you can use Dreamweaver to retrieve the value from session variables and use it in a web application. For more information, see Defining session variables.

After you define the session variable in Dreamweaver, you can insert its value in a page. For more information, see Adding Dynamic Content to Web Pages.

Previous


Defining Sources of Dynamic Content

Dynamic websites require a data source from which to retrieve and display dynamic content. Macromedia Dreamweaver MX lets you use databases, request variables, URL variables, server variables, form variables, stored procedures and other sources of dynamic content. Depending on the data source, you can either retrieve new content to satisfy a request, or modify the page to meet the needs of users.

This chapter describes the procedures for defining both databases and variables as sources of dynamic content. To learn more about the technologies discussed in this chapter, refer to HTML and web technologies resources.

This chapter contains the following sections:

  • Understanding dynamic content sources
  • Defining a recordset
  • Defining URL parameters
  • Defining session variables
  • Defining application variables
  • Defining server variables
  • Caching content sources
  • Changing or deleting content sources
  • Copying a recordset from one page to another page
Next


Understanding dynamic content sources

A dynamic content source is a store of information from which you can retrieve and display dynamic content for use in a web page. Sources of dynamic content include not only information stored in a database, but values submitted by HTML forms, values contained in server objects, values of JavaBeans properties, and other content sources.

Any content source you define in Dreamweaver is added to the list of content sources in the Bindings panel. Once you create a content source and include it in the Bindings panel, you can easily insert it into the currently selected page.

This is a picture of the feature being described.


Defining a recordset

When using a database as a content source for a dynamic web page, you must first create a recordset in which to store the retrieved data. Recordsets serve as an intermediary between the database storing the content and the application server generating the page. Recordsets consist of the data returned by a database query, and are temporarily stored in the application server’s memory for faster data retrieval. The server discards the recordset when it is no longer needed.

The recordset itself is a collection of data retrieved from a specified database. It can include an entire database table, or a subset of the table’s rows and columns. These rows and columns are retrieved by means of a database query that is defined in the recordset. Database queries are written in Structured Query Language (SQL), a simple language that allows you to retrieve, add, and delete data to and from a database. The SQL builder included with Dreamweaver lets you create simple queries without having to understand SQL. However, if you want to create complex SQL queries, you will need to learn SQL, and manually write SQL statements that you enter into Dreamweaver.

Note: Microsoft ASP.NET refers to a recordset as a DataSet. If you are working with ASP.NET document types, the dialog boxes and menu choices specific to ASP.NET use the label DataSet. The Dreamweaver documentation generically refers to both types as recordsets, but uses DataSet when specifically describing ASP.NET features.

For more information on using databases and SQL, see the following chapters, Beginner’s Guide to Databases, and SQL Primer.

Before you define a recordset for use with Dreamweaver, you must create a connection to a database and—if no data exists yet—enter data into the database. If you have not yet defined a database connection for your site, refer to the database connection chapter for the server technology you are developing for, and follow the instructions on creating a database connection.

Database connections for all Dreamweaver supported server technologies are described in the following chapters:

  • Database Connections for ColdFusion Developers
  • Database Connections for ASP Developers
  • Database Connections for ASP.NET Developers
  • Database Connections for JSP Developers
  • Database Connections for PHP Developers

This section contains the following topics:

  • Creating a recordset without writing SQL
  • Creating an advanced recordset by writing SQL
  • Creating SQL queries using the Database Items tree


Creating a recordset without writing SQL

This section describes how to define a recordset using Dreamweaver’s Recordset dialog box, which allows you to create a recordset without having to manually enter SQL statements. Defining a recordset using this method can be as easy as selecting a database connection and table from the Recordset dialog box’s pop-up menus.

If you want to write your own SQL statements, use the Advanced Recordset dialog box. (See Creating an advanced recordset by writing SQL.)

To define a recordset without writing SQL:
  1. In the Document window, open the page that will use the recordset.
  2. Choose Windows > Bindings to display the Bindings panel.
  3. In the Bindings panel, click the plus (+) button and choose Recordset (Query) from the pop-up menu.

    4. The Simple Recordset dialog box appears. If you are developing a Macromedia ColdFusion MX or ASP.NET site, the Recordset dialog box is slightly different from the example shown below. If the Advanced Recordset dialog appears instead, switch to the Simple Recordset dialog box by clicking the Simple button.
    This is a picture of the feature being described.

  4. Complete the dialog box.

    5. For instructions on completing the Recordset dialog box, see the section appropriate to your document type:

    • Setting the Simple Recordset dialog box options.
    • Setting the Simple Recordset dialog box options: ColdFusion.
    • Setting the Simple DataSet dialog box options: ASP.NET.
  5. Click the Test button to execute the query and ensure that it retrieves the information you intended.

    6. If you defined a filter that uses parameters input by users, the Test button displays the Test Value dialog box. Enter a value in the Test Value text box and click OK. If an instance of the recordset is successfully created, a table displaying data extracted from the recordset appears.

  6. Click OK to add the recordset to the list of available content sources in the Bindings panel.


Creating an advanced recordset by writing SQL

The Advanced Recordset dialog box allows you to write your own SQL statements, or use the graphical Database Items tree to create a SQL statement

Note: If you are writing SQL statements for ASP.NET document types, refer to Writing SQL for ASP.NET for rules specific to ASP.NET.

To define a recordset writing SQL:
  1. In the Document window, open the page that will use the recordset.
  2. Choose Windows > Bindings to display the Bindings panel.
  3. In the Bindings panel, click the plus (+) button and select Recordset (Query) from the pop-up menu.

    4. The Advanced Recordset dialog box appears. If you are developing a ColdFusion MX or ASP.NET site, the Recordset dialog box is slightly different from the example shown below. If the Simple Recordset dialog appears instead, switch to the Advanced Recordset dialog box by clicking the Advanced button.
    This is a picture of the feature being described.

  4. Complete the dialog box.

    5. For instructions on completing the Recordset dialog box, see the section appropriate to your document type:

    • Setting the Advanced Recordset dialog box.
    • Setting the Advanced Recordset dialog box: ASP.NET”
    • Setting the Advanced Recordset dialog box options: ColdFusion.
  5. Click the Test button to execute the query and ensure that it retrieves the information you intended.

    6. If you defined a filter that uses parameters input by users, the Test button displays the Test Value dialog box. Enter a value in the Test Value text field and click OK. If an instance of the recordset is successfully created, a table displaying the data from the recordset appears.

  6. Click OK to add the recordset to the list of available content sources in the Bindings panel.


Writing SQL for ASP.NET

When writing SQL statements in the Advanced DataSet dialog box, there are conditions specific to ASP.NET that you must be aware of:


Parameters

The syntax you use to reference parameters varies depending on the database connection in use. The connection types are:

OLE DB

When connecting to a database using OLE DB, parameters must be referenced using a question mark (?). For example:

SELECT * FROM Employees WHERE HireDate > ?

Microsoft SQL Server

When connecting to Microsoft SQL Server using the Managed Data Provider for SQL Server supplied with the .NET Framework, all parameters must be named. For example:

SELECT * FROM Employees WHERE HireDate > @hireDate


Inserting code within SQL statements

When inserting code within SQL statements written for ASP.NET, you must enclose all strings in quotes (“ “), and encase the code in parentheses ( ):

SELECT * FROM Employees WHERE HireDate > “+ (Request.queryString(“hireDate”))


Database Connections in ASP.NET

To learn more about database connections in ASP.NET, see Database Connections for ASP.NET Developers.


Creating SQL queries using the Database Items tree

Instead of manually typing SQL statements into the SQL text box, you can use the Database Item’s point-and-click interface to create complex SQL queries. The Database Items tree lets you select database objects, and link them using the SQL SELECT, WHERE, and ORDER BY clauses. Once you create a SQL query you can define any variables using the Variables portion of the dialog box.

The following examples describe two SQL statements and the steps for creating them using the Advanced Recordset dialog box’s Database Items tree.


Selecting a table

This example selects the entire contents of the Employees table. The SQL statement defining the query appears as:

SELECT * FROM Employees
To create this query:
  1. Expand the Tables branch to display all of the tables in the selected database.
  2. Select the Employees table.
  3. Click the Select button.
  4. Click OK to add the recordset to the Bindings panel.


Selecting specific rows from a table and ordering the results

The following example selects two rows from the Employees table, and selects the job type using a variable that you must define. The results are then ordered by employee name.

SELECT emplNo, emplName
FROM Employees
WHERE emplJob = 'varJob'
ORDER BY emplName
To create this query:
  1. Expand the Tables branch to display all of the tables in the selected database, then expand the Employees table to display the individual table rows.
  2. Build the SQL statement as follows:
    • Select emplNo and click the Select button.
    • Select emplName and click the Select button.
    • Select emplJob and click the Where button.
    • Select emplName and click the Order By button.
  3. Place the insertion point after WHERE emplJob in the SQL text area and type ='varJob' (include the equal sign).
  4. Define the variable 'varJob' by clicking the plus (+) button in the Variables area and entering the following values in the Name, Default Value, and Run-Time Value columns: varJob, CLERK, Request("job").
  5. Click OK to add the recordset to the Bindings panel.


Defining URL parameters

URL parameters store retrieved information input by users. To define a URL parameter you create a form or hypertext link that uses the GET method to submit data. The information is appended to the URL of the requested page and communicated to the server. When using URL variables, the query string contains one or more name/value pairs that are associated with the form fields. These name/value pairs are appended to the URL.

Before you begin, make sure you pass a form or URL parameter to the server. For instructions, see Understanding form parameters.

To define a URL parameter:
  1. In the Document window, open the page that will use the variable.
  2. Choose Windows > Bindings to display the Bindings panel.
  3. In the Bindings panel click the plus (+) button and choose one of the following from the pop-up menu:

    Document Types
    Menu item in Bindings panel for URL variable
    ASP
    Request Variable > Request.QueryString
    ColdFusion
    URL Variable
    JSP
    Request Variable
    PHP
    URL Variable

    4. The URL Variable dialog box is displayed.
    This is a picture of the feature being described.

  4. Enter the name of the URL variable in the text field and click OK.

    5. The URL variable name is normally the name of the HTML form field or object used to obtain its value.

  5. The URL variable appears in the Bindings panel.
    This is a picture of the feature being described.

Once you define the URL variable, you can use its value in the currently selected page. For more information, see Adding Dynamic Content to Web Pages.


Defining form parameters

Form parameters store retrieved information that is included in the HTTP request for a web page. If you create a form that uses the POST method, the data submitted by the form is passed to the server. Before you begin, make sure you pass a form parameter to the server. For instructions, see Storing and Retrieving Data for Your Page.

To define a form parameter:
  1. In the Document window, open the page that will use the variable.
  2. Choose Windows > Bindings to display the Bindings panel.
  3. In the Bindings panel click the plus (+) button and choose one of the following from the pop-up menu:

    Document Types
    Menu item in Bindings panel for form variable
    ASP
    Request Variable > Request.Form
    ColdFusion
    Form Variable
    JSP
    Request Variable
    PHP
    Form Variable

    4. The Form Variable dialog box is displayed:
    This is a picture of the feature being described.

  4. Enter the name of the form variable in the dialog box and click OK.

    5. The form parameter name is normally the name of the HTML form field or object used to obtain its value.

  5. The form parameter appears in the Bindings panel.
    This is a picture of the feature being described.

After you define the form parameter as a content source, you can use its value in your page. For more information, see Storing and Retrieving Data for Your Page.


Defining session variables

You can use session variables to store and display information maintained for the duration of a user’s visit (or session). The server creates a different session object for each user and maintains it for a set period of time or until the object is explicitly terminated. For more information, see Accessing data stored in session variables.

Because session variables last throughout the user’s session and persist when the user moves from page to page within the website, they’re ideal for storing user preferences. Session variables can also be used for inserting a value in the page’s HTML code, assigning a value to a local variable, or providing a value to evaluate a conditional expression.

Before defining session variables for a page, you must create them in the source code. For instructions, see the following sections:

  • Collecting data submitted by users
  • Accessing data stored in session variables

After you create a session variable in the web application’s source code, you can use Dreamweaver to retrieve its value and use it in a web page.

To define a predefined session variable:
  1. Create a session variable in the source code and assign a value to it.

    2. For example, this ASP example instantiates a session called username, and assigns it the value Cornelius:

    <% Session(username) = "Cornelius" %>
  2. Choose Window > Bindings to display the Bindings panel.
  3. Click the plus (+) button and choose Session Variable from the pop-up menu.
  4. Enter the name of the variable you defined in the source code.

    5. In this example, it is username.

  5. Click OK.

    6. The session variable appears in the Bindings panel.
    This is a picture of the feature being described.

Once you define the session variable, you can use its value in your page. For more information, see Adding Dynamic Content to Web Pages.


Defining application variables

In ASP and ColdFusion, you can use application variables to store and display information that is maintained for the lifetime of the application and persists from user to user. The application’s lifetime lasts from the time the first user requests a page in the application to the time the web server is stopped. (An application is defined as all the files in a virtual directory and its subdirectories.)

Because application variables last for the lifetime of the application, and persist from user to user, they’re ideal for storing information that must exist for all users, such as the current time and date. The value of the application variable is defined in the application’s code.

Note: There are no application objects in JSP or PHP.

To define an application variable for a page:
  1. Open a dynamic document type in the Document window.
  2. Choose Window > Bindings to display the Bindings panel.
  3. Click the plus (+) button and select Application Variable from the pop-up menu.
  4. Enter the name of the variable as defined in the application’s source code.
  5. Click OK.

    6. The application variable appears in the Bindings panel.

    Once you define the application variable, you can use its value in a page. For more information, see Adding Dynamic Content to Web Pages.


Defining server variables

You can define server variables as sources of dynamic content for use within a web application.

Server variables vary from document type to document type and include form variables, URL variables, session variables, and application variables. For more information on these variable types, see the following sections:

  • Defining URL parameters
  • Defining form parameters
  • Defining session variables
  • Defining application variables

This section discusses server variables for different document types that you can define
as content sources. The document types and their related sections are:

  • Defining ASP server variables
  • Defining ColdFusion server variables
  • Defining JSP server variables
  • Defining JavaBeans (JSP only)


Defining ASP server variables

You can define the following ASP server variables as sources of dynamic content: Request.Cookie, Request.QueryString, Request.Form, Request.ServerVariables, and Request.ClientCertificates.

To define a server variable for an ASP page:
  1. Open the Bindings (Window > Bindings).
  2. Click the plus (+) button and choose Request Variable from the pop-up menu.

    3. The Request Variable dialog box displays.
    This is a picture of the feature being described.

  3. Choose one of the request collections from the Type pop-up menu.

    4. For example, if you want to access the information in the Request.ServerVariables collection, choose Server Variables. If you want to access the information in the Request.Form collection, choose Form.

    For more information on these variables, see Setting the Request Variable dialog box options: ASP.

  4. Specify the variable in the collection that you want to access.

    5. For example, if you want to access the information in the Request.ServerVariables("HTTP_USER_AGENT") variable, enter the argument HTTP_USER_AGENT. If you want to access the information in the Request.Form("lastname") variable, enter the argument lastname.

  5. Click OK.

    6. The server variable appears in the Bindings panel.
    This is a picture of the feature being described.


Defining ColdFusion server variables

You can define the following ColdFusion server variables as sources of dynamic content: client, cookie, CGI, server, and local variables.

Client variables associate data with a specific client. Client variables maintain the application’s state as the user moves from page to page in the application, as well as from session to session. Maintaining state means to preserve information from one page (or session) to the next so that the application “remembers” the user and the user’s previous choices and preferences.

Cookie variables access cookies passed to the server by the browser.

CGI variables provide information about the server running ColdFusion, the browser requesting a page, and other information about the processing environment.

Server variables can be accessed by all clients and applications on the server. They persist until the server is stopped.

Local variables are created with the CFSET tag or CFPARAM tag within a ColdFusion page.

To define a server variable for a ColdFusion page:
  1. Open the Bindings panel (Window > Bindings).
  2. Click the plus (+) button and choose the server variable from the pop-up menu.
  3. Enter the name of the variable.

    4. For more information on possible name entries, click the Help button.

  4. Click OK.

    5. The ColdFusion server variable appears in the Bindings panel.

For more information, see:

  • Defining URL parameters
  • Defining session variables
  • Defining application variables
  • Adding Dynamic Content to Web Pages


Defining PHP server variables

To define a server variable for a PHP page:
  1. Open the Bindings panel (Window > Bindings).
  2. Click the plus (+) button and choose the variable from the pop-up menu.
  3. Enter the name of the variable.
  4. Click OK.

    5. The PHP server variable appears in the Bindings panel.

    For more information, see Defining URL parameters, Adding Dynamic Content to Web Pages.


Defining JSP server variables

You can define a request variable as a source of dynamic content for JSP pages.

To define a request variable for a JSP page:
  1. Open the Bindings panel (Window > Bindings).
  2. Click the plus (+) button and choose Request Variable from the pop-up menu.
  3. Enter the name of the variable.
  4. Click OK.

    5. The JSP server variable appears in the Bindings panel.

    For more information see Defining URL parameters, and Adding Dynamic Content to Web Pages.


Defining JavaBeans (JSP only)

JavaBeans are architectural elements of multi-tier JSP applications. JavaBeans are typically used as part of a middle “business-logic” layer meant to separate the presentation logic from data-access logic. In these applications, the JavaBeans, (also referred to as “beans”) not the JSP pages, contain the logic that directly accesses the database.

In Dreamweaver, JavaBeans are treated as sources of dynamic content for JSP pages, and appear in the Bindings panel. You can double-click JavaBeans in the Bindings panel to view their properties, and then drag the properties to the page to create dynamic data references.

You can also define a JavaBeans collection (a set of JavaBeans) as a source of dynamic content. However, Dreamweaver supports only repeated regions and dynamic bindings when using JavaBeans collections.

Copies of the bean class (or of the .zip or .jar file containing the bean class) must reside in the following locations:

  • On the system running Dreamweaver, a copy of the bean class must reside in the Dreamweaver Configuration/classes folder or in the system’s classpath. (Dreamweaver uses this copy of the class at design time.)
  • On the system running the JSP application server, the bean class must reside in the application server’s classpath. (Your application server uses this copy of the class at runtime.) The application server’s classpath varies from application server to application server, but generally the classpath is to a WEB-INF folder with a classes/bean sub-folder.

If Dreamweaver and the application server are both running on the same system, and the application server uses the system classpath (not an internal classpath), a single copy of the JavaBeans’ class can reside on the computer in the system classpath. Both the application server and Dreamweaver will use this copy of the class. Otherwise, copies of the JavaBeans class must reside in two paths on the computer (as described above).

The folder structure must match the JavaBeans’ package. For example, if the JavaBeans’ package is called com.ardvark.myBean, then the package must be stored in /com/ardvark/ within the classpath or in Dreamweaver’s Configuration/classes folder.

To define a JavaBean for a JSP page:
  1. Choose Window > Bindings to display the Bindings panel.
  2. Click the plus (+) button and choose JavaBean from the pop-up menu.

    3. The JavaBean dialog box appears.
    This is a picture of the feature being described.

  3. Complete the dialog box and click OK.

    4. For instructions, see Setting the Local Variable dialog box options.

  4. The newly defined bean appears in the Bindings panel.
To define a JavaBean collection for a JSP page:
  1. Choose Window > Bindings to display the Bindings panel.
  2. Click the plus (+) button and choose JavaBean Collection from the pop-up menu.

    3. The JavaBean Collection dialog box appears.
    This is a picture of the feature being described.

  3. Complete the dialog box and click OK.

    4. For instructions on completing the dialog box, see Setting the JavaBean Collection dialog box options.

  4. The newly defined JavaBean collection appears in the Bindings panel.


Caching content sources

You can cache—or store—sources of dynamic content in a Design Note. This lets you work on a site even if you don’t have access to the database or application server storing the sources of dynamic content. Caching may also speed up development by eliminating repeated access across a network to the database and application server.

To cache content sources, click the arrow button in the top right corner of the Bindings panel and toggle Cache in the pop-up menu.

This is a picture of the feature being described.

If you make changes to one of the content sources, you can refresh the cache by clicking the Refresh button (the circle-arrow icon) in the top right corner of the Bindings panel. (Expand the panel if you don’t see the button.)


Changing or deleting content sources

You can change or delete any existing source of dynamic content—that is, any content source listed in the Bindings panel.

Changing or deleting a content source in the Bindings panel does not change or delete any instance of that content on the page. It merely changes or deletes it as a possible source of content for the page. To edit or delete an instance of the content on the page, see Changing dynamic content and Deleting dynamic content.

To change a source of content in the Bindings panel:
  1. In the Bindings panel, double-click the name of the content source you want to edit.
  2. Make your changes in dialog box that appears.
  3. If satisfied with your work, click OK.
To delete a source of content from the Bindings panel:
  1. In the Bindings panel, select the content source from the list.
  2. Click the minus (-) button.


Copying a recordset from one page to another page

You can copy a recordset from one page to another within a defined site.

To copy a recordset to another page:
  1. Select the recordset in either the Bindings panel or the Server Behaviors panel.
  2. Right-click the recordset and choose Copy from the pop-up menu.
  3. Open the page you want to copy the recordset to.
  4. Right-click the Bindings panel or the Server Behaviors toolbar, and choose Paste from the pop-up menu.


Reference

This section documents the dialog boxes and panels introduced in this chapter, and describes the fields and settings that are applicable to each. You can also view this information for each dialog box by clicking its Help button. The online help panel will display the information and settings appropriate to that dialog box.


Setting the Bindings panel options

This panel defines and edits sources of dynamic content, adds dynamic content to a page, and applies data formats to dynamic text. How you use the Data Binding panel depends on the task you want to perform. The following topics describe the use of the Bindings panel for
each task.

Related topics

Defining a recordset

Defining URL parameters

Defining session variables

Defining application variables

Defining server variables

Defining JavaBeans (JSP only)

Caching content sources

Changing or deleting content sources

Copying a recordset from one page to another page

Adding Dynamic Content to Web Pages

Making HTML attributes dynamic


Setting the Simple Recordset dialog box options

This dialog box defines a recordset as a source of dynamic content without you having to hand code SQL statements.

Procedure
  1. In the Name text box, enter a name for the recordset.

    2. A common practice is to add the prefix rs to recordset names to distinguish them from other object names in the code. For example: rsPressReleases

    Note that recordset names can only contain letters, numbers, and the underscore character (_). You cannot use special characters or spaces.

  2. Select a connection from the Connection pop-up menu.

    3. If no connection appears in the list, click Define to create one.

  3. In the Table pop-up menu, select the database table that will provide data to the recordset.

    4. The pop-up menu displays all tables in the specified database.

  4. To include only some of the table’s columns in the recordset, click Selected and choose the desired columns by Control-clicking (Windows) or Command-clicking (Macintosh) them in the list.
  5. To include only some of the table’s records, complete the Filter section as follows:
    • From the first pop-up menu, select a column in the database table to compare against a test value you define.
    • From the second pop-up menu, select a conditional expression to compare the selected value in each record against the test value.
    • From the third pop-up menu, select Entered Value.
    • In the text box, enter the test value.

      • If the specified value in a record meets your filtering condition, the record is included
      the recordset.

  6. If you want the records to be sorted, select a column to sort by, then specify whether the records should be sorted in ascending order (1, 2, 3... or A, B, C...) or descending order.
  7. Click Test to connect to the database and create an instance of the data source.

    8. A table appears displaying the returned data. Each row contains a record and each column represents a field in that record. Click OK to close the data source.

  8. Click OK.

    9. The newly defined recordset appears in the Bindings panel.

Related topics

Creating a recordset without writing SQL

Creating an advanced recordset by writing SQL

Beginner’s Guide to Databases


Setting the Simple Recordset dialog box options: ColdFusion

This dialog box defines a recordset for ColdFusion document types as a source of dynamic content without you having to hand code SQL statements.

Note: If you are creating recordsets for use with ColdFusion 5 or earlier, use the generic Simple Recordset dialog box common to other document types such as ASP and JSP.

Procedure
  1. In the Name text box, enter a name for the recordset.

    2. A common practice is to add the prefix rs to recordset names to distinguish them from other object names in your code. For example: rsPressReleases

    Note that recordset names can only contain letters, numbers, and the underscore character (_). You cannot use special characters or spaces.

  2. Select a data source from the Data Source pop-up menu.

    3. If no data source appears in the pop-up menu, you will need to create a ColdFusion
    data source.

  3. In the Username and Password text boxes, enter the user name and password for the ColdFusion application server if required.

    4. Data sources in ColdFusion may require a user name and password to access them. If you do not have the user name and password to access a data source in ColdFusion, contact your organization’s ColdFusion administrator.

  4. In the Table pop-up menu, select the database table that will provide data to the recordset.

    5. The Table pop-up menu displays all tables in the specified database.

  5. To include a subset of the table’s columns in the recordset, click Selected and choose the desired columns by Control-clicking (Windows) or Command-clicking (Macintosh) them
    in the list.
  6. You can further limit the records returned from the table by creating a filter:
    • From the first pop-up menu, select a column in the database table to compare against a test value you define.
    • From the second pop-up menu, select a conditional expression to compare the selected value in each record against the test value.
    • From the third pop-up menu, select Entered Value.
    • In the text box, enter the test value.

      • If the specified value in a record meets your filtering condition, the record is included
      in the recordset.

  7. If you want the records to be sorted, select a column to sort by, then specify whether the records should be sorted in ascending (1, 2, 3... or A, B, C...) or descending order.
  8. Click Test to connect to the database and create an instance of the data source.

    9. A table appears displaying the returned data. Each row contains a record and each column represents a field in that record. Click OK to close the test recordset.

  9. Click OK.

    10. The newly defined ColdFusion recordset appears in the Bindings panel.

Related topics

Database Connections for ColdFusion Developers

Creating a recordset without writing SQL

Creating an advanced recordset by writing SQL

Beginner’s Guide to Databases


Setting the Simple DataSet dialog box options: ASP.NET

This dialog box defines a DataSet (typically referred to as a recordset in other dynamic document types) as a source of dynamic content without you having to hand code SQL statements.

Procedure
  1. In the Name text box, enter a name for the DataSet.

    2. A common practice is to add the prefix ds to DataSet names to distinguish them from other object names in your code. For example: dsPressReleases

    Note that DataSet names can only contain letters, numbers, and the underscore character (_). You cannot use special characters or spaces.

  2. Select a connection from the Connection pop-up menu.

    3. If no connection appears in the list, click Define to create one.

  3. In the Table pop-up menu, select the database table that will provide data to the DataSet.

    4. The pop-up menu displays all the tables in the specified database.

  4. To include a subset of the table’s columns in the DataSet, click Selected and choose the desired columns by Control-clicking (Windows) or Command-clicking (Macintosh) them in the list.
  5. To include only some of the table’s records, complete the Filter section as follows:
    • From the first pop-up menu, select a column in the database table to compare against a test value you define.
    • From the second pop-up menu, select a conditional expression to compare the selected value in each record against the test value.
    • From the third pop-up menu, select Entered Value.
    • In the text box, enter the test value.

      • If the specified value in a record meets your filtering condition, the record will be included in the DataSet.

  6. If you want the records to be sorted, select a column to sort by, then specify whether the records should be sorted in ascending order (1, 2, 3... or A, B, C...) or descending order.
  7. You can specify a page to redirect users to if the DataSet query should for some reason fail. For example, if the database were to become unavailable during a query and failed to return the DataSet for the page, you could display an error page with a link to the site’s home page.
  8. Click Test to connect to the database and create an instance of the data source.

    9. A table appears displaying the returned data. Each row contains a record and each column represents a field in that record. Click OK to close the DataSet.

  9. Click OK.

    10. The newly defined DataSet appears in the Bindings panel.

Related topics

Database Connections for ASP.NET Developers

Creating a recordset without writing SQL

Creating an advanced recordset by writing SQL

Beginner’s Guide to Databases


Setting the Advanced Recordset dialog box

This dialog box defines a recordset as a source of dynamic content by writing a custom SQL statement, or by creating a SQL statement using the graphical Database Items tree.

Procedure
  1. In the Name text box, enter a name for the recordset.

    2. A common practice is to add the prefix rs to recordset names to distinguish them from other object names in the code. For example: rsPressRelease

    Note that recordset names can only contain letters, numbers, and the underscore character (_). You cannot use special characters or spaces.

  2. Select a connection from the Connection pop-up menu.
  3. Enter a SQL statement in the SQL text area or use the graphical Database Items tree at the bottom of the dialog box to build a SQL statement from the chosen recordset.

    4. For more information writing SQL statements, see SQL Primer, and Creating SQL queries using the Database Items tree.

If you want to use the Database Items tree to build the SQL statement:

  • Ensure the SQL text area is blank.
  • Expand the branches of the tree until you find the database object you need—a column in a table, for example, or a stored procedure in the database.
  • Select the database object and click one of the buttons on the right side of the tree.

    • For example, if you select a table column, the available buttons are SELECT, WHERE, and ORDER BY. Click one of the buttons to add the associated clause to your SQL statement.

You can also use a predefined SQL statement in a stored procedure by selecting the stored procedure from the Database Items tree and clicking the Procedure button. Dreamweaver automatically fills in the SQL and Variable areas.

  1. If the SQL statement contains variables, define their values in the Variables area by clicking the plus (+) button and entering the variable’s name, default value (the value the variable should take if no runtime value is returned), and runtime value.

    2. If the SQL statement contains variables, make sure the Default Value column of the Variables box contains valid test values.

    The runtime value is usually a URL or form parameter entered by a user in an HTML form field. For more information on URL and form parameters, see Storing and Retrieving Data for Your Page.

    URL parameters in the Runtime Value column.

    Server Model | Runtime value expression for URL parameter
ASP | Request.QueryString(“formFieldName”)
JSP | request.getParameter("formFieldName")
PHP | #formFieldName#

    Form parameters in the Runtime Value column:

    Server Model | Runtime value expression for form parameter
ASP | Request.Form(“formFieldName”)
JSP | request.getParameter("formFieldName")
PHP | #formFieldName#

  2. Click Test to connect to the database and create an instance of the recordset.

    3. If the SQL statement contains variables, make sure the Default Value column of the Variables box contains valid test values before clicking Test.

    If successful, a table appears displaying the data in your recordset. Each row contains a record and each column represents a field in that record. Click OK to clear the recordset.

  3. If satisfied with your work, click OK.

Related topics

Database Connections for ASP Developers

Database Connections for JSP Developers

Database Connections for PHP Developers

Creating an advanced recordset by writing SQL

Creating SQL queries using the Database Items tree

Using stored procedures to modify databases

Beginner’s Guide to Databases

SQL Primer


Setting the Advanced Recordset dialog box: ASP.NET

The purpose of this dialog box is to define a DataSet as a source of dynamic content by writing a custom SQL statement, or by creating a SQL statement using the Database Items tree.

Procedure
  1. In the Name text box, enter a name for the DataSet.

    2. A common practice is to add the prefix ds to DataSet names to distinguish them from other object names in your code. For example: dsPressRelease

    Note that DataSet names can only contain letters, numbers, and the underscore character (_). You cannot use special characters or spaces.

  2. Select a connection from the Connection pop-up menu.
  3. Enter a SQL statement in the SQL text area or use the Database Items tree at the bottom of the dialog box to build a SQL statement from the chosen database tables.

    4. For more information of writing SQL statements for ASP.NET see:

    • Writing SQL for ASP.NET
    • Creating SQL queries using the Database Items tree
    • SQL Primer

If you want to use the Database Items tree to build the SQL statement:

  • Ensure the SQL text area is blank.
  • Expand the branches of the tree until you find the database object you need—a column in a table, for example, or a stored procedure in the database.
  • Select the database object and click one of the buttons on the right side of the tree.

    • For example, if you select a table column, the available buttons are SELECT, WHERE, and ORDER BY. Click one of the buttons to add the associated clause to your SQL statement.

    You can also use a predefined SQL statement in a stored procedure by selecting the stored procedure from the Database Items tree and clicking the Procedure button. Dreamweaver automatically fills in the SQL and Parameters areas.

  1. You can specify a page to redirect users to if the DataSet query should for some reason fail. For example, if the database were to become unavailable during a query and failed to return the DataSet for the page, you could display an error page with a link to the site’s home page.
  2. If the SQL statement contains parameters, define their values in the Parameters area by clicking the plus (+) button and entering the parameter’s name and default value (the value the parameter should take if no runtime value is returned).

    3. If the SQL statement contains parameters, make sure the Default Value column of the Parameters box contains valid test values.

    The Page Parameters allow you to provide default values for runtime value references in the SQL you write. For example, the following SQL statement selects an employee record based on the value of the employee’s ID. You can assign a default value to this parameter, ensuring that a runtime value is always returned. In this example, FormFieldName refers to a form field in which the user enters their employee ID:

    “SELECT * FROM Employees WHERE EmpID = “ + (Request.Form(“FormFieldName”))

The Add Page Parameters dialog box would contain a name/value paring similar to:

    Name | Default Value
FormFieldName | 0001

The runtime value is usually a URL or form parameter entered by a user in an HTML form field. For more information on URL and form parameters, see Storing and Retrieving Data for Your Page.
  3. Click Test to connect to the database and create an instance of the recordset.

    4. If the SQL statement contains runtime references, make sure the Default Value column of the Page Parameters field contains valid test values before clicking Test.

    If successful, a table appears displaying the data in your DataSet. Each row contains a record and each column represents a field in that record. Click OK to clear the DataSet.

  4. If satisfied with your work, click OK.

Related topics

Database Connections for ASP.NET Developers

Creating an advanced recordset by writing SQL

Writing SQL for ASP.NET

Creating SQL queries using the Database Items tree

Using stored procedures to modify databases

Beginner’s Guide to Databases

SQL Primer


Setting the Advanced Recordset dialog box options: ColdFusion

The Advanced Recordset dialog box lets you write custom SQL queries, or use the Database Items tree to author SQL queries using a point-and-click interface.

Note: If you are creating advanced recordsets for use with ColdFusion 5 or earlier, use the generic Advanced Recordset dialog box common to otherdocument types such as ASP and JSP.

Procedure
  1. In the Name text box, enter a name for the recordset.

    2. A common practice is to add the prefix rs to recordset names to distinguish them from other object names in your code. For example: rsPressReleases

    Note that recordset names can only contain letters, numbers, and the underscore character (_). You cannot use special characters or spaces.

  2. Select a data source from the Data Source pop-up menu.

    3. If no data source appears in the pop-up menu list, you will need to first create a ColdFusion data source. For more information, see Database Connections for ColdFusion Developers.

  3. In the Username and Password text boxes, enter the user name and password for the ColdFusion application server if required.

    4. Data sources in ColdFusion may require a user name and password to access them. If you do not have the user name and password to access a data source in ColdFusion, contact your organization’s ColdFusion administrator.

  4. Enter a SQL statement in the SQL text area or use the graphical Database Items tree at the bottom of the dialog box to build a SQL statement from the chosen recordset

    5. For more information, see the SQL Primer and the Creating SQL queries using the Database Items tree

If you want to use the Database Items tree to build the SQL statement:

  • Ensure the SQL text area is blank.
  • Expand the branches of the tree until you find the database object you need—for example, a column in a table.
  • Select the database object and click one of the buttons on the right side of the tree.

    • For example, if you select a table column, the available buttons are Select, Where, and Order By. Click one of the buttons to add the associated clause to your SQL statement.

  1. If your SQL statement contains parameters, define their values in the Parameters area by clicking the plus (+) button and entering the parameter’s name and default value (the value the parameter should take if no runtime value is returned).

    2. If the SQL statement contains parameters, make sure the Default Value column of the Parameters box contains valid test values.

    The Page Parameters allow you to provide default values for runtime value references in the SQL you write. For example, the following SQL statement selects an employee record based on the value of the employee’s ID. You can assign a default value to this parameter, ensuring that a runtime value is always returned. In this example, FormFieldName refers to a form field in which the user enters their employee ID:

    SELECT * FROM Employees WHERE EmpID = + (Request.Form(#FormFieldName#))

The Add Page Parameters dialog box would contain a name/value paring similar to:

    Name | Default Value
FormFieldName | 0001

The runtime value is usually a URL or form parameter entered by a user in an HTML form field. For more information on URL and form parameters, see Retrieving form and URL parameters.
  2. Click Test to connect to the database and create an instance of the recordset.

    3. If the SQL statement contains runtime references, make sure the Default Value column of the Page Parameters field contains valid test values before clicking Test.

    If successful, a table appears displaying the data in your recordset. Each row contains a record and each column represents a field in that record. Click OK to clear the recordset.

  3. If satisfied with your work, click OK.

Related topics

Database Connections for ColdFusion Developers

Creating an advanced recordset by writing SQL

Creating SQL queries using the Database Items tree

Using stored procedures to modify databases

Beginner’s Guide to Databases

SQL Primer


Setting the Request Variable dialog box options: ASP

This dialog box defines an ASP request variable as a source of dynamic content.

Procedure
  1. Choose one of the request collections from the Type pop-up menu.

    2. For example, if you want to access the information in the Request.ServerVariables collection, choose Server Variables. If you want to access the information in the Request.Form collection, choose Form.

    The request collections are:

    The QueryString collection retrieves information appended to the sending page’s URL, such as when the page has an HTML form using the GET method. The query string consists of one or more name/value pairs (for example, last=Smith, first=Winston) appended to the URL with a question mark (?). If the query string has more than one name/value pair, they are combined with ampersands (&). For more information, see Understanding URL parameters.

    The Form collection retrieves form information included in the body of the HTTP request by an HTML form using the POST method. For more information, see Understanding form parameters.

    The ServerVariables collection retrieves the values of predefined environment variables. The collection has a long list of variables, including CONTENT_LENGTH (the length of content submitted in the HTTP request, which you can use to see if a form is empty), and HTTP_USER_AGENT (provides information about the user’s browser).

    For example, Request.ServerVariables("HTTP_USER_AGENT") contains information about the submitting browser, such as Mozilla/4.07 [en] (WinNT; I), which denotes a Netscape Navigator 4.07 browser.

    For a complete list of ASP server environment variables, see the online documentation installed with Microsoft Personal Web Server (PWS) or Internet Information Server (IIS).

    The Cookies collection retrieves the values of the cookies sent in an HTTP request. For example, suppose the page reads a cookie called “readMe” on the user’s system. On the server, the values of the cookie are stored in the variable Request.Cookies("readMe").

    The ClientCertificate collection retrieves the certification fields from the HTTP request sent by the browser. The certification fields are specified in the X.509 standard.

  2. Specify the variable in the collection that you want to access.

    3. For example, if you want to access the information in the Request.ServerVariables("HTTP_USER_AGENT") variable, enter the argument HTTP_USER_AGENT. If you want to access the information in the Request.Form("lastname") variable, enter the argument lastname.

  3. Click OK.

    4. The request variable appears in the Bindings panel.

Related topics

Understanding form parameters

Defining URL parameters

Defining ASP server variables


Setting the Add or Edit Parameter dialog box options

The Add Parameter dialog box let you define parameters contained in a SQL statement by entering the parameter’s name and default value (the value the parameter should take if no runtime value is returned).

Procedure
  1. Choose a parameter name from the Name pop-up menu.
  2. Enter a value for the parameter in the Default Parameter text box.
  3. Click OK.

Related Topics

Setting the Advanced Recordset dialog box options: ColdFusion

Setting the Advanced Recordset dialog box: ASP.NET

Setting the ColdFusion MX Stored Procedure dialog box options

Running the stored procedure in ColdFusion

Running the stored procedure in ASP.NET

Setting the Stored Procedure dialog box options

Retrieving form and URL parameters.


Setting the Request Variable dialog box options (JSP)

This dialog box defines a JSP request variable as a source of dynamic content for the page.

To define a JSP request variable:
  1. Enter the name of the variable.

    2. The request variable is typically a form or URL parameter. If the parameter was passed by an HTML form, the variable name is the name of the form field or object used to obtain its value.

  2. Click OK.

    3. The JSP request variable appears in the Bindings panel.

Related topics

Defining URL parameters

Defining session variables


Setting the Session Variable dialog box options

The purpose of this dialog box is to define a session variable as a source of dynamic content for the page.

To define a session variable:
  1. Enter the name of the session variable as it exists in the application’s source code.

    2. For more information, see Storing information in session variables

  2. Click OK.

    3. The newly defined session variable appears in the Bindings panel.

Related topics

Defining session variables

Defining server variables


Setting the Application Variable dialog box options

This dialog box defines an application variable as a source of dynamic content for a page.

To define an application variable:
  1. In the Name text box enter the name of the application variable as it exists in
    the application’s source code.
  2. Click OK.

    3. The newly defined application variable appears in the Bindings panel.

Related topics

Defining application variables

Defining server variables


Setting the URL Variable dialog box options: ColdFusion

This dialog box defines a ColdFusion URL variable as a source of dynamic content for the page.

To define a ColdFusion URL variable:
  1. In the Name text box, enter the name of URL variable.

    2. Normally, the variable name is the name of the HTML form field or object used to obtain its value.

  2. Click OK.

    3. The newly defined ColdFusion URL variableappears in the Bindings panel.

Related topics

Creating URL parameters using HTML links

Defining URL parameters

Defining ColdFusion server variables


Setting the Form Variable dialog box option: ColdFusion

This dialog box defines a ColdFusion form variable as a source of dynamic content for the page.

To define a ColdFusion form variable:
  1. In the Name text box, enter the name of form variable.

    2. The variable name is the name of the HTML form field or object used to obtain its value.

  2. Click OK.

    3. The ColdFusion form variable appears in the Bindings panel.

Related topics

Defining URL parameters

Defining server variables


Setting the Client Variable dialog box: ColdFusion

This dialog box defines a ColdFusion client variable as a source of dynamic content for the page.

To define a ColdFusion client variable:
  1. In the Name text box enter the name of the variable.

    2. For example, if you want to access the information in the Client.LastVisit ColdFusion variable, enter LastVisit.

    Client variables are variables created in the code to associate data with a specific client. Client variables maintain the application’s state as the user moves from page to page within the application, as well as from session to session.

    Client variables can be user-defined or built-in. The table below lists the built-in
    ColdFusion client variables:

    Variable | Description
Client.CFID | An incremental ID for each client that connects to the server.
Client.CFTOKEN | A randomly generated number used to uniquely identify a particular client.
Client.URLToken | A combination of CFID and CFTOKEN to be passed between templates when cookies are not used.
Client.LastVisit | Records the timestamp of the last visit made by a client.
Client.HitCount | The number of page requests tied to a single client (tracked using CFID and CFTOKEN).
Client.TimeCreated | Records the timestamp when CFID and CFTOKEN were first created for a particular client.

  2. Click OK.

    3. The newly ColdFusion client variables in the Bindings panel.

Related topic

Defining ColdFusion server variables


Setting the Cookie Variable dialog box options

This dialog box defines a ColdFusion cookie variable.

To define a ColdFusion cookie variable:
  1. In the Name text box enter the name of the cookie variable.

    2. Cookie variables are created in the code, and access information contained in cookies passed to the server by a browser.

  2. Click OK.

The cookie variable appears in the Bindings panel.

Related topic

Defining ColdFusion server variables


Setting the CGI Variable dialog box options

This dialog box defines ColdFusion CGI variables.

To define a ColdFusion CGI variable:
  1. In the Name text box enter the name of the variable.

    2. For example, if you want to access the information in the CGI.HTTP_REFERER variable,
    enter HTTP_REFERER.

    The table below lists the most common ColdFusion CGI variables that are created
    on the server:

    Variable | Description
SERVER_SOFTWARE | The name and version of the information server software answering the request (and running the gateway). Format: name/version.
SERVER_NAME | The server's hostname, DNS alias, or IP address as it appears in self-referencing URLs.
GATEWAY_INTERFACE | The revision of the CGI specification to which this server complies. Format: CGI/revision.
SERVER_PROTOCOL | The name and revision of the information protocol this request came in with. Format: protocol/revision.
SERVER_PORT | The port number to which the request was sent.
REQUEST_METHOD | The method with which the request was made. For HTTP, this is Get, Head, Post, and so on.
PATH_INFO | The extra path information, as given by the client. Scripts can be accessed by their virtual pathname, followed by extra information at the end of this path. The extra information is sent as PATH_INFO.
PATH_TRANSLATED | The server provides a translated version of PATH_INFO, which takes the path and does any virtual-to-physical mapping to it.
SCRIPT_NAME | A virtual path to the script being executed; used for self-referencing URLs.
QUERY_STRING | The query information that follows the question mark? in the URL that referenced this script.
REMOTE_HOST | The hostname making the request. If the server does not have this information, it sets REMOTE_ADDR and does not set REMOTE_HOST.
REMOTE_ADDR | The IP address of the remote host making the request.
AUTH_TYPE | If the server supports user authentication, and the script is protected, this is the protocol-specific authentication method used to validate the user.
REMOTE_USER AUTH_USER | If the server supports user authentication, and the script is protected, this is the user name they have authenticated as. (Also available as AUTH_USER.)
REMOTE_IDENT | If the HTTP server supports RFC 931 identification, this variable is set to the remote user name retrieved from the server. Use this variable for logging only.
CONTENT_TYPE | For queries that have attached information, such as HTTP POST and PUT, this is the content type of the data.
CONTENT_LENGTH | The length of the content as given by the client.

    The table below lists the most common CGI variables created by the browser
    and passed to the server:

    Variable | Description
HTTP_REFERER | The referring document. This is the document that linked to or submitted form data.
HTTP_USER_AGENT | The browser the client is currently using to send the request. Format: software/version library/version.
HTTP_IF_MODIFIED_SINCE | The last time the page was modified. This variable is sent at the discretion of the browser, usually in response to the server having sent the LAST_MODIFIED HTTP header. It can be used to take advantage of browser-side caching.

  2. Click OK.

    3. The CGI variable appears in the Bindings panel.

Related topic

Defining ColdFusion server variables


Setting the Server Variable dialog box options

This dialog box defines a ColdFusion server variable.

To define a ColdFusion server variable:
  1. In the Name text box enter the name of the server variable.

    2. For example, if you want to access information stored in the Server.Trademark variable, enter Trademark as the variable name.

    Server variables can be accessed by all clients accessing the server, as well as by any applications running on the server. The variables persist until the server is stopped. They are created with the ColdFusion CFSET or CFPARAM tags (with CFLOCK).

    Server variables are either user-defined or built-in. The table below lists the built-in ColdFusion server variables:

    Variable | Description
Server.ColdFusion.ProductName | ColdFusion product name.
Server.ColdFusion.ProductVersion | ColdFusion version number.
Server.ColdFusion.ProductLevel | ColdFusion edition (Enterprise, Professional)
Server.ColdFusion.SerialNumber | Serial number of currently installed version of ColdFusion
Server.OS.Name | Name of operating system running on the server (Windows NT, Windows 2000, Linux)
Server.OS.AdditionalInformation | Additional information about installed operating system (service packs, updates)
Server.OS.Version | Version of installed operating system.
Server.OS.BuildNumber | Build number of installed operating system.

  2. Click OK.

    3. The ColdFusion server variable appears in the Bindings panel.

Related topic

Defining ColdFusion server variables


Setting the Local Variable dialog box options

This dialog box defines a ColdFusion local variable.

To define a ColdFusion local variable:
  1. In the Name text box enter the name of the local variable.

    2. Local variables are variables created with the CFSET or CFPARAM tag within a ColdFusion page.

  2. Click OK.

    3. The local variable appears in the Bindings panel.

Related topic

Defining ColdFusion server variables


Setting the JavaBean dialog box options

This dialog box defines a JavaBean as a source of dynamic content for the page.

To define a JavaBean:
  1. Enter the JavaBean’s name.
  2. Choose the JavaBean’s scope.
  3. Choose the JavaBean’s class.

    4. To list the classes in a .zip or .jar file, click Browse and select the file.

    The class is expressed in the following format:

    packagename.classname
  4. If you want to give one of the JavaBean’s properties a default value, select the property from the list and enter a value in the Default Value box below the list.

    5. You can also set the property’s default value to a dynamic value by clicking the lightning bolt icon beside the Default Value box.

  5. Click OK.

    6. The JavaBean appears in the Bindings panel.

Related topic

Defining JavaBeans (JSP only)


Setting the JavaBean Collection dialog box options

This dialog box defines a JavaBean collection as a source of dynamic content for the page.

To define a JavaBean collection:
  1. Choose the collection’s class from the Collection Class pop-up menu.

    2. The class is expressed in the following format:

    packagename.classname

To list the classes in a .zip or .jar file, click Browse and select the file.
  2. Choose one of the collection’s indexed properties from the Indexed Properties pop-up menu.
  3. Dreamweaver displays a default name in the Item Class text box. If the name listed is incorrect, enter the correct one.
  4. Choose the bean’s scope from the Scope pop-up menu.
  5. Click OK.

    6. The newly defined content source appears in the Bindings panel.

Related topic

Defining JavaBeans (JSP only)

Previous


Adding Dynamic Content to Web Pages

After you define one or more sources of dynamic content, you can use the sources to add dynamic content to the page. Content sources can include a column in a recordset, a value submitted by an HTML form, the value contained in a server object, or other data. For more information, see Defining Sources of Dynamic Content.

In Macromedia Dreamweaver MX, you can place dynamic content almost anywhere in a web page or its HTML source code:

  • You can place dynamic content at the insertion point.
  • You can replace a text string with dynamic content.
  • You can insert it in an HTML attribute.

    • For example, dynamic content can define the src attribute of an image, or the value attribute of a form field.

This chapter contains the following sections:

  • Making text dynamic
  • Making images dynamic
  • Making HTML attributes dynamic
  • Making ActiveX, Flash, and other object parameters dynamic
  • Changing dynamic content
Next


About Adding Dynamic Content

You add dynamic content to a page by choosing one of your content sources in the Bindings panel. Dreamweaver inserts a server-side script in the page’s source code instructing the server to transfer the data from the content source to the page’s HTML source code when the page is requested by a browser.

There is often more than one way to make a given page element dynamic. For example, to make an image dynamic you can use the Bindings panel, the Property inspector, or the Image command in the Insert menu. This chapter describes the most efficient ways of making various page elements dynamic.

By default, an HTML page can display only one record at a time. To display the other records in the recordset, you can add a link to move through the records one at a time (see Creating recordset navigation links), or you can create a repeated region to display more than one record on a single page (see Displaying multiple behaviors).


Making text dynamic

You can replace existing text with dynamic text, or you can place dynamic text at a given insertion point on the page.

Dynamic text adopts any text formatting applied to the existing text or to the insertion point. For example, if a Cascading Style Sheet (CSS) style affects the selected text, the dynamic content replacing it is also affected by the style. You can add or change the text format of dynamic content by using any of the Dreamweaver text formatting tools.Applying typographic and page layout elements to dynamic data.

You can also apply a data format to dynamic text. For example, if your data consists of dates, you can specify a particular date format such as 04/17/00 for U.S. visitors, or 17/04/00 for Canadian visitors. Applying formats to data.

You can replace regular text on your page with dynamic text, or you can add dynamic text at the insertion point on the page.

To add dynamic text:
  1. Open the Bindings panel by choosing Window > Bindings.
  2. Make sure the Bindings panel lists the content source you want to use.

    3. The content source should contain plain text (ASCII text). Plain text includes HTML. If no content sources appear in the list, or if the available content sources don’t meet your needs, click the plus (+) button to define a new content source. See Defining Sources of Dynamic Content.

  3. In Design view, select text on the page, or click where you want to add dynamic text.
  4. In the Bindings panel, select a source of content from the list. If you select a recordset, specify the column you want in the recordset.
    This is a picture of the feature being described.
  5. Click Insert, or drag the content source onto the page.

The dynamic content appears on the page if you’re working in Design view with Live Data turned on (View > Live Data).

If Live Data is turned off, a placeholder appears instead. (If you selected text on the page, the placeholder replaces the text selection.) The placeholder for recordset content uses the syntax {RecordsetName.ColumnName}, where Recordset is the name of the recordset and ColumnName is the name of the column you chose from the recordset.

Sometimes, the length of the placeholders for dynamic text distorts the page’s layout in the Document window. You can solve the problem by using empty curly braces as placeholders.

To create dynamic text placeholders:
  1. Choose Edit > Preferences > Invisible Elements or Dreamweaver > Preferences > Invisible Elements (Mac OS X).
  2. In the Show Dynamic Text As pop-up menu, choose { }.
  3. Click OK.


Making images dynamic

You can make images on your page dynamic. For example, suppose you design a page to display items for sale at a charity auction. Each page would include descriptive text and a photo of one item. The page’s general layout would remain the same for each item, but the photo (and descriptive text) could change.

To make an image dynamic:
  1. With the page open in Design view (View > Design), place the insertion point where you want the image to appear on the page, then select Insert > Image.

    2. The Select Image Source dialog box appears.
    This is a picture of the feature being described.

    On the Macintosh, the dialog box is different:
    This is a picture of the feature being described.

  2. Click the Data Sources option (Windows) or the Data Source button (Macintosh).

    3. A list of content sources appears.

  3. Select a content source from the list.

    4. The content source should be a recordset containing the paths to your image files. Depending on the file structure of your site, the paths can be absolute, document relative, or root relative.

    Note: Dreamweaver MX does not currently support binary images stored in a database.

    If no recordsets appear in the list, or if the available recordsets don’t meet your needs, define a new recordset. For instructions, see Defining a recordset.

  4. Click OK.


Making HTML attributes dynamic

You can dynamically change the appearance of a page by binding HTML attributes to data. For example, you can change the background image of a table by binding the table’s background attribute to a field in a recordset.

You can bind HTML attributes with the Bindings panel or with the Property inspector. The two methods are described below.

To make HTML attributes dynamic with the Bindings panel:
  1. Open the Bindings panel by choosing Window > Bindings.
  2. Make sure the Bindings panel lists the data source you want to use.

    3. The content source should contain data that’s appropriate for the HTML attribute you want to bind. If no sources of content appear in the list, or if the available content sources don’t meet your needs, click the plus (+) button to define a new data source. For instructions, see Defining Sources of Dynamic Content.

  3. In Design view, select an HTML object.

    4. For example, to select an HTML table, click inside the table and click the <table> tag in the the tag selector on the bottom-left of the Document window.

  4. In the Bindings panel, select a content source from your list.
  5. In the Bind To box, select an HTML attribute from the pop-up menu.
  6. Click Bind.

The next time the page runs on the application server, the value of the data source will be assigned to the HTML attribute.

To make HTML attributes dynamic with the Property inspector:
  1. In Design view, select an HTML object and open the Property inspector (Window > Properties).

    2. For example, to select an HTML table, click inside the table and click the <table> tag in the the tag selector on the bottom-left of the Document window.

  2. If the attribute you want to bind has a folder icon next to it in the Property inspector’s Standard view, click the folder icon to open a file selection dialog box, then click the Data Sources option to display a list of data sources. Skip to step 6.
  3. If the attribute you want to bind does not have a folder icon next to it in the Standard view, click the List tab (the lower of the two tabs) on the left side of the inspector.

    4. The Property inspector’s List view appears.
    This is a picture of the feature being described.

  4. If the attribute you want to bind is not listed in the List view, click the plus (+) button, then enter the attribute’s name or click the small arrow button and select the attribute from the pop-up menu.
  5. To make the attribute’s value dynamic, click the attribute, then click the lightning-bolt icon or folder icon at the end of the attribute’s row.

    6. If you clicked the lightning-bolt icon, a list of data sources appears.

    Here’s an example:
    This is a picture of the feature being described.

    If you clicked the folder icon, a file selection dialog box appears. Click the Data Sources option to display a list of content sources.

  6. Select a source of content from the list of content sources.

    7. The content source should hold data that’s appropriate for the HTML attribute you want to bind. If no content sources appear in the list, or if the available content sources don’t meet your needs, define a new content source. For instructions, see Storing and Retrieving Data for Your Page.

  7. Click OK.

The next time the page runs on the application server, the value of the data source will be assigned to the HTML attribute.


Making ActiveX, Flash, and other object parameters dynamic

You can make the parameters of Java applets and plug-ins dynamic, as well as the parameters of ActiveX, Flash, Shockwave, Director, and Generator objects.

Before starting, make sure the fields in your recordset hold data that’s appropriate for the object parameters you want to bind.

To make object parameters dynamic:
  1. In Design view, select an object on the page and open the Property inspector (Window > Properties).

    2. Here’s the Property inspector of a Flash object:
    This is a picture of the feature being described.

  2. Click the Parameters button.

    3. The Parameters dialog box appears.
    This is a picture of the feature being described.

  3. If your parameter does not appear in the list, click the plus (+) button and enter a parameter name in the Parameter column.
  4. Click the parameter’s Value column, then click the lightning-bolt icon to specify a dynamic value.

    5. A list of data sources appears.

  5. Select a data source from the list.

    6. The data source should hold data that’s appropriate for the object parameter you want to bind. If no data sources appear in the list, or if the available data sources don’t meet your needs, define a new data source. For instructions, see Defining Sources of Dynamic Content.

  6. Click OK.


Changing dynamic content

You can change the dynamic content on your page by editing the server behavior that provides the content. For example, you can edit a recordset server behavior to provide more records to your page.

Dynamic content on a page is listed in the Server Behaviors panel. For example, if you add a recordset to your page, the Server Behaviors panel lists it as follows:

Recordset(myRecordset)

If you add another recordset to your page, the Server Behaviors panel lists both recordsets as follows:

Recordset(mySecondRecordset)
Recordset(myRecordset)

To edit a server behavior providing dynamic content, double-click the server behavior in the Server Behaviors panel. The same dialog box you used to define the original data source appears. Make your changes in the dialog box and click OK.

You can also use the Property inspector to edit the recordsets on your page. Open the Property inspector (Window > Properties), then select the recordset in the Server Behaviors panel (Window > Server Behavior). Here’s the Property inspector for a recordset:

This is a picture of the feature being described.

If you edit a recordset in the Live Data window with the Auto Refresh option not selected, you must refresh the page to see your changes. To refresh the page, click the Refresh button or choose View > Refresh Live Data.


Deleting dynamic content

After adding dynamic content to a page, you can delete it by selecting the dynamic content on the page and pressing Delete. You can also delete it by selecting the dynamic content in the Server Behaviors panel and clicking the minus (-) button.

Note: This operation removes the server-side script in the page that retrieves the dynamic content from the database. It does not delete the data in the database.


Setting the Dynamic Text dialog box options

The purpose of this dialog box is to add dynamic content or to make existing text dynamic.

To set the Dynamic Text dialog box options:
  1. Select a data source from the list of data sources.

    2. The data source should contain textual information. If no data sources appear in the list, or if the available data sources don’t meet your needs, click the plus (+) button to define a new data source. For instructions, see Displaying Database Records.

  2. If desired, select a data format for the text.

    3. For more information, see Applying formats to data.

  3. If desired, modify the code Dreamweaver will insert in your page to display the dynamic text.
  4. Click OK.

Related topics

Making text dynamic

Defining a recordset


Setting the Dynamic Data dialog box options

The purpose of this dialog box is to make HTML attributes dynamic.

To make HTML attributes dynamic:
  1. Select a data source from the list of data sources.

    2. The data source should hold data that’s appropriate for the HTML attribute you want to bind. If no data sources appear in the list, or if the available data sources don’t meet your needs, define a new data source. For instructions, see Displaying Database Records.

  2. If desired, select a data format for the text.

    3. For more information, see Applying formats to data.

  3. If desired, modify the code Dreamweaver will insert in your page to display the dynamic text.
  4. Click OK.

Related topic

Making HTML attributes dynamic


The Property inspector for recordsets

The purpose of this Property inspector is to modify the selected recordset.

To modify the selected recordset:

Edit any of the options. When you select a new option in the inspector, Dreamweaver updates the page.

The available options vary depending on the server model.

Related topic

Changing dynamic content


Setting the Property inspector for ColdFusion stored procedures, ASP commands, and JSP callables

The purpose of this Property inspector is to modify the selected stored procedure.

To modify the selected stored procedure:

Edit any of the options. When you select a new option in the inspector, Dreamweaver updates the page.

The available options vary depending on the server technology.

Related topic

Changing dynamic content


Setting the Property inspector for JSP prepared statements

The purpose of this Property inspector is to modify the selected JSP prepared statement.

To modify the selected JSP prepared statement:

Edit any of the options. When you select a new option in the inspector, Dreamweaver updates the page.

Related topic

Changing dynamic content


Setting the Property inspector for repeated regions

The purpose of this Property inspector is to modify the selected repeated region.

To modify the selected repeated region:

Change any of the following:

  • The name of the repeated region
  • The recordset providing the records for the repeated region
  • The number of records displayed

When you select a new option, Dreamweaver updates the page.

Related topics

Changing dynamic content

Displaying multiple behaviors

Previous


Displaying Database Records

Displaying database records involves retrieving information stored in a database or other source of content, and rendering that information to a web page. Macromedia Dreamweaver MX provides many methods of displaying dynamic content, and provides several built-in server behaviors that let you enhance both the presentation of dynamic content, and allow users to more easily search through and navigate information returned from a database.

Dreamweaver provides the following server behaviors and formatting elements to let you enhance the display of dynamic data:

Formats let you apply different types of numerical, monetary, date/time, and percentage values to dynamic text.

Repeated Region server behaviors let you display multiple items returned from a database query, and let you specify the number of records to display per page.

Recordset Navigation server behaviors let you insert navigation elements that allow users to move to the next or previous set of records returned by the recordset. For example, if you choose to display 10 records per page using the Repeated Region server object, and the recordset returns 40 records, you can navigate through the records 10 at a time.

Recordset Status Bar server behaviors let you include a counter that shows users where they are within a set of records relative to the total number of records returned.

Show Region server behaviors lets you choose to show or hide items on the page based on the relevance of the currently displayed records. For example, if a user has navigated to the last record in a recordset, you can hide the “next” link, and display only the “previous” records link.

This chapter contains the following sections:

  • Applying typographic and page layout elements to dynamic data
  • Applying formats to data
  • Creating recordset navigation links
  • Showing and hiding regions based on recordset results
  • Displaying multiple behaviors
  • Creating an ASP.NET DataGrid or DataList web control
  • Creating a record counter
Next


Applying typographic and page layout elements to dynamic data

A powerful feature of Dreamweaver is the ability to present dynamic data within a structured page, and to apply typographic formatting using HTML and CSS. To apply formats to dynamic data in Dreamweaver, format the tables and placeholders for the dynamic data using Dreamweaver’s formatting tools. When the data is inserted from its data source, it will automatically adopt the font, paragraph, and table formatting you specified.

To learn about Dreamweaver’s formatting features, and how to apply them to dynamic data elements, see Presenting Content with Tables and Inserting and Formatting Text.


Applying formats to data

Dreamweaver comes with several predefined data formats that you can apply to dynamic data elements. The data format styles include date and time, currency, numerical, and percentage formats.

For example, if the price of an item in a recordset reads 10.989, you can display the price on the page as $10.99 by selecting Dreamweaver’s “Currency - 2 Decimal Places” format. This format takes and displays a number using two decimal places. If the number has more than two decimal places, the data format rounds the number to the closest decimal. If the number has no decimal places, the data format adds a decimal point and two zeros.

To apply data formats to dynamic content:
  1. Select the dynamic content in either the Live Data window or its placeholder in the Document window.
  2. Choose Window > Bindings to display the Bindings panel.
  3. Click the down arrow button in the Format column.

    4. If the down arrow is not visible, expand the panel.

  4. From the Format pop-up menu, select the data format category you want.

    5. Ensure that the data format is appropriate for the type of data you are formatting. For example, the Currency formats work only if the dynamic data consists of numerical data. Note that you cannot apply more than one format to the same data.

  5. Verify that the format was applied correctly by previewing the page in either the Live Data window or a browser.


Customizing existing data formats

You can customize Dreamweaver’s existing data formats or create your own.

To customize a data format:
  1. Open a page that contains dynamic data in Design view.
  2. Select the dynamic data whose format you want to customize.
  3. Choose Window > Bindings to display the Bindings panel.

    4. The bound data item whose dynamic text you selected will be highlighted.

  4. Click the down arrow in the Format column to expand the pop-up menu of available data formats.

    5. If the down arrow is not visible, expand the panel.

  5. Select Edit Format List from the pop-up menu.

    6. The Edit Format List dialog box appears.

  6. Complete the dialog box and click OK.

    7. For instructions, see Completing the Edit Format List dialog box.


Creating new data formats

You can create new data formats to suit any type of dynamic data you might want to display.

To create a new data format:
  1. Open a page containing dynamic data in Design view.
  2. Select the dynamic data you want to create a custom format for.
  3. Choose Window > Bindings to display the Bindings panel, and click the down arrow in the Format column.

    4. If the down arrow is not visible, expand the panel.

  4. Select Edit Format List from the pop-up menu.

    5. The Edit Format List dialog box appears.

  5. Click the plus (+) button and select a format type.
  6. Define the format and click OK.
  7. Enter a name for the new format in the Name column.
  8. Click OK to close the Edit Format List dialog box.


Creating recordset navigation links

Recordset navigation links let users move from one record to the next, or from one set of records to the next. For example, after designing a page to display five records at a time, you might want to add links such as “Next” or “Previous” that let users display the five next or previous records.

Dreamweaver lets you create four types of navigation links to move through a recordset: First, Previous, Next, and Last. A single page can contain any number of these links, provided they all work on a single recordset. You can’t add links to move through a second recordset on the same page.

Note: Microsoft ASP.NET refers to a recordset as a DataSet. If you are working with ASP.NET document types, the dialog boxes and menu choices specific to ASP.NET use the label DataSet. The Dreamweaver documentation generically refers to both types as recordsets, but uses DataSet when specifically describing ASP.NET features.

Recordset navigation links require the following dynamic elements:

  • A recordset to navigate
  • Dynamic content on the page to display the record or records
  • Text or images on the page to serve as a clickable navigation bar
  • A “Move To Record” set of server behaviors to navigate the recordset

You can add the last two elements using the Record Navigation Bar server object, or you can add them separately using the Dreamweaver design tools and the Server Behaviors panel.


Creating a navigation bar using the Recordset Navigation Bar server behavior

You can create a recordset navigation bar in a single operation using the Recordset Navigation Bar server behavior. The server object adds the following building blocks to the page:

  • An HTML table with either text or image links
  • A set of “Move to” server behaviors
  • A set of “Show Region” server behaviors

The text version of the Recordset Navigation Bar looks like this:

This is a picture of the feature being described.

The image version of the Recordset Navigation Bar looks like this:

This is a picture of the feature being described.

Before placing the navigation bar on the page, make sure the page contains a recordset to navigate and a page layout in which to display the records.

After placing the navigation bar on the page, you can use Dreamweaver’s design tools to customize the bar to your liking. You can also edit the “Move to” and “Show Region” server behaviors by double-clicking them in the Server Behaviors panel.

If you want to build the navigation bar block by block using the Dreamweaver design tools and the Server Behaviors panel, see Creating a custom recordset navigation bar.

To create the recordset navigation bar with the server object:
  1. In Design view, place the insertion point at the location on the page where you want the navigation bar to appear.
  2. Display the Recordset Navigation Bar dialog box (Insert > Application Objects > Recordset Navigation Bar).

    3. The Insert Recordset Navigation Bar dialog box appears.
    This is a picture of the feature being described.

  3. Select the recordset you want to navigate from the Recordset pop-up menu.
  4. From the Display Using section, select the format to display the navigation links on the page. The Text option places text links on the page, while the Images option lets you use graphical images as links.

    5. In the image version of the navigation bar, Dreamweaver uses its own image files. You can replace these images with image files of your own after placing the bar on the page.

  5. Click OK.

    6. Dreamweaver creates a table that contains text or image links that allow the user to navigate through the selected recordset when clicked. When the first record in the recordset is displayed, the “First” and “Previous” links or images are hidden. When the last record in the recordset is displayed, the “Next” and “Last” links or images are hidden.

    You can customize the layout of the navigation bar using the Dreamweaver design tools.


Creating a custom recordset navigation bar

If you want to create a recordset navigation bar that uses more complex layout and formatting styles then that offered by the simple table created by the Recordset Navigation Bar server object, you may prefer to create your own navigation bar. To do this, you must first create the necessary navigation links in either text or images, place them within the page in design view, and assign individual server behaviors to each navigation link.

The individual server behaviors that you can assign to navigation links are:

  • Move to first page
  • Move to last page
  • Move to next page
  • Move to previous page

If you would prefer to use the Dreamweaver’s built-in Recordset Navigation Bar server object to create a navigation bar, see Creating a navigation bar using the Recordset Navigation Bar server behavior.


Navigation bar design tasks

When creating a custom navigation bar, begin by creating its visual representation using Dreamweaver’s page-design tools. You don’t have to create a link for the text string or image, Dreamweaver will create one for you.

The page you create the navigation bar for must contain a recordset to navigate. See Defining a recordset for more information.

A simple recordset navigation bar might look like this, with link buttons created out of images, or other content elements:

This is a picture of the feature being described.

After you have added a recordset to a page, and have created a navigation bar, you must apply individual server behaviors to each navigation element. For example, a typical recordset navigation bar contains representations of the following links matched to the appropriate behavior:

Navigation link | Server behavior
Go to first page | Move to first page
Go to the previous page | Move to previous page
Go to the next page | Move to next page
Go to the last page | Move to last page

To assign server behaviors to record navigation links:
  1. In Design view, select the text string or image on the page you want to use as a record navigation link.
  2. Open the Server Behaviors panel (Window > Server Behaviors) and click the plus (+) button.
  3. Choose Recordset Paging from the pop-up menu, then select a server behavior appropriate to that link from the listed server behaviors.

    4. Note that if the recordset contains a large number of records, the Move to Last Record server behavior can take a long time to run when the user clicks the link.

  4. In the Recordset pop-up menu, select the recordset containing the records.
  5. Click OK.


Showing and hiding regions based on recordset results

Dreamweaver includes a set of server behaviors that let you show or hide a region based on the results returned by a recordset. For example, in a page using “Previous” and “Next” record links to navigate a results page, you can specify that the “Previous” records link be shown on all results pages except the first (which has no previous results), and that the “Next” records link be shown on all pages except the last (which has no next results).

You can also specify that a region be displayed or hidden based on whether the recordset is empty or not. If a recordset is empty (for example, no records were found matching the query), you can display a message informing the user that no records were returned. This is especially useful when creating search pages that rely on user input search terms to run queries against. Similarly, you can display an error message if there is a problem connecting to a database, or if a user’s user name and password do not match those recognized by the server.

The Show Region server behaviors are:

  • Show If Recordset Is Empty
  • Show If Recordset Is Not Empty
  • Show If First Page
  • Show If Not First Page
  • Show If Last Page
  • Show If not Last Page
To show a region only when it’s needed:
  1. In Design view, select the region on the page to show or hide.
  2. In the Server Behaviors panel (Window > Server Behaviors), click the plus (+) button.
  3. Choose Show Region from the pop-up menu, then choose one of the listed server behaviors.
  4. Click OK.


Displaying multiple behaviors

The Repeat Region server behavior lets you display multiple records from a recordset within a page. Any dynamic data selection can be turned into a repeated region. However, the most common regions are a table, a table row, or a series of table rows.

The example below illustrates how the Repeat Region server behavior is applied to a table row, and specifies that nine records be displayed per page. The row itself displays four different records: city, state, street address, and zip code.

This is a picture of the feature being described.

To create a table such as the one shown above, you must create a table containing dynamic content, and apply the Repeat Region server behavior to the table row containing the dynamic content. When the page is processed by the application server, the row is repeated the number of times specified in the Repeat Region server object, with a different record inserted in each new row.

The page you create the navigation bar for must contain a recordset to navigate. For more information, see Defining a recordset.

To create a repeated region:
  1. In Design view, select a region that contains dynamic content.

    2. The selection can be anything, including a table, a table row, or even a paragraph of text.

    To select a region on the page precisely, you can use the tag selector on the left corner of the document window. For example, if the region is a table row, click inside the row on the page, then click the rightmost <tr> tag in the tag selector to select the table row.

  2. Choose Window > Server Behaviors to display the Server Behaviors panel.
  3. Click the plus (+) button, and select Repeat Region.

    4. The Repeat Region dialog box appears.
    This is a picture of the feature being described.

  4. Select the name of the recordset to use from the pop-up menu.
  5. Select the number of records to display per page.
  6. Click OK.

    7. In the Document window, a thin, tabbed gray outline appears around the repeated region. In the Live Data window (View > Live Data), the gray outline disappears and the selection expands to display the number of records you specified.


Creating a table with a Repeat Region server behavior

The Dynamic Table server object lets you create a table containing dynamic content and apply the Repeat Region behavior from a single dialog box. This server object is especially useful as it simultaneously populates a table with dynamic content from a recordset and applies the Repeat Region server behavior.

Note: The Dynamic Table server object is not available when using ASP.NET document types. To create a table containing dynamic content and repeating regions, you must manually insert the table, insert dynamic content from the Data Binding panel, and apply a repeating region server behavior if needed. For more information, see Displaying multiple behaviors.

To create a dynamic table:
  1. Choose Insert > Application Objects > Dynamic table to display the Dynamic Table dialog box.

    2. The Dynamic Table dialog box appears.
    This is a picture of the feature being described.

  2. Select the recordset you want to use from the Recordset pop-up menu.
  3. Select the number of records to display per page.
  4. You may at this time input values for the table border, cell padding, and cell spacing.

    5. The Dynamic Table dialog retains the values you enter for table borders, cell padding, and cell spacing. If you are working on a project that will need several dynamic tables requiring the same look, you may want to enter the table layout values, as this will further simplify page development. Note that you can adjust these values after inserting the table using the table Property inspector.

  5. Click OK.

    6. A table and placeholders for the dynamic content defined in its associated recordset are inserted into the page.
    This is a picture of the feature being described.

    In this example the recordset contains four records: FIRSTNAME, LASTNAME, TITLE, and DEPARTMENT. The table’s Heading row is populated with the names of each record item. You can edit the headings using any descriptive text you want, or replace them with representative images.


Creating a record counter

Record counters give users a reference point when they are navigating through a set of records. Typically, record counters display the total number of records returned, and the current records being viewed. For example, if a recordset returns 40 individual records, and 8 records are displayed per page, the record counter on the first page would indicate “Displaying records 1-8 of 40.”

To create a record counter for a page, you must first create a recordset for the page, an appropriate page layout to contain the dynamic content, and a recordset navigation bar. To learn more about creating these elements, and adding them to a page, see the following sections:

  • Defining a recordset
  • Creating recordset navigation links
  • Displaying multiple behaviors
  • Creating a table with a Repeat Region server behavior

Once you have the above elements in the page, you can create a record counter.


Creating a record counter using the Recordset Navigation Status object

The Recordset Navigation Status object creates a text entry on the page to display the current record status.

To use the Recordset Navigation Status server object:
  1. Place the cursor at the point where you want to insert the record counter.
  2. Choose Insert > Application Objects > Recordset Navigation Status.

    3. The Insert Recordset Navigation Status dialog box is displayed.
    This is a picture of the feature being described.

    Select the recordset you want to use from the Recordset pop-up menu.

  3. Click OK.

    4. The Recordset Navigation Status server object inserts a text record counter that appears similar to the one shown below:
    This is a picture of the feature being described.

    You can use Dreamweaver’s page-design tools to customize the record counter.

    When viewed in the Live Data window or a browser the counter will appear similar to the one shown below:
    This is a picture of the feature being described.


Creating custom record counters

You can use individual record count behaviors to create custom record counters. Creating a custom record counter allows you to create a record counter beyond the simple, single row table inserted by the Recordset Navigation Status server object. You can arrange design elements in a number of creative ways, and apply an appropriate server behavior to each element.

You can create a simple record counter using the Recordset Navigation Status server object. This server object inserts a complete record counter that you can apply text formatting to using Dreamweaver’s page-design tools. To learn more about this record counter, see Creating a record counter using the Recordset Navigation Status object.

The Record Count server behaviors are:

  • Display Starting Record Number
  • Display Ending Record Number
  • Display Total Records

To create a custom record counter for a page, you must first create a recordset for the page, an appropriate page layout to contain the dynamic content, and a recordset navigation bar. To learn more about creating these elements, and adding them to a page, see the following sections:

  • Defining a recordset
  • Creating recordset navigation links
  • Displaying multiple behaviors
  • Creating a table with a Repeat Region server behavior

Once you have the above elements in the page, you can create a custom record counter.

This example creates a record counter that will appear similar to that created in the previous section Creating a record counter using the Recordset Navigation Status object. The record counter in this example will appear as:

Displaying records StartRow thru EndRow of RecordSet.RecordCount.

In this example the text in san-serif font represents the record count placeholders that will be inserted in the page.

To create a custom record counter:
  1. In Design view, type the counter’s text on the page. The text can be anything you choose.
    2. Displaying records thru of .
  2. Place the insertion point at the end of the text string.
  3. Open the Server Behaviors panel (Window > Server Behaviors).
  4. Click the plus (+) button in the upper left corner, and click on Display Record Count. Within this submenu select Display Total Records. The Display Total Records behavior is inserted into the page, and a placeholder is inserted where the insertion point was. The text string should now appear as:
    5. Displaying records thru of {Recordset1.RecordCount}.
  5. Place the insertion point after the word records, and select the Display Starting Record Count Number from the Server Behaviors > plus (+) button > Record Count panel. The text string should now appear as:
    6. Displaying records {StartRow_Recordset1} thru of {Recordset1.RecordCount}.
  6. Now place the insertion point between the words thru and of, and select the Display Starting Record Count Number from the Server Behaviors > plus (+) button > Record Count panel. The text string should now appear as:
    7. Displaying records {StartRow_Recordset1} thru {EndRow_Recordset1} of
{Recordset1.RecordCount}.
  7. Confirm that the counter functions correctly by viewing the page in the Live Data window (View > Live Data), the counter should look similar to the example below:
    8. Displaying records 1 thru 8 of 40.

If the results page has a navigation link to move to the next set of records, clicking the link would update the record counter to read as follows:

Showing records 9 thru 16 of 40.

Links don’t work in the Live Data window. To test them, you can use Dreamweaver’s Preview in Browser feature. Make sure the Preview Using Live Data Server option is selected in Preferences (Edit > Preferences > Preview in Browser or Dreamweaver > Preferences > Preview in Browser (Mac OS X)), then select File > Preview in Browser.


Creating an ASP.NET DataGrid or DataList web control

The ASP.NET DataGrid and DataList controls provide numerous options for displaying different data types (especially dynamic content from a database), and simplify the process of binding data sources to the controls. Dreamweaver supports both the DataGrid and DataList controls as server behaviors. The controls provide the following features:

DataGrid creates a multi-column, data-bound grid. This control allows you to define various types of columns, both to layout the contents of the grid and to add specific functionality (edit button columns, hyperlink columns, and so on).

DataList displays items from a data source using templates. You can customize the appearance of the control by manipulating the templates that make up its different components.


Adding a DataGrid to a page

The Dreamweaver DataGrid allows you to insert an ASP.NET DataGrid web control. The DataGrid control renders tables as multi-column grids, and can include different column types (heterogeneous columns) for defining the layout of cell contents. These include bound, button, and template columns, among others. In addition, the DataGrid supports interactive functionality such as column sorting, editing, and commands. The column types available in the DataGrid are:

DataGrid Column Type | Description
Simple Data Field | Referred to as a “bound column” in ASP.NET, the Simple Data Field column lets you specify which data source field to display, and the data format the field will use with a .NET formatting expression.
Free Form | Referred to as a “template column” in ASP.NET, the Free Form column lets you create combinations of HTML text and server controls to design a custom layout for a column. The controls within a free form column can be data-bound. Free form columns give you added flexibility in defining the layout and functionality of the grid contents, because you have complete control over how the data is displayed and what happens when users interact with rows in the grid.
Hyperlink | The Hyperlink Column displays information as hypertext links. A typical use is to display data (such as a customer number or product name) as a hyperlink that users can click to navigate to a separate page that provides details about that item.
Edit, Update, Cancel Buttons | Referred to as the Edit Command Column in ASP.NET the Edit, Update, Cancel Button column lets users perform in-place editing of information in DataGrid rows. To do so, create an Edit, Update, Cancel column. At runtime, this column displays a button labeled "Edit". When the user clicks the Edit button, the row data is displayed in editable controls such as text boxes, and the Edit button is replaced with Update and Cancel buttons.
Delete Buttons | The Delete Button lets a user delete a particular row by clicking a button.

To learn more about the DataGrid control, and how it can be used to format dynamic data, visit the following websites:

  • Microsoft MSDN
  • Microsoft ASP.NET

Before inserting the DataGrid server behavior, you must define a DataSet (referred to as a recordset by other document types) for the DataGrid. For more information, see Defining a recordset.

To add a DataGrid object to a page:
  1. Open the Server Behaviors panel (Window > Server Behaviors), click the plus (+) button and select DataGrid.

    2. The DataGrid dialog box appears.
    This is a picture of the feature being described.

  2. Complete the DataGrid dialog box and click OK.

    3. For instructions on completing the DataGrid dialog box, see Setting the ASP.NET DataGrid Object dialog box.

For more information, click the Help button in the dialog box.In the Document window, the DataGrid will display with a tabbed, gray outline surrounding it. In the Live Data window (View > Live Data), the gray outline disappears and the object’s placeholder is replaced with the specified DataGrid.


Adding a DataList to your page

The Dreamweaver DataList server behavior allows you to insert the ASP.NET DataList control into a page. The DataList control is used to implement a form-based front-end for data sources, and allows you to present data in a grid, where each record is rendered on a different row, and many rows can be displayed at once.

To learn more about the DataList control, and how it can be used to format dynamic data, visit the following websites:

  • Microsoft MSDN
  • Microsoft ASP.NET

Before inserting the DataList server behavior, you must define a DataSet (referred to as a recordset by other document types) for the DataList. For more information, see Defining a recordset.

To add a DataList object to your page:
  1. Open the Server Behaviors panel (Window > Server Behaviors), click the plus (+) button, and select DataList.

    2. The DataList dialog box appears.
    This is a picture of the feature being described.

  2. Complete the DataList dialog box and click OK.

    3. For instructions on completing the DataList dialog box, see Setting the ASP.NET DataList Object dialog box options.

In the Document window, the DataList object will display with a tabbed, gray outline surrounding it. In the Live Data window (View > Live Data), the gray outline disappears and the object’s placeholder is replaced with the specified DataList.


Modifying a DataGrid or DataList object

Four ways exist to modify DataGrid and DataList objects:

  • In Design view, click the icon on the upper left corner of the DataGrid or DataList to switch to edit mode, then add or modify the content of any of the tabbed regions that appear

    • Note: You can also drag sources of dynamic content from the Bindings panel into a tabbed region

  • In Design view, select the object and use the Property inspector to change its attributes
  • Double-click the object in the Server Behaviors panel and change its properties in the dialog box that opens
  • In Code view, select the DataGrid or DataList on the page, and use its tag dialog to change its attributes


Reference

This section provides information about the panels, dialog boxes, and inspectors introduced in this chapter.


Completing the Insert Recordset Navigation Bar dialog box

The purpose of this dialog box is to create and add a recordset navigation bar to your page.

Procedure
  1. Choose the recordset to navigate.
  2. Select text or image links.

    3. In the image version of the bar, Dreamweaver uses its own image files. If you want, you can replace them with your own image files after placing the bar on the page.

  3. Click OK.

    4. Dreamweaver builds a table that contains text or image links that move through the selected recordset when clicked.

Related topics

Creating a navigation bar using the Recordset Navigation Bar server behavior

Creating recordset navigation links


Completing the dialog boxes for the Move To server behaviors

The purpose of these dialog boxes is to add links that let the user navigate through records in a recordset.

Procedure
  1. If you didn’t select anything on the page, select a link from the pop-up menu.
  2. Select the recordset containing the records to page through.

    3. Note: If the recordset contains a large number of records, the Move to Last Record server behavior can take a long time to run when the user clicks the link.

  3. Click OK.

Related topic

Creating a custom recordset navigation bar


Completing the Repeat Region dialog box

The purpose of this dialog box is to create and add a repeated region that lets you display more than one record on a page.

Procedure
  1. Specify the recordset containing the data to display in the repeated region.
  2. Specify the number of records to display per page.

    3. If you specify a limited number of records per page and it’s possible the number of records requested will exceed it, add record navigation links to let users display the other records. See Creating recordset navigation links.

  3. Click OK.

Related topic

Displaying multiple behaviors


Completing the Insert Recordset Navigation Status dialog box

The purpose of this dialog box is to create and add a record counter to your page.

Procedure
  1. Choose the recordset to track.
  2. Click OK.

Dreamweaver builds and adds the record counter to the page.

Related topic

Creating a record counter using the Recordset Navigation Status object


Completing the Edit Format List dialog box

Use this dialog box to create new data formats, or customize existing ones.

Procedure
  1. To create a new data format, click the plus (+) button.
  2. To edit an existing data format, choose the format from the list and click Edit.

    3. Note: Some data formats have no parameters to customize.

  3. Complete the dialog box and click OK.

    4. For instructions, see Completing the Currency, Number, or Percent dialog boxes.

  4. If creating a new format, specify a name for it.
  5. If modifying an existing format, change the name of the format if desired by clicking its name in the list and modifying it.
  6. To delete a data format, click the format in the list and click the minus (-) button.
  7. Click OK to close the Edit Format List dialog box.

Related topics

Customizing existing data formats

Creating new data formats


Completing the Currency, Number, or Percent dialog boxes

The purpose of these dialog boxes is to define data formats.

Procedure
  1. Change any of the following parameters:
    • the number of digits to display after the decimal point
    • whether or not to place a leading zero in front of fractions
    • whether to use parentheses or a minus sign for negative values
    • whether or not to group digits
  2. Click OK.

Related topics

Completing the Edit Format List dialog box

Customizing existing data formats

Creating new data formats


Setting the ASP.NET DataGrid Object dialog box

The DataGrid Object dialog box allows you to create and add a DataGrid object to an ASP.NET page.

Procedure
  1. The ID attribute (or label) of the DataGrid object.

    2. This field is pre-populated with a value. You can change the value of the DataGrid, however, if you set the value of the field to that of an existing ID, you will be prompted to enter a new attribute value.

  2. Select a DataSet to associate with the DataGrid.

    3. This is the DataSet from which the DataGrid retrieves information. Dreamweaver fills the Grid Columns box with bound columns for all of the fields in the selected DataSet.

  3. Specify the number of records to be displayed.
  4. Choose the type of page navigation links you want to implement.
    • The “Links to Previous and Next Pages” item adds Next and Prev links.
    • The “Numbered Links To Every Page” item adds page-number links— for example, “1 2 3 4 5 n...”.
  5. Remove the grid columns you don’t want by selecting them in the Grid Columns box, and clicking the minus (-) button to delete them.
  6. You can edit the remaining grid columns by selecting a column in the Grid Columns box and setting its properties.

    7. To change the DataGrid column type, click the Edit button and choose a column type from the pop-up menu. A dialog box specific to the chosen column type will appear. Specify the content and formatting of the selected DataGrid column. The column types are:

    DataGrid Column Type | Description
Simple Data Field | Referred to as a “bound column” in ASP.NET, the Simple Data Field column lets you specify which data source field to display, and the data format the field will use with a .NET formatting expression.
Free Form | Referred to as a “template column” in ASP.NET, the Free Form column lets you create combinations of HTML text and server controls to design a custom layout for a column. The controls within a free form column can be data-bound. Free form columns give you great flexibility in defining the layout and functionality of the grid contents, because you have complete control over how the data is displayed and what happens when users interact with rows in the grid.
Hyperlink | The Hyperlink Column displays information as hyperlinks. A typical use is to display data (such as a customer number or product name) as a hyperlink that users can click to navigate to a separate page that provides details about that item.
Edit, Update, Cancel Buttons | Referred to as the Edit Command Column in ASP.NET the Edit, Update, Cancel Button column lets users perform in-place editing of information in DataGrid rows. To do so, create an Edit, Update, Cancel column. At runtime, this column displays a button labeled "Edit". When the user clicks the Edit button, the row data is displayed in editable controls such as text fields, and the Edit button is replaced with Update and Cancel buttons.
Delete Buttons | The Delete Button lets a user delete a particular row by clicking a button.

  7. Repeat step 6 for each column you want to change.
  8. To change the order of the columns in the DataGrid, select a column in the Grid Column box and click the up or down arrow to move the column left or right in the DataGrid.
  9. Click OK to close the dialog box and create the DataGrid.

Related topic

Adding a DataGrid to a page


Setting the Simple Data Field dialog box options

The Simple Data Field column (referred to as a bound column in ASP.NET) lets you specify which data source field to display, and the data format the field will use with a .NET formatting expression.

Procedure
  1. The Title text box lets you insert a title into the grid’s header or footer rows (Displaying a header or footer row for a DataGrid is controlled by the DataGrid Property inspector.).
  2. Choose a DataSet column with which to populate the DataGrid column from the Data Field pop-up menu.
  3. Click the Read Only check box to specify that the DataGrid does not allow add, update, or delete privileges.
  4. Select a data type from the Submit As pop-up menu.

Related topics:

Adding a DataGrid to a page

Modifying a DataGrid or DataList object

Setting the Property inspector for an ASP.NET DataGrid


Setting the Free Form dialog box options

The Free Form option (referred to as a template column in ASP.NET) lets you create combinations of HTML text and server controls to design a custom layout for a column. The controls within a free form column can be data-bound. Free form columns give you great flexibility in defining the layout and functionality of the grid contents, because you have complete control over how the data is displayed and what happens when users interact with rows in the grid.

Procedure:
  1. The Title text box lets you insert a title into the grid’s header or footer rows (Displaying a header or footer row for a DataGrid is controlled by the DataGrid Property inspector.).
  2. Select a template to use with the Free Form DataGrid from the Template pop-up menu.
  3. Choose a DataSet column to populate the grid column by clicking the Add Data Field button.

    4. The Add Data Field dialog box appears. After choosing a DataSet column in this dialog box and clicking OK, Dreamweaver adds an appropriate data binding expression to the Contents box.

  4. Format the Free Form column by enclosing the binding expression with HTML tags in the Contents box.
  5. Select a data type from the Submit As pop-up menu.

Related topics

Adding a DataGrid to a page

Modifying a DataGrid or DataList object

Setting the Property inspector for an ASP.NET DataGrid


Setting the Hyperlink Column dialog box options

The Hyperlink Column displays information as hyperlinks. A typical use is to display data (such as a customer number or product name) as a hyperlink that users can click to navigate to a separate page that provides details about that item.

Procedure
  1. Enter a name for the column in the Title text box.
  2. From the Hyperlink Text section, choose either the Static Text or Data Field option. If you choose Static Text, enter the text of the hyperlink in the Static Text text box. If you choose Data Field, select a DataSet column from the Data Field pop-up menu to provide the hyperlink text.
  3. From the Linked Page section, choose either the Static URL or Data Field option. If you choose Static URL, enter the URL of the destination page in the Static URL text box (you can browse to the destination page using the browse button to the right of the Static URL text box. If you choose Data Field, select a DataSet column from the Data Field pop-up menu to provide the URL.
  4. If you are creating the hyperlink using the Data Field options, you can specify a formatting expression for the hyperlink text using the Format String field. For more information about format expressions, refer to the appropriate ASP.NET documentation for the String.Format Method for DataGrids.
  5. Click OK.

Related topics:

Adding a DataGrid to a page

Modifying a DataGrid or DataList object

Setting the Property inspector for an ASP.NET DataGrid


Setting the Edit, Update, Cancel Buttons box options

The Edit, Update, Cancel Button column (referred to as the Edit Command Column in ASP.NET) lets users perform in-place editing of information in DataGrid rows. To do so, create an Edit, Update, Cancel column. At runtime, this column displays a button labeled "Edit". When the user clicks the Edit button, the row data is displayed in editable controls such as text boxes, and the Edit button is replaced with Update and Cancel buttons.

Procedure
  1. Enter a name for the column in the Title text box.
  2. From the Button Type pop-up menu choose either link or push buttons. At runtime, this column displays a button labeled “Edit.” Link buttons use text links for the buttons, and push buttons use images.
  3. From the Update Table pop-up menu choose the database table whose data the user will modify.
  4. From the Primary Key pop-up menu choose a primary key associated with the table.
  5. Select a data type from the Submit As pop-up menu.
  6. Click OK.

Related topics

Adding a DataGrid to a page

Modifying a DataGrid or DataList object

Setting the Property inspector for an ASP.NET DataGrid


Setting the Delete Button box options

The Delete Button (also known as a Button Column in ASP.NET) lets a user delete a particular row by clicking a button.

Procedure
  1. Enter a name for the column in the Title text box.
  2. From the Button Type pop-up menu choose either link or push buttons. At runtime, this column displays a button labeled “Delete.” Link buttons use text links for the buttons, and push buttons use images.
  3. From the Delete From pop-up menu choose the database table whose data the user will delete.
  4. From the Primary Key pop-up menu choose a primary key associated with the table.
  5. Select a data type from the Submit As pop-up menu.
  6. Click OK.

Related topics

Adding a DataGrid to a page

Modifying a DataGrid or DataList object

Setting the Property inspector for an ASP.NET DataGrid


Setting the ASP.NET DataList Object dialog box options

This dialog box creates and adds an ASP.NET DataList object to a page. This object is only available with ASP.NET document types.

Procedure
  1. If desired, change the name of the DataList.

    2. Dreamweaver gives the DataList a default name.

  2. Associate a DataSet with the DataList.

    3. You can choose an existing DataSet or enter an arbitrary value. By default, the first DataSet in the list is selected.

  3. To organize the items in a table, select the Organize Items In a Table option.

    4. If using a table, specify the number of columns in the table. If the number is greater than one, specify a fill order for the table cells: select the Wrap Top to Bottom option to wrap the data horizontally or select the Wrap Left to Right to wrap the data vertically.

  4. Specify the data to be displayed in the DataList by doing the following:
    • First, choose the Item template for the Templates list. The Item template represents all the rows in the list other than the header and footer rows.
    • Second, click the Add Data Field to Contents button. The Add Data Field dialog box appears.
    • Third, choose a DataSet column and click OK to close the dialog box. Dreamweaver adds an appropriate data binding expression to the Contents box in the DataList Object dialog box.
    • Fourth, format the data to be displayed by enclosing the binding expression with HTML tags in the Contents box.
  5. Adjust the layout of the DataList, as required.

    6. You control the layout of a DataList by choosing from the templates in the Templates list then adding HTML tags in the Contents text box. The available templates are:

    Template | Description
Header | The text and controls to render at the beginning of the list.
Item | The HTML elements and controls to render once for each row in the data source.
Alternating Item | Similar to the Item Template element, but rendered for every other row in the DataList. If you use this template, you typically create a different look for it, such as a different background color than that of the Item Template.
Edit Item | The layout of an item when it is in edit mode. This template typically contains editing controls such as Text Box controls.
Select Item | The elements to render when the user selects an item in the DataList. Typical uses are to visually mark the row using a background or font color. You can also expand the item by displaying additional fields from the data source.
Separator | The elements to render between each item. A typical example might be a line (using an <HR> element).
Footer | The text and controls to render at the end of the list.

  6. Click OK to close the dialog box and create the DataList.

Related topics

Adding a DataList to your page

Modifying a DataGrid or DataList object


Setting the Add Data Field dialog box options

This dialog box lets you associate a DataSet column to a DataGrid or DataList object.

Procedure

Choose a DataSet column (Data Field) and click OK.

Related topics

Setting the ASP.NET DataGrid Object dialog box

Setting the ASP.NET DataList Object dialog box options


Setting the Property inspector for an ASP.NET DataGrid

This property inspector modifies a DataGrid, allowing you to change the name of the DataGrid, adjust the cell padding and cell spacing values, and display column headers or footers.

Procedure

You can modify any of the following settings:

The DataGrid box lets you change the name of the DataGrid.

The Advanced button lets you open the DataGrid Object dialog box.

For more information, see Setting the ASP.NET DataGrid Object dialog box.

The Cell Padding box lets you adjust the cell padding of the grid cells.

The Cell Spacing box lets you adjust the cell spacing of the grid cells.

The Show Column Titles option lets you turn headers on and off.

The Show Column Footers option lets you turn footers on and off.

Related topic

Adding a DataGrid to a page


Setting the Property inspector for an ASP.NET DataList

This Property inspector lets you modify an ASP.NET DataList on the page.

Procedure

You can modify any of the following settings:

The DataList box lets you change the name of the DataList.

The Advanced button lets you open the DataList Object dialog box.

The Show Column Title option turns the header on and off.

The Show Column Footer option turns the footer on and off.

Related topic

Adding a DataList to your page

Previous


Using ColdFusion Components

ColdFusion components (CFCs) let you encapsulate application and business logic into self-contained, reusable units. CFCs also provide a fast, easy way to create web services.

You can use Macromedia Dreamweaver MX to create and modify CFCs. You can also use Dreamweaver to build web pages that use CFCs.

Note: You can use CFCs only with Macromedia ColdFusion MX. CFCs are not supported in ColdFusion 5.

This chapter contains the following sections:

  • Understanding ColdFusion components
  • Visually creating a component in Dreamweaver
  • Viewing ColdFusion components in Dreamweaver
  • Editing ColdFusion components in Dreamweaver
  • Building web pages that use ColdFusion components
Next


Understanding ColdFusion components

A ColdFusion component is a reusable software unit written in ColdFusion markup language (CFML). CFCs help make your code reusable and easy to maintain.

This section describes the advantages of CFCs. Later sections describe how Dreamweaver can help you work with CFCs. For information on CFC tags and syntax, see ColdFusion help in Dreamweaver (Help > Using ColdFusion).

ColdFusion components are meant to provide a simple yet powerful way for developers to encapsulate elements of their websites. Generally, you should use components for application or business logic. Use customs tags for presentation elements such as customized greetings, dynamic menus, and so on.

As with many other types of construction, dynamic sites can often benefit from interchangeable parts. For example, a dynamic site may run the same query repeatedly, or calculate the total price of shopping cart pages and recalculate it every time an item is added. These tasks can be handled by components. You can fix, improve, extend, and even replace a component with minimal impact to the rest of your application.

Suppose an online store calculates shipping charges based on the price of orders. For orders under $20, the shipping charge is $4; for orders between $20 and $40, the shipping charge is $6, and so on. You could insert the logic for calculating the shipping charge in both the shopping cart page and the checkout page, but that would mix HTML presentation code and CFML logic code and generally make the code difficult to maintain and reuse.

You decide to create a ColdFusion component called Pricing that has, among other things, a function called ShippingCharge. The function takes a price as an argument and returns a shipping charge. For example, if the value of the argument is 32.80, then the function returns 6.

In both the shopping cart page and the checkout page, you insert a special tag to invoke the ShippingCharge function. When the page is requested, the function is invoked and a shipping charge is returned to the page.

Later, the store announces a special promotion: free shipping for all orders above $100. You make the change to the shipping rates in one place—the ShippingCharge function of the Pricing component—and all the pages using the function automatically get accurate shipping charges.


Visually creating a component in Dreamweaver

You can use Dreamweaver to visually define a ColdFusion component and its functions. Dreamweaver creates a .cfc file and inserts the necessary CFML tags for you.

Note: Depending on the component, you may have to complete some code by hand.

To create a ColdFusion component visually:
  1. Open a ColdFusion page in Dreamweaver.
  2. In the Components panel (Window > Components), select CF Components from the pop-up menu.
  3. On the Components panel, click the plus (+) button.

    4. The Create Component dialog box opens.

  4. Complete the dialog box and click OK.

    5. For more information, see Setting the Create Component dialog box options.

Dreamweaver writes a .cfc file and saves it in the folder you specified. The new component also appears in the Components panel (after clicking Refresh).

To remove a component, you must delete the .cfc file by hand from the server.


Viewing ColdFusion components in Dreamweaver

Dreamweaver provides a way to visually examine the ColdFusion components defined for your site. Dreamweaver reads the .cfc files located on the server and displays information about them in an easy-to-navigate tree view in the Components panel.

Note: Dreamweaver looks for the components on your testing server (see Specifying where dynamic pages can be processed). If you want to view components located on another server, change the testing server settings.

Specifically, you can perform any of the following actions in Dreamweaver:

  • List all the ColdFusion components defined for the site
  • Explore the functions and arguments of each component
  • Inspect the properties of functions that serve as web services
To view the ColdFusion components in Dreamweaver:
  1. Open any ColdFusion page in Dreamweaver.
  2. In the Components panel (Window > Components), select CF Components from the pop-up menu.
  3. Click the Refresh button on the panel to retrieve the components.

    4. Dreamweaver displays the component packages on the server. A component package is a folder that contains CFC files.

    If existing component packages do not appear, click the Refresh button on the panel toolbar.

  4. Click the plus (+) icon beside the package name to view the components stored in the package.
  5. To list the functions of a component, click the plus (+) icon beside the component name.
  6. To see the arguments a function takes, as well as the arguments’ type and whether they are required or optional, open the function’s branch in the tree view.

    7. Functions that take no arguments have no plus (+) icon beside them.

  7. To quickly view the details of an argument, a function, a component, or a package, select the item in the tree view, then click the Get Details icon on the panel toolbar.

    8. You can also right-click (Windows) or Control-click (Macintosh) the item and select Get Details from the pop-up menu.

    Dreamweaver displays details about the item in a message box.


Editing ColdFusion components in Dreamweaver

Dreamweaver provides a streamlined way of editing the code of the ColdFusion components defined for your site. For example, you can add, change, or delete any component function without leaving Dreamweaver.

To use this feature, your development environment must be set up as follows:

  • ColdFusion MX must be running locally.
  • In the advanced Site Definition dialog box in Dreamweaver, the Access type specified in the Testing Server category must be Local/Network.
  • In the advanced Site Definition dialog box, the path of your local root folder must be the same as the path of the testing server folder (for example, c:\Inetpub\wwwroot\cf_projects\myNewApp\). You can examine and change these paths by choose Site > Edit Sites.
  • The component must be stored in the local site folder or any of its subfolders on your hard disk.

Before you can edit a CFC, open any ColdFusion page in Dreamweaver and display the components in the Components panel. To display the components, open the Components panel (Window > Components), select CF Components from the panel’s pop-up menu, and click the Refresh button on the panel.

Because ColdFusion MX is running locally, Dreamweaver displays component packages on your hard disk. For more information, see Viewing ColdFusion components in Dreamweaver.

To edit a component:
  1. To edit a component file generally, open the package and double-click the component name in the tree view.

    2. Dreamweaver opens the component’s file in Code view.

  2. To edit a specific function, argument, or property, double-click the item in the tree view.
  3. Make your changes by hand in Code view.
  4. Save the file (File > Save).

To see any new function in the Components panel, refresh the view by clicking the Refresh button on the panel toolbar.


Building web pages that use ColdFusion components

One way to use a component function in your web pages is to write code in the page that invokes the function when the page is requested. You can use Dreamweaver to help you write this code.

Note: For other ways to use components, see ColdFusion help in Dreamweaver (Help > Using ColdFusion).

To use a ColdFusion component in a web page:
  1. In Dreamweaver, open the ColdFusion page that will use the component function.
  2. Switch to Code view (View > Code).
  3. Open the Components panel (Window > Components), then select CF Components from the panel’s pop-up menu.
  4. Find the component you want and insert it using one of the following techniques:
    • Drag a function from the tree view to the page. Dreamweaver inserts code in the page to invoke the function.
    • Select the function in the panel and click the Insert icon on the panel toolbar (the second icon on the right). Dreamweaver inserts the code in the page at the insertion point.
  5. If you insert a function that has arguments, complete the argument code by hand.

    6. For more information, see ColdFusion help in Dreamweaver (Help > Using ColdFusion).

  6. Save the page (File > Save).


Reference

This section provides information about the dialog box and panel introduced in this chapter.


Setting the Create Component dialog box options

The purpose of this dialog box is to create a new ColdFusion component.

For more information on possible values for each field in the dialog box, see ColdFusion help in Dreamweaver (Help > Using ColdFusion).

Procedure
  1. In the Component section, enter the details of the component.

    2. Use only letters, numbers, or the underscore character.

    The Name box specifies the .cfc filename. Don’t specify the .cfc file extension when entering the name.

    The Component Directory box specifies where the component will be saved. Choose the web application’s root folder (such as \Inetpub\wwwroot\myapp\) or any of its subfolders.

  2. If you want to define one or more functions for the component, select Functions from the Section list, click the plus (+) button, and enter the details of the new function.

    3. Tip: If you select remote from the Access menu, the function becomes available as a web service.

    In the Return Type box, make sure to specify the type of the value returned by the function.

  3. If you want to define one or more arguments for a function, select Arguments from the Section list, select the function from the pop-up menu, click the plus (+) button, and enter the details of the new argument on the right.
  4. Click OK to create the component.
  5. If you use a remote development server, upload the CFC file and any dependent files (such as those used to implement a function or include files) to the remote server.

    6. Uploading the files ensures that Dreamweaver features such as Live Data view and Preview In Browser work properly.

Related topics

Visually creating a component in Dreamweaver

Understanding ColdFusion components


Setting the CF Components panel options

The purpose of this panel is to view and edit ColdFusion components. You can also use this panel to add code to a page that invokes functions of a component.

Note: The panel is available only when viewing a ColdFusion page in Dreamweaver.

Tasks
  • Viewing ColdFusion components in Dreamweaver
  • Editing ColdFusion components in Dreamweaver
  • Building web pages that use ColdFusion components

Related topic

Understanding ColdFusion components

Previous


Using Web Services

Web services are an emerging technology that allow web pages to access distributed applications. By offering both access to information and application functionality as a service, web services can be delivered and paid for as streams of services that allow ubiquitous access from any platform. The web page that connects to the web service is commonly known as a consumer, and the service itself is known as a publisher. Macromedia Dreamweaver MX lets you create pages and sites that are consumers of web services. Dreamweaver currently supports the creation of web service consumers using ColdFusion, ASP.NET, and Java Server Pages (JSP) document types. Specifically, Dreamweaver allows you to perform the following web service development tasks:

  • Select web services available on the Internet
  • Generate a web service proxy that allows the web page to communicate with the web service publisher

    • The proxy (also known as an abstraction class) contains the fields, methods, and properties of the web service, and makes them available to the locally hosted page. When you generate a proxy for your page, Dreamweaver lets you view them in the Components panel.

  • Drag methods and data types into the page’s code

Before you create a web page that uses a web service, you must be familiar with the underlying server technology of the application you want to use and the programming constructs that the application requires.

Dreamweaver allows you to author web pages that can access web services and make use of the functionality the services provide. In addition, you can create and publish web services for deployment using Macromedia ColdFusion MX.

This chapter discusses the following topics:

  • Understanding web services
  • Installing and configuring proxy generators
  • Adding a web service proxy using the WSDL description
  • Adding a web service to a page
  • Editing the UDDI web service site list
Next


Understanding web services

Web services allow applications to communicate and share information across the Internet, regardless of operating system or programming language. Examples of web services, and the information and functionality they provide, include the following:

  • User authentication and authorization
  • Credit card validation
  • Financial markets services that return stock prices associated with specified ticker symbols
  • Purchasing services that allow users to order and buy products online
  • Information services that provide news or other information types based on a selected interest, location, or other personal information

By providing functionality as a service that a web page connects to and uses as needed, web services give developers and service providers greater flexibility in designing and deploying powerful, distributed applications.


The parts of a web service

Web services consist of the following basic components:

  • Service publishers provide hosted applications, and make them available for use. Web services can be provided either for free, or as a fee-based service.
  • Service brokers maintain a registry of service providers with descriptions of service offerings and links to their applications.
  • Service consumers are the web pages that access and use the remote web service.


Finding web service publishers

Web services themselves are made available by service publishers. Typically, the service publisher makes its web service available through a web-based registry that maintains a directory of available services that you can access. A number of websites provide such a directory, including:

  • X Methods
  • IBM Business Registry
  • Microsoft UDDI

These registries use the Universal Description, Discovery and Integration (UDDI) service, an open, e-commerce service registry that provides a forum for businesses to describe themselves and the goods or services they can provide to other businesses. A group of companies, called operators, maintain the registry. The operators have pledged to share all public information about registrants among themselves and with users of the service, and to maintain inter-operability among the multiple peer nodes of the UDDI service network. In addition to public web services, there are also private UDDI registries available on a subscription basis.

The UDDI specification is based on existing Internet standards, ensuring that it is platform and implementation neutral.


Web service software components

In order for a web page to access and use a web service, it must communicate with the service and have a description of the functionality the service provides, the available methods that it can invoke, and the parameters the service returns. The Web Service Description Language (WSDL) is an XML-based description of the service. Each web service provides a WSDL that describes how to bind to the service, the available methods that the web page can invoke, and the data inputs and outputs. The WSDL can reside in either a file, or it can be generated by the web service at runtime.

Communication between the web page requesting the service, and the web service itself uses the Simple Object Access Protocol (SOAP). SOAP is an XML-based protocol that lets a web client access and invoke the web service’s methods and parameters.


Web services information and specifications

To learn more about web services, and the underlying technologies that make them possible, visit the following websites:

  • WSDL specification
  • UDDI specification
  • XML specification
  • SOAP specification


The Dreamweaver web service workflow

To create a page or site that consumes a web service using Dreamweaver, you must perform the following tasks:

  1. Install and configure a proxy generator.

    2. Proxy generators generate a web service proxy, a software component that a web page uses to communicate with the web service publisher. The web service proxy is generated from the WSDL that describes the web service. Depending on the server technology you want to develop web service consumers for, you may need to install and configure a proxy generator that supports that technology.

    Dreamweaver comes pre-configured with AXIS, the Apache SOAP proxy generator that supports JSP web service development. If you are developing ColdFusion 6 pages, the web service proxy generator is included in the ColdFusion server. Establishing a connection to the ColdFusion server gives you access to the proxy generator.

    If you are developing web service pages for use with ASP.NET, you must install the ASP.NET SDK, which is available from Microsoft.

    For information on installing and configuring a proxy generator not supplied with Dreamweaver, see Installing and configuring proxy generators.

  2. Using a browser, view a web-based registry of web services.

    3. There are several sources of web services, ranging from web service registry sites to simple lists. The registries use UDDI, a standard that lets service providers and requestors find and transact with one another. UDDI allows businesses to locate services on the web that meet their needs. For example, using UDDI you can specify certain criteria such as the lowest price for a certain service, or that specific information be returned.

  3. After locating and selecting a web service that provides the functionality you need, enter the URL of the WSDL in the Adding a Web Service dialog box.
  4. Generate a proxy for the web service from the WSDL description of the service publisher.

    5. To embed a web service into a web page, you must create a proxy. The proxy provides the web page with the necessary information to communicate with the web service, and access the methods the web service provides.

    To create a proxy from the WSDL file, use a proxy generator. After you create the proxy, you can install it either:

    • On the local computer where you are developing the web service consumer.
    • On the server computer running the application server. To deploy the web page and have it communicate with the web service publisher you must install the proxy on the server.

      • For more information, see Installing and configuring proxy generators.

  5. Using Dreamweaver, add the web service to a page and edit the necessary parameters and methods to make use of the service’s functionality.

    6. For more information, see Adding a web service to a page.


Installing and configuring proxy generators

Dreamweaver installs the AXIS proxy generator, which supports JSP web services. AXIS is an open source proxy generator distributed through the Apache SOAP project. In addition, you can add proxy generators that support other vendor’s web service implementations, or new web service technologies. This section describes how to obtain proxy generators and configure them to work with Dreamweaver.

To learn more about AXIS, see the Apache AXIS website.


Obtaining additional proxy generators

If you want to install a proxy generator that is not supplied with Dreamweaver, you must obtain the proxy generator and any related software components from the vendor. You should be able to download all the necessary files from the vendor’s website.

Some proxy generators create proxies that depend on other software libraries, which must be appropriately installed so the proxy generator can access them. For example, the AXIS proxy generator creates proxies that depend on the Apache SOAP library, which, in turn, depends on other software libraries (note that all the necessary software needed to use AXIS is installed by default with Dreamweaver). When selecting a proxy generator, consult the provided documentation, and ensure that you have all the required software components and libraries, so that you can properly install and configure them.

After you have properly installed and configured the proxy generator, you must configure it to work with Dreamweaver.

Note: Currently, web services development with Dreamweaver is limited to the Windows environment. To develop pages that access web services on the Macintosh, you must use a separate application server running either Windows NT/2000/XP or UNIX on which to run the web service proxy and its application environment.

To configure a proxy generator to work with Dreamweaver:
  1. Choose Window > Server Components to open the Server Components panel.
    This is a picture of the feature being described.
  2. In the Server Components panel, choose Web Services from the pop-up menu in the upper left of the panel, then click the plus (+) button and select Add Using WSDL.

    3. The Add Using WSDL dialog box appears.
    This is a picture of the feature being described.

  3. In the Add Using WSDL dialog box, choose Edit Proxy Generator List from the Proxy Generator pop-up menu. The Proxy Generator dialog box appears.
    This is a picture of the feature being described.
  4. Click New, select the proxy generator from the pop-up menu, and click Done.

    5. If the proxy generator you want to use not appear in the list, choose Default Proxy Generator to display the Default Proxy Generator dialog box.

  5. The Default Proxy Generator dialog box lets you configure the selected proxy generator, or you can configure a new proxy generator. The dialog box’s text boxes vary depending on the proxy generator you chose. Complete the dialog box and click OK.
    This is a picture of the feature being described.

    6. For information on completing the dialog text box, see Setting the Default Proxy Generator dialog box options.

  6. When you have completed setting the Default Proxy Generator settings, click OK.

    7. When Dreamweaver reads a WSDL description of a web service, Dreamweaver carries out the following actions relating to the fields of the Default Proxy Generator:

    • Reads the WSDL as input to find the web service.
    • Generates the web service web service proxy with the specified runtime environment.
    • Compiles the proxy with the specified compiler.
    • Outputs the proxy source code and the compiled proxy in the specified destination folder.


Adding a web service proxy using the WSDL description

After you have specified a proxy generator and configured the web service server models you want to support, you need to find a web service that provides the desired functionality and generate a proxy for that service.

To select a web service and generate a proxy from its WSDL file:
  1. Open the page that you want to add the web service to.
  2. Choose Window > Server Components to open the Server Components panel.
  3. In the Server Components panel, choose Web Services from the pop-up menu in the upper left of the panel, click the plus (+) button, and select Add Using WSDL.

    4. The Add Using WSDL dialog box appears.
    This is a picture of the feature being described.

  4. Specify the URL of the WSDL file you want to use.

    5. If you know the URL of the WSDL file, enter it in the URL of the WSDL text box.

    If you don’t know the URL of the WSDL file, you can browse a directory of web services. When you find the web service you want, copy and paste the URL of the web service into the WSDL edit box. To launch a web browser, click the UDDI browse button and select one of the listed web service registries. Dreamweaver will launch the browser and open the selected registry. Locate the web service you want to use, and copy the URL of its WSDL file to the Clipboard (Control+C in Windows or Command+C on the Macintosh). Return to the Web Services Chooser and paste the URL into the dialog box.

    You can edit the list of web service registries to include additional web service directories or specific web service providers. For more information, see Editing the UDDI web service site list.

  5. Select a proxy generator that supports your desired web services server model from the Proxy Generator pop-up menu.

    6. Make sure the proxy generator is installed and configured on your system. For more information, see Installing and configuring proxy generators.

  6. Click OK.

    7. The proxy generator creates a proxy for the web service and introspects it. Introspection is the process where the proxy generator queries the internal structure of the web service proxy, and makes its interfaces, methods, and properties available through Dreamweaver.

The web service is now available for use in the site, and appears in the Server Components panel. For more information, see Adding a web service to a page.


Adding a web service to a page

After selecting a web service, generating its proxy, and adding it to the Server Components panel, you can insert it into a page. The illustration below shows the Server Components panel with the web service proxy Helloworld added. The Helloworld proxy provides one method, sayHello, which prints “Hello World!”.

This is a picture of the feature being described.

The following examples instantiate the HelloWorld web service using ColdFusion. To learn more about creating a web services, and to see additional examples using .NET and JSP, visit the Macromedia Support Center.

To add a web service to a page:
  1. In the Document window, in Code view, drag the sayHello method into the page’s HTML.

    2. Dreamweaver adds the method and dummy parameters to the page.

  2. Edit the inserted code with appropriate service instance names, data types, and parameter values, as required by the web service. The web service should provide descriptions of the data types and parameter values.

    3. In the ColdFusion example shown below, the web service is enclosed by the <cfinvoke> tags. When developing a web service in ColdFusion, use <cfinvoke> to instantiate the web service and invoke its methods.

    <html>
<head>
<title>Web Service</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<cfinvoke
webservice="http://velcro-qa-7:8100/helloworld/HelloWorld.cfc?wsdl"
method="sayHello"
returnvariable="aString">
</cfinvoke>

</body>
</html>
  3. If you want to bind a return value to a visual element, switch to Design view and place a visual element on the page that can accept data binding. Then switch back to Code view and enter the appropriate code to bind the returned value to the visual element. When creating web services, refer to the technology provider’s documentation for the proper syntax with which to both instantiate the service and display the returned values to the page.

    4. In this example, the value returned for the variable aString is output using the ColdFusion <cfoutput> tag. This will display the sentence “The web service says: Hello world!” to the page.

    <html>
<head>
<title>Web Service</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<cfinvoke
webservice="http://velcro-qa-7:8100/helloworld/HelloWorld.cfc?wsdl"
method="sayHello"
returnvariable="aString">
</cfinvoke>

The web service says: <cfoutput>#aString#</cfoutput>
</body>
</html>
  4. When you deploy web pages to a production server, Dreamweaver automatically copies the pages, the proxy, and any necessary libraries to the web server.

    5. Note: If you develop the application with a proxy that is installed on a separate computer from the one where you developed the pages, or if you use a site management tool that does not copy all of the related files to the server, you must make certain to deploy both the proxy and any dependant library files.Otherwise, your pages cannot communicate with the web service application.


Editing the UDDI web service site list

The Web Service Chooser provides a list of UDDI-based web service directories from which you can select web services. You can edit this list to add or delete web service directories.

To edit the web service site list:
  1. In Dreamweaver, select Window > Components to open the Components panel.
  2. In the Components panel, choose Web Services from the pop-up menu in the upper left of the panel, then click the plus (+) button to add a web service.

    3. The Add Using WSDL dialog box appears.

  3. In the Web Services Chooser, click the globe icon and choose Edit UDDI Site List from the pop-up menu.

    4. The UDDI Sites dialog box is displayed.
    This is a picture of the feature being described.

  4. From the UDDI Sites dialog box you can add new web service sites, edit the name and URL of existing sites, and remove unwanted sites.

    5. To remove an existing site, select it in the list and click the Remove button. To add a new site, or modify and existing one, click the New or Edit button and complete the dialog box shown below.
    This is a picture of the feature being described.


Reference

This section provides information about the panels and dialog boxes introduced in this chapter.


Setting the Web Services Chooser dialog box options

This dialog box lets you choose a web service and generate a proxy that lets the page access the service.

Procedure
  1. Set the following options:

    2. URL of WSDL file: Enter either the URL or local file path of the WSDL file. This information is read as input by Dreamweaver, and is used to generate the proxy and scripting information for the web service.

    Proxy Generator: Choose a proxy generator that supports your chosen document type to generate a web service proxy.

    Explorer button: Choose from a menu that contains plain-English names of URLs to UDDI registries and other significant repositories of WSDL files. After you choose a menu item, a browser appears and opens the selected URL. The Choosing Edit Browser List opens the dialog box for editing browser preferences.

  2. Click OK.

Related topic

Adding a web service proxy using the WSDL description


Setting the Proxy Generators dialog box options

This dialog box lets you define new proxy generators, or modify, delete, or duplicate
existing ones.

To define, modify, or remove a proxy generator:

  1. Perform any of the following actions:
    • To add a proxy generator to the list, click New and complete the resulting dialog box.

      • For more information, see Setting the Default Proxy Generator dialog box options.

    • To delete a proxy generator from the list, click Remove.
    • To modify a proxy generator, select it in the list and click Edit. Make changes in the resulting dialog box.

      • For more information, see Setting the Default Proxy Generator dialog box options.

    • To create a copy of a proxy generator, select it in the list and click Duplicate.
  2. Click Done.

Related topic

Installing and configuring proxy generators


Setting the Default Proxy Generator dialog box options

This dialog box lets you set the properties of a default proxy generator.

To configure the default proxy generator:
  1. Set the following properties:

    2. Name The name of the proxy generator instance to appear in the pop-up menu.

    Server Models Supported The list of server models that the proxy generator supports. You can edit the list by using the plus (+) and minus (-) buttons.

    Clicking the plus button displays the Select Server Models dialog box. Select a server model from the list of available server models, and click OK.

    Generate Proxy Command Generate proxy source code from WSDL information. The following tokens can be used in the proxy generator commands:

    Token | Description
$$WSDLFILE | The name of the WSDL file.
$$SITEROOT | The root folder of the site.
$$JAVA | Specifies the Java runtime provided with Dreamweaver.
$$JAVAC | Specifies the Java compiler provided with Dreamweaver.
$$CONFIGDIR | Dreamweaver’s configuration directory.
$$COMPILEDIR | Specifies the temporary directory where generated proxy classes are compiled and is used to add this temporary folder to the classpath for the compilation.

    Compile Proxy Command: Compiles the proxy source code to executable code.

    Introspect Compiled Proxy Introspect the compiled proxy by selecting an introspectors from the pop-up menu.

    Destination Folder Folder in which to output the compiled web service proxy and its
    source code.

  2. Click OK.

Related topics

Installing and configuring proxy generators

Adding a web service proxy using the WSDL description


Setting the Select Server Model dialog box options

The Select Server Model dialog allows you to select the server models to support with the specified proxy generator.

To select a server model:
  1. Select a server model from the list. You can select multiple server models by holding the Control key and selecting from the list.
  2. Click OK.

Related topics

Installing and configuring proxy generators

Adding a web service proxy using the WSDL description


Setting the UDDI Site dialog box options

The UDDI Sites dialog box lets you add, edit, or remove UDDI directories so that you can easily browse for web services.

To add a new site, or edit an existing one:
  1. Click the New button to display the New UDDI Site dialog box, or the Edit button to display the Edit UDDI Site dialog box
  2. If you know the name and URL of a UDDI website, enter the information into
    the provided fields.

    3. You can also launch a web browser to locate UDDI sites with by clicking the browser button (the globe icon) next to the Address field.

  3. When you have entered the name and URL of a UDDI website click OK.

    4. The new or modified UDDI site appears in the list of sites in the UDDI sites dialog box.

  4. Click Done.
To remove a site:
  1. Select a site from the list.
  2. Click the Remove button to remove the selected site from the list.
  3. Click Done

Related topic

Editing the UDDI web service site list


ColdFusion Proxy Generator dialog box

The ColdFusion proxy generator is not configurable.

Related topics

Installing and configuring proxy generators

Adding a web service proxy using the WSDL description


Setting the Add Using Proxy Classes dialog box

This dialog box lets you select a local .NET DLL Reader to introspect web service proxies when using the .NET development framework.

To select a proxy class reader:
  1. Enter the location of the proxy class reader in the text box. You can browse for the file by clicking the Browse button to the right of the text box.
  2. Select a proxy reader you want to use from the pop-up menu. The default proxy reader is the .NET DLL Reader.
  3. Click OK.

Related topics

Installing and configuring proxy generators

Setting the Default Proxy Generator dialog box options

Previous


Adding Custom Server Behaviors

Macromedia Dreamweaver MX comes with a set of built-in server behaviors that let you easily add dynamic capabilities to a site. If you want to extend Dreamweaver’s functionality, you can create new server behaviors to suit your development needs, or obtain server behaviors from the Macromedia Exchange website.

This chapter contains the following sections:

  • Installing additional server behaviors
  • Creating server behaviors
  • Editing and modifying server behavior code
Next


Installing additional server behaviors

Many Macromedia partners and independent developers create custom server behaviors to address specific web development needs. You can access and download these custom server behaviors from the Macromedia Exchange for Dreamweaver website.

The server behaviors and other extensions available through the Macromedia Exchange website allow you to easily add new features to Dreamweaver. Each server behavior includes a short description, user reviews, and a discussion group where you can post questions and get support for the server behaviors you download.

To access Macromedia Exchange:
  1. In Dreamweaver MX select Help > Dreamweaver Exchange.

    2. Your browser will open the Macromedia Exchange for Dreamweaver web page.

  2. Log on to the Exchange using your Macromedia ID, or, if you have not yet created a Macromedia Exchange ID for yourself, follow the instructions to open a Macromedia account.

Note: You can also access the Macromedia Exchange from the Server Behaviors panel (Window > Behaviors) by clicking the plus (+) button and choosing Get More Server Behaviors.

To install a server behavior or other extension in Dreamweaver:
  1. Launch the Extension Manager by selecting Help > Manage Extensions.
  2. Select File > Install Package in the Extension Manager.

    3. For more information, see the Extension Manager online help.


Creating server behaviors

If you are a developer proficient in ColdFusion, ASP.NET, JavaScript, VBScript, PHP, or Java, you can write your own server behaviors. The steps to create a server behavior include the following tasks:

  • Writing one or more code blocks that perform the required action.

    • For information on creating server behaviors with the Dreamweaver Server Behavior Builder see Using the Server Behavior Builder. For information on the syntax supported by Dreamweaver server behaviors, see Writing code blocks.

  • Specifying where the code block should be inserted within the page’s HTML source.

    • For information on positioning code blocks within a page see Positioning code blocks.

  • If the server behavior requires that a value be specified for a parameter, creating a dialog box that prompts the web developer applying the behavior to supply an appropriate value.

    • For information on supplying parameter values to a server behavior using a dialog box see Creating a dialog box for a custom server behavior.

  • Testing the server behavior before making it available to others.

    • For guidelines on testing server behaviors see Testing server behaviors.


Using the Server Behavior Builder

Use the Server Behavior Builder to add the code block or blocks that the behavior inserts into the page.

To write server behavior code blocks:
  1. In the Server Behaviors panel (Window > Server Behaviors), click the plus (+) button and choose New Server Behavior from the pop-up menu.
  2. The New Server Behavior dialog box appears.
    This is a picture of the feature being described.
  3. From the Document Type pop-up menu, select the document type that you are developing the server behavior for.
  4. In the Name text box, enter a name for the server behavior.
  5. If you want to copy an existing server behavior to add to the behavior you are creating, select the Copy Existing Server Behavior check box.

    6. When this check box is selected, a list of available server behaviors is displayed in the Behavior to Copy pop-up menu.

  6. Click OK.

    7. The Server Behavior Builder dialog box is displayed.
    This is a picture of the feature being described.

  7. To add a new code block, click the plus (+) button.

    8. The Create a New Code Block dialog box is displayed.
    This is a picture of the feature being described.

  8. Enter a name for the code block you want to create.
  9. In the Code Block text box, enter the code necessary to implement the server behavior. When you enter code in this text box, you can insert only a single tag or code block. If you need to enter multiple tags or code blocks, you must create that many individual code blocks in the Server Behavior Builder dialog box.
  10. If the server behavior requires runtime parameters, you can include them in the code by clicking the Insert Parameters in Code Block button. The Insert Parameters in Code Block dialog box is displayed.
  11. In the parameter Name pop-up menu, enter a name for the parameters, and click OK.

    12. The parameter is inserted into the code block at the insertion point created by the cursor prior to defining the parameter.

  12. Select an option from the Insert Code pop-up menu specifying the location in which to embed the code blocks.

    13. For more information see Positioning code blocks.

  13. You can specify additional information about the server you are creating using the Advanced options panel.

    14. Click the Advanced button to display the advanced options.
    This is a picture of the feature being described.

    Identifier specifies whether the code block should be treated as an identifier.

    By default, every code block is an identifier. If Dreamweaver finds an identifier code block anywhere in a document, it lists the behavior in the Server Behaviors panel. Use the Identifier check box to specify whether the code block should be treated as an identifier.

    At least one of the server behavior’s code blocks must be an identifier. A code block should not be an identifier if the same code block is used in another server behavior, or if the code block provides a commonly used piece of functionality that occurs naturally within a page.

    Server Behavior Title specifies the title of the behavior as it appears in the Server Behaviors panel.

    When a page designer clicks the plus (+) button of the Server Behaviors panel, the new server behavior’s title will appear in the pop-up menu. When a designer applies an instance of a server behavior to a document, the behavior appears in the list of applied behaviors in the Server Behaviors panel. Use the Server Behavior Title box to specify the contents of the plus (+) pop-up menu and the list of applied behaviors.

    The initial value in the box is the name you supplied in the New Server Behavior dialog box. As parameters are defined, the name is automatically updated so that the parameters appear inside parentheses after the server behavior name.

    Set Session Variable (@@Name@@, @@Value@@)

If the user accepts the default value, everything before the parentheses will appear in the plus (+) pop-up menu (for example, Set Session Variable). The name plus the parameters will appear in the list of applied behaviors—for example, Set Session Variable ("abcd", "5").

Code Block to Select specifies what code block is selected when the user selects the behavior in the Server Behaviors panel.

When you apply a server behavior, one of the code blocks within the behavior is designated the “code block to select.” If you apply the server behavior and then select the behavior in the Server Behaviors panel, in the Document window Dreamweaver automatically selects the designated block. By default, Dreamweaver selects the first code block that is not above the html tag. If all the code blocks are above the html tag, then Dreamweaver selects the first one. Advanced users can specify which code block is the selected one.
  14. If you need to create more code blocks, repeat steps 7 through 13 as needed.
  15. If the server behavior requires that parameters be supplied to it, you will need to create a dialog box that accepts parameters from the person applying the behavior.

    16. To create a dialog box that accepts user input parameters, see Creating a dialog box for a custom server behavior.

  16. After you have performed the above steps as required by the server behavior you are creating, Click OK.

    17. Once you create a server behavior, it is listed in the Server Behaviors panel. Test the server behavior and ensure that it functions properly.

For additional information, see the following sections:

  • Writing code blocks
  • Using parameters in server behaviors
  • Making code blocks conditional
  • Repeating code blocks
  • Coding guidelines
  • Positioning code blocks


Writing code blocks

The code blocks you create in the Server Behavior Builder are encapsulated in a server behavior, that appears in the Server Behaviors panel. The code can be any valid runtime code for the specified server model. For example, if you choose ColdFusion as the document type for your custom server behavior, then the code you write must be valid ColdFusion code that runs on a ColdFusion application server.


Entering code blocks

You can create the code blocks either directly within the Server Behavior Builder, or you can copy and paste the code from other sources. Each code block you create in the Server Behavior Builder must be a single tag or script block. If you need to insert multiple tag blocks, split them into separate code blocks.


Including Parameters

You can include parameters in your runtime code and let the page designer supply the parameter values. To do so, enter parameter markers in the code, as follows:

@@parameterName@@

For more information, see Using parameters in server behaviors.


Applying conditions and repeating elements to code blocks

If you want the code block, or a portion of a code block, to be executed only if a certain condition or conditions apply, use the following syntax:

<@ if (expression1) @>
   code block1
[<@ elseif (expression2) @>
   code block2]*
[<@ else @>
   code block3]
<@ endif @>

The square brackets ([ ]) denote optional code and the asterisk (*) denotes zero or more instances. The condition expression is any valid JavaScript condition expression, and may contain server behavior parameters. For more information, see Making code blocks conditional.

If you want the code block, or a portion of a code block, to be repeated a number of times, use the following syntax:

<@ loop (@@param1@@,@@param2@@) @>
   code block
<@ endloop @>

The loop directive takes a comma-separated list of parameter arrays as arguments. The repeating text will be duplicated n times, where n is the length of the parameter array arguments. If more than one parameter array argument is specified, all the arrays must have the same length. On the ith evaluation of the loop, the ith elements of the parameter arrays replace the associated parameter instances in the code block. For more information, see Repeating code blocks.

For general information on coding, see Coding guidelines.


Using parameters in server behaviors

You can include parameters in a server behavior’s code, and let the page designer supply the necessary parameter values before inserting the server behavior’s code into the page. To let the page designer supply parameter values, enter parameter markers within the code as shown:

@@parameterName@@

The example ASP server behavior below contains the parameter formParam, which requires the person inserting the behavior to supply a the name of a form object:

<% Session(“lang_pref”) = Request.Form(“formParam”); %>
To create a parameter that lets the user supply the necessary value:
  1. Enclose the formParam string in parameter markers:
    2. <% Session(“lang_pref”) = Request.Form(“@@formParam@@”); %>
  2. Create a dialog box that prompts the designer to supply the name of the form object. For more information, see Creating a dialog box for a custom server behavior.


Making code blocks conditional

Dreamweaver allows you to develop code blocks that incorporate control statements that execute conditionally. The Server Behavior Builder uses if, elseif, and else statements, and may contain server behavior parameters. This allows you to insert alternate text blocks based on the values of OR relationships among server behavior parameters. The if, elseif, and else statements appear as shown below. Note that square brackets ([ ]) denote optional code, and the asterisk (*) denotes zero or more instances:

<@ if (expression1) @>
   conditional text1
[<@ elseif (expression2) @>
   conditional text2]*
[<@ else @>
   conditional text3]
<@ endif @>

Condition expressions can be any JavaScript expression that can be evaluated using the JavaScript eval() function, and may include a server behavior parameter marked by @@'s. (The @@'s are necessary to distinguish the parameter from JavaScript variables and keywords.)

You can nest any number of conditionals or a loop directive (see Repeating code blocks) within a conditional directive. For example, you can specify that if an expression is true to execute a loop.

Note: New lines after each “@>” are ignored.


Effectively using conditional expressions

When using if, else, and elseif directives within the insertText XML tag, the participant text is preprocessed to resolve the if directives and to determine which text to include in the result. The if and elseif directives take the expression as an argument. The condition expression is the same as that for JavaScript condition expressions, and can also contain server behavior parameters. Directives such as this allow you to choose between alternative code blocks based on the values of, or relationships between, server behavior parameters.

For example, the JSP code shown below comes from a Dreamweaver MX server behavior that uses the conditional code block:

@@rsName@@.close();
<conditional_code>
@@rsName@@_hasData = @@rsName@@.next();

If the server behavior uses a normal recordset, the <conditional_code> placeholder is replaced with:

@@rsName@@ = Statement@@rsName@@.executeQuery();

If the server behavior uses a recordset from a callable object, it uses the following code instead.

@@callableName@@.execute();

@@rsName@@ = @@callableName@@.getResultSet();

If the server behavior is added for a callable object, the user would enter a value for the @@callableName@@ parameter in the server behavior’s Parameter dialog box. Otherwise, the @@callableName@@ parameter would be empty. Thus, you can rewrite the previous insert text using @@callableName@@ as the if argument. In this example, if the @@callableName@@ parameter is supplied with a value, and first conditional code block (containing the getResultSet() method) is selected:

@@rsName@@.close();
<@ if (@@callableName@@ != '') @>
@@callableName@@.execute();
@@rsName@@ = @@callableName@@.getResultSet();@ else @>
@@rsName@@ = Statement@@rsName@@.executeQuery();
<@ endif @>
@@rsName@@_hasData = @@rsName@@.next();


Repeating code blocks

When creating server behaviors, you can use looping constructs to repeat a code block a specified number of times. The loop syntax is:

<@ loop (@@param1@@,@@param2@@,@@param3@@,@@param_n@@) @>
   code block
<@ endloop @>

The loop directive accepts a comma-separated list of parameter arrays as arguments. In this case, parameter array arguments allows a users to supply multiple values for a single parameter. The repeating text will be duplicated n times, where n is the length of the parameter array arguments. If more than one parameter array argument is specified, all the arrays must have the same length. On the ith evaluation of the loop, the ith elements of the parameter arrays replace the associated parameter instances in the code block.

When you later create a dialog box for the server behavior (see Creating a dialog box for a custom server behavior), you can add a control to the dialog box that allows the page designer to create parameter arrays. Dreamweaver includes a simple array control that you can use to create dialog boxes. This control, called Text Field Comma Separated List, is available through the Server Behavior builder. To create user interface elements of greater complexity, see the API documentation to create a dialog box with a control to create arrays (a grid control, for example).

Loop directives cannot be nested, but conditional directives (see Making code blocks conditional) can be nested within a loop directive.

The following example shows how such repeating code blocks can be used to create server behaviors (the example is a ColdFusion behavior used to access a stored procedure):

<CFSTOREDPROC procedure="AddNewBook"
   datasource=#MM_connection_DSN#
   username=#MM_connection_USERNAME#
   password=#MM_connection_PASSWORD#>
<CFPROCPARAM type="IN" dbvarname="@CategoryId" value="#Form.CategoryID#"
   cfsqltype="CF_SQL_INTEGER">
<CFPROCPARAM type="IN" dbvarname="@ISBN" value="#Form.ISBN#"
   cfsqltype="CF_SQL_VARCHAR">
</CFSTOREDPROC>

In this example, the CFSTOREDPROC tag can include zero or more CFPROCPARAM tags. However, without support for the loop directive, there is no way to include the CFPROCPARAM tags within the inserted CFSTOREDPROC tag. If this were to be created as a server behavior without the use of the loop directive, you would need to divide this example into two participants: a main CFSTOREDPROC tag, and a CFPROCPARAM tag whose participant type is multiple.

Using the loop directive, the same procedure can be written as follows:

<CFSTOREDPROC procedure="@@procedure@@"
datasource=#MM_@@conn@@_DSN#
username=#MM_@@conn@@_USERNAME#
password=#MM_@@conn@@_PASSWORD#>
<@ loop (@@paramName@@,@@value@@,@@type@@) @>
   <CFPROCPARAM type="IN"
   dbvarname="@@paramName@@"
   value="@@value@@"
   cfsqltype="@@type@@">
<@ endloop @>
</CFSTOREDPROC>

In the above example, and in the case of conditional code blocks as well, newlines after @> are ignored.

If the user entered the following parameter values in the server behavior dialog box:

procedure = "proc1"
conn = "connection1"
paramName = ["@CategoryId", "@Year", "@ISBN"]
value = ["#Form.CategoryId#", "#Form.Year#", "#Form.ISBN#"]
type = ["CF_SQL_INTEGER", "CF_SQL_INTEGER", "CF_SQL_VARCHAR"]

The server behavior would insert the following runtime code in the page:

<CFSTOREDPROC procedure="proc1"
datasource=#MM_connection1_DSN#
username=#MM_connection1_USERNAME#
password=#MM_connection1_PASSWORD#>

<CFPROCPARAM type="IN" dbvarname="@CategoryId" value="#Form.CategoryId#"
   cfsqltype="CF_SQL_INTEGER">
<CFPROCPARAM type="IN" dbvarname="@Year" value="#Form.Year#"
   cfsqltype="CF_SQL_INTEGER">
<CFPROCPARAM type="IN" dbvarname="@ISBN" value="#Form.ISBN#"
   cfsqltype="CF_SQL_VARCHAR">
</CFSTOREDPROC>

Note: Parameter arrays cannot be used outside of a loop except as part of a conditional directive expression.


Using the loop directive’s _length and _index variables

The loop directive includes two built-in variables that you can use for embedded if conditions. The variables are: _length and _index. The _length variable evaluates to the length of the arrays processed by the loop directive, while the _index variable evaluates to the current index of the 'loop' directive. To ensure that the variables are only recognized as directives, and not as actual parameters to be passed into the loop, do not enclose either variable in @@'s.

An example of using built-in variables is to apply them to the import attribute of the page directive. The import attribute requires comma separation of packages. If the loop directive extends around the entire import attribute, you will only want to output the attribute name import= on the first iteration of the loop (This would include the closing double quote (“), and not output a comma on the last iteration of the loop). Using the built-in variable, you can express this as:

<@loop (@@Import@@)@>
<@ if(_index == 0)@>import="
<@endif@>@@Import@@<@if (_index == _length-1)@>"<@else@>,
<@ endif @>
<@endloop@>


Coding guidelines

In general, your server behavior’s code should be compact and robust. Web application developers are very sensitive to the code added to their pages. Follow generally accepted coding practices for the document type’s language (ColdFusion, ASP.NET, JavaScript, VBScript, PHP, Visual Basic or Java). When writing comments, consider the different technical audiences that might need to understand the code, such as web and interaction designers, or other web application developers. Include comments that accurately describe the purpose of the code, and any special instructions for including it within a page.


Error checking

An important requirement is error checking. The server behavior’s code should handle error cases gracefully. Try to foresee every possibility. For example, what if a parameter request fails? What if no records are returned from a query?


Use unique names

Your code should be clearly identifiable and avoid name collisions with existing code. For example, if the page contains a function called hideLayer() and a global variable called ERROR_STRING, and your server behavior inserts code that uses those names too, the server behavior may conflict with the existing code.


Create a prefix for your code’s functions and global variables

Create your own prefix for runtime functions and global variables that you insert in a page. One convention is to use your initials. Never use the MM_ prefix: it is reserved for Macromedia use only. Macromedia precedes all functions and global variables with the prefix MM_ to prevent them from conflicting with your code.

var MM_ERROR_STRING = "...";
function MM_hideLayer() {


Avoid similar code blocks

Make sure the code in your blocks don’t resemble too closely the code in other blocks. If a code block looks too much like another code block on the page, the Server Behaviors panel might mistakenly identify the first code block as an instance of the second code block (or conversely). A simple solution is to add a comment to a code block to make it more unique.


Positioning code blocks

After writing code blocks in the Server Behavior Builder, you must specify where to insert them in the page’s HTML source code.

In the Insert Code pop-up menu, you can choose to insert the code block above the opening <html> tag, below the closing </html> tag, relative to another tag in the page, or relative to a tag selected by the page designer.

To position a code block above the <html> tag:
  1. In the Insert Code pop-up menu, choose Above the <html> Tag.
  2. Specify a location above the tag by choosing an option in the Relative Position pop-up menu.

    3. You can insert the block at the beginning of the file, just before code blocks that open recordsets, just after code blocks that open recordsets, or just above the <html> tag. You can also specify a custom position.

  3. If you want to specify a custom position, choose Custom Position from the Relative Position pop-up menu, then assign a weight to the code block.

    4. Dreamweaver assigns a weight of 50 to all recordset-opening code blocks inserted above the <html> tag. If the weight of two or more blocks match, Dreamweaver randomly sets the order among the blocks.

    Use the Custom Position option when you need to insert more than one code block in a particular order. For example, if you want to insert an ordered series of three code blocks after the code blocks that open recordsets, you could enter a weight of 60 for the first block, 65 for the second, and 70 for the third.

To position a code block below the closing </html> tag:
  1. In the Insert Code pop-up menu, choose Below the </html> Tag.
  2. Specify a location below the tag by choosing an option in the Relative Position pop-up menu.

    3. You can insert the block just after the </html> tag, just before code blocks that close recordsets, just after code blocks that close recordsets, or just before the end of the file. You can also specify a custom position.

  3. If you want to specify a custom position, choose Custom Position from the Relative Position pop-up menu, then assign a weight to the code block.

    4. Dreamweaver assigns a weight of 50 to all recordset-closing code blocks inserted below the </html> tag. If the weight of two or more blocks match, Dreamweaver randomly sets the order among the blocks.

    Use the Custom Position option when you need to insert more than one code block in a particular order. For example, if you want to insert an ordered series of three code blocks before the code blocks that close recordsets, you could enter a weight of 30 for the first block, 35 for the second, and 40 for the third.

To position a code block relative to another tag on the page:
  1. In the Insert Code pop-up menu, choose Relative To a Specific Tag.
  2. In the Tag text box, enter the tag or select one from the pop-up menu.

    3. If you enter a tag, don’t include the angled brackets (< >).

  3. Specify a location relative to the tag by choosing an option in the Relative Position pop-up menu.

    4. You can insert your code block just before or just after the opening or closing tags. You can also replace the tag with the code, insert the code as the value of an attribute of the tag (a box appears to let you choose the attribute), or insert the code inside the opening tag.

To position a code block relative to a tag selected by the page designer:
  1. In the Insert Code pop-up menu, choose Relative To the Selection.
  2. Specify a location relative to the selection by choosing an option in the Relative Position pop-up menu.

    3. You can insert your code block just before or just after the selection. You can also replace the selection with your code block, or you can wrap the code block around the selection.

    If you want to wrap the code block around a selection, the selection must consist of an opening and closing tag with nothing in between, as shown below:

    <CFIF Day=”Monday”></CFIF>

The opening tag piece of the code block is inserted before the selection’s opening tag and the closing tag piece of the code block is inserted after the selection’s closing tag.


Creating a dialog box for a custom server behavior

Server behaviors often require that the page designer supply a parameter value. This value must be inserted before the server behavior’s code is inserted into the page. To do this, you can create a dialog box that prompts the person implementing the server behavior for a parameter value.

You create the dialog box by defining the designer-supplied parameters in the code. After defining all the parameters, you can generate a dialog box for the server behavior.

Note: A parameter is added to your code block without your intervention if you specify that your code should be inserted relative to a specific tag chosen by the page designer (that is, you chose Relative to a Specific Tag in the Insert Code pop-up menu). The parameter adds a tag menu to the behavior’s dialog box to let the page designer choose a tag.

To create a parameter in the server behavior’s code:

Enter a parameter marker at the point in the code where you want to insert the supplied parameter value. The syntax for the parameter is:

@@parameterName@@

For example, if the server behavior contains the following code block:

<% Session(“lang_pref”) = Request.Form(“Form_Object_Name”); %>

To let the page designer supply the value of Form_Object_Name, enclose the string in parameter markers (@@):

<% Session(“lang_pref”) = Request.Form(“@@Form_Object_Name@@”); %>

You can also highlight the string, then click the Insert Parameter In Code Block button. Enter a parameter name and click OK. Dreamweaver replaces every instance of the highlighted string with the specified parameter name enclosed in parameter markers.

Dreamweaver uses the strings you enclose in parameter markers to label the controls in the dialog box it generates (see procedure below). In the above example, Dreamweaver creates a dialog box with the following label:

This is a picture of the feature being described.

Note: Parameter names in the server behavior code cannot have any spaces. Therefore, the dialog box labels cannot have any spaces. If you want to include spaces in the label, you can edit the generated HTML file.

To create a dialog box for a server behavior:
  1. In the Server Behavior Builder, click Next.

    2. A dialog box appears listing all of the designer-supplied parameters you defined in your code.
    This is a picture of the feature being described.

  2. If you want, change the display order of the dialog box controls by selecting a parameter and clicking the up and down arrows.
  3. If you want, change a parameter’s control by selecting the parameter and choosing another control in the Display As column.
  4. Click OK.

Dreamweaver generates a dialog box with a labelled control for each designer-supplied parameter you defined. To view the dialog box, click the plus (+) button in the Server Behaviors panel (Window > Server Behaviors), and select your server behavior from the pop-up menu.

To edit the dialog box of a server behavior you created:
  1. In the Server Behaviors panel (Window > Server Behaviors), click the plus (+) button and choose Edit Server Behaviors from the pop-up menu.
  2. Select your server behavior from the list, and click Open.

    3. The Server Behavior Builder appears with your server behavior.

  3. Click Next.

    4. A dialog box appears listing all the designer-supplied parameters you defined in your code.

  4. If you want, change the display order of the dialog box controls by selecting a parameter and clicking the up and down arrows.
  5. If you want, change a parameter’s control by selecting the parameter and choosing another control in the Display As column.
  6. Click OK.


Testing server behaviors

The Macromedia Exchange recommends you perform the following tests on each server behavior you create:

  • Apply the behavior from the Server Behaviors panel. If it has a dialog box, enter valid data in each field and click OK. Verify that no error occurs when the behavior is applied. Verify that the runtime code for the server behavior appears in the Code inspector.
  • Apply the server behavior again and enter invalid data in each field of the dialog box. Try leaving the field blank, using large or negative numbers, using invalid characters (such as /, ?, :, *, and so on), and using letters in numeric fields. You can write form validation routines to handle invalid data (validation routines involve hand-coding, which is beyond the scope of this book).

After successfully applying your server behavior to the page, verify the following:

  • Check the Server Behaviors panel to make sure the name of the server behavior appears in the list of behaviors added to the page.
  • If applicable, verify that server-side script icons show up on the page. The generic server-side script icons are gold shields. To see the icons, turn on Invisible Elements (View > Visual Aids > Invisible Elements).
  • In Code View, (View > Code) verify that no invalid code is generated.

In addition, if your server behavior inserts code in the document establishing a connection to a database, create a test database to test the code inserted in the document. Verify the connection by defining queries that produce different sets of data, and different sizes of data sets.

Finally, upload the page to the server and open it in a browser. View the page’s HTML source code and verify that no invalid HTML has been generated by the server-side scripts.


Editing and modifying server behavior code

You can edit any server behavior created with the Server Behavior Builder, including server behaviors you download from the Macromedia Exchange website, and other third-party developers.

If you apply a server behavior to a page and then edit the behavior in Dreamweaver, instances of the old behavior will no longer appear in the Server Behaviors panel. The Server Behaviors panel searches the page for code that matches the code of known server behaviors. If the code of a server behavior known to the panel changes, the panel will no longer recognize earlier versions of the behavior on that page.

If you want both the old and new versions of the behavior to appear in the panel, click the plus (+) button on the Server Behaviors panel, choose New Server Behavior, and create a copy of the old server behavior.


Editing server behaviors

To edit the code of a server behavior created with the Server Behavior Builder:
  1. In the Server Behaviors panel (Window > Server Behaviors), click the plus (+) button and choose Edit Server Behaviors from the pop-up menu.

    2. The Edit Server Behaviors dialog box appears, displaying all the behaviors for the current server technology.
    This is a picture of the feature being described.

  2. Select the server behavior and click Edit.

    3. The Server Behavior Builder dialog box appears.
    This is a picture of the feature being described.

  3. Select the appropriate code block and modify the code to be inserted in pages.
  4. If you want, change or add parameter markers to the code.

    5. For instructions, see Creating a dialog box for a custom server behavior.

  5. If you want, change where the code block is inserted in the page’s HTML source code by choosing another option in the Insert Code pop-up menu.

    6. For instructions, see Positioning code blocks.

  6. If the modified code does not contain any designer-supplied parameters, click OK.

    7. Dreamweaver regenerates the server behavior without a dialog box. The new server behavior appears in the plus (+) pop-up menu of the Server Behaviors panel.

  7. If the modified code does contain designer-supplied parameters, click Next.

    8. Dreamweaver asks you whether you want to create a new dialog box, overwriting the old one. Make your changes and click OK.

Dreamweaver saves all changes in the server behavior’s EDML file.


Completing the New Server Behavior dialog box

This dialog box lets you choose the document type you are developing the server behavior for, and to name the new server behavior.

To complete the New Server Behavior dialog box:
  1. Select a document type from the pop-up menu.
  2. Enter a name for the server behavior.
  3. If you want your new server behavior to be based on a server behavior that ships with Dreamweaver, select the Copy Existing Server Behavior option and choose the Dreamweaver server behavior in the Behavior To Copy pop-up menu.
  4. Click OK.

The New Server Behavior Builder appears.

Related topics

Creating server behaviors

Using the Server Behavior Builder

Reference


Completing the Server Behavior Builder dialog box

To complete the Server Behavior builder dialog box:
  1. Start a code block by clicking the plus (+) button, entering a name for the code block, and clicking OK.

    2. One convention is to name code blocks as follows:

    NameOfBehavior_NameOfBlock

Here is an example:

MoveToRecord_Init
  2. In the Code Block text area, enter the runtime code to be inserted in the page.

    3. The runtime code must be a single tag block or script block. If you need to insert multiple tags or script blocks, split them into separate code blocks. You can also copy and paste code from other pages.

    For more information, see the following sections:

    • Writing code blocks
    • Using parameters in server behaviors
    • Making code blocks conditional
    • Repeating code blocks
    • Coding guidelines
  3. Specify where to insert the code block in the page’s HTML source code by using the Insert Code pop-up menu.

    4. Code blocks are inserted relative to tags in the page or relative to a tag selected by the page designer. For more information, see Positioning code blocks.

  4. To specify more advanced settings, click Advanced.

    5. Once you specify the source code and insert location for each code block, the server behavior is completely defined. In most cases, you don’t need to specify any additional information.

    If you are an advanced user, you may want to modify additional parameters by clicking the Advanced button in the Server Behavior Builder. The builder expands to display several new options.
    This is a picture of the feature being described.

    Identifier specifies whether or not the code block should be treated as an identifier.

    By default, every code block is an identifier. If Dreamweaver finds an identifier code block anywhere in a document, it lists the behavior in the Server Behaviors panel. Use the Identifier check box to specify whether the code block should be treated as an identifier.

    At least one of the server behavior’s code blocks must be an identifier. A code block should not be an identifier if one of the following conditions applies: the same code block is used by some other server behavior; or the code block is so simple that it might occur naturally on the page.

    Server Behavior Title specifies the title of the behavior in the Server Behaviors panel.

    When the page designer clicks the plus (+) button on the Server Behaviors panel, the new server behavior’s title will appear in the pop-up menu. When a designer applies an instance of a server behavior to a document, the behavior appears in the list of applied behaviors in the Server Behaviors panel. Use the Server Behavior Title box to specify the contents of the plus (+) pop-up menu and the list of applied behaviors.

    The initial value in the box is the name you supplied in the New Server Behavior dialog box. As parameters are defined, the name is automatically updated so that the parameters appear inside parentheses after the server behavior name.

    Set Session Variable (@@Name@@, @@Value@@)

If the user accepts the default value, everything before the parentheses will appear in the plus (+) pop-up menu (for example, Set Session Variable). The name plus the parameters will appear in the list of applied behaviors—for example, Set Session Variable ("abcd", "5").

Code Block to Select specifies what code block is selected when the user selects the behavior in the Server Behaviors panel.

When you apply a server behavior, one of the code blocks within the behavior is designated the “code block to select.” If you apply the server behavior and then select the behavior in the Server Behaviors panel, in the Document window Dreamweaver automatically selects the designated block. By default, Dreamweaver selects the first code block that is not above the html tag. If all the code blocks are above the html tag, then Dreamweaver selects the first one. Advanced users can specify which code block is the selected one.
  5. Repeat steps 1 to 4 for each code block in your server behavior.
  6. If you have two or more code blocks with the same insert location, you can change their positions relative to each other by clicking the up and down arrows.
  7. If you did not define any designer-supplied parameters in your code, click OK.

    8. Dreamweaver creates the server behavior with no dialog box. The new server behavior appears in the plus (+) menu of the Server Behaviors panel.

  8. If you did define designer-supplied parameters in your code, Dreamweaver prompts you to configure a dialog box for the server behavior before creating it.

    9. For more information, see Creating a dialog box for a custom server behavior.

Related topics

Creating server behaviors

Using the Server Behavior Builder

Writing code blocks

Using parameters in server behaviors

Making code blocks conditional

Repeating code blocks

Coding guidelines

Positioning code blocks

Creating a dialog box for a custom server behavior


Completing the Insert Parameter in Code Block dialog box

The purpose of this dialog box is to replace every instance of a selected string in the code block with parameter markers.

Note: Select a string in the code block before using this dialog box.

Procedure
  1. Enter a parameter name.

    2. Example: Session

  2. Click OK.

Dreamweaver replaces every instance of the selected string in the code block with a parameter marker (for example, @@Session@@).

Related topics

Using parameters in server behaviors

Creating a dialog box for a custom server behavior


Completing the Create a New Code Block dialog box

The purpose of this dialog box is to name and create a code block in the Server Behavior Builder.

Procedure

Enter a name and click OK.

Related topic

Using the Server Behavior Builder


Completing the Generate Behavior Dialog Box dialog box

This dialog box generates a dialog box for a custom server behavior that requires input from the user. It is also used to edit such a dialog box.

When this dialog box opens, it lists all of the supplied parameters defined in the code. For more information, see Creating a dialog box for a custom server behavior.

Procedure
  1. To change the display order of the dialog box controls, select a parameter and clicking the up and down arrows.
  2. To change a parameter’s control, select the parameter and choosing another control in the Display As column.
  3. Click OK.

Dreamweaver generates a dialog box for your custom server behavior, or it updates an existing dialog box.

Related topics

Creating a dialog box for a custom server behavior

Using parameters in server behaviors

Using the Server Behavior Builder


Completing the Edit Server Behaviors dialog box

This dialog box let you select a server behavior to edit.

To edit a server behavior:
  1. Select a document type and server behavior.
  2. Click Edit.

    3. The Edit Server Behavior dialog box appears, letting you edit the server behavior. For more information, see Editing server behaviors.

Related topics

Editing and modifying server behavior code

Using the Server Behavior Builder

Positioning code blocks

Previous


Creating Interactive Forms

Forms allow you to interact with or gather information from visitors to a website. Forms collect information from the user and submit this information to the server for processing. Forms can contain various objects that enable user interaction. These form objects include text fields, list boxes, check boxes, and radio buttons. The form tag includes parameters that let you specify a path to the server-side script or application that will process the form data, and which HTTP method to use when transmitting data from the browser to the server.

When a visitor enters information into a website form and clicks the submit button, the information is sent to the server where a server-side script or application processes it. The server responds by sending requested information back to the user, or performing some action based on the forms contents. Typically, the information is processed by a Common Gateway Interface (GGI) script, ColdFusion page, JavaServer Page (JSP), or Active Server Page (ASP). Note that you can’t collect form data without using a server-side script or application to process the data.

The following figure illustrates the process of capturing information in a form, and processing the entered data using an application server.

Macromedia Dreamweaver MX lets you create a variety of form objects, including text fields, password fields, radio buttons, checkboxes, pop-up menus, and clickable images (such as a Submit button).

Dreamweaver also includes a Validate Form behavior to verify the information a visitor provides. For example, you can check that an e-mail address contains an “@” symbol, or that a required field contains an entry.

This chapter contains the following sections:

  • About form objects
  • Creating a form
  • Understanding form objects
  • Inserting checkboxes and radio buttons
  • Adding lists and menus
  • Adding form buttons
  • About form design
  • Using a client-side JavaScript function to process a form
  • Using behaviors with forms
  • Creating dynamic form objects
Next


About form objects

In Dreamweaver, form input types are called form objects. You can insert form objects by choosing Insert > Form Objects, or by accessing the form objects from the Forms panel of the Insert bar shown below.

This is a picture of the feature being described.

The Forms bar provides the following buttons:

Form inserts a form in the document. Dreamweaver inserts opening and closing form tags in the HTML source code. Any additional form objects, such as text fields, buttons, and so on must be inserted between the form tags for the data to be processed correctly by all browsers.

Text Field inserts a text field in a form. Text fields accept any type of alphanumeric entries. The entered text can be displayed as a single line, as multiple lines, or as bullets or asterisks (for password protection).

Hidden Field inserts a field in the document in which user data can be stored. Hidden fields let you store information entered by a user, such as a name, e-mail address, or purchase preference, and then use that data when the user next visits the site.

Check Box inserts a check box in a form. Check boxes allow multiple responses in a single group of options, a user can select as many options as apply.

Radio Button inserts a radio button in a form. Radio buttons represent exclusive choices. Selecting a button within a group deselects all others in the group. For example a user can select Yes or No.

Radio Group inserts a collection of radio buttons which share the same name.

List/Menus allows you to create user choices in a list. The List option displays the option values in a scrolling list and allows users to select multiple options in the list. The Menu option displays the option values in a pop-up menu and allows users to select only a single choice.

Jump Menu inserts a navigational list or pop-up menu. Jump menus let you insert a menu in which each option links to a document or file. See Creating jump menus.

Image Field allows you to insert an image in a form. Image fields can be used in place of Submit buttons to make graphical buttons.

File Field inserts a blank text field and a Browse button in a document. File fields let users browse to files on their hard disks and upload the files as form data.

Button inserts a text button within a form. Buttons perform tasks when clicked, such as submitting or resetting forms. You can add a custom name or label to a button, or use one of the predefined “Submit” or “Reset” labels.


Creating a form

Dreamweaver’s Insert bar lets you create a form and add objects such as text fields, buttons, list boxes, and radio buttons to the form.

To add a form to a document:
  1. Place the insertion point where you want the form to appear.
  2. Choose Insert > Form or select the Forms category on the Insert bar and click the Form icon.

    3. Dreamweaver inserts a form. With a page in Design view, forms are indicated by a dotted red outline. If you don’t see this outline, check that View > Visual Aids > Invisible Elements is selected.
    This is a picture of the feature being described.

  3. In the Document window, click the form outline to select the form, or select the <form> tag in the tag selector, located in the bottom left corner of the Document window.
  4. In the Property inspector’s Form Name field, type a unique name to identify the form.

    5. Naming a form makes it possible to reference or control the form with a scripting language, such as JavaScript or VBScript. If you do not name the form, Dreamweaver generates a name using the syntax formn, and increments the value of n for each form added to the page.
    This is a picture of the feature being described.

  5. In the Property inspector’s Action field, specify the path to the dynamic page or script that will process the form. You can either type the complete path into the Action field, or click the folder icon to navigate to the appropriate folder containing the script or application page.

    6. If you’re specifying a path to a dynamic page, the path to the URL will look similar to this example:

    http://www.mysite.com/application_name/process.cfm
  6. In the Method pop-up menu, choose the method that will transmit the form data to the server. The form Methods are:

    POST
    Embeds the form data in the HTTP request.
    GET
    Appends the value to the URL requesting the page.
    Default
    Uses the browser’s default setting to send the form data to the server. Typically the default is the GET method.

    7. Note that the method you choose may be dictated by the web or application server you are using. Contact your organization’s server administrator for more information.

    Do not use the GET method to send long forms. URLs are limited to 8,192 characters. If the amount of data sent is too large, data will be truncated, leading to unexpected or failed processing results. Also, do not use GET method when sending confidential user names and password, credit card numbers, or other confidential information. GET is not a secure method for passing information.

  7. The Enctype pop-up menu lets you specify the MIME encoding type of the data submitted to the server for processing.

    8. The default setting of application/x-www-form-urlencode is typically used in conjunction with the POST method. If you are creating a file-upload field, specify the multipart/form-data MIME type.

  8. The Target pop-up menu specifies the window in which to display the data returned by the invoked program.

    9. If the named window is not already open, a new window with that name opens. The target values are:

    _blank opens the destination document in a new unnamed window.

    _paren t opens the destination document in the parent window of the one displaying the current document.

    _self opens the destination document in the same window as the one in which the form was submitted.

    _top opens the destination document in the body of the current window. This value can be used to ensure that the destination document takes over the full window even if the original document was displayed in a frame.


Understanding form objects

Form objects are the mechanisms that allow users to input data. Before you create a form object, you must first insert a form into the page.

Tip: If you attempt to insert a form object without first creating the form, Dreamweaver will display the message “Add form tags?” Choose Yes to let Dreamweaver create form tags for the object.

The form objects you can add to a form are:

Text Fields accept any type of alphanumeric text entry. The text can be displayed as a single line, multiple lines, and as a series of dots or asterisks for private information (e.g. for password protection).

Hidden Fields store information entered by a user, such as a name, e-mail address, or viewing preference, and then use that data when the user next visits the site.

Buttons perform actions when clicked. Typically these actions include submitting or resetting a form. You can add a custom name or label for a button, or use one of the predefined “Submit” or “Reset” labels.

Check Boxes allow multiple responses within a single group of options. A user can select as many options as apply.

Radio Buttons represent exclusive choices. Selecting a button within a radio button group deselects all others in the group (a group consists of two or more buttons that share the same name). For example a user subscription form might require that you select “Male” or “Female.”

List/Menus display option values within a scrolling list that allows users to select multiple options. The Menu option displays the option values in a pop-up menu that allows users to select only a single item.

Jump Menus are navigational lists or pop-up menus, that let you insert a menu in which each option links to a document or file. See Creating jump menus.

File Fields let users browse to a file on their computer and upload the file as form data.

Image Fields let you insert an image in a form. Image fields can be used to make graphical buttons (e.g. Submit or Reset button).


Using form fields

Form fields let users enter text into a form. There are three types of form fields:

  • Text fields (in which a user enters a response).
  • File fields (in which a user enters the path of a file to upload to your server.
  • Hidden fields (which store information a user entered in another field).

When you add a field to a form, you can specify the field’s length, number of lines the field contains, maximum number of characters the user can enter, and whether the field is a password field.


Creating text fields

A text field is a form object in which users enter a response. There are three types of text fields:

Single-line text fields typically provide a single word or short phrase response, such as a name, or an address.

Multiple-line text fields provide the visitor with a larger area in which to enter a response. You can specify the maximum number of lines the visitor can enter, and the character width of the object. If text is entered that exceeds these settings, the field will scroll, following the setting specified in the wrap attribute.

Password fields are a special type of text field. When a user types in a password field, the entered text is replaced by asterisks or bullets to obscure the text, and protect the information from being viewed.

Note that passwords and other information sent to a server using a password field are not encrypted. The transferred data can be intercepted and read as alphanumeric text. For this reason, you should always provide encryption for data you want to keep secure.

This is a picture of the feature being described.

To create a single-line or a password text field:
  1. Place the insertion point inside the form outline.
  2. Choose Insert > Form Objects > Text Field.

    3. A text field appears in the document, and the TextField property inspector is displayed.
    This is a picture of the feature being described.

  3. In the Property inspector’s TextField field, enter a unique name for the text field.

    4. The name you choose must uniquely identify the text field within the form. Form object names cannot contain spaces or special characters. You may use any combination of alphanumeric characters and an underscore (_). Note that the label you assign to the TextField is the variable name that will store the value (the entered data) of the field. This is the value sent to the server for processing.

  4. In the Char Width field, do one of the following:
    • Accept the default setting which sets the text field’s length to 20 characters.
    • Specify the maximum length of the text field. The maximum length of a text field is the maximum number of characters the field will display at a time. For example, if the Char Width is set to 20 (the default value) and a user enters 100 characters, only 20 of those characters will be viewable in the text field. Note that even though you cannot view the characters in the field, they are recognized by the field object and will be sent to the server for processing.
  5. In the Max Chars field enter a value for the maximum number of characters the user can enter in the text field. This value defines the text field’s size limits, and is used to validate the from.

    6. If you leave the Max Chars field blank, users can enter any amount of text. If the text exceeds the character width of the field the text will scroll. If a user exceeds the maximum number of characters, the form produces an alert sound.

  6. Select either Single-line or Password to specify the type of text field you want to create.

    7. You can also choose to create a multiple-line text field. For instructions on creating multiple-line text fields, see Creating multiple-line text fields.

  7. If you want to display a default text value in the field, enter the default text in the Property inspector’s Init Value field.

    8. This text will be displayed in the text field when the form first loads in the user’s browser. For example, you might indicate that the user enter information in the field by including a note or example value.

  8. To label the field within the page, place the insertion point next to the object and enter any text you want.

You can apply text formatting to form object labels. For more information, see Setting and changing fonts and styles. The example below shows a single-line text field with the label “Enter your user name:”. Note that the TextField Property inspector specifies that the field display up to 30 characters in the Char Width field, but that it can hold a maximum of 50 characters.

This is a picture of the feature being described.


Creating multiple-line text fields

Multiple-line text fields let you enter multiple lines of text. When you create a multiple-line text field, you can specify the number of lines of text the user can enter.

To create a multiple-line text field:
  1. Place the insertion point inside the form outline.
  2. Choose Insert > Form Objects > Text Field.

    3. A text field is inserted into the document, and the TextField property inspector is displayed.
    This is a picture of the feature being described.

  3. In the Property inspector’s TextField field, enter a unique name for the text field.

    4. The name you choose must uniquely identify the text field within the form. Form object names cannot contain spaces or special characters. You may use any combination of alphanumeric characters and an underscore (_). Note that the label you assign to the TextField is the variable name that will store the value (the entered data) of the field. This is the value sent to the server fro processing.

  4. In the Char Width field, do one of the following:
    • Accept the default setting which sets the text field’s length to 20 characters.
    • Specify the maximum length of the text field. The maximum length of a text field is the maximum number of characters the field will display at a time. For example, if the Char Width is set to 20 (the default value) and a user enters 100 characters, only 20 of those characters will be viewable in the text field. Note that even though you cannot view the characters in the field, they are recognized by the field object and will be sent to the server for processing.
  5. Select Multi line to specify the type of text field you want to create.
  6. In the Num Lines field specify the maximum number of lines to display.

    7. The default setting sets a two-line text field.

  7. From the Wrap pop-up menu, select a setting to set how the user’s input will be displayed when the user enters more information than can be displayed within the defined text area. The wrap options are:

    8. Off or Default prevents text from wrapping to the next line. When the user’s input exceeds the right boundary of the text area, text will scroll toward the left. User’s must press Return to move the insertion point to the next line in the text area.

    Virtual sets word wrap in the text area. When the user’s input exceeds the right boundary of the text area, text wraps to the next line. When data is submitted for processing, word wrap isn’t applied to the data. It is submitted as one string of data.

Physical to set word wrap in the text area, as well as to the data when it is submitted for processing.

  1. If you want to display a default text value in the field, enter the default text in the Property inspector’s Init Value field.

    2. This text will be displayed in the text field when the form first loads in the user’s browser. For example, you might indicate that the user enter information in the field by including a note or example value.

  2. To label the field within the page, place the insertion point next to the object and enter any text you want.

    3. You can apply text formatting to form object labels. For more information, see Setting and changing fonts and styles.


Creating a file upload field

You can create a file upload field that lets users select a file on their computer—such as a word processing document or graphics file—and upload the file to the server. A file field looks like other text fields except it also contains a Browse button. The user either manually enters the path to the file they want to upload, or uses the Browse button to locate and select the file.

File fields require that you use the POST method to transmit files from the browser to the server. The file is posted to the address you specify in the form’s Action field.

Note: Contact your server’s administrator to confirm that anonymous file uploads are allowed before using the file field.

To create a file field in a form:
  1. Insert a form in the page (Insert > Form).
  2. Select the form. The form Property inspector is displayed.
  3. Set the form Method to POST.
  4. From the Enctype pop-up menu, select multipart/form-data.
    This is a picture of the feature being described.
  5. Place the insertion point inside the form outline, then choose Insert > Form Objects > File Field or click the Insert File Field icon in the Form tab of the Insert bar.

    6. A file field is inserted within the form.

  6. In the Property inspector’s FileField Name field, enter a name for the file field object.
  7. In the Char Width field, specify the maximum number of characters you want the field to display.
  8. In the Max Char field, specify the maximum number of characters the field will hold.

    9. If the user browses to locate the file, the filename and path can exceed the specified Max Chars value. However, if the user attempts to type in the filename and path, the file field will only allow the number of characters specified by the Max Chars value.

The example shown below depicts a simple file field. Note that the Property inspector’s Max Chars field has been set to 75, while the Char Width is set to 30. This means that only 30 characters of the file path will be viewable to the user. Carefully consider the types of files the user will upload, and if they need to be able to view the entire file path within the file field’s text box.

This is a picture of the feature being described.


Creating a hidden field

Hidden fields are text fields that you use to collect information about users. Information stored in the field is sent back to the server when the form is submitted.

Dreamweaver creates a marker in the document when you insert a hidden field. If you insert a hidden field and don’t see a marker, choose View > Visual Aids > Invisible Elements to see the marker.

To create a hidden field:
  1. Place the insertion point inside the form outline.
  2. Choose Insert > Form Objects > Hidden Field.

    3. A marker appears in the document.

  3. In the Property inspector’s HiddenField field, type a unique name for the field.
  4. In the Value field, type the value you want to assign the field.


Inserting checkboxes and radio buttons

Check box and radio button form objects set up predefined selection objects. The user clicks a checkbox or radio button to make a choice.


Understanding checkboxes and radio buttons

Check boxes toggle each individual response “off” and “on.” Thus, a user can select more than one option from a checkbox group. The example below illustrates this by showing three checkbox items selected: Surfing, Mountain Biking, and Rafting.

This is a picture of the feature being described.

Radio buttons work as a group and provide mutually exclusive selection values. A user can select only one option within a radio button group. In the example below, “Rafting” is the currently selected option. If the user were to click “Surfing,” the “Rafting” button would be automatically deselected.

This is a picture of the feature being described.


Inserting a checkbox

Check boxes let users select more than one option from a set of options.

To insert a checkbox:
  1. Place the insertion point inside the form outline, then do one of the following:
    • Choose Insert > Form Objects > Check Box.
    • In the Insert bar’s Forms category, click the Insert Checkbox icon.
  2. In the Property inspector’s CheckBox Name field, type a unique, descriptive name for the checkbox.
  3. In the Checked Value field, type a value for the checkbox.

    4. For example, in a survey you might set a value of 4 for strongly agree and a value of 1 for strongly disagree.

  4. For Initial State, click Checked if you want an option to appear selected when the form first loads in the browser.


Inserting a radio button

Use radio buttons when the user must select only one choice from a set of options. Radio buttons are typically used in groups. All radio buttons in a group must have the same name and must contain different field values.

To insert radio buttons as a group:
  1. Place the insertion point inside the form outline:
  2. Insert the Radio Group form object by either:
    • Clicking the Forms tab and click the Radio Group icon.
    • Choose Insert > Form Objects > Radio Group.

      • The Radio Group dialog box appears.
      This is a picture of the feature being described.

  3. Complete the Radio Group dialog box and click OK.

    4. For instructions, see Setting the Radio Group dialog box options.

Dreamweaver inserts the radio button group within the HTML form. If you haven’t inserted a form on your page yet, Dreamweaver inserts one for you. If you want, you can change the layout of the group. You can also edit the radio buttons using the Property inspector or directly in Code view.

To insert radio buttons one at a time:
  1. Place the insertion point inside the form outline.
  2. Insert a radio button form object by choosing Insert > Form Objects > Radio button.
  3. In the Property inspector’s RadioButton Name field, type a descriptive name for the group of choices.

    4. If you are creating multiple radio button interactions in a form, be certain that each set of radio buttons has a unique name. If however you are inserting individual radio buttons to create a group, you must label each

  4. In the Checked Value field, enter the value you want sent to the server-side script or application when a user selects this radio button. For example, you might type skiing in the CheckedValue field to indicate a user chose skiing.
  5. For Initial State, click Checked if you want an option to appear selected when the form first loads in the browser.


Adding lists and menus

Lists and menus let you present users with many choices within a limited space. Lists provide a scroll bar that lets users navigate through many items, and make multiple selections. Drop-down menus display a single item, which is also the active selection. Users can choose only one item from a menu.


Creating a scrolling list

Scrolling lists allow you to display multiple options in a confined space. The user can scroll through the list, and select multiple items.

This is a picture of the feature being described.

To create a scrolling list:
  1. Place the insertion point inside the form outline.
  2. Choose Insert > Form Objects > List/Menu and select the resulting List/Menu element if necessary.

    3. The List/Menu form object will appear within the form outline, and the List/Menu Property inspector will display. In the illustration below, the List/Menu Property inspector displays the Dynamic button. This button is used to create dynamic list/menu form objects, and only displays if a dynamic document type has been previously selected.
    This is a picture of the feature being described.

  3. In the Property inspector’s List/Menu field, enter a unique name for the list.
  4. Under Type, select List.
  5. In the Height field, enter a number to specify the number of lines (or items) the list will display.

    6. Scroll bars appear when the number you specify is less than the number of options the list contains.

  6. If you want to allow users to select more than one item in the list, select Allow Multiple (next to Selections).
  7. Click List Values to add the option choices.

    8. The List Values dialog box appears.
    This is a picture of the feature being described.

  8. With the insertion point in the Item Label field, enter the text you want to appear in the list.
  9. In the Value field, enter data you want sent to the server when a user selects the item.
  10. To add another item to the options list, click the plus (+) button, then repeat steps 7 and 8.
  11. When you finish adding items to the list, click OK to close the List Values dialog box.

    12. The Property inspector appears. The option choices are visible in the Initially Selected field.

  12. To have one of the items in the list be selected by default, select that item in the Initially Selected field of the Property inspector.
    This is a picture of the feature being described.


Creating pop-up menus

A pop-up menu lets a visitor select a single item from a list of many. Pop-up menus are useful when you have a limited amount of space, but need to display many items. Note that only one option choice is visible when the menu form is displayed in a browser. To display the other choices, the user clicks the down arrow to display the entire list.

This is a picture of the feature being described.

Note: The pop-up menu form element is not the same as a graphical pop-up menu. For information on creating, editing, and showing and hiding a graphical pop-up menu, see Show Pop-Up Menu.

To create a pop-up menu:
  1. Place the insertion point inside the form outline.
  2. Choose Insert > Form Objects > List/Menu and select the resulting List/Menu element if necessary.

    3. The List/Menu form object will appear within the form outline, and the List/Menu Property inspector will display.
    This is a picture of the feature being described.

  3. In the Property inspector’s List/Menu field, enter a unique name for the menu.
  4. Under Type, select Menu.
  5. Click List Values to add the option choices.

    6. The List Values dialog box appears.
    This is a picture of the feature being described.

  6. With the insertion point in the Item Label field, enter the text you want to appear in the menu.
  7. In the Value field, enter data you want sent to the server when a user selects the item.
  8. To add another item to the options list, click the plus (+) button, then repeat steps 6 and 7.
  9. When you finish adding items to the menu, click OK to close the List Values dialog box.
  10. To have one of the items in the list be selected by default, select that item in the Initially Selected field of the Property inspector.
    This is a picture of the feature being described.


Adding form buttons

Form buttons control form operations. Use a form button to submit data entered into a form to the server, or to reset the form. You can also assign other processing tasks that you’ve defined in a script to a button. For example, the form button might calculate the total cost of items selected based on assigned values.


Inserting standard form buttons

Standard form buttons are the browser’s default button style, which contain text you want to display. Standard form buttons are typically labeled Submit, Reset, or Send.

To create a text button:
  1. Place the insertion point inside the form outline.
  2. Choose Insert > Form Objects > Button, or click the Button icon in the Form panel.

    3. Dreamweaver inserts the Button form object into the from, and displays the Button Property inspector.
    This is a picture of the feature being described.

  3. Enter a name for the button in the Property inspector’s Button Name field.

    4. Note that there are two reserved names: “Submit,” which submits the form data for processing, and “Reset,” which resets all the form fields to their original values.

  4. Enter the text you want to appear on the button in the Property inspector’s Label field.
  5. Select an action from the Action section. The available actions are:

    6. Submit the form for processing when the button is clicked.

    Reset the form when the button is clicked.

    None to activate an action based on the processing script when the button is clicked. To specify an action, select the Form tag from the Document window’s status bar to select the form and display the Form Property inspector. In the Action pop-up menu, select a script or page to process the form.


Creating a graphical Submit button

You can use images you specify as button icons. Using an image to perform tasks other than submitting data requires attaching a behavior to the form object. You can assign a behavior to the button using the Dreamweaver Behaviors panel, or you can use client-side JavaScript to perform an action

To learn how to attach a behavior to an object, see Applying a behavior.

To create a graphical Submit button:
  1. In the document, place the insertion point inside the form outline.
  2. Choose Insert > Form Objects > Image Field.
  3. In the Property inspector for the Image field, change the text in the ImageField
    field to Submit.
  4. Select the image you want to use as a button by clicking the SRC field’s folder icon, and browsing to the image file.
  5. In the Alt field, enter any text you want to appear in place of the image for text-only browsers or for browsers set to download images manually.


About form design

You can use line breaks, paragraph breaks, preformatted text, or tables to format your forms. You cannot insert a form in another form (that is, you cannot overlap tags), but you can include more than one form in a page.

When designing forms, remember to label the form fields with descriptive text to let users know what they’re responding to—for example, “Type your name” to request name information.


Inserting tables in forms

You can design more attractive forms by inserting a table in a form. Use tables to provide structure for form objects and field labels. Tables make it easier to line up choices both vertically and horizontally. When using tables in forms make sure all the table tags are included between the form tags.

This is a picture of the feature being described.


Using a client-side JavaScript function to process a form

Forms are processed by the script or application specified in the action attribute of the form tag. To see what action is associated with a form, select it and look in the Property inspector. The Action field will point to the associated action.

The simplest forms use JavaScript or VBScript to perform form processing on the client side (as opposed to sending the form data to the server for processing). For example, you might have a small form at the bottom of a page that contains only two radio buttons labeled Yes and No, plus a Submit button. The form action might be a JavaScript function defined in the head section of the document that displays one alert if the user selects Yes and another alert if the user selects No:

function processForm(){
   if (document.forms[0].elements[0].checked){
      alert('Yes');
   }else{
      alert('No');
   }
}
To use a client-side JavaScript function as the form action:
  1. Select a Submit button in a form.
  2. Attach the Call JavaScript behavior to the button (see Call JavaScript).
  3. In the JavaScript text box that appears while attaching the behavior, enter processForm().
  4. Add a processForm() JavaScript function (like the one shown above) to the head section of the document.

You can handle many form-processing tasks using client-side scripting, however, you can’t save the data entered by the user or send it to someone else. To save the data or transmit it to another application for processing, you need to use a server-side script or application. Common Gateway Interface (CGI) scripts are the most popular form of server-side scripting mechanisms to process form data. There are several sites on the web that offer free CGI scripts that you can use. The Internet Service Provider (ISP) hosting your site may provide CGI scripts that perform many common tasks such as collecting e-mail addresses, or allowing visitors to send you comments through a web form.


Using behaviors with forms

You can attach behaviors to forms and form objects by using any of the behaviors that appear in the Behaviors panel when the form or form object is selected. The Validate Form and Set Text of Text Field behaviors are available only if a text field has been inserted into the document. When attaching the Validate Form behavior to a form object, you must specify which text field is to be validated. For example, if you attach Validate Form to the Submit button, you might specify a text field created for “Name” to check that the user entered text in the Name field.

When applying behaviors, you need to make sure that every form object in your document (and every other object) has a unique name. If you use the same name for two different objects, behaviors may not work properly—even if the objects are in different forms.

The two form-specific behaviors are explained below. For information on other behaviors, see Using JavaScript Behaviors.

Validate Form checks the contents of specified text fields to ensure that the user has entered the correct type of data. (See Validate Form.)

Set Text of Text Field replaces the content of a specified text field with the content you specify. (See Set Text of Text Field.)


Creating dynamic form objects

You can create a dynamic HTML form to both display records from a database, and to collect information from users. For example, a form could display suppliers’ contact information retrieved from a database table.

Dynamic forms can simplify site maintenance. For example, many sites use HTML form menus to let users jump to other areas of the site. Typically, this kind of menu appears in several places on the site. If the menu is dynamic, you can add a new menu item once—to the database table—to update all the menus on the site.

List/menus are common dynamic form objects. You can also create and use dynamic radio buttons, checkboxes, text fields, and image fields.

This section describes how to make form objects dynamic.

Note: Dreamweaver MX does not provide the following dynamic form objects for ASP.NET: Dynamic Text Field, Dynamic CheckBox, Dynamic List/Menu, or Dynamic Radio Group.


Creating a dynamic list/menu

You can dynamically populate a list or menu form object with entries from a database.

To add a dynamic list/menu:
  1. Click inside the HTML form on your page.
  2. Choose Insert > Form Objects > List/Menu

    3. Dreamweaver inserts a List/Menu form object into the page.

  3. Select the List/Menu form object.

    4. The List/Menu property inspector displays.
    This is a picture of the feature being described.

  4. In the The List/Menu property inspector, click the Dynamic button to display the Dynamic List/Menu dialog box. Complete the dialog box and click OK.
    This is a picture of the feature being described.

    5. For instructions on completing the Dynamic List/Menu dialog box fields, see Setting the Dynamic List/Menu dialog box options.

  5. Click OK.

    6. Dreamweaver inserts the dynamic list/menu into the HTML form. You can edit the menu using the Server Behaviors panel or the Property inspector, or you can edit the menu’s source code directly.


Making an existing list/menu dynamic

You can make an existing list/menu form dynamic.

To make an existing list/menu dynamic:
  1. Select the list/menu form object you want to make dynamic.
  2. In property inspector click the Dynamic button.

    3. The Dynamic List/Menu dialog box appears.

  3. Complete the dialog box and click OK.

    4. For instructions on completing the Dynamic List/Menu dialog box fields, see Setting the Dynamic List/Menu dialog box options.


Making text and image fields dynamic

You can make text and image fields on a form dynamic.

To make text fields dynamic:
  1. Select a text field in the HTML form on your page.
  2. Choose Window > Server Behaviors to display the Server Behaviors panel.
  3. Click the plus (+) button and select Dynamic Elements > Dynamic Text Field from the pop-up menu.

    4. The Dynamic Text Field dialog box appears.

  4. Complete the dialog box and click OK.

    5. For instructions, see Setting the Dynamic Text Field dialog box options.

The text field will display dynamic content when the form is viewed in a browser.

To make image fields dynamic:
  1. Place the insertion point where you want the image field to appear on the page, then select Insert > Form Objects > Image Field.

    2. The Select Image Source dialog box appears.

  2. Click the Data Sources option (Windows) or the Data Source button (Macintosh).

    3. A list of data sources appears.

  3. Select a data source from the list.

    4. The data source should be a recordset containing the paths to your image files. Depending on the file structure of your site, the paths can be absolute, document relative, or root relative.

    Note: Dreamweaver does not currently support binary images stored in a database.

    If no recordsets appear in the list, or if the available recordsets don’t meet your needs, define a new recordset. For instructions, see Defining a recordset.

  4. Click OK.

The image field will display a dynamically selected image when the form is viewed in a browser.


Making checkboxes dynamic

Use a checkbox in a form to let users choose multiple items from the list of available items. To create a dynamic checkbox you must have specified a dynamic document type, and associated a recordset or other source of dynamic content with the page. The data source must be in a Boolean form, such as Yes/No or true/false.

To dynamically pre-select a checkbox:
  1. Select a checkbox form object.
  2. In the Property inspector, click the Dynamic button.

    3. The Dynamic Check Box dialog box appears.
    This is a picture of the feature being described.

  3. Complete the dialog box and click OK.

    4. For instructions, see “Creating URL parameters using HTML links” on page 861Completing the Dynamic Check Box dialog box.

The checkbox will appear selected or un-selected, depending on the data, when the form is viewed in a browser.


Making radio buttons dynamic

You can dynamically pre-select a radio button based on a value in a recordset. To create a dynamic checkbox you must have specified a dynamic document type, and associated a recordset or other source of dynamic content with the page.

To dynamically pre-select a radio button:
  1. Make sure the page has at least one group of radio buttons.

    2. You can create a radio button group by selecting the Radio Group icon on the Forms tab of the Insert bar. For more information, see Inserting a radio button.

  2. In the Server Behaviors Panel, click the plus (+) button and select Dynamic Form Elements > Dynamic Radio Group.

    3. The Dynamic Radio Group dialog box appears. The dialog box that displays may appear different from the example shown below depending on the document type you are working with.
    This is a picture of the feature being described.

  3. Complete the dialog box and click OK.

    4. For instructions on completing the Dynamic Radio Buttons dialog box, see:

    Setting the Dynamic Radio Group dialog box options.

    Setting the Dynamic Radio Group dialog box options: ColdFusion


Setting the Radio Group dialog box options

The Radio Group dialog box creates a group of radio buttons for use in an HTML form.

Procedure
  1. In the Name text box, enter a name for the radio button group.

    2. If you want the radio buttons to pass parameters back to the server, the parameters will be associated with the name. For example, if you name the group myGroup and set the form method to GET (that is, you want the form to pass URL parameters instead of form parameters when the user clicks the submit button), then the expression myGroup=”CheckedValue” will be passed in the URL to the server.

  2. Click the plus (+) button to add a radio button to the group.

    3. If you want, enter a label and checked value for the new button.

  3. Click the up or down arrows to reorder the buttons.
  4. If you want a particular radio button to be selected when the page opens in a browser, enter a value equal to the radio button’s value in the Select Value Equal To box.

    5. You can enter a static value or you can specify a dynamic one by clicking the lightning bolt icon beside the box and selecting a recordset containing possible checked values. In either case, the value you specify should match the checked value of one of the radio buttons in the group. To view the checked values of the radio buttons, select each radio button and open its Property inspector (Window > Properties).

  5. Select how you want Dreamweaver to lay out the buttons.

    6. Dreamweaver can lay out the buttons using line breaks or a table. If you select the table option, Dreamweaver creates a single-column table and places the radio buttons on the left and the labels on the right.

  6. Click OK.

Dreamweaver inserts the radio button group in the HTML form. If you haven’t inserted a form on your page yet, Dreamweaver inserts one for you. You can use any layout or formatting tool to fine-tune the layout of the group.

Related topics

Inserting a radio button

Making radio buttons dynamic

Defining a recordset

Understanding form parameters

Understanding URL parameters

Creating URL parameters using HTML links


Setting the Dynamic Radio Group dialog box options: ColdFusion

The Dynamic Radio Group dialog box lets you pre-select the value of a radio button within a group based on the value of a recordset or other source of dynamic content.

Procedure
  1. Select a radio group and form from the Radio Group pop-up menu.
  2. Click the lightning bolt icon next to Select Value Equal To field.

    3. The Dynamic Data dialog box displays.

  3. Select a recordset or other dynamic content source from the list of available dynamic content sources. you can also format the data item you select using the format pop-up menu, and specific a label to use for the data’s placeholder within the page.
  4. Click OK to close the Dynamic Data dialog box.
  5. Click OK to close the Dynamic Radio Group dialog box, and insert the dynamic content placeholder in the Radio Group.

Related topics

Making radio buttons dynamic

Defining a recordset

Understanding form parameters

Understanding URL parameters


Setting the Dynamic Radio Group dialog box options

The Dynamic Radio Buttons dialog box lets you dynamically pre-select a radio button within a group of buttons when the page is displayed, or when a record is displayed within the HTML form.

Procedure
  1. In the Radio Button Group pop-up menu, select a form and radio button group in the page.

    2. The Radio Button Value field will display the values of all radio buttons within the group.

  2. Select a value that you want to dynamically pre-select from the list of value shown. this value will be displayed in the Value field.
  3. Click the lightning bolt icon beside the Select Value Equal To box and select a recordset containing possible checked values for the radio buttons in the group.

    4. The recordset you select should contain values matching the radio buttons’ checked values. To view the checked values of the radio buttons, select each radio button and open its Property inspector (Window > Properties).

  4. Click OK.

Related topics

Making radio buttons dynamic

Inserting a radio button

Defining a recordset

Understanding form parameters

Understanding URL parameters

Creating URL parameters using HTML links


Setting the Dynamic Text Field dialog box options

The Dynamic Text Field dialog box creates dynamic text fields.

Procedure
  1. Choose the text field to make dynamic from the TextField pop-up menu.
  2. Click the lightning bolt icon beside the Set Value To box and select a data source from the list of data sources.

    3. The data source should contain textual information. If no data sources appear in the list, or if the available data sources don’t meet your needs, click the plus (+) button to define a new data source. For instructions, see Understanding dynamic content sources.

  3. Click OK.
Related topics

Making text and image fields dynamic

“Creating URL parameters using HTML links” on page 861Setting the Text Field property inspector

Defining a recordset

Understanding form parameters

Understanding URL parameters


Creating URL parameters using HTML linksCompleting the Dynamic Check Box dialog box

This dialog box lets you pre-select a checkboxes based on a Boolean value.

Procedure
  1. If you want the checkbox to be selected when a field in a record equals a certain value, do the following:
    • Click the lightning bolt icon beside the Check If box and select the field from the list of data sources.

      • The data source must contain Boolean data such as Yes and No, or true and false. If no data sources appear in the list, or if the available data sources don’t meet your needs, click the plus (+) button to define a new data source. For instructions, see Understanding dynamic content sources.

    • In the Equal To box, enter the value the field must have for the checkbox to appear selected.

      • For example, if you want the checkbox to appear selected when a specific field in a record equals Yes, enter Yes in the Equal To box.

      Note: This value will also be returned to the server if the user clicks the form’s Submit button.

  2. Click OK.

Related topics

Making checkboxes dynamic

Inserting a checkbox


Setting the Dynamic List/Menu dialog box options

The Dynamic List/Menu dialog box lets you a populate a list/menu form object with content from a database or other content source.

Procedure
  1. In the Menu pop-up menu select the list/menu form object you want to make dynamic.
  2. In the options From Recordset pop-up menu select the recordset you want to use as a
    content source. This field also allows you to later edit both static and dynamic list/menu items.
  3. The Static Options field lets you enter a default item in the list or menu. This portion of the dialog box also allows you to edit static entries in a list/menu form object after adding dynamic content.

    4. Use the plus (+) and minus (–) buttons to add and remove items in the list. Items are in the same order as in the Initial List Values dialog box. The first item on the list is the selected item when the page is loaded in a browser. Use the up and down arrow buttons to rearrange items in the list.

  4. In the Values pop-up menu, select the field containing the values of the menu items.
  5. In the Labels pop-up menu, select the field containing the labels for the menu items.
  6. If you want a particular menu item to be selected when the page opens in a browser or when a record is displayed in the form, enter a value equal to the menu item’s value in the Select Value Equal To box.

    7. You can enter a static value or you can specify a dynamic one by clicking the lightning bolt icon beside the box and selecting a dynamic value from the list of data sources. In either case, the value you specify should match one of the menu item values.

  7. Click OK.

Related topics

Adding lists and menus

Creating a dynamic list/menu

Making an existing list/menu dynamic

Defining a recordset

Understanding form parameters

Understanding URL parameters


Creating URL parameters using HTML linksSetting the Text Field property inspector

To display text field properties in the Property inspector, select a text field in a form. See also Creating text fields.

Text Field assigns a name to the field. Every text field must have a unique name.

Char Width sets the maximum number of characters that can be displayed in the field. This number can be less than Max Chars, which specifies the maximum number of characters that can be entered in the field.

Max Chars/Num Lines sets the maximum number of characters that can be entered in the field for single-line text fields and sets the height of the field for multiple-line text fields. Use Max Chars to limit zip codes to 5 digits, limit passwords to 10 characters, and so on.

Type designates the field as a single-line, multiple-line, or password field.

  • Choosing Single-line results in an input tag with its type attribute set to text. The Char Width setting maps to the size attribute, and the Max Chars setting maps to the maxlength attribute.
  • Choosing Password results in an input tag with its type attribute set to password. The Char Width and Max Chars settings map to the same attributes as in single-line text fields. When a user types in a password text field, the input appears as bullets or asterisks to protect it from observation by others.
  • Choosing Multi-line results in a textarea tag. The Char Width setting maps to the cols attribute, and the Num Lines setting maps to the rows attribute.

Init Value assigns the value displayed in the field when the form first loads.


Setting the List/Menu Property inspector options

To display list/menu properties in the Property inspector, select a list or pop-up menu in a form. See also Adding lists and menus.

List/Menu assigns a name to the list or menu. This field is required, and the name must be unique.

Type indicates whether the object is a pop-up menu or a scrolling list. For a list, you can set the height (the number of items displayed at once) and indicate whether the user can select multiple items from the list.

List Values opens the Initial List Values dialog box so you can add items to the list or pop-up menu. Each item in the list has a label (the text that appears in the list) and a value (the value that’s sent to the processing application if the item is selected). If no value is specified, the label is sent to the processing application instead.

Use the plus (+) and minus (–) buttons to add and remove items in the list. Items are in the same order as in the Initial List Values dialog box. The first item on the list is the selected item when the page is loaded in a browser. Use the up and down arrow buttons to rearrange items in the list.


Setting the List/Menu dialog box options

The Initial List Values dialog box lets you add items to a list or pop-up menu. Each item in the list has a label (the text that appears in the list) and a value (the value that’s sent to the processing application if the item is selected). If no value is specified, the label is sent to the processing application instead.

Use the plus (+) and minus (–) buttons to add and remove items in the list. Items are in the same order as in the Initial List Values dialog box. The first item on the list is the selected item when the page is loaded in a browser. Use the up and down arrow buttons to rearrange items in the list.


Setting Button property options in the Property inspector

Button Name assigns a name to the button. Two reserved names, Submit and Reset, tell the form to submit the form data to the processing application or script, or to reset all the form fields to their original values, respectively.

Label determines the text that appears on the button.

Action determines what happens when the button is clicked. You can design the button to clear the contents of the form in which it appears, to submit the contents of the form, or to do nothing. Selecting Submit Form automatically sets the name of the button to Submit. Selecting Reset Form automatically sets the name of the button to Reset. None means that neither a submit nor reset action will occur when the button is clicked.


Correcting unknown input types

The Input Name Property inspector appears when Dreamweaver encounters an unrecognized input type. Typically this occurs due to a typing or other data entry error.

If you change the field type in the Property inspector to a value that Dreamweaver recognizes—for example, if you correct the spelling error—the Property inspector updates to show the properties for the recognized type.

Input Name assigns a name to the field. This field is required, and the name must be unique.

Type sets the input type of the field. The contents of this field reflect the input type value that currently appears in your HTML source code.

Value sets the value of the field.

Parameters opens the Parameters dialog box so you can view the current attributes of the field, as well as add or remove attributes.

Previous


Developing Applications Rapidly

Web applications often feature pages that let users search a database, pages that let users insert, update, or delete data in a database, and pages that restrict access to a website. Quickly build any of these pages with Dreamweaver.

This part contains the following chapters:

  • Building Master/Detail Pages
  • Building Pages that Search Databases
  • Building Pages that Modify Databases
  • Building Pages that Restrict Access to Your Site


Building Master/Detail Pages

With Macromedia Dreamweaver MX, you can create sets of pages that present information in two levels of detail. This chapter describes how to build master/detail pages in the following sections:

  • About master/detail pages
  • Building master/detail pages rapidly
  • Building master/detail pages block by block
  • Modifying master/details pages
Next


About master/detail pages

A master page is a page that lists records and corresponding links for each record. When the user clicks a link, a detail page opens displaying more information about the record. For example, here’s a master page from the intranet site of a fictional company:

This is a picture of the feature being described.

When a user clicks one of the linked View icons, a detail page opens:

This is a picture of the feature being described.

A results page is a common type of master page. However, unlike the master page described in this section, the list of records on a results page is determined not by you, the designer, but by the user. (The user determines the list by conducting a database search.) For more information on this type of master page, see Building Pages that Search Databases.

A detail page can be used to update or delete the record displayed. For more information on update and delete pages, see Building a page to update records and Building a page to delete a record.

A master page consists of the following building blocks:

  • A recordset
  • A page layout to display multiple records
  • A Go to Detail Page server behavior to open the detail page and pass the ID of the record the user clicked

A detail page consists of the following building blocks:

  • A page layout to display a single record
  • A recordset to hold the record’s details
  • Either a recordset filter to retrieve a specific record from the database table, or a Move To Specific Record server behavior to move to a specific record in the recordset.


Building master/detail pages rapidly

You can quickly build master/detail pages using the Master/Detail Page Set live object.

Note: The live object is not supported in PHP or ASP.NET.

To complete the master/detail page set with a live object:
  1. Create a blank master page and add a recordset to it.

    2. Make sure the recordset contains not only all the columns you’ll need for the master page, but also all the columns you’ll need for the detail page.

    The recordset can be defined by you at design time (see Defining a recordset) or by the user at runtime (see Building Pages that Search Databases).

    Typically, the recordset on the master page extracts a few columns from a database table while the recordset on the detail page extracts more columns from the same table to provide the extra detail.

  2. Open the master page in Design view, and choose Insert > Application Objects > Master Detail Page Set.

    3. The Master Detail Page Set dialog box appears.
    This is a picture of the feature being described.

  3. Complete the dialog box.

    4. For more information, see Setting the Master Detail Page Set dialog box options.

  4. Click OK.

    5. The live object creates a detail page (if you didn’t already create one) and adds dynamic content and server behaviors to both the master and detail pages.

  5. Customize the layout of the master and detail pages to suit your needs.

    6. You can fully customize the layout of each page using the Macromedia Dreamweaver MX page-design tools. You can also edit the server behaviors by double-clicking them in the Server Behaviors panel.


Building master/detail pages block by block

This section describes how to build a set of master/detail pages without using the Master/Detail Page Set live object. For instructions on using the live object, see Building master/detail pages rapidly.

To complete the master/detail page set, you need to accomplish the following tasks:

  • Create a blank master page and define a recordset for it.
  • Display the records on the master page.
  • Pass the ID of the record the user selected to the detail page.
  • Find the record in the database and display it on the detail page.


Creating a master page and defining a recordset for it

The first step is to create a blank master page and add a recordset to it.

The recordset can be defined by you at design time (see Defining a recordset) or by the user at runtime (see Building Pages that Search Databases).

Make sure the recordset contains not only all the columns you’ll need for the master page, but also all the columns you’ll need for the detail page.

Typically, the recordset on the master page extracts a few columns from a database table while the recordset on the detail page extracts more columns from the same table to provide the extra detail.


Displaying the records on the master page

After you create a blank master page and define a recordset for it, you must display the records on the page.

To display the records on the master page:
  1. Create a page layout to display multiple records and bind recordset columns to the page.

    2. A common approach is to create a two-row HTML table on the master page and to drag a limited number of recordset columns from the Bindings panel (Window > Bindings) into the table’s second row. (Use the first row to display the table’s column headings.)

  2. Create a repeated region to display more than one record at a time.

    3. The repeated region is normally applied to the table row containing the dynamic content.


Opening the detail page and passing a record ID to it

After creating the master page and displaying records on it, you must create links that open the detail page and pass the ID of the record the user selected to it.

PHP, ASP.NET, and ColdFusion users must create a link with URL parameters in the code. For more information, see Creating URL parameters using HTML links. Place the anchor tags around the dynamic content you want to serve as the link.

To open the detail page and pass it a URL parameter that contains the ID of the record the user clicked (ASP and JSP users only):
  1. In the repeated region on the master page, select the dynamic content to double as a link.
  2. In the Server Behaviors panel (Window > Server Behaviors), click the plus (+) button, and choose Go to Detail Page from the pop-up menu.

    3. The Go to Detail Page dialog box appears.
    This is a picture of the feature being described.

  3. Complete the dialog box.

    4. For more information, see Setting the Go to Detail Page dialog box options.

  4. Click OK.

    5. Dreamweaver places a special link around the selected text. When the user clicks the link, the Go To Detail Page server behavior passes a URL parameter containing the record ID to the detail page. For example, if the URL parameter is called id and the detail page is called customerdetail.asp, then the URL will look something like the following when the user clicks on the link:

    http://www.mysite.com/customerdetail.asp?id=43

    The first part of the URL, http://www.mysite.com/customerdetail.asp, opens the detail page. The second part, ?id=43, is the URL parameter. It tells the detail page what record to find and display. The term id is the name of the URL parameter and 43 is its value. In this example, the URL parameter contains the record’s ID number, 43.

    For more information on URL parameters, see Understanding URL parameters.


Finding and displaying the requested record on the detail page

After completing the master page, you must find the requested record in the database and display it on the detail page. The procedure consists of defining a recordset to hold a single record—the record requested by the master page—and binding the recordset columns to the page.

To find and display the requested record on the detail page:
  1. Switch to the detail page.
  2. In the Bindings panel, click the plus (+) button and choose Recordset or DataSet (ASP.NET) from the pop-up menu.

    3. The simple dialog box appears. If the advanced dialog box appears instead, click Simple to switch.

  3. Name the recordset, then choose a connection and database table that will provide data to your recordset.
  4. In the Column area, select the table columns to include in the recordset.

    5. The recordset can be identical to or different from the recordset on the master page. Usually a detail page recordset has more columns to display more detail.

    If the recordsets are different, the recordset on the detail page should contain at least one column in common with the master page. The common column is usually the record ID column, but it can also be the join field of related tables.

    To include only some of the table’s columns in the recordset, click Selected and choose the desired columns by Control-clicking (Windows) or Command-clicking (Macintosh) them in the list.

  5. Complete the Filter section as follows to find and display the record specified in the URL parameter passed by the results page:
    • From the first pop-up menu in the Filter area, select the column in the database table containing values that match the value of the URL parameter passed by the master page.

      • For example, if the URL parameter contains a record ID number, choose the column containing record ID numbers.

    • From the pop-up menu beside the first menu, select the equal sign (it should already be selected).
    • From the third pop-up menu, select URL Parameter.

      • The master page passes information identifying the user’s selection to the detail page in a URL parameter.

    • In the fourth text box, enter the name of the URL parameter passed by the master page.

      • For example, if the URL the master page used to open the detail page is www.mysite.com/customerdetail.asp?id=43, then enter id.

      You can also get the name by switching to the master page, opening the Server Behaviors panel (Window > Server Behaviors), and double-clicking the Go to Detail Page server behavior. Check the Pass URL Parameter name.

  6. Click OK.

    7. The recordset appears in the Bindings panel.

  7. Bind the recordset columns to the detail page by selecting the columns in the Bindings panel (Window > Bindings) and dragging them onto the page.


Modifying master/details pages

After creating master/detail pages with server behaviors, use the Server Behaviors panel to modify the various building blocks on the pages. For more information, see Editing server behaviors.

If you created pages with the live object, you must also use the Server Behaviors panel to edit the building blocks the live object inserts into the pages. The live object adds the following building blocks to the master page:

  • A basic table with a repeated region to display multiple records
  • A recordset navigation bar
  • A record counter
  • A Go to Detail Page server behavior to open the detail page and pass the ID of the record the user clicked

The live object also adds the following building blocks to the detail page:

  • A basic table to display a single record
  • A filtered recordset to find and display the record the user clicked on the master page


Setting the Master Detail Page Set dialog box options

The purpose of this dialog box is to create a master page and a corresponding detail page.

Procedure
  1. In the Recordset pop-up menu, make sure the recordset containing the records you want to display on the master page is chosen.
  2. In the Master Page Fields area, select the recordset columns to display on the master page.

    3. By default, Dreamweaver selects all the columns in the recordset. If your recordset contains a unique key column such as recordID, select it and click the minus (-) button so that it is not displayed on your page.

  3. If you want to change the order in which the columns appear on the master page, select a column in the list and click the up or down arrow.

    4. On the master page, the recordset columns will be arranged horizontally in a table. Clicking the up arrow moves the column to the left; clicking the down arrow moves the column to the right.

  4. In the Link To Detail From pop-up menu, choose the column in the recordset that will display a value that also serves as a link to the detail page.

    5. For example, if you want each product name on your master page to have a link to the detail page, choose the recordset column containing product names.

  5. In the Pass Unique Key pop-up menu, choose the column in the recordset containing values identifying the records.

    6. Usually, the column chosen is the record ID number. This value is passed to the detail page so that it can identify the record chosen by the user.

  6. Deselect the Numeric checkbox if the unique key column is not numeric.

    7. Note: This option is selected by default; it does not appear for all server models.

  7. Specify the number of records to display on the master page.
  8. In the Detail Page Name box, click Browse and locate the detail page file you created, or enter a name and let the live object create one for you.
  9. In the Detail Page Fields area, select the columns to be displayed on the detail page.

    10. By default, Dreamweaver selects all the columns in the master page’s recordset. If the recordset contains a unique key column such as recordID, select it and click the minus (-) button so that it is not displayed on the detail page.

  10. If you want to change the order in which the columns appear on the detail page, select a column in the list and click the up or down arrow.

    11. On the detail page, the recordset columns will be arranged vertically in a table. Clicking the up arrow moves the column up; clicking the down arrow moves the column down.

  11. Click OK.

    12. The live object creates a detail page (if you didn’t already create one) and adds dynamic content and server behaviors to both the master and detail pages.

Related topic

Building master/detail pages rapidly


Setting the Go to Detail Page dialog box options

The purpose of this dialog box is to create a link that opens a detail page and passes a record ID so that the desired record can be found and displayed on the detail page.

Procedure
  1. In the Detail Page box, click Browse and locate the detail page.
  2. Specify the value you want to pass to the detail page by selecting a recordset and a column from the Recordset and Column pop-up menus.

    3. Typically the value is unique to the record, such as the record’s unique key ID.

  3. If desired, pass existing page parameters to the detail page by selecting the URL Parameters or Form Parameters options.
  4. Click OK.

Dreamweaver inserts a special link in the page. When the user clicks the link, a URL parameter containing the record ID is passed to the detail page.

Related topics

Opening the detail page and passing a record ID to it

Finding and displaying the requested record on the detail page

Building master/detail pages block by block

Previous


Building Pages that Search Databases

You can use Macromedia Dreamweaver MX to build a set of pages to let users search your database.

This chapter contains the following sections:

  • Creating the search page
  • Building the results page
  • Creating a detail page for a results page
  • Working with related pages (ASP and JSP users only)
Next


About search/results pages

You need at least two pages to add this feature to your web application. The first page is a page containing an HTML form in which users enter search parameters. Although this page doesn’t do any actual searching, it is referred to as “the search page.”

The second page you need is the results page, the workhorse of the page set. The results page performs the following tasks:

  • Reads the search parameters submitted by the search page
  • Connects to the database and searches for records
  • Builds a recordset with the records found
  • Displays the contents of the recordset

Optionally, you can add a detail page. A detail page gives users more information about a particular record on the results page.

If you have only one search parameter, Dreamweaver lets you add search capabilities to your web application without using SQL queries and variables. Simply design your pages and complete a few dialog boxes. If you have more than one search parameter, you need to write a SQL statement and define multiple variables for it.


Creating the search page

A search page on the web typically contains form fields in which the user enters search parameters. When the user clicks the form’s Search button, the search parameters are sent to a results page on the server. The results page on the server, not the search page on the browser, is responsible for retrieving records from the database.

To get started on this part of your web application, create two pages: a search page that lets users enter the search parameters, and a results page to display the records found. You can even combine the two pages into one. At minimum, your search page must have an HTML form with a Submit button.

To add an HTML form to a search page:
  1. Open the search page and select Form from the Insert menu.

    2. An empty form is created on the page. You may have to turn on Invisible Elements (View > Visual Aids > Invisible Elements) to see the form’s boundaries, which are represented by thin red lines.

  2. Add form objects for users to enter their search parameters by choosing Form Objects from the Insert menu.

    3. Form objects include text fields, list menus, checkboxes, and radio buttons. You can add as many form objects as you want to help users refine their searches. However, keep in mind that the greater the number of search parameters on the search page, the more complex your SQL statement will be.

    For more information on form objects, Creating Interactive Forms.

  3. Add a Submit button to the form (Insert > Form Objects > Button).
  4. If you wish, change the label of the Submit button by selecting the button, opening the Property inspector (Window > Properties), and entering a new value in the Label box.

    5. For example, here’s the Property inspector of a button labeled “search”:
    This is a picture of the feature being described.

    Next, you’ll tell the form where to send the search parameters when the user clicks the Submit button.

  5. Select the form by selecting the <form> tag in the tag selector at the bottom of the Document window, as shown:
    This is a picture of the feature being described.
  6. In the Action box on the form’s Property inspector, enter the filename of the results page that will conduct the database search.
  7. In the Method pop-up menu, choose one of the following methods to determine how the form sends data to the server:
    • GET sends the form data by appending it to the URL as a query string. Because URLs are limited to 8192 characters, don’t use the GET method with long forms.
    • POST sends the form data in the body of a message.
    • Default uses the browser’s default method (usually GET).

The search page is done. Next comes the results page. See Building the results page.


Building the results page

After the user enters the search parameters, your application must retrieve the records from the database. This work is done by the results page.

Here’s the job of a results page:

  • Get the search parameters from the search page.
  • Connect to the database and search for records.
  • Build a recordset with the records found.
  • Display the contents of the recordset.

If your search page has only one search parameter (a single text field, for example), you can build the results page without SQL queries and variables. You simply create a basic recordset, then add a filter to it to exclude records that don’t meet the search parameters sent by the search page. For instructions, see Searching with only one search parameter.

If your search page has more than one search parameter, you need to write a SQL statement and define multiple variables for it. For instructions, see Searching with multiple search parameters.


Searching with only one search parameter

If the search page submits a single search parameter to the server, then you can build the results page without SQL queries and variables. You create a basic recordset with a filter that excludes records that don’t meet the search parameter submitted by the search page.

Note: If you have more than one search condition, you must use the advanced Recordset dialog box to define your recordset. The simple Recordset dialog box only supports one search condition. For more information, see Searching with multiple search parameters.

To create the recordset to hold the search results:
  1. Open your results page in the Document window.
  2. Create a new recordset by opening the Bindings panel (Window > Bindings), clicking the plus (+) button, and selecting Recordset or DataSet (ASP.NET) from the pop-up menu.
  3. Make sure the simple Recordset or DataSet dialog box appears.
    This is a picture of the feature being described.

    4. If the advanced dialog box appears instead, switch to the simple dialog box by clicking the Simple button.

  4. Enter a name for the recordset and choose a connection.

    5. The connection should be to a database containing data you want the user to search.

  5. In the Table pop-up menu, select the table to be searched in the database.

    6. Note: In a single-parameter search, you can search for records in only a single table. To search more than one table at a time, you must use the advanced Recordset dialog box and define a SQL query.

  6. To include only some of the table’s columns in the recordset, click Selected and choose the desired columns by Control-clicking (Windows) or Command-clicking (Macintosh) them in the list.

    7. Choose columns containing information you want to display on the results page.

Leave the Recordset or DataSet dialog box open for now. You’ll use it next to fetch the parameters sent by the search page and create a recordset filter to exclude records that don’t meet the parameters.

To create the recordset filter:
  1. From the first pop-up menu in the Filter area, select a column in the table to compare against the search parameter sent by the search page.

    2. For example, if the value sent by the search page is a city name, select the column in your table that contains city names.

  2. From the pop-up menu beside the first menu, select the equal sign (it should be the default).

    3. This choice states that the user wants only those records in which the selected table column is exactly the same as the one specified on the search page.

  3. From the third pop-up menu, select Form Variable if the form on your search page uses the POST method, or URL Parameter if it uses the GET method.

    4. This pop-up menu specifies where the value sent by the search page is currently stored on the server. In ASP, if the search form uses the POST method, the value is stored in the Request.Form collection. If the search form uses the GET method, the value is stored in the Request.QueryString collection.

  4. In the fourth box, enter the name of the form object that accepts the search parameter on the search page.

    5. You can get the name by switching to the search page, clicking the form object on the form to select it, and checking the object’s name in the Property inspector.

    For example, suppose you want to create a recordset that includes only adventure trips to a specific country. Assume you have a column in the table called TRIPLOCATION. Also assume the HTML form on your search page uses the GET method and contains a Menu/List object called Location that displays a list of countries. Here’s how your Filter section should look:
    This is a picture of the feature being described.

  5. If you want to, click Test, enter a test value, and click OK to connect to the database and create an instance of the recordset.

    6. The test value simulates the value that would otherwise have been returned from the search page. Click OK to close the recordset.

  6. If you’re satisfied with the recordset, click OK.

Dreamweaver inserts a server-side script on your page that, when run on the server, checks each record in the database table. If the specified field in a record meets the filtering condition, the record is included in a recordset. The script in effect builds a recordset containing only the search results.

The next step is to display the recordset on the results page. For more information, see Displaying the records.


Searching with multiple search parameters

If the search page submits more than one search parameter to the server, then you must write a SQL query for the results page and use the search parameters in SQL variables.

After Dreamweaver inserts the SQL query in your page and the page runs on the server, each record in the database table is checked. If the specified field in a record meets your SQL query conditions, the record is included in a recordset. The SQL query in effect builds a recordset containing only the search results.

For example, field sales staff may have the ability to tell which customers in a certain area have incomes above a certain level. In a form on a search page, the sales associate enters a geographical area and a minimum income level, then clicks the Submit button to send the two values to a server. On the server, the values are passed to the results page’s SQL statement, which then creates a recordset containing only customers in the specified area with incomes above the specified level.

To search for records in a database using SQL:
  1. Open the results page in Dreamweaver, then create a new recordset by opening the Bindings panel (Window > Bindings), clicking the plus (+) button, and selecting Recordset or DataSet (ASP.NET) from the pop-up menu.
  2. Make sure the advanced Recordset or DataSet dialog box appears.
    This is a picture of the feature being described.

    3. If the simple dialog box appears instead, switch to the advanced dialog box by clicking the Advanced button.

  3. Enter a name for the recordset and choose a connection.

    4. The connection should be to a database containing data you want the user to search.

  4. Enter a Select statement in the SQL text area.

    5. Make sure the statement includes a Where clause with variables to hold the search parameters. In the following example, the variables are called varLastName and varDept:

    SELECT EMPLOYEEID, FIRSTNAME, LASTNAME, DEPARTMENT, EXTENSION ¬
FROM EMPLOYEE WHERE LASTNAME LIKE 'varLastName' AND DEPARTMENT ¬
LIKE 'varDept'

To reduce the amount of typing, you can use the tree of database items at the bottom of the advanced Recordset dialog box. For instructions, see Creating an advanced recordset by writing SQL.

For help on SQL syntax, see SQL Primer.
  5. Give the SQL variables the values of the search parameters by clicking the plus (+) button in the Variables area and entering the variable’s name, default value (the value the variable should take if no runtime value is returned), and runtime value (usually a server object holding a value sent by a browser, such as an request variable).

    6. In the following ASP example, the HTML form on the search page uses the GET method and contains one text field called “LastName” and another called “Department”.
    This is a picture of the feature being described.

    In Macromedia ColdFusion, the runtime values would be #LastName# and #Department#. In JSP, the runtime values would be request.getParameter("LastName") and request.getParameter("Department").

  6. If you want to, click Test to create an instance of the recordset using the default variable values.

    7. The default values simulate the values that would otherwise have been returned from the search page. Click OK to close the test recordset.

  7. If you’re satisfied with the recordset, click OK.


Displaying the records

After creating a recordset to hold the search results, you may want to display the information on the results page. Displaying the records is a simple matter of dragging individual columns from the Bindings panel to the results page. You can add navigation links to move forward and backward through the recordset, or you can create a repeated region to display more than one record on the page. You can also add links to a detail page.

For more information about displaying dynamic content on a page, see:

  • Creating a detail page for a results page
  • Adding Dynamic Content to Web Pages
  • Displaying Database Records


Creating a detail page for a results page

Your set of search pages can include a detail page to display more information about specific records on the results page. On the results page, the records are typically displayed in a repeated region, and each record has a link. When a user clicks one of the links, the detail page opens and displays more information about the selected record.

This section contains the following topics:

Modifying a results page to work with a detail page

Building the detail page using a server behavior (ASP and JSP users only)

Building the detail page using a filtered recordset


Modifying a results page to work with a detail page

Your results page should have a repeated region to display more than one record at a time, and each record in the repeated region should have a link to the detail page. The link must not only open the detail page, it must also tell the detail page what record the user selected. The Go to Detail Page server behavior creates this kind of link (for ASP and JSP users only).

PHP, ASP.NET, and ColdFusion users must create a link with URL parameters in the code. For more information, see Creating URL parameters using HTML links.

To modify the results page to work with a detail page (ASP and JSP users only):
  1. Create a blank detail page (File > New) and name the file.

    2. Set aside the page for now. You’ll work on it later.

  2. Open the results page in Dreamweaver.
  3. Make sure the results are displayed in a repeated region.

    4. For instructions, see Displaying multiple behaviors.

  4. In the repeated region, select the text or image to double as a link.

    5. If you’re working in the Live Data window, select the text or image in the first region displayed.

    Note: The text or image you select can be dynamic.

  5. Create the link to the detail page by opening the Server Behaviors panel (Window > Server Behaviors), clicking the plus (+) button, and choosing Go to Detail Page from the pop-up menu.

    6. The Go to Detail Page dialog box appears.
    This is a picture of the feature being described.

  6. Complete the dialog box.

    7. For more information, see Setting the Go to Detail Page dialog box options.

  7. Click OK.

The results page passes the value to the detail page in a URL parameter, which is simply a variable appended to the end of the URL used to open the detail page. For example, if the URL parameter is called id and the detail page is called customerdetail.asp, then the URL will look something like the following when the user clicks on the link:

http://www.mysite.com/customerdetail.asp?id=43

The first part of the URL, http://www.mysite.com/customerdetail.asp, opens the detail page. The second part, ?id=43, is the URL parameter. It tells the detail page what record to find and display. The term id is the name of the URL parameter and 43 is its value. In this example, the URL parameter contains the record’s ID number, 43.


Building the detail page using a server behavior (ASP and JSP users only)

After modifying the results page to work with your detail page, complete the detail page. You can build the detail page with a combination of a regular recordset and a server behavior, or you can build one with only a filtered recordset. This section describes how to build the first kind of detail page (for ASP and JSP users only). To learn how to build the second kind, see Building the detail page using a filtered recordset.

First, lay out the detail page using the Dreamweaver design tools. For more information, see Building Master/Detail Pages.

Second, define a recordset for the page, or copy and paste the recordset from the results page. The detail page will extract the record details from this recordset. For instructions, see Defining a recordset and Copying a recordset from one page to another page.

Third, bind the recordset columns to the page. In the Bindings panel (Window > Bindings), select columns in the recordset and drag them onto the page.

Fourth, add a server behavior that reads the record ID in the URL parameter passed by the results page and retrieves the record. If you omit this step, the server will retrieve the first record in the recordset.

To retrieve a specific record using a server behavior (ASP and JSP users only):
  1. In the Server Behaviors panel (Window > Server Behaviors), click the plus (+) button, choose Move to Record from the pop-up menu, then choose Move to Specific Record.

    2. The Move to Specific Record dialog box appears.
    This is a picture of the feature being described.

  2. Complete the dialog box.

    3. For more information, see Setting the Move To Specific Record dialog box options.

  3. Click OK.

The next time the page is requested by a browser, it will read the record ID in the URL parameter passed by the browser and move to the specified record in the recordset.


Building the detail page using a filtered recordset

Another approach to building a detail page is to filter your recordset so that only a single record remains—the record the user selected on the results page. This method can improve the performance of your application because the recordset contains only one record.

First, lay out the page using the Dreamweaver design tools. For more information, see Building Master/Detail Pages.

Second, define a recordset for the page, or copy and paste the recordset from the results page. The detail page will extract the record details from this recordset. For instructions, see Defining a recordset and Copying a recordset from one page to another page.

Third, create a recordset filter to retrieve the record specified on the results page. If you create a recordset using the simple Recordset dialog box, you can use the Filter boxes to create the filter. If you use the advanced Recordset dialog box, you can modify your SQL query to create the filter.

To retrieve a specific record using a recordset filter:
  1. Make sure the detail page contains a recordset.
  2. Open the recordset by double-clicking its name in the Bindings panel (Window > Bindings).
  3. Make sure the simple Recordset or DataSet dialog box appears.

    4. If the advanced dialog box appears instead, switch to the simple dialog box by clicking Simple. If Dreamweaver informs you that it can’t switch (usually because your query is too complex to display in the simple dialog box), you must use a SQL query to find the record; please skip to the next procedure in this section.

  4. Complete the Filter section as follows to find and display the record specified in the URL parameter passed by the results page:
    • From the first pop-up menu in the Filter area, select the column in the database table containing values that match the value of the URL parameter passed by the results page.

      • For example, if the URL parameter contains a record ID number, choose the column containing record ID numbers.

    • From the pop-up menu beside the first menu, select the equal sign (it should already be selected).
    • From the third pop-up menu, select URL Parameter.

      • The results page passes information identifying the user’s selection to the detail page in a URL parameter.

    • In the fourth text box, enter the name of the URL parameter passed by the results page.

      • For example, if the URL the results page used to open the detail page is www.mysite.com/customerdetail.asp?id=43, then enter id.

      If you used the Go To Detail Page server behavior on the results page, you can also get the name by switching to the results page, opening the Server Behaviors panel (Window > Server Behaviors), and double-clicking the Go to Detail Page server behavior. Check the Pass URL Parameter name.

  5. Click OK.
  6. If not already done, bind the recordset columns to the page by selecting the columns in the Bindings panel (Window > Bindings) and dragging them onto the page.
To retrieve a specific record using a SQL query:
  1. Make sure the detail page contains a recordset.
  2. Open the recordset by double-clicking its name in the Bindings panel (Window > Bindings).
  3. Make sure the advanced Recordset dialog box appears.

    4. If the simple Recordset dialog box appears instead, switch to the advanced Recordset dialog box by clicking the Advanced button.

  4. Add a Where clause in your SQL statement to find the record the user selected on the results page.

    5. The Where clause should contain a variable to hold the value passed in the URL parameter. In the following example, the variable is called varDept:

    SELECT * FROM EMPLOYEES
WHERE DEPARTMENT = 'varDept'

For help on SQL syntax, see SQL Primer.
  5. Give the variable the value the results page passed in the URL parameter by clicking the plus (+) button in the Variables area and entering the variable’s name, default value (the value the variable should take if no runtime value is returned), and runtime value.

    6. In the following ASP example, the results page passes a URL parameter called Department.
    This is a picture of the feature being described.

  6. Click OK.
  7. If not already done, bind the recordset columns to the page by selecting the columns in the Bindings panel (Window > Bindings) and dragging them onto the page.


Working with related pages (ASP and JSP users only)

In some situations, you may want to display a page that is not a search page, a results page, or a detail page, but you don’t want to lose the information the page has received from an HTML form or a URL parameter. Instead of using a standard link to open the related page, create the link using the Go to Related Page server behavior. The resulting link opens the related page, and passes existing parameters to that page. For example, you can pass search parameters from one page to another and save the user from entering the search parameters again.

Note: This server behavior is only available for ASP and JSP pages.

Before adding a Go to Related Page server behavior to a page, make sure the page receives parameters from an HTML form (in other words, the form’s ACTION attribute specifies the page), or from a URL parameter, such as when the page is the link destination of another page with a Go to Related Page server behavior.

To create a link that passes existing form parameters to a related page:
  1. On the page, select the text string or images to act as a link to the related page.
  2. In the Server Behaviors panel (Window > Server Behaviors), click the plus (+) button and choose Go to Related Page from the pop-up menu.

    3. The Go to Related Page dialog box appears.
    This is a picture of the feature being described.

  3. Complete the dialog box.

    4. For more information, see Setting the Go To Related Page dialog box options.

  4. Click OK.

When a user clicks the new link, the page passes the parameters to the related page using URL parameters. For example, suppose a form parameter is called “lastname” and the related page is called special_offer.asp. The URL will look something like the following when the user clicks the link:

http://www.mysite.com/special_offer.asp?lastname=Anderson

The first part of the URL, http://www.mysite.com/special_offer.asp, opens the related page. The second part, ?lastname=Anderson, is the URL parameter that passes the original form parameter to the related page.


Setting the Move To Specific Record dialog box options

The purpose of this dialog box is to find a specific record in a recordset.

Procedure
  1. In the Move to Record In pop-up menu, select the recordset you defined for the detail page.
  2. In the Where Column pop-up menu, select the column that contains the value passed by the results page.

    3. For example, if the results page passes a record ID number, choose the column containing record ID numbers.

  3. In the Matches URL Parameter text box, enter the name of the URL parameter passed by the results page.

    4. For example, if the URL the results page used to open the detail page is www.mysite.com/customerdetail.asp?id=43, then enter id in the Matches URL Parameter text box.

    You can also get the name by switching to the results page, opening the Server Behaviors panel (Window > Server Behaviors), and double-clicking the Go to Detail Page server behavior. Check the Pass URL Parameter name.

  4. Click OK.

Related topics

Building the detail page using a server behavior (ASP and JSP users only)

Setting the Go to Detail Page dialog box options

Building master/detail pages block by block


Setting the Go To Related Page dialog box options

The purpose of this dialog box is to create a link that opens a related page and that passes existing parameters to that page.

Before adding a Go to Related Page server behavior to a page, make sure the page receives form or URL parameters from another page. The job of the server behavior is to pass these parameters to a third page. For example, you can pass search parameters received by a results page to another page and save the user from entering the search parameters again.

Also, you can select text or an image on the page to serve as the link to the related page, or you can position your cursor on the page without selecting anything and Dreamweaver will insert link text for you.

Procedure
  1. In the Related Page box, click Browse and locate the related page file.

    2. If the current page submits data to itself, enter the current page’s filename.

  2. If the parameters you want to pass were received directly from an HTML form using the GET method, or are listed in the page’s URL, select the URL Parameters option.
  3. If the parameters you want to pass were received directly from an HTML form using the POST method, select the Form Parameters option.
  4. Click OK.

When the new link is clicked, the page passes the parameters to the related page using a query string.

Related topics

Working with related pages (ASP and JSP users only)

Understanding form parameters

Understanding URL parameters

Previous


Building Pages that Modify Databases

Macromedia Dreamweaver MX comes with a set of server behaviors that let users add, update, and delete records with their web browsers. You can also use application objects to create fully functional HTML forms for inserting or updating records.

This chapter contains the following sections:

  • Building a page to insert records
  • Building a page to update records
  • Building a page to delete a record
  • Using stored procedures to modify databases
  • Using ASP commands to modify a database
  • Using JSP prepared statements to modify a database
Next


Building a page to insert records

Your application can contain a page that lets users insert new records in a database. For example, the following page inserts a new record in an employee database:

This is a picture of the feature being described.

An insert page requires two building blocks:

  • An HTML form that lets users enter data
  • An Insert Record server behavior that updates the database

You can add these building blocks in a single operation using the Record Insertion Form live object, or you can add them separately using the Dreamweaver form tools and the Server Behaviors panel.

Note: The insert page can contain only one record-editing server behavior at a time. For example, you cannot add an Update Record or a Delete Record server behavior to the insert page.


Building an insert page rapidly

You can add the basic building blocks of an insert page in a single operation using the Record Insertion Form live object. The live object adds both an HTML form and an Insert Record server behavior to the page.

You can also add the building blocks separately using the form tools and the Server Behaviors panel. For more information, see Building an insert page block by block.

After placing the building blocks on the page, you can use the Dreamweaver design tools to customize the form as you desire, or the Server Behaviors panel to edit the Insert Record server behavior.

To build the insert page with the Record Insertion Form live object:
  1. Open the page in Design view, then choose Insert > Application Objects > Record Insertion Form.

    2. The Insert Record Insertion Form dialog box appears.
    This is a picture of the feature being described.

  2. Complete the dialog box.

    3. For instructions, see Setting the Record Insertion Form dialog box options.

  3. Click OK.

Dreamweaver adds both an HTML form and an Insert Record server behavior to your page. The form objects are laid out in a basic table, which you can freely customize using the Dreamweaver page design tools. (Make sure all the form objects remain within the form’s boundaries.)

To edit the server behavior, open the Server Behaviors panel (Window > Server Behaviors) and double-click the Insert Record behavior.


Building an insert page block by block

You can add the basic building blocks of an insert page separately using the form tools and the Server Behaviors panel.

You can also add the building blocks all at once using the Record Insertion Form live object. For more information, see Building an insert page rapidly.

The first step is to add an HTML form to the page to let users enter data.

To add an HTML form to an insert page:
  1. Create a new page (File > New) and lay out your page using the Dreamweaver design tools.
  2. Add an HTML form by placing the insertion point where you want the form to appear and choosing Form from the Insert menu.

    3. An empty form is created on the page. You may have to turn on Invisible Elements (View > Visual Aids > Invisible Elements) to see the form’s boundaries, which are represented by thin red lines.

  3. Name the HTML form by clicking the <form> tag at the bottom of the Document window to select the form, opening the Property inspector (Window > Properties), and entering a name in the Form Name box.

    4. You don’t have to specify an action or method attribute for the form to tell it where and how to send the record data when the user clicks the Submit button. The Insert Record server behavior sets these attributes for you.

  4. Add a form object (Insert > Form Objects) for each column in the database table you want to insert records into.

    5. The form objects are for data entry. Text fields are common for this purpose, but you can also use list/menus, checkboxes, and radio buttons.

    For more information on form objects, see Creating Interactive Forms.

  5. Add a Submit button to the form (Insert > Form Objects > Button).
  6. If you wish, change the label of the Submit button by selecting the button, opening the Property inspector (Window > Properties), and entering a new value in the Label box.

    7. For example, here’s the Property inspector of a button labeled “Insert Record”:
    This is a picture of the feature being described.

The next step is to add the Insert Record server behavior to insert records in a database table.

To add a server behavior to insert records in a database table:

In the Server Behaviors panel (Window > Server Behaviors), click the plus (+) button and choose Insert Record from the pop-up menu (ASP.NET users choose Insert Record on form Submit).

The Insert Record dialog box appears.

This is a picture of the feature being described.

  1. Complete the dialog box.

    2. For instructions, see:

    Setting the Insert Record dialog box options (ASP and JSP users)

    Setting the Insert Record dialog box options (PHP users)

    Setting the Insert Record dialog box options (ColdFusion users)

    Setting the Insert Record on Form Submit dialog box options (ASP.NET users)

  2. Click OK.

Dreamweaver adds a server behavior to the page that lets users insert records in a database table by filling out the HTML form and clicking the Submit button.


Building a page to update records

Your application can contain a page that lets users update existing records in a database table. An update page is usually a detail page working in tandem with a results page. The results page lets the user choose a record to update, then passes the choice to the update page.

An update page has three building blocks:

  • A filtered recordset to retrieve the record from a database table
  • An HTML form to let users modify the record’s data
  • An Update Record server behavior to update the database table

You can add the HTML form and the server behavior to the page in a single operation using the Record Update Form live object, or you can add them separately using the Dreamweaver form tools and the Server Behaviors panel.

Note: The update page can contain only one record-editing server behavior at a time. For example, you cannot add an Insert Record or a Delete Record server behavior to the update page.


Identifying the record to update

When users want to update a record, they must first find that record in the database. Accordingly, you need a search and a results page to work with the update page. For instructions on creating a search and a results page, see Building Pages that Search Databases.

The results page tells the update page which record to update by passing it a URL parameter. Therefore, make sure the results page has a Go to Detail Page server behavior that names the update page as the detail page. For instructions, see Modifying a results page to work with a detail page.


Retrieving the record to update

After the results page passes a URL parameter to the update page identifying the record to update, the update page must read the parameter, retrieve the record from the database table, and store it temporarily in a recordset.

To retrieve the record to update:
  1. In the Bindings panel (Window > Bindings), click the plus (+) button and choose Recordset or DataSet (ASP.NET).

    2. If the advanced dialog box appears, click the Simple button to open the simple dialog box.

  2. Name the recordset and specify where the data you want to update is located using the Connection and Table pop-up menus.
  3. Click the Selected option and select a key column (usually the record ID column) and the columns containing the data to be updated.
  4. Configure the Filter area so that the value of your key column equals the value of the corresponding URL parameter passed by the results page.

    5. This kind of filter creates a recordset that contains only the record specified by the results page. For example, if your key column contains record ID information and is called PRID, and if the results page passes the corresponding record ID information in the URL parameter called id, then here’s how your Filter area should look:
    This is a picture of the feature being described.

    For more information, see Building the detail page using a filtered recordset.

  5. Click OK.

When the user selects a record on the results page, the update page will generate a recordset containing only the selected record.


Completing the update page rapidly

You can add the final two building blocks of an update page in a single operation using the Record Update Form live object. The live object adds both an HTML form and an Update Record server behavior to the page.

Before you can use the live object, your web application must be able to identify the record to update, and your update page must be able to retrieve it. (See Identifying the record to update and Retrieving the record to update.)

You can also add the HTML form and the Update Record server behavior separately using the form tools and the Server Behaviors panel. (See Completing the update page block by block.)

After the live object places the building blocks on the page, you can use the Dreamweaver design tools to customize the form to your liking, or the Server Behaviors panel to edit the Update Record server behavior.

To build the update page with the Record Update Form live object:
  1. Open the page in Design view, then choose Insert > Application Objects > Record Update Form.

    2. The Record Update Form dialog box appears.
    This is a picture of the feature being described.

  2. Complete the dialog box.

    3. For instructions, see Setting the Record Update Form dialog box options or Setting the Record Update Form dialog box options (ASP.NET users).

  3. Click OK.

The live object adds both an HTML form and an Update Record server behavior to your page. The form objects are laid out in a basic table, which you can customize using the Dreamweaver page design tools. (Make sure all the form objects remain within the form’s boundaries.)

To edit the server behavior, open the Server Behaviors panel (Window > Server Behaviors) and double-click the Update Record behavior.


Completing the update page block by block

You can add the final two basic building blocks of an update page separately using the form tools and the Server Behaviors panel.

Before you can add the building blocks, your web application must be able to identify the record to update, and your update page must be able to retrieve it. (See Identifying the record to update and Retrieving the record to update.)

You can also add the remaining building blocks all at once using the Record Update Form live object. (See Completing the update page rapidly.)

The first step is to add an HTML form to the page to let users modify the data.

To add an HTML form to an update page:
  1. Create a new page (File > New).
  2. Lay out your page using the Dreamweaver design tools.
  3. Add an HTML form by placing the insertion point where you want the form to appear and choosing Form from the Insert menu.

    4. An empty form is created on the page. You may have to turn on Invisible Elements (View > Visual Aids > Invisible Elements) to see the form’s boundaries, which are represented by thin red lines.

  4. Name the HTML form by clicking the <form> tag at the bottom of the Document window to select the form, opening the Property inspector (Window > Properties), and entering a name in the Form Name box.

    5. You don’t have to specify an action or method attribute for the form to tell it where and how to send the record data when the user clicks the Submit button. The Update Record server behavior sets these attributes for you.

  5. Add a form object (Insert > Form Objects) for each column you want to update in the database table.

    6. The form objects are for data entry. Text fields are common for this purpose, but you can also use list/menus, checkboxes, and radio buttons.

    Each form object should have a corresponding column in the recordset you defined earlier. The only exception is the unique key column, which should have no corresponding form object.

    For more information on form objects, see“Creating Interactive Forms.

  6. Add a Submit button to the form (Insert > Form Objects > Button).
  7. If you wish, change the label of the Submit button by selecting the button, opening the Property inspector (Window > Properties), and entering a new value in the Label box.

    8. For example, here’s the Property inspector of a button labeled “Update Record”:
    This is a picture of the feature being described.

The next step is to display the record in the form by binding the form objects to database table columns.

To display the record in the form:
  1. Make sure you defined a recordset to hold the record the user wants to update.

    2. For more information, see Retrieving the record to update.

  2. Drag a database table column from the Bindings panel (Window > Bindings) to its corresponding form object on the page.

    3. For more information, see Making ActiveX, Flash, and other object parameters dynamic.

The final step is to add the Update Record server behavior to update the database table after the user modifies the record.

To add a server behavior to update the database table:
  1. In the Server Behaviors panel (Window > Server Behaviors), click the plus (+) button and choose Update Record from the pop-up menu.

    2. The Update Record dialog box appears.
    This is a picture of the feature being described.

  2. Complete the dialog box.

    3. For instructions, see:

    Setting the Update Record dialog box options (ASP and JSP users)

    Setting the Update Record dialog box options (ColdFusion users)

    Setting the Update Record dialog box options (PHP users)

    Setting the Update Record dialog box options (ASP.NET users)

  3. Click OK.

Dreamweaver adds a server behavior to the page that lets users update records in a database by modifying the information displayed in the HTML form and clicking the Submit button.


Building a page to delete a record

Your application can contain a page that lets users delete existing records in a database table. A delete page is usually a detail page working in tandem with a results page. The results page lets the user choose a record to delete, then passes the choice to the delete page.

A delete page has four building blocks:

  • A filtered recordset to retrieve the record from a database table
  • A read-only display of the data about to be deleted
  • A Submit button to send the delete command to the server
  • A Delete Record server behavior to update the database table

Note: The delete page can contain only one record-editing server behavior at a time. For example, you cannot add an Insert Record or an Update Record server behavior to the delete page.


Identifying the record to delete

When users want to delete a record, they must first find that record in the database. Accordingly, you need a search and a results page to work with the delete page. For instructions on creating a search and a results page, see Building Pages that Search Databases.

The results page tells the delete page which record to delete by passing it a URL parameter. Therefore, make sure the results page has a Go to Detail Page server behavior that names the delete page as the detail page. For instructions, see Modifying a results page to work with a detail page.


Retrieving the record to delete

After the results page passes a URL parameter to the delete page identifying the record to delete, the delete page must read the parameter, retrieve the record from the database table, and temporarily store the record in a recordset.

To retrieve the record to delete:
  1. In the Bindings panel (Window > Bindings), click the plus (+) button and choose Recordset or DataSet (ASP.NET).

    2. If the advanced dialog box appears, click the Simple button to open the simple dialog box.

  2. Name the recordset and specify where the data you want to delete is located using the Connection and Table pop-up menus.
  3. In the Columns area, select the All option to select all the columns in the database table.
  4. Configure the Filter area so that the value of your key column equals the value of the corresponding URL parameter passed by the results page.

    5. This kind of filter creates a recordset that contains only the record specified by the results page. For example, if your key column contains record ID information and is called PRID, and if the results page passes the corresponding record ID information in the URL parameter called id, then here’s how your Filter area should look:
    This is a picture of the feature being described.

    For more information, see Building the detail page using a filtered recordset.

  5. Click OK.

When the user selects a record on the results page, the delete page generates a recordset containing only the selected record.

Next you’ll add a read-only display of the data to be deleted.


Displaying the data to be deleted

It is good practice to display the record before the user deletes it to confirm that the user wants to delete it.

To add a read-only display of the record to be deleted:
  1. Make sure you defined a recordset to hold the record the user wants to delete.

    2. For more information, see Retrieving the record to delete.

  2. Drag a column from the Bindings panel (Window > Bindings) to the page.

    3. Dynamic content appears on the page. You can drop the dynamic content on the page as is, or you can drop it in an HTML table. For more information, see Making text dynamic.


Sending the delete command to the server

The delete page uses a Submit button to send the delete command to the server. To add a Submit button to your page, you must create an HTML form. The form can consist of only the Submit button.

To add a Submit button to a delete page:
  1. In Design view, place the insertion point where you want the Submit button to appear and choose Form from the Insert menu.

    2. An empty form is created on the page. You may have to turn on Invisible Elements (View > Visual Aids > Invisible Elements) to see the form’s boundaries, which are represented by thin red lines.

  2. Name the HTML form by clicking the <form> tag at the bottom of the Document window to select the form, opening the Property inspector (Window > Properties), and entering a name in the Form Name box.

    3. You don’t have to specify an action or method attribute for the form to tell it where and how to send the record data when the user clicks the Submit button. The Delete Record server behavior sets these attributes for you.

  3. Add a Submit button to the form (Insert > Form Objects > Button).
  4. If you wish, change the label of the Submit button by selecting the button, opening the Property inspector (Window > Properties), and entering a new value in the Label box.

    5. For example, here’s the Property inspector of a button labeled “Delete Record”:
    This is a picture of the feature being described.

Next, you add the Delete Record server behavior to update the database table after the user clicks the Submit button.


Deleting the record from the database table

The final step is to add the Delete Record server behavior to update the database table after the user clicks the Submit button.

To add a server behavior to delete the database table:
  1. In the Server Behaviors panel (Window > Server Behaviors), click the plus (+) button and choose Delete Record from the pop-up menu.

    2. The Delete Record dialog box appears.
    This is a picture of the feature being described.

  2. Complete the dialog box.

    3. For more information, see:

    Setting the Delete Record dialog box options (ASP and JSP users)

    Setting the Delete Record dialog box options (ColdFusion users)

    Setting the Delete Record dialog box options (PHP users)

    Setting the Delete Record dialog box options (ASP.NET users)

  3. Click OK.

Dreamweaver adds a server behavior to the page that lets users delete records in a database table by clicking the Submit button on the form.


Using stored procedures to modify databases

You can use a stored procedure to modify a database. A stored procedure is a reusable database item that performs some operation on the database. A stored procedure contains SQL code that can, among other things, insert, update, or delete records. Stored procedures can also alter the structure of the database itself. For example, you can use a stored procedure to add a table column or even delete a table.

A stored procedure can also call another stored procedure, as well as accept input parameters and return multiple values to the calling procedure in the form of output parameters.

A stored procedure is reusable in the sense that you can reuse a single compiled version of the procedure to execute a database operation a number of times. If you know a database task will be executed more than a few times—or the same task will be executed by different applications—using a stored procedure to execute that task can make database operations more efficient.

Note: mySQL and Microsoft Access databases do not support stored procedures.

Before you use a stored procedure to modify a database, make sure the stored procedure contains SQL that modifies the database in some way. To create and store one in your database, consult your database documentation and a good Transact-SQL manual.

The procedure for using a stored procedure varies depending on your server model.


Running the stored procedure in ColdFusion

With Macromedia ColdFusion pages in Dreamweaver, you must add a Stored Procedure server behavior to a page to run a stored procedure.

To add a stored procedure to a ColdFusion page:
  1. In Dreamweaver, open the page that will run the stored procedure.
  2. In the Bindings panel, click the plus (+) button, and then select Stored Procedure.

    3. The Stored Procedure dialog box appears.
    This is a picture of the feature being described.

  3. Complete the dialog box.

    4. The dialog boxes for ColdFusion 4 and ColdFusion MX are different.

    For ColdFusion 4 instructions, see Setting the ColdFusion 4 Stored Procedure dialog box options. For ColdFusion MX instructions, see Setting the ColdFusion MX Stored Procedure dialog box options.

  4. Click OK.

After you close the Stored Procedure dialog box, Dreamweaver inserts ColdFusion code in your page that, when run on the server, calls a stored procedure in the database. The stored procedure in turn performs a database operation, such as inserting a record.

If the stored procedure takes parameters, you can create a page that gathers the parameter values and submits them to the page with the stored procedure. For example, you may create a page that uses URL parameters or an HTML form to gather parameter values from users.


Running the stored procedure in ASP

With ASP pages in Dreamweaver, you must add a command object to a page to run a stored procedure. For more information on command objects, see Understanding ASP command objects.

To add a stored procedure to an ASP page:
  1. In Dreamweaver, open the page that will run the stored procedure.
  2. In the Bindings panel, click the plus (+) button, and then select Command (Stored Procedure).

    3. The Command dialog box appears.

  3. Enter a name for the command, choose a connection to the database containing the stored procedure, then choose Stored Procedure from the Type pop-up menu.
  4. Choose your stored procedure by expanding the Stored Procedures branch in the Database Items box, choosing the stored procedure from the list, and clicking the Procedure button.
  5. Enter any required parameters in the Variables table.

    6. You don’t need to enter any parameters for any RETURN_VALUE variable.

  6. Click OK.

After you close the dialog box, Dreamweaver inserts ASP code in your page that, when run on the server, creates a command object that runs a stored procedure in the database. The stored procedure in turn performs a database operation, such as inserting a record.

By default, the code sets the Prepared property of the Command object to true, which makes the application server reuse a single compiled version of the object every time the stored procedure is run. If you know the command will be executed more than a few times, having a single compiled version of the object can improve the efficiency of database operations. However, if the command will only be executed one or two times, using one might actually slow down your web application because the system has to pause to compile the command. To change the setting, switch to Code view and change the Prepared property to false.

Note: Not all database providers support prepared commands. If your database does not support it, you might get an error message when you run the page. Switch to Code view and change the Prepared property to false.

If the stored procedure takes parameters, you might create a page that gathers the parameter values and submits them to the page with the stored procedure. For example, you may create a page that uses URL parameters or an HTML form to gather parameter values from users.


Running the stored procedure in ASP.NET

With ASP.NET pages in Dreamweaver, you must add a Stored Procedure server behavior to a page to execute a stored procedure.

To add a stored procedure to a ASP.NET page:
  1. In Dreamweaver, open the page that will run the stored procedure.
  2. In the Bindings panel, click the plus (+) button, and then select Stored Procedure.

    3. The Stored Procedure dialog box appears.
    This is a picture of the feature being described.

  3. Complete the dialog box.

    4. For more information, see Setting the Stored Procedure dialog box options.

  4. Click OK.

After you close the dialog box, Dreamweaver inserts ASP.NET code in your page that, when run on the server, executes a stored procedure in the database. The stored procedure in turn performs a database operation, such as inserting a record or executing a query.

If the stored procedure takes parameters, you might create a page that gathers the parameter values and submits them to the page with the stored procedure. For example, you may create a page that uses URL parameters or an HTML form to gather parameter values from users.


Running the stored procedure in JSP

With JSP pages in Dreamweaver, you must add a Callable server behavior to a page to run a stored procedure.

To add a stored procedure to a JSP page:
  1. In Dreamweaver, open the page that will run the stored procedure.
  2. In the Bindings panel, click the plus (+) button, and choose Callable (Stored Procedure).

    3. The Callable (Stored Procedure) dialog box appears.
    This is a picture of the feature being described.

  3. Complete the dialog box.

    4. For instructions, see Setting the Callable (Stored Procedure) dialog box options.

  4. Click OK.

After you close the Callable (Stored Procedure) dialog box, Dreamweaver inserts JSP code in your page that, when run on the server, calls a stored procedure in the database. The stored procedure in turn performs a database operation, such as inserting a record.

If the stored procedure takes parameters, you can create a page that gathers the parameter values and submits them to the page with the stored procedure. For example, you may create a page that uses URL parameters or an HTML form to gather parameter values from users.


Using ASP commands to modify a database

You can use Dreamweaver to create ASP command objects that insert, update, or delete records in a database. You supply the command object with the SQL statement that performs the operation on the database.

You can also supply the object with a stored procedures that performs the operation. For more information, see Running the stored procedure in ASP.


Understanding ASP command objects

A command object is a server object that performs some operation on a database. The object can contain any valid SQL statement, including one that returns a recordset, or one that inserts, updates, or deletes records in a database. A command object can alter the structure of a database if the SQL statement adds or deletes a column in a table. You can also use a command object to run a stored procedure in a database.

A command object can be reusable, in the sense that the application server can reuse a single compiled version of the object to execute the command a number of times. You make a command reusable by setting the Prepared property of the Command object to true, as in the following VBScript statement:

mycommand.Prepared = true

If you know the command will be executed more than a few times, having a single compiled version of the object can make database operations more efficient.

Note: Not all database providers support prepared commands. If your database does not support it, it might return an error when you set this property to true. It might even ignore the request to prepare the command and set the Prepared property to false.

A command object is created by scripts on an ASP page, but Dreamweaver lets you create command objects without writing a line of ASP code. The rest of this section describes how to use rapid application development (RAD) tools in Dreamweaver to create ASP command objects that edit database records.


Creating a command that uses SQL to edit a database

You can use an ASP command object that uses a SQL statement to insert, update, or delete records in a database.

To create the command object:
  1. In Dreamweaver, open the ASP page that will run the command.
  2. Open the Server Behaviors panel (Window > Server Behaviors), click the plus (+) button, and choose Command.

    3. The Command dialog box appears.

  3. Enter a name for the command, choose a connection to the database containing the records you want to edit, and choose the editing operation you want the command to perform—Insert, Update, or Delete.

    4. Dreamweaver starts the SQL statement for you based on the type of operation you choose. For example, here’s the dialog box after choosing Insert:
    This is a picture of the feature being described.

  4. Complete the SQL statement.

    5. For information on writing SQL statements that modify databases, consult a Transact-SQL manual.

  5. Use the Variables area to define any SQL variables.

    6. For example, below is an Insert statement that contains three SQL variables. The values of these variables are provided by URL parameters passed to the page, as defined in the Run-time Value column of the Variables area.
    This is a picture of the feature being described.

    After you close the dialog box, Dreamweaver inserts ASP code in your page that, when run on the server, creates a command that inserts, updates, or deletes records in the database.

    By default, the code sets the Prepared property of the Command object to true, which makes the application server reuse a single compiled version of the object every time the command is run. To change this setting, switch to Code view and change the Prepared property to false.

In the above example, next you would probably create a page with an HTML form so users could enter record data. The HTML form would contain three text fields (txtFirstName, txtLastName, and txtDept) and a submit button. As well, the form would use the GET method and submit the text field values to the page containing your command.


Using JSP prepared statements to modify a database

You can use Dreamweaver to create JSP prepared statements that insert, update, or delete records in a database. You supply the prepared statement with the SQL that performs the operation on the database.


Understanding JSP prepared statements

A JSP prepared statement is a reusable server object that contains a SQL statement. You can place any valid SQL statement in a prepared statement. For example, a prepared statement can contain a SQL statement that returns a recordset, or one that inserts, updates, or deletes records in a database.

A prepared statement is reusable in the sense that the application server uses a single instance of the prepared statement object to query the database a number of times. Unlike the JSP statement object, a new instance of the prepared statement object is not created for each new database query. If you know the statement will be executed more than a few times, having a single instance of the object can make database operations more efficient and take up less server memory.

A prepared statement object is created by a Java scriptlet on a JSP page. However, Dreamweaver lets you create prepared statements without writing a single line of Java code.

If you’re interested in the code, the following scriptlet creates a prepared statement:

String myquery = “SELECT * FROM EMPLOYEES WHERE DEPARTMENT = ?”;
PreparedStatement mystatement = connection.prepareStatement(myquery);

The first line stores the SQL statement in a string variable called myquery, with a question mark serving as a placeholder for the SQL variable value. The second line creates a prepared statement object called mystatement.

Next, you assign a value to the SQL variable, as follows:

mystatement.setString(1, request.getParameter(“myURLparam”));

The setString method assigns the value to the variable and takes two arguments. The first argument specifies the affected variable by its position (here, the first position in the SQL statement). The second argument specifies the variable’s value. In this example, the value is provided by a URL parameter passed to the page.

Note: You must use different methods to assign non-string values to SQL variables. For example, to assign an integer to the variable, you would use the mystatement.setInt() method.

Finally, you generate the recordset, as follows:

ResultSet myresults = mystatement.execute();

The rest of this section describes how to create JSP prepared statements using rapid application development (RAD) tools in Dreamweaver. These tools let you create prepared statements without writing a line of JSP code.


Creating a prepared statement that edits a database record

You can use a JSP prepared statement to insert, update, or delete records in a database.

To create the prepared statement:
  1. In Dreamweaver, open the JSP page that will run the command.
  2. Open the Server Behaviors panel (Window > Server Behaviors), click the plus (+) button, and choose Prepared (Insert, Update, Delete).

    3. The Prepared (Insert, Update, Delete) dialog box appears:
    This is a picture of the feature being described.

  3. Complete the dialog box.

    4. For instructions, see Setting the Prepared (Insert, Update, Delete) dialog box options.

  4. Click OK.

After you close the dialog box, Dreamweaver inserts JSP code in your page that, when run on the server, creates a prepared statement that inserts, updates, or deletes records in the database.


Setting the Record Insertion Form dialog box options

The purpose of this dialog box is to build a page that enables users to insert new records in a database.

Procedure
  1. In the Connection pop-up menu, select a connection to the database containing the stored procedure.

    2. Click the Define button if you need to define a connection.

  2. In the Insert Into Table pop-up menu, select the database table into which the record should be inserted.
  3. If you use ColdFusion, enter a user name and password.
  4. In the After Inserting, Go To text box, enter the page to open after the record is inserted into the table or click the Browse button to browse to the file.
  5. If you use ASP.NET, you can specify a page to go to on success, and a page to go to on failure. Or you can choose to display debugging information upon failure.

    6. If you select Display Debugging Information on Failure, Dreamweaver ignores the On Failure, Go To option.

    Tip: Use the Display Debugging Information on Failure option during development, and then use the On Failure, Go To option when your page is live.

  6. In the Form Fields area, specify the form objects you want to include on the insert page’s HTML form, and which columns in your database table each form object should update.

    7. By default, Dreamweaver creates a form object for each column in the database table. If your database automatically generates unique key IDs for each new record created, remove the form object corresponding to the key column by selecting it in the list and clicking the minus (-) button. This eliminates the risk that the user of the form will enter an ID value that already exists.

    You can also change the order of the form objects on the HTML form by selecting a form object in the list and clicking the up or down arrow on the right side of the dialog box.

  7. Specify how each data-entry field should be displayed on the HTML form by clicking a row in the Form Fields table and entering the following information in the boxes below the table:
    • In the Label text box, enter a descriptive label to display beside the data-entry field. By default, Dreamweaver displays the table column’s name in the label.
    • In the Display As pop-up menu, choose a form object to serve as the data-entry field. You can choose Text Field, Text Area, Menu, Checkbox, Radio Group, and Text. For read-only entries, choose Text. You can also choose Password Field, File Field, and Hidden Field.

      • Note: Hidden fields are inserted at the end of the form.

    • In the Submit As pop-up menu, choose the data format accepted by your database table. For example, if the table column only accepts numeric data, choose Numeric.
    • Set the form object’s properties. You have different options depending on the form object you choose as your data-entry field. For text fields, text areas, and text, you can enter an initial value. For menus and radio groups, you open another dialog box to set the properties. For checkboxes, select the Checked or Unchecked option.
    • If you use ASP.NET, you can choose to use web form control.
  8. Click OK.

Dreamweaver adds both an HTML form and an Insert Record server behavior to your page.

Related topics

Building an insert page rapidly

Setting the Dynamic Radio Group dialog box options: ColdFusion

Setting the Dynamic Radio Group dialog box options

Setting the Dynamic Text Field dialog box options

“Creating URL parameters using HTML links” on page 861Completing the Dynamic Check Box dialog box

Setting the Dynamic List/Menu dialog box options


Setting the Form Element Properties dialog box options

The purpose of this dialog box is to set properties for form elements on pages that lets users update records in a database.

Procedure
  1. Select either Manually or From Database, depending on how you plan to create the form element.
  2. Click the plus (+) button to add an element.
  3. Enter a label and value for the element.
  4. In the Select Value Equal To text box, if you want a particular element selected when the page opens in a browser or when a record displays in the form, enter a value equal to the element’s value.

    5. You can enter a static value or you can specify a dynamic value by clicking the lightening bolt icon, then selecting a dynamic value from the list of data sources. In either case, the value you specify should match one of the element’s values.


Setting the Insert Record dialog box options

The purpose of this dialog box is to add a server behavior to a page containing an HTML form so that users can insert records in a database table when they click the Submit button on the form.

Before adding this server behavior, the page must contain an HTML form with a Submit button.

Procedure
  1. In the Connection pop-up menu, select a connection to the database containing the stored procedure.

    2. Click the Define button if you need to define a connection.

  2. In the Insert Into Table pop-up menu, select the database table into which the record should be inserted.
  3. In the After Inserting, Go To box, enter the page to open after the record is inserted into the table or click Browse to browse to the file.
  4. In the Get Values From pop-up menu, choose the HTML form used to enter the data.

    5. Dreamweaver automatically chooses the first form on your page.

  5. Specify a database column to insert the record in, choose the form object that will insert the record from the Value pop-up menu, and then choose a data type for the form object from the Submit As pop-up menu.

    6. The data type is the kind of data the column in your database table is expecting (text, numeric, Boolean checkbox values).

    Repeat the procedure for each form object in your form.

  6. Click OK.

Dreamweaver adds a server behavior to the page that lets users insert records in a database table by filling out the HTML form and clicking the Submit button.

Related topic

Building an insert page block by block


Setting the Insert Record dialog box options

The purpose of this dialog box is to add a server behavior to a page containing an HTML form so that users can insert records in a database table when they click the Submit button on the form.

Before adding this server behavior, the page must contain an HTML form with a Submit button.

Procedure
  1. Select a form from the Submit Values From pop-up menu.
  2. In the Connection pop-up menu, select a connection to the database containing the stored procedure.
  3. In the Insert Table pop-up menu, select the database table to insert the record in.
  4. Specify a database column to insert the record in, choose the form object that will insert the record from the Value pop-up menu, and then choose a data type for the form object from the Submit As pop-up menu.

    5. The data type is the kind of data the column in your database table is expecting (text, numeric, Boolean checkbox values).

    Repeat the procedure for each form object in your form.

  5. In the After Inserting, Go To text box, enter the page to open after the record is inserted in the table or click the Browse button to browse to the file.
  6. Click OK.

Dreamweaver adds a server behavior to the page that lets users insert records in a database table by filling out the HTML form and clicking the Submit button.

Related topic

Building an insert page block by block


Setting the Insert Record dialog box options

The purpose of this dialog box is to add a server behavior to a page containing an HTML form so that users can insert records in a database table when they click the Submit button on the form.

Before adding this server behavior, the page must contain an HTML form with a Submit button.

Procedure
  1. Select a form from the Submit Values From pop-up menu.
  2. In the Data Source pop-up menu, select a connection to the database containing the stored procedure.
  3. Enter your user name and password.
  4. In the Insert Into Table pop-up menu, select the database table to insert the record in.
  5. Specify a database column to insert the record in, choose the form object that will insert the record from the Value pop-up menu, and then choose a data type for the form object from the Submit As pop-up menu.

    6. The data type is the kind of data the column in your database table is expecting (text, numeric, Boolean checkbox values).

    Repeat the procedure for each form object in your form.

  6. In the After Inserting, Go To text box, enter the page to open after the record is inserted in the table or click the Browse button to browse to the file.
  7. Click OK.

Dreamweaver adds a server behavior to the page that lets users insert records in a database table by filling out the HTML form and clicking the Submit button.

Related topic

Building an insert page block by block


Setting the Insert Record on Form Submit dialog box options

The purpose of this dialog box is to add a server behavior to a page containing an HTML form so that users can insert records in a database table when they click the Submit button on the form.

Before adding this server behavior, the page must contain an HTML form with a Submit button.

Procedure
  1. Select a form from the Submit Values From pop-up menu.
  2. In the Connection pop-up menu, select a connection to the database containing the stored procedure.

    3. Click the Define button if you need to define a connection.

  3. In the Insert Into Table pop-up menu, select the database table to insert the record in.
  4. Specify a database column to insert the record in, choose the form object that will insert the record from the Value pop-up menu, and then choose a data type for the form object from the Submit As pop-up menu.

    5. The data type is the kind of data the column in your database table is expecting (text, numeric, Boolean checkbox values).

    Repeat the procedure for each form object in your form.

  5. In the On Success, Go To text box, enter the location of a page to display after the stored procedure runs successfully or click the Browse button to browse to the location.
  6. In the On Failure, Go To text box, enter the location of a page to display if the stored procedure fails or click the Browse button to browse to the location.
  7. Select the Display Debugging Information on Failure checkbox if you want debugging information when the stored procedure fails.

    8. When you select this option, Dreamweaver ignores the On Failure, Go To option.

    Tip: Use the debugging option during development, and then use the On Failure, Go To option when your site is live.

  8. Click OK.

Dreamweaver adds a server behavior to the page that lets users insert records in a database table by filling out the HTML form and clicking the Submit button.

Related topic

Building an insert page block by block


Setting the Record Update Form dialog box options

The purpose of this dialog box is to build a page that lets users update records in a database.

Procedure

Before starting, you must complete the following tasks:

  • You must build one or more pages that let the user find the record they want to update. For more information, see Identifying the record to update.
  • You must add logic to the update page allowing it to retrieve the user’s chosen record from the database in preparation for updating. For instructions, see Retrieving the record to update.

With these prerequisites in place, you can complete the dialog box as follows:

  1. In the Connection pop-up menu, select a connection to the database containing the stored procedure.

    2. Click the Define button if you need to define a connection.

  2. In the Table to Update pop-up menu, select the database table that contains the record to update.
  3. In the Select Record From pop-up menu, specify the recordset that contains the record displayed in the HTML form.
  4. In the Unique Key Column pop-up menu, select a key column (usually the record ID column) to identify the record in the database table.

    5. If the value is a number, select the Numeric option. A key column usually accepts only numeric values, but sometimes it accepts text values.

  5. In the After Updating, Go To text box, enter the page to open after the record updates in the table.
  6. In the Form Fields area, specify which columns in your database table each form object should update.

    7. By default, Dreamweaver creates a form object for each column in the database table. If your database automatically generates unique key IDs for each new record created, remove the form object corresponding to the key column by selecting it in the list and clicking the minus (-) button. This eliminates the risk that the user of the form will enter an ID value that already exists.

    You can also change the order of the form objects on the HTML form by selecting a form object in the list and clicking the up or down arrow on the right side of the dialog box.

  7. Specify how each data-entry field should appear on the HTML form by clicking a row in the Form Fields table and entering the following information in the boxes below the table:
    • In the Label box, enter a descriptive label to display beside the data-entry field. By default, Dreamweaver displays the table column’s name in the label.
    • In the Display As pop-up menu, choose a form object to serve as the data-entry field. You can choose Text Field, Text Area, Menu, Checkbox, Radio Group, and Text. For read-only entries, choose Text. You can also choose Password Field, File Field, and Hidden Field.

      • Note: Hidden fields are inserted at the end of the form.

    • In the Submit As pop-up menu, choose the data format expected by your database table. For example, if the table column only accepts numeric data, choose Numeric.
    • Set the form object’s properties. You have different options depending on the form object you choose as your data-entry field. For text fields, text areas, and text, you can enter an initial value. For menus and radio groups, you open another dialog box to set the properties. For checkboxes, select the Checked or Unchecked option.
  8. Set the properties of other form objects by selecting another Form Fields row and entering a label, display as value, and submit as value.

    9. For menus and radio groups, open another dialog box to set the properties. For checkboxes, define a comparison between the current record’s value for the checkbox and a given value to determine whether the checkbox is checked or not when the record is displayed.

  9. Click OK.

Dreamweaver adds both an HTML form and an Update Record server behavior to your page.

Related topics

Completing the update page rapidly

Setting the Dynamic Radio Group dialog box options: ColdFusion

Setting the Dynamic Radio Group dialog box options

Setting the Dynamic Text Field dialog box options

“Creating URL parameters using HTML links” on page 861Completing the Dynamic Check Box dialog box

Setting the Dynamic List/Menu dialog box options


Setting the Record Update Form dialog box options

The purpose of this dialog box is to build a page that lets users update records in a database.

Procedure

Before starting, you must complete the following tasks:

  • You must build one or more pages that let the user find the record they want to update. For more information, see Identifying the record to update.
  • You must add logic to the update page allowing it to retrieve the user’s chosen record from the database in preparation for updating. For instructions, see Retrieving the record to update.

With these prerequisites in place, you can complete the dialog box as follows:

  1. In the Connection pop-up menu, select a connection to the database containing the stored procedure.

    2. Click the Define button if you need to define a connection.

  2. In the Table pop-up menu, select the database table that contains the record to update.
  3. In the Select Record From pop-up menu, specify the recordset that contains the record displayed in the HTML form.
  4. In the Unique Key Column pop-up menu, select a key column (usually the record ID column) to identify the record in the database table.
  5. In the Submit Unique Key As pop-up menu, select a data type.
  6. In the On Success, Go To text box, enter the location of a page to display after the stored procedure runs successfully or click the Browse button to browse to the location.
  7. In the On Failure, Go To text box, enter the location of a page to display if the stored procedure fails or click the Browse button to browse to the location.
  8. Select the Display Debugging Information on Failure checkbox if you want debugging information when the stored procedure fails.

    9. When you select this option, Dreamweaver ignores the On Failure, Go To option.

    Tip: Use the debugging option during development, and then use the On Failure, Go To option when your site is live.

  9. In the Form Fields area, specify which columns in your database table each form object should update.

    10. By default, Dreamweaver creates a form object for each column in the database table. If your database automatically generates unique key IDs for each new record created, remove the form object corresponding to the key column by selecting it in the list and clicking the minus (-) button. This eliminates the risk that the user of the form will enter an ID value that already exists.

    You can also change the order of the form objects on the HTML form by selecting a form object in the list and clicking the up or down arrow on the right side of the dialog box.

  10. Specify how each data-entry field should appear on the HTML form by clicking a row in the Form Fields table and entering the following information in the boxes below the table:
    • In the Label box, enter a descriptive label to display beside the data-entry field. By default, Dreamweaver displays the table column’s name in the label.
    • In the Display As pop-up menu, choose a form object to serve as the data-entry field. You can choose Text Field, Text Area, Menu, Checkbox, Radio Group, and Text. For read-only entries, choose Text. You can also choose Password Field, File Field, and Hidden Field.

      • Note: Hidden fields are inserted at the end of the form.

    • In the Submit As pop-up menu, choose the data format expected by your database table. For example, if the table column only accepts numeric data, choose Numeric.
    • Set the form object’s properties. You have different options depending on the form object you choose as your data-entry field. For text fields, text areas, and text, you can enter an initial value. For menus and radio groups, you open another dialog box to set the properties. For checkboxes, select the Checked or Unchecked option.
  11. Set the properties of other form objects by selecting another Form Fields row and entering a label, display as value, and submit as value.

    12. For menus and radio groups, open another dialog box to set the properties. For checkboxes, define a comparison between the current record’s value for the checkbox and a given value to determine whether the checkbox is checked or not when the record is displayed.

  12. Click OK.

Dreamweaver adds both an HTML form and an Update Record server behavior to your page.

Related topics

Completing the update page rapidly

Setting the Dynamic Radio Group dialog box options: ColdFusion

Setting the Dynamic Radio Group dialog box options

Setting the Dynamic Text Field dialog box options

“Creating URL parameters using HTML links” on page 861Completing the Dynamic Check Box dialog box

Setting the Dynamic List/Menu dialog box options


Setting the Update Record dialog box options

The purpose of this dialog box is to add a server behavior to a page containing an HTML form so that users can update a record in a database table when they click the Submit button on the form.

Before starting, you must complete the following tasks:

  • You must build one or more pages that let the user find the record they want to update. For more information, see Identifying the record to update.
  • You must add logic to the update page allowing it to retrieve the user’s chosen record from the database in preparation for updating. For instructions, see Retrieving the record to update.
  • You must add an HTML form to the update page to let users modify the data. For instructions, see Completing the update page block by block.

With these prerequisites in place, you can complete the Update Record dialog box.

Procedure
  1. In the Connection pop-up menu, select a connection to the database containing the stored procedure.

    2. Click the Define button if you need to define a connection.

  2. In the Table to Update pop-up menu, select the database table that contains the record you are updating.
  3. In the Select Record From pop-up menu, specify the recordset that contains the record displayed in the HTML form.
  4. In the Unique Key Column pop-up menus, select a key column (usually the record ID column) to identify the record in the database table.

    5. Select the Numeric option if the value is a number. A key column usually accepts only numeric values, but sometimes it accepts text values.

  5. In the After Updating, Go To text box, enter the page to open after the record has been updated in the table.
  6. In the Get Values From pop-up menu, choose the HTML form used to edit the record data.

    7. Dreamweaver automatically chooses the first form on your page.

  7. Specify a database column to update, choose the form object that will update the column from the Value pop-up menu, and then choose a data type for the form object from the Submit As pop-up menu.

    8. The data type is the kind of data the column in your database table is expecting (text, numeric, Boolean checkbox values).

    Repeat the procedure for each form object in your form.

  8. Click OK.

Dreamweaver adds a server behavior to the page that lets users update records in a database table by modifying the information displayed in the HTML form and clicking the Submit button.

Related topic

Completing the update page block by block


Setting the Update Record dialog box options

The purpose of this dialog box is to add a server behavior to a page containing an HTML form so that users can update a record in a database table when they click the Submit button on the form.

Before starting, you must complete the following tasks:

  • You must build one or more pages that let the user find the record they want to update. For more information, see Identifying the record to update.
  • You must add logic to the update page allowing it to retrieve the user’s chosen record from the database in preparation for updating. For instructions, see Retrieving the record to update.
  • You must add an HTML form to the update page to let users modify the data. For instructions, see Completing the update page block by block.

With these prerequisites in place, you can complete the Update Record dialog box.

Procedure
  1. Select a form from the Submit Values From pop-up menu.
  2. In the Data Source pop-up menu, select a connection to the database containing the stored procedure.
  3. Enter your user name and password.
  4. In the Update Table pop-up menu, select the database table that contains the record you are updating.
  5. Specify a database column to update, choose the form object that will update the column from the Value pop-up menu, choose a data type for the form object from the Submit As pop-up menu, and select Primary Key if you want to identify this column as the primary key.

    6. The data type is the kind of data the column in your database table is expecting (text, numeric, Boolean checkbox values).

    Repeat the procedure for each form object in your form.

  6. In the After Updating, Go To box, enter the page to open after the record updates in the table or click the Browse button to browse to the file.
  7. Click OK.

Dreamweaver adds a server behavior to the page that lets users update records in a database table by modifying the information displayed in the HTML form and clicking the Submit button.

Related topic

Completing the update page block by block


Setting the Update Record dialog box options

The purpose of this dialog box is to add a server behavior to a page containing an HTML form so that users can update a record in a database table when they click the Submit button on the form.

Before starting, you must complete the following tasks:

  • You must build one or more pages that let the user find the record they want to update. For more information, see Identifying the record to update.
  • You must add logic to the update page allowing it to retrieve the user’s chosen record from the database in preparation for updating. For instructions, see Retrieving the record to update.
  • You must add an HTML form to the update page to let users modify the data. For instructions, see Completing the update page block by block.

With these prerequisites in place, you can complete the Update Record dialog box.

Procedure
  1. Select a form from the Submit Values From pop-up menu.
  2. In the Connection pop-up menu, select a connection to the database containing the stored procedure.
  3. In the Update Table pop-up menu, select the database table that contains the record you are updating.
  4. Specify a database column to update, choose the form object that will update the column from the Value pop-up menu, choose a data type for the form object from the Submit As pop-up menu, and select Primary Key if you want to identify this column as the primary key.

    5. The data type is the kind of data the column in your database table is expecting (text, numeric, Boolean checkbox values).

    Repeat the procedure for each form object in your form.

  5. In the After Updating, Go To box, enter the page to open after the record updates in the table or click the Browse button to browse to the file.
  6. Click OK.

Dreamweaver adds a server behavior to the page that lets users update records in a database table by modifying the information displayed in the HTML form and clicking the Submit button.

Related topic

Completing the update page block by block


Setting the Update Record dialog box options

The purpose of this dialog box is to add a server behavior to a page containing an HTML form so that users can update a record in a database table when they click the Submit button on the form.

Before starting, you must complete the following tasks:

  • You must build one or more pages that let the user find the record they want to update. For more information, see Identifying the record to update.
  • You must add logic to the update page allowing it to retrieve the user’s chosen record from the database in preparation for updating. For instructions, see Retrieving the record to update.
  • You must add an HTML form to the update page to let users modify the data. For instructions, see Completing the update page block by block.

With these prerequisites in place, you can complete the Update Record dialog box

Procedure
  1. Select a form from the Submit Values From pop-up menu.
  2. In the Connection pop-up menu, select a connection to the database containing the stored procedure.

    3. Click the Define button if you need to define a connection.

  3. In the Update Table pop-up menu, select the database table that contains the record you are updating.
  4. Specify a database column to update, choose the form object that will update the column from the Value pop-up menu, choose a data type for the form object from the Submit As pop-up menu, and select Primary Key if you want to identify this column as the primary key.

    5. The data type is the kind of data the column in your database table is expecting (text, numeric, Boolean checkbox values).

    Repeat the procedure for each form object in your form.

  5. In the On Success, Go To text box, enter the location of a page to display after the stored procedure runs successfully or click the Browse button to browse to the location.
  6. In the On Failure, Go To text box, enter the location of a page to display if the stored procedure fails or click the Browse button to browse to the location.
  7. Select the Display Debugging Information on Failure checkbox if you want debugging information when the stored procedure fails.

    8. When you select this option, Dreamweaver ignores the On Failure, Go To option.

    Tip: Use the debugging option during development, and then use the On Failure, Go To option when your site is live.

  8. Click OK.

Dreamweaver adds a server behavior to the page that lets users update records in a database table by modifying the information displayed in the HTML form and clicking the Submit button.

Related topic

Completing the update page block by block


Setting the Delete Record dialog box options

The purpose of this dialog box is to add a server behavior to a page containing an HTML form so that users can delete a record in a database table when they click the Submit button on the form.

Before starting, you must complete the following tasks:

  • You must build one or more pages that let the user find the record they want to delete. For more information, see Identifying the record to delete.
  • You must add logic to the delete page allowing it to retrieve the user’s chosen record from the database in preparation for deletion. For instructions, see Retrieving the record to delete.

    • Optionally, you can display the record on the page so the user can view it before deleting it. For instructions, see Displaying the data to be deleted.

  • You must add an HTML form with a Submit button to the delete page to send the delete command to the server. For instructions, see Sending the delete command to the server.

With these prerequisites in place, you can complete the Delete Record dialog box.

Procedure
  1. In the Connection pop-up menu, select a connection to the database containing the stored procedure.

    2. Click the Define button if you need to define a connection.

  2. In the Delete from Table pop-up menu, select the database table that contains the record to delete.
  3. In the Select Record From pop-up menu, specify the recordset that contains the record to delete.
  4. In the Unique Key Column pop-up menu, select a key column (usually the record ID column) to identify the record in the database table.

    5. If the value is a number, select the Numeric option. A key column usually accepts only numeric values, but sometimes it accepts text values.

  5. In the Delete By Submitting pop-up menu, specify the HTML form with the Submit button that sends the delete command to the server.
  6. In the After Deleting, Go To box, enter the page to open after the record is deleted from the database table or click the Browse button to browse to the file.

    7. Dreamweaver automatically chooses the first form on your page.

  7. Click OK.

Dreamweaver adds a server behavior to the page that lets users delete records in a database table by clicking the Submit button on the form.


Setting the Delete Record dialog box options

The purpose of this dialog box is to add a server behavior to a page containing an HTML form so that users can delete a record in a database table when they click the Submit button on the form.

Before starting, you must complete the following tasks:

  • You must build one or more pages that let the user find the record they want to delete. For more information, see Identifying the record to delete.
  • You must add logic to the delete page allowing it to retrieve the user’s chosen record from the database in preparation for deletion. For instructions, see Retrieving the record to delete.

    • Optionally, you can display the record on the page so the user can view it before deleting it. For instructions, see Displaying the data to be deleted.

  • You must add an HTML form with a Submit button to the delete page to send the delete command to the server. For instructions, see Sending the delete command to the server.

With these prerequisites in place, you can complete the Delete Record dialog box.

Procedure
  1. In the First Check If Variable Is Defined pop-up menu, select Primary Key Value.

    2. If you want to check a variable other than the variable identifying the record to delete, then select the variable, and enter its name.

    Dreamweaver checks to see if that variable is defined.

  2. In the Data Source pop-up menu, select a connection to the database containing the stored procedure.
  3. Enter your user name and password.
  4. In the Table pop-up menu, select the database table containing the records to delete.
  5. In the Primary Key Column pop-up menu, select a key column to identify the record in the database table.

    6. If the value is a number, select the Numeric option. A key column usually accepts only numeric values, but sometimes it accepts text values.

  6. In the Primary Key Value pop-up menu, select the variable identifying the record to delete, and then enter its name.
  7. In the After Deleting, Go To box, enter the page to open after the record is deleted from the database table or click the Browse button to browse to the file.
  8. Click OK.

Dreamweaver adds a server behavior to the page that lets users delete records in a database table by clicking the Submit button on the form.


Setting the Delete Record dialog box options

The purpose of this dialog box is to add a server behavior to a page containing an HTML form so that users can delete a record in a database table when they click the Submit button on the form.

Before starting, you must complete the following tasks:

  • You must build one or more pages that let the user find the record they want to delete. For more information, see Identifying the record to delete.
  • You must add logic to the delete page allowing it to retrieve the user’s chosen record from the database in preparation for deletion. For instructions, see Retrieving the record to delete.

    • Optionally, you can display the record on the page so the user can view it before deleting it. For instructions, see Displaying the data to be deleted.

  • You must add an HTML form with a Submit button to the delete page to send the delete command to the server. For instructions, see Sending the delete command to the server.

With these prerequisites in place, you can complete the Delete Record dialog box.

Procedure
  1. In the Delete By Submitting pop-up menu, specify the HTML form with the Submit button that sends the delete command to the server.
  2. In the Connection pop-up menu select a connection to the database containing the stored procedure.
  3. In the Table pop-up menu, select the database table containing the records to delete.
  4. In the Primary Key Column pop-up menu, select a key column to identify the record in the database table.
  5. In the Value pop-up menu, specify the variable identifying the record to delete.
  6. In the After Deleting, Go To text box, enter the page to open after the record is deleted from the database table or click the Browse button to browse to the file.
  7. Click OK.

Dreamweaver adds a server behavior to the page that lets users delete records in a database table by clicking the Submit button on the form.


Setting the Delete Record dialog box options

The purpose of this dialog box is to add a server behavior to a page containing an HTML form so that users can delete a record in a database table when they click the Submit button on the form.

Before starting, you must complete the following tasks:

  • You must build one or more pages that let the user find the record they want to delete. For more information, see Identifying the record to delete.
  • You must add logic to the delete page allowing it to retrieve the user’s chosen record from the database in preparation for deletion. For instructions, see Retrieving the record to delete.

    • Optionally, you can display the record on the page so the user can view it before deleting it. For instructions, see Displaying the data to be deleted.

  • You must add an HTML form with a Submit button to the delete page to send the delete command to the server. For instructions, see Sending the delete command to the server.

With these prerequisites in place, you can complete the Delete Record dialog box.

Procedure
  1. In the First Check If Variable Is Defined pop-up menu, select Primary Key Value.

    2. If you want to check a variable other than the variable identifying the record to delete, then select the variable, and enter its name.

    Dreamweaver checks to see if that variable is defined.

  2. In the Connection pop-up menu, select a connection to the database containing the stored procedure.

    3. Click the Define button if you need to define a connection.

  3. In the Table pop-up menu, select the database table containing the records to delete.
  4. In the Primary Key Column pop-up menu, select a key column to identify the record in the database table.
  5. In the Submit Primary Key As pop-up menu, select a data type.

    6. The data type is the kind of data the column in your database table is expecting (text, numeric, Boolean checkbox values).

  6. In the Primary Key Value pop-up menu, select the variable identifying the record to delete, and then enter its name.
  7. In the On Success, Go To text box, enter the location of a page to display after the stored procedure runs successfully or click the Browse button to browse to the location.
  8. In the On Failure, Go To text box, enter the location of a page to display if the stored procedure fails or click the Browse button to browse to the location.
  9. Select the Display Debugging Information on Failure checkbox if you want debugging information when the stored procedure fails.

    10. When you select this option, Dreamweaver ignores the On Failure, Go To option.

    Tip: Use the debugging option during development, and then use the On Failure, Go To option when your site is live.

  10. Click OK.

Dreamweaver adds a server behavior to the page that lets users delete records in a database table by clicking the Submit button on the form.


Setting the Command (Stored Procedure) dialog box options

The purpose of this dialog box is to insert an ASP command object into your page.

What do you want to do?

  • Learn about ASP command objects, see Understanding ASP command objects.
  • Use a SQL statement with the command object, seeCreating a command that uses SQL to edit a database.
  • Use a stored procedure with the command object, see Running the stored procedure in ASP.

Related topic

Using stored procedures to modify databases


Setting the ColdFusion 4 Stored Procedure dialog box options

The purpose of this dialog box is to insert a stored procedure into your ColdFusion page.

Procedure
  1. Enter a name for the stored procedure.
  2. Choose a connection to the database containing the stored procedure.

    3. Click the Define button if you need to define a connection.

  3. Select the Returns Recordset Named checkbox, then enter a name for the recordset, if the stored procedure returns a recordset, and then click the Test button to see the recordset that the stored procedure returns.

    4. Dreamweaver runs the stored procedure and displays the recordset, if any.

    Note: If the stored procedure returns a recordset and takes parameters, you must enter a value in the Default Value column in the Variables box to test the stored procedure.

  4. Choose your stored procedure by expanding the Stored Procedures branch in the Database Items box, choosing the stored procedure from the list, and clicking the Procedure button.

    5. Dreamweaver automatically fills in the Procedure and Variables boxes.

  5. Click the plus (+) sign to enter any required parameters in the Variables table.

    6. You don’t need to enter any parameters for any RETURN_VALUE variable.

    Note: You must enter test values for any Stored Procedure input parameters.

  6. Click OK.

After you close the Stored Procedure dialog box, Dreamweaver inserts ColdFusion code in your page that, when run on the server, calls a stored procedure in the database. The stored procedure in turn performs a database operation, such as inserting a record.

Related topics

Using stored procedures to modify databases

Running the stored procedure in ColdFusion


Setting the ColdFusion MX Stored Procedure dialog box options

The purpose of this dialog box is to insert a stored procedure into your ColdFusion page.

Procedure
  1. In the Data Source pop-up menu, select a connection to the database containing the stored procedure.
  2. Enter the ColdFusion Data Source user name and password.
  3. Select a stored procedure from the Procedures pop-up menu.

    4. Dreamweaver automatically fills in any parameters.

  4. Select a parameter, then click the Edit button if you need to make changes.

    5. The Edit Stored Procedure Variable dialog box appears. To complete the dialog box, see Setting Stored Procedure Variable dialog box options.

    Note: You must enter test values for any Stored Procedure input parameters.

  5. If the Stored Procedure takes a parameter, click the plus button to add a page parameter.

    6. The Add Parameter dialog box appears. To complete the dialog box, see Setting the Add or Edit Parameter dialog box options.

    Note: You must enter corresponding page parameters for each Stored Procedure parameter return value. Do not add page parameters unless there is a corresponding return value.

    Click the plus (+) button again to add another page parameter, if necessary.

  6. Select a page parameter, then click the minus (-) button to delete the parameter if necessary or click Edit to make changes to the parameter.

    7. The Edit Parameter dialog box appears. To complete the dialog box, see Setting the Add or Edit Parameter dialog box options.

  7. Select the Returns Recordset Named checkbox, then enter a name for the recordset, if the stored procedure returns a recordset, and then click the Test button to see the recordset that the stored procedure returns.

    8. Dreamweaver runs the stored procedure and displays the recordset, if any.

    Note: If the stored procedure returns a recordset and takes parameters, you must enter a value in the Default Value column in the Variables box to test the stored procedure.

    Tip: You can use different test values to generate different recordsets. To change test values, click the Edit button for Parameter, then change the Test Value or click the Edit button for Page Parameter, then change the Default value.

  8. Select the Returns Status Code Named checkbox, then enter a name for the status code, if the stored procedure returns a status code return value.
  9. Click OK.

After you close the Stored Procedure dialog box, Dreamweaver inserts ColdFusion code in your page that, when run on the server, calls a stored procedure in the database. The stored procedure in turn performs a database operation, such as inserting a record.

Related topics

Using stored procedures to modify databases

Running the stored procedure in ColdFusion


Setting Stored Procedure Variable dialog box options

The purpose of this dialog box is to add or edit stored procedure parameters.

Procedure
  1. The name of the variable you are editing appears in the Name field.
  2. Select a Direction from the pop-up menu.

    3. A stored procedure might have input values, output values, or both input and output values.

  3. Select an SQL type from the pop-up menu.
  4. Enter a return variable.
  5. Enter a runtime value.
  6. Enter a test value.

Related topics

Setting the ColdFusion MX Stored Procedure dialog box options

Running the stored procedure in ColdFusion


Setting the Stored Procedure dialog box options

The purpose of this dialog box is to insert a stored procedure into your ASP.NET page.

Procedure
  1. Enter a name for the stored procedure.
  2. In the Connection pop-up menu, select a connection to the database containing the stored procedure.

    3. Click the Define button if you need to define a connection.

  3. Select a stored procedure from the Procedures pop-up menu.

    4. Dreamweaver automatically fills in any parameters.

  4. Select the Returns DataSet checkbox if the stored procedure returns a recordset, and then click the Test button to see the recordset the stored procedure returns.
  5. Select a parameter, then click the Edit button if you need to make changes or click the Delete button to delete the parameter.

    6. For more information, see Setting Edit Stored Procedure Variable dialog box options.

  6. In the On Success, Go To text box, enter the location of a page to display after the stored procedure runs successfully or click the Browse button to browse to the location.
  7. In the On Failure, Go To text box, enter the location of a page to display if the stored procedure fails or click the Browse button to browse to the location.
  8. Select the Display Debugging Information on Failure checkbox if you want debugging information when the stored procedure fails.

    9. When you select this option, Dreamweaver ignores the On Failure, Go To option.

    Tip: Use the debugging option during development, and then use the On Failure, Go To option when your site is live.

  9. Click OK.

After you close the Stored Procedure dialog box, Dreamweaver inserts ASP.NET code in your page that, when run on the server, calls a stored procedure in the database. The stored procedure in turn performs a database operation, such as inserting a record.

Related topics

Using stored procedures to modify databases

Running the stored procedure in ASP.NET


Setting Edit Stored Procedure Variable dialog box options

The purpose of this dialog box is to edit stored procedure parameters. You can change values as necessary.

Procedure
  1. The name of the variable you are editing appears in the Name field.
  2. Select the variable type from the pop-up menu.
  3. Enter the size of the variable.
  4. Select a direction from the pop-up menu.

    5. A stored procedure might have input values, output values, or both input and output values.

  5. Enter a test value.
  6. Enter a value.
  7. Click the Build button to build the value.

    8. The Build Value dialog box appears. To complete the dialog box, see Setting the Build Value dialog box options.

  8. Click OK.

Related topics

Setting the Stored Procedure dialog box options

Running the stored procedure in ASP.NET


Setting the Build Value dialog box options

The purpose of this dialog box is to build your stored procedure value.

Procedure
  1. Select a source from the pop-up menu.
  2. Enter a default value.
  3. Click OK.

Related topics

Setting Edit Stored Procedure Variable dialog box options

Setting the Stored Procedure dialog box options

Running the stored procedure in ASP.NET


Setting the Callable (Stored Procedure) dialog box options

The purpose of this dialog box is to insert a stored procedure into your JSP page.

Procedure
  1. Enter a name for the stored procedure.
  2. In the Connections pop-up menu, choose a connection to the database containing the stored procedure.
  3. In the Database Items text box, expand the Stored Procedures branch, select the stored procedure from the list, and click the Procedure button.

    4. Dreamweaver automatically fills in the Callable Text and Variables boxes.

  4. Select the Returns Recordset Named checkbox, then enter a name for the recordset, if the stored procedure returns a recordset, and then click the Test button to see the recordset that the stored procedure returns.

    5. Dreamweaver runs the stored procedure and displays the recordset, if any.

    Note: If the stored procedure returns a recordset and takes parameters, you must enter a value in the Default Value column in the Variables box to test the stored procedure.

After you close the Callable (Stored Procedure) dialog box, Dreamweaver inserts JSP code in your page that, when run on the server, calls a stored procedure in the database. The stored procedure in turn performs a database operation, such as inserting a record.

Related topics

Using stored procedures to modify databases

Running the stored procedure in JSP


Setting the Prepared (Insert, Update, Delete) dialog box options

The purpose of this dialog box is to create a prepared statement that inserts, updates, or deletes records in a database.

Procedure
  1. Enter a name for the prepared statement, choose a connection to the database containing the records you want to edit, and choose the editing operation you want the prepared statement to perform—Insert, Update, or Delete.

    2. Dreamweaver starts the SQL statement for you based on the type of operation you choose. For example, here’s the dialog box after choosing Insert:
    This is a picture of the feature being described.

  2. Complete the SQL statement.

    3. For information on writing SQL statements that modify databases, consult a Transact-SQL manual.

  3. Use the Variables area to define any SQL variables.

    4. For example, below is an Insert statement that contains three SQL variables. The values of these variables are provided by URL parameters passed to the page, as defined in the Run-time Value column of the Variables area.
    This is a picture of the feature being described.

After you close the dialog box, Dreamweaver inserts JSP code in your page that, when run on the server, creates a prepared statement that inserts, updates, or deletes records in the database.

In the above example, next you would probably create a page with an HTML form so users could enter record data. The HTML form would contain three text fields (txtFirstName, txtLastName, and txtDept) and a submit button. As well, the form would use the GET method and submit the text field values to the page containing your prepared statement.

Related topics

Creating a prepared statement that edits a database record

Understanding JSP prepared statements

Previous


Building Pages that Restrict Access to Your Site

You can use Macromedia Dreamweaver MX to build the following pages to restrict access to your site:

  • A page that requires users to register the first time they visit the site (see Building a registration page)
  • A page that lets registered users log in to the site (see Building a login page)
  • Pages that only authorized users can view (see Building a page only authorized users can access)

Note: Dreamweaver does not have authentication server behaviors for ASP.NET or PHP pages.
Next


Building a registration page

Your web application can contain a page that requires users to register the first time they visit your site.

Note: Dreamweaver does not have authentication server behaviors for ASP.NET or PHP pages.

For example, the following page asks first-time users to register:

This is a picture of the feature being described.

A registration page is made up of the following building blocks:

  • A database table to store login information about the users.
  • An HTML form that lets users choose a user name and password.

    • You can also use the form to obtain other personal information from users.

  • An Insert Record server behavior to update the database table of site users.
  • A Check New Username server behavior to make sure the user name entered by the user is not taken by another user.

Note: You can delete or change the properties of any server behavior you add to a page (see Editing server behaviors).


Storing login information about users

A registration page requires a database table to store the login information entered by users. Make sure your database table contains a user name and a password column. If you want logged-in users to have different access privileges, include an access privilege column (see Storing access privileges in the user database).

If you want to set a common password for all users of the site, configure your database application (Microsoft Access, Microsoft SQL Server, Oracle, and so on) to enter the password in each new user record by default. In most database applications, you can set a column to a default value each time a new record is created. Set the default value to the password.

You can also use the database table to store other useful information about the user.


Letting users choose a user name and password

You add an HTML form to the registration page to let users choose a user name and password (if applicable).

To let users choose a user name and password:
  1. Create a new page (File > New) and lay out your registration page using the Dreamweaver design tools.
  2. Add an HTML form by placing the insertion point where you want the form to appear and choosing Form from the Insert menu.

    3. An empty form is created on the page. You may have to turn on Invisible Elements (View > Visual Aids > Invisible Elements) to see the form’s boundaries, which are represented by thin red lines.

  3. Name the HTML form by clicking the <form> tag at the bottom of the Document window to select the form, opening the Property inspector (Window > Properties), and entering a name in the Form Name box.

    4. You don’t have to specify an action or method attribute for the form to tell it where and how to send the record data when the user clicks the Submit button. The Insert Record server behavior sets these attributes for you (see Updating the table of users in the database).

  4. Add text fields (Insert > Form Objects > Text Field) to let the user enter a user name and password.

    5. The form can also have more form objects to record other personal data.

    You should add labels (either as text or images) beside each form object to tell users what they are. You should also line up the form objects by placing them inside an HTML table. For more information on form objects, see Creating Interactive Forms.

  5. Add a Submit button to the form (Insert > Form Objects > Button).
  6. If you wish, change the label of the Submit button by selecting the button, opening the Property inspector (Window > Properties), and entering a new value in the Label box.

    7. For example, here’s the Property inspector of a button labeled “Register”:
    This is a picture of the feature being described.

The next step is to add the Insert Record server behavior to insert records in the table of users in the database.


Updating the table of users in the database

You add an Insert Record server behavior to update the table of users in the database.

To update the table of users in the database:
  1. In the Server Behaviors panel (Window > Server Behaviors), click the plus (+) button and choose Insert Record from the pop-up menu.

    2. The Insert Record dialog box appears.

  2. Use the Connection and Insert Into Table pop-up menus to specify the table of users in the database.
  3. In the After Inserting, Go To dialog box, enter the page to open after the record is inserted into the table.
  4. In the Get Values From pop-up menu, choose the HTML form used to obtain the user’s user name and password.

    5. Dreamweaver automatically chooses the first form on your page.

  5. Specify what each object on your form will update in the database table by selecting a form object in the Form Elements list, then choosing a table column from the Column pop-up menu and a data type from the Submit As pop-up menu.

    6. The data type is the kind of data the column in your database table is expecting (text, numeric, Boolean checkbox values). Password or user name columns usually expect text.

    For example, in the Form Elements list, click the password text field, choose the column in the database table where the password should be stored, and then choose the Text data type.

    Repeat the procedure for each form object in the Form Elements list.

  6. Click OK.

The final step is to make sure the user name is not used by another registered user.


Making sure the chosen user name is unique

You add a server behavior to make sure the user name entered is not taken by another registered user.

When the user clicks the Submit button on the registration page, the server behavior compares the user name entered by the user against the user names stored in a database table of registered users. If no matching user name is found in the database table, the server behavior carries out the insert record operation normally. If a matching user name is found, the server behavior cancels the insert record operation and opens a new page (usually a page alerting the user that the user name is already taken).

To make sure the chosen user name is unique:
  1. In the Server Behaviors panel (Window > Server Behaviors), click the plus (+) button and choose User Authentication > Check New Username from the pop-up menu.

    2. The Check New Username dialog box appears.
    This is a picture of the feature being described.

  2. Complete the dialog box.

    3. For instructions, see Setting the Check New Username dialog box options.

  3. Click OK.

Dreamweaver adds a server behavior to the registration page that checks that the user name submitted by a visitor is unique before adding that visitor’s information to the database of registered users.


Building a login page

Your web application can contain a page that lets registered users log in to the site.

Note: Dreamweaver does not have authentication server behaviors for ASP.NET or PHP pages.

For example, the following page asks registered users to log in:

This is a picture of the feature being described.

A login page is made up of the following building blocks:

  • A database table of registered users
  • An HTML form to let users enter a user name and password
  • A Log In User server behavior to make sure the entered user name and password are valid

A session variable consisting of the user name is created for the user when the user logs in successfully.

Note: You can delete or change the properties of any server behavior you add to a page (see Editing server behaviors).


Creating a database table of registered users

You need a database table of registered users to verify that the user name and password entered in the login page are valid. Use your database application and a registration page to create the table. For more information, see Building a registration page.


Letting users log in

You add an HTML form to the page to let users log in by entering a user name and password.

To let users log in:
  1. Create a new page (File > New) and lay out your login page using the Dreamweaver design tools.
  2. Add an HTML form by placing the insertion point where you want the form to appear and choosing Form from the Insert menu.

    3. An empty form is created on the page. You may have to turn on Invisible Elements (View > Visual Aids > Invisible Elements) to see the form’s boundaries, which are represented by thin red lines.

  3. Name the HTML form by clicking the <form> tag at the bottom of the Document window to select the form, opening the Property inspector (Window > Properties), and entering a name in the Form Name box.

    4. You don’t have to specify an action or method attribute for the form to tell it where and how to send the record data when the user clicks the Submit button. The Log In User server behavior sets these attributes for you (see Checking the user name and password).

  4. Add a user name and a password text field (Insert > Form Objects > Text Field) to the form.

    5. Add labels (either as text or images) beside each text field, and line up the text fields by placing them inside an HTML table and setting the table’s border attribute to 0.

  5. Add a Submit button to the form (Insert > Form Objects > Button).
  6. If you wish, change the label of the Submit button by selecting the button, opening the Property inspector (Window > Properties), and entering a new value in the Label box.

    7. For example, here’s the Property inspector of a button labeled “Log In”:
    This is a picture of the feature being described.

The next step is to add the Log In User server behavior to make sure the entered user name and password are valid.


Checking the user name and password

You add a Log In User server behavior to make sure the user name and password users enter are valid.

When a user clicks the Submit button on the login page, the Log In User server behavior compares the values entered by the user against the values for registered users. If the values match, the server behavior opens one page (usually the site’s start page). If the values do not match, the server behavior opens another page (usually a page alerting the user that the login attempt failed).

To check the user name and password:
  1. In the Server Behaviors panel (Window > Server Behaviors), click the plus (+) button and choose User Authentication > Log In User from the pop-up menu.

    2. The Log In User dialog box appears.
    This is a picture of the feature being described.

  2. Complete the dialog box.

    3. For instructions, see Setting the Log In User dialog box options.

  3. Click OK.

Dreamweaver adds a server behavior to the login page that makes sure the user name and password entered by a visitor are valid.


Building a page only authorized users can access

Your web application can contain a protected page that only authorized users can access.

Note: Dreamweaver does not have authentication server behaviors for ASP.NET or PHP pages.

For example, if a user attempts to bypass the login page by typing the protected page’s URL in a browser, the user is redirected to another page. Similarly, if you set the authorization level for a page to Administrator, then only users with Administrator access privileges can view the page. If a logged-in user attempts to access the protected page without the proper access privileges, the user is redirected to another page.

You can also use authorization levels to review newly registered users before granting them full access to the site. For example, you may want to receive payment before allowing a user access to the member pages of the site. To do so, you can protect the member pages with a Member authorization level and only grant newly registered users Guest privileges. After receiving payment from the user, you can upgrade the user’s access privileges to Member (in the database table of registered users).

If you do not plan to use authorization levels, you can protect any page on your site simply by adding a Restrict Access To Page server behavior to the page. The server behavior redirects to another page any user who has not successfully logged in.

If you do plan to use authorization levels, you can protect any page on your site with the following building blocks:

  • An extra column in your users database table to store each user’s access privileges
  • A Restrict Access To Page server behavior to redirect unauthorized users to another page

In this case, the server behavior redirects to another page any user who does not have the required access privileges.

In either case, you can add a link to the protected page that lets a user log out and clears any session variables. For more information, see Logging out users.


Redirecting unauthorized users to another page

To prevent unauthorized users from accessing a page, you add a Restrict Access To Page server behavior to it. The server behavior redirects the user to another page if the user attempts to bypass the login page by typing the protected page’s URL in a browser, or if the user is logged in but attempts to access the protected page without the proper access privileges.

Note: The Restrict Access To Page server behavior can only protect HTML pages. It does not protect other site resources such as image files and audio files.

If you want to give many pages on your site the same access rights, you can copy and paste access rights from one page to another.

To redirect unauthorized users to another page:
  1. Open the page you want to protect.
  2. In the Server Behaviors panel (Window > Server Behaviors), click the plus (+) button and choose User Authentication > Restrict Access To Page from the pop-up menu.

    3. The Restrict Access To Page dialog box appears.
    This is a picture of the feature being described.

  3. Complete the dialog box.

    4. For instructions, see Setting the Restrict Access To Page dialog box options.

  4. Click OK.

Dreamweaver adds a server behavior to the page that allows only authorized users to view the page.

To copy and paste a page’s access rights to other pages on the site:
  1. Open the protected page and select the Restrict Access To Page server behavior listed in the Server Behaviors panel (not the one in the plus (+) pop-up menu).
  2. Click the arrow button in the top right corner of the panel and choose Copy from the pop-up menu.

    3. The Restrict Access To Page server behavior is copied to your system’s Clipboard.

  3. Open another page you want to protect in the same way.
  4. In the Server Behaviors panel (Window > Server Behaviors), click the arrow button in the top right corner and choose Paste from the pop-up menu.
  5. Repeat steps 3 and 4 for each page you want to protect.


Storing access privileges in the user database

This building block is required only if you want certain logged-in users to have different access privileges. If you simply require users to log in, then you don’t need to store access privileges.

If you want certain logged-in users to have different access privileges, make sure your database table of users contains a column specifying each user’s access privileges (Guest, User, Administrator, and so on). The access privileges of each user should be entered in the database by the site administrator.

In most database applications, you can set a column to a default value each time a new record is created. Set the default value to the most common access privilege on your site (for example, Guest), then manually change the exceptions (for example, changing Guest to Administrator). The user now has access to all administrator pages.

Make sure each user in the database has a single access privilege, such as Guest or Administrator, not multiple privileges like “User, Administrator”. If you want to set multiple access privileges for your pages (for example, all guests and administrators can see this page), then set those privileges at the page level, not the database level. For more information, see Redirecting unauthorized users to another page.


Logging out users

When a user logs in successfully, a session variable is created that consists of the user name. When the user leaves your site, you can use the Log Out User server behavior to clear the session variable and redirect the user to another page (usually a “goodbye” or “thank you” page).

You can invoke the Log Out User server behavior when the user clicks a link or when a specific page loads.

To add a link to let users log out:
  1. On the page, select text or an image to serve as the link.
  2. In the Server Behaviors panel, click the plus (+) button and choose User Authentication > Log Out User.

    3. The Log Out User dialog box appears.

  3. Specify a page to open when the user clicks the link.

    4. The page is usually a “goodbye” or “thank you” page.

  4. Click OK.
To log out a user when a specific page loads:
  1. Open the page that will load in Dreamweaver.

    2. The page is usually a “goodbye” or “thank you” page.

  2. In the Server Behaviors panel, click the plus (+) button and choose User Authentication > Log Out User.

    3. The Log Out User dialog box appears.

  3. Select the “Log Out When Page Loads” option.
  4. Click OK.


Setting the Check New Username dialog box options

The purpose of this dialog box is to add a server behavior to a user registration page that verifies that the user name submitted by a visitor is unique before adding that visitor to your database of registered users.

Procedure

Before starting, you must complete the following tasks:

  • Add an HTML form to the registration page letting users choose a user name and password. For instructions, see Letting users choose a user name and password.
  • Add an Insert Record server behavior to the page to update the database containing the login information about your registered users. For instructions, see Updating the table of users in the database.

With these prerequisites in place, you can complete the dialog box as follows:

  1. In the Username Field pop-up menu, choose the form text field your visitors use to enter a user name.
  2. In the “If Already Exists, Go To” box, specify a page to open if a matching user name is found in the database table.

    3. The opened page should alert the user that the user name is already taken and let the user try again.

  3. Click OK.

When the user clicks the Submit button on the registration page, the server behavior compares the user name entered by the user against the user names stored in a database table of registered users. If no matching user name is found in the database table, the server behavior carries out the insert record operation normally. If a matching user name is found, the server behavior cancels the insert record operation and opens a new page (usually a page alerting the user that the user name is already taken).

Related topics

Making sure the chosen user name is unique

Building a registration page


Setting the Log In User dialog box options

The purpose of this dialog box is to add a server behavior to a login page that makes sure the user name and password entered by a visitor are valid.

Procedure

Before starting, you must add an HTML form to the login page letting users enter a user name and password. For instructions, see Letting users log in. With this prerequisite in place, you can complete the Log In User dialog box as follows:

  1. Specify the form and the form objects visitors use to enter their user name and password.
  2. If you use Macromedia ColdFusion, enter you Data Source username and password.
  3. Specify the database table and columns that contain the user names and passwords of all the registered users.

    4. The server behavior compares the user name and password a visitor enters on the login page against the values in these columns.

  4. Specify a page to open if the login process succeeds.

    5. The specified page is usually the site’s start page.

  5. Specify a page to open if the login process fails.

    6. The specified page usually alerts the user that the login process failed and lets the user try again.

  6. If you want users forwarded to the login page after attempting to access a restricted page to return to that restricted page after logging in, select the Go To Previous URL option.

    7. If a user tries to access your site by opening a restricted page without first logging in, the restricted page can forward the user to the login page. After the user logs in successfully, the login page will redirect the user to the restricted page that forwarded them to the login page in the first place.

    When you complete the dialog box for the Restrict Access to Page server behavior on these pages, make sure you specify your login page in the If Access Denied, Go To box. For more information, see Setting the Restrict Access To Page dialog box options.

  7. Specify whether to grant access to the page based on user name and password alone, or based on authorization level too.

    8. For more information, see Building a page only authorized users can access.

  8. Click OK.

When a user clicks the Submit button on the login page, the Log In User server behavior compares the values entered by the user against the values for registered users. If the values match, the server behavior opens one page (usually the site’s start page). If the values do not match, the server behavior opens another page (usually a page alerting the user that the login process failed).

Related topics

Checking the user name and password

Building a login page


Setting the Restrict Access To Page dialog box options

The purpose of this dialog box is to add a server behavior to a page that allows only authorized users to view the page.

Procedure
  1. If you want only users with certain access privileges to view the page, select the “Username, Password, and Access Level” option and specify the authorization levels for the page.

    2. For example, you can specify that only users with Administrator privileges can view the page by selecting Administrator in the authorization levels list.

    To add authorization levels to the list, click Define. In the Define Access Levels list that appears, enter a new authorization level and click the plus (+) button. Dreamweaver stores the level, saving you from typing it for each page. Make sure you enter strings that exactly match the strings in your user database.

  2. If you want to set more than one authorization level for a page, Control-click (Windows) or Command-click (Macintosh) the levels in the list.

    3. For example, you can specify that any user with Guest, Member, or Administrator privileges can view the page.

  3. Specify the page to open if an unauthorized user attempts to open the protected page.

    4. Make sure the page you choose is not itself protected.

  4. Click OK.

Dreamweaver adds a server behavior that redirects the user to another page if the user attempts to bypass the login page by typing the protected page’s URL in a browser, or if the user is logged in but attempts to access the protected page without the proper access privileges.

Related topics

Redirecting unauthorized users to another page

Building a page only authorized users can access


Setting the Define Access Levels dialog box options

The purpose of this dialog box is to add authorization levels to the list of authorization levels in the Restrict Access to Page dialog box.

Procedure
  1. In the Name text box, enter a new authorization level.

    2. Make sure the string for the authorization level matches exactly the string stored in your user database. For example, if the authorization column in your database contains the value “Administrator”, then enter “Administrator”, not “Admin”, in the Name box.

  2. Click the plus (+) button to add the level to the list
  3. Click OK to return to the Restrict Access to Page dialog box.

Dreamweaver stores the new authorization level for use with other pages.

Related topics

Setting the Restrict Access To Page dialog box options

Redirecting unauthorized users to another page

Building a page only authorized users can access


Setting the Log Out User dialog box options

The purpose of this dialog box is to log out a user and clear the session variable created when the user logged in.

You can invoke the Log Out User server behavior when the user clicks a link or when a specific page loads.

Procedure
  1. If you selected text or an image to serve as a log-out link, specify a page to open when the user clicks the link.

    2. The page is usually a “goodbye” or “thank you” page.

  2. If you want to log out a user when the page loads, select the “Log Out When Page Loads” option.
  3. Click OK.

Dreamweaver adds the server behavior to the page.

Related topic

Logging out users

Previous


Appendixes

Get more help to develop your web applications.

This part contains the following chapters:

  • Beginner’s Guide to Databases
  • SQL Primer
  • Setting Up a DSN in Windows
  • Quick Reference: Macromedia ASP.NET Tags


Beginner’s Guide to Databases

This appendix is intended for Macromedia Dreamweaver MX users who have little or no experience working with databases or database connections. It explains general concepts, not specific procedures. To see how these concepts apply in practice, see the rest of the help system.

The appendix describes how to design a database but not how to create one in an application such as Microsoft Access or SQL Server. That process is described in the printed or online documentation that came with your database system.

The appendix contains the following sections:

  • About databases
  • Database design basics
  • Understanding database connections
Next


About databases

The building block of a database is the record. A record is a collection of related data treated as a single entity. For example, a hockey trading card could be called a record: it brings together the name, photograph, team, and statistics of one player. Using database terms, each of these related pieces of information is called a field: each hockey card “record” has a name field, a photograph field, a team field, and various statistic fields.

A collection of records that share the same fields is called a table because this kind of information can easily be presented in table format: each column represents a field and each row represents a record. In fact, the word column is synonymous with the word field, and the word row is synonymous with the word record.

This is a picture of the feature being described.

A database can contain more than one table, each with a unique name. These tables can be related or independent from one another.

A subset of data extracted from one or more tables is called a recordset (or a DataSet in ASP.NET). A recordset is also a table because it’s a collection of records that share the same columns. For example, a hockey team roster listing the names and positions of the players could be called a recordset: it consists of a subset of all the possible information about the players, including goals, assists, penalty minutes, and so on.

This is a picture of the feature being described.

To create a recordset, you run a database query. A query consists of search criteria. For example, the query can specify that only certain columns be included in the recordset, or that only certain records be included. For more information, see Defining a recordset.

Related topics

Database design basics

Understanding database connections


Database design basics

Database design is the first step in building any database-driven website. This section presents a case study to explain basic database design principles. The case study involves a web application commissioned by a fictional company called Arrow Aircraft Services, a firm that manages a small fleet of privately owned business jets.

This section contains the following topics:

  • Studying Arrow Aircraft’s business rules and policies
  • Studying Arrow Aircraft’s feature request
  • What questions will users ask the database?
  • Choosing the tables that belong in the database
  • Choosing the columns in each table
  • Defining relationships between the tables
  • Creating the database


Studying Arrow Aircraft’s business rules and policies

You have been hired on a contract basis to build a web application for Arrow Aircraft Services. Before you start designing the database, you make sure you understand all the organization’s business rules and policies that will affect the application. This section describes the (simplified) business rules and policies of Arrow Aircraft Services.

Arrow Aircraft manages a fleet of five business jets of varying sizes and models for their owners. Each jet has up to eight fractional owners—corporations or individuals who have purchased a share of the aircraft. This type of arrangement is popular with those who don’t need a business jet on a year-round basis.

The fractional owners, or “shareholders”, pay Arrow Aircraft the following fees:

  • A monthly management fee proportional to the owner’s share of the aircraft to cover pilot, insurance, and hangaring costs
  • An “occupied” hourly fee covering all direct costs such as maintenance, engine reserves and catering

In exchange, a shareholder tells Arrow Aircraft when and where they want to go and Arrow Aircraft takes care of the rest, including obtaining flight and ground crews and catering the flight. Arrow Aircraft requires a minimum notice of 8 hours to prepare an aircraft for a flight.

Arrow Aircraft guarantees 800 “occupied hours” per year for each aircraft. Occupied hours are hours where the jet is both in flight and occupied by at least one passenger. Occupied hours begin six minutes (0.1 of an hour) before the aircraft takes off with passengers and end six minutes after the aircraft lands.

Each aircraft can have up to eight owners. For example, an individual or corporation can purchase a 1/5 interest (or a 1/5th share) in a jet. Since Arrow Aircraft guarantees 800 occupied flight hours per year, the owner of the 1/5th share is entitled to 160 occupied hours (800 hours / 5 = 160).


Studying Arrow Aircraft’s feature request

Arrow Aircraft hired you to build a web application with the following features:

  • Allow any aircraft shareholder to request an aircraft for a flight
  • Provide the company’s Flight Operations Department (Flight Ops) with all the information needed to begin preparing the aircraft, including details of the shareholder’s request (itinerary, departure date and time, catering needs, etc.), the shareholder’s remaining occupied hours, and the availability of the aircraft for the proposed trip
  • Allow Flight Ops to book the aircraft to prevent scheduling conflicts


What questions will users ask the database?

After you become familiar with the proposed features of the web application, you sit down with the database users and pose the following question: “What questions will you ask the database?”

You learn from some of the aircraft shareholders that they want to ask the database the following questions:

  • How many occupied hours do I have left?
  • Is my aircraft available on a certain date or dates?

After a shareholder requests an aircraft, the employees in Flight Ops will ask the database the following questions:

  • Where does the shareholder want to go?
  • What is the itinerary—one way, return, multi-city? Flight Ops needs this information to start planning the flight (check weather forecasts, file flight plans, and so on) and to estimate the total occupied hours.
  • Does the shareholder have sufficient occupied hours remaining for the proposed itinerary?
  • When does the shareholder want to leave?
  • What is the shareholder’s plane?
  • Is the plane available for the proposed itinerary?
  • How many passengers will accompany the shareholders?
  • How much luggage will they bring—light (carry-on), normal (one suitcase per passenger), or heavy (more than one suitcase)?
  • What are the shareholder’s catering needs?
  • What is the occupied hourly fee for the plane?
  • Where can I contact the shareholder to confirm the flight and the fee estimate?


Choosing the tables that belong in the database

After learning the questions users will ask the database, you think about how your database should be structured to best answer their questions. The first step is to choose the tables in the database.

In a relational database, all data is represented in the rows and columns of tables. Each table describes a collection of related entities such as persons, objects, or events. Each row describes one occurrence of the entity and each column describes one property of the entity—for example, a person’s last name, an object’s color, or an event’s date.

You choose the following five tables for the Arrow Aircraft database:

  • An aircraft table describing all of the business jets managed by Arrow Aircraft
  • An aircraft bookings table listing all the dates the jets are booked or otherwise unavailable to fly
  • A shareholders table describing all the corporations and individuals who own shares in the jets
  • An itineraries table describing all the itineraries requested by the shareholders
  • A flights table describing all the legs (“flights”) of the itineraries.


Choosing the columns in each table

The next step is to choose the columns in each table. The columns describe the properties of each entity in the table.

A good rule of thumb when choosing columns is to avoid duplicating data. For example, in the Arrow Aircraft application, you know shareholder names will have to be used in association with the itinerary data to answer the following Flight Ops question: “What are the shareholder’s catering needs for a particular itinerary?”

One approach is to have shareholder first and last name columns in both the shareholders table and the itineraries table. However, this would require not only duplicating the name data in two tables, but also several times in the itineraries table (you would have to enter the shareholder’s name in the itineraries table every time the shareholder requested a new itinerary). This approach increases data-entry effort, introduces opportunities for errors, and threatens the data’s integrity (a change in one part of the database must be done in other parts).

A much better solution is to enter the shareholder’s first and last name a single time in a single table, the shareholders table. When the time comes to answer the Flight Ops question above, you can join the shareholders table with the itineraries table using a SQL expression.

Make sure each of your tables has a primary key column. A primary key column contains values that are unique for each row. This allows you to zero in on the exact row you want when searching the database. Most primary key columns consist of ID numbers, but you can use natural primary keys such as government form numbers or aircraft serial numbers.

After some thought, you choose the following properties and primary keys for the tables in the Arrow Aircraft database:

This is a picture of the feature being described.


Defining relationships between the tables

After defining the basic columns and primary keys in your tables, you can start defining relationships between the tables. Once the relationships are defined, you can write SQL statements in Dreamweaver MX to combine data from two tables (see Joining tables).

For example, each plane managed by Arrow Aircraft has several shareholders. You would like to establish a similar “one-to-many” relationship between each plane in your aircraft table and the shareholders in the shareholders table. This would save you from entering and tracking redundant aircraft data in the shareholders table.

In a one-to-many database relationship, a single row in one table is related to several rows in the another table. You can define this kind of relationship by including a foreign key in the table providing the many rows—in the above example, the shareholders table. A foreign key is a column containing values matching those in the primary key column of another table. Your aircraft table’s primary key is called ac_serial. Therefore, including a foreign key called ac_serial in the shareholders table would define a “one-aircraft-to-many-shareholders” relationship.

With your knowledge of the client’s feature request and of the company’s business rules and policies, you decide to define the following one-to-many relationships in your database:

  • Each aircraft can have many shareholders
  • Each aircraft has many bookings
  • Each aircraft has many itineraries
  • Each shareholder has many itineraries
  • Each itinerary can have many flights (or legs)

Here are the revised table diagrams after you add the foreign keys defining these relationships:

This is a picture of the feature being described.

The diagrams are known as E-R diagrams, or entity-relationship diagrams.


Creating the database

The final design step is creating the database using a database system like Microsoft Access, SQL Server, Oracle9i, or MySQL. Consult your database system’s documentation for more information.


Understanding database connections

If you plan to use a database with your web application, you need to create at least one database connection. Without one, the application won’t know where to find the database or how to connect to it. You create a database connection in Dreamweaver by providing the information—or the “parameters”—the application needs to establish contact with the database.

Note: You don’t need to create database connections for ColdFusion pages in Dreamweaver MX. You connect using ColdFusion data sources defined in ColdFusion Administrator.

This section discusses database connections in general terms. For specific instructions on creating connections in Dreamweaver MX, see Connecting to a database.


Interfacing with the database

Data stored in a database is normally in a proprietary format in the same way text in a word-processor file is in a proprietary format. For example, here’s what data looks like in Microsoft Access:

This is a picture of the feature being described.

Here’s what the same database looks like in Notepad:

This is a picture of the feature being described.

Your web application faces the same problem as Notepad or any other application trying to access data in an unknown format: the application can’t decipher the data. A software interface is needed between your web application and the database allowing the application and the database to talk to each other.

Three common interfaces let applications communicate with databases. The first is called Open Database Connectivity, or ODBC; the second is called OLE DB (object linking & embedding database); and the third is called Java Database Connectivity, or JDBC.

The job of these interfaces is to act like interpreters. For example, when a speech is given in English at the United Nations, one interpreter translates for French-speaking delegates while another interpreter translates for German-speaking delegates. Similarly, you use one interface for OLE DB-speaking applications, another interface for ODBC-speaking web applications, and still another interface for JDBC-speaking applications. ColdFusion MX and JSP applications are JDBC speakers, ASP and ASP.NET applications speak OLE DB, and ColdFusion 4 or 5 applications speak ODBC and OLE DB.

ASP applications (but not ASP.NET applications) are fluent ODBC speakers thanks to a built-in OLE DB/ODBC interpreter. For example, suppose you want your application to communicate with a Microsoft Access database by using an ODBC interface. In ASP, if you specify only the ODBC interface and no OLE DB interface, by default the application will use an OLE DB/ODBC interpreter to translate the OLE DB into ODBC, then it will use the ODBC/Access interpreter you specified to translate the ODBC into something Access can understand.

The following illustration gives you an idea of the process:

This is a picture of the feature being described.

Note: SQL Server and DB2 are server-based database systems from Microsoft and IBM, respectively.


Using database drivers to interface with your database

The ODBC, OLE DB, and JDBC interfaces are implemented by database drivers (or “data providers” in OLE DB), which are simply pieces of software. When your web application communicates with your database, it does so through the intermediary of a driver.

Database drivers are database-specific. For example, you can use Microsoft Access, SQL Server, and dBase drivers. Similarly, you can use OLE DB providers such as the OLE DB provider for SQL Server. Your choice depends on your database.

Drivers are written by database vendors such as Microsoft and Oracle, and by a variety of third-party software vendors. Microsoft offers a number of ODBC drivers and OLE DB providers for the most popular database packages, such as Microsoft Access, Microsoft SQL Server, and Oracle. The ODBC drivers, which only run on the Windows platform, are automatically installed with Microsoft Office and with Windows 2000. They are also installed with the Microsoft Data Access Components (MDAC) 2.5, 2.6, and 2.7 packages, which you can download for free from the Microsoft website. MDAC 2.6 installs a number of OLE DB providers.

Note: Install MDAC 2.5 first, then install MDAC 2.6.

To find out which ODBC drivers are installed on your Windows system, see Viewing the ODBC drivers installed on a Windows system.

Because the Macintosh is rarely used as a database platform, few ODBC drivers exist for it.

Some common JDBC drivers include the i-net JDBC drivers for Microsoft SQL Server databases, the Oracle Thin driver for Oracle databases, and the JDBC Driver for DB2 for IBM DB2 databases. For more information on JDBC drivers and their vendors, see the searchable database of JDBC drivers on the Sun website.

Here are the database interfaces for each type of web application and some common database drivers for each:

Web application | Database interface | Common drivers
ColdFusion MX JSP | JDBC | Sun JDBC-ODBC driver i-net Sprinta JDBC driver for SQL Server Oracle Thin JDBC driver
ColdFusion 4 or 5 | ODBC or OLE DB | ColdFusion native drivers Microsoft Access Driver Microsoft SQL Server Driver
ASP | ODBC or OLE DB | Microsoft Access Driver Microsoft SQL Server Driver Microsoft SQL Server Provider Microsoft ODBC for Oracle
ASP.NET | OLE DB | Microsoft Jet Provider Microsoft SQL Server Provider Microsoft Oracle provider
PHP | MySQL specific | MySQL driver


Viewing the ODBC drivers installed on a Windows system

If you need a specific ODBC driver and your web server runs on a Windows system, you can easily find out whether or not the ODBC driver you need is installed on your system.

To view the ODBC drivers installed on a Windows system:
  1. Open the ODBC Data Source Administrator as follows:
    • In Windows 95, 98, or NT, choose Start > Settings > Control Panel, then double-click the ODBC Data Sources icon. Depending on your system, the icon could also be called ODBC or 32bit ODBC.
    • In Windows 2000, choose Start > Settings > Control Panel > Administrative Tools > Data Sources.
    • In Windows XP, choose Start > Control Panel > Performance and Maintenance > Administrative Tools > Data Sources (ODBC).
  2. Click the Drivers tab.

    3. A list of ODBC drivers installed on the system appears.
    This is a picture of the feature being described.


Invoking database drivers

An application must invoke a database driver to establish two-way communications with a database. A web application invokes a driver by using a connection string. A connection string consists of all the information (or parameters) required to establish a connection to a database. In its simplest form, a connection string specifies a driver and a database, as in this example:

Driver={Microsoft Access Driver (*.mdb)};
DBQ=C:\Inetpub\wwwroot\Scaal\scaalcoffee.mdb

ASP connection strings can contain a Provider parameter specifying an OLE DB provider. If you omit this parameter, by default ASP uses the OLE DB provider for ODBC drivers. In the above example, the OLE DB provider for ODBC drivers would communicate with the ODBC driver, Microsoft Access Driver, which in turn would communicate with the Access database, scaalcoffee.mdb.

The parameters in a connection string may vary depending on the driver. Here’s a connection string for a SQL Server database called Cases located on a server named Hoover:

Driver={SQL Server};Server=Hoover;Database=Cases;
UID=DanaS;PWD=Queequeg

Note: UID stands for user ID; PWD for password.

Dreamweaver simplifies the process of inserting connection strings into your pages by providing you with a dialog box in which to enter the different connection parameters. For example, here’s how the dialog box to define a connection looks when you’re developing a JSP application:

This is a picture of the feature being described.

After you complete the dialog box and click OK, Dreamweaver inserts the connection string in an include file in your site.


Using a DSN in a connection string

You can specify data source names (DSNs) in some connections. A DSN is a type of shortcut you create in Windows for a connection string. Once defined, you can simply refer to the connection string by name. For example, a connection string may consist of the following parameters:

Driver={SQL Server};Server=Clinic-6;Database=Patients;
UID=dholmes;PWD=stetson2

After defining a DSN called patients in Windows using the above parameters, you can use the connection string in your application by specifying a single parameter:

dsn=patients

If your application server is running on a Windows system and you defined a DSN on that system, then you can use the DSN to define an ASP or ColdFusion 4 or 5 connection.

If you do not have physical access to a server—and so are unable to define a DSN on it—then you must use a connection string to connect to the database.

For more information, see Setting Up a DSN in Windows.

Previous


SQL Primer

This appendix describes how to use Structured Query Language (SQL) to create recordsets for your dynamic pages. SQL (pronounced sequel) is a language that lets you read and write data from a database. The language has only a few keywords and simple syntax rules, but still allows you to perform sophisticated database operations.

This appendix contains the following sections:

  • Syntax basics
  • Defining the columns of a recordset
  • Limiting the records in a recordset
  • Sorting the records in a recordset
  • Joining tables

Related topics:

About databases

Database design basics

Defining a recordset

Note: Macromedia does not provide technical support for third-party technologies such as SQL.
Next


Syntax basics

One of the most frequently used SQL statements is the SELECT statement, which extracts specified columns from one or more database tables to build a recordset. Here’s the basic syntax for a SELECT statement:

SELECT ColumnName FROM TableName

You can add line breaks, tabs, and other white space to your statements to clarify the logic: SQL ignores all white space. The following example shows a valid statement:

SELECT PaidDues
   FROM Members

The following keywords identify commonly used SQL commands:

Keyword | Description
SELECT | Retrieves the specified records from a database
INSERT | Adds a new record in a database table
UPDATE | Changes values in specified database records
DELETE | Removes specified database records

The following keywords are used to refine SQL statements:

Keyword | Description
FROM | Names the data source for an operation
WHERE | Sets one or more conditions for the operation
ORDER BY | Sorts the recordset rows in a specified order
GROUP BY | Groups the recordset by the specified select list items

The following operators specify conditions and perform logical and numeric functions:

Operator | Meaning
= | Equal to
LIKE | Like (wildcards OK)
<> | Not equal to
NOT LIKE | Not like (wildcards OK)
< | Less than
> | Greater than
<= | Less than or equal to
>= | Greater than or equal to
AND | Both conditions must be met, such as Louisiana AND Texas
OR | At least one condition must be met, such as Smith OR Smyth
NOT | Exclude the condition following, such as Paris NOT France

If the item being compared is text, place it in single quotes as in the following example:

...WHERE Country = 'Germany'

If the item being compared is a date and you’re working with a Microsoft Access database, enclose it with # signs:

...WHERE DateOfBirth < #01/01/1970#

Other databases may have their own date conventions. Consult the database system’s documentation.

Some database systems may use non-standard SQL syntax in their products. Check your database system’s documentation.


Defining the columns of a recordset

You can use SQL to define recordsets for your pages. A recordset is a subset of records extracted from a database. For more information, see About databases.

Here’s the basic SQL syntax to define the columns of a recordset:

SELECT ColumnName1, ColumnName2, ColumnNameX FROM TableName

If you want to include all the columns of a table in the recordset, you can use the wildcard character *, as follows:

SELECT * FROM TableName

For example, suppose you have a table called Customers. To extract all the columns, you would type the following SELECT statement:

SELECT * FROM Customers

Suppose you only need the data contained in two columns of the Customers table: the YearBorn column and the DateLastPurchase column. To create a recordset containing only the data from these two columns, you would type the following SELECT statement:

SELECT YearBorn, DateLastPurchase
FROM Customers


Limiting the records in a recordset

Use a WHERE clause to limit the number of records in the recordset. For example, you may want to include only those customers who earn more than $50,000 a year. Assume you have a column in your table called Earnings that tells you how much each customer earns. Your SELECT statement would read as follows:

SELECT YearBorn, DateLastPurchase FROM Customers
WHERE Earnings > 50000

You specify one or more conditions in a WHERE clause to filter out records in the database. The following sections describe ways to filter records with the WHERE clause:

  • Filtering records based on the equality of two values
  • Filtering records based on the likeness of two values
  • Filtering records based on a range of values
  • Filtering records based on a combination of search conditions


Filtering records based on the equality of two values

You can filter records in a database based on the equality of a parameter’s value with a record column’s value.

Suppose you decide to let users search the database by department. The following logic is required to build the search results recordset:

  • Check a record in the database table.
  • If the value in the “department” column of the record is equal to the department name submitted by the user, then include that record in the search results recordset.
  • Check the next record in the table.

You can express this logic with the following WHERE clause:

WHERE ColumnName = ParameterValue

ParameterValue is a SQL variable containing a search parameter. In a web application, the user typically supplies this parameter using an HTML form.

This database query could be expressed fully in SQL as follows:

SELECT FIRSTNAME, LASTNAME, DEPARTMENT, EMAIL
FROM EMPLOYEES
WHERE DEPARTMENT = 'varDept'

This SQL statement finds all the records in the employee table with a DEPARTMENT value equal to the value contained in the varDept variable. For example, if the user specifies Operations as the department name, the SQL statement might generate the following recordset:

This is a picture of the feature being described.


Filtering records based on the likeness of two values

You can filter records in a database based on the likeness of a parameter’s value with a record column’s value.

Using likeness instead of equality gives users more flexibility when specifying the value of search parameters. For example, search words don’t need to be case sensitive. If the user enters “ohio” and the table column contains the value “Ohio”, the match is made.

Also, likeness lets you use wildcard characters so users can perform alphabetical and partial-word searches. For example, if the user enters “m” and the table column contains the values “Morgan”, “Macy”, and “Michelson”, then you can use a wildcard character in the SQL statement so that all three matches are made.

The standard wildcard character is the percentage sign (%):

...WHERE LastName LIKE 'Mc%'

Suppose you decide to let users search the database by last names. The following logic is required to build the search results recordset:

  • Check a record in the database table.
  • If the value in the “last name” column of the record contains a value like the value submitted by the user, then include that record in the results recordset.
  • Check the next record in the table.

You can express this logic with the following WHERE clause:

WHERE ColumnName LIKE ParameterValue

ParameterValue is a SQL variable containing a search parameter. In a web application, the user typically supplies this parameter using an HTML form.

This database query could be expressed fully in SQL as follows:

SELECT FIRSTNAME, LASTNAME, DEPARTMENT, EMAIL
FROM EMPLOYEES
WHERE DEPARTMENT LIKE 'varLastName'

If you want to give users the ability to perform partial-word searches, combine the variable with a wildcard character. The SQL wildcard character to use in this case is the percentage sign (%). Here’s an example:

...WHERE LASTNAME LIKE 'varLastName%'

For example, if the user types “s” as the search parameter, all records with last names starting with the letter “s” are included in the recordset, as in the following example:

This is a picture of the feature being described.

If the user specifies “sm” as the search parameter, then only those records with last names that start with the letters “sm” are included in the recordset:

This is a picture of the feature being described.


Filtering records based on a range of values

You can filter records in a database based on whether a record column’s value falls within the range of two parameter values.

Suppose you decide to let users search the database by a date range. The following logic is required to build the search results recordset:

  • Check a record in the database table.
  • If the value in the “date” column of the record falls between the two date values submitted by the user, then include that record in the results recordset.
  • Check the next record in the table.

You can express this logic with the following WHERE clause:

WHERE ColumnName BETWEEN ParameterValue1 AND ParameterValue2

ParameterValue1 and ParameterValue2 are SQL variables containing search parameters. In a web application, the user typically supplies these parameters using an HTML form.

Here’s how this type of database query can be expressed in SQL:

SELECT FIRSTNAME, LASTNAME, DEPARTMENT, STARTDATE
FROM EMPLOYEES
WHERE STARTDATE BETWEEN #varStartRange# AND #varEndRange#

For example, if the user enters “7/1/99” and “12/31/99” as the range parameters, all employees starting in the second half of 1999 are included in the recordset, as in the following example:

This is a picture of the feature being described.


Filtering records based on a combination of search conditions

This section describe how to include records in the search results recordset based on a combination of search conditions. You combine search conditions in SQL using the AND, OR, and NOT logical operators.

If you want all the conditions to be true for a record to be included in the recordset, use the AND operator as follows:

...WHERE LASTNAME LIKE 'varLastName' AND DEPARTMENT LIKE 'varDept'

If you want any one of the conditions to be true for a record to be included in the recordset, use the OR operator as follows:

...WHERE LASTNAME LIKE 'varLastName' OR DEPARTMENT LIKE 'varDept'

If you want one condition to be true but not another, use the NOT operator as follows:

...WHERE DEPARTMENT LIKE 'varDept' AND NOT COUNTRY LIKE 'varCountry'

You can use parentheses to group search conditions:

...WHERE (DEPARTMENT LIKE 'varDept' AND STARTDATE < #varStart#)
OR STARTDATE BETWEEN #varStartRange# AND #varEndRange#


Sorting the records in a recordset

Use the ORDER BY clause to sort the records in your recordset. For example, suppose you want to sort the records in the recordset by customer earnings, from the lowest to the highest. In SQL, order the records as follows:

SELECT LastName, FirstName, Earnings FROM Customers
ORDER BY Earnings

By default, the ORDER BY clause sorts records in ascending order (1, 2, 3... or A, B, C...). If you want to sort them in descending order, from the highest earnings to the lowest, use the DESC keyword as follows:

ORDER BY Earnings DESC


Joining tables

You can use a single SELECT statement to retrieve data from more than one table in the database. The statement joins the tables and returns a single recordset containing selected data from each table.

For example, a company database might contain one table with personal data about employees and another table with data about the company’s departments. If you want to build an employee directory that displays an employee’s name, phone number, and department, you must retrieve information from the two tables simultaneously.

To do this, create a join specifying all the tables to include and how the tables are related to each other. Here’s an example:

SELECT FIRSTNAME, LASTNAME, PHONE, DEPTNAME
FROM EMPLOYEES, DEPARTMENTS
WHERE EMPLOYEES.DEPT_ID = DEPARTMENTS.DEPT_ID

Note: Use dot notation to identify the columns more precisely. For example, EMPLOYEES.DEPT_ID refers to the DEPT_ID column in the EMPLOYEES table.

The first line specifies the columns to retrieve. The first three columns—FIRSTNAME, LASTNAME, PHONE—exist in the EMPLOYEES table, while the fourth column—DEPTNAME—exists only in the DEPARTMENTS table.

The second line specifies the two tables from which to retrieve data, EMPLOYEES and DEPARTMENTS.

The final line specifies the records to join and retrieve from the two tables. Each table has a column called DEPT_ID. (In the DEPARTMENTS table, the column is the primary key. For more information, see Defining relationships between the tables.) The WHERE clause compares the value of DEPT_ID in one table to the value of DEPT_ID in the other table. When a match is found, all the fields of the record in the EMPLOYEES table are joined with all the fields of the record in the DEPARTMENTS table. Next, the combined data is filtered to create a new record made up of a FIRSTNAME, LASTNAME, PHONE, and DEPTNAME column. Finally, the new record is added to the recordset.

Using slightly different join syntax may be preferable in some database systems. For example, the following SQL statement uses the SQL keywords INNER JOIN...ON to achieve the same results as the previous example:

SELECT FIRSTNAME, LASTNAME, PHONE, DEPTNAME
FROM EMPLOYEES INNER JOIN DEPARTMENTS
ON EMPLOYEES.DEPT_ID = DEPARTMENTS.DEPT_ID

Consult your database system’s documentation to determine which join syntax you should use.

Related topic

Defining relationships between the tables

Previous


Setting Up a DSN in Windows

A DSN is a kind of Windows shortcut you use to establish a database connection (see Understanding database connections). Before you can use one in your web application, you must set it up on your computer or on a remote server as described in this appendix.

This appendix applies only if your database is located on a system that supports ODBC data source names (DSNs)—systems such as Microsoft Windows and Windows NT but not the Macintosh.

This appendix contains the following sections:

  • Understanding DSNs
  • Creating a DSN
Next


Understanding DSNs

A DSN is a single-word identifier for a set of database connection parameters. The parameters can include the server name, the path to the database or the database name, the ODBC driver to use, and the user name and password, if any.

For example, suppose you have a Microsoft SQL Server database called Precinct located on a server called Kojak. To gain access to the database, you must enter the user name “columbo” and the password “savalas7”. After using these parameters to define a DSN called ourcops, you can create the connection by entering the single word ourcops in Dreamweaver MX instead of all the other parameters.

Related topic

Creating a DSN


Creating a DSN

To create a DSN, an ODBC driver for your database must be installed on the Windows computer running your application server. ODBC (for Open Database Connectivity) is a software intermediary that lets an application communicate with a database. For more information, see Interfacing with the database.

Make sure your system has the proper driver for your database. For a list of ODBC drivers on a Windows 95, 98, or NT system, choose Start > Settings > Control Panel, then double-click the ODBC Data Sources icon. (Depending on your system, the icon could also be called ODBC or 32bit ODBC.) When you click the Drivers tab, you’ll see a list of drivers installed on the system. In Windows 2000, choose Start > Settings > Control Panel > Administrative Tools > Data Sources, then click the Drivers tab. In Windows XP, choose Start > Control Panel > Performance and Maintenance > Administrative Tools > Data Sources (ODBC), then click the Drivers tab.

If the required driver is not installed, then download and install the Microsoft Data Access Components (MDAC) 2.5 and 2.6 packages, which you can download for free from the Microsoft website. These packages contain the latest Microsoft ODBC drivers for the most common databases.

Note: Install MDAC 2.5 first, then install MDAC 2.6.

If MDAC does not have an ODBC driver for your database, see your database vendor.

To create a DSN:
  1. Open Windows’ ODBC Data Source Administrator as follows:
    • In Windows 95, 98, or NT, choose Start > Settings > Control Panel, then double-click the ODBC Data Sources icon. Depending on your system, the icon could also be called ODBC or 32bit ODBC.
    • In Windows 2000, choose Start > Settings > Control Panel > Administrative Tools > Data Sources.
    • In Windows XP, choose Start > Control Panel > Performance and Maintenance > Administrative Tools > Data Sources (ODBC).
  2. In the Dreamweaver dialog box you use to create a DSN connection, click the Define button.

    3. The ODBC Data Source Administrator appears:
    This is a picture of the feature being described.

  3. Click the System DSN tab.

    4. The tab displays the list of DSNs currently on your system.

  4. Click Add to add a new DSN to the list.

    5. The Create New Data Source dialog box appears, listing all the drivers currently loaded on your system.

  5. Select a driver from the list, then click Finish.

    6. For example, if your database is a Microsoft Access file, select Microsoft Access Driver (*.mdb). If a driver for your product does not appear in the list, you’ll have to download the driver from a vendor’s website and install it.

  6. In the dialog box that appears, enter a name for the DSN and specify the connection parameters.

    7. The dialog boxes for specifying parameters differ depending on the driver you selected. For the Microsoft Access Driver, you enter a name, click Select, locate the database file on the hard disk, and click OK.

  7. Click OK to close the dialog box.

    8. The new DSN is added to your list of system DSNs.

Previous


Quick Reference: Macromedia ASP.NET Tags

Macromedia Dreamweaver MX uses a set of custom tags to create server behaviors in your ASP.NET pages. You can also use these tags in your own ASP.NET pages.

The appendix describes the following Macromedia custom tags:

  • MM:DataSet
  • MM:If

Dreamweaver also uses the following tags to create server behaviors:

  • MM:Insert
  • MM:Update
  • MM:Delete

Finally, if a tag contains a SQL statement or stored procedure that takes parameters, use the following two tags to specify the parameter values:

  • Parameters
  • Parameter

Note: Like the Microsoft ASP.NET tags, each Macromedia custom tag requires a runat="server" attribute.

For a more detailed description of the tags and their attributes, visit the Dreamweaver Support Center.

Next


MM:DataSet

Use the MM:DataSet tag to create a DataSet. ASP.NET DataSets are very similar to ASP recordsets.


Example

<MM:DataSet
id="fruitsDS"
runat="server"
CommandText=”SELECT name, color FROM fruits”
ConnectionString=<%# MM_NOTD_STRING %>
/>


Required directives

<%@ Register TagPrefix="MM" Namespace="MM" Assembly="MMtags" %>

If parameter tags will be used, then the following directives are often (but not always) needed:

<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<%@ Import Namespace="System.Data.OleDb" %>


Attributes

CommandText

Required. Specifies either a SQL statement or the name of a stored procedure. The SQL statement can be parameterized by using question marks as placeholders. See Parameters.

ConnectionString

Required. Specifies a connection string containing information to connect to a database.

CreateDataSet

Optional. True or False. When false, no DataSet is created. Default is true.

Expression

Optional. True or False. Lets you control when the CommandText statement is executed. If false, the CommandText statement is not executed. You can programmatically toggle the value.

IsStoredProcedure

Optional. True or False. Lets you indicate the nature of CommandText. The default value is false.

PageSize

Optional. Integer. When CreateDataSet is true, lets you divide the records into groups (pages) of a fixed size. See CurrentPage. Do not set both PageSize/CurrentPage and StartRecord/MaxRecords. If both sets of attributes are specified, the former (PageSize/CurrentPage) is used.

CurrentPage

Optional. Integer. When PageSize is used, lets you specify a particular page (group of records). The index of the first page is zero. See PageSize.

StartRecord

Optional. Integer. An offset from the first record in a DataSet (the index of the first record is zero). When CreateDataSet is true, lets you retrieve a subset of records in conjunction with the MaxRecords attribute. Do not set both PageSize/CurrentPage and StartRecord/MaxRecords. If both sets of attributes are specified, the former (PageSize/CurrentPage) is used. If PageSize is greater than zero, then StartRecord is calculated automatically as (PageSize * CurrentPage).

MaxRecords

Optional. Integer. Lets you specify how many records to retrieve starting at the StartRecord offset. See StartRecord.

GetRecordCount

Optional. True or False. When PageSize is used, lets you turn off record counting to improve performance. If the page never uses the RecordCount or LastPage attributes, then you don’t need to count records. The default value is true.

RecordCountCommandText

Optional. To improve performance when GetRecordCount is true, lets you specify an explicit SQL statement to obtain a record count. The statement should be in the form SELECT COUNT (*) FROM... and can include WHERE clauses, but not parameters.

EndRecord

Optional. Read-only. Lets you obtain the minimum of (CurrentPage + 1) * PageSize and RecordCount.

LastPage

Optional. Read-only. When PageSize is used and GetRecordCount is true, lets you obtain the zero-based index of the last page.

RecordCount

Optional. Read-only. When CreateDataSet and GetRecordCount are both true, lets you obtain the total number of records generated by the CommandText expression.

theDS

Optional. Read-only. Gives you access to the DataSet holding the records retrieved as a result of setting CreateDataSet to true.

DefaultView

Optional. Read-only. Gives you access to the theDS.Tables[0].DefaultView

Debug

Optional. True or False. Lets you see extra clues if the execution of this tag throws an exception. If the Debug attribute is true, then FailureURL is ignored (see FailureURL). When developing the page, set Debug to true to get robust diagnostics information about problems with the page. When about to deploy the page, set Debug to false so external visitors never see diagnostics and other internal information in case of problems with the page.

FailureURL

Optional. Lets you specify the URL of a page to open if an exception is thrown while executing the CommandText or if the given attributes conflict.

SuccessURL

Optional. Lets you specify the URL of a page to open if the CommandText statement executes with no exceptions thrown.


MM:If

Use the MM:If tag to control the inclusion of content or logic on a page.


Example

<MM:If
runat="server"
Expression="<%# (fruitsDS.CurrentPage == 0) %>">
   <ContentsTemplate>
   <font color='#CCCCCC'>Previous</font>
   </ContentsTemplate>
</MM:If>


Required directive

<%@ Register TagPrefix="MM" Namespace="MM" Assembly="MMtags" %>


Attribute

Expression

Required. Lets you specify an expression to resolve. If the expression is true, then the tag’s inner content is used. If the expression is false, the inner content is ignored.


MM:Insert

Use the MM:Insert tag to insert records in a database.


Example

<MM:Insert
runat="server"
CommandText="INSERT INTO fruits (name, color) VALUES (?, ?)"
ConnectionString='<%# MM_NOTD_STRING %>'
Expression=<%# Request.Form["MM_insert"] == "true" %>
Debug=”true”
CreateDataSet="false"
>
   <Parameters>
   <Parameter Value='<%# Request.Form["fruitName"] %>' />
   <Parameter Value='<%# Request.Form["fruitColor"] %>' />
   </Parameters>
</MM:Insert>


Attribute

The MM:Insert tag uses the logic used by the MM:DataSet tag, so it shares all of that tag’s attributes. For more information, see MM:DataSet. Note the following attributes values:

Expression

By setting this attribute to false, the tag does nothing. That is, the SQL statement or stored procedure specified in the CommandText attribute is not executed. You can use the Expression attribute to control when the insert operation takes place. For example, you might want to perform server-side form validation before carrying out the insert operation. In another case, the code might set Expression to true only if the form containing the data to insert has been submitted.

CommandText

Typically, this is an INSERT SQL statement or a stored procedure that inserts records.

CreateDataSet

This attribute is normally set to false because a DataSet is not created after executing an INSERT statement. In the case of a stored procedure, however, a DataSet might be created after the insert operation takes place.


MM:Update

Use the MM:Update tag to update records in a database.


Example

<MM:Update
runat="server"
CommandText="UPDATE fruits SET color=? WHERE name=?"
ConnectionString='<%# MM_NOTD_STRING %>'
Expression=<%# Request.Form["MM_update"] == "true" %>
Debug=”true”
CreateDataSet="false"
>
   <Parameters>
   <Parameter Value='<%# Request.Form["fruitColor"] %>' />
   <Parameter Value='<%# Request.Form["updateNames"] %>' />
   </Parameters>
</MM:Update>


Attribute

The MM:Update tag uses the logic used by the MM:DataSet tag, so it shares all of that tag’s attributes. For more information, see MM:DataSet. Note the following attributes values:

Expression

By setting this attribute to false, the tag does nothing. That is, the SQL statement or stored procedure specified in the CommandText attribute is not executed. You can use the Expression attribute to control when the update operation takes place. For example, you might want to perform server-side form validation before carrying out the update operation. In another case, the code might set Expression to true only if the form containing the data to update has been submitted.

CommandText

Typically, this is an UPDATE SQL statement or a stored procedure that updates records.

CreateDataSet

This attribute is normally set to false because a DataSet is not created after executing an UPDATE statement. In the case of a stored procedure, however, a DataSet might be created after the update operation takes place.


MM:Delete

Use the MM:Delete tag to delete records in a database.


Example

<MM:Delete
runat="server"
CommandText="DELETE FROM fruits WHERE name=?"
ConnectionString='<%# MM_NOTD_STRING %>'
Expression=<%# Request.Form["MM_delete"] == "true" %>
Debug=”true”
CreateDataSet="false"
>
   <Parameters>
   <Parameter Value='<%# Request.Form["deleteNames"] %>' />
   </Parameters>
</MM:Delete>


Attribute

The MM:Delete tag uses the logic used by the MM:DataSet tag, so it shares all of that tag’s attributes. For more information, see MM:DataSet. Note the following attributes values:

Expression

By setting the Expression to false, the tag does nothing. That is, the SQL statement or stored procedure specified in the CommandText attribute is not executed. You can use the Expression attribute to control when the delete operation takes place. For example, you might want to perform server-side validation before carrying out the delete operation.

CommandText

Typically, this is a DELETE SQL statement or a stored procedure that deletes records.

CreateDataSet

This attribute is normally set to false because a DataSet is not created after executing a DELETE statement. In the case of a stored procedure, however, a DataSet might be created after the delete operation takes place.


Parameters

Use the Parameters tag to specify parameters. There are two conditions under which parameters might be specified:

  • The CommandText attribute of the main tag specifies a parameterized SQL statement. This is an SQL statement that has question marks (?) as placeholders for parameters.

    • Note: It is not legal to parameterize every part of every SQL statement. For example, it is possible to parameterize the WHERE clause of a SELECT statement but not its ORDER BY clause. Generally, you can parameterize any name/value pair in a SQL statement.

  • The CommandText attribute specifies a stored procedure that takes parameters.

In both of these cases, parameter values are provided by Parameter tags that appear in the same order as the placeholders (see Parameter). The Parameter tags must be surrounded by a Parameters tag.


Parameter

Use the Parameter tag to specify parameter values.


Attributes

Value

Required. The value to be assigned to Input or InputOutput parameters (see Direction). The value will be cast to an appropriate data type before being passed to the database. The casting depends on the setting of the Type attribute. When the Direction attribute is Output, InputOutput, or ReturnValue, the Value will be set after the CommandText is executed.

Direction

Optional. Lets you specify one of the following values: Input, InputOutput, Output, ReturnValue. Default is Input.

Name

Optional. For parameterized SQL statements, the name can be anything. Typically, the name relates to the parameter's meaning, such as @deptName, and begins with the @ character. However, the only requirement is that the order in which the Parameter tags appear must correspond to the order of the question marks in the SQL statement. Since the name is optional, you can omit this attribute, in which case the name will be set to “parameter_” plus the one-based index of the parameter within the list of parameters provided.

For stored procedures, the name must match the parameter markers in the stored procedure (for example, @id). This means you must provide this attribute when using stored procedures. If a parameter of type ReturnValue is needed, its Parameter tag must occur before any other Parameter tag.

Size

Optional.The size of the parameter's value. This is also known as the width of the column. If not provided, the value of this attribute is inferred from the Type and Value attributes.

Type

Optional. Specifies the parameter type. You can specify the following data types, each of which can be expressed in one of two ways.

(int)OleDbType.Boolean | "Boolean"
(int)OleDbType.UnsignedTinyInt | "UnsignedTinyInt"
(int)OleDbType.Char | "Char"
(int)OleDbType.DBTimeStamp | "DBTimeStamp"
(int)OleDbType.Decimal | "Decimal"
(int)OleDbType.Double | "Double"
(int)OleDbType.Single | "Single"
(int)OleDbType.Integer | "Integer"
(int)OleDbType.SmallInt | "SmallInt"
(int)OleDbType.BigInt | "BigInt"
(int)OleDbType.VarChar | "VarChar"
(int)OleDbType.UnsignedSmallInt | "UnsignedSmallInt"
(int)OleDbType.UnsignedInt | "UnsignedInt"
(int)OleDbType.UnsignedBigInt | "UnsignedBigInt"
(int)OleDbType.Currency | "Currency"
(int)OleDbType.DBDate | "DBDate"
(int)OleDbType.TinyInt | "TinyInt"
(int)OleDbType.DBTime | "DBTime"
(int)OleDbType.VarNumeric | "VarNumeric"

The following OleDbType values are not supported:

(int)OleDbType.Guid | "Guid"
(int)OleDbType.Variant | "Variant"
Previous


Trademarks

Afterburner, AppletAce, Attain, Attain Enterprise Learning System, Attain Essentials, Attain Objects for Dreamweaver, Authorware, Authorware Attain, Authorware Interactive Studio, Authorware Star, Authorware Synergy, Backstage, Backstage Designer, Backstage Desktop Studio, Backstage Enterprise Studio, Backstage Internet Studio, Design in Motion, Director, Director Multimedia Studio, Doc Around the Clock, Dreamweaver, Dreamweaver Attain, Drumbeat, Drumbeat 2000, Extreme 3D, Fireworks, Flash, Fontographer, FreeHand, FreeHand Graphics Studio, Generator, Generator Developer's Studio, Generator Dynamic Graphics Server, Knowledge Objects, Knowledge Stream, Knowledge Track, Lingo, Live Effects, Macromedia, Macromedia M Logo & Design, Macromedia Flash, Macromedia Xres, Macromind, Macromind Action, MAGIC, Mediamaker, Object Authoring, Power Applets, Priority Access, Roundtrip HTML, Scriptlets, SoundEdit, ShockRave, Shockmachine, Shockwave, Shockwave Remote, Shockwave Internet Studio, Showcase, Tools to Power Your Ideas, Universal Media, Virtuoso, Web Design 101, Whirlwind and Xtra are trademarks of Macromedia, Inc. and may be registered in the United States or in other jurisdictions including internationally. Other product names, logos, designs, titles, words or phrases mentioned within this publication may be trademarks, servicemarks, or tradenames of Macromedia, Inc. or other entities and may be registered in certain jurisdictions including internationally.

This guide contains links to third-party Web sites that are not under the control of Macromedia, and Macromedia is not responsible for the content on any linked site. If you access a third-party Web site mentioned in this guide, then you do so at your own risk. Macromedia provides these links only as a convenience, and the inclusion of the link does not imply that Macromedia endorses or accepts any responsibility for the content on those third-party sites.

Next


Apple Disclaimer

APPLE COMPUTER, INC. MAKES NO WARRANTIES, EITHER EXPRESS OR IMPLIED, REGARDING THE ENCLOSED COMPUTER SOFTWARE PACKAGE, ITS MERCHANTABILITY OR ITS FITNESS FOR ANY PARTICULAR PURPOSE. THE EXCLUSION OF IMPLIED WARRANTIES IS NOT PERMITTED BY SOME STATES. THE ABOVE EXCLUSION MAY NOT APPLY TO YOU. THIS WARRANTY PROVIDES YOU WITH SPECIFIC LEGAL RIGHTS. THERE MAY BE OTHER RIGHTS THAT YOU MAY HAVE WHICH VARY FROM STATE TO STATE.

Copyright © 1997-2002 Macromedia, Inc. All rights reserved. This manual may not be copied, photocopied, reproduced, translated, or converted to any electronic or machine-readable form in whole or in part without prior written approval of Macromedia, Inc.

Third Party Software Notices and/or Additional Terms and Conditions can be found at http://www.macromedia.com/go/thirdparty/.


Acknowledgments

Project Management: Sheila McGinn

Writing: Chris Bedford, Kim Diezel, Jed Hartman, Charles Nadeau, Jennifer Rowe

Editing: Mary Ferguson, Mary Kraemer, Lisa Stanziano

Production Management: Patrice O’Neill

Multimedia Design and Production: Aaron Begley, Benjamin Salles, Noah Zilberberg

Print and Help Design and Production: Caroline Branch, John Francis

Web Editing and Production: George Brown, Rebecca Godbois, Jeff Harmon, Jon Varese

Special thanks to Luciano Arruda, Jake Cockrell, Kristin Conradi, George Comninos, David Deming, Tonya Estes, Stephanie Goss, David Halbakken, Nick Halbakken, Wanda Huang, Narciso (nj) Jaramillo, Craig Jennings, Ken Karleskint, Sho Kuwamoto, David Lenoe, Jay London, Bonnie Loo, Sam Mathews, Larry McLister, Susan Morrow, Masayo Noda, Dan Radigan, Mike Sundermeyer, Heidi Bauer Williams, Jorge Taylor, Lawrence Teschmacher, Venu Venugopal, and the entire Dreamweaver engineering and QA teams.

First Edition: June 2002

Macromedia, Inc.
600 Townsend St.
San Francisco, CA 94103

Help Version: 6.0.28

Previous


000_titl.htm

Using Dreamweaver MX

Copyright © 1997-2002 Macromedia, Inc.
All rights reserved.
Trademarks and Acknowlegments