Desenvolvimento de Pagina dinâmica (na unha)

[kall.max 0]

Estou analisando o meu projeto, onde criei está codificação :

<?php


$file = 'pagina'; //armazena o nome do arquivo

//Cria o arquivo

$newFile = fopen($file . '.php', 'w+');


if ($newFile):

// abre o arquivo colocando o ponteiro de escrita no final

    $file_insert = file_get_contents('./template.php');

    $arquivo = fopen($file . '.php', 'a+');

    if ($arquivo):

// move o ponteiro para o inicio do arquivo

        rewind($arquivo);

        if (fwrite($arquivo, $file_insert)): //Insere o conteudo na pagina criada

            echo 'Arquivo atualizado com sucesso';

        endif;

        fclose($arquivo);

    else:

        die('Não foi possivel abrir o arquivo' . $arquivo . '.php');

    endif;

else:

    die('Não foi possível criar o arquivo.');

endif;

E tambem de uma forma com menos codigo assim:

<?php


$file = 'beta';

$fn = "./template.txt";

if (copy ($fn, $file.'.txt')){

         die ("sucesso !!");

}else{

        die ("Erro ao copiar arquivo");

}


?>

Agora eu quero criar assim:

->eu terei um formulario em uma pagina na administração com nome_da_pagina, titulo_da_pagina, meta_key, meta_chave e content.

Explicação: (nome_da_pagina(ficara na url nome_da_pagina.php), titulo_da_pagina(será o titulo da pagina), demais palavras chaves e metas(busca robotica do mecanismos de busca), content(o conteudo que terá a nova pagina criada) ).

Ele ira abrir um arquivo chamado template.php(como no código acima) e pegar os dados do $_POST[] dos formulários gravar em uma pagina $temp e apos salva no banco com um insert, apos fazer o resgaste desses dados um uma pagina(page.php

Exemplo: está será a pagina do lado cliente:: com as funções para exibir o conteúdo vindo do banco. Seria +- assim que eu preciso criar.

<?php

static $tabela = 'page';

$pagina = $_GET['nome_da_pagina'];


switch($tela):

case $pagina;//passado por parametro atraves do clique no menu

$sql_seach = $pdo->prepare('SELECT * '.self::tabela.'WHERE nome_pagina='.$pagina);

$pdo->execute($sql_seach);

if($exite_dado_tab_menu AND $existe_dados_tab_page):

if($sql_seach):

    /*Faz a exibição do conteudo : como se fosse por parametro

     * Nesse caso ele abriria um arquivo com toda formatação por exemplo template.php

     * pegava o arquivos que viessem do banco e exibe na <div id="content">O conteudo que fosse carre

     * gado do banco ficaria aqui dentro</div>

     */

    else:

    /*carrega uma pagina de erro da mesma forma porém onde ficaria

     * <div id="content">Exibirá um frame de erro tipo uma pagina 404</div>

     */

endif;

else:

//Não faz nada pois não nehum novo conteúdo no banco.

endif;

break;

endswitch;

) para cliente(browser _ client ou seja a ação do lado cliente ) como base em um menu (terá um loop verificando cada novo conteúdo que terá na tabela menu no banco, sempre que existir um menu novo cadastrado no banco ele verifica:

tem menu, se sim verifica se há conteúdo a ser exibido em uma nova pagina, se ambos for sim

faz a exibição do menu e quando clicar no menu passa o parametro pra url e exibe a pagina.

Só que eu não to conseguindo codificar essa logica

Alguém poderia me auxiliar nesta criação ><

[Gabriel Heming 766]

Basicamente você está querendo fazer um sistema de cache, para que não busque os dados no SGBD a cada solicitação, isso?

[kall.max 0]

Basicamente você está querendo fazer um sistema de cache, para que não busque os dados no SGBD a cada solicitação, isso?

Eu quero que busque sim os dados no banco,

pegue os $_POS[''] do formulario e armazene no banco.

 

Depois na front-end(client) e chamo essas informações para exibir como eu mencionei acima.

Seria +- assim a pessoal entra no painel administrativo criar uma pagina com conteudo, depois cria um menu link a pagina criada no menu.

 

o cliente entra no site e la estará o menu ao clicar no menu exibi uma pagina com as informações vindo do banco.

 

na pratica é pra ser assim.

 

o problema está pra salvar está pagina no banco e resgatar essa informação 'por telas'.

[Prog 183]

Essa gambiarra toda serve pra que?

Não vejo benefício neste algoritimo. Pode explicar melhor?

 

Não seria mais simples ter uma página somente e passar um código para exibir o conteúdo?

 

Desculpe usar o termo gambiarra, perceba que até o outro amigo entendeu que você estaria criando este recurso para economizar (menos esforço no futuro). Porém, é justamente o contrário, você esta criando um recurso para gastar mais recurso (mais esforço no futuro).

[Gabriel Heming 766]

Exatamente como o Prog falou. Eu estava tentando entender o que estava fazendo, pois não faz sentido nenhum.

 

Uma página dinâmica consiste apenas na sua exibição e não "criar dinamicamente" páginas estáticas para posteriormentes serem exibidas.

 

No mais "cru" de uma página dinâmica, é apenas um "echo/print" do seu conteúdo, sem realmente existir uma página com esse conteúdo, apenas um output de informação.

 

Você, também, não deve salvar toda a página no SGBD. O template deve servir apenas como "molde" para as informações/conteúdo. As informações dinâmicas, essas sim salvas no SGBD, devem ser inseridas no template e, assim então, realizado o outro pro navegador.

 

Um melhor aperfeiçoamento, pode ser utilizar um sistema de templates, tal qual o popular Smarty

[kall.max 0]

Certo compleendo o que estão falando.

Desculpe estou tentando codificar esta logica(é a primeira vez que preciso criar uma opção no painel para criar, editar e excluir pagina. sempre fiz crud em usuarios, noticias, etc menos em pagina).

 

Então me ajude no seguinte o que eu quero é desenvolver uma função que me der a opção de criar a pagina no painel admin salvar no banco.

 

No front-end resgatar o valor do banco e exibir de acordo com o parametro passado pela url dentro da estrutura do site.

 

(por exemplo no wordpress, joomla etc.. tem essa opção de criar paginas).

 

vai ter la no site por exemplo: menu-> | home | empresa | confirmações | autenticidade | contato | dai eu quero criar o menu | orcamento | ->quando clicar em orçamento quero que faça a exibição do conteudo que eu tem no banco referente a orcamento na url quero que apareça por exemplo page.php?pagina=exibe&&titulo=orcamento e ter uma funçao para depois do paramentro adicinar .php ou .qualquer_coisa so por segurança. Certo eu poderia criar manualmente a pagina orcamento.php e fazer isso. Mas eu não quero assim quero que ela venho por parametro(manipulda ou algo assim).

 

Tem como eu fazer está opção no meu painel administrativo ?

 

 

----Respondendo a sua pergunta Prog-------

 

 

Essa gambiarra toda serve pra que?

Não vejo benefício neste algoritimo. Pode explicar melhor?

 

Não seria mais simples ter uma página somente e passar um código para exibir o conteúdo?

 

Desculpe usar o termo gambiarra, perceba que até o outro amigo entendeu que você estaria criando este recurso para economizar (menos esforço no futuro). Porém, é justamente o contrário, você esta criando um recurso para gastar mais recurso (mais esforço no futuro).

 

 

A explicaçao seria essa aqui é onde faz o varedura no banco de dados em busca de novo conteudo menu e arquivos na tabela do banco(menu e pagina) faz a verificação se existe conteudo se existir conteúdo novo exibe o conteudo se não existir ele não faz nada so exibe os que ja tinham:

<?php
static $tabela = 'page'; //
$pagina = $_GET['nome_da_pagina'];

switch($tela):
case $pagina;//passado por parametro atraves do clique no menu
$sql_seach = $pdo->prepare('SELECT * '.self::tabela.'WHERE nome_pagina='.$pagina);
$pdo->execute($sql_seach);
if($exite_dado_tab_menu AND $existe_dados_tab_page):
if($sql_seach):
/*Faz a exibição do conteudo : como se fosse por parametro
* Nesse caso ele abriria um arquivo com toda formatação por exemplo template.php
* pegava o arquivos que viessem do banco e exibe na <div id="content">O conteudo que fosse carre
* gado do banco ficaria aqui dentro</div>
*/
else:
/*carrega uma pagina de erro da mesma forma porém onde ficaria
* <div id="content">Exibirá um frame de erro tipo uma pagina 404</div>
*/
endif;
else:
//Não faz nada pois não nehum novo conteúdo no banco.
endif;
break;
endswitch;

Seria + - isso que esse codigo faz.

Quanto aos dois codigo de cima que tem "fopen" e "copy" é so um exemplo de criação de pagina estatica(cria arquivo, abrir outro que tenha dados copia e cola os dados no arquivo criado vazio. Esta é a função dos dois criar pagina dinamica com conteudo externo.

[Prog 183]

Certo, você quer criar uma administração de páginas. Isto ficou claro agora.

Você usou como exemplo ferramentas como Wordpress e Joomla, porém, como nessas ferramentas, o que ocorre, e provavelmente o melhor caminho a ser seguido, é algo mais ou menos assim:

 

Você possui uma página MESTRE, vamos chama-lá aqui de TEMPLATE. Esse TEMPLATE, dentre outras coisas, monta todas as suas páginas internas baseadas no que você tem cadastrado no Banco de Dados.

 

Para cada página você deve associar um identificador que estará relacionado a um item do seu MENU, também cadastrado no seu Banco de Dados.

 

Quando você entra na página, sua página TEMPLATE é executada e toda estrutura de menus é montada, incluindo os itens que você quiser mostrar na primeira página, tal como: artigos mais recentes, galeria de fotos mais recente, postagens mais recentes, sei lá...

 

Quando houver um clique num desses itens do MENU, de acordo com a referência cadastrada será enviado uma nova requisição para a página TEMPLATE, porém, desta vez será uma chamada para uma página especifica, com conteúdo gravado no Banco de Dados, então, pela referencia da página você recupera os dados e mostra na página.

 

Um sistema de administração como este não é muito diferente de um sistema, por exemplo, de CRUD de cadastro de clientes. O que você vai ter, basicamente, é mais lógica de programação para criar esses controles.

[kall.max 0]

Certo, você quer criar uma administração de páginas. Isto ficou claro agora.

Você usou como exemplo ferramentas como Wordpress e Joomla, porém, como nessas ferramentas, o que ocorre, e provavelmente o melhor caminho a ser seguido, é algo mais ou menos assim:

 

Você possui uma página MESTRE, vamos chama-lá aqui de TEMPLATE. Esse TEMPLATE, dentre outras coisas, monta todas as suas páginas internas baseadas no que você tem cadastrado no Banco de Dados.

 

Para cada página você deve associar um identificador que estará relacionado a um item do seu MENU, também cadastrado no seu Banco de Dados.

 

Quando você entra na página, sua página TEMPLATE é executada e toda estrutura de menus é montada, incluindo os itens que você quiser mostrar na primeira página, tal como: artigos mais recentes, galeria de fotos mais recente, postagens mais recentes, sei lá...

 

Quando houver um clique num desses itens do MENU, de acordo com a referência cadastrada será enviado uma nova requisição para a página TEMPLATE, porém, desta vez será uma chamada para uma página especifica, com conteúdo gravado no Banco de Dados, então, pela referencia da página você recupera os dados e mostra na página.

 

Um sistema de administração como este não é muito diferente de um sistema, por exemplo, de CRUD de cadastro de clientes. O que você vai ter, basicamente, é mais lógica de programação para criar esses controles.

 

Entendo é exatamente isso que preciso :

Estou precisando muito criar está função, você teria uma ideia de como eu posso codificar o que você me falou acima

com PHP e mysql ??

 

 

Alguma ideia de como eu faço esta codificação ::?

 

Estou tentando aqui....

[Williams Duarte 431]

@kall.max

ainda não conseguiu pegar o esquema de CRUD, POSTs E GETs, etc...?

 

Vamos supor que o código abaixo seja sua template

 

template.php

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
<style type="text/css">
<!--
body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background-color: #42413C;
	margin: 0;
	padding: 0;
	color: #000;
}
/* ~~ Seletores de elementos/tag ~~ */
ul, ol, dl { /* Devido a variações entre navegadores, é recomendado zerar o padding e as margem nas listas. É possível especificar as quantidades aqui ou nos itens da lista (LI, DT, DD) que eles contêm. Lembre-se: o que você fizer aqui ficará em cascata para a lista de navegação a não ser que você escreva outro seletor mais específico. */
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* ao remover a margem superior, as margens podem escapar das suas containing block. A margem inferior restante vai mantê-la afastada de qualquer elemento que se segue. */
	padding-right: 15px;
	padding-left: 15px; /* ao adicionar o padding aos lados dos elementos dentro dos blocos, ao invés dos próprios elementos dos blocos, qualquer combinação de modelo de caixa será removida. Um bloco aninhado com padding lateral também pode ser usado como método alternativo. */
}
a img { /* esse seletor remove a borda azul padrão exibida em alguns navegadores ao redor de uma imagem circundada por um link. */
	border: none;
}
/* ~~ A estilização dos links do seu site deve permanecer nesta ordem – incluindo o grupo de seletores que criam o efeito hover. ~~ */
a:link {
	color: #42413C;
	text-decoration: underline; /* a não ser que você crie o estilo de seus links para que pareçam totalmente exclusivos, é melhor utilizar links sublinhados para uma identificação visual mais rápida. */
}
a:visited {
	color: #6E6C64;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* esse grupo de seletores dará ao navegador que estiver usando um teclado, a mesma sensação de focalizar como se estivesse usando um mouse. */
	text-decoration: none;
}
/* ~~ Esse contêiner de largura fixa envolve todos os outros blocos~~ */
.container {
	width: 960px;
	background-color: #FFFFFF;
	margin: 0 auto; /* o valor automático nos lados, combinado com a largura, centraliza o layout */
}
/* ~~ O cabeçalho não tem uma largura predeterminada. Ele se estenderá por toda a largura do seu layout. ~~ */
header {
	background-color: #ADB96E;
}
/* ~~ Essas são as colunas do layout. ~~ 

1) O padding é colocado somente na parte superior e/ou inferior dos elementos de blocos. Os elementos nesses blocos têm padding em seus lados impedindo o surgimento do “modelo tipo caixa”. Lembre-se: ao adicionar qualquer padding lateral ou borda ao próprio bloco, ele será adicionado à largura que você define para criar a largura *total*. Também é possível remover o padding no elemento dentro do bloco e estabelecer um segundo elemento de bloco dentro do primeiro, sem largura, e com o padding necessário para o seu design.

2) Como as colunas são todas flutuantes, não foi atribuída nenhuma margem a elas. Se for necessário adicionar margem, evite colocá-la no lado flutuante (por exemplo, uma margem direita em um bloco definido para flutuar à direita). Em vez disso, muitas vezes é utilizado o padding . Para os blocos em que essa regra tem que ser quebrada, é necessário adicionar a declaração "exibição: inline" à regra do elemento de bloco para solucionar um erro recorrente em algumas versões do Internet Explorer em que a imagem é duplicada.

3) Como as classes podem ser usadas diversas vezes em um documento (e um elemento também pode ter várias classes aplicadas), foram atribuídas às colunas nomes de classe ao invés de IDs. Por exemplo, se for necessário, os blocos com duas barras laterais podem ser empilhados. Se preferir, é possível alterar facilmente para os IDs desde que esteja usando-os somente uma vez em cada documento.

4) Caso prefira seu navegador à esquerda ao invés de à direita, simplesmente flutue essas colunas para a direção oposta, todas à esquerda ao invés de à direita, e elas serão apresentadas na ordem inversa. Não há necessidade de mover os blocos em torno da fonte HTML.

*/
.sidebar1 {
	float: left;
	width: 180px;
	background-color: #EADCAE;
	padding-bottom: 10px;
}
.content {
	padding: 10px 0;
	width: 600px;
	float: left;
}
aside {
	float: left;
	width: 180px;
	background-color: #EADCAE;
	padding: 10px 0;
}

/* ~~ Esse seletor agrupado fornece as listas dentro do espaço da área de conteúdo ~~ */
.content ul, .content ol {
	padding: 0 15px 15px 40px; /* esse padding espelha o padding direito nos cabeçalhos e na regra de parágrafo acima. O padding foi colocado na parte inferior para obter espaço entre outros elementos das listas e à esquerda para criar o recuo. Estes podem ser ajustados como desejar. */
}

/* ~~ Os estilos de lista de navegação (podem ser removidos se for escolhido o uso de um submenu criado anteriormente, como o Spry) ~~ */
ul.nav {
	list-style: none; /* isso remove o marcador de lista */
	border-top: 1px solid #666; /* isso cria a borda da parte superior para os links – todos os outros são colocados usando uma borda na parte inferior no LI */
	margin-bottom: 15px; /* isso cria o espaço entre a navegação no conteúdo abaixo */
}
ul.nav li {
	border-bottom: 1px solid #666; /* isso cria a separação do botão */
}
ul.nav a, ul.nav a:visited { /* ao agrupar esses seletores, seus links mantêm a aparência de botão mesmo após terem sido visitados. */
	padding: 5px 5px 5px 15px;
	display: block; /* isso fornece as propriedades de bloqueio de links, preenchendo todo o LI. Assim, toda a área responderá ao clique do mouse. */
	width: 160px;  /*essa largura faz com que o botão inteiro possa ser clicado no IE6. Se não for necessário estar compatível com o IE6, ele pode ser removido. Calcule a largura apropriada subtraindo o padding neste link da largura do contêiner da barra lateral. */
	text-decoration: none;
	background-color: #C6D580;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* isso altera o fundo e a cor do texto para navegação com o mouse ou teclado. */
	background-color: #ADB96E;
	color: #FFF;
}

/* ~~ O rodapé ~~ */
footer {
	padding: 10px 0;
	background-color: #CCC49F;
	position: relative;/* isso possibilita que o hasLayout do IE6 faça a limpeza corretamente. */
	clear: both; /* essa propriedade de limpeza força o contêiner a reconhecer o conteúdo das colunas e onde elas terminam. */
}
/* ~~ Flutuações diversas/limpeza de classes ~~ */
.fltrt {  /* essa classe pode ser usada para flutuar um elemento à direita da página. O elemento flutuado deve preceder o elemento e ser o próximo da página. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* essa classe pode ser usada para flutuar um elemento à esquerda da página. O elemento flutuado deve preceder o elemento e ser o próximo da página. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* essa classe pode ser colocada em um <br /> ou em um elemento de bloco vazio como o elemento final que segue o último bloco flutuado (no contêiner) caso o rodapé seja removido ou retirado do contêiner. */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

/*Suporte HTML5 – Define novas tags do HTML5 para exibir blocos. Assim os navegadores saberão como processar as tags de forma apropriada. */
header, section, footer, aside, article, figure {
	display: block;
}
-->
</style><!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--></head>

<body>

<div class="container">
  <header>
    <a href="#"><img src="" alt="Inserir o logotipo aqui" width="180" height="90" id="Insert_logo" style="background-color: #C6D580; display:block;" /></a>
  </header>
  <div class="sidebar1">
    <ul class="nav">
        <li><a href="#">Link um</a></li>
        <li><a href="#">Link dois</a></li>
        <li><a href="#">Link três</a></li>
        <li><a href="#">Link quatro</a></li>
    </ul>
    <aside>
      <p> Os links acima demonstram uma estrutura básica de navegação usando uma lista não ordenada com estilo CSS. Use isso como um ponto de partida e modifique as propriedades para produzir uma aparência exclusiva. Se precisar de submenus, crie os seus próprios usando, um menu Spry, um dispositivo no menu do Exchange da Adobe ou uma variedade de soluções de javascript ou CSS.</p>
      <p>Caso prefira a navegação ao longo da parte superior, basta mover a ul para a parte superior da página e criar o estilo novamente.</p>
    </aside>
  <!-- end .sidebar1 --></div>
  <article class="content">
    <h1>Instruções</h1>
    <section>
     <h2>Como usar este documento</h2>
      <p>Verifique se o CSS para esses layouts está muito comentado. Se a maior parte do seu trabalho estiver em visualização de Design, examine o código para obter dicas sobre o trabalho com o CSS para layouts fixos. É possível remover esses comentários antes que você inicie o site. Para saber mais sobre as técnicas usadas nesses layouts de CSS, leia este artigo no Centro do Desenvolvedor da Adobe - <a href="http://www.adobe.com/go/adc_css_layouts">http://www.adobe.com/go/adc_css_layouts</a>.</p>
    </section>
    <section>
      <h2>Método de limpeza</h2>
      <p>Como todas as colunas são flutuantes, esse layout usa uma declaração de limpeza na regra de rodapé. Essa técnica de limpeza força o contêiner a reconhecer onde as colunas terminam para mostrar quaisquer bordas ou cores de fundo que você tenha colocado no contêiner. Se o design exigir a remoção do rodapé do contêiner, será necessário usar um método de limpeza diferente. O mais confiável é adicionar um<br class="clearfloat" /> ou <div  class="clearfloat"></div> após a última coluna flutuada, mas antes do fechamento do contêiner. Isso dará o mesmo efeito de limpeza. </p>
    </section>
    <section>
      <h2>Substituição de logotipo</h2>
      <p>Nesse layout foi usado um alocador de espaço de imagem no cabeçalho em que você gostaria de colocar um logotipo. Recomenda-se que remova o alocador de espaço e substitua-o com seu próprio logotipo com link. </p>
      <p> Lembre-se que ao usar o inspetor de propriedades para navegar até a imagem do seu logotipo usando o campo de SRC, em vez de remover e substituir o alocador de espaço, você deve remover as propriedades de imagem e de fundo inline. Esses estilos inline são usados somente para que o alocador de espaço do logotipo apareça nos navegadores para fins de demonstração. </p>
      <p>Para remover os estilos inline, verifique se o painel de Estilos CSS está definido como Atual. Selecione a imagem, e em Propriedades no painel Estilos CSS, clique com o botão direito do mouse e exclua as propriedades de imagem e fundo. (É claro que é sempre possível ir diretamente no código e excluir os estilos inline da imagem ou do alocador de espaço).</p>
    </section>
  <!-- end .content --></article>
  <aside>
    <h4>Fundos</h4>
    <p>Por natureza, a cor do fundo em qualquer elemento de bloco só aparecerá para o comprimento do conteúdo. Se preferir uma linha divisória a uma cor, coloque uma borda ao lado de .content block (somente se este sempre tiver mais conteúdo).</p>
  </aside>
  <footer>
    <p>Este rodapé possui a declaração position:relative; para fornecer o hasLayout do Internet Explorer 6 ao rodapé e ocasionar a limpeza corretamente. Se não for obrigatório o suporte ao IE6, você poderá removê-lo.</p>
    <address>
      Conteúdo do endereço
    </address>
  </footer>
  <!-- end .container --></div>
</body>
</html>

O que for texto vem de seu banco de dados, o que for html faz parte de sua estrutura de html, sendo assim você não precisa replicar toda estrutura novamente, basta passar as informações em $variaveis, includes etc.

 

 

Agora clique nos links um, dois, tres e quatro, da template abaixo e vera o que muda é somente o texto.

<?php
$titulo_que_vem_do_banco = "Instruções";
$descricao_que_vem_do_banco = 'Verifique se o CSS para esses layouts está muito comentado. Se a maior parte do seu trabalho estiver em visualização de Design, examine o código para obter dicas sobre o trabalho com o CSS para layouts fixos. É possível remover esses comentários antes que você inicie o site. Para saber mais sobre as técnicas usadas nesses layouts de CSS, leia este artigo no Centro do Desenvolvedor da Adobe - <a href="http://www.adobe.com/go/adc_css_layouts">http://www.adobe.com/go/adc_css_layouts</a>.';



if(isset($_GET['pag'])){
	
	$titulo_que_vem_do_banco = "Estou tentando aqui...." . '('. $_GET['pag'] .')';
	$descricao_que_vem_do_banco = 'Alguma ideia de como eu faço esta codificação ::?  -> '. $_GET['pag'] .') <br /><br />- Estude a template abaixo e trabalhe com includes para separar as camadas da templates, como footer, header, css etc ';
	

}

?>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
<style type="text/css">
<!--
body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background-color: #42413C;
	margin: 0;
	padding: 0;
	color: #000;
}
/* ~~ Seletores de elementos/tag ~~ */
ul, ol, dl { /* Devido a variações entre navegadores, é recomendado zerar o padding e as margem nas listas. É possível especificar as quantidades aqui ou nos itens da lista (LI, DT, DD) que eles contêm. Lembre-se: o que você fizer aqui ficará em cascata para a lista de navegação a não ser que você escreva outro seletor mais específico. */
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* ao remover a margem superior, as margens podem escapar das suas containing block. A margem inferior restante vai mantê-la afastada de qualquer elemento que se segue. */
	padding-right: 15px;
	padding-left: 15px; /* ao adicionar o padding aos lados dos elementos dentro dos blocos, ao invés dos próprios elementos dos blocos, qualquer combinação de modelo de caixa será removida. Um bloco aninhado com padding lateral também pode ser usado como método alternativo. */
}
a img { /* esse seletor remove a borda azul padrão exibida em alguns navegadores ao redor de uma imagem circundada por um link. */
	border: none;
}
/* ~~ A estilização dos links do seu site deve permanecer nesta ordem – incluindo o grupo de seletores que criam o efeito hover. ~~ */
a:link {
	color: #42413C;
	text-decoration: underline; /* a não ser que você crie o estilo de seus links para que pareçam totalmente exclusivos, é melhor utilizar links sublinhados para uma identificação visual mais rápida. */
}
a:visited {
	color: #6E6C64;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* esse grupo de seletores dará ao navegador que estiver usando um teclado, a mesma sensação de focalizar como se estivesse usando um mouse. */
	text-decoration: none;
}
/* ~~ Esse contêiner de largura fixa envolve todos os outros blocos~~ */
.container {
	width: 960px;
	background-color: #FFFFFF;
	margin: 0 auto; /* o valor automático nos lados, combinado com a largura, centraliza o layout */
}
/* ~~ O cabeçalho não tem uma largura predeterminada. Ele se estenderá por toda a largura do seu layout. ~~ */
header {
	background-color: #ADB96E;
}
/* ~~ Essas são as colunas do layout. ~~ 

1) O padding é colocado somente na parte superior e/ou inferior dos elementos de blocos. Os elementos nesses blocos têm padding em seus lados impedindo o surgimento do “modelo tipo caixa”. Lembre-se: ao adicionar qualquer padding lateral ou borda ao próprio bloco, ele será adicionado à largura que você define para criar a largura *total*. Também é possível remover o padding no elemento dentro do bloco e estabelecer um segundo elemento de bloco dentro do primeiro, sem largura, e com o padding necessário para o seu design.

2) Como as colunas são todas flutuantes, não foi atribuída nenhuma margem a elas. Se for necessário adicionar margem, evite colocá-la no lado flutuante (por exemplo, uma margem direita em um bloco definido para flutuar à direita). Em vez disso, muitas vezes é utilizado o padding . Para os blocos em que essa regra tem que ser quebrada, é necessário adicionar a declaração "exibição: inline" à regra do elemento de bloco para solucionar um erro recorrente em algumas versões do Internet Explorer em que a imagem é duplicada.

3) Como as classes podem ser usadas diversas vezes em um documento (e um elemento também pode ter várias classes aplicadas), foram atribuídas às colunas nomes de classe ao invés de IDs. Por exemplo, se for necessário, os blocos com duas barras laterais podem ser empilhados. Se preferir, é possível alterar facilmente para os IDs desde que esteja usando-os somente uma vez em cada documento.

4) Caso prefira seu navegador à esquerda ao invés de à direita, simplesmente flutue essas colunas para a direção oposta, todas à esquerda ao invés de à direita, e elas serão apresentadas na ordem inversa. Não há necessidade de mover os blocos em torno da fonte HTML.

*/
.sidebar1 {
	float: left;
	width: 180px;
	background-color: #EADCAE;
	padding-bottom: 10px;
}
.content {
	padding: 10px 0;
	width: 600px;
	float: left;
}
aside {
	float: left;
	width: 180px;
	background-color: #EADCAE;
	padding: 10px 0;
}

/* ~~ Esse seletor agrupado fornece as listas dentro do espaço da área de conteúdo ~~ */
.content ul, .content ol {
	padding: 0 15px 15px 40px; /* esse padding espelha o padding direito nos cabeçalhos e na regra de parágrafo acima. O padding foi colocado na parte inferior para obter espaço entre outros elementos das listas e à esquerda para criar o recuo. Estes podem ser ajustados como desejar. */
}

/* ~~ Os estilos de lista de navegação (podem ser removidos se for escolhido o uso de um submenu criado anteriormente, como o Spry) ~~ */
ul.nav {
	list-style: none; /* isso remove o marcador de lista */
	border-top: 1px solid #666; /* isso cria a borda da parte superior para os links – todos os outros são colocados usando uma borda na parte inferior no LI */
	margin-bottom: 15px; /* isso cria o espaço entre a navegação no conteúdo abaixo */
}
ul.nav li {
	border-bottom: 1px solid #666; /* isso cria a separação do botão */
}
ul.nav a, ul.nav a:visited { /* ao agrupar esses seletores, seus links mantêm a aparência de botão mesmo após terem sido visitados. */
	padding: 5px 5px 5px 15px;
	display: block; /* isso fornece as propriedades de bloqueio de links, preenchendo todo o LI. Assim, toda a área responderá ao clique do mouse. */
	width: 160px;  /*essa largura faz com que o botão inteiro possa ser clicado no IE6. Se não for necessário estar compatível com o IE6, ele pode ser removido. Calcule a largura apropriada subtraindo o padding neste link da largura do contêiner da barra lateral. */
	text-decoration: none;
	background-color: #C6D580;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* isso altera o fundo e a cor do texto para navegação com o mouse ou teclado. */
	background-color: #ADB96E;
	color: #FFF;
}

/* ~~ O rodapé ~~ */
footer {
	padding: 10px 0;
	background-color: #CCC49F;
	position: relative;/* isso possibilita que o hasLayout do IE6 faça a limpeza corretamente. */
	clear: both; /* essa propriedade de limpeza força o contêiner a reconhecer o conteúdo das colunas e onde elas terminam. */
}
/* ~~ Flutuações diversas/limpeza de classes ~~ */
.fltrt {  /* essa classe pode ser usada para flutuar um elemento à direita da página. O elemento flutuado deve preceder o elemento e ser o próximo da página. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* essa classe pode ser usada para flutuar um elemento à esquerda da página. O elemento flutuado deve preceder o elemento e ser o próximo da página. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* essa classe pode ser colocada em um <br /> ou em um elemento de bloco vazio como o elemento final que segue o último bloco flutuado (no contêiner) caso o rodapé seja removido ou retirado do contêiner. */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

/*Suporte HTML5 – Define novas tags do HTML5 para exibir blocos. Assim os navegadores saberão como processar as tags de forma apropriada. */
header, section, footer, aside, article, figure {
	display: block;
}
-->
</style><!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--></head>

<body>

<div class="container">
  <header>
    <a href="#"><img src="" alt="Inserir o logotipo aqui" width="180" height="90" id="Insert_logo" style="background-color: #C6D580; display:block;" /></a>
  </header>
  <div class="sidebar1">
    <ul class="nav">
        <li><a href="?pag=1">Link um</a></li>
        <li><a href="?pag=2">Link dois</a></li>
        <li><a href="?pag=3">Link três</a></li>
        <li><a href="?pag=4">Link quatro</a></li>
    </ul>
    <aside>
      <p> Os links acima demonstram uma estrutura básica de navegação usando uma lista não ordenada com estilo CSS. Use isso como um ponto de partida e modifique as propriedades para produzir uma aparência exclusiva. Se precisar de submenus, crie os seus próprios usando, um menu Spry, um dispositivo no menu do Exchange da Adobe ou uma variedade de soluções de javascript ou CSS.</p>
      <p>Caso prefira a navegação ao longo da parte superior, basta mover a ul para a parte superior da página e criar o estilo novamente.</p>
    </aside>
  <!-- end .sidebar1 --></div>
  
  <article class="content">
	
    <h1>Sua template</h1>
    <section>
     <h2><?php echo $titulo_que_vem_do_banco; ?></h2>
      <p><?php echo $descricao_que_vem_do_banco; ?></p>
    </section>
    <section>
      <h2>Método de limpeza</h2>
      <p>Como todas as colunas são flutuantes, esse layout usa uma declaração de limpeza na regra de rodapé. Essa técnica de limpeza força o contêiner a reconhecer onde as colunas terminam para mostrar quaisquer bordas ou cores de fundo que você tenha colocado no contêiner. Se o design exigir a remoção do rodapé do contêiner, será necessário usar um método de limpeza diferente. O mais confiável é adicionar um<br class="clearfloat" /> ou <div  class="clearfloat"></div> após a última coluna flutuada, mas antes do fechamento do contêiner. Isso dará o mesmo efeito de limpeza. </p>
    </section>
    <section>
      <h2>Substituição de logotipo</h2>
      <p>Nesse layout foi usado um alocador de espaço de imagem no cabeçalho em que você gostaria de colocar um logotipo. Recomenda-se que remova o alocador de espaço e substitua-o com seu próprio logotipo com link. </p>
      <p> Lembre-se que ao usar o inspetor de propriedades para navegar até a imagem do seu logotipo usando o campo de SRC, em vez de remover e substituir o alocador de espaço, você deve remover as propriedades de imagem e de fundo inline. Esses estilos inline são usados somente para que o alocador de espaço do logotipo apareça nos navegadores para fins de demonstração. </p>
      <p>Para remover os estilos inline, verifique se o painel de Estilos CSS está definido como Atual. Selecione a imagem, e em Propriedades no painel Estilos CSS, clique com o botão direito do mouse e exclua as propriedades de imagem e fundo. (É claro que é sempre possível ir diretamente no código e excluir os estilos inline da imagem ou do alocador de espaço).</p>
    </section>

  <!-- end .content -->
  </article>
  
  <aside>
    <h4>Fundos</h4>
    <p>Por natureza, a cor do fundo em qualquer elemento de bloco só aparecerá para o comprimento do conteúdo. Se preferir uma linha divisória a uma cor, coloque uma borda ao lado de .content block (somente se este sempre tiver mais conteúdo).</p>
  </aside>
  <footer>
    <p>Este rodapé possui a declaração position:relative; para fornecer o hasLayout do Internet Explorer 6 ao rodapé e ocasionar a limpeza corretamente. Se não for obrigatório o suporte ao IE6, você poderá removê-lo.</p>
    <address>
      Conteúdo do endereço
    </address>
  </footer>
  <!-- end .container --></div>
</body>
</html>

[kall.max 0]

@kall.max

ainda não conseguiu pegar o esquema de CRUD, POSTs E GETs, etc...?

 

Vamos supor que o código abaixo seja sua template

 

template.php

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
<style type="text/css">
<!--
body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background-color: #42413C;
	margin: 0;
	padding: 0;
	color: #000;
}
/* ~~ Seletores de elementos/tag ~~ */
ul, ol, dl { /* Devido a variações entre navegadores, é recomendado zerar o padding e as margem nas listas. É possível especificar as quantidades aqui ou nos itens da lista (LI, DT, DD) que eles contêm. Lembre-se: o que você fizer aqui ficará em cascata para a lista de navegação a não ser que você escreva outro seletor mais específico. */
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* ao remover a margem superior, as margens podem escapar das suas containing block. A margem inferior restante vai mantê-la afastada de qualquer elemento que se segue. */
	padding-right: 15px;
	padding-left: 15px; /* ao adicionar o padding aos lados dos elementos dentro dos blocos, ao invés dos próprios elementos dos blocos, qualquer combinação de modelo de caixa será removida. Um bloco aninhado com padding lateral também pode ser usado como método alternativo. */
}
a img { /* esse seletor remove a borda azul padrão exibida em alguns navegadores ao redor de uma imagem circundada por um link. */
	border: none;
}
/* ~~ A estilização dos links do seu site deve permanecer nesta ordem – incluindo o grupo de seletores que criam o efeito hover. ~~ */
a:link {
	color: #42413C;
	text-decoration: underline; /* a não ser que você crie o estilo de seus links para que pareçam totalmente exclusivos, é melhor utilizar links sublinhados para uma identificação visual mais rápida. */
}
a:visited {
	color: #6E6C64;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* esse grupo de seletores dará ao navegador que estiver usando um teclado, a mesma sensação de focalizar como se estivesse usando um mouse. */
	text-decoration: none;
}
/* ~~ Esse contêiner de largura fixa envolve todos os outros blocos~~ */
.container {
	width: 960px;
	background-color: #FFFFFF;
	margin: 0 auto; /* o valor automático nos lados, combinado com a largura, centraliza o layout */
}
/* ~~ O cabeçalho não tem uma largura predeterminada. Ele se estenderá por toda a largura do seu layout. ~~ */
header {
	background-color: #ADB96E;
}
/* ~~ Essas são as colunas do layout. ~~ 

1) O padding é colocado somente na parte superior e/ou inferior dos elementos de blocos. Os elementos nesses blocos têm padding em seus lados impedindo o surgimento do “modelo tipo caixa”. Lembre-se: ao adicionar qualquer padding lateral ou borda ao próprio bloco, ele será adicionado à largura que você define para criar a largura *total*. Também é possível remover o padding no elemento dentro do bloco e estabelecer um segundo elemento de bloco dentro do primeiro, sem largura, e com o padding necessário para o seu design.

2) Como as colunas são todas flutuantes, não foi atribuída nenhuma margem a elas. Se for necessário adicionar margem, evite colocá-la no lado flutuante (por exemplo, uma margem direita em um bloco definido para flutuar à direita). Em vez disso, muitas vezes é utilizado o padding . Para os blocos em que essa regra tem que ser quebrada, é necessário adicionar a declaração "exibição: inline" à regra do elemento de bloco para solucionar um erro recorrente em algumas versões do Internet Explorer em que a imagem é duplicada.

3) Como as classes podem ser usadas diversas vezes em um documento (e um elemento também pode ter várias classes aplicadas), foram atribuídas às colunas nomes de classe ao invés de IDs. Por exemplo, se for necessário, os blocos com duas barras laterais podem ser empilhados. Se preferir, é possível alterar facilmente para os IDs desde que esteja usando-os somente uma vez em cada documento.

4) Caso prefira seu navegador à esquerda ao invés de à direita, simplesmente flutue essas colunas para a direção oposta, todas à esquerda ao invés de à direita, e elas serão apresentadas na ordem inversa. Não há necessidade de mover os blocos em torno da fonte HTML.

*/
.sidebar1 {
	float: left;
	width: 180px;
	background-color: #EADCAE;
	padding-bottom: 10px;
}
.content {
	padding: 10px 0;
	width: 600px;
	float: left;
}
aside {
	float: left;
	width: 180px;
	background-color: #EADCAE;
	padding: 10px 0;
}

/* ~~ Esse seletor agrupado fornece as listas dentro do espaço da área de conteúdo ~~ */
.content ul, .content ol {
	padding: 0 15px 15px 40px; /* esse padding espelha o padding direito nos cabeçalhos e na regra de parágrafo acima. O padding foi colocado na parte inferior para obter espaço entre outros elementos das listas e à esquerda para criar o recuo. Estes podem ser ajustados como desejar. */
}

/* ~~ Os estilos de lista de navegação (podem ser removidos se for escolhido o uso de um submenu criado anteriormente, como o Spry) ~~ */
ul.nav {
	list-style: none; /* isso remove o marcador de lista */
	border-top: 1px solid #666; /* isso cria a borda da parte superior para os links – todos os outros são colocados usando uma borda na parte inferior no LI */
	margin-bottom: 15px; /* isso cria o espaço entre a navegação no conteúdo abaixo */
}
ul.nav li {
	border-bottom: 1px solid #666; /* isso cria a separação do botão */
}
ul.nav a, ul.nav a:visited { /* ao agrupar esses seletores, seus links mantêm a aparência de botão mesmo após terem sido visitados. */
	padding: 5px 5px 5px 15px;
	display: block; /* isso fornece as propriedades de bloqueio de links, preenchendo todo o LI. Assim, toda a área responderá ao clique do mouse. */
	width: 160px;  /*essa largura faz com que o botão inteiro possa ser clicado no IE6. Se não for necessário estar compatível com o IE6, ele pode ser removido. Calcule a largura apropriada subtraindo o padding neste link da largura do contêiner da barra lateral. */
	text-decoration: none;
	background-color: #C6D580;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* isso altera o fundo e a cor do texto para navegação com o mouse ou teclado. */
	background-color: #ADB96E;
	color: #FFF;
}

/* ~~ O rodapé ~~ */
footer {
	padding: 10px 0;
	background-color: #CCC49F;
	position: relative;/* isso possibilita que o hasLayout do IE6 faça a limpeza corretamente. */
	clear: both; /* essa propriedade de limpeza força o contêiner a reconhecer o conteúdo das colunas e onde elas terminam. */
}
/* ~~ Flutuações diversas/limpeza de classes ~~ */
.fltrt {  /* essa classe pode ser usada para flutuar um elemento à direita da página. O elemento flutuado deve preceder o elemento e ser o próximo da página. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* essa classe pode ser usada para flutuar um elemento à esquerda da página. O elemento flutuado deve preceder o elemento e ser o próximo da página. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* essa classe pode ser colocada em um <br /> ou em um elemento de bloco vazio como o elemento final que segue o último bloco flutuado (no contêiner) caso o rodapé seja removido ou retirado do contêiner. */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

/*Suporte HTML5 – Define novas tags do HTML5 para exibir blocos. Assim os navegadores saberão como processar as tags de forma apropriada. */
header, section, footer, aside, article, figure {
	display: block;
}
-->
</style><!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--></head>

<body>

<div class="container">
  <header>
    <a href="#"><img src="" alt="Inserir o logotipo aqui" width="180" height="90" id="Insert_logo" style="background-color: #C6D580; display:block;" /></a>
  </header>
  <div class="sidebar1">
    <ul class="nav">
        <li><a href="#">Link um</a></li>
        <li><a href="#">Link dois</a></li>
        <li><a href="#">Link três</a></li>
        <li><a href="#">Link quatro</a></li>
    </ul>
    <aside>
      <p> Os links acima demonstram uma estrutura básica de navegação usando uma lista não ordenada com estilo CSS. Use isso como um ponto de partida e modifique as propriedades para produzir uma aparência exclusiva. Se precisar de submenus, crie os seus próprios usando, um menu Spry, um dispositivo no menu do Exchange da Adobe ou uma variedade de soluções de javascript ou CSS.</p>
      <p>Caso prefira a navegação ao longo da parte superior, basta mover a ul para a parte superior da página e criar o estilo novamente.</p>
    </aside>
  <!-- end .sidebar1 --></div>
  <article class="content">
    <h1>Instruções</h1>
    <section>
     <h2>Como usar este documento</h2>
      <p>Verifique se o CSS para esses layouts está muito comentado. Se a maior parte do seu trabalho estiver em visualização de Design, examine o código para obter dicas sobre o trabalho com o CSS para layouts fixos. É possível remover esses comentários antes que você inicie o site. Para saber mais sobre as técnicas usadas nesses layouts de CSS, leia este artigo no Centro do Desenvolvedor da Adobe - <a href="http://www.adobe.com/go/adc_css_layouts">http://www.adobe.com/go/adc_css_layouts</a>.</p>
    </section>
    <section>
      <h2>Método de limpeza</h2>
      <p>Como todas as colunas são flutuantes, esse layout usa uma declaração de limpeza na regra de rodapé. Essa técnica de limpeza força o contêiner a reconhecer onde as colunas terminam para mostrar quaisquer bordas ou cores de fundo que você tenha colocado no contêiner. Se o design exigir a remoção do rodapé do contêiner, será necessário usar um método de limpeza diferente. O mais confiável é adicionar um<br class="clearfloat" /> ou <div  class="clearfloat"></div> após a última coluna flutuada, mas antes do fechamento do contêiner. Isso dará o mesmo efeito de limpeza. </p>
    </section>
    <section>
      <h2>Substituição de logotipo</h2>
      <p>Nesse layout foi usado um alocador de espaço de imagem no cabeçalho em que você gostaria de colocar um logotipo. Recomenda-se que remova o alocador de espaço e substitua-o com seu próprio logotipo com link. </p>
      <p> Lembre-se que ao usar o inspetor de propriedades para navegar até a imagem do seu logotipo usando o campo de SRC, em vez de remover e substituir o alocador de espaço, você deve remover as propriedades de imagem e de fundo inline. Esses estilos inline são usados somente para que o alocador de espaço do logotipo apareça nos navegadores para fins de demonstração. </p>
      <p>Para remover os estilos inline, verifique se o painel de Estilos CSS está definido como Atual. Selecione a imagem, e em Propriedades no painel Estilos CSS, clique com o botão direito do mouse e exclua as propriedades de imagem e fundo. (É claro que é sempre possível ir diretamente no código e excluir os estilos inline da imagem ou do alocador de espaço).</p>
    </section>
  <!-- end .content --></article>
  <aside>
    <h4>Fundos</h4>
    <p>Por natureza, a cor do fundo em qualquer elemento de bloco só aparecerá para o comprimento do conteúdo. Se preferir uma linha divisória a uma cor, coloque uma borda ao lado de .content block (somente se este sempre tiver mais conteúdo).</p>
  </aside>
  <footer>
    <p>Este rodapé possui a declaração position:relative; para fornecer o hasLayout do Internet Explorer 6 ao rodapé e ocasionar a limpeza corretamente. Se não for obrigatório o suporte ao IE6, você poderá removê-lo.</p>
    <address>
      Conteúdo do endereço
    </address>
  </footer>
  <!-- end .container --></div>
</body>
</html>

O que for texto vem de seu banco de dados, o que for html faz parte de sua estrutura de html, sendo assim você não precisa replicar toda estrutura novamente, basta passar as informações em $variaveis, includes etc.

 

 

Agora clique nos links um, dois, tres e quatro, da template abaixo e vera o que muda é somente o texto.

<?php
$titulo_que_vem_do_banco = "Instruções";
$descricao_que_vem_do_banco = 'Verifique se o CSS para esses layouts está muito comentado. Se a maior parte do seu trabalho estiver em visualização de Design, examine o código para obter dicas sobre o trabalho com o CSS para layouts fixos. É possível remover esses comentários antes que você inicie o site. Para saber mais sobre as técnicas usadas nesses layouts de CSS, leia este artigo no Centro do Desenvolvedor da Adobe - <a href="http://www.adobe.com/go/adc_css_layouts">http://www.adobe.com/go/adc_css_layouts</a>.';



if(isset($_GET['pag'])){
	
	$titulo_que_vem_do_banco = "Estou tentando aqui...." . '('. $_GET['pag'] .')';
	$descricao_que_vem_do_banco = 'Alguma ideia de como eu faço esta codificação ::?  -> '. $_GET['pag'] .') <br /><br />- Estude a template abaixo e trabalhe com includes para separar as camadas da templates, como footer, header, css etc ';
	

}

?>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
<style type="text/css">
<!--
body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background-color: #42413C;
	margin: 0;
	padding: 0;
	color: #000;
}
/* ~~ Seletores de elementos/tag ~~ */
ul, ol, dl { /* Devido a variações entre navegadores, é recomendado zerar o padding e as margem nas listas. É possível especificar as quantidades aqui ou nos itens da lista (LI, DT, DD) que eles contêm. Lembre-se: o que você fizer aqui ficará em cascata para a lista de navegação a não ser que você escreva outro seletor mais específico. */
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* ao remover a margem superior, as margens podem escapar das suas containing block. A margem inferior restante vai mantê-la afastada de qualquer elemento que se segue. */
	padding-right: 15px;
	padding-left: 15px; /* ao adicionar o padding aos lados dos elementos dentro dos blocos, ao invés dos próprios elementos dos blocos, qualquer combinação de modelo de caixa será removida. Um bloco aninhado com padding lateral também pode ser usado como método alternativo. */
}
a img { /* esse seletor remove a borda azul padrão exibida em alguns navegadores ao redor de uma imagem circundada por um link. */
	border: none;
}
/* ~~ A estilização dos links do seu site deve permanecer nesta ordem – incluindo o grupo de seletores que criam o efeito hover. ~~ */
a:link {
	color: #42413C;
	text-decoration: underline; /* a não ser que você crie o estilo de seus links para que pareçam totalmente exclusivos, é melhor utilizar links sublinhados para uma identificação visual mais rápida. */
}
a:visited {
	color: #6E6C64;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* esse grupo de seletores dará ao navegador que estiver usando um teclado, a mesma sensação de focalizar como se estivesse usando um mouse. */
	text-decoration: none;
}
/* ~~ Esse contêiner de largura fixa envolve todos os outros blocos~~ */
.container {
	width: 960px;
	background-color: #FFFFFF;
	margin: 0 auto; /* o valor automático nos lados, combinado com a largura, centraliza o layout */
}
/* ~~ O cabeçalho não tem uma largura predeterminada. Ele se estenderá por toda a largura do seu layout. ~~ */
header {
	background-color: #ADB96E;
}
/* ~~ Essas são as colunas do layout. ~~ 

1) O padding é colocado somente na parte superior e/ou inferior dos elementos de blocos. Os elementos nesses blocos têm padding em seus lados impedindo o surgimento do “modelo tipo caixa”. Lembre-se: ao adicionar qualquer padding lateral ou borda ao próprio bloco, ele será adicionado à largura que você define para criar a largura *total*. Também é possível remover o padding no elemento dentro do bloco e estabelecer um segundo elemento de bloco dentro do primeiro, sem largura, e com o padding necessário para o seu design.

2) Como as colunas são todas flutuantes, não foi atribuída nenhuma margem a elas. Se for necessário adicionar margem, evite colocá-la no lado flutuante (por exemplo, uma margem direita em um bloco definido para flutuar à direita). Em vez disso, muitas vezes é utilizado o padding . Para os blocos em que essa regra tem que ser quebrada, é necessário adicionar a declaração "exibição: inline" à regra do elemento de bloco para solucionar um erro recorrente em algumas versões do Internet Explorer em que a imagem é duplicada.

3) Como as classes podem ser usadas diversas vezes em um documento (e um elemento também pode ter várias classes aplicadas), foram atribuídas às colunas nomes de classe ao invés de IDs. Por exemplo, se for necessário, os blocos com duas barras laterais podem ser empilhados. Se preferir, é possível alterar facilmente para os IDs desde que esteja usando-os somente uma vez em cada documento.

4) Caso prefira seu navegador à esquerda ao invés de à direita, simplesmente flutue essas colunas para a direção oposta, todas à esquerda ao invés de à direita, e elas serão apresentadas na ordem inversa. Não há necessidade de mover os blocos em torno da fonte HTML.

*/
.sidebar1 {
	float: left;
	width: 180px;
	background-color: #EADCAE;
	padding-bottom: 10px;
}
.content {
	padding: 10px 0;
	width: 600px;
	float: left;
}
aside {
	float: left;
	width: 180px;
	background-color: #EADCAE;
	padding: 10px 0;
}

/* ~~ Esse seletor agrupado fornece as listas dentro do espaço da área de conteúdo ~~ */
.content ul, .content ol {
	padding: 0 15px 15px 40px; /* esse padding espelha o padding direito nos cabeçalhos e na regra de parágrafo acima. O padding foi colocado na parte inferior para obter espaço entre outros elementos das listas e à esquerda para criar o recuo. Estes podem ser ajustados como desejar. */
}

/* ~~ Os estilos de lista de navegação (podem ser removidos se for escolhido o uso de um submenu criado anteriormente, como o Spry) ~~ */
ul.nav {
	list-style: none; /* isso remove o marcador de lista */
	border-top: 1px solid #666; /* isso cria a borda da parte superior para os links – todos os outros são colocados usando uma borda na parte inferior no LI */
	margin-bottom: 15px; /* isso cria o espaço entre a navegação no conteúdo abaixo */
}
ul.nav li {
	border-bottom: 1px solid #666; /* isso cria a separação do botão */
}
ul.nav a, ul.nav a:visited { /* ao agrupar esses seletores, seus links mantêm a aparência de botão mesmo após terem sido visitados. */
	padding: 5px 5px 5px 15px;
	display: block; /* isso fornece as propriedades de bloqueio de links, preenchendo todo o LI. Assim, toda a área responderá ao clique do mouse. */
	width: 160px;  /*essa largura faz com que o botão inteiro possa ser clicado no IE6. Se não for necessário estar compatível com o IE6, ele pode ser removido. Calcule a largura apropriada subtraindo o padding neste link da largura do contêiner da barra lateral. */
	text-decoration: none;
	background-color: #C6D580;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* isso altera o fundo e a cor do texto para navegação com o mouse ou teclado. */
	background-color: #ADB96E;
	color: #FFF;
}

/* ~~ O rodapé ~~ */
footer {
	padding: 10px 0;
	background-color: #CCC49F;
	position: relative;/* isso possibilita que o hasLayout do IE6 faça a limpeza corretamente. */
	clear: both; /* essa propriedade de limpeza força o contêiner a reconhecer o conteúdo das colunas e onde elas terminam. */
}
/* ~~ Flutuações diversas/limpeza de classes ~~ */
.fltrt {  /* essa classe pode ser usada para flutuar um elemento à direita da página. O elemento flutuado deve preceder o elemento e ser o próximo da página. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* essa classe pode ser usada para flutuar um elemento à esquerda da página. O elemento flutuado deve preceder o elemento e ser o próximo da página. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* essa classe pode ser colocada em um <br /> ou em um elemento de bloco vazio como o elemento final que segue o último bloco flutuado (no contêiner) caso o rodapé seja removido ou retirado do contêiner. */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

/*Suporte HTML5 – Define novas tags do HTML5 para exibir blocos. Assim os navegadores saberão como processar as tags de forma apropriada. */
header, section, footer, aside, article, figure {
	display: block;
}
-->
</style><!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--></head>

<body>

<div class="container">
  <header>
    <a href="#"><img src="" alt="Inserir o logotipo aqui" width="180" height="90" id="Insert_logo" style="background-color: #C6D580; display:block;" /></a>
  </header>
  <div class="sidebar1">
    <ul class="nav">
        <li><a href="?pag=1">Link um</a></li>
        <li><a href="?pag=2">Link dois</a></li>
        <li><a href="?pag=3">Link três</a></li>
        <li><a href="?pag=4">Link quatro</a></li>
    </ul>
    <aside>
      <p> Os links acima demonstram uma estrutura básica de navegação usando uma lista não ordenada com estilo CSS. Use isso como um ponto de partida e modifique as propriedades para produzir uma aparência exclusiva. Se precisar de submenus, crie os seus próprios usando, um menu Spry, um dispositivo no menu do Exchange da Adobe ou uma variedade de soluções de javascript ou CSS.</p>
      <p>Caso prefira a navegação ao longo da parte superior, basta mover a ul para a parte superior da página e criar o estilo novamente.</p>
    </aside>
  <!-- end .sidebar1 --></div>
  
  <article class="content">
	
    <h1>Sua template</h1>
    <section>
     <h2><?php echo $titulo_que_vem_do_banco; ?></h2>
      <p><?php echo $descricao_que_vem_do_banco; ?></p>
    </section>
    <section>
      <h2>Método de limpeza</h2>
      <p>Como todas as colunas são flutuantes, esse layout usa uma declaração de limpeza na regra de rodapé. Essa técnica de limpeza força o contêiner a reconhecer onde as colunas terminam para mostrar quaisquer bordas ou cores de fundo que você tenha colocado no contêiner. Se o design exigir a remoção do rodapé do contêiner, será necessário usar um método de limpeza diferente. O mais confiável é adicionar um<br class="clearfloat" /> ou <div  class="clearfloat"></div> após a última coluna flutuada, mas antes do fechamento do contêiner. Isso dará o mesmo efeito de limpeza. </p>
    </section>
    <section>
      <h2>Substituição de logotipo</h2>
      <p>Nesse layout foi usado um alocador de espaço de imagem no cabeçalho em que você gostaria de colocar um logotipo. Recomenda-se que remova o alocador de espaço e substitua-o com seu próprio logotipo com link. </p>
      <p> Lembre-se que ao usar o inspetor de propriedades para navegar até a imagem do seu logotipo usando o campo de SRC, em vez de remover e substituir o alocador de espaço, você deve remover as propriedades de imagem e de fundo inline. Esses estilos inline são usados somente para que o alocador de espaço do logotipo apareça nos navegadores para fins de demonstração. </p>
      <p>Para remover os estilos inline, verifique se o painel de Estilos CSS está definido como Atual. Selecione a imagem, e em Propriedades no painel Estilos CSS, clique com o botão direito do mouse e exclua as propriedades de imagem e fundo. (É claro que é sempre possível ir diretamente no código e excluir os estilos inline da imagem ou do alocador de espaço).</p>
    </section>

  <!-- end .content -->
  </article>
  
  <aside>
    <h4>Fundos</h4>
    <p>Por natureza, a cor do fundo em qualquer elemento de bloco só aparecerá para o comprimento do conteúdo. Se preferir uma linha divisória a uma cor, coloque uma borda ao lado de .content block (somente se este sempre tiver mais conteúdo).</p>
  </aside>
  <footer>
    <p>Este rodapé possui a declaração position:relative; para fornecer o hasLayout do Internet Explorer 6 ao rodapé e ocasionar a limpeza corretamente. Se não for obrigatório o suporte ao IE6, você poderá removê-lo.</p>
    <address>
      Conteúdo do endereço
    </address>
  </footer>
  <!-- end .container --></div>
</body>
</html>

 

Sobre o CRUD, GET e POST tranquilo eu sei,

so estava com problema de codificar essa lógica mesmo.

Numa rápida analisada é tudo que preciso para resolver meu problema de pagina.

Show de bola muito obrigado pela ajuda.

Vou analisar e fundir o conteudo do banco na pagina.

Qualquer duvida volto a postar.

 

Obrigado!