Thomas Wallace: Lectures and Resources - A collection of website design lectures and resources

Selecting and Applying a Layout

Now that we have created a foundation for our site by creating named blocks of code, we can begin shaping the visual look of our pages. When selecting a layout try to think about how much content you will have on a given page. This should help determine the type of layout you select. There are two types of templates you can choose from, Liquid or Fixed Width.

  • Liquid Layouts - Stretch to fit the screen
    Pros: Do not waste screen real estate; can present large amounts of copy with less vertical scrolling.
    Cons: Less control of presentation; makes smaller blocks of content look insignificant.
  • Fixed Width - Sets the width of the page content to a fixed width.
    Pros: Much tighter control of presentation from machine to machine; Can improve readability
    Cons: Large amounts of content require more vertical scrolling.

The colors used in the template documents are not final. They are simply to show how the different code blocks are laid out.

UPDATE: If you would like to have dummy text to fill out your layout copy the code out of this document and replace the code in between the <body> tags in your index.html file.

Selecting a page layout

  1. Open Dreamweaver
  2. In the File menu select File > New
  3. Create a new CSS Document

CSS Dialog

  1. Save the document as screen.css in the style folder inside your assets folder
  2. After you have saved the style sheet, go to the gallery page and select a layout.
  3. Once you have selected a layout, follow the link as the bottom of the layout example page (Download the CSS for this layout »)
  4. Using the File > Save File As option, overwrite the screen.css file we just created with the CSS file you selected from the gallery.
  5. Save and close the screen.css file.

Attaching the Style Sheet to your Homepage

  1. Open your index.html file from the files panel.
  2. On the CSS Panel, click on attach new style sheet button from the bottom right corner of the panel (it looks like a chain link)

CSS Window

  1. In the Attach External Style sheet dialog, Browse to the screen.css file in the style folder.
  2. Check Add as Import
  3. Click OK

Attach CSS

  1. Save the index.html file

Further Reading

What I'm Reading

RSS Feed IconView More


  • 1.24.2012
    Structure, Content, Design, Behavior
My Calendar