Agora que ja temos uma boa noção de HTML (quem não conhece a linguagem, veja a matéria anterior), vamos começar a montar nosso site, que vai se chamar Mais Música. Será um site de uma loja de cd's/dvd's.
Primeiro, é bom ter uma idéia da estrutura do nosso site: quantas paginas o site terá? Que pagina vai ter link para que página? Estas perguntas compõem a Arquitetura do Site. Vou seguir o modelo de arquitetura usado no artigo Layout parte 1 (quem quiser assessar o post completo clique aqui).
A estrutura do nosso site ficará assim:
Então vamos lá, definir o layout do nosso site. Abra seu editor html ou bloco de notas. Eu vou usar o Dreamweaver CS5. Você pode adquiri-lo no site da Adobe, junto com o pacote Adobe Creative Suite 5 Web Premium. Neste link você baixa a versão trial, para teste.
Bom, quando abrimos o Dreamweaver, temos esta página:
Clique em HTML na coluna Create New, e vai abrir um novo documento html.
No bloco de notas, digite:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mais Música</title>
</head>
<body>
</body>
</html>
Como vimos na primeira matéria, todo conteúdo do site deve estar dentro das tags <body></body>. Salve como index.html, em uma pasta dentro dos meus documentos. Vamos chama-la de Mais Música, que é o nome do site.
Agora crie um novo documento (CRTL N) e selecione CSS Styles. Salve como estrutura.css na pasta Mais Música. Se você quer conhecer mais sobre a linguagem de CSS, conheça o site do maujor.com .
Faça o mesmo no bloco de notas, crie um novo arquivo na pasta Mais Música com o nome de estrutura.css.
Você pode usar o estrutura.css dentro do index.html durante o desenvolvimento do site. Depois do término do site vc tira a folha de estilos e coloca em um arquivo separado.
No Dreamweaver CS5, você pode trabalhar com os dois ao mesmo tempo. Abra o index.html, no menu lateral, clique em CSS Style.
Na parte de baixo da janela clique em Attach Style Swett, é um icone de correntinha.
Agora escreva na caixa de seleção Flie/URL estrutura.css e de ok Você pode clicar em Browse e procurar pelo arquivo Css nos seus documentos.
Pronto, seu index esta ligado com o estrutura.css.
Agora podemos montar nossa estrutura de layout no Css. Abra o arquivo estrutura.css. Vamos definir os componentes do CSS.
Body
Tudo: conteúdo total da página
Topo: parte de cima do site
Menu: onde irão os links
Lateral: menu lateral e outros
Principal: onde colocaremos os textos e imagens da pagina
Coluna1/Coluna2/Coluna3: usaremos para colocar as informações da pagina no lugar exato.
Rodapé: parte de baixo da pagina
Com o estrutura.css aberto, digite o seguinte:
body { margin:10px 15px; /* distancia que a página terá em cima e na esquerda, respectivamente */ font: 12px Arial, Helvetica, sans-serif; /* tamanho e tipo de fonte usada na página */
background:#ffe; /* cor de fundo da página */text-align:center; /* o texto estará alinhado no centro */ } #tudo {
width:760px; /* largura total do conteúdo da página */text-align:left; margin:0 auto; /* o texto estará alinhado à esquerda, sem margem */
} #topo { height:80px; /* altura total do topo */ background-color:#df7ddf; /* cor de fundo */ } #principal {
width:578px; background-color:#9cf;
float:right; /* esta coluna flutuara para a direita */ } #lateral { width:180px; background-color:#ffbe7d; float:left; /* esta coluna flutuara para a esquerda */ } #principal * { padding: 0 20px; /* afasta o conteúdo alguns pixels do limite interno do seu container */
} #navegacao * {padding: 0 8px; /* afasta o conteúdo alguns pixels do limite interno do seu container */
} #rodape { clear:both; height:20px; background-color:#b5daa2;
}
Agora no index.html, (no Dreamweaver, clique em Code), digite entre as tags <body></body> o seguinte:
<div id="tudo">
<div id="topo">topo</div>
<div id="principal">principal</div>
<div id="lateral">lateral</div>
<div id="rodape">rodape</div>
</div>
No Dreaaweaver você pode visualizar sua pagina clicando em design. Se vc está usando o bloco
de notas, salve, vá até a pasta Mais Música, no Meu documentos e abra o index html com seu
navegador preferido ( explorer, firefox, crome, etc.).
O resultado será este no Dreamweaver:
E este no internet explorer 8, abrindo direto na pasta Mais Música ou apertando F12 no Dreamweaver:
É importante você testar suas páginas em vários navegadores, mas tente se manter fiel ao navegador que o público de seu cliente mais usa. Usar o internet explorer é uma das melhores soluções, pois ainda é o navegador mais utilizado.
Beleza galera? Na próxima matéria iremos trabalhar com o fireworks, para adicionar imagens e efeitos ao nosso layout. Um abraço e até a próxima.
Nenhum comentário:
Postar um comentário