| |
| |
This AJAX-based site is not created by using the New AJAX Site wizard, but by adding the AJAX panels one by one in page and placing them in the right position. The site areas will be: header (at the top), menu (on the left), main content (in the middle), nuggets (on the right), footer (at the bottom). So before adding the AJAX panels, design the CSS layout for your site.
Designing a CSS layout means working with divs, and not with tables. Since the layout you will create is a 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, there will be three columns: the menu on the left (fitting in a 128-pixel width), the main content in the middle (fitting in a 438-pixel width), and the nuggets area on the right (fitting in a 178-pixel width). To create this, you will need six 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): around-padding of 5 pixels, bottom border.
The menu div is displayed below the header: right and left padding of 5 pixels, 128-pixel width, top margin of 15 pixels, left border, floating on the left.
The content div shows next to the menu: right and left padding of 5 pixels, 438-pixel width, around-margin of 15 pixels, left border, floating on the left.
The nuggets div shows next to the main content: 178-pixel width, top and bottom margin of 15 pixels, left border, floating on the left. No left/right padding is needed for this div as it will contain two AJAX controls (no text or images) - a collapsible region and an accordion.
The footer div is displayed below the menu, content, and nuggets divs: around-padding of 5 pixels, top border, 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 and nuggets divs (same height in order to provide a nice appearance), located between the header and the footer - say 550 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 style="padding: 5px; border-bottom: 2px solid orange;">Header panel</div>
<div style="padding: 0 5px; width: 128px; margin-top: 15px; border-left: 2px solid orange; float: left;">Menu panel</div>
<div style="padding: 0 5px; width: 438px; height: 550px; margin: 15px; border-left: 2px solid orange; float: left;">Content panel</div>
<div style="width: 178px; height: 550px; margin: 15px 0; border-left: 2px solid orange; float: left;">Nuggets panel</div>
<div style="padding: 5px; border-top: 2px solid orange; clear: both;">Footer panel</div>
</div>
Note: To have a perfect design regarding the horizontal space taken by the three columns, make sure their width (128+438+178), left/right margin (0+2*15+0), left/right padding (2*5+2*5+0), and left/right border thickness (2+2+2) equal the width of the container (800) when summed up.
Switching back to Design view, this is how the index page should look:
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 five panels needed in your site.