| |
| |
Now that the site layout was shaped, start working on the AJAX panels. In this tutorial topic you will create the "stable" panels (that display the same content no matter where you find yourself within the site).
Open the index page, if necessary, and follow the instructions below to complete the "stable" panels in the site:
In the index page, in Design view, click inside the Header panel div and remove the temporary text (press Ctrl+A, and then Delete).
Apply the AJAX Panel server behavior from the Application panel, Server Behaviors -> + -> MX AJAX Toolbox. The dialog box has three tabs.
Configure the Basic tab as shown below:
Name the panel, Header.
Click inside the Content File text box and the filename will be automatically generated starting from the panel name - it will retrieve the first two words (if there are at least two) and remove the space between them. If you do not like the suggested name, edit it according to your preferences.
Uncheck the Main panel option, as the Header panel is just a "stable" one, as said above.
Click the Style tab to continue configuring the server behavior.
Configure the Style tab as shown below:
Select none of the predefined styles for the panel - you will customize the site header yourself by adding a background image.
Do not use any update effect.
Click the Advanced tab to continue configuring the server behavior.
In the Advanced tab you can add extra panel states beside the default one. It is not the case for the Header panel to have more states, so leave this tab to its default settings:
Click OK to apply the server behavior.
You will notice in page the added panel, with sample text inside it. To be able to edit its default (and only) state, you must select it in the master page structure (hierarchy). For this, access the AJAX Panels floater from the Window menu in Dreamweaver, and group it with the Files panel as shown here. Then in the AJAX Panels tab of the Files panel, click the Master page/Header/default state item in order to make it editable in the index page:
In Design view, click inside the Header panel, and then follow the steps below:
Remove all the sample text (press Ctrl+A, and then Delete), and enter the following one: My Photo Galleries built with MX AJAX Toolbox.
Press Ctrl+A to select the new text and use the Property Inspector to set its font size to 30 and its style to Italic.
You want to add a background image for the header, namely the header.jpg image from the background folder you copied earlier in your site root. For this, you have to edit the corresponding div container. You can do this only from the master page:
Save the changes and press the Go to Master Page button in the MX AJAX Toolbox tab of the Insert bar.
Select the corresponding AJAX Panel server behavior in the Server Behaviors tab of the Application panel. Switch to Code view and edit the div container that holds the selected code. More precisely, transform the opening <div>, right above the selection, into <div style="background-image: url(background/header.jpg); width: 770px; height: 93px; padding: 50px 0px 0px 30px;">.
Note 1: Notice that the sum between the div width (770) and left/right padding (30/0) equals the image width (800), and the sum between the div height (93) and top/bottom padding (50/0) equals the image height (143).
Note 2: If you want to set a header background for a site generated with the New AJAX Site wizard, either proceed as explained above or open the \includes\jaxon\css\panels.css file and edit the header selector: add the background image, width and height properties.
After following the steps above, the index page in Dreamweaver, in Design view, should look like this (regarding the Header panel):
Save the index file and upload it to the server. You can preview it in browser (press F12) if you want to, but only the site header is ready so far.
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 Menu panel div and remove the temporary text (press Ctrl+A, and then Delete). Just like above, create a new panel by applying the AJAX Panel server behavior. Configure it considering these two differences:
Name the panel, Menu.
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 - Header panel).
To be able to edit the default (and only) state of the new panel, click the Master page/Menu/default state item in the AJAX Panels tab of the Files panel, and then follow the steps below:
Remove all the sample text (press Ctrl+A, and then Delete).
As the first menu item, type Home.
Create a new paragraph below, and press the Text Indent button in the Property Inspector. Then type: At the ocean.
Press Enter to create another indented paragraph below, and type: In the mountains.
In a new indented paragraph enter: Wedding.
And finally, the last menu item should be: Our big family (still in an indented paragraph).
To complete the site menu, you have to transform these menu items into AJAX links (that point to different states of the master panel, each one corresponding to a photo album). Since the master panel does not exist yet, you will add the AJAX links later on.
After following the steps above, the index page in Dreamweaver, in Design view, should look like this (regarding the Menu panel):
Save the index file and upload it to the server. Only the site header, and partially the site menu are ready so far. If you try to preview the site in browser (press F12), you won't be able to see anything because the main panel was not created yet.
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 Footer panel div and remove the temporary text (press Ctrl+A, and then Delete). Just like for the site header above, create a new panel by applying the AJAX Panel server behavior. The only difference in configuring the dialog box stays in the panel name: Footer.
Note: Be careful to select the None style, like for the Header panel, and do not leave the remembered one, Rounded corners, from when creating the Menu panel.
To be able to edit the default (and only) state of the new panel, click the Master page/Footer/default state item in the AJAX Panels tab of the Files panel, and then follow the steps below:
Remove all the sample text (press Ctrl+A, and then Delete), and enter the following one: These are my memories :) All rights reserved.
Press Ctrl+A to select the new text and use the Property Inspector to set its font size to 30 and its style to Italic.
You want to add a background image for the footer, namely the footer.jpg image from the background folder you copied earlier in your site root. Proceed as for the Header panel above, with one difference: transform the opening <div> tag from <div style="clear: both;"> to <div style="clear: both; background-image: url(background/footer.jpg); width: 770px; height: 39px; padding: 20px 0px 0px 30px;">.
After following the steps above, the index page in Dreamweaver, in Design view, should look like this (regarding the Footer panel):
Save the index file and upload it to the server. Only the site header, footer, and partially the site menu are ready so far. If you try to preview the site in browser (press F12), you won't be able to see anything because the main panel was not created yet.
Continue with the next topic to create the main panel, and then transform the menu items into AJAX links pointing to the main panel states.