psd to html
TRANSCRIPT
PASTAS = DIV'S
agrupe as layers seguindo o mesmo padrão de div's no HTML, separe as pastas por cores de acordo com as sessões.
ÍCONES SÃO SERES SENSÍVEIS.ícones são separados por famílias e tamanhos, portanto não os redimensione.
DOCUMENTE O LAYOUT
Crie um manual para informar ao desenvolvedor os padrões do layout, tipografias, corpo dos textos, cores, links e seus estados...
HTML, E AGORA?
Linguagem de marcação, usa-se tags para dar significado ao conteúdo. ex: <p>conteúdo como parágrafo</p>
ESTRUTURA DE BASE
<html><head>
<title>Título da Página</title></head><body>
Seu conteúdo aqui...</body></html>
EXEMPLOS TAG'S<p>Parágrafo</p><h1>Título de maior importância</h1><div>Divisão no conteúdo</div><img>
WEB STANDARDS
Web Standards é um conjunto de normas, diretrizes, recomendações, notas, artigos, tutoriais e afins de caráter técnico, produzidos pela W3C.É destinado a orientar fabricantes, desenvolvedores e projetistas para o uso de práticas que possibilitem a criação de uma Web acessível a todos.
SINTAXE CSSseletor { propriedade:valor; }
seletor - elemento html - identificadores (class, id)propriedade - o que será alteradovalor - valor de alteração
body{background-color:#cccccc;font-family: Arial;
}
EXEMPLOSwidth: 960px;height: 300px;background-color:#CCC;background-image: url(images/bg-body.png);background: #CCC url(images/bg-body.png);margin-left; 15px;margin:10px 5px 5px 10px;padding-top: 5px;padding: 5px 10px 10px 5px;float: left;clear:both;
EXEMPLOSposition: absolute;top:10px;left:20px;color: #CC9900;font-size: 12px;font-family: Verdana;font-weight: bold;line-height: 1.5em;