Montar uma página com CSS

Vamos realizar um exercício de projeção de uma página web utilizando unicamente folhas de estilo em cascata (CSS), separando completamente o conteúdo do arquivo HTML das definições do aspecto, que serão salvadas em um arquivo .css. Realizaremos o exercício passo a passo, partindo de uma imagem desenhada previamente com um programa de edição gráfica como Photoshop.

Referência: Temos um manual para aprender CSS em CriarWeb.com, onde aliás se explica as primeiras noções e conceitos que existem para conhecer sobre a construção.

Imagens de partida

Podemos ver a imagem que criamos e que vamos tentar construir o mais parecido possível. Não é o objetivo deste manual oferecer as técnicas para realizar esta imagem, embora em outros manuais de CriarWeb.com podemos ver tutoriais para aprender alguns dos truques de desenho utilizados.

Trata-se de um desenho simples, porém, onde se encontram elementos distintos e variados com os quais trabalhar.

Desta imagem extraíamos alguns gráficos, que utilizaremos na hora de construir o desenho. Seria interessante baixa-lo para poder realizar o exercício por sua conta.

Para os impacientes, temos um link à página do resultado que vamos conseguir realizar no final do artigo. Pode ser bom vê-la para ter uma idéia da onde queremos chegar.

Desenvolvimento da página e a folha de estilos

Vamos gerar os arquivos HTML e CSS de uma vez, mas passo a passo, de forma que possamos explicar as etiquetas e estilos que utilizamos para cada parte da página.

Como primeiro passo, no cabeçalho <head> do documento HTML, linkaremos com uma folha de estilos externa.

<head>
<title>A web do inverno</title>
<link rel="STYLESHEET" type="text/css" href="estilo.css">
</head>

O corpo da página <body>

Na declaração de estilos CSS, para o corpo da página, definimos uma imagem de fundo "fundo.gif", que se repetirá por toda a página em um mosaico. Também se definem as margens e o alinhamento do texto, neste caso centrado, para que o conteúdo da página apareça no centro (isto é necessário para Internet Explorer, o centrado em Mozilla e em outros navegadores se realiza na camada principal com o atributo "margin" definido como "auto").

Ademais, definem-se outros atributos para o corpo da página, que logo herdarão outros elementos, como o tipo de letra ou a cor do texto.

BODY {
background : #C0D9D9 url(images/fundo.gif) repeat;
font : 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
color : #666666;
margin : 20px 0px 20px 0px;
text-align: center;
}

A camada conteúdo

Geralmente, utiliza-se uma camada principal, a qual chamamos conteúdo. Dentro desta camada se colocam todos os elementos que a página vai ter.

<div id="conteudo">

</div>

Nesta camada definimos o alinhamento do texto à esquerda (porque no corpo havíamos centralizado o texto, para que Internet Explorer centralize a camada conteúdo e desejamos que o alinhamento padrão seja à esquerda). Também definimos uma largura de 700px, uma cor de fundo branco e a margem, com o atributo "margin", o definimos como "auto", para que Mozilla e outros navegadores centralizem a camada.

#conteudo{
text-align: left;
width: 700px;
background-color : #ffffff;
margin: auto;
}

Aliás, deixamos deliberadamente a borda da camada, que havíamos definido no desenho original. Poderíamos ter definido o atributo "border", mas isso nos repercute negativamente na montagem em Explorer. Veremos mais adiante como colocá-lo para que seja visto corretamente em todos os navegadores.

Este exercício será visto em vários passos. No bloco seguinte mostraremos como se monta o cabeçalho e a barra de navegação.