| |
| |
Now that the AJAX panels were created, start working on their content. In this tutorial topic you will complete 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 edit the "stable" panels in the site:
In the AJAX Panels tab of the Files panel, click the Header (default state) item in order to make it editable in the index master page. Then in Design view, click inside the Header panel and follow the steps below:
Remove all the sample text (press Ctrl+A, and then Delete).
In the empty panel, proceed similar to here (steps 1-3) to insert the logo_InterAKT.png image from the logos folder in the site root.
Press the right arrow to deselect the inserted image, and then space. Enter the following text: Simplifying web development. Select the text and make it italic (press Ctrl+I).
To make the image and the text nicely aligned, select the image (single-click), and in the Align drop-down menu from the Property Inspector, select the Absolute Middle option.
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.
In the AJAX Panels tab of the Files panel, click the Menu (default state) item in order to make it editable in the index master page. Then in Design view, click inside the Menu panel and follow the steps below:
Remove all the sample text (press Ctrl+A, and then Delete).
As the first menu item, type Home.
In four new paragraphs below, type respectively: MX AJAX Toolbox, News, Portfolio, Contact.
Transform each of the five menu items into AJAX links, pointing to states of the master panel (Content):
Select the Home menu item and turn it into an AJAX link pointing to the default state of the master panel, just as shown here.
In a similar manner, transform the other four menu items into AJAX links. There is only one difference from the previous configuration (notice how due to the user interface persistence, settings are remembered):
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. You can preview it in browser (press F12) if you want to, but only the site header and menu are ready so far.
Note: Although in Dreamweaver, in Design view, the MX AJAX Toolbox menu item spreads on two rows, in browser it is displayed in a single row.
In the AJAX Panels tab of the Files panel, click the Nuggets (default state) item in order to make it editable in the index master page. Then in Design view, click inside the Nuggets panel and follow the steps below:
Remove all the sample text (press Ctrl+A, and then Delete).
Switch to Code view and enter the following code line where the cursor is placed (the only place where you can enter anything):
<div style="width: 148px; margin-left: 15px;"></div>
This way, you are creating a container for the two AJAX controls that you are adding here (a collapsible region and an accordion) so that they won't display right next to the orange border, but a little to the right.
Place the cursor right before </div> and then switch back to Design view.
Launch the AJAX Collapsible Region Wizard from the MX AJAX Toolbox tab of the Insert bar. Configure its dialog box as shown below:
Leave the suggested collapsible region name.
In the Collapsible width text box enter 146.
Note: To the collapsible region width of 146, the left and right border widths are added (1 pixel each). This way, in browser you obtain the width of the div container, namely 148.
In the Collapsible height text box enter 175. This height includes the title bar as well.
Select the Inline content type.
In the Title text box enter: Dreamweaver 8.0.2.
Check the Default expanded option.
Click OK to generate the collapsible region.
Notice the new translator (representation in Design view of the elements added) in page. Since this is an inline collapsible region, if you click the title bar, the element will expand (allowing you to edit its content) and collapse with consecutive clicks.
Since the content for the collapsible region is inline, you can edit it right here and now. Place the cursor inside the collapsible region body (either in Code view, or in Design view when expanded), and replace the default text ("Dreamweaver 8.0.2" region content here.) with: Dreamweaver 8.0.2 brings significant improvements in the generated code regarding server behaviors and active content such as Flash! Do not hesitate, upgrade now!
Switch to Code view and create a new code line (press Enter) above the very final </div> in that editable code section. Then enter the following code to create two new paragraphs:
<p> </p>
<p></p>
Place the cursor between the second <p> and </p>, and then switch to Design view.
Launch the AJAX Accordion Wizard from the MX AJAX Toolbox tab of the Insert bar. The wizard has two steps.
Configure the first step of the AJAX Accordion Wizard as shown below:
Leave the suggested accordion name.
In the Accordion width text box enter 146.
Note: To the accordion width of 146, the left and right border widths are added (1 pixel each). This way, in browser you obtain the width of the div container, namely 148.
In the Accordion height text box enter 290. This height includes the title bars as well (not only the one region shown at a time).
Select the Inline content type.
Click Next to continue configuring the wizard.
In the second step of the AJAX Accordion Wizard you get to specify the regions titles:
To define the first accordion region, click the Plus (+) button above the Accordion regions grid. In the dialog box that opens enter its title - Testimonials, and then click OK:
The item is added in the grid and it is automatically selected. You can use the Title text box below the grid to edit the title if you want to.
In a similar manner, add two more regions: Best selling product and Website of the day.
Click Finish when you are done configuring the wizard.
Notice the corresponding translator added in page. Since this is an inline accordion, if you click any of the title bars, the respective accordion region expands (if not already expanded), allowing you to edit its content.
Since the accordion content is inline, you can edit it right here and now:
If the first region is not expanded, click inside its title bar. Replace the default region content ("Testimonials" region content here.) with: When it comes to Dreamweaver, InterAKT is where I look first for extensions. I particularly approve of the real-world tutorials.
Click the second region title bar.
Replace the default region content ("Best selling product" region content here.) with: The MX Spring Pack 2006 bundle recorded great sales due to the seven products included and the convenient price.
Create a new paragraph below and proceed similar to here (steps 1-3) to insert the logo_MX_Spring_Pack.gif image from the logos folder in the site root.
In a new paragraph below the image enter: Do not miss this offer!.
Finally, click the third region title bar.
Replace the default region content ("Website of the day" region content here.) with: The site Glenn completed today is by far the best we've seen.
Create a new paragraph below and, just like you did in the previous accordion region, insert the site_of_the_day.png image from the logos folder in the site root.
In a new paragraph below the image enter: Congratulations!
After following the steps above, the index page in Dreamweaver, in Design view, should look like this (regarding the Nuggets panel):
Save the index file and upload it to the server. You can preview it in browser (press F12) if you want to. Only the site header, menu, and nuggets column are ready so far.
In the AJAX Panels tab of the Files panel, click the Footer (default state) item in order to make it editable in the index master page. Then in Design view, click inside the Footer panel and follow the steps below:
Remove all the sample text (press Ctrl+A, and then Delete).
In the empty panel, enter: © InterAKT Online. All rights reserved. Select the text (Ctrl+A) and make it italic (Ctrl+I).
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. You can preview it in browser (press F12) if you want to. The four "stable" panels are now completed.
Move on to the next topic to complete the master panel with its five states.