Criando Um Layout Com CSS a Partir Do Zero
25
Apostila CSS (Cascading Style Sheets) Folha de Estilo em Cascata Criando Layouts CSS a Partir do ZERO
-
Upload
paco-sobral -
Category
Documents
-
view
642 -
download
2
Transcript of Criando Um Layout Com CSS a Partir Do Zero
Apostila
CSS(Cascading Style Sheets)
Folha de Estilo em Cascata
Criando Layouts CSS a
Partir do ZERO
Criando um layout com CSS a partir do zero
Prefácio
Esta série de posts, intitulada “Criando um layout com CSS a partir do zero” é uma versão em
português da série “Creating a CSS layout from scratch”, de Steve Dennis, do site Subcide e
publicada sob permissão aqui no Café com Gelo. Espero que aqueles que ainda não entendem
corretamente como funcionam as CSS tenham uma boa noção com esse tutorial.
Divirtam-se!
ZehRique
1. Introdução
Nota: Este tutorial assume que você tem um conhecimento básico sobreCSS, mas somente se você
entende basicamente seu funcionamento. Se você NUNCA usou CSS antes, você pode iniciar com
a introdução a CSS da w3schools.
Este guia explicará a você, passo-a-passo, através da criação de um layout CSS totalmente
funcional. Vou tentar explicar da melhor forma os conceitos por trás de cada passo, mas muitas
vezes outras pessoas já cobriram esse assunto melhor do que eu. Por causa disso, haverá algumas
vezes, links para mais informações em sites externos.
Nota: Use um navegador de internet moderno como Opera, Firefox ouSafari para este exercício.
Não se assuste porém, seu site deverá funcionar no IE ao final da matéria.
2. O Design
Abaixo está o design que vamos usar como base nesse tutorial. Nossa missão é montar essa criança usando nada mais nada menos que XHTML, CSS, e algumas imagens:
Primeiro, temos que identificar os elementos estruturais do design, para então saber como estruturar nosso documento HTML.
A web é largamente baseada em retângulos, e nós precisamos lembrar disso quando estivermos dividindo nosso design. Essas divisões principais que nós vamos fazer vão terminar em tags <div>. Um <div> é basicamente um contêiner retangular o qual podemos posicioná-lo usando CSS.
O diagrama abaixo mostra como vamos dividir o design.
Nós identificamos 5 elementos principais:
* Main Navigation (área de navegação principal)A navegação primária para este website. As imagens vão mudar on hover (quando o cursor do
mouse estiver sobre elas).Comprimento: 760pxAltura: 50px
* Header (cabeçalho)
O cabeçalho do website inclui uma imagem de fundo (puramente por estética), e o nome da companhia.Comprimento: 760pxAltura: 150px
* Content (conteúdo)
O conteúdo principal do website vai aqui.Comprimento: 480pxAltura: Muda dependendo do conteúdo
* Sidebar (barra lateral)
Esta terá uma camada secundária que não é tão importante quanto o conteúdo principal.Comprimento: 280pxAltura: Muda dependendo do conteúdo
* Footer (rodapé)
Informações gerais: Copyright, créditos, e algum texto alternativo para navegação.Comprimento: 760pxAltura: 66px
Este site será também centralizado na janela do navegador. Agora nós temos toda a informação que precisamos para começar.
3. Modelo HTML padrãoEu criei um documento HTML básico que uso como ponto de início para todos os meus websites.
Copie o modelo e cole-o no seu editor HTML de preferência. (O meu é o Macromedia Homesite).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>CompanyName - PageName</title>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="Description" />
<meta name="keywords" content="Keywords" />
<meta name="author" content="Enlighten Designs" />
<style type="text/css" media="all">@import "css/master.css";</style>
</head>
<body>
</body>
</html>
Salve este código como index.html no diretório raiz (htdocs) do seu website.
A estrutura dos diretórios de seu website deve ser igual à mostrada abaixo:
4. Configurando a tela
Como você vai notar no design, qualquer coisa em nossa página é da largura de 760px ou menos, e nada flutua fora disso. O que nós vamos fazer é criar um contêiner para nossa página que tenha 760px de largura e posicionado no meio da página. Nossos 5 principais elementos serão colocados dentro desse contêiner.
Entre as tags <body> </body>, crie um <div> com um atributoid="page-container" :
<body>
<div id="page-container"> Hello world. </div>
</body>
Nota: pequenos trechos de código serão fornecidos através deste tutorial, códigos de passos antigos estarão coloridos de azul enquanto que os novos códigos que você deverá adicionar estarão em verde.
E isto é todo o HTML que precisamos para nosso contêiner. Em CSS.
Crie um novo arquivo vazio e salve-o como master.css no diretório/css/.
Crie uma nova regra na folha-de-estilos para selecionar o page-container:
#page-container {
}
O sinal # (sustenido) na frente da id diz ao navegador que estamos selecionando uma id. Para uma classe nós usaríamos um . (isso mesmo, um sinal de ponto final), ex: .page-container {}.
Um id é um identificador único que usamos para coisas que somente ocorrerão uma vez na página.
Então para cabeçalhos, rodapés, navegadores, etc nós usamos id’s, e para elementos que se repetem, como links, nós devemos usar classes, que podem aparecer mais vezes na mesma página.
Nós não estaremos habilitados a ver as modificações que são feitas a esta<div>, porque ela é transparente por padrão. Então, a primeira coisa que nós vamos fazer é colorir o fundo da div de
vermelho, para nos dar um indicador do que estamos fazendo:
#page-container background: red;}
Você deve ver algo como isto através do comprimento da página do seu navegador:
Em primeiro lugar devemos atribuir uma largura de 760px para estadiv.
#page-container { width: 760px; background: red;}
Recarregue a página no seu navegador para ver a regra sendo aplicada.
No próximo passo vamos centralizar esta div. Isto é feito atribuindo suas margens para auto. Quando as margens esquerda e direita são atribuídas para auto, elas vão se igualar em ambos os lados e a div vai ficar no centro do contêiner.
#page-container { width: 760px; margin: auto; background: red;}
Agora você deve ter um bloco vermelho de 760px de largura, centralizado e com os dizeres “Hello World.” dentro. Mas ele está situado a 8px de distância do topo e lados do navegador.
Isto acontece porque as tags html e body tem margens e/ou alinhamento padrões em quase todos
os navegadores. Então nós precisamos escrever uma regra CSS para resetar as margens e alinhamentos das tags html e body para zero. Adicione essa regra bem no topo do seu arquivo css:
html, body { margin: 0; padding: 0;}
Uma vírgula entre os seletores CSS significa “ou”, então, aqui a regra será aplicada à tag html ou à tag body. Já que ambas existem na página, será aplicada a ambas.
Maravilha, agora nosso bloco está do jeito que deveria estar. Note que quanto mais conteúdo é adicionado à esta div, ela vai automaticamente modificar sua altura para acomodar o conteúdo que
é colocado dentro.
Vamos lá.
5. Os Elementos principais
Nós precisamos adicionar 5 div’s, todas com id’s individuais que descrevem sua finalidade. Estas divs correspondem às áreas do design que nós identificamos na parte 2. Troque o texto Hello World. pelas div’s abaixo. Nós vamos inserir texto dentro das div’s somente para facilitar a
identificação visual quando visualizarmos a página.
<div id="page-container">
<div id="main-nav">Main Nav</div>
<div id="header">Header</div>
<div id="sidebar-a">Sidebar A</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</div>
Sua página deve ficar assim:
Sem CSS as div’s serão arranjadas do topo para baixo, uma após a outra, na mesma ordem que estão no código. Isto é comumente referido como o “fluxo” do documento.
Bem, vamos então utilizar a informação que temos para fazer nossas div’s ficarem do tamanho correto.
Remova o fundo vermelho da #page-container, e adicione uma nova regra para #main-nav. Mude o fundo da #main-nav para vermelho para que possamos vê-la, e atribua sua altura para
50px:
#page-container { width: 760px; margin: auto;}
#main-nav { background: red;
height: 50px;}
Note que nós não especificamos a largura da div. Isto por que, por padrão, a div vai se esticar até preencher seu contêiner-pai, que neste caso, é nosso div #page-container que foi configurado
para 760px de largura.
Faça a mesma coisa para a div cabeçalho (header), utilizando a altura que usamos no primeiro
passo. Use a cor azul para o fundo.
#header { background: blue; height: 150px;}
Já que estamos aqui, vamos configurar o rodapé (footer). Use a cor laranja para o fundo.
Lembre-se de que quando escrever sua folha-de-estilos, você pode agrupar seus estilos. Então todos os estilos do cabeçalho (header) poderiam vir juntos. Todos os estilos do rodapé (footer) poderiam estar juntos, e os estilos de navegação poderiam estar juntos. Eu também acho que estruturar a folha-de-estilos similar à ordem do HTML ajuda bastante, assim sendo header fica próximo ao topo, footer ao final.
#footer { background: orange; height: 66px;}
Agora as próximas 2 div’s são ligeiramente diferentes. Sua altura é dependente do conteúdo que vai dentro delas, portanto não vamos atribuir sua altura. Vamos pintá-las de verde-escuro e verde. Coloque as novas regras entre as regras header e footer na folha-de-estilos. Fica mais fácil encontrá-las, uma vez que a folha-de-estilo está ficando maior.
#header { background: blue; height: 150px;}
#sidebar-a { background: darkgreen;}
#content { background: green;}
#footer { background: orange; height: 66px;}
Se tudo correu bem, você deve ter uma página que se parece com isso:
6. Floats
Floats (flutuadores) pode ser um conceito enganoso para fazer você perder a cabeça. Basicamente um float é um elemento que é alinhado contra os lados esquerdo ou direito do seu contêiner. (para
maiores detalhes, leia maxdesigns in depth introduction to floats. (em inglês).
No caso deste website, nós vamos fazer flutuar (float) nossa div#sidebar-a à direita, com a
largura de 280px. Adicione o seguinte à sua CSS:
#sidebar-a { float: right; width: 280px; background: darkgreen;}
Você agora fez flutuar com sucesso sua primeira div, e você agora deve ter uma página que se
parece com isso:
Somente para o propósito de testes, substitua o texto do conteúdo dadiv para o seguinte:
<div id="content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus. Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio. Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget, purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.</div>
Note que o texto rola no conteúdo da div flutuante, como visto abaixo:
Mas isto não é o que nós queremos. Nós queremos que o conteúdo dadiv seja distribuído através da div sidebar, a qual tem seu lado direito contra o lado esquerdo da barra lateral.
Um jeito fácil de conseguir isto num layout flutuante como esse é colocar uma margem direita na nossa div content que tenha a mesma largura de nossa barra lateral, nesse caso 280px. Isto vai empurrar o canto direito do conteúdo fora do canto direito do page-container.
#content { margin-right: 280px; background: green;}
Ótimo, nós quase conseguimos fazer nosso layout flutuante funcionar. Mas há uma coisa a mais que devemos considerar… o que acontece se adiv sidebar ficar mais alta que a div content?
Vamos ver. Copie e cole este texto na div sidebar:
<div id="sidebar-a"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus. Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio. Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget, purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.</div>
Isto não é o que queremos, afinal. A razão do rodapé não ter se movido pra baixo é porque a sidebar está “flutuada” à direita.
Explicação: Por padrão, qualquer elemento flutuante não empurrará para baixo elementos que estejam abaixo deles. Isto por que elementos flutuantes não são considerados parte do “fluxo” do documento. É como se eles estivessem em uma outra camada “flutuando” acima dos outros elementos, e por causa disso, não podem afetar suas posições.
E o que nós podemos fazer para contornar este problema? Introduzir a propriedade clear da CSS.
Adicione isto à sua folha-de-estilos:
#footer { clear: both; background: orange; height: 66px;}
Quando um elemento tem sua propriedade clear atribuída, se ele entrar em contato com um
elemento flutuante, ele é colocado exatamente abaixo de onde o flutuante termina. Você pode especificar se ele é afetado somente por flutuadores esquerdos ou direitos, neste caso nós poderíamos utilizar tanto right ou both. Nós vamos utilizar clear: both somente por segurança.
7. Estrutura adicional
Links para navegação Cabeçalhos (Cabeçalho do Site e os cabeçalhos do conteúdo) Conteúdo Rodapé informativo (informação de copyright, créditos, e navegação alternativa)
Agora que nós temos nossas divs de layout base nos devidos lugares, podemos adicionar o restante da estrutura que vai ser a “cara” desse website.
O fundamental que ainda precisamos adicionar ainda são:
Ao implementar essas coisas sem quebrar o layout da página, vamos criar uma pequena classe muito útil, chamada hidden.
Adicione isto perto do topo da sua folha-de-estilos, depois da definição da tag body:
.hidden { display: none;}
Isto significa agora que podemos atribuir a qualquer elemento no site com tag hidden e ele não
será exibido logo de cara. Isto vai nos facilitar agora, portanto, você pode esquecê-la por um momento.
Vamos falar sobre cabeçalhos
Cabeçalhos num documento HTML são definidos pelas tags <h1> até<h6> em ordem de importância no documento. Por exemplo: <h1> para o nome do website, <h2> para os cabeçalhos principais (ex.: nome da página), <h3> para cabeçalhos secundários, etc… Nós vamos adicionar um <h1> dentro da nossa div Header e atribuir o nome da companhia, Enlighten Designs, neste caso.
<div> <h1>Enlighten Designs</h1></div>
Se você recarregar a página, notará que Enlighten Designs aparece em letras grandes dentro do
cabeçalho, mas há também agora muito espaço em branco ao redor do cabeçalho. Isto é causado pelas margens padrões das tags <h1>. Então necessitamos cortar a margem e seu preenchimento
dessa forma:
h1 { margin: 0; padding: 0;}
Agora vamos adicionar a navegação. Os prós e contras de como a navegação vai funcionar podem ser um tanto complicados e serão discutidos em detalhes posteriormente em sua própria seção.
A navegação será estruturada como lista de definição (<dl>) com id’s individuais relevantes a cada termo de navegação com o uso da tag (<dt>). Estes itens de navegação terão dentro de si, links para nossas seções principais. Se isto parecer confuso, adicione somente este código à sua div main-nav:
<div id="main-nav"> <dl> <dt><a href="#">About</a></dt> <dt><a href="#">Services</a></dt> <dt><a href="#">Portfolio</a></dt> <dt><a href="#">Contact Us</a></dt> </dl></div>
Nota: Muitas pessoas usam listas não-ordenadas para navegação, mas para este simples nível de navegação resolvi usar listas de definição por se mostrarem mais fáceis de funcionar no IE. O IE tem alguns bugs de CSS irritantes com listas não-ordenadas. Mas com pequenos ajustes, uma lista não-ordenada pode fazer a mesma coisa facilmente. É questão de preferência, creio.
Em termos fáceis para entender, a <dl> age como um contêiner, as<dt>‘s são identificadores
únicos para cada item de navegação e os links… são links. Nós vamos usar id’s únicos mais tarde quando viermos a fazer o “look” da navegação como ele deve ser, com suas belas imagens de “rollover”. Só que mais tarde. Se você recarregar a página, vai notar que ela parece um tanto feia, então por ora, vamos esconder a navegação que adicionamos com a classe hidden que construímos
anteriormente.
<div id="main-nav"> <dl class="hidden"> <dt><a href="#">About</a></dt> <dt><a href="#">Services</a></dt> <dt><a href="#">Portfolio</a></dt> <dt><a href="#">Contact Us</a></dt> </dl></div>
“E como num passe de mágica, tudo se transformou…”
Agora vamos passar para o rodapé porque é relativamente fácil. Há duas partes no rodapé: a informação de copyright e os créditos na esquerda e a navegação alternativa do site na direita.
Nós queremos que a navegação alternativa flutue à direita, como fizemos com a barra lateral e o conteúdo, então vamos colocar isso no primeirodiv. Em teoria você poderia fazer as div’s flutuarem
não importasse onde elas estivessem no código, mas erros no IE tornam isso difícil, então agora, qualquer item flutuante deve vir primeiro na ordem do código.
Posicione em uma div com uma id única como esta:
<div id="footer"> <div id="altnav"> <a href="#">About</a> - <a href="#">Services</a> - <a href="#">Portfolio</a> - <a href="#">Contact Us</a> - <a href="#">Terms of Trade</a> </div></div>
Abaixo dessa div, vamos acrescentar a marca de copyright e os créditos.
<div id="footer"> <div id="altnav"> <a href="#">About</a> - <a href="#">Services</a> - <a href="#">Portfolio</a> - <a href="#">Contact Us</a> - <a href="#">Terms of Trade</a> </div> Copyright © Enlighten Designs
Powered by <a href="http://www.enlightenhosting.com/">Enlighten Hosting</a> and <a href="http://www.vadmin.co.nz/">Vadmin 3.0 CMS</a></div>
E agora o rodapé está pronto. Para ter certeza de que seu site está indo bem, ele deve se parecer com isto:
Movendo dentro da área de conteúdo principal, vamos adicionar o conteúdo. Estou pegando o conteúdo do design diretamente do passo 2. Use as tags <h2> para os cabeçalhos “About” e “Contact Us”. Coloque os parágrafos em tags <p></p>, e use <br /> para a quebra de linhas.
<div id="content"> <h2>About</h2>More contact information...</a></p></div>
Atualize a visualização da sua página. Você vai notar que há mais de um espaço em branco “pulando” ao redor da div de conteúdo. Isto acontece por causa das margens padrão nas tags <h2> e <p>. Necessitamos diminuir as margens e o espaçamento. Porém, nós não queremos
fazer isto para cada simples tag de parágrafo ou cabeçalho secundário que estará no website. Para fazer isto, necessitamos usar seletores CSS “filhos”. Todos os elementos em HTML tem um relacionamento “filho, pai”. Se a “tag a” estiver dentro da “tag b”, então a tag b é filha da tag a. No código acima, nossas tags <h2> e nossas tags <p> são ambas filhas da div #content. Se quisermos
selecionar os elementos filhos de um pai específico, nós separamos eles com um espaço, como no exemplo abaixo:
#content h2 { margin: 0; padding: 0;}
#content p { margin: 0; padding: 0;}
Então as regras acima dizem para o navegador aplicar estes estilos SOMENTE para as tags <h2> e para aqueles que são elementos filhos dadiv #content.
Na próxima parte faremos o visual do texto parecer um pouco melhor.
8. Alguns estilos básicos de texto
Ó céus! Você está cansado de olhar aquelas terríveis cores de fundo ou o quê?!
Liberte-se delas. Acabe com todos, exceto para a navegação, em vermelho.
Isto vai parecer um pouco melhor, mas o texto ainda fica horrível. Vamos atribuir uma família de fontes global, cor e tamanho para usar como uma base legal. Os atributos de fonte que atribuímos
no corpo serão automaticamente herdados para qualquer outro texto no site, a não ser que sejam especificamente sobrescritos com outro estilo. Crie a nova regra CSS antes da classe “hidden”, perto do topo da folha de estilos:
body { font-family: Arial, Helvetica, Verdana, Sans-serif; font-size: 12px; color: #666666; background: #ffffff;}
O conteúdo acima já é auto-explicativo.
Se tudo está de acordo como planejado, você deve ver algo como isto:
O que isto necessita é algum espaçamento para separar cada um daqueles blocos de conteúdo.
De acordo com o design, o vazio abaixo dos cabeçalhos de conteúdo é aproximadamente 15px, e os vazios abaixo de cada parágrafo estão na faixa dos 15px. Então vamos juntar aquelas duas regras CSS que criamos anteriormente e aplicar regras de “padding-bottom” abaixo:
#content h2 { margin: 0; padding: 0; padding-bottom: 15px;}
#content p { margin: 0; padding: 0; padding-bottom: 15px;}
Nós também necessitamos de 25px de espaçamento ao redor de todo o conteúdo do div, e todo o espaçamento do div, dando a eles algum espaço para respirar.
Esta parte DEVERIA ser fácil. Na teoria, você somente deveria atribuirpadding: 25px; nas divs,
mas infelizmente, devido a problemas no Internet Explorer, não podemos fazer isto.
O problema do IE é descrito em detalhes aqui.
Há dois possíveis caminhos para lidar com este problema: um envolve a escrita de alguns truques de CSS para esconder certas regras CSS de um navegador, enquanto as exibe em outro, porque o espaçamento é algo que usamos muito, nós vamos fazer o truque do outro jeito.
O outro jeito é inserir um div adicional dentro dos divs que queremos que sejam espaçados e atribuir suas classes para “padding”. Padding é a única coisa que será aplicada à estas divs espaçadas.
A razão disto funcionar é porque as divs espaçadas não tem um comprimento atribuído. Como regra, tente não adicionar espaçamento e um comprimento estático ou altura no mesmo elemento.
<div id="sidebar-a"> <div class="padding"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus. Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio. Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget, purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst. </div></div>
Faça o mesmo para a div de conteúdo.
Agora na folha de estilos, nós vamos criar duas novas regras, exibidas abaixo em verde:
#sidebar-a { float: right; width: 280px;}
#sidebar-a .padding { padding: 25px;}
#content { margin-right: 280px;}
#content .padding { padding: 25px;}
Usando o mesmo método anterior, vamos selecionar somente os elementos com uma class="padding" que são filhas das divs#sidebar-a ou #content.
O espaço vertical entre as linhas do texto no conteúdo do texto e no texto da sidebar devem ser largos, de acordo com o rascunho do gráfico. Em CSS, o espaçamento vertical é atribuído pelo atributo line-height. Vamos adicionar uma altura da linha de 18px:
#sidebar-a { float: right; width: 280px; line-height: 18px;}
#content { margin-right: 280px; line-height: 18px;}
À frente, os cabeçalhos <h2> que adicionamos parecem horríveis. Porque a fonte que eles estavam
usando não é uma fonte para web, nós vamos ter de substituí-los por imagens. Crie duas imagens como as exibidas abaixo e salve-as no diretório /images/headings/.
Substitua o texto do cabeçalho por estas imagens mas, lembre-se de manter as tags <h2> ao redor
das tags das imagens, e lembre-se de colocar o atributo alt nas imagens. O atributo alt é designado para exibir um texto alternativo à imagem, se um usuário está visualizando a página em um browser que não suporta imagens, ou desabilitou a exibição de imagens. Isto é útil também para scripts robôs de sites, por que eles não conseguem entender imagens.
<h2><img src="images/headings/about.gif" width="54" height="14" alt="About" /></h2>
<h2><img src="images/headings/contact.gif" width="98" height="14" alt="Contact Us" /></h2>
Nosso site já está começando a tomar forma. Depois disso, você deve enxergar algo como:
9. O Cabeçalho
Para implementar o cabeçalho, necessitamos obter a imagem de fundo aplicada ao div header,
substitua o cabeçalho “Enlighten Designs” com uma logo gráfica e posicione-a no local correto, no cabeçalho (a barra cinza escuro à direita).
Primeiro, crie duas imagens como as abaixo (ou copie estas mesmo):
/images/general/logo_enlighten.gif
/images/headers/about.jpg
A primeira parte é fácil. Atribua uma imagem de fundo na CSS utilizando o formato abaixo:
#header { height: 150px; background: #db6d16 url(../images/headers/about.jpg);}
A propriedade background que acabamos de usar é atualmente uma propriedade reduzida que permite-nos especificar a cor de fundo, imagem, posição da imagem e como a imagem deve ser repetida, tudo em uma só linha. Nós atribuímos o fundo para usar a mesma sombra alaranjada como a usada pelo cabeçalho somente para que a página não pareça tão agradável se o usuário não tem a exibição de imagens habilitadas em seu navegador. Os caminhos para as imagens em seu arquivo CSS são relativos ao arquivo CSS, não à página HTML. Isto porque o ../ é necessário no caminho
acima.
Agora, substitua o texto “Enlighten Designs” com a imagem da logo. Novamente, lembre-se de manter a tag <h1> e escreva uma descrição no atributo alt.
<div id="header"> <h1><img src="images/general/logo_enlighten.gif" width="236" height="36" alt="Enlighten Designs" border="0" /></h1></div>
Agora nós temos que posicioná-la corretamente onde ela deve estar. Vamos fazer isto flutuando a tag <h1> à direita, e então usar as propriedades margin-top e padding-right para obter a exata posição. Adicione o seguinte texto à regra <h1> em sua folha de estilos:
h1 { margin: 0; padding: 0; float: right; margin-top: 57px; padding-right: 31px;}
A razão porque usamos padding-right ao invés de margin-right é porque as margens podem
frequentemente disparar erros grosseiros no IE se utilizado em certos lugares.
E o cabeçalho está pronto.
10. O Rodapé
Primeiro nós necessitamos fazer o visual do texto aparecer corretamente. O design usa a fonte Tahoma 10px para o texto, colorido de um cinza bem leve (#c9c9c9). Eu tenho certeza que você
pode desenhar isto por si mesmo, mas se quiser usar o copiar/colar:
#footer { clear: both; height: 66px; font-family: Tahoma, Arial, Helvetica, Sans-serif; font-size: 10px; color: #c9c9c9;}
E para mudar a cor do link (e remover o sublinhado), adicionamos isto:
#footer a { color: #c9c9c9; text-decoration: none;}
Mas os links necessitam de destaque algumas vezes, quando seu mouse estiver sobre eles. Então, vamos fazê-los mudar sua cor para laranja, quando o mouse estiver sobre eles:
#footer a:hover { color: #db6d16;}
Nós também tivemos de adicionar uma borda de 1 pixel na borda superior do div do rodapé,
atribuir algum espaçamento, e fazer a altura da linha ficar em 18px (aumentando o espaçamento). Por estarmos atribuindo espaçamento no div do rodapé, nós teremos de remover a propriedade height para não disparar o bug espaçamento/comprimento/altura que mencionei anteriormente. Nós não necessitamos realmente de atribuir a altura neste div:
#footer { clear: both; font-family: Tahoma, Arial, Helvetica, Sans-serif; font-size: 10px; color: #c9c9c9; border-top: 1px solid #efefef; padding: 13px 25px; line-height: 18px;}
A última coisa que deixamos para fazer é flutuar a navegação alternativa à direita. Note que elementos flutuantes devem ter um comprimento especificado para funcionar corretamente, então
atribua o comprimento um ligeiramente maior do que a navegação atualmente necessita e atribua o alinhamento do texto à direita para que o texto se encaixe onde deveria estar.
#footer #altnav { width: 350px; float: right; text-align: right;}
Tadá! Nós temos um rodapé.
11. A navegação (argh!)
Há muitos truques de CSS neste capítulo, e não é imperativo que você entenda exatamente o que cada parte da css faz, somente que você esteja pronto para modificar esta CSS para fazer o que você quer em outros websites, o que é basicamente a mudança de altura, comprimento e imagens. Porém eu vou dar o melhor de mim para explicar o código.
Vamos começar pela parte fácil. Remova o fundo vermelho na CSS e exiba a navegação removendo a classe hidden na lista de definição.
O método de “rollover” das imagens que vamos usar neste menu é uma solução 100% feita em CSS. A premissa básica por trás disso é posicionar os itens em uma lista de definição próxima uma da outra (lado a lado), esconder o texto delas, e usar CSS para trocar a imagem de fundo dependendo de qual estado o botão está (“rollover”, normal ou selecionado).
Para cada um dos 4 itens de navegação, necessitamos criar uma imagem como as exibidas acima. O primeiro terço da imagem é o estado normal, o segundo é o estado mouseover e o terceiro é o
estado selecionado. O gif animado abaixo mostra como isto vai funcionar:
Espero que você tenha entendido como isto funciona, através do diagrama acima. Vamos fazer nossas 4 imagens de navegação.Salve-as em /images/nav/
Agora vou dar o melhor de mim para explicar a css por trás de tudo, bloco por bloco. Descubra comigo.
Substitua sua regra #main-nav com o código abaixo:
/* Main Navigation */
#main-nav { height: 50px; }#main-nav dl { margin: 0; padding: 0; }
Isto muda a altura da div main-nav para 50px e retira todas as margens das listas de dados.
/* IE5 Mac Hack \*/#main-nav { padding-left: 11px; }/*/#main-nav { padding-left: 11px; overflow: hidden; }/* End Hack */
Isto é um truque que faz duas coisas: Atribui o espaçamento da esquerda, da main-nav para 11px
(para que bata ligeiramente como é mostrado no design) e conserta um bug no IE5 para mac.
#main-nav dt { float: left; }
Isto atribui a definição dos títulos (nossos contêineres de item de navegação individual) para flutuar à esquerda, o que os junta da esquerda para a direita, ao invés de um abaixo do outro.
#main-nav dt a { display: block; height: 0px !important; height /**/:50px; /* IE 5/Win hack */ padding: 50px 0 0 0; overflow: hidden; background-repeat: no-repeat;}
Atribui ao link a mesma dimensão que seu contêiner correspondente e esconde o texto usando a propriedade overflow.
#main-nav dt a:hover { background-position: 0 -50px;}
Faz com que a posição do fundo se mova até 50px quando o cursor do mouse passa por cima de um link.
#main-nav dt#about,#main-nav dt#about a { width: 71px; background-image: url(../images/nav/about.gif); }
#main-nav dt#services,#main-nav dt#services a { width: 84px; background-image: url(../images/nav/services.gif); }
#main-nav dt#portfolio,#main-nav dt#portfolio a { width: 95px; background-image: url(../images/nav/portfolio.gif); }
#main-nav dt#contact,#main-nav dt#contact a { width: 106px; background-image: url(../images/nav/contact.gif); }
Atribui o comprimento individual de cada item de navegação e o caminho para cada imagem.
Agora se todas as nossas imagens estiverem nomeadas como acima e salvas em seus lugares corretos, sua navegação deve funcionar.
A última coisa que necessitamos fazer para que a navegação funcione, é obter os estados dos botões selecionados para mostrá-los quando você estiver na página correspondente.
Necessitamos adicionar algumas novas CSS e modificar algumas CSS existentes para concluir isto. Adicione a CSS abaixo ao restante de sua navegação CSS:
body.about dt#about,body.about dt#about a,body.services dt#services,body.services dt#services a,body.portfolio dt#portfolio,body.portfolio dt#portfolio a,body.contact dt#contact,body.contact dt#contact a { background-position: 0 -100px;}
Este seletor CSS enorme checa qual classe a tag body tem e então atribui a posição da barra de navegação correta. então se você quisesse que anavbar about fosse selecionada, você atribuiria class="about" à tagbody. Vamos fazer isto agora:
<body class="about">
Agora o problema que temos é que também queremos que a imagem do cabeçalho mude baseada em qual seção estamos visualizando. Então necessitamos modificar a regra #header como abaixo:
body.about #header { height: 150px; background: #db6d16 url(../images/headers/about.jpg);}
Agora quando você criar páginas para suas outras seções, você só tem de modificar a classe do body de about para, por exemplo, contact, atribuir uma regra de CSS apontando para a imagem do
cabeçalho correta e está pronto.
12. Fazendo funcionar no IE
Nota: Para seguir esta seção, você vai precisar instalar as “versões padrão do IE. Nestas estão truques não suportados em versões mais antigas do IE que você pode instalar junto com sua versão atual do IE.
Vamos iniciar os truques com a criança problema atual, IE5.
Abra seu navegador IE5. Há duas coisas que eu notei instantaneamente que estão erradas. A primeira é que a página não é centralizada como deveria ser, e a segunda é que o rodapé tem um problema de alinhamento estranho.
O problema de alinhamento é bem conhecido, então vamos nos deter primeiramente neste.
O IE 5 e o 5.5 não reconhecem a propriedade CSS margin: auto; como deveria ser. Para corrigir isto nós necessitamos usar a propriedadetext-align: center; no body, que vai centralizar o contêiner div.
body { font-family: Arial, Helvetica, Verdana, Sans-serif; font-size: 12px; color: #666666; text-align: center;}
Isto vai centralizar nosso contêiner div, mas vai centralizar também todo o texto dentro do div. Nós não queremos isto, então necessitamos sobrescrever o text-alignment dentro do contêiner div.
#page-container { width: 760px; margin: auto; text-align: left;}
O que resolve o problema de centralização.
Agora, o rodapé esquisito.
Eu não consegui encontrar atualmente qualquer referência a este bug particular através de uma rápida pesquisa no google, então eu tentei imaginar um jeito de consertar isso. Eu pensei que o bug tinha algo a ver com o div altnav flutuante mas não pude identificar onde estava o problema exatamente. Então, eventualmente eu tentei colocar um divao redor da informação de copyright e
que fez com que o bug desaparecesse.
<div id="copyright">Copyright © Enlighten Designs<br />Powered by <a href="http://www.enlightenhosting.com/">Enlighten Hosting</a> and<a href="http://www.vadmin.co.nz/">Vadmin 3.0 CMS</a></div>
Isto disparou alguns problemas de padding-top no rodapé, então eu removi o atributo padding-top: 13px; da regra #footer, e adicionei a ambas as div’s: #copyright e #altnav.
#footer #altnav { clear: both; width: 350px; float: right; text-align: right;
padding-top: 13px;}
#footer #copyright { padding-top: 13px;}
Há um último bug do IE que pude verificar, e é quando você passa o cursor do mouse sobre item selecionado da navegação. Ele reverte o fundo para branco como se não fosse selecionado. Nós não queremos que o item selecionado mude quando o cursor do mouse estiver sobre ele.
Se adicionarmos mais algumas poucas regras para nossa enorme regra que define a seleção da navegação, teremos nosso problema solucionado.
body.about dt#about,body.about dt#about a,body.about dt#about a:hover,body.services dt#services,body.services dt#services a,body.services dt#services a:hover,body.portfolio dt#portfolio,body.portfolio dt#portfolio a,body.portfolio dt#portfolio a:hover,body.contact dt#contact,body.contact dt#contact a,body.contact dt#contact a:hover { background-position: 0 -100px;}
E agora está tudo certo. Espero que você tenha aprendido alguma coisa sobre layouts em CSS. Minha recomendação é que você procure mais sites especializados em CSS como os listados abaixo e repare em suas codificações HTML/CSS para ver como eles tem feito as coisas funcionarem. Em caso de dúvida, dê uma googlada.
Sinta-se à vontade para sugerir modificações ou melhorias neste tutorial (diretamente com o
autor, em inglês), ou pergunte por tutoriais em outros tópicos do site.
