Guia do Usuário Cancelar

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

Pesquisar

Última atualização em 13 de fev de 2023

Saiba a estrutura básica de um layout CSS e como criar páginas e conteúdo usando CSS no Dreamweaver.

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 passar para esta seção, você deve estar familiarizado com os conceitos básicos de CSS.

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. O exemplo a seguir mostra uma página HTML que contém três tags div separadas: uma tag de “contêiner” grande e duas outras tags, uma tag de barra lateral e uma tag de conteúdo principal, dentro da tag de contêiner.

A. Div de contêiner B. Div de barra lateral C. Div de conteúdo principal

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

<!--container div tag--> 
<div id="container"> 
<!--sidebar div tag--> 
    <div id="sidebar"> 
    <h3>Sidebar Content</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> Main Content </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>H2 level heading </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á nenhum “estilo” anexado a nenhuma das tags div. Sem as regras de CSS definidas, cada tag div e seu respectivo conteúdo ficam em uma local padrão da página. No entanto, se cada tag div tiver uma ID exclusiva (como no exemplo anterior), você poderá usar suas IDs para criar regras de CSS que, quando aplicadas, alteram o estilo e posicionamento das tags div.

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

#container { 
    width: 780px; 
    background: #FFFFFF; 
    margin: 0 auto; 
    border: 1px solid #000000; 
    text-align: left; 
}

A regra #container dita que a tag div de contêiner deve ter uma largura de 780 pixels, um fundo branco, nenhuma margem (no lado esquerdo da página), uma borda sólida preta de 1 pixel e o texto alinhado à esquerda. Os resultados da aplicação da regra à tag div de contêiner são os seguintes:

A. Texto alinhado à esquerda B. Fundo branco C. Borda sólida preta de 1 pixel

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 dita que a tag div de barra lateral tem uma largura de 200 pixels, um fundo cinza, um preenchimento superior e inferior de 15 pixels, um preenchimento à direita de 10 pixels e um preenchimento à esquerda 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 de barra lateral com float: left — uma propriedade que coloca a tag div de barra lateral no lado esquerdo da tag div de contêiner. Estes são os resultados da aplicação da regra à tag div de barra lateral:

Div de barra lateral, flutuação à esquerda

A. Largura de 200 pixels B. Preenchimento superior e inferior, 15 pixels

Por fim, a regra de CSS da tag div de contêiner principal finaliza o layout:

#mainContent { 
    margin: 0 0 0 250px; 
    padding: 0 20px 20px 20px; 
}

A regra #mainContent dita que a div de conteúdo principal terá uma margem esquerda de 250 pixels; isso significa que ela colocará 250 pixels de espaço entre o lado esquerdo da div de contêiner e o lado esquerdo da div de conteúdo principal. Além disso, a regra fornece 20 pixels de espaçamento nos lados direito, inferior e esquerdo da div de conteúdo principal. Estes são os resultados da aplicação da regra à div mainContent:

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

Div de conteúdo principal, margem esquerda de 250 pixels

A. Preenchimento esquerdo de 20 pixels B. Preenchimento direito de 20 pixels C. Preenchimento inferior de 20 pixels

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
#container { 
    width: 780px; 
    background: #FFFFFF; 
    margin: 0 auto; 
    border: 1px solid #000000; 
    text-align: left; 
} 
#sidebar { 
    float: left; 
    width: 200px; 
    background: #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>Sidebar Content</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> Main Content </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>H2 level heading </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>

Observação:

o código de exemplo acima é uma versão simplificada do código que cria o layout de barra lateral fixa de duas colunas quando você cria um novo documento usando os layouts predefinidos que acompanham o Dreamweaver.

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

Selecione Arquivo > Novo.
Na caixa de diálogo Novo documento, selecione a categoria Página em branco. (Essa é a seleção padrão.)
Em Tipo de página, selecione o tipo de página que você deseja criar.

Observação:

você deve selecionar um tipo de página em HTML para o layout. Por exemplo, você pode selecionar HTML, ColdFusion®, PHP etc. Não é possível criar uma página ActionScript™, CSS, Item de biblioteca, JavaScript, XML, XSLT ou Componente do ColdFusion com um layout de CSS. Além disso, os tipos de página da categoria Outros da caixa de diálogo Novo documento apresentam restrição na inclusão de layouts de página CSS.
Em Layout, selecione o layout de CSS que deseja usar. Você pode escolher entre 16 layouts diferentes. A janela Visualizar mostra o layout e fornece uma breve descrição do layout selecionado.

Os layouts de CSS previamente criados fornecem os seguintes tipos de coluna:

Fixa

A largura da coluna é especificada em pixels. A coluna não é redimensionada com base no tamanho do navegador ou nas configurações de texto do visitante do site.

Líquida

A largura da coluna é especificada como uma porcentagem da largura do navegador do visitante. O design se adapta caso o visitante do site torne o navegador mais largo ou mais estreito, mas não se altera com base nas configurações de texto do visitante do site.
Selecione um tipo de documento no menu pop-up TipoDoc.
Selecione um local para a CSS do layout em Layout de CSS no menu pop-up.

Adicionar a cabeçalho

Adiciona CSS do layout ao cabeçalho da página que você está criando.

Criar novo arquivo

Adiciona a CSS do layout à nova folha de estilos CSS externa e anexa a nova folha de estilos à página que você está criando.

Vincular a arquivo existente

Permite a você especificar um arquivo CSS existente que já contém as regras de CSS necessárias ao layout. Essa opção é especialmente útil quando você deseja usar o mesmo layout de CSS (as regras de CSS contidas em um único arquivo) em vários documentos.
Siga um destes procedimentos:
- Se você selecionou Adicionar a cabeçalho em Layout de CSS no menu pop-up (a opção padrão), clique em Criar.
- Se você selecionar Criar novo arquivo no menu pop-up Layout de CSS, clique em Criar e especifique um nome para o novo arquivo externo na caixa de diálogo Salvar arquivo de folha de estilos como.
- Se você selecionou Vincular a arquivo existente em Layout de CSS no menu pop-up, adicione o arquivo externo à caixa de texto Anexar arquivo CSS, clicando no ícone Adicionar folha de estilos, preenchendo a caixa de diálogo Anexar folha de estilos externa e clicando em OK. Quando terminar, clique em Criar na caixa de diálogo Novo documento.
Observação:

quando você selecionar a opção Vincular a arquivo existente, o arquivo especificado já deverá ter regras para o arquivo CSS nele contido.

Quando você aplicar o layout de CSS em um novo arquivo ou vincular a um arquivo existente, o Dreamweaver automaticamente vincula o arquivo à página em HTML que você está criando.

Observação:

os comentários condicionais do Internet Explorer, que ajudam a resolver os problemas de processamento do IE, permanecem incorporados no cabeçalho do novo documento do layout de CSS, mesmo se você selecionar Novo arquivo externo ou Arquivo externo existente como local do layout de CSS.
(Opcional) Você também pode anexar as folhas de estilos CSS à nova página (não relacionada ao layout de CSS) ao criar a página. Para fazer isso, clique no ícone Anexar folha de estilos acima do painel Anexar arquivo CSS e selecione uma folha de estilos CSS.

Para obter uma descrição detalhada desse processo, consulte o artigo Anexar automaticamente uma folha de estilos a novos documentos de David Powers.

Adição dos layouts de CSS personalizados à lista de opções

Crie uma página HTML que contém o layout CSS que você gostaria de adicionar à lista de opções na caixa de diálogo Novo documento. A CSS do layout deve residir no cabeçalho da página HTML.

Observação:

para tornar seu layout de CSS personalizado consistente com outros layouts que acompanham o Dreamweaver, você deverá salvar seu arquivo em HTML com a extensão .htm.
Adicione a página HTML à pasta Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts.
(Opcional) Adicione uma imagem de visualização do layout (por exemplo, um arquivo .gif ou .png) à pasta Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts. As imagens padrão fornecidas com o Dreamweaver são arquivos PNG de 227 pixels de largura x 193 pixels de altura.

Observação:

atribua à imagem de visualização o mesmo nome do arquivo HTML, a fim de que você possa controlá-la facilmente. Por exemplo, se o arquivo HTML for myCustomLayout.htm, atribua o nome myCustomLayout.png à imagem de visualização.
(Opcional) Crie um arquivo de anotações para o layout personalizado, abrindo a pasta Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts\_notes, copiando e colando qualquer arquivo de anotação existente na mesma pasta e renomeando a cópia do layout personalizado. Por exemplo, você pode copiar o arquivo oneColElsCtr.htm.mno e renomeá-lo como myCustomLayout.htm.mno.
(Opcional) Após criar um arquivo de anotações para o layout personalizado, você poderá abrir o arquivo e especificar o nome, a descrição e a imagem de visualização do layout.

Receba ajuda com mais rapidez e facilidade

Novo usuário?

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

Sobre o layout da página CSS

Sobre a estrutura do layout da página CSS

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

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

Adição dos layouts de CSS personalizados à lista de opções

Artigos relacionados

Receba ajuda com mais rapidez e facilidade

Pergunte à comunidade

Fale conosco