| |
| |
What is left to do in order to complete the site is to edit each of the five main panel (Content) states: Default, Ocean, Mountains, Wedding, Family.
Start with the default panel state: to make it editable, click the Master page/Content/default state item in the AJAX Panels tab of the Files panel. In the index page, in Design view, click inside the default Content panel state, and then follow the steps below:
Change the title from Content to Home.
Replace the sample text below the title with: Check out the latest photos from my vacations, from places I've been, or from significant events I attended. The photos are grouped by albums. View each album as a photo gallery loaded with MX AJAX Toolbox.
Save the changes.
Continue with the Ocean panel state: to make it editable, click the Master page/Content/Ocean item in the AJAX Panels tab of the Files panel. In the index page, in Design view, click inside the Ocean panel state, and then follow the steps below:
Change the title from Content :: Ocean to At the ocean.
Replace the sample text below the title with: See our pictures from the fantastic vacation at the Pacific ocean!.
Create a new paragraph below, and apply the AJAX Photo Gallery server behavior from the MX AJAX Toolbox tab of the Insert bar. The dialog box has two tabs.
Configure the first tab (Basic) of the AJAX Photo Gallery server behavior as shown below:
Leave the suggested photo gallery name.
Click the Browse button to locate, in the site structure, the folder storing the photos from the vacation at the ocean - it is the ocean folder from the photos one.
In the Photo width text box enter 500. This is the width, in pixels, for the photo gallery widget (which includes the photo previewed at one time and the thumbnails navigation bar). More precisely, it is the width of the navigation bar.
In the Photo height text box enter 300. This is the maximum height, in pixels, for the photo seen at one time.
Note: The current photo will be box-resized in an area above/below the navigation bar, area having the two dimensions set.
Choose to display the thumbnails navigation bar at the Bottom.
Choose not to show the thumbnail loader.
Check the Enable slideshow option, and leave its interval to the default value, 3000 milliseconds.
Click the next tab to continue configuring the command.
Configure the second tab (Advanced) of the AJAX Photo Gallery server behavior if you want to display a short description for each photo (as a tooltip). The description and the corresponding image filename should be stored in an XML file. You will learn how to benefit from this feature in another tutorial, so leave the default values (blank) in the interface controls.
Click OK to generate the photo gallery.
Notice the corresponding translator added in page. One of the images in the folder is retrieved and displayed in the photo box, and the same image is displayed as thumbnails in the navigation bar.
Save the changes.
If you upload the site to the server and preview it in browser, you will see that the Ocean photo gallery would look much better if centered inside the panel, and not aligned to the left as it is now. Also, if you check the generated code (switch to Code view in Dreamweaver), you will see that the code corresponding to the photo gallery was added after the element inside that paragraph, and this increases the distance between the gallery and the introduction line above it. So here is what you have to do to better position the gallery inside the panel:
In Design view, click the photo gallery translator from the Ocean panel state.
Switch to Code view, and replace the <p> part above the selected code with <div style="padding: 15px 0 0 44px;">. This provides a 15px white space (padding) above the widget, and 44px to the left (to center it).
Replace the </p> after the photo gallery code (including the Play/Pause link) with </div>.
After saving and uploading to the server, preview your site in browser to see how the Ocean photo gallery position has changed.
Continue with the Mountains panel state: to make it editable, click the Master page/Content/Mountains item in the AJAX Panels tab of the Files panel. In the index page, in Design view, click inside the Mountains panel state, and then follow the steps below:
Change the title from Content :: Mountains to In the mountains.
Replace the sample text below the title with: View our pictures from the wonderful trip to the Alps!.
Just like above, create a photo gallery in a new paragraph. Due to the user interface persistence, the only thing that you have to change in the dialog box is the site folder where images are stored - click the Browse button to locate, in the site structure, the mountain folder from the photos one:
Once the gallery is created, position it better in the panel just like you did for the Ocean photo gallery.
After saving and uploading to the server, preview your site in browser to see how the Mountains photo gallery position has changed.
In a similar manner, edit the Wedding and Family panel states. The few differences are listed below:
For the Wedding panel state:
Change the title from Content :: Wedding to Wedding.
Replace the sample text below the title with: Here are some good sweet pics from our wedding...
Select the \photos\wedding folder when configuring the AJAX Photo Gallery server behavior.
Change the photo gallery position as shown above.
For the Family panel state:
Change the title from Content :: Family to Our big family.
Replace the sample text below the title with: This is all our family. They are the best!.
Select the \photos\family folder when configuring the AJAX Photo Gallery server behavior.
Change the photo gallery position as shown above.
At this point, you have a fully functional AJAX site where your albums can be seen as photo galleries. One last thing that you should do to improve the site appearance is to change the color of the rounder borders for the Menu and Content panels. The default color is dark blue (#525E94) and you want to make it dark yellow (like the tulips). To do this, follow the steps below:
Open the \includes\jaxon\css\panels.css file.
Locate the rounded corners styles section (starting with line #82).
In line #96 (b.r1 {background-color: #525e94 !important;}) replace #525e94 with #CFA948. This will change the color of the top and bottom borders (check it out in the browser if you want to).
In line #112 (border: 0 solid #525e94;) replace #525e94 with #CFA948. This will change the color of the left and right borders, including the rounded corners. If you save the file and preview/refresh your site in browser, you will see the borders color completely changed.
This is how your final site should look in browser:
In the tutorial you just completed, you created an AJAX-based site that offers the possibility to display your photo albums in AJAX photo galleries (each album with its gallery). You also customized the default appearance a little: you added background images for the header and the footer, and you changed the color of the rounded-corner borders.