Layout

The CSS layouts that come with Dreamweaver make CSS design easier. Dreamweaver includes several layouts, designed with two distinct approaches to CSS. When you create a new page with one of these layouts the first thing you must do is decide which type you want to use.

Essentially you have two options: Fluid Layouts, which are designed to expand and contract depending on the size of the browser window, or Fixed Layouts, which are centered within the browser and have a set width.

Although there are some advantages to the flexibility of fluid layouts, you will have more design control with fixed layouts. If you’re new to CSS and web design, fixed layouts are also easier to work with so they are a good place to start.

Starting with a CSS layout gives you a great head start when creating new designs in Dreamweaver. Dreamweaver CS6 includes new collections of CSS layouts which you can customize to create a variety of web page designs. These layouts are designed to work well in a variety of web browsers, so they can help you avoid common problems caused by the different ways web browsers display CSS.

Requirement :

  1. Create a two-column "layout.html" page
  2. Create a two-column "fixed.html" for a fixed layout page
  3. Create a two-column "fluid.html" for a fluid layout page to display content in containers that have widths set to percentages, which react proportionately to changes in screen sizes.
  4. Create an "ap-div.html" page - This page layout should fully use multiple AP Divs to arrange text and images.

  • There are totally five pages in the layout section: one main layout page and four sub-pages.