Navigation
Using Dreamweaver's Pre-designed CSS Layouts
Creating CSS layouts from scratch can be tricky, because there are so many ways to do it. You can create a simple two-column CSS layout by setting floats, margins, paddings, and other CSS properties in a nearly infinite number of combinations. It can be difficult to know exactly what CSS properties to set, and to make it even more complex, different browsers on different operating systems render CSS layouts differently, causing problems that can be difficult to fix.
Once you know the basics of CSS layout, it can be quicker and easier to use one of the 16 pre-designed layouts provided by Dreamweaver that work across different browsers.
Creating a Page with CSS Layout
To create a page with a premade CSS layout:
- Select File > New.
- Choose the Blank Page category (the default).
- Select HTML as the page type.
- Choose a layout. The pre-designed CSS layouts provide the following types of columns:
- Fixed Column width is specified in pixels. The column does not resize based on the size of the browser or the site visitor's text settings.
- Liquid Column width is specified as a percentage of the site visitor's browser width. The design adapts if the site visitor makes the browser wider or narrower, but does not change based on the site visitor's text settings
- Choose an option for layout CSS:
- Add to head: places the CSS in the head of the document.
- Create new file: creates a new external stylesheet. You will be prompted to save the new stylesheet.
- Link to Existing: allows you to link to an existing stylesheet..
- Click OK.
Once you've created a CSS layout page, you can replace the dummy content with your content, attach other style sheets and customise the layout.
Learn more by registering into the Dreamweaver Level 2, 2-day training course delivered by Alpha Computer Consultants www.alphacc.com.au.
