Customize the Header panel

In the AJAX Panels tab of the Files panel, click the Header panel in order to make it editable in the master page. Then follow the next steps to customize it a little:

  1. Notice in the Server Behaviors tab of the Application panel the AJAX Link server behavior applied to the header title. In order to remove the link from the header, you have to remove this server behavior: select it and press the Minus (-) button above.

    Note:     In the AJAX context you are dealing with AJAX links (pointing to panel states), that are different from the common links (pointing to site pages) you were used to. As you noticed throughout this tutorial, for inserting and removing AJAX links you have to use the AJAX Link server behavior.
                           

  2. Right where the cursor is placed after removing the AJAX link, reenter the header text: InterAKT Online - Dreamweaver Extensions for Dynamic Websites.

  3. Place the cursor before the header text and insert the logo_InterAKT.png image (company logo) as shown here. Insert a space between the logo image and the title.

  4. Select the inserted image, and in the Align drop-down menu from the Property Inspector choose the Absolute Middle option.

  5. Press Ctrl+A to select all the Header panel content and click the Align Center button from the Property Inspector.

  6. Save the changes.

  7. Each panel in the master page has a set of properties that can be configured in the corresponding Property Inspector. To access this Property Inspector, click the Master page item in the AJAX Panels tab of the Files panel.  Notice in the Server Behaviors tab of the Application panel the AJAX Panel server behaviors corresponding to each of the existing panels.
    Click the AJAX Panel (Header) server behavior. In the displayed Property Inspector, choose the Rounded corners style in the Style drop-down menu (the Gradient style has been used by default):

 

After performing all these changes, the master page should look like this in browser:

 

After following this tutorial, you must have seen for yourself how easily an AJAX-based site can be created with MX AJAX Toolbox!

Login to Add New Note