Oi, como vai você? Bem, não tem muito o que explicar sobre o que eu vou falar para vocês hoje. Eu vou começar a publicar alguns tutoriais sobre como montar um site em PHP e CSS. Recomendo que você saiba o básico de PHP e CSS, para eu não ter de responder dúvidas idiotas como "Como é uma tag em PHP?", pois eu não irei responder esse tipo de questão. Para dúvidas de gente decente, comentem que eu irei responder o mais rapido possível! Outra pergunta que não irei responder "Por que você não faz uma video-aula?". Simples, se você tem preguiça de ler este tutorial não merece o conhecimento que estou dando a você. Vou dar um exemplo de como será o site que ensinarei vocês a fazer.
Bom, para começar vamos criar a index. Crie um novo documento em PHP com o nome de "index.php" e salve. Nesta página iremos mecher pouco, apenas adicione abaixo do trecho <body> o seguinte código:
<?php
include "header.php";
include "outer.php";
include "footer.php"
?>
Salve. O que são essas tags? A tag include "puxa" o conteúdo das páginas header.php/outer.php/footer.php. Porém, agora não há nada para ela puxar, pois você ainda não criou essas páginas. A primeira página que iremos criar será a "header.php".
Nesta página iremos adicionar o css da header e os widgets. O site que eu estou criando terá um sistema de login (que eu não irei explicar como faz nessa aula), uma publicidade e um logo na header. Cada um desses elementos será posto em uma div. Crie um novo documento PHP e salve com o nome "header.php". A primeira parte, como eu mencionei acima, é adicionar o css da header. Antes da tag <body>, e, após a tag </head> adicione o trecho a seguir:
include "css.php";
Essa tag faz o mesmo que a tag da index, porém ela "puxa" o css da header, não a header inteira. No css iremos arrumar o posicionamento das divs, adicionar as imagens e etc.
Agora, abaixo da tag <body> iremos adicionar as divs. Lembrando que eu irei adicionar apenas 3 divs para minha header, se você for usar mais ou menos gadgets, você deve editar o código que irei postar.
<div id="header">
<div id="logo"> /* logo */
<a href="index.php"><img src="img/logo.png" /> </a>
</div>
<div id="publicidade"> /* banner 468x60 de pub */
<ul>
<a href="http://www.designonspace.net" target="_blank"><img src="http://i46.tinypic.com/eqvyfr.png" title="Design On Space, sempre o melhor em webdesign para você!" border="0"></a>
</ul>
<div id="login"> /* meu tableless de login */
<form method="post" action="valida.php">
<label>Nick_ </label>
<input type="text" name="usuario" maxlength="50" /><br />
<label>Senha</label>
<input type="password" name="senha" maxlength="50" />
<input type="submit" value="Entrar" />
</form>
</div>
</div><div id="header"> - Essa div é a que vai segurar a imagem da header, como se fosse um site do blogger. Ela também posiciona a header, adiciona borda, margem, etc.
<div id="logo"> - Esse é o meu logotipo, você pode adicionar ele na imagem da header, porém, eu prefiro deixar separado para quando a pessoa clicar nele, voltar para a index.
<div id="publicidade"> - Essa é a div que irei usar para adicionar um banner 468x60 no meu site.
<div id="login"> - Sistema de login simples, apenas para dizer que você está logado. Irei ensinar a fazer este sistema de login em breve, em outro tutorial!
Essas são as minhas divs, caso você queira adicionar outra div, adicione o seguinte código:
Conteúdo da div
</div>
Após ter editado tudo, salve. Essa é a nossa header, se você visualizar o site agora você verá códigos demonstrando erro no footer.php e no outer.php, pois ainda não o criamos, e seus divs todos desorganizados. Iremos arrumar isso mais tarde no CSS.
Agora iremos criar a "outer.php". Nessa página iremos criar o nome das páginas, como, por exemplo, http://jorgelinhares.net/index.php?local=03 que equivale à equipe.php ou contato.php ou algum outro link. Por que usar isso? Para reduzir os links. Abaixo de <body> adicione o seguinte código:
<?php
switch ($_GET['pag']){
case 'equipe';
include "equipe.php";
break;
case '02';
include "contato.php";
break;
case '03';
include "sobremim.php";
break;
default:
include ("home.php");
break;
}
?>Entendendo o código:
switch ($_GET['pag']){ - Da o nome a parte anterior ao numero, como, por ex: "?local=03" ou, nesse caso "?pag=03"
case '02'; - Número ou palavra que aparecera após o nome que você escolheu no código superior. Por ex: "?pag=02".
include "contato.php"; - "Puxa" a página e o conteúdo dela. A verdadeira outer.
Aqui eu trabalhei com apenas três páginas. Para adicionar mais páginas, adicione o código abaixo
include "página onde o conteudo vai estar arquivado";
break;
As páginas onde o conteúdo fica arquivado serão criadas na próxima aula. Agora, vamos criar o "footer.php". Ele será como a "header.php" terá a div pra por imagem de fundo, e, se você quiser, pode adicionar alguma div com publicidade, menu extra, etc.
Crie um documento PHP e salve ele como "footer.php". Agora, adicione o seguinte trecho acima de <body>:
include "css.php"
?>
Esse código, como dito anteriormente, é usado para "puxar" o CSS e adicionar imagens, margens, etc. Agora, iremos adicionar as divs. No mesmo estilo da header.php, porém, como eu não adicionarei nada no meu footer, apenas os créditos, adicionarei apenas duas div, a da imagem. Abaixo da tag <body>, adicione o seguinte código:
<div id="creditos">
Template feito por OTH! Todos os direitos reservados!
</div>
</div>
Salve. Pronto, a estrutura básica de nosso site foi construida. Agora, basta adicionar o CSS e criar as outras páginas. Quando a página do facebook tiver 120 "curtidas" eu irei publicar a próxima aula. Comentem e obrigado por terem lido este post até aqui!