Tutorial - HTML+CSS: do Photoshop à web [Completo]

keoshi

keoshi

Power Member
Decidi optar por um design mais estranho para este tutorial, para que não seja sempre o mesmo layout a que toda a gente está habituada (header, corpo, footer, sombra por trás, etc.).
Assim de certeza que prestam atenção e que aprendem ;)

Aqui está o design que vamos ter na nossa página.



Não interessa se é bonito ou não, se faz o vosso estilo ou não. A partir de agora vamos olhar para isto de uma perspectiva totalmente formal.
Ou seja, vão analisar tudo de uma perspectiva técnica, não preocupados com o resultado final, mas sim com os obstáculos que vão ter que ultrapassar para lá chegar.

Todas as páginas na net seguem uma forma. Essa forma é constituída por tags.
Tags são tecnicamente 'Markup Tags', excertos de códigos, comandos, que o browser vão reconhecer e formatar de acordo com as mesmas.

De uma forma muito geral todas as páginas têm que ter esta forma:
Código: 
<html>
<head>
</head>
<body>
</body>
</html>
Reparem que estas tags sofrem de hierquização - estão umas dentro de outras (o head e o body estão ambos dentro do html). Habituem-se porque isto vai ficar muito complexo em pouco tempo. É por esta razão que é conviniente usar um editor de texto que tenha 'code highlight', para facilitar a identificação de todos os excertos de código.

Outra coisa importante - a grande maioria dos tags são parelhas de abertura (p.e.: <head>) e fecho (p.e.: </head>). Outras tags são não-pares (p.e.: <br />, <hr />, <img />)

Explicado o básico, vamos então à nossa página. Se estás completamente confuso neste ponto é melhor estudar mais um pouco o HTML básico nas W3schools.


1 - Vamos planificar a estrutura HTML da página. Fica qualquer coisa do género:

Código: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Tutorial</title>
</head>
<body>
</body>
</html>
Na primeira linha indicamos o tipo da nossa página (xHTML Strict), na segunda indicamos a língua, na quarta a encodificação de caracteres (uft-8) e na quinta o título do documento.


2 - Tal como uma pintura, ao fazer uma página, começa-se pelo fundo, pelo mais geral, depois então vamos aos pormenores (lá está a hierarquização).

Começemos então pelo fundo. No nosso layout o fundo não é apenas uma cor, tem imagem. E pior que ter imagem, tem um padrão.

Temos que cortar exactamente a largura em que o padrão se repete para podermos utilizá-lo repetidamente na horizontal. Cortamos só o bocado em que se repete porque podemos poupar no tamanho final da página, dando uso ao CSS.

Vamos cortar só até onde temos padrão, o resto deixamos para mais à frente.

252901751_eef8d3a52d_o.gif


Com a imagem cortada e gravada numa pasta 'imagens', vamos começar a escrever o estilo.
Entre os tags <head> e </head> vamos indicar a localização do nosso ficheiro CSS:

Código: 
<link rel="stylesheet" type="text/css" href="estilo.css" />
Gravamos e criamos um novo ficheiro. Gravamos este último na mesma pasta e damos o nome 'estilo.css'.


3 - O primeiro parâmetro do nosso CSS vai ser o fundo.
Para isso utilizamos a propriedade universal de HTML: body - que indica formatações gerais para todo o documento.

No Photoshop retiramos o número hexadecimal referente à cor de fundo do documento.

252901681_a503c35adc_o.jpg


O código final do parâmetro body será:

Código: 
body {
    background:#d0cbc5 url(imagens/fundo.gif) 0px 0px repeat-x;
    }
Temos a primeira propriedade definida:
O fundo terá a cor #d0cbc5 e uma imagem. A imagem vai ser colocada nas coordenadas (0,0) da página - canto superior esquerdo - e vai ser repetida ao longo do eixo dos xx.


4 - Vamos ainda adicionar estes parâmetros ao body para que não tenha margens ou espaços na periferia, quando estivermos a adicionar outras partes:

Código: 
margin:0px;
padding:0px;
E vamos definir o tipo de letra, o tamanho e a cor base:

Código: 
font:0.8em Georgia, Garamond, Times, serif;
color:#7d7a76;
5 - De volta ao Photoshop - Para o logotipo, seleccionamos a área que queremos e clicamos: Edit > Copy Merged.
Criamos um novo documento com o background transparent e com o tamanho proposto (tem a informação do clipboard): no meu caso: 152 x 58 px.
(Nota: para poupar ainda mais KBs, uso a tool 'Magic Wand' com tolerância 0 e o Anti-Alias desligado e retiro tudo o que não faz parte do logotipo propriamente dito.)

No ficheiro CSS criamos uma nova propriedade:

Código: 
#header {
    height:80px;
    padding-top:12px;
    }
Este div vai ter uma altura fixa de 80px e uma padding no topo de 12px. Assim, todo o conteúdo dentro deste bloco terá um distanciamento da sua margem superior de 12px.

Como queremos que o conteúdo não 'toque' nas extremidades laterais, vamos adicionar a seguinte classe:

Código: 
.largura {
    margin:0 auto;
    width:750px;
    }
Vamos ter uma largura total de 750px e este div vai estar no centro absoluto da página (horizontalmente) graças ao valor 'auto' que detecta a percentagem automaticamente.

Assim, no ficheiro HTML podemos criar o seguinte div:
Código: 
<div id="header" class="largura"><img src="imagens/logotipo.gif" alt="Logotipo" /></div>
Podemos dar a cada div mais do que uma propriedade de formatação - neste caso tem o id 'header' e a classe 'largura'. Pode também ter mais que uma classe ou id.

Se gravarem tudo e abrirem a página já devem ver o padrão principal por trás, o gradiente do header e o logotipo no sítio.



Corrigi um erro nestas linhas:
Código: 
body {
    background:#d0cbc5 url(imagens/fundo.gif) 0px 0px repeat-x;
    }
Não tinha a localização correcta, seus desatentos :P

_______________________________________________________
------------------- SEGUNDA PARTE: MENU --------------------

Vamos ao menu!
A estrutura básica de um menu, num ficheiro que obedece às regras de xHTML, é ,no geral, deste tipo:
Código: 
<ul>
    <li><a href="#">HOME</a></li>
    <li><a href="#">FORUM</a></li>
    <li><a href="#">AJUDA</a></li>
    <li><a href="#">OUTRO</a></li>
</ul>
Portanto é exactamente isso que vamos adicionar ao nosso ficheiro HTML mesmo abaixo do fecho do div 'header'. Vamos adicionar o seguinte:

Código: 
<div id="menu">
<div class="largura">
    <ul>
        <li><a href="#" id="opt" class="select">HOME</a></li>
        <li><a href="#" id="opt">FORUM</a></li>
        <li><a href="#" id="opt">AJUDA</a></li>
        <li><a href="#" id="opt">OUTRO</a></li>
    </ul>
</div>
</div>
Temos um div 'menu', directamente dentro um div com class 'largura', e finalmente o ul com as opções.
Vamos formatar um por um, à excepção da propriedade .largura que já foi definida anteriormente - permite que tenhamos o menu a ocupar apenas a percentagem que definimos (neste caso 750px fixos).

Usa-se um 'ul' porque é, literalmente, uma 'unordered list' - uma lista sem ordem específica.

Quando adicionamos este excerto de código, gravamos e abrimos o HTML num browser o efeito não é bonito.

Primeiro, vamos ter que cortar as nossas imagens no Photoshop/Fireworks - o que quer que usem.
A nossa imagem vai ter o triplo da altura que aparenta ter (no meu caso 35px * 3 = 105px), para que lhe possamos atribuir, por CSS, vários estados.

Sigam o exemplo abaixo (menu.gif):
255286842_99349d281e_o.gif

(gif com transparência)

Temos o estado normal em cima, o estado hover em baixo e o estado 'current' em baixo.
Vamos também cortar um quadrado branco 6 x 6px para ser o fundo do nosso menu. - link(menu_bg.gif)
Todas estas imagens são gravadas em GIF porque assim temos a certeza que todos os browsers suportam a transparência.

Vamos voltar ao 'estilo.css' para formatar este menu.

Primeiro adicionamos o código do div 'menu':
Código: 
#menu {
    height:35px;
    padding:0;
    margin:140px 0 0 0;
    width:100%;
    background: url(imagens/menu_bg.gif) 0 100% repeat-x;)
    }
Por linhas, a explicação:
- como a altura dos meus botões é de 35px vou obrigar o menu a ter a mesma dimensão vertical; - padding a 0 para não ter nenhum espaçamento interior;
- margin: 140px 0 0 0 - significa que vai ter margem de cima de 140px e todas as outras a zero (direita, baixo e esquerda, respectivamente);
- o menu vai ter um comprimento horizontal de 100%;
- e vai ter um background de imagem (o tal quadrado branco 6x6) com posição vertical a 100% (a imagem está colocada no extremo inferior do div) e é repetido no eixo dos xx (horizontal).

Depois, o ul dentro do div menu é simples:
Código: 
#menu ul {
    margin:0;
    padding:0;
    }
Sem margens, quer exteriores (margin) quer espaçamentos interiores (padding)

Avançando para dentro temos os li:
Código: 
#menu li {
    list-style:none;
    height:35px;
    padding:0;
    margin:0px;
    float:left;
    }
- retiramos qualquer estilo de marcas/bullets;
- tem a mesma altura que o menu e as opções do mesmo;
- sem espaçamentos interiores;
- sem margens exteriores;
- todos os li vão 'flutuar' para a esquerda - desta forma o menu deixa de ser vertical para passar a ser horizontal, graças a esta propriedade.

Ainda mais para dentro temos os links:
Código: 
#menu a {
    display:block;
    height:35px;
    overflow:hidden;
    text-indent:10000em;
    text-decoration:none;
    width:102px;
    margin:0px;
    padding:0;
    }
- vão ser apresentados como blocos, ou seja, o espaço "clicável" vai ser todo o espaço do botão;
- a mesma altura;
- overflow: hidden - obriga o texto dentro dos links, a desaparecer
- para ter a certeza que o texto não é visível, definimos um 'avanço' do texto muito grande. Tão grande que nunca seria visível nas resoluções que usamos.
- retiramos qualquer formatação ao texto
- aqui vamos indicar, pela primeira e única vez, o comprimento de cada botão: 102px;
- sem margens exteriores;
- sem espaçamentos interiores;

Definimos a função :hover dos links (que toma forma quando se passa o cursor sobre um link)
Código: 
#menu a:hover {
    background-position: 0 -35px;
}
O background (definido a seguir) vai mover-se 35px na vertical, para cima. O valor 0 é relativo à horizontal. O valor negativo serve para indicar um deslocamento da imagem de background por 35px para cima.

Definimos, com um id (opt), cada botão (no meu caso só vou usar um id)
Código: 
#menu #opt {
    background-image: url('imagens/menu.gif');
    }
E finalmente definimos uma classe de 'seleccionado' para usarmos no menu:
Código: 
#menu .select {
    background-position: 0 -70px;
}
Esta classe vai fazer com que a imagem esteja deslocada 70px para cima, que é onde se encontra a nossa 3ª imagem, dentro da mesma imagem.

Para melhor entender este processo:
255286868_680fd74135_o.jpg


Guardamos tudo e já devemos ter o menu activo!


_______________________________________________________
-------------- TERCEIRA PARTE: O QUE FALTA ;P ---------------

Para acabar já só falta definir o 'corpo' onde vai aparecer o texto e o 'footer'.
Atenção que, mais uma vez, estes dois divs têm a classe 'largura' que os obriga a ficarem centrados e com uma largura específica (já definida anteriormente).

Antes de mais nada, vamos adicionar o conteúdo no HTML:
Código: 
<div id="corpo">
    <div id="post" class="largura">
    <h1>Exemplo</h1>
    <p><img src="http://static.flickr.com/114/307976469_a3d8d97d0c_s.jpg" id="foto" />Mauris tincidunt pretium urna. Ut pede. Curabitur libero dolor, ultricies ac, consequat ut, imperdiet non, mauris. Vivamus varius purus ac mauris. Nulla magna eros, dictum vel, consectetuer non, vestibulum aliquet, urna. Maecenas pretium nunc sed mauris fringilla tincidunt. Nullam placerat, sapien ac cursus ultricies, mauris dui laoreet purus, eu consequat nisi quam in urna. Aenean ipsum purus, tincidunt pellentesque, iaculis nec, elementum imperdiet, quam.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eget est eget orci cursus vulputate. Sed accumsan condimentum risus. Aenean neque. Integer sed leo. Integer non eros. Donec eu purus id tortor vehicula volutpat. Sed at justo. Vivamus tempus nibh a mauris. Maecenas ultricies, elit et interdum elementum, nibh purus blandit tortor, lacinia cursus metus nunc ac nisi. Phasellus ultrices tortor nec est. Nullam luctus accumsan turpis. Sed facilisis magna ut sapien. Proin eget libero. Quisque vel metus. Ut non urna ut leo pulvinar ultrices. Sed pharetra lobortis velit. Vivamus et lorem at nibh blandit congue.<br />Praesent dictum pulvinar est. Pellentesque dapibus, purus sit amet adipiscing feugiat, lorem elit bibendum metus, a pretium erat neque eget felis. Proin in odio quis magna convallis egestas. Mauris in velit. Aenean in velit.</p>
    </div>
</div>
Definimos as partes que o compõem:
Código: 
#corpo {
    background:#303538 url('imagens/corpo.gif') 0% 100% repeat-x;
    margin:0 0 10px 0;
    padding:5px;
    }
#corpo p {
    margin:20px 0;
    text-align:justify;
    }
#corpo h1 {
    color:#999999;
    font-weight:normal;
    }
#post {
    padding-bottom:20px;
    }
O corpo tem uma imagem de background (gradiente de fundo - link) e uma cor para ocupar o espaço superior.

309520581_b97bec668d_o.gif




E finalmente o footer:
Código: 
<div id="footer" class="largura">
Nenhum direito reservado<br />
<a href="http://www.keoshi.com/">keoshi.com</a>
</div>
CSS do footer:
Código: 
#footer {
    font-size:0.9em;
    color:#7a7571;
    text-align:right;
    }
#footer a {
    color:#6a6762;
    text-decoration:none;
    }
#footer a:hover {
    text-decoration:underline;
    }
Alinhamos o texto à direita e atribuímos-lhe cores e tamanhos, o qual se encontra dentro do div.

Como extra, coloquei uma pequena imagem e aqui fica o código CSS que a formata:
Código: 
#foto {
    padding:1px;
    background-color:#cfcfcf;
    border:5px solid white;
    float:right;
    margin:0 0 10px 10px;
    }
http://dev.keoshi.com/tutor/ - aqui está a página final online
 
Última edição:
Excelente tutorial keoshi.
É sempre bom quando o pessoal que percebe disto a montes não tem qualquer problema em partilhar os seus conhecimentos com o resto do pessoal.

Uma sugestão, não tens como colocar o exemplo online para podermos vê-lo a funcionar?

Grande trabalho, continua!!!

Cumps,
 
Última edição:
Também as páginas em PHP tem como base o HTML portanto a resposta rápida é sim.

A resposta longa é, depende como integras o PHP no HTML. Tens que ter isso em consideração.
 
Inicie sessão ou registe-se para poder participar.
Back
Topo