Criando um site passo-a-passo 2
Autor: Rodrigo Zan | Publicado: 2010-12-23T05:58:00-08:00

Fala galera!

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.


Digite no campo Title: Mais Música. 

No bloco de notas, digite:

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;Mais Música&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;/body&gt;
&lt;/html&gt; 

Como vimos na primeira matéria, todo conteúdo do site deve estar dentro das tags &lt;body&gt;&lt;/body&gt;. 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.


&nbsp;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.



&nbsp;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 {&nbsp;&nbsp;margin:10px 15px; /* distancia que a página &nbsp;terá em cima e na esquerda, respectivamente */ &nbsp;&nbsp;font: 12px&nbsp;&nbsp;Arial, Helvetica, sans-serif; &nbsp;/* tamanho e tipo de fonte usada na página */&nbsp;background:#ffe; /* cor de fundo da página */text-align:center;&nbsp;/* o texto estará alinhado no centro */&nbsp;}&nbsp;#tudo&nbsp;{&nbsp;&nbsp;width:760px; /* largura total do conteúdo da página */&nbsp;text-align:left;
 margin:0 auto;&nbsp;/* o texto estará alinhado à esquerda, sem margem */&nbsp;}&nbsp;#topo {&nbsp;&nbsp;height:80px; /* altura total do topo */&nbsp;background-color:#df7ddf; /* cor de fundo */&nbsp;}&nbsp;&nbsp;#principal {
 width:578px;&nbsp;&nbsp;background-color:#9cf;&nbsp;&nbsp;float:right; /* esta coluna flutuara para a direita */&nbsp;}&nbsp;#lateral {&nbsp;&nbsp;width:180px;&nbsp;&nbsp;background-color:#ffbe7d;&nbsp;&nbsp;float:left; /* esta coluna flutuara para a esquerda */&nbsp;}&nbsp;#principal * { &nbsp;&nbsp;padding: 0 20px;&nbsp;/* afasta o conteúdo alguns pixels do limite interno do seu container */&nbsp;}&nbsp;#navegacao * {&nbsp;padding: 0 8px;&nbsp;/* &nbsp;afasta o conteúdo alguns pixels do limite interno do seu container */&nbsp;}&nbsp;#rodape {&nbsp;&nbsp;clear:both;&nbsp;height:20px;&nbsp;&nbsp;background-color:#b5daa2;
 }
Agora no index.html, (no Dreamweaver, clique em Code), digite entre as tags &lt;body&gt;&lt;/body&gt; o seguinte:
&lt;div id="tudo"&gt;&lt;div id="topo"&gt;topo&lt;/div&gt;&lt;div id="principal"&gt;principal&lt;/div&gt;&lt;div id="lateral"&gt;lateral&lt;/div&gt;&lt;div id="rodape"&gt;rodape&lt;/div&gt;&lt;/div&gt;No Dreaaweaver você pode visualizar sua pagina clicando em design. Se vc está usando o bloco&nbsp;de notas, salve, vá até a pasta Mais Música, no Meu documentos e abra o index html com seu&nbsp;navegador preferido ( explorer, firefox, crome, etc.).&nbsp;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.