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 a two-column "ap-div.html" page. The layout should fully use multiple AP Divs to arrange text and images.
  5. Create a "table.html" page. The layout should partially use table elements to arrange tabular data.
  6. Create a PSD-to-CSS layout in Adobe Photoshop, and generate a css-based "psd-css.html" page. You may edit the page code to adjust the HTML layout in Dreamweaver. (optional)

There are a total of five pages in the layout section: one main layout page and four sub-pages.

Over the last ten years, developers have changed web design from table-based website structures to div-based structures.

The div tag is a block level element used for grouping HTML elements. Div-based structures have a much steeper learning curve than table-based structures. The developer must know CSS and understand the difference between block-level elements and inline elements, when to use floats and when to use absolute positioning and how to solve browser bugs.

Although we can achieve pretty nice layouts with HTML tables, tables weren't really designed as a layout tool. Tables are more suited to presenting tabular data.


"The biggest problem with div tags is that they are used too often. Divs should only be used to build structure and as placeholders for design elements when no other block-level elements can describe the content. The div tag is for logical groupings of elements.

Too many div tags is code smell that content isn’t being described as it should. It means divs are being used when semantic block-level tags would better describe the content, and less divs with floats helps keep browser bugs away."
- Geir Wavik