Scribd
Carregar
230 visualizações5 páginas

Criando Um Site

O documento fornece instruções passo-a-passo para criar um site simples com HTML, CSS e PHP, começando com o layout e estrutura de pastas, definindo estilos com CSS, adicionando um menu interativo usando PHP e explicando como carregar páginas dinamicamente de acordo com os itens do menu.

Enviado por

borbar00
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato DOCX, PDF, TXT ou leia on-line no Scribd
230 visualizações5 páginas

Criando Um Site

O documento fornece instruções passo-a-passo para criar um site simples com HTML, CSS e PHP, começando com o layout e estrutura de pastas, definindo estilos com CSS, adicionando um menu interativo usando PHP e explicando como carregar páginas dinamicamente de acordo com os itens do menu.

Enviado por

borbar00
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato DOCX, PDF, TXT ou leia on-line no Scribd
Você está na página 1/ 5

Criando um site: Layout 1

Estarei ensinando nos próximos posts a criar um site completo, com um layout simples,
mas funcional.

Os recursos utilizados serão: html – css – php – photoshop

Segue, abaixo, o layout do site que criaremos.

Este layout foi desenhado no fireworks, mas poderia ter sido feito no photoshop, corel
draw ou qualquer outra ferramenta de edição de imagem.

Com base nessa imagem, iniciamos com o código html.

Código:

<div id="tudo">
<div id="cabecalho"></div>
<div id="menu"></div>
<div id="conteudo"></div>
</div>

Próximo post, definindo as dimensões do nosso site.

Criando um site 2

O nosso site será criado dentro da área útil de uma resolução de monitor de 1024 x
768px. A área útil aproximada é de 950 x 500px.
Antigamente usava-se muito a resolução de 800 x 600px devido a limitação das placas
de vídeos e do tamanho da tela dos monitores.

Podemos afirmar que, atualmente, mais da metade dos usuários utilizam uma resolução
igual ou maior que 1024px.

No primeiro post eu disponibilizei um código inicial para o desenvolvimento deste


website.

index.php

<!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" />
<!-- arquivo css -->
<link href="estilo.css" rel="stylesheet" type="text/css" />
<title>Criando um website</title>
</head>
 
<body>
<div id="tudo">
<div id="cabecalho"></div>
<div id="menu"></div>
<div id="conteudo"></div>
</div>
</body>
</html>

Vamos precisar criar um arquivo .css para configuração dos elementos do site. Um
arquivo css externo fica melhor de visualizar e dar manutenção.
A chamada do arquivo .css é feita dentro da tag head do arquivo index.php.

estilo.css

#tudo{
 
}
 
#cabecalho{
 
}
 
#menu{
}
 
#conteudo{
 
}

Arquivo .css com alguns dados para ajustar o tamanho do site.

#tudo{
width:900px; /* valor dentro da area util */
margin:0 auto; /* centraliza o site */
}
 
#cabecalho{
background-color:#000033; /* cor de fundo */
height:120px; /* altura do site */
color:#FFFFFF;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
line-height:120px; /* alinhamento vertical */
}
 
#menu{
background-color:#FFFF00; /* cor de fundo */
width:270px; /* largura do menu */
float:left;
}
 
#conteudo{
background-color:#FF0000; /* cor de fundo */
float:right;
width:620px; /* largura da area de conteudo */
}

Eu não estarei aprofundando em css. Para aqueles que querem aprender, temos o site do
Maujor como uma ótima referência para aprendizado de css.

Próximo post: Criação do Menu, Vamos utilizar css e javascript.

Criando um site 3

Criando o menu para o nosso site…

Dentro do div menu iremos utilizar as tags ul e il.

<div id="tudo">
<div id="cabecalho">BEM-VINDO AO NOSSO SITE</div>
<div id="menu">
<ul>
<li>&raquo; Home</li>
<li>&raquo; Fotos</li>
<li>&raquo; Notícias</li>
<li>&raquo; Eventos</li>
</ul>
</div>
<div id="conteudo"></div>
</div>

As tags ul e il serão formatadas no css.


#menu ul li{
list-style:none; /* utilizado para tirar os símbolos padrões das listas não
ordenadas */
font-family:Arial, Helvetica, sans-serif; /* tipo de fonte */
padding-bottom:12px; /*espaço entre os itens do menu */
}

Criando um site 4

Vamos adicionar links para que ao clicar nos itens de menu o conteúdo das paginas
sejam exibidas dentro do div conteudo.

Utilizamos a tag a com o atributo href. Antigamente, usava-se muito a tag frame para o
carregamento de páginas em uma determinada área do site.

No site que estamos criando vamos utilizar o php para fazer a chamada das páginas
correspondente aos itens de menu. Não será preciso colocar a extensão do arquivo, pois
o php encarregará de localizar se o arquivo é .html ou .php.

Explicarei a sua utilização no próximo post.

<ul>
<li>&raquo; <a href="?pagina=home">Home</a></li>
<li>&raquo; <a href="?pagina=fotos">Fotos</a></li>
<li>&raquo; <a href="?pagina=noticias">Notícias</a></li>
<li>&raquo; <a href="?pagina=eventos">Eventos</a></li>
</ul>

Dentro da div conteudo será preciso colocar o seguinte código:

<div id="conteudo">
<?php require ('conteudo.php'); ?>
</div>

Explicando:
Como funcionará o nosso menu… por exemplo: quando clicar no item eventos, a página
será recarregada passando o valor eventos para a variável pagina definido dentro da tag
a href.

O arquivo conteudo.php conterá um script que receberá este valor e fará a chamada da
página, retornando os seus dados dentro da div conteudo.

Criando um site 5

Como foi dito no post anterior, irei explicar o código a ser inserido dentro do arquivo
conteudo.php.

É bem simples, a explicação está dentro do código em forma de comentário.


<?
// variável que receberá o valor passado pelo a href do index.php
$pagina = $_GET['pagina'];
 
// verifica se a variável está vazio
if($pagina=='')
include ('principal.html');
// se não estiver vazio, verifica se o arquivo tem extensão .html
elseif(file_exists($pagina.'.html')){
include($pagina.'.html');
}
// se não for .html, verifica se o arquivo tem extensão .php
elseif(file_exists($pagina.'.php')){
include($pagina.'.php');
}
// nehuma das condições acima, exibe a pagina principal
else
include ('principal.html');
?>

Observação: a altura do menu e da área de conteúdo são ajustados conforme a


quantidade de informações.

Se você quiser destacar um item de menu ao clicar, tem um post no site falando sobre
isso. Acesse clicando aqui.

Não deixe de ler:

Criando um site 6

Você também pode gostar