Create the five AJAX panels needed

Now that the site layout was shaped, the AJAX panels can be created in the designed page locations. In this tutorial topic you will just create the panels. You will add content in them later on.

Open the index page, if necessary, and follow the instructions below to create the five AJAX panels:

1. Create the Header panel in the Header panel div as explained here (steps 1-4), with only one exception: in the Styles drop-down menu from the Style tab select the None option (your site already has a style given by the orange borders, you do not need another one). You will notice in page the added panel, with sample text inside it.

2. In a similar manner, create the Menu, Nuggets, and Footer panels. Create them in the corresponding divs, and name the panels respectively (Menu, Nuggets, Footer).

3. The fifth (and last) panel to be created is the master one. Create it in the Content panel div. Compared to the other four panels, there are some differences when configuring the Basic and the Advanced tabs:

4. • In the Basic tab, after naming the panel Content and having the filename automatically generated, check the Master Panel option as shown here.

   • In the Advanced tab, first change the initial HTML Title for the default state from Content to Home (the second text box below the grid).
     
     Note: The HTML Title text box shows only for master panels (the Master Panel option is checked in the Basic tab).
                          
     Then add the following four states, as shown here - MX AJAX Toolbox, News, Portfolio, Contact:
     
     
                                           
     Note: Leave the automatically generated values in the Content File and HTML Title text boxes below the grid.

While following the steps above, you definitely noticed in the index page, in Design view, the five added panels with sample text inside them:

Save the index file and upload it to the server. You can preview it in browser (press F12) if you want to.

Also, in the Files tab of the Files panel you can see your current site structure - the files corresponding to the AJAX panels states (default or not) were automatically generated:

To be able to edit the panels states, do not open the corresponding files, but select the state you want to edit in the master page hierarchy. For this, access the AJAX Panels window from the Window menu in Dreamweaver, and group it with the Files panel as shown here. In the AJAX Panels tab of the Files panel, notice the master page structure:

Continue with the next topic to edit the Header, Menu, Nuggets, and Footer panels by replacing the sample content with the final one.