Welcome to Dreamweaver

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

Dreamweaver MX 2004 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 2004, nor is it an introduction to web design. For more detailed information about Dreamweaver, see Dreamweaver Help (select Using Dreamweaver from the Help menu).

This chapter contains the following sections:

  • Learning Dreamweaver basics
  • Installing and running Dreamweaver
  • Viewing the sample site
Next


Learning Dreamweaver basics

To begin learning to use Dreamweaver, begin with this Getting Started guide. Then proceed to other resources, such as the help system and the Macromedia Support Center.

This section contains the following topics:

  • How to use this guide
  • Other resources
  • Typographical conventions


How to use this guide

The guide is divided into several chapters. We recommend that you read them in the following order:

  1. This introduction provides basic information about installing and using Dreamweaver.
  2. The Dreamweaver Workspace provides an overview of the Dreamweaver MX 2004 workspace.
  3. Quick Site Setup explains how to set up a site. After reading this setup chapter, you can experiment on your own rather than reading the rest of this guide if you prefer.
  4. If you’ve created web pages before but you haven’t used Dreamweaver, follow the static-site tutorials: Tutorial: Creating a Static Page, Tutorial: Editing Code, and Tutorial: Linking and Previewing Pages. These tutorials teach you the basics of how to create a small, but functional, static website using the Dreamweaver visual authoring tools. They also teach you the basics of using the tools for hand-editing code in Dreamweaver.
  5. If you’re unfamiliar with the concepts behind web applications, read Understanding Web Applications.
  6. If you want to learn about developing web applications, start by choosing a server technology (ColdFusion, ASP.NET, ASP, JSP, or PHP) and read the appropriate setup chapter: Setup for Sample ColdFusion Site, Setup for Sample ASP.NET Site, Setup for Sample ASP Site, Setup for Sample JSP Site, or Setup for Sample PHP Site.
  7. If necessary, install a web server, following the instructions in Installing a Web Server.
  8. To learn about developing a simple database-driven web application using Dreamweaver, follow the web application tutorial: Tutorial: Developing a Web Application.

Within each chapter, you should read through the chapter in order.

The lessons in this guide use page layouts and sample content provided with Dreamweaver. If you 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.

Dreamweaver Help includes comprehensive information about using all aspects of Dreamweaver. 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, 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.

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.

Macromedia Developer Center provides tools, tutorials, and more for all Macromedia products.

For information about other informational and instructional resources for Dreamweaver, see "Guide to Dreamweaver instructional media" in Dreamweaver Help (Help > Using Dreamweaver).


Typographical conventions

The following typographical conventions are used in this guide:

  • 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 and explains how to install 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.

This section covers the following topics:

  • System requirements
  • Installing Dreamweaver
  • Activating Dreamweaver
  • Using Dreamweaver in a multiuser environment
  • Registering Dreamweaver MX 2004


System requirements

The following hardware and software is required to run Dreamweaver.

System requirements for Microsoft Windows:

  • An Intel Pentium III processor or equivalent, 600 MHz or faster
  • Windows 98, Windows 2000, Windows XP, or Windows .NET Server 2003
  • At least 128 MB of available random-access memory (RAM) (256 MB recommended)
  • At least 275 MB available disk space
  • A16-bit (thousands of colors) monitor capable of 1024 x 768 pixel resolution or better (millions of colors recommended)

System requirements for Apple Macintosh:

  • A Power Macintosh G3 or later, 500 MHz or faster
  • Mac OS X 10.2.6
  • At least 128 MB of available random-access memory (RAM) (256 MB recommended)
  • At least 275 MB available disk space
  • A16-bit (thousands of colors) monitor capable of 1024 x 768 pixel resolution or better (millions of colors recommended)


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. Double-click the Dreamweaver MX 2004 installer icon.
  3. Follow the onscreen instructions.
  4. If prompted, restart your computer.


Activating Dreamweaver

If you are a single-license user, you must activate your license within thirty days of installation. You can activate using an Internet connection or by phone in a simple, seamless process that takes only a few moments. Product activation does not require you to submit personal information, only your product serial number. For more information, visit the Macromedia Product Activation Center.


Using Dreamweaver in a multiuser environment

In a multiuser operating system such as Windows 2000, Windows XP, or Mac OS X, applications are generally installed in a folder from which all users can run them, such as C:\Program Files (Windows) or /Applications (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 prevent your customizations from affecting others, the first time you run Dreamweaver in one of the multiuser operating systems that it recognizes, the application automatically creates copies of a variety of configuration files. These user configuration files are stored in a folder belonging to you.

Note: In older operating systems (such as Windows 98), 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 2004, 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" in Extending Dreamweaver Help (Help > Extensions > Extending Dreamweaver).

When you uninstall Dreamweaver from a multiuser system, Dreamweaver removes each user configuration folder.


Registering Dreamweaver MX 2004

To get additional Macromedia support, it’s a good idea to register your copy of Macromedia Dreamweaver MX 2004, 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 2004, do one of the following:

  • Select Help > Activation > Online Registration and fill out the electronic form.
  • Select Help > Activation > Print Registration, print the form, and mail it to the address shown on the form.


Viewing the sample site

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

To view the sample site in a browser:

  1. Open the Samples folder in the Dreamweaver application folder. Then open the GettingStarted folder and the FinalSite folder.
  2. Open the index.html file (from the FinalSite folder) in a browser.
  3. When you’re done viewing the sample site, proceed to the next chapter of this guide.

Previous


The Dreamweaver Workspace

In Windows, Dreamweaver MX 2004 provides an all-in-one-window integrated workspace. In the integrated workspace, all windows and panels are integrated into a single larger application window. You can choose between a designer-oriented layout and a layout oriented toward the needs of hand-coders.

On the Macintosh, Dreamweaver provides a floating workspace layout, in which each document is in its own individual window. Panel groups are initially docked together, but can be undocked into their own windows. Windows "snap" automatically to each other, to the sides of the screen, and to the Document window as you drag or resize them.

Note: You can customize your workspace by rearranging panels and panel groups; for more information, see Using Dreamweaver Help.

This chapter contains the following sections:

  • Choosing a workspace layout (Windows only)
  • Windows and panels overview
  • Menus overview
Next


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:

Designer 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. This layout is recommended for most users.

Note: Most of this guide assumes that you’re using the Designer workspace.

Coder workspace is the same integrated workspace, but the panel groups are docked on the left, in a layout similar to that used by Macromedia HomeSite and Macromedia ColdFusion Studio, and the Document window shows Code view by default. This layout is recommended for HomeSite or ColdFusion Studio users and other hand-coders who want a familiar workspace layout.

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


Windows and panels overview

This section briefly describes some elements of the Dreamweaver workspace. Some information about how to use these tools appears later in this guide; for more detailed information, see Using Dreamweaver Help.

This is a picture of the feature being described.

The Start page (not shown) enables you to open a recent document or create a new document. From the Start page you can also learn more about Dreamweaver by taking a product tour or a tutorial.

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 a table by clicking the Table button 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 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 Files panel enables you to manage your files and folders, whether they are part of a Dreamweaver site or on a remote server. The Files panel also enables you to access all the files on your local disk, much like Windows Explorer (Windows) or the Finder (Macintosh).

Dreamweaver provides a variety of other panels, inspectors, and windows not shown here, such as the CSS Styles panel and the Tag 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, Save All, Cut, Copy, Paste, Undo, and Redo. 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. In Windows, the Edit menu also provides access to Preferences; on the Macintosh, use the Dreamweaver menu to open the Preferences dialog box.

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 Dreamweaver tools and toolbars.

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 manage sites and upload and download files.

Tip: Some of the capabilities that were in the Site menu in previous versions of Dreamweaver can now be found in the Options menu of the Files panel.

The Window menu provides access to all of the panels, inspectors, and windows in Dreamweaver. (For toolbars, see the View menu.)

The Help menu provides access to Dreamweaver documentation, including help systems for using Dreamweaver and 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.

Previous


Quick Site Setup

This chapter explains how to set up a Dreamweaver MX 2004 site. In Dreamweaver, a site generally consists of two parts: a collection of files on a local computer (the local site), and a location on a remote web server that you upload the files to when you’re ready to make them publicly available (the remote site).

After you set up a site, you can explore Dreamweaver on your own, using your own existing web pages. Alternatively, you can follow the tutorials in the rest of this guide to learn how to create a simple website using sample content provided with Dreamweaver MX 2004.

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. You can use Dreamweaver in other ways (such as running a web server on your local computer, or uploading files to a staging server, or editing files without defining a site, 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.

This chapter contains the following sections:

  • About sites
  • Creating a site: workflow overview
  • Define a Dreamweaver site
Next


About sites

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. In the most common Dreamweaver workflow, 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.


Creating a site: workflow overview

The order of lessons in this guide 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 website:

  1. Plan and prepare, including setting up a Dreamweaver site (see Define a Dreamweaver site).
  2. Create pages, adjust their layout, and add content (see Tutorial: Creating a Static Page).
  3. Edit the code as needed (see Tutorial: Editing Code).
  4. Link pages together (see Tutorial: Linking and Previewing Pages).
  5. Preview and publish your site (see Preview pages in a browser and Define a remote folder).
  6. (Optional) Add dynamic pages that display information from databases (see Understanding Web Applications and Tutorial: Developing a Web Application).


Define a Dreamweaver site

Normally, you would start creating a website by planning it: figuring out how many pages to create, what content appears on each page, what the page layouts should look like, and how the pages are connected to each other. However, the sample site described in these tutorials is a very simple one, so it doesn’t need very much planning; it consists of only a few web pages, with links between them. So for this site, you can proceed directly to setting up your local site.

To set up a local site using the sample files, first copy the sample files to a local folder and then create a Dreamweaver site definition to allow you to manage the files within Dreamweaver.

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

To set up a local site:

  1. Copy the sample files to a folder on your hard disk (see Copy the sample files).
  2. Define the folder as a Dreamweaver local folder (see Define a local folder using the Site Definition Wizard).
  3. Define a folder on a web server as a Dreamweaver remote folder (see Define a remote folder).
  4. Upload the sample files to the web server (see Upload your local files).


Copy the sample files

When you create a local site, you can place any existing assets (images or other pieces of content) 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 sample files included with Dreamweaver contain assets for the site you’ll build with these Getting Started tutorials. The first step in creating the site is to copy the sample files from the Dreamweaver application folder to an appropriate folder on your hard disk.

Note: The recommended folder structure and location for your local site was chosen to make it easy to follow the tutorials. However, when the sample files are in the recommended location, you won’t be able to use site root-relative links in the sample site. Therefore, these tutorials use only document-relative links. For information about root-relative and document-relative links, see Using Dreamweaver Help.

To copy the sample files:

  1. Create a new folder called Sites-Local in your user folder on your hard disk.

    For example, create one of the following folders, depending on which operating system you’re using:

    • C:\Documents and Setting\your_user_name\My Documents\Sites-Local (Windows)
    • /Users/your_user_name/Documents/Sites-Local (Macintosh).

      Note: On the Macintosh, there’s a folder called Sites already in your user folder. Don’t use that Sites folder as your local folder; the Sites folder is where you place your pages to make them publicly accessible when you’re using the Macintosh as a web server.

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

    If you installed Dreamweaver to its default location, the path to the folder is as follows:

    • C:\Program Files\Macromedia\Dreamweaver MX 2004\Samples\ GettingStarted\ (Windows)
    • /Applications/Macromedia Dreamweaver MX 2004/Samples/GettingStarted (Macintosh)
  3. Copy the GettingStarted folder into the Sites-Local folder.

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

(See Define a local folder using the Site Definition Wizard.)


Define a local folder using the Site Definition Wizard

You’ll create a site definition and define a local folder 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.

If you already have a website on a remote server and you want to edit that site instead of using the sample files, see "Editing existing websites in Dreamweaver" in Using Dreamweaver Help (Help > Using Dreamweaver).

To define a site:

  1. Start Dreamweaver.
  2. Select Site > Manage Sites (that is, select Manage Sites from the Site menu).

    The Manage Sites dialog box appears.

  3. In the Manage Sites dialog box, click New, and select Site from the pop-up menu.

    The Site Definition dialog box appears.

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

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

  5. 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 Trio Motors.

    This is a picture of the feature being described.

  6. Click Next to proceed to the next step.

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

  7. 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.

    To set up a site to create a web application, you would need to select 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 Tutorial: Developing a Web Application.

  8. Click Next to proceed to the next step.

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

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

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

  10. Click the folder icon next to the text box. 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, but it’s easier to specify an accurate folder name if you browse to the folder rather than typing the path.

    The Choose Local Root Folder for Site dialog box appears.

  11. In the Choose Local Root Folder for Site dialog box, start by navigating to the Sites-Local folder on your local disk, the folder you copied the sample files into in Copy the sample files. Select the GettingStarted folder inside the Sites-Local folder. Open the GettingStarted folder, and click Select (Windows) or Choose (Macintosh).

    This is a picture of the feature being described.

  12. Click Next to proceed to the next step.

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

  13. For now, select None from the pop-up menu.

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

  14. Click Next to proceed to the next step.

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

  15. Click Done to finish.

    The Manage Sites dialog box appears, showing your new site.

  16. Click Done to close the Manage Sites dialog box.

The Files panel now shows the new local root folder for your current site. The file list in the Files panel acts as a file manager, allowing you to copy, paste, delete, move, and open files just as you would on a computer desktop.

This is a picture of the feature being described.

You’ve now defined a local root folder for your site. You can follow the rest of the tutorials in this guide to create the Trio Motors sample site, or you can work on your own pages. When you’re done creating and editing pages, proceed to define a remote folder on a server and publish your pages. See Define a remote folder.


Define a remote folder

After you create a 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 Internet Information Services (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.

Alternatively, you can run a web server on your local computer, such as IIS (Windows) or Apache (Macintosh). For more information about setting up a web server on your local computer, see Installing a Web Server.

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 Define a local folder using the Site Definition Wizard.

To connect to a remote site:

  1. In your remote site (on the server), create an empty folder inside the web root folder for the server. Name this new empty folder with the same name as your local root folder; for example, for the tutorial site, you might name the remote empty folder GettingStarted to match the name of the local root folder.
  2. In Dreamweaver, select Site > Manage Sites.
  3. Select a site (such as Trio Motors) and click Edit.
  4. Click the Basic tab at the top of the dialog box.
  5. 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.

  6. In the pop-up menu labeled "How do you connect to your remote server?" select a method for connecting to the remote site.

    The most common methods for connecting to a server on the Internet are FTP and SFTP; the most common method for connecting a server on your intranet, or to your local computer if you’re using that as a web server, is Local/Network. If you aren’t sure what to select here, ask the server’s system administrator.

  7. If you selected 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.
    • If your server supports SFTP, select the Use Secure FTP (SFTP) option.
    • Click Test Connection.
    • If the connection is unsuccessful, consult your system administrator.
  8. If you selected Local/Network, click the folder icon next to the text box and browse to the remote site’s root folder. You may want to deselect the Refresh Remote File List Automatically option for improved speed.
  9. After you’ve entered the appropriate information, click Next.
  10. Don’t enable file check-in and check-out for the Trio Motors site.

    If you and your co-workers are working together on a larger site, the file check-in and check-out feature helps to prevent you from overwriting each others’ files. Also, if you or your co-workers use Macromedia Contribute, you must enable file check-in and check-out. For the Trio Motors sample site, though, you don’t need this feature.

  11. Click Next.
  12. Click Done to finish setting up the remote site.
  13. Click Done again to dismiss the Manage Sites dialog box.


Upload your local files

After setting up your local and remote folders, you can upload your files from your local folder to the web server. To make your pages publicly accessible, you must upload them even if the web server is running on your local computer.

To upload your pages to a remote site:

  1. In the Files panel (Window > Files), select the site’s local root folder.
  2. Click the blue Put Files arrow icon in the Files panel toolbar. This is a picture of the feature being described.

    Dreamweaver copies all the files to the remote folder you defined in Define a remote folder. This operation may take some time, as Dreamweaver must upload all the files in the site, including multiple versions of some files for use with multiple tutorials.

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


Tutorial: Creating a Static Page

This tutorial explains how to create and save a page in Macromedia Dreamweaver MX 2004, then add text, images, and colors to the page.

Before you begin this tutorial, set up your site by following the instructions in Quick Site Setup.

This tutorial contains the following lessons:

  • Open and save a new page
  • Add an image placeholder
  • Set a page title
  • Add styled text
  • Add images
  • Set background colors
  • Further reading
Next


Open and save a new page

After setting up a site, you can create web pages to populate it.

If you’re creating your own pages from scratch, you can use the Dreamweaver start page to create a new page, or you can select File > New to choose from a wider range of predesigned page layouts.

This tutorial, however, assumes that you’re using the layout.html page design provided as part of the Dreamweaver sample content.

To open a page:

  1. In the Files panel, expand the 1-Design folder and double-click the layout.html file.

    The layout.html page appears in a new Document window. The page is filled with placeholder "Lorem ipsum" text to show how the page design will look when text is added to it.

    This is a picture of the feature being described.

  2. Save the page with a new filename.

To save your page:

  1. Select File > Save As.
  2. In the Save As dialog box, browse to and open the 1-Design folder inside the site’s local root folder.

    Reminder: the local root folder is the folder you created when you set up the site in Define a local folder using the Site Definition Wizard.

  3. Enter the filename index.html.
  4. Click Save to save the file in the 1-Design folder.

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


Add an image placeholder

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

To add an image placeholder:

  1. Click at the beginning of the main text column, just before the word "Title," and press Enter (Windows) or Return (Macintosh) to create a blank line before the title. Then click in the new blank line.

    This is a picture of the feature being described.

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

  2. Select Insert > Image Objects > Image Placeholder.
  3. In the Image Placeholder dialog box, enter a name for the placeholder (such as SplashImage).

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

  4. Still in the Image Placeholder dialog box, enter a width and height. If you’re creating the Trio Motors page, enter 176 for width and 190 for height.
  5. Leave the Color and Alternate Text text boxes blank.

    Note: It’s important to provide alternative text for some kinds of images, to make the information supplied by the image accessible to visitors who use screen readers or text-only browsers. However, for images that don’t provide information, you should use an empty alt attribute. When you leave the Alternate Text text box blank, Dreamweaver adds an alt="" attribute to the img tag.

  6. Click OK.

    A gray box with the specified dimensions appears. This is a placeholder for an image, often used to help you lay out pages when the final images aren’t ready yet.

    This is a picture of the feature being described.

  7. Click in the "Lorem Ipsum Dolor" heading at the top of the page. In the tag selector at the bottom of the Document window, select the <h1> tag, and press Backspace (Windows) or Delete (Macintosh).

    The text and the h1 tag are deleted.

  8. Leaving the insertion point where it is, repeat steps 2 through 6 to insert another image placeholder. This time, name the placeholder Banner, and enter a width of 600 and a height of 41. Later, you’ll replace this placeholder with a banner image across the top of the page.
  9. Save your page.


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, select 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 page:

  1. If the Document toolbar isn’t already visible, select View > Toolbars > Document.

    The Document toolbar appears at the top of the Document window.

    This is a picture of the feature being described.

  2. In the Title text box, select the text "Untitled Document" and press Backspace (Windows) or Delete (Macintosh). Then type a title for the page, such as Trio Motors Home Page. Then press Enter (Windows) or Return (Macintosh) to see the page title update in the window’s title bar.
  3. Save your page.


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). Then you can format the text using CSS styles.

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

This section contains the following lessons:

  • Add text
  • Add styles to the text


Add text

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

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.

Note: It can be useful to leave the placeholder text in place until you’re finished with design and layout, 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 the "Title" heading text under the image placeholder in the left column to select that entire heading.
  2. Type Watch the ZX2002 Launch Webcast (or your own heading text if you prefer).
  3. Select the paragraph of placeholder text immediately below the new heading, and delete it by pressing Backspace (Windows) or Delete (Macintosh).
  4. In the Files panel, locate the mainItem.txt file in your Assets folder (inside the 1-Design folder). Double-click the file’s icon to open it in Dreamweaver.

    Note: In this sample site, the file containing the text to be used is a text file. For other sites, you might be given documents in a variety of formats, including HTML documents generated by Microsoft Word; you can import such HTML documents and remove unnecessary code using the Import Word HTML command in Dreamweaver. For more information, see Using Dreamweaver Help.

    Note that the text file appears in a new Document window with a gray or colored 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.

  5. Select View > Code View Options > Word Wrap to see all of the text.

    This is a picture of the feature being described.

  6. In the mainItem.txt Document window, press Control+A (Windows) or Command+A (Macintosh) to select all the text, then select Edit > Copy to copy the text.
  7. Close the mainItem.txt file by selecting File > Close.
  8. In the index.html Document window, click in the blank line below the heading in the main (left) column, and select Edit > Paste Text.
  9. In the right column of index.html, in the sidebar area, select the text that says "News" and type Previews & More, then press Enter (Windows) or Return (Macintosh).
  10. In the Files panel, locate the previewsItem.doc file in your Assets folder. Double-click the file’s icon to open it in Microsoft Word. (If you don’t have Microsoft Word, you can open the HTML version of the file, previewsItem.html, in Dreamweaver.)

    This file contains copy advertising a Trio Motors special preview, to be added to the sidebar of the main page. If you were creating your own site, you could add your own content to the sidebar, which might be provided by someone else in the form of a Microsoft Word or text file.

  11. In Microsoft Word (or the previewsItem.html Document window), select Edit > Select All to select everything in the file.
  12. Press Control+C (Windows) or Command+C (Macintosh) to copy the text.
  13. Close the previewsItem.doc or previewsItem.html page by selecting File > Close.
  14. Switch back to the index.html document in Dreamweaver. Select the "Lorem ipsum" paragraph in the sidebar.
  15. Press Edit > Paste Formatted to paste the text.

    The text in the Microsoft Word document has a Word style called sidebar-text applied to it. When you paste this styled text into an HTML document, Dreamweaver creates a CSS style named sidebar-text, using the style definition from the Word document, and applies it to the pasted text.

  16. Save your page.


Add styles to the text

There are several ways to style text in HTML. One approach is to use Cascading Style Sheets (CSS) styles to define specific HTML tags to format text 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. In the CSS Styles panel (Window > CSS Styles), click the Attach Style Sheet button. This is a picture of the feature being described.

    The Attach External Style Sheet dialog box appears.

  2. Click the "sample style sheets" link at the bottom of that dialog box.

    The Sample Style Sheets dialog box appears, showing a list of predesigned style sheets.

  3. Select a style sheet. For the Trio Motors site, select Basic: Verdana, which redefines the body, td, and th tags by specifying fonts for them.

    This is a picture of the feature being described.

  4. At the bottom of the dialog box, click the Browse button. Browse to the Assets folder in your site, then to the CSS folder inside the Assets folder. When the CSS folder is selected, open it and click Select (Windows) or Choose (Macintosh).

    Tip: If you don’t have a CSS folder in your site, skip this step; Dreamweaver automatically creates a CSS folder when you attach a style sheet using the Sample Style Sheets dialog box.

  5. Click OK to create the style sheet and dismiss the Sample Style Sheets dialog box.

    Dreamweaver creates a new file containing a small set of predefined CSS styles. Dreamweaver also attaches this new style sheet to your current document.

    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.

  6. Save your page.

To add styles to the style sheet:

  1. In the Document window, click in the heading text that you typed in earlier (in Add text).
  2. In the CSS Styles panel (Window > CSS Styles), select the Level1_Verdana.css style sheet.
  3. Click the New CSS Style button.

    The New CSS Style dialog box appears.

  4. Select Tag from the Selector Type options, and select h1 from the Tag pop-up menu if it’s not already selected.
  5. In the Define In pop-up menu, leave Level1_Verdana.css selected.
  6. Click OK.

    The CSS Style Definition dialog box appears.

  7. In the Size text box, type 120. Select % from the pop-up menu next to the Size text box.
  8. Click OK to redefine the h1 tag’s style and dismiss the dialog box.
  9. Click in the "Previews & More" heading in the sidebar.
  10. Repeat steps 2 through 8 to redefine the h2 tag, setting the size to 100%.

    The headings in the page are now closer in size to the body text.

  11. If you copied your sidebar text from the HTML document instead of the Word document, repeat the above steps to add a style called sidebar-text. This time, select Class from the Selector Type options, and type .sidebar-text (the beginning period is important) in the Name text box. Set the size to 80%. If you do this step, skip the following procedure.
  12. Save your page.

To edit a style in the style sheet:

  1. If you copied the sidebar text from the HTML document instead of the Word document, skip this procedure. If you copied the text from the Word document, follow this procedure.
  2. In the Document window, click in the sidebar text paragraph.
  3. Open the Tag inspector (Window > Tag Inspector), and select the Relevant CSS tab.
  4. In the upper part of the Relevant CSS tab, select the p.sidebar-text rule.

    The status line in the middle of the panel says "In current document."

  5. Click the Show Category View button in the middle of the panel. This is a picture of the feature being described.

    You can list CSS properties either by category or alphabetically.

  6. Expand the font category, and scroll down if necessary to find the font-size property.
  7. Click in the right column on the font-size line. Type 80 in the first text box, and select % (percent) from the second pop-up menu.

    The sidebar text changes to 80% of its original size.

  8. Make any other changes desired.
  9. When you’re done editing styles, switch to the Level1_Verdana.css window using the Window menu and save that file.


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, Macromedia recommends using one supplied with the Dreamweaver sample site.

To add an image to your page:

  1. Save your page if you haven’t already done so.

    You can insert an image into an unsaved document, but if you do, a dialog box appears, informing you that the URL used for the image will be the full local path to the image. Dreamweaver fixes the URL later, 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 a banner graphic at the top of the Trio Motors page, double-click the placeholder that’s labeled "Banner (600 x 41)."

    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.

    For information on document-relative and root-relative URLs, see Using Dreamweaver Help.

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

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

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

    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 Files panel and the Property inspector are showing (select Window > Files and Window > Properties if they aren’t visible), and make sure the placeholder is still selected in the Document window.
  8. In the Property inspector, drag from the Src text box’s Point-to-File icon to the Files 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 as you point to the Assets folder (if the folder is collapsed); the folder expands. Continue to hold the button down as you point to the images folder, until the pointer is over the homeMain.jpg file. Release the mouse button to select homeMain.jpg. This is a picture of the feature being described.

    In the Document window, an image of a car 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. If you want 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 select Insert > Image.

    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 page.

To make text flow around your image:

  1. Select the car image in the main column.
  2. In the CSS Styles panel (Window > CSS Styles), click the New CSS Style button.
  3. In the New CSS Style dialog box, select Advanced from the Selector Type options, and type #SplashImage (including the number sign at the beginning) in the Name text box. In the Define In option, select This Document Only.
  4. Click OK.
  5. In the CSS Style Definition dialog box, select the Box category, then select Left from the Float pop-up menu.
  6. Click OK to define the style and dismiss the dialog box.
  7. The style is applied to the image (which has SplashImage as the value of its ID attribute), making the text wrap around it.


Set background colors

In the predesigned pages provided with Dreamweaver, the background color of the sidebar is set to gray; for most sites, you may want to change background colors to match your site’s color scheme.

To set the background color of the sidebar:

  1. Click in the sidebar heading text.
  2. In the Tag inspector (Window > Tag Inspector), select the Relevant CSS tab.
  3. In the list of rules that apply to the current selection, select the line with the applied rule #col1.

    The status line in the middle of the Tag inspector changes to say "In file: divs.css," indicating that this rule is defined in the divs.css file.

  4. Click the Show Category View button, then expand the Background category.

    The background-color property name is shown with a line drawn through it, indicating that the current selection doesn’t inherit the property. However, the background color is visible because the background of the text is transparent by default, allowing the background color of the parent tag to show through.

    Tip: Whenever a property name is crossed out, you can move the pointer to point to the property name; a tooltip appears with more information.

  5. Click in the color box in the right-hand column on the background-color line.

    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 screen to select the color of the pixel you clicked. For example, click the background of the Trio logo image to make the background color of the sidebar match one of the image background colors.

    The sidebar’s background color changes to the color you picked.

  7. If you chose a dark color, then (with the #col1 rule still selected in the upper part of the Tag inspector) expand the Font category in the lower part of the Tag inspector and set a contrasting color (such as white) for the text, using the color attribute.
  8. Save your page.
  9. Switch to the divs.css document (using the Window menu) and save that document as well.

    Dreamweaver automatically opened the divs.css style sheet when you changed the background color, which is defined in that style sheet.


Further reading

For more information on the features discussed in this tutorial, see Using Dreamweaver Help.

Previous


Tutorial: Editing Code

As you add text, images, and other content, Dreamweaver MX 2004 generates HTML code. This tutorial explains how to use Code view to display a document’s underlying code, and to add and edit code manually.

If you’ve already set up your site and completed the previous tutorial, Tutorial: Creating a Static Page, you can continue working in the same folder, using the same files.

If you haven’t completed the previous tutorial, you can still complete this tutorial. First, set up your site by following the instructions in Quick Site Setup. Then use the files in the 2-Code folder to complete this tutorial. The 2-Code folder contains the files as they appear after completing the previous tutorial.

This tutorial contains the following lessons:

  • Look at the code
  • Switch to the coding workspace (Windows only)
  • Add a tag with the Tag Chooser
  • Edit a tag
  • Look up information about a tag
  • Add an image with code hints
  • Check your changes
  • Printing your code
  • Further reading
Next


Look at the code

Dreamweaver lets you view your page in either of two ways: Design view (where the document looks much like it would look in a browser), or 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 page:

  1. If the Document toolbar isn’t already visible, select View > Toolbars > Document.
  2. In the Document toolbar, click the Show Code and Design Views button (which is labeled Split).

    This is a picture of the feature being described.

    The window splits, showing both the Design view and 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:

  1. Place the insertion point where you want to view code changes, and 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.

When you’re working on your own pages, you can use whichever view is most comfortable for you. Most of the tutorials in this guide assume that you’re using Design view.

To show Design view only:

  1. If the Document toolbar isn’t already visible, select View > Toolbars > Document.
  2. In the Document toolbar, click the Design View button.


Switch to the coding workspace (Windows only)

If you didn’t already do so during installation, you can (optionally) make your Windows workspace look and feel more like the popular coding environments of Macromedia HomeSite and ColdFusion Studio.

Note: Macintosh users cannot change the workspace.

To switch to the coding workspace:

  1. Select Edit > Preferences, then select General from the list of categories on the left.

    The General category appears.

    This is a picture of the feature being described.

  2. Click the Change Workspace button.

    The Workspace Setup dialog box appears.

    This is a picture of the feature being described.

  3. Select the Coder option.
  4. Click OK as necessary to close the Workspace Setup dialog box and the Preferences dialog box.
  5. Close Dreamweaver and restart it.


Add a tag with the Tag Chooser

The next step in creating the Trio Motors home page is to wrap a div tag around the banner image at the top of the page. (For instructions on adding images to the page, see Add images.) There are a variety of ways to wrap a div tag around an image; this lesson explains how to use the Tag Chooser, which helps you insert any tag and add appropriate attribute values.

To write code using the Tag Chooser:

  1. Open index.html, if it’s not already open, and view it in Code view (View > Code).
  2. Select View > Code View Options > Word Wrap to enable word wrap if it isn’t already enabled.
  3. In the code just after the opening body tag, find and select the img tag corresponding to the banner image at the top of the page.

    Note: Make sure you select the entire img tag, including the opening and closing angle brackets.

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

    The Tag Chooser appears.

  5. In the Tag Chooser, expand the HTML Tags category, then the Formatting and Layout subcategory, then select General. A list of tag names appears in the right pane; select div from that list.

    Note: You can also select the HTML Tags category, and then select the div tag in the right pane, without first expanding Formatting and Layout.

  6. Click Insert.

    A tag editor for the div tag appears.

  7. In the tag editor, select the Style Sheet/Accessibility category and enter logo in the Class text box.

    This is a picture of the feature being described.

  8. Click OK to close the tag editor and insert the tag.

    Dreamweaver inserts the div tag in your page, wrapping it around the image tag.

  9. Click Close to close the Tag Chooser.
  10. Save your page.


Edit a tag

Next, you’ll use the Tag inspector to quickly make changes to a tag’s attributes.

To edit a tag using the Tag inspector:

  1. Open index.html in Code view, if it’s not already open.
  2. Open the Tag inspector, if it’s not already open, by selecting Window > Tag Inspector. Then select the Attributes tab.

    The Tag inspector displays the attributes of the tag that’s selected in the Document window. To view all of the tag’s possible attributes in alphabetical order, click the Show List View button in the Tag inspector.

    This is a picture of the feature being described.

  3. In the Document window’s Code view, click anywhere between the opening and closing brackets of any tag.

    The Attributes tab of the Tag inspector shows information about the tag’s HTML attributes.

  4. Still in Code view, find and click in the img tag for the trio_logo.jpg banner image.

    The Attributes tab of the Tag inspector shows information about the img tag’s attributes.

  5. In the Tag inspector, click in the empty text box beside the alt attribute, and type Trio Motors, then press Enter (Windows) or Return (Macintosh).

    Dreamweaver displays the new value in the Tag inspector and changes the code in the Document window.

  6. Save your page.


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 index.html in Code view, if it’s not already open.
  2. In the Document window, select the alt attribute name (not the attribute value) in an img tag.
  3. Right-click (Windows) or Control-click (Macintosh) the selected text, and then select Reference from the pop-up menu.

    The Reference panel opens and displays information about the alt attribute.

    Note: You can also select Window > Reference to display the Reference panel.

  4. For information about another tag or attribute, select the tag or attribute from the appropriate pop-up menu in the Reference panel.

    This is a picture of the feature being described.


Add an image with code hints

To add code to the page manually, simply click in Code view and start typing. You can use the code hints feature to speed up your work.

In this lesson, you’ll use code hints to add an image to the Trio Motors page.

To write code with the help of code hints:

  1. Open index.html in Code view, if it’s not already open.
  2. Find the code for the heading that contains the text Previews &amp; More. Drag to select the non-breaking space entity (&nbsp;) in the code in the blank paragraph that follows that text. If there is no blank paragraph following that heading text, then after the closing h2 tag, type the following code:
    <p></p>

    Then place the insertion point between the opening <p> tag and the closing <p> tag.

  3. Type an opening angle bracket (<).

    A list of tags appears at the insertion point.

    Note: You can set the length of the delay before the list appears by selecting Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh), and then selecting Code Hints from the category list on the left. In Code view, you can display a code hints menu at any time by pressing Control+Spacebar, and you can close a code hints menu at any time by pressing Escape.

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

    Tip: To quickly scroll to a tag, start to type the tag name.

  5. Press Spacebar to display a list of attributes for the tag.
  6. Begin to type src, and press Enter (Windows) or Return (Macintosh) when the src attribute is selected in the hints menu.

    The word Browse appears, selected, below the code you just typed.

  7. Press Enter (Windows) or Return (Macintosh) to browse to a file.

    The Select File dialog box appears.

  8. Navigate in your site folder to the image file Assets/images/preview.jpg and click OK (Windows) or Choose (Macintosh).

    The URL of the image file is inserted as the value of the src attribute, and the insertion point appears after the closing quotation mark.

  9. Press Spacebar, select the alt attribute from the hints menu, and press Enter (Windows) or Return (Macintosh).
  10. Leave the quotation marks empty, because this image is only an illustration. Use the Right Arrow key to move the insertion point to the right of the quotation marks.
  11. Type a space, a slash, and a closing angle bracket ( />) to complete the tag.

    Note: This page is an XHTML document, and empty XHTML tags (tags that have no closing tags) must end with a slash before the closing angle bracket.

  12. Save your page.

To add an attribute to an existing tag:

  1. Place the insertion point just after the tag’s final attribute value and press Spacebar.

    A list of attributes appears.

  2. 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 (labeled Design), or the Show Code and Design Views button (labeled Split) in the Document toolbar.
  • Preview the page in a web browser by pressing F12. To close the browser and return to your code, press Alt+F4 (Windows only).


Printing your code

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

To print code:

  1. View a page in Code view.
  2. Select File > Print Code.
  3. Specify printing options, then click OK (Windows) or Print (Macintosh).


Tutorial: Linking and Previewing Pages

This tutorial explains how to add links, rollover images, and a navigation bar to a page in Macromedia Dreamweaver MX 2004, preview the page in a browser, and publish it to a website.

If you’ve already set up your site and completed the previous tutorials, Tutorial: Creating a Static Page and Tutorial: Editing Code, you can continue working in the same folder, using the same files.

If you haven’t already completed the previous tutorials, you can still complete this tutorial. First, set up your site by following the instructions in Quick Site Setup. Then use the files in the 3-Link folder to complete this tutorial. The 3-Link folder contains the files as they appear after completing the previous tutorial.

If you switched to the Coder workspace layout (Windows only) for a tutorial but you prefer to use the Designer layout, you can use the Preferences dialog box (Edit > Preferences) to change workspaces again before you begin this tutorial.

This tutorial contains the following lessons:

  • Create a second page
  • Add text links between pages
  • Create a navigation bar
  • Copy the navigation bar
  • Preview pages in a browser
  • Set up a remote site, then publish
  • Further reading
Next


Create a second page

In this lesson, you’ll create a second page for your site; later, 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 for the second page from scratch instead, you can use the predesigned page layouts that come with Dreamweaver, or you can use the Dreamweaver layer-drawing or table-editing tools. However, none of those options are covered in this lesson. For information about those approaches, see Using Dreamweaver Help.

In a more complex site, the best way to make sure all your pages have the same layout is to use a template. For information about layers, div tags, CSS layout, table editing, Layout mode, frames, and templates, see Using Dreamweaver Help.

The second page to create in the Trio Motors site is the news page. You’ll create the news page by making a copy of the main (index.html) page, removing content that shouldn’t appear on the news page, and 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.html):

  1. In the Files panel, select the index.html file.
  2. From the Files panel’s Options menu, select Edit > Duplicate. This is a picture of the feature being described.

    A copy of the file appears.

    Tip: If the copy doesn’t appear immediately, click the Refresh button in the Files 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 news.html.

To remove unnecessary material from the new page:

  1. Open the new news.html page by double-clicking it in the Files panel.

    Look at the Document window’s title bar to be sure that you’re looking at the news.html file. The title bar should say "Trio Motors Home Page" and then a folder name and a filename; the filename should be news.html (or whatever you named it in the previous procedure).

  2. In the news.html page, select the car image in the main text column, and press Backspace (Windows) or Delete (Macintosh).

    The image is deleted.

  3. Triple-click the heading text in the main text column (the "Watch the ZX2002 Launch Webcast" heading) to select it. Then type a new heading, such as News.
  4. In the Files panel, locate the newsItem.txt file in your Assets folder. Double-click the file’s icon to open it in Dreamweaver.

    This file contains content to be added to the main column of the news page.

  5. In the newsItem.txt Document window, select Edit > Select All to select everything in the file.
  6. Press Control+C (Windows) or Command+C (Macintosh) to copy the text.
  7. Close the newsItem.txt Document window.
  8. Switch back to the news.html Document window. Triple-click the body text in the main column on the left.
  9. Press Control+V (Windows) or Command+V (Macintosh) to paste the new text.
  10. Click before the word "Example" (in Design view), and press Enter (Windows) or Return (Macintosh) to turn the example into a separate paragraph.
  11. Click before the phrase "Home Page" (in Design view), and press Enter (Windows) or Return (Macintosh) to turn that phrase into a separate paragraph.
  12. Save your page.


Add text links between pages

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

There are two other 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 news page to index.html:

  1. Switch to the news page if it’s not the current page. (If the page isn’t open, open it by double-clicking its icon in the Files panel.)
  2. In the bottom of the main text column on the left side, select the words Home Page.

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

  3. In the Property inspector (Window > Properties), click the folder icon next to the Link text box. Browse to the index.html file in the same folder as the news.html file, and click OK (Windows) or Choose (Macintosh) to link to that file.

    The "Home Page" text is underlined and turns blue, indicating that it’s now a link.

    Note: Links don’t work when you click them in the Document window in Dreamweaver; links work only in a browser. To make sure your link works correctly, you need to preview your page in a browser. For information on previewing, see Preview pages in a browser.

  4. Save your page.


Create a navigation bar

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 might appear to light up when the visitor points to it. Dreamweaver provides the ability to easily create a navigation bar consisting of a set of rollover images.

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

A navigation bar allows you to provide up to four images for each button: the normal two for a rollover, plus images that indicate that a navigation button is already active on a given page. In this lesson, however, you’ll create a navigation bar that uses only the standard two rollover images for each button.

Note: When creating a rollover or navigation bar, make sure that all the images for each button have the same width and height (in pixels).

In some browsers, navigation bar buttons that aren’t in a table may wrap onto a new line if the visitor makes the browser window too narrow. To avoid such wrapping, add a CSS style to the div tag surrounding the navigation bar.

To create a navigation bar:

  1. Switch to the main (index.html) page if it’s not the current page. (If the page isn’t open, open it by double-clicking its icon in the Files panel.)
  2. In the Document window, place the insertion point where you want the navigation bar to appear. On the Trio Motors main page, for example, you’ll be placing the navigation bar immediately after the banner image at the top of the page; so select that image, then select the <div.logo> tag in the tag selector at the bottom of the Document window. Now press Right Arrow to ensure that the insertion point is outside of the div tag that contains the banner image.
  3. Select Insert > Layout Objects > Div Tag. In the Insert Div Tag dialog box, type navbar in the Class text box, and click OK. Then press Backspace (Windows) or Delete (Macintosh) to delete the placeholder text that appears.
  4. Select Insert > Image Objects > Navigation Bar.
  5. The Insert Navigation Bar dialog box appears.

    This is a picture of the feature being described.

  6. In the Element Name text box, type a name for the button, such as showroom_button.

    This gives the button a unique name and makes it easily identifiable in the HTML code.

  7. Click the Browse button next to the Up Image text box, then navigate to the btnShowroom.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 Choose (Macintosh).

    The Up Image text box displays the path to the image: Assets/images/btnShowroom.jpg.

    Note: If it shows a longer path, you probably chose an image file in a different folder, or else you chose something other than Document from the Relative To pop-up menu. Click the Browse button and try again.

    The Up Image text box indicates the image to display when the button is in the "up" state, which is usually when the page first appears in the browser.

  8. Click the Browse button next to the Over Image text box, then navigate to btnShowroom_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 Choose (Macintosh).

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

  9. Leave the Down Image and Over While Down Image text boxes blank.
  10. In the Alternate Text text box, type Showroom.
  11. In the When Clicked, Go To URL text box, type showroom.html.

    This step causes the rollover image to link to a page called showroom.html. That page doesn’t exist yet; if you were creating a complete Trio Motors site, you would have to create that page.

  12. Make sure the Preload Images option is selected so the rollover images load when the page opens in the browser, ensuring a quick transition between images when a visitor moves the pointer over the original image.
  13. Deselect the Show "Down Image" Initially option.
  14. Click the Plus (+) button at the top of the page to add another button to the navigation bar. Repeat steps 6 through 13, entering news_button for the element name, btnNews.jpg for Up image, btnNews_on.jpg for Over image, News for alternate text, and news.html for URL.
  15. Click the Plus (+) button at the top of the page again to add another button to the navigation bar. Repeat steps 6 through 13, entering owners_button for the element name, btnOwners.jpg for Up image, btnOwners_on.jpg for Over image, Owners for alternate text, and owners.html for URL.
  16. Click the Plus (+) button at the top of the page again to add another button to the navigation bar. Repeat steps 6 through 13, entering services_button for the element name, btnServices.jpg for Up image, btnServices_on.jpg for Over image, Services for alternate text, and services.html for URL.
  17. In the Insert pop-up menu at the bottom of the dialog box, make sure that Horizontally is selected.
  18. Deselect the Use Tables option.
  19. Click OK to close the dialog box and create the navigation bar.

    The images specified in Up images appear in the document.

  20. Save your page.

To make sure the navigation bar buttons stay together on one line:

  1. Select one of the navigation bar images in the Document window.
  2. In the tag selector, select the <div.navbar> tag.
  3. In the CSS Styles panel (Window > CSS Styles), click the New CSS Style button.
  4. In the Selector Type options, select Class, and type .navbar in the Name text box. Be sure to include the period at the beginning.
  5. For Define In, select This Document Only.
  6. Click OK.
  7. In the CSS Style Definition dialog box, select the Block category.
  8. In the Whitespace pop-up menu, select nowrap.
  9. Click OK to define the style and dismiss the dialog box.

Note: Rollover images and navigation bars don’t change when you roll over them with the pointer in the Document window in Dreamweaver; the images change only in a browser. To make sure your navigation bar works, you need to preview your page in a browser. For information on previewing, see Preview pages in a browser.


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 images 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. For more information on those topics, see Using Dreamweaver Help.

To copy the navigation bar into another page:

  1. In the index.html file, select the Showroom rollover image.
  2. In the tag selector, select the <div#row1> tag.

    The div tag containing the banner logo and the navigation-bar rollovers is selected.

  3. Select Edit > Copy.
  4. Switch to the news.html file.
  5. Select the banner image at the top of the page.
  6. In the tag selector, select the <div#row1> tag.
  7. Select Edit > Paste.

    The navigation-bar rollover images are pasted into the file, along with the code needed to support the rollover behavior.

  8. Save your news.html page.


Preview pages in a 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 within a Document window; 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.html isn’t the current document, switch to it. (If it’s not open, open it.)
  2. Press the F12 key.

    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 select 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. If you’ve added a navigation bar to your page, move the pointer to point to the rollover images to see the images change. Click the News button to make sure the links work.

    Note: The other buttons in the Trio Motors navigation bar link to pages that don’t exist.

  4. Switch back to Dreamweaver to make any necessary changes and to upload the pages to your remote site.


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.

To publish your pages, follow the procedures in Define a remote folder and Upload your local files.


Understanding Web Applications

A web application is a collection of web pages that interact with visitors, 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:

  • About web applications
  • How a web application works
  • Authoring dynamic pages
  • Choosing a server technology
  • Web application terminology
Next


About web applications

A web application is a website that contains pages with partly or entirely undetermined content. The final content of a page is determined only when the visitor requests a page from the web server. Because the final content of the page varies from request to request based on the visitor’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 site visitors and developers, including the following:

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

    This kind of web application gives visitors the ability to search, organize, and navigate content as they see fit. Examples include company intranets, Microsoft MSDN (www.msdn.microsoft.com), and Amazon.com (www.amazon.com).

  • Collect, save, and analyze data provided by site visitors.

    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 (www.economist.com) and CNN (www.cnn.com).


Web application example

Janet is a professional web designer and long-time Macromedia Dreamweaver MX user responsible for maintaining the intranet and Internet sites of a medium-sized company of 1000 employees. One day, Chris from Human Resources comes to her 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 Chris. At the end of the month, Chris gathers all the e-mail messages and awards employees small cash prizes according to their point totals.

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

Janet 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 Chris one-click access to point totals at the end of each month

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


How a web application works

A web application is a collection of static and dynamic web pages. A static web page is one that does not change when a site visitor 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, while leaving certain information (such as employee name and results) to be determined when the page is requested by a particular employee.

This section contains the following topics:

  • Processing static web pages
  • Processing dynamic pages
  • Accessing a database


Processing static web pages

A static 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 visitor clicks a link on a web page, selects a bookmark in a browser, or enters a URL in a browser’s address text box.

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

<html>
    <head>
        <title>Trio Motors Information Page</title>
    </head>
    <body>
        <h1>About Trio Motors</h1>
        <p>Trio Motors is a leading automobile manufacturer.</p>
    </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 Flash content (a SWF file) can make a static page come alive. However, this documentation 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 visitor 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 static web page, the server sends the page directly to the requesting browser. When the web server receives a request for a dynamic page, however, it reacts differently: it passes the page to a special piece of software 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 the appendix "Beginner’s Guide to Databases" in Using Dreamweaver Help.

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 Microsoft Word document opened in Notepad or BBEdit may be undecipherable. The application server can communicate with the database only through the intermediary of a database driver: 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 set of data extracted from one or more tables in a database. The recordset is returned to the application server, which uses the data to complete the 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 the appendix "SQL Primer" in Using Dreamweaver Help.

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.

You can use almost any database with your web application, as long as the appropriate database driver for it is installed on the server.

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 basic example uses ColdFusion Markup Language (CFML):

<html>
    <head>
        <title>Trio Motors Information Page</title>
    </head>
    <body>
        <h1>About Trio Motors</h1>
        <p>Trio Motors is a leading automobile manufacturer.</p>
        <!--- embedded instructions start here --->
        <cfset department="Sales">
        <cfoutput>
        <p>Be sure to visit our #department# page.</p>
        </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. Insert the variable’s value, "Sales", in the HTML code.

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

<html>
    <head>
        <title>Trio Motors Information Page</title>
    </head>
    <body>
        <h1>About Trio Motors</h1>
        <p>Trio Motors is a leading automobile manufacturer.</p>
        <p>Be sure to visit our Sales page.</p>
    </body>
</html>

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

About Trio Motors

Trio Motors is a leading automobile manufacturer.

Be sure to visit our Sales page.

You choose a scripting or tag-based language to use depending on the server technology available on your server. Here are the most popular languages for the five server technologies supported by Dreamweaver MX 2004:

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 create 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 to build web applications using any of 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.

Which server technology you choose 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 ColdFusion MX Server, 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 CD (Windows version only) and on the Macromedia website at www.macromedia.com/software/coldfusion/.

For more information, see "Setting up an application server" in Using Dreamweaver Help.

To learn more about ColdFusion, see Using ColdFusion (available within Dreamweaver Help) or visit the Macromedia website at www.macromedia.com/software/coldfusion/.

To learn more about ASP.NET, visit the Microsoft website at www.asp.net/.

To learn more about ASP, visit the Microsoft website at msdn.microsoft.com/library/psdk/iisref/aspguide.htm.

To learn more about JSP, visit the Sun Microsystems website at java.sun.com/products/jsp/.

To learn more about PHP, visit the PHP website at www.php.net/.


Web application terminology

This section defines frequently used terms relating to web applications.

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 record and each column constitutes a field in the record, as shown in the following example.

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 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 set 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, with the tables sharing 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 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 the Dreamweaver coding environment to develop pages for any other server technology not listed above.

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

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

A web server is software that sends out web pages in response to requests from web browsers. A page request is generated when a visitor clicks a link on a web page in the browser, selects a bookmark in the browser, or enters a URL in the browser’s address text box.

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

Previous


Tutorial: Developing a Web Application

In this tutorial, you’ll learn how to use Macromedia Dreamweaver MX 2004 to quickly begin developing dynamic database-driven web applications, allowing you to present information from a database on your web pages.

You’ll display data on web pages for the Trio Motors site, using a sample database provided with Dreamweaver. You’ll also use Dreamweaver to create a record-insertion form to let visitors to the web page leave comments.

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

  • A page that displays the comments already in the database.
  • An insert page that allows site visitors to send comments to the company

This tutorial includes the following lessons:

  • Before you begin
  • Open a document to work in
  • Define a recordset
  • Display the database records
  • Add dynamic fields to the table
  • Set a repeated region
  • View your pages
  • Create a record insert form
  • Copy files to the server
  • Further reading
Next


Before you begin

The setup chapters located at the end of Getting Started with Dreamweaver 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. If you’re not sure which application server you use, ask your system administrator.

  • 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

Those setup chapters teach you how to complete the following tasks:

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

You can’t complete this tutorial until you’ve completed those tasks.

The screen shots in this tutorial show Macromedia ColdFusion dialog boxes. However, you can complete the lessons in this tutorial using any of the server models supported by Dreamweaver MX 2004.


Open a document to work in

A good starting point for developing a database application is to create a page that lists records stored in the database. In the application you’re building in this tutorial, you’ll create a dynamic web page that lists information drawn from the customer comments table of the database. Later, you’ll create another dynamic web page that lets a customer insert comments or questions directly into the database.

Start by locating the documents you’ll work with as you create these pages.

  1. Select Window > Files to open the Files panel.

    The Files panel opens.

    This is a picture of the feature being described.

  2. In the Site pop-up menu, select the Trio Motors site you defined during the setup process. For more information, see the setup chapters listed in Before you begin.
  3. In the Files panel, double-click the comments-view file to open it.

    The document opens in the Document window.

  4. If you are currently viewing the document in Code view, click the Show Design View button (labeled "Design") or the Show Code and Design Views button (labeled "Split") in the Document toolbar, so you can use the provided screen shots as checkpoints while you complete the tutorial.


Define a recordset

Now you’ll create a recordset to select the data you want to display. A recordset is a set of information extracted from a database by a database query. (In ASP.NET, a recordset is known as a DataSet.) A database query is a way to request data from a database using specified search criteria, usually in a language called SQL. You then use the information extracted as a source of content for your dynamic pages.

Dreamweaver MX 2004 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 Trio database.

Note: Before you can complete this procedure, you must set up a connection to the database. For more information, see Before you begin.

  1. In Dreamweaver, in the comments-view document, place the insertion point where you want to display the data.
  2. Open the Recordset dialog box or (for ASP.NET) the DataSet dialog box by doing one of the following:
    • In the Insert bar’s Application category, click the Recordset button or (for ASP.NET) the DataSet button. This is a picture of the feature being described.
    • Select Window > Bindings to open the Bindings panel; then click the Plus (+) button and select Recordset or (for ASP.NET)DataSet.

    The Recordset dialog box or (for ASP.NET) DataSet dialog box appears. If the dialog box you see looks more complex than the following dialog box, click the Simple button.

    This is a picture of the feature being described.

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

    The Recordset or DataSet dialog box updates with data from the database.

    This is a picture of the feature being described.

  5. If a user name and password are associated with the data source or connection, enter them. If you didn’t provide a user name or password when you set up the data source, leave these boxes blank.
  6. In the Table pop-up menu, leave COMMENTS selected.
  7. In Columns, make sure All is selected, to select all columns of the table.
  8. Leave the Filter pop-up menu set to None, to select all rows of the table.
  9. In the first Sort pop-up menu, select LAST_NAME, and in the second pop-up menu, select Ascending.

    This specifies that the retrieved records will be listed in alphabetical order by customer last name.

    This is a picture of the feature being described.

  10. Click Test to test the recordset or DataSet.

    This is a picture of the feature being described.

    The records from the database that match your recordset or DataSet selection criteria are displayed in the Test SQL Statement window. In this case, you selected all the data in the table.

  11. Click OK to close the Test SQL Statement window.
  12. Click OK to close the Recordset or DataSet dialog box, and create a recordset or DataSet.

    The recordset appears in the Bindings panel. The Document window doesn’t change.

    Tip: If you don’t see all of the recordset fields in the Bindings panel, click the Plus (+) button (Windows) or expander arrow (Macintosh) next to Recordset (rs_Comment) to expand the recordset’s structure.

    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 entering the information.

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

  1. In the comments-view document, place the insertion point in the blank line after the "Customer Comments" heading.
  2. Insert a table by doing one of the following:
    • In the Insert bar, select the Common category and then click the Table button or drag it to the document. This is a picture of the feature being described.
    • Select Insert > Table.

    The Insert Table dialog box appears.

  3. In the dialog box, set the following options:
    • In Rows, enter 2.
    • In Columns, enter 4.
    • In Table Width, enter 60 and select Percent from the pop-up menu.
    • Leave Border Thickness set to 1.
    • In Cell Padding enter 2.
    • In Cell Spacing, enter 2.
    • In the Header section, select the Top option.

    In the Summary text box, provide a textual description of the table for the benefit of visitors who use screen readers, as follows:

    This table lists all the comments that visitors to this site have entered into the database.

    The completed dialog box should look like this:

    This is a picture of the feature being described.

  4. Click OK.

    The table is inserted in the document.

  5. In the top row of the table add labels for the table entries:
    • 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 page (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.
    • Select Window > Bindings.
    • Click the Application panel group’s expander arrow and 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 below the First Name label.
  3. Repeat step 2 to add LAST_NAME, EMAIL, and COMMENTS (not COMMENT_ID) to the table.

    Your table should look like the following. You may have to widen your Document window to see all of it.

    This is a picture of the feature being described.

  4. Save your page.


Set a repeated region

The table you created contains only one row for data. To display all the records, you must set that table row as a repeated region. When viewed in a browser, the table will contain a row 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:
    • Click in one of the cells; then in the tag selector, click the <tr> tag.
    • Position the pointer at the left edge of the table row, and when the pointer changes to an arrow pointing right, click the table row border to select the row.
  2. Create a repeated region, by doing one of the following:
    • In the Server Behaviors panel, click the Plus (+) button and then select Repeat Region.
    • In the Insert bar’s Application category, 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, click OK to accept the default settings.

    An outline appears around the table row, and a tab appears above it and to the left to indicate that it’s a repeated region. (The tab’s label varies depending on the server technology you’re using.)

  4. Save your page.


View your pages

Next, you’ll view the page. To view a page in Dreamweaver as it would look when processed by the server, you can use Live Data view.

With the comments-view document still active, 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 to show 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 Trio website allows customers to add comments to the 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 correspond to fields in the database, and the necessary server scripts to create a dynamic page.

This section contains the following topics:

  • Add a Record Insertion Form application object
  • Create the insert form


Add a Record Insertion Form application object

You can use a Record Insertion Form application object to create a form that allows visitors to enter data into a database. The application object lets you select which fields to include in the form, label the fields, and select the types 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 Files panel, locate the file named comments-add and double-click the file to open it.

    The document opens in the Document window.

  2. Place the insertion point in the document at the end of the text paragraph in the main column, after the word possible; then press Enter or Return to place the insertion point where the application object will be inserted.
  3. To add a record insertion object to your page, do one of the following:
    • In the Insert bar’s Application category, select Record Insertion Form Wizard from the Insert Record pop-up menu. This is a picture of the feature being described.
    • Select Insert > Application Objects > Insert Record > Record Insertion Form Wizard.

    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, select connTrio.
  5. If a user name and password are associated with the data source or connection, enter them. If you didn’t provide a user name or password when you set up the data source or connection, leave these boxes blank.
  6. In the Table pop-up menu, make sure COMMENTS is selected.
  7. Click the Browse button next to the After Inserting, Go To text box or (for ASP.NET) the On Success, Go To text box.
  8. In the dialog box that appears, select the file named comments-view and then click OK to close the dialog box.

    After the visitor enters a comment, they’ll see the page that displays all the comments. In a larger-scale web application, you might instead show a page that thanks the visitor for commenting and tells them that you’ll contact them with an answer soon.

  9. Complete the rest of the wizard by following the procedure in Create the insert form.


Create the insert form

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

  1. In the Record Insertion Form wizard, remove the fields you don’t want included in the form by doing the following:
    • Select COMMENT_ID and click the Minus (-) button.
    • Select TELEPHONE and click the Minus (-) button.
    • Select SUBMIT_DATE and click the Minus (-) button.
    • Select ANSWERED and 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:
    • In the Column list, select COMMENTS and click the Down arrow button to position COMMENTS below LAST_NAME.
    • In the Column list, select EMAIL and click the Down arrow button to position EMAIL 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 text box, type First Name to replace the default text.

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

  5. Set the type of form object for the field by doing one of the following:
    • If you are using ASP.NET, in the Display As pop-up menu accept the default value Text Field, and in the Submit As pop-up menu change the default value from WChar to VARCHAR.
    • If you are using a server technology other than ASP.NET, in the Display As pop-up menu accept the default value Text Field, and in the Submit As pop-up menu accept the default value Text.
  6. Leave the Default Value field empty. For some web applications, you would use this field to set initial text for the field, to let the user know what kind of information to provide. In this case, the field label "First Name" makes clear that the visitor is supposed to enter their first name.

    The FIRST_NAME entry should look similar to the following example when you are done.

    This is a picture of the feature being described.

  7. Repeat steps 3 through 6 for the LAST_NAME form field, with a label of Last Name, displaying as a Text Field and submitting as Text.
  8. Repeat steps 3 through 6 for the EMAIL form field, with a label of Email, displaying as a Text Field and submitting as Text.
  9. In the Form Fields list, select COMMENTS.
  10. In the Label field, enter Comments.
  11. Set the type of form object 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 a server technology other than ASP.NET, in the Display As pop-up menu select Text Area, and in the Submit As pop-up menu accept the default value Text.

    The dialog box should look similar to the following example when you are done:

    This is a picture of the feature being described.

  12. Click OK to close the dialog box and create the record insertion form.

    The Record Insertion Form application object is inserted in the document.

    This is a picture of the feature being described.

  13. Save your page.


Copy files to the server

Next, you’ll 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 Files panel, select comments-add and click the blue Put Files arrow icon to upload the local file to your server.
  2. If Dreamweaver asks whether you want to copy dependent files to the server, select Yes.

    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 Files panel, select the Connections folder and then click the Put File (s) button to copy the folder to your server.

  3. With comments-add as the active document, select File > Preview in Browser or press F12 to view your page.
  4. Enter test data in the form and then click the Insert Record button in the document to submit your data.

    Information updates in the database, and the comments-view page appears.


View the update

You can view the changes you’ve made to database data by opening the comments-view document you created in the first part of this lesson, or you can view the changes by viewing the database.

  • In Dreamweaver, in the Files panel, double-click the document named comments-view; 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 connTrio 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

This tutorial provided information about a small set of tools you can use 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 basic static website in Dreamweaver, see Tutorial: Creating a Static Page. For information about using Dreamweaver coding features, see Tutorial: Editing Code.

For more detailed information about how to develop web applications, see the following topics in Using Dreamweaver Help:

  • Obtaining Data for Your Page
  • Defining Sources of Dynamic Content
  • Adding Dynamic Content to Web Pages
  • Displaying Database Records
Previous


Installing a Web Server

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.

If you’re a Windows user and you want to develop ColdFusion sites, you can use the web server included in the developer edition of the ColdFusion MX application server, which you can install and use for free. For more information, see Setup for Sample ColdFusion Site.

If you’re a Macintosh user, you can use a web server on a network computer or a web hosting company. If you want to develop PHP applications, you can use the Apache web server already installed on your Macintosh.

This chapter contains the following sections:

  • Getting started
  • Installing Personal Web Server
  • Installing Internet Information Server
  • Testing PWS or IIS
  • Testing the Macintosh web server (PHP developers)
  • Web server basics

Note: Macromedia does not provide technical support for third-party software such as Microsoft Internet Information Server. If you need assistance with a Microsoft product, 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.

If you’re a Windows user and want to develop ColdFusion applications, you can instead use the web server installed with the developer edition of the ColdFusion MX. For more information, see Setup for Sample ColdFusion Site.

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 of 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 2000 Install IIS. For more information, see Installing Internet Information Server.

Windows XP Professional Install IIS. For more information, see Installing Internet Information Server.

If you’re a Macintosh user interested in developing PHP applications, you can use the Apache web server already installed on your Macintosh. For more information, see Testing the Macintosh web server (PHP developers).

Related topics

  • Web server basics


Installing Personal Web Server

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

You can install PWS on the same Windows 98 system as the one on which you’re running Macromedia Dreamweaver MX 2004. Make sure Microsoft Internet Explorer 4.01 or later is installed on the system or you cannot install PWS.

To install PWS:

  1. Double-click the PWS installation file on the Windows 98 CD.
  2. Follow the installation wizard.
  3. When asked for your default web publishing home directory, accept the default directory:

    C:\Inetpub\wwwroot

  4. Click Finish to end the installation process.

You can test the web server after installing it. For more information, see Testing PWS or IIS.

Related topics

  • Web server basics


Installing Internet Information Server

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

If you’re a Windows 2000 or Windows XP Professional user, check whether IIS is already 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. Select Start > Settings > Control Panel > Add or Remove Programs, or Start > Control Panel > Add/Remove Programs.
  2. Select Add/Remove Windows Components.
  3. Select Internet Information Services (IIS) and click Next.
  4. Follow the installation instructions.

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

Related topics

  • Web server basics


Testing PWS or IIS

To test the web server, create a simple HTML page called myTestFile.html and save it in the Inetpub\wwwroot folder on the computer where the web server is running. The HTML page can consist of a single line, such as:

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

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.html

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 rockford-pc, enter the following URL in your browser:

http://rockford-pc/myTestFile.html

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. For example, for PWS, 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 that web publishing is off, click the Start button, then enter the appropriate URL in your browser again.

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


Testing the Macintosh web server (PHP developers)

You can use the Apache web server already installed on your Macintosh to develop PHP applications.

To test the server, create a simple HTML page called myTestFile.html and save it in the /Users/your_user_name/Sites/ folder on your Macintosh (where your_user_name is your Macintosh user name). The HTML page can consist of a single line, such as:

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

Next, open the test page in a web browser with an HTTP request by entering the following URL in your web browser:

http://localhost/~your_user_name/myTestFile.html

Note: By default the Apache server runs on port 80.

If the browser displays your page, the web server is running normally. If the browser fails to display the page, make sure the web server is started by opening System Preferences and looking at the Sharing preference panel. The Personal Web Sharing option should be enabled.

Your Apache web server won’t work with PHP by default; you must configure it before you can use PHP. For more information, see Configuring your system (PHP).


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 use IIS to develop web applications. The default name of your web server is the name of your computer. 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 corresponds to the server’s root folder, which (on a Windows computer) 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://your_server_name/your_file_name

For example, if the server name is mer_noire and a web page called soleil.html 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.html

Note: Remember to use forward slashes, not backslashes, in URLs.

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.html file is stored in a subfolder called gamelan, as follows:

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

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

http://mer_noire/gamelan/soleil.html

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.html

http://localhost/gamelan/soleil.html

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.html).

Related topics

  • Installing Personal Web Server
  • Installing Internet Information Server
  • Testing PWS or IIS
  • Testing the Macintosh web server (PHP developers)]
Previous


Setup for Sample ColdFusion Site

Macromedia Dreamweaver MX 2004 comes with sample ColdFusion MXpages to let you build a small web application. This chapter describes how to set up the sample 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 (ColdFusion)
  • Defining a Dreamweaver site (ColdFusion)
  • Connecting to the sample database (ColdFusion)
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 tasks are described in more detail in the rest of the chapter.

Configure your system:

  1. Install the ColdFusion application server (which includes a web server).
  2. 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’re using a remote computer as a server, copy the sample database to the remote computer.
  2. Create a ColdFusion data source in ColdFusion Administrator.
  3. Create the connection in Dreamweaver.

Related topics

  • Configuring your system (ColdFusion)
  • Defining a Dreamweaver site (ColdFusion)
  • Connecting to the sample database (ColdFusion)


Configuring your system (ColdFusion)

This section provides instructions for two common system configurations: one in which ColdFusion is installed on your hard disk, and one in which ColdFusion is installed on a remote Windows computer. If you want to use a different configuration, see "Setting Up a Web Application" in Using Dreamweaver Help.

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. Install the ColdFusion application server (see Installing ColdFusion MX).
  2. Create a root folder (see Creating a root folder).

Note: Installing the application server is a one-time-only task.


Installing ColdFusion MX

To process dynamic web pages, you need a web server and an application server. ColdFusion MX provides both. A web server is software that serves web pages in response to requests from web browsers. 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 by a browser, the web server hands the page off to the application server for processing before sending the page to the browser. For more information, see Understanding Web Applications.

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

Note: You can also install ColdFusion MX on a Mac OS X computer running a J2EE server such as JRun or Tomcat. For more information, see the Macromedia website at www.macromedia.com/support/coldfusion/j2ee/cfmx-mac-onjrunandtomcat.html. The installation process is complicated, though, and Dreamweaver has not been tested with ColdFusion MX on the Macintosh. Also, it may be difficult to connect ColdFusion MX on the Macintosh to database systems such as MySQL.

To install ColdFusion MX:

  1. If applicable, log into your Windows system using the Administrator account.
  2. Close all open applications.
  3. Double-click the ColdFusion MX installer file.
  4. Follow the onscreen 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 ColdFusion, and make sure the folder has the necessary permissions.

To create a root folder for your web application:

  • Create a folder called MySampleApp in the CFusionMX\wwwroot folder on the system running ColdFusion.

Note: Write down this folder name for later use. When you type it later, be sure to use exactly the same capitalization that you used when you created it.

By default, ColdFusion sets up its web server to serve pages from the CFusionMX\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.

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


Defining a Dreamweaver site (ColdFusion)

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

Note: If you’re a Macromedia HomeSite or ColdFusion Studio user, you may find it useful to think of a Dreamweaver site as being like 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 sample files).


Copying the sample files

If you haven’t 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-Local in your user folder on your hard disk.

    For example, create one of the following folders:

    • C:\Documents and Setting\your_user_name\My Documents\Sites-Local (Windows)
    • /Users/your_user_name/Documents/Sites-Local (Macintosh).

    Note: On the Macintosh, there’s a folder called Sites already in your user folder. Don’t use that Sites folder as your local folder; the Sites folder is where you place your pages to make them publicly accessible when you’re using the Macintosh as a web server.

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

    If you installed Dreamweaver to its default location, the path to the folder is as follows:

    • C:\Program Files\Macromedia\Dreamweaver MX 2004\Samples\ GettingStarted\ (Windows)
    • /Applications/Macromedia Dreamweaver MX 2004/Samples/GettingStarted (Macintosh)
  3. Copy the GettingStarted folder into the Sites-Local 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 > Manage Sites. In the Manage Sites dialog box, click the New button, then select Site.

    The Site Definition dialog box appears.

  2. If the Basic tab is showing, click the Advanced tab.
  3. In the Site Name text box, enter Trio-ColdFusion.

    The name identifies your site within Dreamweaver.

  4. Click the folder icon next to the Local Root Folder text box, then browse to and select the folder (inside the GettingStarted folder) that contains the ColdFusion sample files. The folder should be as follows:
    • C:\Documents and Setting\your_user_name\My Documents\Sites-Local\ GettingStarted\4-Develop\coldfusion (Windows)
    • /Users/your_user_name/Documents/Sites-Local/GettingStarted/4-Develop/coldfusion (Macintosh)

Leave the Site Definition dialog box open. Next, define a web server folder as a Dreamweaver remote folder. (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 tab of the Site Definition dialog box, select Remote Info from the Category list.

    The Remote Info screen appears.

  2. In the Access pop-up menu, choose how you want to move your files to and from the server: across a local network (the Local/Network option) or using FTP.

    Note: There are other options in the Access pop-up menu, but this guide doesn’t cover them. For information about them, see Using Dreamweaver Help.

  3. Enter the path or FTP settings to the web server folder you created in Creating a root folder.

    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 considered to be the remote folder. The following example shows a possible Remote Folder path if you chose Local/Network access and your remote folder is on your Windows hard disk:

    Remote Folder: C:\CFusionMX\wwwroot\MySampleApp

    For more information on FTP, see "Setting Remote Info options for FTP access" in Using Dreamweaver Help.

Leave the Site Definition dialog box open. Next, define a folder to process dynamic pages. (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’re developing your application.

To specify the folder to process dynamic pages:

  1. In the advanced Site Definition dialog box, click Testing Server in the Category list.

    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. In many situations, including setting up for the Trio site, 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 from the Server Model pop-up menu.
  3. In the Access pop-up menu, select the same method (Local/Network or FTP) you specified for accessing your remote folder.

    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.

    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.

    Note: Dreamweaver makes a best guess at the URL prefix based on the information you provided in the Site Definition dialog box. However, if the suggested URL prefix is incorrect, correct the URL or enter a new URL prefix. For more information, see "About the URL prefix" in Using Dreamweaver Help.

    If the folder specified in the Remote Folder text box is c:\CFusionMX\wwwroot\MySampleApp, then the URL prefix should be as follows:

    http://localhost:8500/MySampleApp/

    Note: The ColdFusion web server runs on port 8500 by default.

    Tip: The URL prefix should always specify a directory, rather than a particular page on the site. Also, be sure to use the same capitalization you used when you created the folder.

  5. Click OK to define the site and dismiss the Site Definition dialog box, then click Done to dismiss the Manage Sites dialog box.

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


Uploading the sample files

After specifying a folder to process dynamic pages, upload the sample files to the web server. 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 causes an error if the detail page is missing from the server.

To upload the samples files to the web server:

  1. In the Files panel (Window > Files), select the root folder of the site in the Local View pane.

    The root folder is the first folder in the list.

  2. Click the blue Put Files arrow icon in the Files panel toolbar, and confirm that you want to upload the entire site.

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

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


Connecting to the sample database (ColdFusion)

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: For information on connecting to another database, see "Database Connections for ColdFusion Developers" in Using Dreamweaver Help.

To create a database connection:

  1. If you’re using a remote computer as a server, copy the sample database to the remote computer. (See Setting up the database (server on remote computer)).
  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 (server on remote computer)

This section applies only 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. If you installed Dreamweaver to its default location, the path on your local hard disk to the database file (trio.mdb) is as follows:

  • C:\Program Files\Macromedia\Dreamweaver MX 2004\Samples\Database\trio.mdb (Windows)
  • /Applications/Macromedia Dreamweaver MX 2004/Samples/Database/trio.mdb (Macintosh)

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

Caution: There are potential security issues if you place the database file inside the Inetpub folder on the remote computer. It’s better to place the file in a folder that’s not publicly accessible.

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 connTrio 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 button.

    ColdFusion Administrator opens in a browser.

  3. Log in to ColdFusion Administrator and create a data source called connTrio, using the Microsoft Access driver, pointing to the trio.mdb database file.

    If ColdFusion is running on your local computer and you installed Dreamweaver to its default location, create a data source that points to the database file in the following folder:

    C:\Program Files\Macromedia\Dreamweaver MX 2004\Samples\Database\trio.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 (server on remote computer).

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

After creating the ColdFusion data source, 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 and 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:

  • Click the link to enter an RDS login and password if necessary.
  • 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" in Dreamweaver Help (Help > Using Dreamweaver).

If the data source called connTrio appears in the panel, the sample ColdFusion application is set up for the Getting Started with Dreamweaver tutorials. For more information, see Tutorial: Developing a Web Application.
Previous


Setup for Sample ASP.NET Site

Macromedia Dreamweaver MX 2004 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. For information on 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 chapter follows this three-step process.

This chapter contains the following sections:

  • Setup checklists for ASP.NET developers
  • Configuring your system (ASP.NET)
  • Defining a Dreamweaver site (ASP.NET)
  • Connecting to the sample database (ASP.NET)
Next


Setup checklists 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 tasks are described in more detail 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:

  1. If you’re using a remote computer as a server, copy the sample database to the remote computer.
  2. Create the connection in Dreamweaver.

Related topics

  • Configuring your system (ASP.NET)
  • Defining a Dreamweaver site (ASP.NET)
  • Connecting to the sample database (ASP.NET)


Configuring your system (ASP.NET)

This section provides instructions for two common system configurations: one in which Windows 2000 or Windows XP Professional is installed on your hard disk, and one in which Windows 2000 or Windows XP Professional is installed on a remote computer. If you want to use a different configuration, see "Setting Up a Web Application" in Using Dreamweaver Help.

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 work with only one web server: Microsoft IIS 5 or later. Microsoft Personal Web Server (PWS) does not support ASP.NET. Also, because IIS 5 is a service of the Windows 2000 and Windows XP Professional operating systems, you can use only these two versions of Windows to run ASP.NET applications. Windows 98, ME, and NT are not supported.

Make sure IIS 5 is installed and running on a computer running Windows 2000 or Windows XP Professional. You can use your local computer as the server if you have Windows 2000 or Windows XP Professional. 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 a computer is to look at the folder structure to see whether it contains a C:\Inetpub or D:\Inetpub folder. IIS creates this folder during installation.

If IIS is not installed, install it now. For more information, 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 by a browser, the web server hands the page off to the application server for processing before sending the page to the browser. For more information, see Understanding Web Applications.

In ASP.NET, the application server is called the .NET Framework. Make sure the .NET Framework is installed and running on a Windows 2000 or Windows XP Professional system running IIS 5 or higher.

To install the .NET Framework, download the Framework from the Microsoft website at www.asp.net/download.aspx 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.

    Note: Write down this folder name for later use. When you type it later, be sure to use exactly the same capitalization that you used when you created it.

    A good place to create the folder is in C:\Inetpub\wwwroot\. By default, your IIS web server is set up to serve pages from 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. To make sure the Scripts permission is enabled for the folder, start the IIS administrative tool (in Windows XP, select Start > Control Panel or Start > Settings Control Panel, then double-click Administrative Tools, then double-click Internet Information Services). Expand the "local computer" list, then the Web Sites folder, then the Default Web Site folder. Right-click your MySampleApp folder and select Properties from the pop-up menu. In the Execute Permissions pop-up menu, make sure the Scripts Only option is selected. (For security reasons, do not select the Scripts and Executables option.) Then click OK.

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 (ASP.NET).)


Defining a Dreamweaver site (ASP.NET)

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

Note: If you’re a Macromedia HomeSite or ColdFusion Studio user, you may find it useful to think of a Dreamweaver site as being like 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 sample files).


Copying the sample files

If you haven’t 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-Local in your user folder on your hard disk.

    For example, create one of the following folders:

    • C:\Documents and Setting\your_user_name\My Documents\Sites-Local (Windows)
    • /Users/your_user_name/Documents/Sites-Local (Macintosh).

    Note: On the Macintosh, there’s a folder called Sites already in your user folder. Don’t use that Sites folder as your local folder; the Sites folder is where you place your pages to make them publicly accessible when you’re using the Macintosh as a web server.

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

    If you installed Dreamweaver to its default location, the path to the folder is as follows:

    • C:\Program Files\Macromedia\Dreamweaver MX 2004\Samples\GettingStarted\ (Windows)
    • /Applications/Macromedia Dreamweaver MX 2004/Samples/GettingStarted (Macintosh)
  3. Copy the GettingStarted folder into the Sites-Local 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.NET sample files as a Dreamweaver local folder.

To define the Dreamweaver local folder:

  1. In Dreamweaver, select Site > Manage Sites. In the Manage Sites dialog box, click the New button, then select Site.

    The Site Definition dialog box appears.

  2. If the Basic tab is showing, click the Advanced tab.
  3. In the Site Name text box, enter Trio-ASP.NET.

    The name identifies your site within Dreamweaver.

  4. Click the folder icon next to the Local Root Folder text box, then browse to and select the folder (inside the GettingStarted folder) that contains the ASP.NET sample files. The folder should be as follows:
    • C:\Documents and Setting\your_user_name\My Documents\Sites-Local\GettingStarted\ 4-Develop\aspnet (Windows)
    • /Users/your_user_name/Documents/Sites-Local/GettingStarted/4-Develop/aspnet (Macintosh)

Leave the Site Definition dialog box open. Next, define a web server folder as a Dreamweaver remote folder. (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 tab of the Site Definition dialog box, select Remote Info from the Category list.

    The Remote Info screen appears.

  2. In the Access pop-up menu, choose how you want to move your files to and from the server: across a local network (the Local/Network option) or using FTP.

    Note: There are other options in the Access pop-up menu, but this guide doesn’t cover them. For information about them, see Dreamweaver Help (Help > Using Dreamweaver).

  3. Enter the path or FTP settings to the web server folder you created in Creating a root folder.

    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 considered to be the remote folder. The following example shows a possible Remote Folder path if you chose Local/Network access and your remote folder is on your Windows hard disk:

    Remote Folder: C:\Inetpub\wwwroot\MySampleApp

    For more information on FTP, see "Setting Remote Info options for FTP access" in Using Dreamweaver Help.

Leave the Site Definition dialog box open. Next, define a folder to process dynamic pages. (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’re developing your application.

To specify the folder to process dynamic pages:

  1. In the advanced Site Definition dialog box, click Testing Server in the Category list.

    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. In many situations, including setting up for the Trio site, 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# from the Server Model pop-up menu.
  3. In the Access pop-up menu, select the same method (Local/Network or FTP) you specified for accessing your remote folder.

    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.

    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. Correct or enter a new URL prefix if the suggestion in Dreamweaver is incorrect. For more information, see "About the URL prefix" in Using Dreamweaver Help.

    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 always specify a directory, rather than a particular page on the site. Also, be sure to use the same capitalization you used when you created the folder.

  5. Click OK to define the site and dismiss the Site Definition dialog box, then click Done to dismiss the Manage Sites dialog box.

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


Uploading the sample files

After specifying a folder to process dynamic pages, upload the sample files to the web server. 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 Files panel (Window > Files), select the root folder of the site in the Local View pane.

    The root folder is the first folder in the list.

  2. Click the blue Put Files arrow icon in the Files panel toolbar, and confirm that you want to upload the entire site.

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

The Dreamweaver site is now defined. The next step is to connect to the sample database installed with Dreamweaver. (See Connecting to the sample database (ASP.NET).)


Connecting to the sample database (ASP.NET)

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: For information on connecting to another database, see "Database Connections for ASP.NET Developers" in Dreamweaver Help (Help > Using Dreamweaver).

To create a database connection:

  1. If you’re using a remote computer as a server, copy the sample database to the remote computer. (See Setting up the database (server on remote computer)).
  2. Create the connection in Dreamweaver (see Creating a database connection).


Setting up the database (server on remote computer)

This section applies only 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 database connection.

Before attempting to connect to the sample database, copy the database to the remote computer’s hard disk. If you installed Dreamweaver to its default location, the path on your local hard disk to the database file (trio.mdb) is as follows:

  • C:\Program Files\Macromedia\Dreamweaver MX 2004\Samples\Database\trio.mdb (Windows)
  • /Applications/Macromedia Dreamweaver MX 2004/Samples/Database/trio.mdb (Macintosh)

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.

Note: There are potential security issues if you place the database file inside the Inetpub folder on the remote computer. It’s better to place the file in a folder that’s not publicly accessible.

After the database is in place, connect to it. (See Creating a database connection.)


Creating a database connection

The final step of the setup process is to create a connection to the database.

To create a database connection in Dreamweaver:

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

    The OLE DB Connection dialog box appears.

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

    The Connection String Template dialog box appears.

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

    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. In the Data Source text box, enter the full path to the sample database file on your hard disk or the remote computer’s hard disk. If ASP.NET is running on your local computer and you installed Dreamweaver to its default location, use the following path:

    C:\Program Files\Macromedia\Dreamweaver MX 2004\Samples\Database\trio.mdb

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

    For example, you might enter this path as the value of Data Source for a database on your local hard disk:

    Data Source=C:\Program Files\Macromedia\Dreamweaver MX 2004\Samples\Database\ trio.mdb;

    Or you might enter this path for a database on a remote server:

    Data Source=C:\users\Denman\Sites\data\trio.mdb;

  7. Delete the User ID and the Password lines.

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

  8. Click Test.

    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" in Dreamweaver Help (Help > Using Dreamweaver).
  9. Click OK.

    The new connection appears in the Databases panel.

The sample ASP.NET application is now set up for the Getting Started with Dreamweaver tutorials. For more information, see Tutorial: Developing a Web Application.
Previous


Setup for Sample ASP Site

Macromedia Dreamweaver MX 2004 comes with sample Microsoft Active Server Pages (ASP) web 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. If you’re using a different web server, see "Setting Up a Web Application" in Using Dreamweaver Help.

This chapter applies to ASP developers only. For information on 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 chapter follows this three-step process.

This chapter contains the following sections:

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


Setup checklists 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 tasks are described in more detail 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:

  1. If you’re using a remote computer as a server, copy the sample database to the remote computer.
  2. Create the connection in Dreamweaver.

Related topics

  • Configuring your system (ASP)
  • Defining a Dreamweaver site (ASP)
  • Connecting to the sample database (ASP)


Configuring your system (ASP)

This section provides instructions for two common system configurations: one in which Microsoft IIS or PWS is installed on your hard disk, and one in which IIS or PWS is installed on a remote Windows computer. If you want to use a different configuration, see "Setting Up a Web Application" in Using Dreamweaver Help.

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 to see whether it contains 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.

After installing the web server, you 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 by a browser, the web server hands the page off to the application server for processing before sending the page to the browser. For more information, see Understanding Web Applications.

If you installed PWS or IIS on a Windows computer, 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.

You should 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.

To test the ASP engine of PWS or IIS:

  1. In Dreamweaver or any text editor, create a plain text file and name it timetest.asp.
  2. In the file, enter the following code:
    <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 C:\Inetpub\wwwroot folder of the Windows computer running PWS or IIS.
  4. In your web browser, enter the URL of your test page and then press Enter.

    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 specified time is known as dynamic content because it changes every time you request the page. Click your browser’s Refresh button 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 .asp extension.
  • You typed the page’s file path (C:\Inetput\wwwroot\timetest.asp) in place of its URL (for example, http://localhost/timetest.asp) 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.

    Note: Write down this folder name for later use. When you type it later, be sure to use exactly the same capitalization that you used when you created it.

    A good place to create the folder is in C:\Inetpub\wwwroot\. By default, your IIS or PWS web server is set up to serve pages from 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 by doing one of the following:
    • If you’re using PWS, start 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, start the IIS administrative tool (in Windows XP, select Start > Control Panel or Start > Settings Control Panel, then double-click Administrative Tools, then double-click Internet Information Services). Expand the "local computer" list, then the Web Sites folder, then the Default Web Site folder. Right-click your MySampleApp folder and select Properties from the pop-up menu. In the Execute Permissions pop-up menu, make sure the Scripts Only option is selected. (For security reasons, do not select the Scripts and Executables option.) Then click OK.

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 (ASP).)


Defining a Dreamweaver site (ASP)

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

Note: If you’re a Macromedia HomeSite or ColdFusion Studio user, you may find it useful to think of a Dreamweaver site as being like 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 sample files).


Defining a local folder

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

To define the Dreamweaver local folder:

  1. In Dreamweaver, select Site > Manage Sites. In the Manage Sites dialog box, click the New button, then select Site.

    The Site Definition dialog box appears.

  2. If the Basic tab is showing, click the Advanced tab.
  3. In the Site Name text box, enter Trio-ASP.

    The name identifies your site within Dreamweaver.

  4. Click the folder icon next to the Local Root Folder text box, then browse to and select the folder (inside the GettingStarted folder) that contains the ASP sample files. The folder should be as follows:
    • C:\Documents and Setting\your_user_name\My Documents\Sites-Local\GettingStarted\4-Develop\asp (Windows)
    • /Users/your_user_name/Documents/Sites-Local/GettingStarted/4-Develop/asp (Macintosh)

Leave the Site Definition dialog box open. Next, define a web server folder as a Dreamweaver remote folder. (See Defining a remote folder.)


Defining a remote folder

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

To define the Dreamweaver remote folder:

  1. In the Advanced tab of the Site Definition dialog box, select Remote Info from the Category list.

    The Remote Info dialog box appears.

  2. In the Access pop-up menu, select how you want to move your files to and from the server: across a local network (the Local/Network option) or using FTP.

    Note: There are other options in the Access pop-up menu, but this guide doesn’t cover them. For information about them, see Using Dreamweaver Help.

  3. Enter the path or FTP settings to the web server folder you created in Creating a root folder.

    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 considered to be the remote folder. The following example shows a possible Remote Folder path if you chose Local/Network access and your remote folder is on your Windows hard disk:

    Remote Folder: C:\Inetpub\wwwroot\MySampleApp

    For more information on FTP, see "Setting Remote Info options for FTP access" in Using Dreamweaver Help.

Leave the Site Definition dialog box open. Next, define a folder to process dynamic pages. (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’re developing your application.

To specify the folder to process dynamic pages:

  1. In the advanced Site Definition dialog box, click Testing Server in the Category list.

    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. In many situations, including setting up for the Trio site, 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 from the Server Model pop-up menu.
  3. In the Access pop-up menu, select the same method (Local/Network or FTP) you specified for accessing your remote folder.

    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.

    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. Correct or enter a new URL prefix if the suggestion in Dreamweaver is incorrect. For more information, see "About the URL prefix" in Using Dreamweaver Help.

    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 always specify a directory, rather than a particular page on the site. Also, be sure to use the same capitalization you used when you created the folder.

  5. Click OK to define the site and dismiss the Site Definition dialog box, then click Done to dismiss the Manage Sites dialog box.

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


Uploading the sample files

After specifying a folder to process dynamic pages, upload the sample files to the web server. 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 Files panel (Window > Files), select the root folder of the site in the Local View pane.

    The root folder is the first folder in the list.

  2. Click the blue Put Files arrow icon in the Files panel toolbar, and confirm that you want to upload the entire site.

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

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


Connecting to the sample database (ASP)

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: For information on connecting to another database, see "Database Connections for ASP Developers" in Using Dreamweaver Help.

To create a database connection:

  1. If you’re using a remote computer as a server, set up the sample database on the remote computer (see Setting up the database (server on remote computer)).
  2. Create the connection in Dreamweaver (see Creating a database connection).


Setting up the database (server on remote computer)

This section applies only 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 database connection.

Before attempting to connect 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 database to the remote computer’s hard disk. If you installed Dreamweaver to its default location, the path on your local hard disk to the database file (trio.mdb) is as follows:
    • C:\Program Files\Macromedia\Dreamweaver MX 2004\Samples\Database\trio.mdb (Windows)
    • /Applications/Macromedia Dreamweaver MX 2004/Samples/Database/trio.mdb (Macintosh)

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

    Note: There are potential security issues if you place the database file inside the Inetpub folder on the remote computer. It’s better to place the file in a folder that’s not publicly accessible.

  2. Make sure the Microsoft Access Driver, version 4.0 or later, is installed on the remote computer.

    To find out whether the driver is already installed, see "Viewing the ODBC drivers installed on a Windows system" inUsing Dreamweaver Help.

    If the driver is not installed, download and install the Microsoft Data Access Components (MDAC) 2.5 and 2.7 packages on the remote computer. You can download MDAC for free from the Microsoft website at www.microsoft.com/data/download.htm. These packages contain the latest Microsoft drivers, including the Microsoft Access Driver.

    Note: Install MDAC 2.5 before installing MDAC 2.7.

  3. Set up a DSN called TrioMotors pointing to the sample database on the remote computer.

    For instructions, see the following articles on the Microsoft website:

    • If the remote computer runs Windows 98, see Article 300595 at support.microsoft.com/default.aspx?scid=kb;en-us;300595.
    • If the remote computer runs Windows 2000, see Article 300596 at support.microsoft.com/default.aspx?scid=kb;en-us;300596.
    • If the remote computer runs Windows XP, see Article 305599 at support.microsoft.com/default.aspx?scid=kb;en-us;305599.

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

The final step of the setup process is to create a connection to the database.

If your web server is running on your local computer, 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 "Using a DSN" in Using Dreamweaver Help.

To create a database connection in Dreamweaver:

  1. Open any ASP page in Dreamweaver and 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.

    The Data Source Name (DSN) dialog box appears.

  3. Enter connTrio as the connection name.
  4. (Windows only) Do one of the following:
    • If your server is on your local computer, select the Using Local DSN option.
    • If your server is on a remote system, select the Using DSN On Testing Server option.

    Macintosh users can ignore this step because all database connections use DSNs on the testing server.

  5. Click the DSN button and select TrioMotors from the list of DSNs.

    If you’re using Dreamweaver on a Windows computer, then during installation, Dreamweaver created a DSN called TrioMotors pointing to the Microsoft Access database in the Samples\Database folder in the Dreamweaver MX 2004 application folder.

  6. Click Test.

    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" in Using Dreamweaver Help.
  7. Click OK.

    The new connection appears in the Databases panel.

The sample ASP application is now set up for the Getting Started with Dreamweaver tutorials. For more information, see Tutorial: Developing a Web Application.
Previous


Setup for Sample JSP Site

Macromedia Dreamweaver MX 2004 comes with sample JavaServer Pages (JSP) web 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. If you’re using a different web server, see "Setting Up a Web Application" in Dreamweaver Help (Help > Using Dreamweaver).

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 chapter follows this three-step process.

This chapter contains the following sections:

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


Setup checklists 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 tasks are described in more detail 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:

  1. Install a JDBC-ODBC bridge driver.
  2. If you’re using a remote computer as a server, copy the sample database to the remote computer.
  3. Create the connection in Dreamweaver.

Related topics

  • Configuring your system (JSP)
  • Defining a Dreamweaver site (JSP)
  • Connecting to the sample database (JSP)


Configuring your system (JSP)

This section provides instructions for two common system configurations: one in which Microsoft IIS or PWS is installed on your hard disk, and one in which IIS or PWS is installed on a remote Windows computer. If you want to use a different configuration, see "Setting Up a Web Application" in Using Dreamweaver Help.

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 a 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 to see whether it contains 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.

After installing the web server, install the application server. (See Installing a JSP application server.)


Installing a 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 by a browser, the web server hands the page off to the application server for processing before sending the page to the browser. For more information, see Understanding Web Applications.

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 local 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 at www.macromedia.com/software/jrun/.

JRun is available for both Windows and Macintosh. However, this guide doesn’t cover using JRun on a Macintosh.

To install JRun:

  1. If applicable, log into your Windows system using the Administrator account.
  2. Close all open applications.
  3. Double-click the JRun trial version installer file.

    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.

    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.

    For instructions, see the JRun documentation.

After installing and starting JRun, 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.

    Note: Write down this folder name for later use. When you type it later, be sure to use exactly the same capitalization that you used when you created it.

    A good place to create the folder is in C:\Inetpub\wwwroot\. By default, your IIS or PWS web server is set up to serve pages from 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 by doing one of the following:
    • If you’re using PWS, start 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, start the IIS administrative tool (in Windows XP, select Start > Control Panel or Start > Settings Control Panel, then double-click Administrative Tools, then double-click Internet Information Services). Expand the "local computer" list, then the Web Sites folder, then the Default Web Site folder. Right-click your MySampleApp folder and select Properties from the pop-up menu. In the Execute Permissions pop-up menu, make sure the Scripts Only option is selected. (For security reasons, do not select the Scripts and Executables option.) Then click OK.

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 (JSP).)


Defining a Dreamweaver site (JSP)

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

Note: If you’re a Macromedia HomeSite or ColdFusion Studio user, you may find it useful to think of a Dreamweaver site as being like 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 sample files).


Copying the sample files

If you haven’t 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-Local in your user folder on your hard disk.

    For example, create one of the following folders:

    • C:\Documents and Setting\your_user_name\My Documents\Sites-Local (Windows)
    • /Users/your_user_name/Documents/Sites-Local (Macintosh).

    Caution: On the Macintosh, there’s a folder called Sites already in your user folder. Don’t use that Sites folder as your local folder; the Sites folder is where you place your pages to make them publicly accessible when you’re using the Macintosh as a web server.

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

    If you installed Dreamweaver to its default location, the path to the folder is as follows:

    • C:\Program Files\Macromedia\Dreamweaver MX 2004\Samples\GettingStarted\ (Windows)
    • /Applications/Macromedia Dreamweaver MX 2004/Samples/GettingStarted (Macintosh)
  3. Copy the GettingStarted folder into the Sites-Local 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 JSP sample files as a Dreamweaver local folder.

To define the Dreamweaver local folder:

  1. In Dreamweaver, select Site > Manage Sites. In the Manage Sites dialog box, click the New button, then select Site.

    The Site Definition dialog box appears.

  2. If the Basic tab is showing, click the Advanced tab.
  3. In the Site Name text box, enter Trio-JSP.

    The name identifies your site within Dreamweaver.

  4. Click the folder icon next to the Local Root Folder text box, then browse to and select the folder (inside the GettingStarted folder) that contains the JSP sample files. The folder should be as follows:
    • C:\Documents and Setting\your_user_name\My Documents\Sites-Local\GettingStarted\ 4-Develop\jsp (Windows)
    • /Users/your_user_name/Documents/Sites-Local/GettingStarted/4-Develop/jsp (Macintosh)

Leave the Site Definition dialog box open. Next, define a web server folder as a Dreamweaver remote folder. (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 tab of the Site Definition dialog box, select Remote Info from the Category list.

    The Remote Info screen appears.

  2. In the Access pop-up menu, choose how you want to move your files to and from the server: across a local network (the Local/Network option) or using FTP.

    Note: There are other options in the Access pop-up menu, but this guide doesn’t cover them. For information about them, see Using Dreamweaver Help.

  3. Enter the path or FTP settings to the web server folder you created in Creating a root folder.

    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 considered to be the remote folder. The following example shows a possible Remote Folder path if you chose Local/Network access and your remote folder is on your Windows hard disk:

    Remote Folder: C:\Inetpub\wwwroot\MySampleApp

    For more information on FTP, see "Setting Remote Info options for FTP access" in Dreamweaver Help (Help > Using Dreamweaver).

Leave the Site Definition dialog box open. Next, define a folder to process dynamic pages. (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’re developing your application.

To specify the folder to process dynamic pages:

  1. In the advanced Site Definition dialog box, click Testing Server in the Category list.

    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. In many situations, including setting up for the Trio site, 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 from the Server Model pop-up menu.
  3. In the Access pop-up menu, select the same method (Local/Network or FTP) you specified for accessing your remote folder.

    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.

    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. Correct or enter a new URL prefix if the suggestion in Dreamweaver is incorrect. For more information, see "About the URL prefix" in Using Dreamweaver Help.

    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 always specify a directory, rather than a particular page on the site. Also, be sure to use the same capitalization you used when you created the folder.

  5. Click OK to define the site and close the Site Definition dialog box, then click Done to close the Manage Sites dialog box.

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


Uploading the sample files

After specifying a folder to process dynamic pages, upload the sample files to the web server. 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 Files panel (Window > Files), select the root folder of the site in the Local View pane.

    The root folder is the first folder in the list.

  2. Click the blue Put Files arrow icon in the Files panel toolbar, and confirm that you want to upload the entire site.

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

The Dreamweaver site is now defined. The next step is to connect to the sample database installed with Dreamweaver. (See Creating a database connection.)


Connecting to the sample database (JSP)

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: For information on connecting to another database, see "Database Connections for JSP Developers" in Using Dreamweaver Help.

To create a database connection:

  1. Install the bridge driver (see Installing the bridge driver).
  2. If you’re using a remote computer as a server, set up the sample database on the remote computer (see Setting up the database (server on remote computer)).
  3. Create the connection in Dreamweaver (see Creating a database connection).


Installing the bridge driver

Before attempting to connect 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 any of the following directories:

C:\jdk1.2.x

C:\jdk1.3.x

C:\j2sdk1.4.x

Note: The term "Java 2" refers to Java 1.2 and later versions.

If you don’t have the SDK, download it from the Sun website at java.sun.com/j2se/. 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 (it does not support concurrent use by multiple threads). For more information on the driver’s limitations, see article 17392 on the Macromedia Support Center at www.macromedia.com/go/jdbc-odbc_problems.

After installing the bridge driver, set up the database if necessary (see Setting up the database (server on remote computer)), then create a database connection in Dreamweaver. (See Creating a database connection.)


Setting up the database (server on remote computer)

This section applies only 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 database connection.

Before attempting to connect 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 database to the remote computer’s hard disk. If you installed Dreamweaver to its default location, the path on your local hard disk to the database file (trio.mdb) is as follows:
    • C:\Program Files\Macromedia\Dreamweaver MX 2004\Samples\Database\trio.mdb (Windows)
    • /Applications/Macromedia Dreamweaver MX 2004/Samples/Database/trio.mdb (Macintosh)

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

    Caution: There are potential security issues if you place the database file inside the Inetpub folder on the remote computer. It’s better to place the file in a folder that’s not publicly accessible.

  2. Make sure the Microsoft Access Driver, version 4.0 or higher, is installed on the remote computer.

    To find out whether the driver is already installed, see "Viewing the ODBC drivers installed on a Windows system" in Using Dreamweaver Help.

    If the driver is not installed, download and install the Microsoft Data Access Components (MDAC) 2.5 and 2.7 packages on the remote computer. You can download MDAC for free from the Microsoft website at www.microsoft.com/data/download.htm. These packages contain the latest Microsoft drivers, including the Microsoft Access Driver.

    Note: Install MDAC 2.5 before installing MDAC 2.7.

  3. Set up a DSN called TrioMotors pointing to the sample database on the remote computer.

    For instructions, see the following articles on the Microsoft website:

    • If the remote computer runs Windows 98, see Article 300595 at support.microsoft.com/default.aspx?scid=kb;en-us;300595.
    • If the remote computer runs Windows 2000, see Article 300596 at support.microsoft.com/default.aspx?scid=kb;en-us;300596.
    • If the remote computer runs Windows XP, see Article 305599 at support.microsoft.com/default.aspx?scid=kb;en-us;305599.
  4. Make sure the Sun JDBC-ODBC Bridge driver is installed on the remote computer.

    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

The final step of the setup process is to create a connection to the database.

To create a database connection in Dreamweaver:

  1. Open any JSP page in Dreamweaver and then open the Databases panel (Window > Databases).
  2. Click the Plus (+) button on the panel and select "ODBC Database (Sun JDBC-ODBC Driver)" from the pop-up menu.

    The ODBC Database (Sun JDBC-ODBC Driver) dialog box appears.

  3. Enter connTrio as the connection name.
  4. (Windows only) Do one of the following:
    • If your server is on your local computer, select the Using Driver On This Machine option.
    • If your server is on a remote system, select the Using Driver On Testing Server option.

    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 TrioMotors.

    The URL text box should look like this:

    jdbc:odbc:TrioMotors

    If you’re using Dreamweaver on a Windows computer, then during installation, Dreamweaver created a DSN called TrioMotors pointing to the Microsoft Access database in the Samples\Database folder in the Dreamweaver MX 2004 application folder.

  6. Click Test.

    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" in Dreamweaver Help (Help > Using Dreamweaver).
  7. Click OK.

    The new connection appears in the Databases panel.

The sample JSP application is now set up for the Getting Started with Dreamweaver tutorials. For more information, see Tutorial: Developing a Web Application.
Previous


Setup for Sample PHP Site

Macromedia Dreamweaver MX 2004 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. If you’re using a different web server, see "Setting Up a Web Application" in Using Dreamweaver Help.

If you’re a Macintosh user, you can either connect to a remote PHP server or 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:

  • developer.apple.com/internet/macosx/php.html
  • www.entropy.ch/software/macosx/

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 PHP developers
  • Configuring your system (PHP)
  • Defining a Dreamweaver site (PHP)
  • Connecting to the sample database (PHP)
Next


Setup checklists 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 tasks are described in more detail 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 a sample MySQL database.
  2. Create the connection in Dreamweaver.

Related topics

  • Configuring your system (PHP)
  • Defining a Dreamweaver site (PHP)
  • Connecting to the sample database (PHP)


Configuring your system (PHP)

You must configure your system before you can run PHP pages on it. Specifically, you must make sure a web server and a PHP application server are installed and running on your system, then you must create a root folder for your PHP files.

This section contains the following topics:

  • Configuring your Windows system (PHP)
  • Configuring your Macintosh system (PHP)


Configuring your Windows system (PHP)

This section provides instructions for two common Windows configurations: one in which Microsoft IIS or PWS is installed on your hard disk, and one in which IIS or PWS is installed on a remote Windows computer. If you want to use a different configuration, see "Setting Up a Web Application" in Using Dreamweaver Help.

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 (Windows)).
  2. Install the PHP application server (see Installing a PHP application server (Windows)).
  3. Test your installation (see Testing the PHP installation (Windows)).
  4. Create a root folder (seeCreating a root folder (Windows)).

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


Checking for a web server (Windows)

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. A quick way to check whether PWS or IIS is installed on a computer is to look at the folder structure to see whether it contains 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.

After installing the web server, install the application server. (See Installing a PHP application server (Windows).)


Installing a PHP application server (Windows)

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 by a browser, the web server hands the page off to the application server for processing before sending the page to the browser. For more information, see Understanding Web Applications.

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 at www.php.net/downloads.php. Select the Windows installer file, which uses InstallShield to install PHP and configure IIS or PWS.

To install PHP on a Windows system:

  1. If applicable, log into your Windows system using the Administrator account.
  2. Close all open applications.
  3. Double-click the installer file you downloaded from the PHP website.
  4. Follow the onscreen installation instructions.

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 at www.php.net/download-docs.php.

After installing PHP, you can test the server to make sure it works properly. (See Testing the PHP installation (Windows).)


Testing the PHP installation (Windows)

You can test the PHP application server by running a test page.

To test the PHP application server:

  1. In Dreamweaver or any text editor, create a plain text file and name it timetest.php.
  2. In the file, enter the following code:
    <p>This page was created at <b>
<?php echo date("h:i:s a", time()); ?>
</b> on the computer running PHP.</p>

    This code displays the time the page was processed on the server.

  3. Copy the file to the C:\Inetpub\wwwroot folder of the Windows computer running PWS or IIS.
  4. In your web browser, enter the URL of your test page and then press Enter.

    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 your browser’s Refresh button 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.
  • You typed the page’s file path (C:\Inetput\wwwroot\timetest.php) in place of its URL (for example, http://localhost/timetest.php) 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/.
  • 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 (Windows).)


Creating a root folder (Windows)

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.

    Note: Write down this folder name for later use. When you type it later, be sure to use exactly the same capitalization that you used when you created it.

    A good place to create the folder is in C:\Inetpub\wwwroot\. By default, your IIS or PWS web server is set up to serve pages from 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 by doing one of the following:
    • If you’re using PWS, start 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, start the IIS administrative tool (in Windows XP, select Start > Control Panel or Start > Settings Control Panel, then double-click Administrative Tools, then double-click Internet Information Services). Expand the "local computer" list, then the Web Sites folder, then the Default Web Site folder. Right-click your MySampleApp folder and select Properties from the pop-up menu. In the Execute Permissions pop-up menu, make sure the Scripts Only option is selected. (For security reasons, do not select the Scripts and Executables option.) Then click OK.

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 (PHP).)


Configuring your Macintosh system (PHP)

If you’re a Macintosh user, you can run PHP pages on your computer using the Apache web server and PHP application server installed with your operating system. Configuring your system consists of making sure the web server and PHP application server are working, then creating a root folder for your PHP files.

This section contains the following topics:

  • Testing the PHP installation (Macintosh)
  • Creating a root folder (Macintosh)

For more information on Apache and PHP on the Macintosh, see the Apple website at developer.apple.com/internet/macosx/php.html. Another useful website is www.entropy.ch/software/macosx/.


Testing the PHP installation (Macintosh)

You can test the Apache web server and PHP application server on your Macintosh by running a test page.

However, before you can use the web server to serve PHP pages and content from MySQL databases, you must configure the server to work with PHP and MySQL. For information on this process, see www.macromedia.com/devnet/mx/dreamweaver/articles/php_macintosh.html.

To test the Apache web server and PHP application server:

  1. Configure the server as described in the article on the Macromedia website.
  2. In Dreamweaver or any text editor, create a plain text file and name it timetest.php.
  3. In the file, enter the following code:
    <p>This page was created at <b>
<?php echo date("h:i:s a", time()); ?>
</b> on the computer running PHP.</p>

    This code displays the time the page was processed on the server.

  4. Copy the file to the /Users/your_user_name/Sites folder on your Macintosh.

    This Sites folder is your personal root folder for the Apache web server.

  5. In your web browser, enter the following URL and press Return:

    http://localhost/~your_user_name/timetest.php

The test page should open and display a time of day.

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

Note: Looking at the source code (View > View Source in Safari) 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 URL contains a typing mistake. Check for errors and make sure the filename is not followed by a slash, such as http://localhost/~your_user_name/timetest.php/. Also make sure you included the tilde (~) before your user name.
  • The page code contains a typing mistake.
  • The Apache server is not running. Look in System Preferences, in the Sharing category, to see whether Personal Web Sharing is enabled.

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


Creating a root folder (Macintosh)

After the server software is installed, create a root folder for your web application on the Macintosh.

To create a root folder for your web application:

  • Create a folder called MySampleApp in the /Users/your_user_name/Sites folder.

    Apache will process any page in this folder or in any of its subfolders in response to an HTTP request from a web browser.

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


Defining a Dreamweaver site (PHP)

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

Note: If you’re a Macromedia HomeSite or ColdFusion Studio user, you may find it useful to think of a Dreamweaver site as being like 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 (PHP)).
  5. Upload the sample files to the web server (see Uploading the sample files).


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 > Manage Sites. In the Manage Sites dialog box, click the New button, then select Site.

    The Site Definition dialog box appears.

  2. If the Basic tab is showing, click the Advanced tab.
  3. In the Site Name text box, enter Trio-PHP.

    The name identifies your site within Dreamweaver.

  4. Click the folder icon next to the Local Root Folder text box, then browse to and select the folder (inside the GettingStarted folder) that contains the PHP sample files. The folder should be as follows:
    • C:\Documents and Setting\your_user_name\My Documents\Sites-Local\GettingStarted\ 4-Develop\php (Windows)
    • /Users/your_user_name/Documents/Sites-Local/GettingStarted/4-Develop/php (Macintosh)

Leave the Site Definition dialog box open. Next, define a web server folder as a Dreamweaver remote folder. (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 tab of the Site Definition dialog box, select Remote Info from the Category list.

    The Remote Info screen appears.

  2. In the Access pop-up menu, choose how you want to move your files to and from the server: across a local network (the Local/Network option) or using FTP.

    Note: There are other options in the Access pop-up menu, but this chapter doesn’t cover them. For information about them, see Using Dreamweaver Help.

  3. Enter the path or FTP settings to the web server folder you created in Creating a root folder (Windows).

    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 considered to be the remote folder. The following example shows a possible Remote Folder path if you chose Local/Network access and your remote folder is on your Windows hard disk:

    Remote Folder: C:\Inetpub\wwwroot\MySampleApp

    On the Macintosh, the folder might be as follows:

    Remote Folder: /Users/your_user_name/Sites/MySampleApp

    For more information on FTP, see "Setting Remote Info options for FTP access" in Using Dreamweaver Help.

Leave the Site Definition dialog box open. Next, define a folder to process dynamic pages. (See Specifying where dynamic pages can be processed (PHP).)


Specifying where dynamic pages can be processed (PHP)

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’re developing your application.

To specify the folder to process dynamic pages:

  1. In the advanced Site Definition dialog box, click Testing Server in the Category list.

    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. In many situations, including setting up for the Trio site, 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 from the Server Model pop-up menu.
  3. In the Access pop-up menu, select the same method (Local/Network or FTP) you specified for accessing your remote folder.

    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.

    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. Correct or enter a new URL prefix if the suggestion in Dreamweaver is incorrect. For more information, see "About the URL prefix" in Dreamweaver Help (Help > Using Dreamweaver).

    For the PHP sample content in Windows, the prefix should be as follows:

    URL Prefix: http://localhost/MySampleApp/

    On the Macintosh, the prefix should be as follows:

    URL Prefix: http://localhost/~your_user_name/MySampleApp/

    Tip: The URL prefix should always specify a directory, rather than a particular page on the site. Also, be sure to use the same capitalization you used when you created the folder.

  5. Click OK to define the site and dismiss the Site Definition dialog box, then click Done to dismiss the Manage Sites dialog box.

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


Uploading the sample files

After specifying a folder to process dynamic pages, upload the sample files to the web server. 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 Files panel (Window > Files), select the root folder of the site in the Local View pane.

    The root folder is the first folder in the list.

  2. Click the blue Put Files arrow icon in the Files panel toolbar, and confirm that you want to upload the entire site.

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

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


Connecting to the sample database (PHP)

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 at www.mysql.com.

To create a database connection:

  1. Create the sample MySQL database using the SQL script (see Creating the MySQL database).
  2. Create the connection in Dreamweaver (see Creating a database connection).


Creating the MySQL database

The sample files for Dreamweaver MX 2004 include 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 at www.mysql.com.

To create the sample MySQL database:

  1. Copy the SQL script file, insert.sql, to an appropriate folder on the computer that has MySQL installed.

    If you installed Dreamweaver to its default location, the path to the script file is as follows:

    • C:\Program Files\Macromedia\Dreamweaver MX 2004\Samples\Database\insert.sql (Windows)
    • /Applications/Macromedia Dreamweaver MX 2004/Samples/Database/insert.sql (Macintosh)

    If the computer running MySQL is a Windows computer, copy the insert.sql script to MySql\Bin. If the computer running MySQL is a Macintosh, copy the insert.sql script to your Documents folder in your home folder.

  2. On the computer that has MySQL installed, open a command prompt window (Windows) or a Terminal window (Macintosh).
    • In Windows, you can open the command prompt by selecting Start > Programs > Command Prompt or Start > Programs > Accessories > Command Prompt.
    • On the Macintosh, you can open a Terminal window by going to the Applications folder, opening the Utilities folder, and double-clicking Terminal.
  3. (Windows only) Change to the mysql\bin directory by entering the following commands at the command prompt:
    cd \
cd mysql\bin

    Note: On the Macintosh, you should be able to run mysql from any directory; it should have been added to your path during installation of MySQL. If the following step doesn’t work on the Macintosh, though, try typing /usr/local/bin/mysql instead of mysql.

  4. Start the MySQL client by entering the following command:
    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:
    mysql>CREATE DATABASE TrioMotors;

    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:
    mysql>quit;
  7. At the system command prompt, populate the new TrioMotors database in MySQL.

    In Windows, use the following command:

    mysql -uUser -pPassword TrioMotors < insert.sql

    On the Macintosh, use the following command:

    mysql -uUser -pPassword TrioMotors < ~/Documents/insert.sql

    This command uses the insert.sql file to add tables and records to the TrioMotors 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

The final step of the setup process is to create a connection to the database.

To create a database connection in Dreamweaver:

  1. Open any PHP page in Dreamweaver and then open the Databases panel (Window > Databases).
  2. Click the Plus (+) button on the panel and select MySQL Connection from the pop-up menu.

    The MySQL Connection dialog box appears,

  3. Enter connTrio as the connection name.
  4. In the MySQL Server text box, specify the computer hosting MySQL.

    Enter an IP address or a server name. If MySQL is running on the same computer as Dreamweaver, enter localhost.

  5. Enter your MySQL user name and password.

    If you didn’t define a user name while configuring your MySQL installation, enter 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 TrioMotors, or click Select and select TrioMotors from the list of MySQL databases.

    TrioMotors is the name of the sample MySQL database you created (see Creating the MySQL database).

  7. Click Test.

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

    • Double-check the server name, user name, and password.
    • Check the settings for the folder Dreamweaver uses to process dynamic pages (see Specifying where dynamic pages can be processed (PHP)).
    • Consult "Troubleshooting Database Connections" in Dreamweaver Help (Help > Using Dreamweaver).
  8. Click OK.

    The new connection appears in the Databases panel.

The sample PHP application is now set up for the Getting Started with Dreamweaver tutorials. For more information, see Tutorial: Developing a Web Application.
Previous


Trademarks

Add Life to the Web, Afterburner, Aftershock, Andromedia, Allaire, Animation PowerPack, Aria, Attain, Authorware, Authorware Star, Backstage, Bright Tiger, Clustercats, Cold Fusion, Contribute, Design in Motion, Director, Dream Templates, Dreamweaver, Drumbeat 2000, EDJE, EJIPT, Extreme 3D, Fireworks, Flash, Fontographer, FreeHand, Generator, HomeSite, JFusion, JRun, Kawa, Know Your Site, Knowledge Objects, Knowledge Stream, Knowledge Track, LikeMinds, Lingo, Live Effects, MacRecorder Logo and Design, Macromedia, Macromedia Action!, Macromedia Flash, Macromedia M Logo & Design, Macromedia Spectra, Macromedia xRes Logo and Design, MacroModel, Made with Macromedia, Made with Macromedia Logo and Design, MAGIC Logo and Design, Mediamaker, Movie Critic, Open Sesame!, Roundtrip HTML, Shockwave, Sitespring, SoundEdit, Titlemaker, UltraDev, Web Design 101, what the web can be, and Xtra are either registered or 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.
Next


Third-Party Information

This guide contains links to third-party websites 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 website 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.

Third Party Software Notices and/or Additional Terms and Conditions can be found at www.macromedia.com/go/thirdparty/.

Opera ® browser Copyright © 1995-2002 Opera Software ASA and its suppliers. All rights reserved.


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 © 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.


Acknowledgments

Senior Management: Sheila McGinn

Project Management: Charles Nadeau

Writing: Jed Hartman

Editing: Lisa Stanziano, Mary Ferguson

Production Management: Patrice O’Neill

Media Design and Production: Adam Barnett, Chris Basmajian, Aaron Begley, John Francis, Jeff Harmon

Special thanks to Jay London, David Deming, Jennifer Taylor, Lori Hylan-Cho, Dominic Sagolla, Mary Ann Walsh, Jennifer Rowe, Chris Bedford, Jon Varese, Rosana Francescato, Charles Nadeau, and the entire Dreamweaver engineering and QA teams.

First Edition: September 2003

Macromedia, Inc.
600 Townsend St.
San Francisco, CA 94103
Previous


Getting Started

Copyright © 1997-2003 Macromedia, Inc.
All rights reserved.
Trademarks and Acknowledgments