Criando layouts CSS a partir do zero: 1 coluna

novembro 30, 2009 | Arquivado em: CSS | Escrito por: CarlosHPS Webdesigner

Apresentação

Olá, pessoal

Atendendo a diversos pedidos, vou iniciar uma nova série denominada “Criando layouts CSS a partir do zero“, onde criaremos 4 layouts de uma, duas, três e quatro colunas.

Vejam bem, esta série está sendo criada para aqueles que já conhecem o CSS e HTML (pelo menos o básico) e suas aplicações. Então, conceitos simplórios não serão abordados aqui e nem respondidos em comentários, ok?!

Pré-Requisitos

Conhecimento básico do CSS e suas aplicações;
Conhecimento básico de HTML e suas aplicações;
Saber manusear algum editor de texto, de páginas HTML ou CSS. Utilizaremos aqui o Notepad ++, mas nada impede de ser utilizado um bloco de notas, o Dreamweaver ou qualquer outro.

Objetivos

Criar um layout de uma coluna a partir de um design pronto utilizando [X]HTML e CSS.
Aplicar alguns conceitos básicos do CSS/[X]HTML, tais como: Cabeçalho (H1, H2, H3…), Parágrafo, Div, Class, Span.

Conteúdo

De início devemos ter respostas para algumas perguntas essenciais para a criação do layout CSS, tais como:

1 – Qual resolução definir? Utilizaremos aqui a mais comum 1024 x 768 px. Vejamos abaixo o resultado final do nosso layout:

Layout completo em CSS e XHTML com 1 coluna.

2 – Quais imagens utilizar? O ideal é que todas as imagens já estejam prontas. Neste caso, não veremos como criar o design do layout, mas apenas utilizar sua imagens já desenvolvidas e fatiadas.

Fundo do site

Sombra da página

Logotipo do site

3 – Qual paleta de cores seguir? É bom sempre definir uma paleta de cores para não termos o perigo de colocarmos cores que não se adequem ao layout. Como nosso design já está definido, abaixo temos a nossa paleta de cores.

: Paleta de Cores

4 – Qual navegador e versões atingir? Como a intenção aqui não é mostrar as (in)compatibilidades entre os navegadores, os códigos CSS serão desenvolvidos nas versões 3.5 do Fireworks e 8.0 do Internet Explorer.

5 – Já organizei minhas pastas? Pessoal, principalmente aos iniciantes, se não houver uma organização na criação dos arquivos e pastas, qualquer projeto vira uma bagunça, então, organizemo-nos.

: Organização dos arquivos e pastas

Com estas respostas, agora sim vamos iniciar nosso layout

1º Passo – Identificar as Principais Partes do Layout

Nossa primeira missão é identificar os principais elementos estruturais do layout para podermos saber como criar nossa página HTML.

O ideal é dividirmos o projeto em retângulos que servirão como blocos para o emprego das DIVs.

<div>

nada mais é que uma caixa retangular que posiciona elementos nela inserida utilizando o CSS.

Baseando-nos neste conceito, vejamos como ficou a divisão do layout:

Fig.01: Divisão do layout

Um detalhe importante é que devemos nomear estas áreas (DIV’s) de maneira semântica, ou seja, com nomenclatura similar à sua função, ao seu posicionamento no layout.

Como vimos, a divisão resultante foi em 5 partes:

#pagina: responsável por posicionar todas as outras DIV’s do site
#topo: acolherá o logotipo e a identificação do site
#painel: receberá uma mensagem com a chamada principal do site
#conteudo: conterá todo o conteúdo do site
#rodape: exibirá os dados de copyright - direitos autoriais

2º Passo – Criar a Marcação para as DIV’s

Com o Notpad++ (ou outro editor), criemos a seguinte marcação:
< !DOCTYPE html PUBLIC “-//W3C//Dtd XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/Dtd/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”pt-br” lang=”pt-br”>
<head>
<meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″ />
<title>CarlosHPS Webdesigner | Como Criar Layouts a Partir do Zero: 01 Coluna</title>
<link type=”text/css” rel=”stylesheet” href=”estilos.css” />
</head>
<body>
<div id=”pagina”>
<div id=”topo”>
</div><!– Fim da div TOPO–>
<div id=”painel”>
</div><!– Fim da div PAINEL–>
<div id=”conteudo”>
</div><!– Fim da div CONTEUDO–>
<div id=”rodape”>
</div><!– Fim da div RODAPE–>
</div><!– Fim da div PAGINA–>
</body>
</html>

3º Passo – Destacar os Blocos (DIV’s)

Para melhor visualizar a estrutura do nosso layout e, antes mesmo de inserirmos qualquer conteúdo, é importante que destaquemos todas as principais áreas do site, inserindo as formatações no códigos CSS para as DIV’s que já foram criadas na página HTML.

Observando a imagem abaixo, temos a real indicação de quais dimensões (altura e largura) que cada DIV terá no momento de inserirmos sua formatação no CSS:

Fig. 02: Dimensionamento das DIV's principais

E a nossa CSS ficará assim:
body {
margin:0; /*Zera todo o espaçamento EXTERNO entre as DIV’s*/
padding:0; /*Zera todo o espaçamento INTERNO das DIV’s*/
text-align: center; /*Centraliza o conteúdo IE 5.x*/
}
#pagina {
margin: 0 auto; /*Centralizará o conteúdo independente da resolução do monitor*/
text-align: left; /*Desfaz o alinhamento centralizado do body*/
width: 834px; /*Esta é a largura geral do site*/
}
#topo {
background-color: #F3D2E7; /*Cor de fundo temporária só pra visualizar a div no layout*/
height: 142px; /*Altura da DIV*/
}
#painel {
background-color: #B33083; /*Cor de fundo temporária só pra visualizar a div no layout*/
height: 130px; /*Altura da DIV*/
}
#conteudo {
background-color: #DA77B6; /*Cor de fundo temporária só pra visualizar a div no layout*/
height: 392px; /*Altura da DIV*/
}
#rodape {
background-color: #A32C78; /*Cor de fundo temporária só pra visualizar a div no layout*/
height: 40px; /*Altura da DIV*/
}

E como resultado, obteremos:

Fig. 03: Resultado da aplicação do CSS nas DIV's principais

Pronto, pessoal. Já centralizamos o site e definimos toda a sua estrutura. Agora é inserir o conteúdo e complementar o CSS.

4º Passo – Inserindo Backgrounds (imagens de fundo) no body e #pagina

Melhorando a estética do layout, vamos aplicar o fundo listrado no seleto body e a sombra na div #pagina.
body {
margin:0; /*Zera todo o espaçamento EXTERNO entre as DIV’s*/
padding:0; /*Zera todo o espaçamento INTERNO das DIV’s*/
text-align: center; /*Centraliza o conteúdo IE 5.x*/
background-image: url(imagens/bg_body.png); /*Imagem como background*/
}
#pagina {
background-color: transparent; /*Aplica transparência na sombra p/ aparecer a imagem do body*/
background-image: url(imagens/bg_sombra.png); /*Imagem como background*/
background-repeat: repeat-y; /*Repete a imagem no eixo Y*/
height: auto; /*Altura automática. Surge de acordo com o conteúdo inserido na página*/
margin: 0 auto; /*Centralizará o conteúdo independente da resolução do monitor*/
text-align: left; /*Desfaz o alinhamento centralizado do body*/
width: 834px; /*Esta é a largura geral do site*/
}
#topo {
height: 142px; /*Altura da DIV*/
}
#painel {
height: 130px; /*Altura da DIV*/
}
#conteudo {
height: 392px; /*Altura da DIV*/
}
#rodape {
height: 55px; /*Altura da DIV*/
}

Vejamos o resultado:

Fig. 04: Aplicação das imagens de background no BODY e #PAGINA.

5º Passo – Trabalhando com #topo

Para a div #topo teremos que trabalhar com 3 tags html:

img: para inserir o logotipo
H1 e H3: para trabalharmos o nome do site e seu endereço (url)
a: para aplicarmos um link no endereço

Sendo assim, nosso código html ficará da seguinte forma:
<div id=”topo”>
<img src=”imagens/logotipo.png” alt=”Site CSS com 1 Coluna” />
<div id=”texto-topo”>
<h1>CarlosHPS blog</h1>
<h3>
<a href=”http://www.carloshps.com.br/blog”>www.carloshps.com.br/blog</a>
</h3>
</div><!– Fim da div TEXTO-TOPO–>
</div><!– Fim da div TOPO–>

O resultado deverá ser este, sem a aplicação do CSS:

Fig. 05: Configuração HTML da div #TOPO

E, ao aplicarmos o CSS abaixo, obteremos o seguinte resultado:
/*********************************
TOPO
*********************************/
#topo {
height: 142px; /*Altura da DIV*/
}
/*————–
Texto do TOPO
—————*/
#texto-topo{
font-family: Georgia, Times, Arial; /*Tipografia*/
float:right;
margin-right: 34px;
text-align: right;
vertical-align: baseline;
}
/*————–
Logotipo
—————*/
.logo{
margin-left: 37px; /*Distância da margem esquerda da div #pagina*/
margin-top: 20px; /*Distância do topo da div #pagina*/
}
h1.titulo-site {
color: #83979E; /*Cor da fonte*/
font-size: 35px; /*Tamanho da fonte*/
}
h3.descricao-site a, a:visited{ /*Formata o link inserido entre a tag H3*/
color: #278CAC;
font-size: 18px;
}

Resultado:

Fig. 06: Formatação CSS para a div #topo

6º Passo – Trabalhando com o #painel

Esta div é a mais fácil de configurar. Necessitaremos apenas de algumas formatações básicas para cor e fonte.

Assim sendo, nosso código HTML ficará da seguinte maneira:

<div id=”painel”>
<h2>Esta série de tutoriais mencionará</h2>
<h1>Como Criar Layouts CSS a Partir do Zero.</h1>
</div><!– Fim da div PAINEL–>

E o CSS, assim:
/*********************************
PAINEL
*********************************/
#painel {
background-color: #E1F2F8; /*Cor de fundo*/
color: #EB008C; /*Cor da fonte*/
height: 130px; /*Altura da DIV*/
margin: 0 auto; /*posicionamento centralizado*/
padding: 20px; /*Espaçamento interno da div*/
width: 758px; /*largura da div diminuindo o espaçamento interno aplicado no padding*/
}
#painel h2{
font-size: 22px; /*Tamanho da fonte*/
}
#painel h1{
font-size: 40px; /*Tamanho da fonte*/
}

Resultado:

Fig. 07: Formatação da div #painel

7º Passo – Trabalhando com a div #conteudo

Complementando o layout, vamos trabalhar novamente com as tags de cabeçalho e de parágrafo. Vejamos o resultado na página HTML:
<div id=”conteudo”>
<h3>Layout com uma coluna – trabalhando com títulos e parágrafos</h3>
<h4>15 de novembro de 2009</h4>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto
odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait
nulla facilisi.
</p>
<p>
<img src=”imagens/logotipo.png” alt=”Site CSS com 1 Coluna” id=”img” />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto
odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait
nulla facilisi.
</p>
</div><!– Fim da div CONTEUDO–>

E o CSS:
/*********************************
CONTEUDO
*********************************/
#conteudo {
color: #7F7F7F; /*Cor da fonte*/
height: auto; /*Altura automática da DIV de acordo com a inserção de conteúdo*/
margin: 0 auto; /*posicionamento centralizado*/
padding: 10px 20px; /*Espaçamento interno da div*/
width: 758px; /*largura da div diminuindo o espaçamento interno aplicado no padding*/
}
#conteudo h3{
color: #278CAC; /*Cor da fonte*/
font-size: 22px; /*Tamanho da fonte*/
margin-bottom: -15px; /*Distância da linha-base do h3 ao próximo elemento, h4*/
}
#conteudo h4{
color: #278CAC; /*Cor da fonte*/
font-size: 16px; /*Tamanho da fonte*/
}
#conteudo p{
font-family: Arial, Verdana, Helvetica; /*Tipografia para os parágrafos*/
font-size: 13px; /*Tamanho da fonte*/
}
#conteudo #img{
float: right; /*o bloco da imagem flutua à direita*/
padding-left: 8px; /*espaçamento interno à esquerda*/
padding-right: 10px; /*espaçamento interno à direita*/
}

Resultando em:

Fig. 08: Formatação da div #conteudo

8º Passo – Finalizando com a div #rodape

E, finalmente, para concluirmos este tutorial, completaremos nosso layout de 1 coluna, criando e formatando o conteúdo do rodapé.
<div id=”rodape”>
<p>
Copyright © 2007/2009 – Todos os Direitos Reservados a CarlosHPS Webdesigner |
<a href=”http://www.carloshps.com.br”>www.carloshps.com.br</a>.
<br />
Você pode utilizar o conteúdo dos artigos contanto que mencione a fonte.
</p>
</div><!– Fim da div RODAPE–>

CSS:
/*********************************
RODAPE
*********************************/
#rodape {
background-color: #E1F2F8; /*Cor de fundo*/
color: #278CAC; /*Cor da fonte*/
font-family: Arial, Verdana, Helvetica; /*Tipografia para os parágrafos*/
font-size: 13px; /*Tamanho da fonte*/
height: 55px; /*Altura da DIV*/
margin: 20px auto; /*posicionamento centralizado*/
padding: 1px 20px; /*Espaçamento interno da div*/
text-align: right;
width: 758px; /*largura da div diminuindo o espaçamento interno aplicado no padding*/
}
#rodape a, a:visited{
color: #EB008C; /*Cor da fonte*/
font-size: 13px; /*Tamanho da fonte*/
}

Bom, pessoal

Terminamos aqui nosso primeiro tutorial da série de 4 layouts em CSS.

O arquivo-fonte encontra-se para download abaixo. Até a próxima.

DOWNLOAD DO ARQUIVO-FONTE

CarlosHPS Webdesigner

Escrito por CarlosHPS Webdesigner on novembro 30, 2009. Arquivado em CSS. Você pode seguir as respostas a esse artigo pelo RSS 2.0. Você pode deixar respostas para esse artigo