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.
Selecting a page layout
- Open Dreamweaver
- Make sure you are working in your defined site.
- Open index.html
- Copy the code out of this document (In IE you'll have to view source).
- Paste this code between the body tags replacing anything that is in between those tags.
- View the layout template here.
- Right-click the link as the bottom of the layout example page (Download the CSS for this layout ») and "save link as"
- Save the file in the tyle directory as screen.css
- Save and close the screen.css file.
Attaching the Style Sheet to your Homepage
- Open your index.html file from the files panel.
- 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)
- In the Attach External Style sheet dialog, Browse to the screen.css file in the style folder.
- Check Add as Import
- Click OK
- Save the index.html file
Further Reading
