Creating Fixed, Elastic, and Hybrid Layouts

Starting the fixed layout

  1. Using Windows Explorer, locate the liquid folder.
  2. Right-click the liquid folder, and then click Copy.
  3. Right-click in a blank area of your drive window, and then click Paste.
  4. Right-click the pasted folder, which is probably titled Copy of liquid, and then click Rename.
  5. Type fixed, and then press ENTER.
  6. Open the fixed folder, and delete the liquid.ste site defition file.
  7. Open Dreamweaver, and close any open files.
  8. Create a site definition for the fixed folder, export the definition into the fixed folder, and then make sure the site appears in the Files panel.

Creating a wrapper

  1. Open the index.html file.
  2. In the tag selector, click <body> to select the entire page content.
  3. On the Insert toolbar, click the Layout tab, and then click the Insert Div Tag button.
  4. In the Insert list, click Wrap around selection.
  5. In the ID box, type #wrapper.
  6. Press CTRL+S to save the page.

Styling the fixed layout

  1. In the CSS panel, click the New CSS Rule button.
  2. Under Selector Type, click Advanced; and then in the Selector list, type #wrapper.
  3. Click OK.
  4. In the Box category, in the Width box, type 760px. (Use a value of 750px or 760px to limit the page width for screens that are set to 800×600 or larger.)
  5. Click OK.

Starting the elastic layout

  1. Using Windows Explorer, locate the fixed folder.
  2. Right-click the fixed folder, and then click Copy.
  3. Right-click in a blank area of your drive window, and then click Paste.
  4. Right-click the pasted folder, which is probably titled Copy of fixed, and then click Rename.
  5. Type elastic, and then press ENTER.
  6. Open the elastic folder, and delete the fixed.ste site defition file.
  7. Open Dreamweaver, and close any open files.
  8. Create a site definition for the elastic folder, export the definition into the elastic folder, and then make sure the site appears in the Files panel.

Styling the elastic layout

  1. In the CSS panel, double-click the #wrapper rule to edit it.
  2. In the Box category, under Margin, clear the Same for all check box.
  3. Under Margin, in the Left list, click Auto.
  4. Under Margin, in the Right list, click Auto.
  5. Click OK.

Starting the hybrid layout

  1. Using Windows Explorer, locate the elastic folder.
  2. Right-click the elastic folder, and then click Copy.
  3. Right-click in a blank area of your drive window, and then click Paste.
  4. Right-click the pasted folder, which is probably titled Copy of elastic, and then click Rename.
  5. Type hybrid, and then press ENTER.
  6. Open the hybrid folder, and delete the elastic.ste site defition file.
  7. Open Dreamweaver, and close any open files.
  8. Create a site definition for the hybrid folder, export the definition into the hybrid folder, and then make sure the site appears in the Files panel.

Styling the hybrid layout

  1. In the CSS panel, right-click the #wrapper rule, and then click Delete.
  2. In the CSS panel, click the New CSS Rule button.
  3. Under Selector Type, click Advanced; and then in the Selector list, type #wrapper.
  4. Click OK.
  5. In the Box category, under Margin, clear the Same for all check box.
  6. Under Margin, in the Left box, type whatever value you desire. (In class: Type 10%.)
  7. Under Margin, in the Right box, type the same value you entered in the Left box in the previous step.
  8. Click OK.