| |
| |
This AJAX-based site is not created by using the New AJAX Site wizard, but by adding the AJAX panels one by one in a page and placing them in the proper positions. The site areas will be: header (at the top), menu (on the left), main content (on the right), and footer (at the bottom). So before you add the AJAX panels, you first need to design the CSS layout for the site.
Designing a CSS layout means working with divs, and not with tables. Since the layout you will create is a very simple one, you will describe its properties inline, right in the index page, and not in a separate .css file.
You want the site content to be horizontally centered in the browser and to have a width of 800 pixels. Between the site header and footer, the menu with the photo album names will be displayed on the left (fitting in a 185-pixel width), and the corresponding photo galleries will be displayed on the right. To create this, you will need five div containers in your page:
The wrapper div includes the other four: 800-pixel width, auto margin (to be horizontally centered).
The header div is displayed on top of the page, spreading throughout the maximum width (800 pixels).
The menu div is displayed below the header: 185-pixel width, floating on the left. Preserve a 15-pixel margin above and to the right so that panels will be nicely spaced.
The content div shows next to the menu: 600-pixel width, 15-pixel margin above and below, and floating on the left as well (so that no matter how wide the content is, it will always be aligned to the left).
The footer div is displayed below the menu and content divs: clear both sides.
Note: To make sure the site footer does not come too close to the header, set a specific height for the content div located between the header and the footer - say 500 pixels.
Open the index page, switch to Code view and enter the following code between the <body> opening and closing tags:
<div style="width: 800px; margin: auto;">
<div>Header panel</div>
<div style="width: 185px; margin: 15px 15px 0 0; float: left;">Menu panel</div>
<div style="width: 600px; height: 500px; margin: 15px 0; float: left;">Content panel</div>
<div style="clear: both;">Footer panel</div>
</div>
Switching back to Design view, this is how the index page should look:
Note: Check out this article section if you want to learn how to visually build a very similar CSS layout.
Save the index page and upload it to the server. Do not close it as you will continue to work on it.
After creating the simple CSS layout, it is time to add the AJAX panels in their respective divs. Move on to the next topic to create the site header, menu, and footer.