Create the main panel and the menu AJAX links

Click the Master page item in the AJAX Panels tab of the Files panel. Now that you are in the master page (index), you will be able to edit the content outside the existing AJAX panels. In Design view, click inside the Content panel div and remove the temporary text (press Ctrl+A, and then Delete). Just like before, create a new panel by applying the AJAX Panel server behavior. Configure it considering these differences:

1. In the Basic tab, name the panel Content, and check the Main Panel option:
   
   
                                  

2. In the Style tab, select the Rounded corners style for the panel (due to the user interface persistence, the None option was selected by default according to the previous settings - Footer panel):
   
   
                                  

3. In the Advanced tab, add four extra panel states besides the default one (one for each photo album):
   
   
                                  

4. • First of all, change the initial Title for the default state from Content to Home (the second text box below the grid).
                           
     Note: The Title text box shows only for main panels (the Main Panel option is checked in the Basic tab).
                           

   • Click the Add state button on top of the Panel states grid, and in the dialog box that pops-up, enter the name of the new state - Ocean:
     
     
                                    
     Notice in the Content file text box below the grid that the filename was automatically generated (and the file will be automatically created). The Title is automatically suggested as well, but change it to At the ocean (like the menu item). Leave the Meta description and Meta keywords textareas blank.
                                    
     Note: Leave the automatically generated filename in the Content file text box for all the other panel states you are about to add. Also, leave the Meta description and Meta keywords textareas blank for all the new states.
                                    

   • Click the Add state button to add another panel state: name it Mountains, and set its Title to In the mountains.

   • Click the Add state button to add another panel state: name it Wedding, and leave its Title to Wedding.

   • Click the Add state button to add the last panel state: name it Family, and set its Title to Our big family.

4. Click OK to apply the server behavior.

Notice the five main panel states listed in the AJAX Panels tab of the Files panel (after expanding the Content panel) - default state, Ocean, Mountains, Wedding, Family:

All the AJAX panels needed for your site are now created, including the main one. Before editing the main panel states, take some time to transform the menu items into AJAX links to these states (you couldn't when you first created the site menu because the main panel did not exist back then). To edit the default (and only) state of the Menu panel, click the Master page/Menu/default state item in the AJAX Panels tab of the Files panel, and then follow the steps below:

1. Select the Home menu item and apply the AJAX Link server behavior from the Application panel, Server Behaviors -> + -> MX AJAX Toolbox. The dialog box has three tabs, but you only need to configure the first tab (Basic):
   
   
                                  
2. • In the Target panel drop-down menu select the Content panel.
   • In the Target state drop-down menu select the default state.
   • In the Link text text box, the selection made before applying this server behavior is displayed. Do not alter this value.
   • Click OK to apply the server behavior.
2. In a similar manner, transform the other four menu items into AJAX links. There is only one difference from the configuration above (notice how due to the user interface persistence, the previous settings are remembered):
3. • The At the ocean menu item targets the Ocean state from the Content panel.
   • The In the mountains menu item targets the Mountains state from the Content panel.
   • The Wedding menu item targets the Wedding state from the Content panel.
   • The Our big family menu item targets the Family state from the Content panel.

Continue with the next topic to create the photo galleries in the main panel: one gallery per album (each album corresponds to a main panel state).