DESENVOLVENDO UM SITE TABLELESS COMPLETO COM PHP E MYSQL

Nesta série de artigos desenvolveremos um site completo com notícias. Para isso você precisa estar com o wamp instalado no seu computador. Trabalharemos o layout com CSS. O banco de dados vai ser exclusivamente para as noticias do site. Será con

Ola Pessoal!


Nesta série de artigos desenvolveremos um site completo com notícias. Para isso você precisa estar com o wamp instalado no seu computador. Trabalharemos o layout com CSS e o banco de dados vai ser exclusivamente para as notícias do site. Será construído tambem um gerenciador de notícias para o responsável do site cadastrá-las.


Para compor o layout utilizaremos DIV e CSS.


Veja o resultado:





Neste primeiro artigo vamos inciar com a cor de fundo do site e também centralizar o conteudo (parte degradê lilás).

Para iniciar crie a página index.php e salve dentro do diretório wamp/www/nome_da_pasta (evite espaços em branco, acentuação, etc).

E também crie uma folha de estilo chamada de style.css salve no mesmo lugar.

Na página index.php coloque o conteudo abaixo:
___________________________________________________________________________________
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">  // aqui referencio a folha de estilo que vou utilizar
<title>EXEMPLO SITE COM DIV</title>
</head>
<body>
<div class="content">    
     <div class="cotent_site">
           TESTE
     </div>
</div>
</body>
</html>
___________________________________________________________________________________
No primeiro div chamado content eu centralizo a estrutura inteira do site, conteúdo e rodapé. No segundo content_site eu coloco o fundo degradê (lilás) onde teremos topo, menu, texto da empresa e news. Feito isso partimos para o estilo, você pode observar que no conteúdo do style.css temos no BODY:

BODY {
margin-top:30px; //deixar o site com margin de 30px do navegador. Somente no topo.
background-color:#F6F6F6; // COR DE FUNDO PARA O SITE
}

Ápos eu coloco um estilo para a div content que tem a função de centralizar minha estrutura.

.content{
float: left;
position: relative;
left: 50%;
margin-left: -475px;
width:955px; //tamanho do conteudo (parte lilas)
}

Feito isso coloco o estilo para a div content_site que é a parte do site onde tem o logotipo da empresa, o menu , texto da empresa, imagens e news(noticias). Nesta div, colocamos para repetir a imagem lilás:

.cotent_site{
width : 955px;
float : left;
background-image : url(img/background.jpg);
background-repeat : repeat-x;
background-color : #E4BDD6; // esta cor vai aparecer quando a altura do conteudo ultrapassar a altura da imagem background.jpg
}

Voce pode gerar a imagem para repetir na largura de 1px e a altura que você desejar para o degradê e colocar repeat para o navegador repetir. Se for para repetir na horizontal coloque repeat-x, conforme eu coloquei.


Segue exemplo de imagem que utilizei:




Feito isso veja o resultado no navegador.



Não conseguimos ver o degradê pois escrevi tão somente a palavra TESTE. Evidentemente, se eu adicionar mais conteúdo, será possivel a visualização.

Como podemos ver na imagem, nossa estrutura esta centralizada, agora vamos fazer o rodapé, sendo que o restante do conteúdo iniciaremos no próximo artigo.


Para o rodapé acrescente o seguinte código na página index.php:


<div class="rodape">
     <div class="conteudo_rodape">
        RODAPE
     </div>
</div>


Então sua página index.php vai estar assim:

________________________________________________________________________

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">  -- aqui referencio a folha de estilo que vou utilizar
<title>EXEMPLO SITE COM DIV</title>
</head>
<body>
<div class="content">    
    <div class="cotent_site">
      teste
    </div>
    <div class="rodape">
       <div class="conteudo_rodape">
           rodape
       </div>
    </div>
</div>

</body>
</html>

________________________________________________________________________

Agora no style.css:


.rodape{
float:left;
bottom: 0;
width:955px;
}

Este código define a largura do rodape e deixa ele logo a baixo do conteúdo, rente ao navegador porisso bottom:0;.

Veja o exemplo:



Na imagem acima está visível o degradê e a localização do rodapé.

Bom, no próximo artigo montaremos o conteúdo do topo, logotipo e menu.

Atenciosamente, Luzia.

Qualquer dúvida escreva para zibi_b@hotmail.com

Até mais pessoal!

Artigos relacionados