How To Use

This page explains how to get started with Perfect Layout.

Perfect Layout Package

• index.html - The template for a Perfect Layout page.
• Legal.txt - Legal information.
• resources - Folder.
  • css - Folder.
    • constructors.css - Styles for structural construtions like forms, image galleries, and columns.
    • dropdown.css - Turns on dropdown menus in navigation if included (optional).
    • handheld.css - Styles for handheld browsers.
    • ie6Hacks.css - Hacks specifically for IE 6.
    • ie7Hacks.css - Hacks specifically for IE 7.
    • layout.css - Styles that make up the underlying layout of pages.
    • print.css - Styles for printing.
    • styles.css - Text and other XHTML element styling.
  • images - Folder.
    • arrow.gif - The arrow that appears under navigation menu items that have a sub-menu.
    • blueSquares.png - One of the background images for custom corners box.
    • bottomLeft.png - White bottom left corner for custom corners box.
    • bottomRight.png - White bottom right corner for custom corners box.
    • highLines.png - Used as the background for the navigation column and one of the custom corner boxes.
    • navBackground.jpg - The white and grey striped background used for the faux column background for the navigation and content columns.
    • perfectLayoutSTB.png - The Perfect Layout steal this button button.
    • topLeft.png - White top left corner for custom corners box.
    • topRight.png - White top right corner for custom corners box.
  • javascript - Folder.
    • hover.js - Allows IE 6 to do dropdown menus.
    • reflection.js - Allows images to have a glass floor reflection effect.
    • scriptaculous - Folder.
      • builder.js - One of the scriptaculous scripts.
      • controls.js - One of the scriptaculous scripts.
      • dragdrop.js - One of the scriptaculous scripts.
      • effects.js - One of the scriptaculous scripts.
      • prototype.js - Javascript Prototype library.
      • scriptaculous.js - One of the scriptaculous scripts.
      • slider.js - One of the scriptaculous scripts.

Getting Started

Download the latest version of Perfect Layout and copy the files into a new folder. From here, tweak the css files to create your own unique design. Create new HTML pages and add content to them. Make sure to read over the legal information.