Que pagina vai ter link para que pagina? Estas perguntas compoem 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 ficara assim:Entao vamos la, definir o layout do nosso site. Abra seu editor html ou bloco de notas. Eu vou usar o Dreamweaver CS5. Voce pode adquiri-lo no site da Adobe, junto com o pacote Adobe Creative Suite 5 Web Premium. Neste link voce baixa a versao trial, para teste.Bom, quando abrimos o Dreamweaver, temos esta pagina:Clique em HTML na coluna Create New, e vai abrir um novo documento html.Digite no campo Title: Mais Musica. 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 Musica</title></head><body></body></html> Como vimos na primeira materia, todo conteudo 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 Musica, que e o nome do site.Agora crie um novo documento (CRTL N) e selecione CSS Styles. Salve como estrutura.css na pasta Mais Musica. Se voce quer conhecer mais sobre a linguagem de CSS, conheca o site do maujor.com .Faca o mesmo no bloco de notas, crie um novo arquivo na pasta Mais Musica com o nome de estrutura.css. Voce pode usar o estrutura.css dentro do index.html durante o desenvolvimento do site. Depois do termino do site vc tira a folha de estilos e coloca em um arquivo separado.No Dreamweaver CS5, voce 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, e um icone de correntinha.Agora escreva na caixa de selecao Flie/URL estrutura.css e de ok Voce 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.BodyTudo: conteudo total da paginaTopo: parte de cima do siteMenu: onde irao os linksLateral: menu lateral e outrosPrincipal: onde colocaremos os textos e imagens da paginaColuna1/Coluna2/Coluna3: usaremos para colocar as informacoes da pagina no lugar exato.Rodape: parte de baixo da paginaCom o estrutura.css aberto, digite o seguinte:body { margin:10px 15px; /* distancia que a pagina tera em cima e na esquerda, respectivamente */ font: 12px Arial, Helvetica, sans-serif; /* tamanho e tipo de fonte usada na pagina */ background:#ffe; /* cor de fundo da pagina */text-align:center; /* o texto estara alinhado no centro */ } #tudo { width:760px; /* largura total do conteudo da pagina */ text-align:left; margin:0 auto; /* o texto estara alinhado a 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 conteudo alguns pixels do