Examine The Design Comp - MACROMEDIA DREAMWEAVER 8-GETTING STARTED WITH DREAMWEAVER Getting Started

Table of Contents

Advertisement

154 Tutorial: Creating a CSS-based Page Layout
A CSS-based layout—that is, a layout that uses block elements instead of
table rows and columns—contains much less code than a table-based
layout of the same nature. CSS-based layouts generally use
instead of
tags to create CSS layout blocks used for layout. You
<table>
can position these CSS layout blocks anywhere on the page, and assign
properties to them such as borders, margins, background colors, and so on.
Additionally, people using screen readers to view web pages have a much
easier time browsing pages built with CSS because the code is simpler and
shorter.
Dreamweaver lets you create layers. A Dreamweaver layer is an HTML
page element that you can position anywhere on your page. More
specifically, it is a
<div>
You use Dreamweaver to drag layers on your page and then position the
layers where you want them. The layers act as content blocks that hold
assets like images, Flash files, text, and so on.
Dreamweaver layers are absolutely positioned elements. That is, they have
a specific position that is set relative to the top and left margins of the page.
You cannot create a CSS-based layout with layers and then center the
contents of the page. Thus, the layout in this tutorial is slightly different
than the one you created in
Page
Layout".
For more information about Dreamweaver layers, see Chapter 7, "Laying
Out Pages with CSS" in Using Dreamweaver.

Examine the design comp

If you already completed
Page Layout"
and examined the design comp, you can proceed to the
next section to immediately begin creating your CSS-based layout.
Typically, you don't begin building a website by opening Dreamweaver and
laying out pages right away. The first steps to creating a website begin on a
piece of paper, or in a graphics-editing application like Macromedia
Fireworks. Graphic designers usually sketch out a piece of comprehensive
artwork (also known as a "comp") for the website in order to show it to the
client and make sure that the initial ideas for the site meet with their
client's approval.
tag (or any other tag) with an absolute position.
Chapter 4, "Tutorial: Creating a Table-based
Chapter 4, "Tutorial: Creating a Table-based
tags
<div>

Hide quick links:

Advertisement

Table of Contents
loading
Need help?

Need help?

Do you have a question about the DREAMWEAVER 8-GETTING STARTED WITH DREAMWEAVER and is the answer not in the manual?

This manual is also suitable for:

Dreamweaver 8

Table of Contents