Vimos numa série de artigos anteriores um exemplo de como montar uma página utilizando unicamente CSS para posicionar seus distintos elementos. Uma das principais vantagens de CSS é que se mudar o aspecto de uma página radicalmente, sem a necessidade de mudar seu código HTML. Por isso, nos pareceu interessante continuar aprofundando na construção de páginas web com CSS, oferecendo uma nova proposta de desenho para o mesmo arquivo HTML que havíamos utilizado anteriormente.

Para começar, podemos dar uma olhada no desenho que criamos, utilizando um programa de edição gráfica tipo Photoshop ou Fireworks. Vamos trabalhar sobre esta imagem, para que o desenho resultante seja o mais parecido possível.

Também oferecemos para fazer um download um arquivo comprimido com todas as imagens que vamos utilizar neste desenho. Será interessante tê-lo a mão para tratar de fazer por nós mesmos o exemplo.

O mesmo código HTML

Insistimos na idéia de que vamos utilizar o mesmo código HTML que construímos ao fazer o exemplo do artigo de construção CSS, visto que as folhas de estilo em cascada nos proporcionam ferramentas para alterar o aspecto da página sem editar sequer o arquivo HTML.

A construção anterior já foi feita pensando em que iríamos utilizar para propor mais de um desenho, por isso foi acrescentada alguma etiqueta, classe ou identificador adicional para facilitar este passo.

Embora, durante a criação deste segundo exemplo estivemos tentados de editar o código HTML, só mudamos um aspecto que vamos assinalar a seguir.

Trata-se da imagem do cabeçalho. Se observarmos no arquivo HTML anterior, comprovaremos que a imagem está incluída por meio de uma etiqueta <img>. Ao definir a rota da imagem e seus valores de largura e de altura por meio dos atributos de <img>, não podemos mudar esses dados com a folha de estilos. Como desejamos mudar a imagem em distintos desenhos, ao invés de colocar a imagem com a etiqueta diretamente no código HTML, vamos utilizar um truque que aprendemos em CSSZenGarden, que se baseia em incluir um titular de texto, que logo vamos substitui-lo pela imagem que desejarmos. Por sua vez, há que dizer que este truque é original de Douglas Bowman http://www.stopdesign.com/articles/css/replace-text/.

Antes, havíamos definido o seguinte pedaço de código para situar a imagem do cabeçalho:

<div id="cabecalho"><img src="images/cabecalho.jpg" width="700" height="106" alt="A Web do Inverno" border="0"></div>

Agora, o código do cabeçalho será o seguinte:

<div id="cabecera">
   <h1><span>A Primavera</span></h1>
</div>

Simplesmente definimos um titular, que logo não aparecerá na página, porque o ocultaremos por meio do atributo visibility de CSS. Em seu lugar, definiremos um fundo para a camada "cabeçalho" e atribuiremos seus atributos por meio de folhas de estilo.

Assim ficarão os estilos para o elemento cabeçalho <h1>:

#cabecera{
    background: transparent url(images/cabecalho.jpg) no-repeat;
    height: 288px;
    width: 549px;
}

#cabecalho h1 {
    margin: 0px 0px 0px 0px;
}
#cabecalho h1 span {
    display:none;
}

O novo código CSS

À parte do comentado para o cabeçalho, o código CSS criado para aplicar os estilos não aporta muita novidade do que vimos até o momento.

Basicamente foram utilizadas novas imagens para os fundos e variamos os tamanhos e margens das camadas. Além disso, na parte central ou no corpo da página, os elementos foram alinhados de maneira distinta, ficando os quadrados do buscador e links a outras seções à esquerda e o texto da página à direita.

Também, pode-se observar como foram utilizadas algumas imagens para decorar o fundo dos títulos das caixas da esquerda. Também foi colocada uma imagem no fundo onde está o texto da página. Esta imagem está muito suave para permitir ler o texto com comodidade.

Vamos deixar de lado, talvez para próximos artigos, a explicação detalhada da declaração de estilos utilizada. Ao invés disso, colocamos os links para o arquivo HTML e o CSS.

Página com o resultado final do exercício.

Declaração de folhas de estilo utilizada.