Build the "dynamic" AJAX site and its structure

With the new empty site selected in the Files tab of the Files panel, access the New AJAX Site command from the Site menu (in Dreamweaver). The dialog box has two steps.

1. Configure the first step of the New AJAX Site command as shown below:
   
   
                                                               

2. • The Site name text box is pre-filled by default with the name of your Dreamweaver site. Enter a new name: My favorite music. This name will be displayed in the Header panel of your AJAX site.

   • Select the 2 columns layout.

   • The image below the two interface controls offers a preview of how the AJAX site page will look in browser.

   • Click Next to continue configuring the command.

2. Configure the second step of the New AJAX Site command as shown below:
   
   
                                                               

3. • There are four pages (states of the Content panel) that you will create in this site, for now. While creating them and setting their options, you can preview each one of them in the image on the bottom-right (the page selected in the Content states grid is previewed in that image).

   • 1. Leave the options for the default state, Home, as they are.

     2. Click the Plus (+) button on top of the Content states grid to create another state. Configure it as it follows:

     3. • Set the Title to Artist detail.

        • Set the State name to ArtistDetail (just click inside this text box).
                                                    
          Note: If you click inside this text box, the state name will be automatically generated starting from the title - it will retrieve the first two words (if there are at least two), remove the space between them, and make them start with a capital letter. If you do not like the suggested name, edit it according to your preferences.
                                                    

        • Do not check the Display in menu option.

        • In the Template drop-down menu select the Description option.

     3. Click the Plus (+) button on top of the Content states grid to create another state. Configure it as it follows:

     4. • Set the Title to Album detail.

        • Set the State name to AlbumDetail (just click inside this text box).

        • Do not check the Display in menu option.

        • In the Template drop-down menu select the Description option.

     4. Click the Plus (+) button on top of the Content states grid to create one more state. Configure it as it follows:

     5. • Set the Title to Contact.

        • Set the State name to Contact (just click inside this text box).

        • Check the Display in menu option.

        • In the Template drop-down menu select the Contact info option.

   • Click Finish to apply the command.

Once the AJAX site is created, notice its generated structure - index, the master page, is located in the site root, and all the other panel states (default or not) are located in the content folder from the site root:

The main page, index, is automatically opened. Notice the four panels in its layout: Header, Menu, Content, Footer. To be able to edit them individually, access the AJAX Panels floater from the Window menu in Dreamweaver and group it with the Files panel as shown here.

If you now click the AJAX Panels tab of the Files panel, it will display the AJAX site structure created with the New AJAX Site command above:

Notice the four panels listed in the AJAX Panels tab: Header, Menu, Content, Footer. The Content panel is the only one with more states, namely four (the default Home state corresponds to the Content panel selection). In browser, these states change according to the item selected in the Menu panel on the left, or if you click links that point to other pages/states that are not included in the menu (ArtistDetail and AlbumDetail, in this case so far).

Now that your site is not empty anymore, but has at least several files in it, you can create the database connection. Having the index file opened, define a Dreamweaver database connection: conn_music_catalog. Configure it to connect to your database server and make it point to the database containing the tables described earlier.

Another thing you should do right now is to copy the albums and artists folders provided in the .zip package (\tutorials\Music Catalog) in the content folder of your site structure (notice it in the Files tab of the Files panel). Then switch back to the AJAX Panels tab of the Files panel.

In the next topic you will complete the Menu panel by adding the artists names as menu items.