Construindo uma página

Yuki 18.04.08 6:59

Tutorial simples sobre como construir páginas em PHP /o/

Pra começar, vamos analisar parte por parte as 3 coisas que compoe uma página PHP, e vamos começar por aqui:

header.php - é onde vai o todo o código CSS, o menu, as DIVs q alinham o conteudo do blog/site, ou seja, tudo que será comum para todas a páginas vai aqui, aliás, é mais fácil dizer q praticamente todo o código vai aqui! Então, pra começar, crie uma nova página, no seu servidor, denominada header.php, e dentro dessa página, colocará o seguinte:

<html>
<title>titulo do blog</title>
<head>

códigos CSS, scripts...

</head>
<body>

<div de alinhamento do conteudo>

e deu, para por aí, agora é só salvar a página, assim mesmo, e pra entender melhor, vo por como exemplo o header do meu blog:

<html>
<title>Starry Colors</title>
<head>

<script type="text/javascript" src="http://www.haloscan.com/load/starrycolors"> </script>

<STYLE type=text/css>
P, body, td, tr, div {
font-style: normal;
font-weight: normal;
font-size: 11px;
color: #ffffff;
text-align: justify;
font-family: tahoma;
line-height: 12px;
}
body {scrollbar-face-color: #26466c;
scrollbar-highlight-color: #26466c;
scrollbar-3dlight-color: #26466c;
scrollbar-darkshadow-color: #26466c;
scrollbar-shadow-color: #26466c;
scrollbar-arrow-color: #2b8cdf;
scrollbar-track-color: #000000;
cursor: nw-resize;
;
}

a{cursor:default; height:0px; behavior:url('pixel.htc'); filter:progid:dximagetransform.microsoft.fade(duration=0.7)}
a:link{color:#5795ba; text-decoration:none;}
a:visited{color:#5795ba; text-decoration:none;}
a:active{color:#3e86ab; text-decoration:none;}
a:hover {color: #3e836e; text-decoration: none; cursor: crosshair; font-weight: none}

b{ text-decoration: bold; color: #f3a47c; cursor: crosshair; }
i{ text-decoration: none; color: #65b997; cursor: crosshair; }
u{ text-decoration: none; color: #88918d; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #64bdf6; cursor: crosshair; }

p {font-size: 30px;
font-family: georgia;
color: #357ea0;
background-image: url('http://boxstr.com/files/1703994_vcjld/top3.png');
text-align: right;
line-height: 5px;
padding-bottom: 15px;
border-bottom: 1px dotted #ffffff;
}
p:first-letter {color: #72c2ee;
font-family: georgia;
font-size: 30px;
}

</STYLE>

</HEAD>

<BODY bgColor=#000000;>

<DIV class=side style="RIGHT: 0px; POSITION: absolute; TOP: 0px; HEIGHT: 49px; widht: 540">
<IMG src="http://www.boxstr.com/files/1702422_qcsev/soft.jpg"></DIV>

<DIV class=side style="Left: 470px; WIDTH: 521px; POSITION: absolute; TOP: 626px; HEIGHT: 125px; widht: 540">
<br><br>

<p>Welcome</p>
Olá, seja, <i>bem-vindos</i> ao <b>Starry Colors</b>, um blog pessoal, sem fins lucrativos, onde posso colocar um pouco sobre a minha vida e meu trabalho com <u>webdesign</u>! O blog está no ar desde <u>28/02/2008</u> e é hospedado no
<a href="http://awardspace.com" target="_blank">Awardspace</a>! Atualmente está na sua <i>6ª versão</i>, para <i>ouvir</i> a música é só <u>clicar</u> no botao que corresponde ao <i>"play"</i> e para navegar, e só utilizar o menu abaixo^^!<br><br>

<center><a href="http://starry-colors.awardspace.com" class="classe2">index</a>
<a href="http://starry-colors.awardspace.com/yuki.php" class="classe2">yuki</a>
<a href="http://starry-colors.awardspace.com/blog.php" class="classe2">blog</a>
<a href="http://starry-colors.awardspace.com/links.php" class="classe2">links</a>
<a href="http://www.beyond-forum.forumeiros.com" target="_blank" class="classe2">fórum</a>
<a href="http://starry-colors.awardspace.com/extra.php" class="classe2">extra</a>
</center><br>

Faça uma <b>boa visita</b>^^, espero que volte sempre \o/!<br><br>

acho q ja deu pra entender neh? xD (eu dei um encolhida nele, pq eh mto grande, mas é só pra vcs entenderem mesmo! E ah, midi players vai aqui tb!)

Agora, vamos a segunda coisa q temos de saber:

footer.php - é onde finaliza o código

essa parte eh bem simples, crie uma página nova no seu servidor com o nome de footer.php e coloque o seguinte:

</div>
</body>
</html>

é só isso mesmow? o_o...é sim pessoas xD! E agora vamos a terceira parte, q eh montar a página, e ai q vai entrar a colocação do conteudo:

crie uma nova pagina como o nome de index.php e coloque o seguinte

<? include('header.php'); ?>

conteúdo do blog/site vai aqui!

<? include('footer.php'); ?>

e daí é só salvar e abrir pra ver como ficou, se ta direitinho tudo, entao parabens, sua primeira página em PHP /o/! Agora, vá fazendo a mesma coisa com a págona do perfil e talz...sempre usando o código acima! E quando quiser mudar algo, trocar de layout, basta mexer apenas no header, q muda em todas as páginas! Prático nao?^^

Loui 06.05.08 1:19

Desde que eu criei o meu blog eu nunca alterei a Footer.php 8D

Talvez porque ela seja a única parte não-editável.

Yuki 06.05.08 1:30

sim, lá só se poe a finalizaçao do código xD!

Conteúdo patrocinado

Construindo uma página

Construindo uma página

Re: Construindo uma página

Re: Construindo uma página

Re: Construindo uma página