Sobre usar o CSS para criar o layout da página

Sobre o layout da página CSS

Um layout de página CSS usa o formato de folhas de estilos em cascata, em vez dos quadros e tabelas HTML tradicionais, para organizar o conteúdo em uma página da Web. O bloco de criação básico do layout de CSS é a tag div, uma tag HTML que, na maioria dos casos, atua como um contêiner de texto, imagens e outros elementos de página. Quando você cria um layout de CSS, coloque tags div na página, adicione conteúdo a elas e posicione-as em vários lugares. Diferente das células de tabela, que são restritas a algum lugar dentro das linhas e colunas de uma tabela, as tags div podem aparecer em qualquer lugar de uma página da Web. É possível posicionar tags div de forma absoluta (especificando coordenadas x e y) ou relativa (especificando o seu local em relação ao seu local atual). Você também pode posicionar as tags div especificando flutuações, preenchimentos e margens, o método preferido pelos padrões da Web de hoje.

Sobre a estrutura do layout da página CSS

Antes de prosseguir com esta seção, você deve estar familiarizado com conceitos básicos de CSS.

O bloco de construção básico do layout CSS é a tag div—uma tag HTML que na maioria dos casos atua como um contêiner para texto, imagens e outros elementos da página.O exemplo a seguir mostra uma página HTML que contém três tags div separadas: uma tag "contêiner" grande e duas outras tags—uma tag de barra lateral e uma tag de conteúdo principal—dentro da tag contêiner.

Este é o código das três tags div do HTML:

<!--tag div contêiner-->

<div id="container">

<!--tag div da barra lateral-->

<div id="sidebar">

<h3>Conteúdo da barra lateral</h3>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p>

      </div> 

<!--tag div mainContent-->

<div id="mainContent">

<h1> Conteúdo principal </h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Praesent aliquam, justo convallis luctus rutrum.</p>

<p>Phasellus tristique purus a augue condimentum adipiscing.Aenean sagittis.Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>

<h2>Título de nível H2 </h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p>

    </div> 

</div>

No exemplo acima, não há "estilo" anexado a nenhuma das tags div.Sem regras CSS definidas, cada tag div e seu conteúdo ficam em um local padrão na página.No entanto, se cada tag div tiver um id único (como no exemplo acima), você pode usar os ids para criar regras CSS que, quando aplicadas, alteram o estilo e posicionamento das tags div.

A seguinte regra CSS, que pode residir no cabeçalho do documento ou em um arquivo CSS externo, cria regras de estilo para a primeira, ou tag div "contêiner" na página:

#container {

width: 780px;

background: #FFFFFF;

margin: 0 auto;

border: 1px solid #000000;

text-align: left;

}

A regra #container define o estilo da tag div container para ter largura de 780 pixels, fundo branco, margem zero (do lado esquerdo da página), borda sólida, preta de 1 pixel e texto alinhado à esquerda. Os resultados da aplicação da regra à tag div container são os seguintes:

A próxima regra de CSS cria regras de estilo para a tag div de barra lateral:

#sidebar {

float: left;

width: 200px;

background: #EBEBEB;

padding: 15px 10px 15px 20px;

}

A regra #sidebar define o estilo da tag div sidebar para ter largura de 200 pixels, fundo cinza, preenchimento superior e inferior de 15 pixels, preenchimento direito de 10 pixels e preenchimento esquerdo de 20 pixels. (A ordem padrão de preenchimento é da parte superior direita para a parte inferior esquerda.) Além disso, a regra posiciona a tag div sidebar com float: left—uma propriedade que empurra a tag div sidebar para o lado esquerdo da tag div container. Os resultados da aplicação da regra à tag div sidebar são os seguintes:

Por último, a regra CSS para a tag div container principal finaliza o layout:

#mainContent {

margin: 0 0 0 250px;

padding: 0 20px 20px 20px;

}

A regra #mainContent define o estilo do conteúdo principal div com margem esquerda de 250 pixels, ou seja, coloca 250 pixels de espaço entre o lado esquerdo da div container e o lado esquerdo da div de conteúdo principal. Além disso, a regra fornece 20 pixels de espaçamento nas laterais direita, inferior e esquerda da div de conteúdo principal. Os resultados da aplicação da regra à div mainContent são os seguintes:

Esta será a aparência do código completo:

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Documento sem título</title>

<style type="text/css">

#container {

width: 780px;

background: #FFFFFF;

margin: 0 auto;

borda: 1px solid #000000;

text-align: left;

} 

#sidebar {

float: left;

largura: 200px;

fundo: #EBEBEB;

padding: 15px 10px 15px 20px;

} 

#mainContent {

margin: 0 0 0 250px;

padding: 0 20px 20px 20px;

} 

</style>

</head>

<body>

<!--container div tag-->

<div id="container">

<!--sidebar div tag-->

<div id="sidebar">

<h3>Conteúdo da barra lateral</h3>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p>

      </div> 

<!--mainContent div tag-->

<div id="mainContent">

<h1> Conteúdo principal </h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum.</p>

<p>Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>

<h2>Título de Nível H2 </h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p>

    </div> 

</div> 

</body>

Criação de uma página com um layout de CSS

Ao criar uma nova página no Dreamweaver, você pode criar uma que já contenha um layout de CSS. O Dreamweaver vem acompanhado de 16 layouts de CSS diferentes qua você pode escolher. Além disso, é possível criar seus próprios layouts de CSS e adicioná-los à pasta de configuração, a fim de que eles apareçam como opções de layout na caixa de diálogo Novo documento.

Criação de uma página com um layout de CSS

Adicionar layouts CSS personalizados à lista de opções

Veja também

• Introdução às folhas de estilo em cascata
• Criar uma página em branco
• Definir o tipo e a codificação de documento padrão
• Vincular a uma folha de estilos CSS externa