Como incluir um modelo HTML feito com CSS

Djonatan Buss · Março 17, 2010

Baixei um CSS pronto e adaptei de forma a ficar exatamente como queria, ficou correto entao criei um HTML "coringa" para todas as paginas do site e tentei ddar include nele e apenas chamar a div do conteudo. Acontece que o include funciona perfeitamente e inclui todo o modelo, mas o que eu adiciono no arquivo após o include simplesmente aparece embaixo de tudo.

O que eu tenho que fazer para incluir o HTML e apenas editar o conteudo em cada arquivo que eu quero?

a seguir o codigo

<html>
<head>
<title>Fuuuck</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="container">
    <div id="header"><a href="http://www.free-css.com/free-css-layouts.php"></a></div>
        <div id="wrapper">
            <div id="content">
            </div>
        </div>
        <div id="navigation">
    <ul>
      <li><a href="" ><img src="imagens/btnInicio.png" /></a></li>
      <li><a href="" ><img src="imagens/btnHistoria.png" /></a></li>
      <li><a href="" ><img src="imagens/btnRugby.png" /></a></li>
      <li><a href="" ><img src="imagens/btnEquipe.png" /></a></li>
      <li><a href="" ><img src="imagens/btnAlbum.png" /></a></li>

    </ul>
  </div>
  <div id="extra">
    <p><strong>More stuff here.</strong></p>
    <p>sit malesuada lacus pellus parturpiscing. Pellenterdumat maecenatoque cras a magna nibh et quis diam ames et. Laoremvolutpat ac dolor eget eget temper lacus vestibus velit lacus venean. Magnaipsum tellus morbi leo aliquat nulla convallis pellentesque.</p>
  </div>
  <div id="footer">
    <p>Footer</p>
  </div>
</div>

essa seria uma pagina com conteudo especifico

<?php
include ("util.php");
?>
<body>
<div id="container">
<div id="wrapper">
    <div id="content">
      <h1>Content here.</h1>
      <p>Sapibulumnibh phasellus nulla egestibulum enim pretium elit tincidunt estiquam ultrisque donectetur. Sedcondimentumsan odio hendrerit proin vitae dignis nibh ac justo id congue. Amesintesque vel curabitae volutpat donec alique nasceleifendimentesque montesque rhoncus quis eros. Vestnunc nonummy</p>
      <p>Montegeraliquam sed pede in cursus praesenec vestas rhoncus wisi at wisi. Condisseloborttis enim et ipsum mauristie id felit adipiscipit ac auctortorttitor sempor. Vitantesqueat sempus non sed et mus sit vivamus purus netus hendiment. Pretiuma diam et id tempus dolor por wisi sed volutpat facilisi.</p>
      <p>Wisiet sus adipit phasellentum elit condissim consecteturpiscing sapien vivamus et congue. Utvel tris quismod cursus liberos elit nisse curabitur tur parturpis tellenterdum. Semperligula curabitae tellentesque nulla trices vestas ristibulum id justo auctor facinia. Natisdonec consequat nibh pellus.</p>
      <p>Vestibusodio euisque id elerisus lacus tincidunt sit malesuada lacus pellus parturpiscing. Pellenterdumat maecenatoque cras a magna nibh et quis diam ames et. Laoremvolutpat ac dolor eget eget temper lacus vestibus velit lacus venean. Magnaipsum tellus morbi leo aliquat nulla convallis pellentesque.</p>
    </div>
  </div>
</div>
</body>

Convem explicar que eh um projeto pessoal pra eu aprender, nao eh nenhum bico "eu sei fazer isso e vai custar R$x" É o site do meu time de rugby

Francis Schiavo · Março 18, 2010

Pelo que entendi você esta incluindo o conteudo no final do modelo mesmo.

Se util.php for o primeiro código, e você está incluindo ele antes do conteúdo, o HTML gerado pelo segundo código que você postou ficaria assim:

<html>
<head>
<title>Fuuuck</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="container">
    <div id="header"><a href="http://www.free-css.com/free-css-layouts.php"></a></div>
        <div id="wrapper">
            <div id="content">
            </div>
        </div>
        <div id="navigation">
    <ul>
      <li><a href="" ><img src="imagens/btnInicio.png" /></a></li>
      <li><a href="" ><img src="imagens/btnHistoria.png" /></a></li>
      <li><a href="" ><img src="imagens/btnRugby.png" /></a></li>
      <li><a href="" ><img src="imagens/btnEquipe.png" /></a></li>
      <li><a href="" ><img src="imagens/btnAlbum.png" /></a></li>

    </ul>
  </div>
  <div id="extra">
    <p><strong>More stuff here.</strong></p>
    <p>sit malesuada lacus pellus parturpiscing. Pellenterdumat maecenatoque cras a magna nibh et quis diam ames et. Laoremvolutpat ac dolor eget eget temper lacus vestibus velit lacus venean. Magnaipsum tellus morbi leo aliquat nulla convallis pellentesque.</p>
  </div>
  <div id="footer">
    <p>Footer</p>
  </div>
</div>
<body> <!-- Note que todo o modelo foi incluido antes do body do conteúdo -->
<div id="container">
<div id="wrapper">
    <div id="content">
      <h1>Content here.</h1>
      <p>Sapibulumnibh phasellus nulla egestibulum enim pretium elit tincidunt estiquam ultrisque donectetur. Sedcondimentumsan odio hendrerit proin vitae dignis nibh ac justo id congue. Amesintesque vel curabitae volutpat donec alique nasceleifendimentesque montesque rhoncus quis eros. Vestnunc nonummy</p>
      <p>Montegeraliquam sed pede in cursus praesenec vestas rhoncus wisi at wisi. Condisseloborttis enim et ipsum mauristie id felit adipiscipit ac auctortorttitor sempor. Vitantesqueat sempus non sed et mus sit vivamus purus netus hendiment. Pretiuma diam et id tempus dolor por wisi sed volutpat facilisi.</p>
      <p>Wisiet sus adipit phasellentum elit condissim consecteturpiscing sapien vivamus et congue. Utvel tris quismod cursus liberos elit nisse curabitur tur parturpis tellenterdum. Semperligula curabitae tellentesque nulla trices vestas ristibulum id justo auctor facinia. Natisdonec consequat nibh pellus.</p>
      <p>Vestibusodio euisque id elerisus lacus tincidunt sit malesuada lacus pellus parturpiscing. Pellenterdumat maecenatoque cras a magna nibh et quis diam ames et. Laoremvolutpat ac dolor eget eget temper lacus vestibus velit lacus venean. Magnaipsum tellus morbi leo aliquat nulla convallis pellentesque.</p>
    </div>
  </div>
</div>
</body>

Na verdade o modelo é que deveria incluir o conteudo dinamicamente, ex:

<html>
<head>
<title>Fuuuck</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="container">
    <div id="header"><a href="http://www.free-css.com/free-css-layouts.php"></a></div>
        <div id="wrapper">
            <div id="content">
              <?PHP include('MyContent.php') ?><!-- Aqui deve ser carregado o conteúdo da página. -->
            </div>
        </div>
        <div id="navigation">
    <ul>
      <li><a href="" ><img src="imagens/btnInicio.png" /></a></li>
      <li><a href="" ><img src="imagens/btnHistoria.png" /></a></li>
      <li><a href="" ><img src="imagens/btnRugby.png" /></a></li>
      <li><a href="" ><img src="imagens/btnEquipe.png" /></a></li>
      <li><a href="" ><img src="imagens/btnAlbum.png" /></a></li>

    </ul>
  </div>
  <div id="extra">
    <p><strong>More stuff here.</strong></p>
    <p>sit malesuada lacus pellus parturpiscing. Pellenterdumat maecenatoque cras a magna nibh et quis diam ames et. Laoremvolutpat ac dolor eget eget temper lacus vestibus velit lacus venean. Magnaipsum tellus morbi leo aliquat nulla convallis pellentesque.</p>
  </div>
  <div id="footer">
    <p>Footer</p>
  </div>
</div>

Cada lugar dentro do seu modelo cujo conteúdo deve ser alterado, tem que possuir um include() ou uma variavel PHP.

Para mudar a página que você inclui dinamicamente você tera que usar $_GET[] ou $_POST[] para pegar a url à ser carregada e passar como parametro no include.

Djonatan Buss · Março 21, 2010

Cada lugar dentro do seu modelo cujo conteúdo deve ser alterado, tem que possuir um include() ou uma variavel PHP.

Para mudar a página que você inclui dinamicamente você tera que usar $_GET[] ou $_POST[] para pegar a url à ser carregada e passar como parametro no include.

Nao entendi essa parte muito bem, fez todo o sentido o que tu sugeriu, so nao sei como funcionaria essa chamada dentro do modelo...

Dei uma pensada na questao das DIVs e refiz o modelo, funciona como eu quero, porem creio que eu nao esteja sendo muito eficiente e quero aprender da forma mais "profissional" possivel.

Fiz assim:

topo.php

<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="container">
    <div id="header"><a href="http://www.free-css.com/free-css-layouts.php"></a></div>
        <div id="wrapper">
            <div id="content">

resto.php

</div>
        </div>
        <div id="navigation">
    <ul>
      <li><a href="" ><img src="imagens/btnInicio.png" /></a></li>
      <li><a href="" ><img src="imagens/btnHistoria.png" /></a></li>
      <li><a href="" ><img src="imagens/btnRugby.png" /></a></li>
      <li><a href="" ><img src="imagens/btnEquipe.png" /></a></li>
      <li><a href="" ><img src="imagens/btnAlbum.png" /></a></li>

    </ul>
  </div>
  <div id="extra">
    <p><strong>More stuff here.</strong></p>
    <p>sit malesuada lacus pellus parturpiscing. Pellenterdumat maecenatoque cras a magna nibh et quis diam ames et. Laoremvolutpat ac dolor eget eget temper lacus vestibus velit lacus venean. Magnaipsum tellus morbi leo aliquat nulla convallis pellentesque.</p>
  </div>
  <div id="footer">
    <p>Footer</p>
  </div>
</div>

Capa.php

<?php
include ("topo.php");
?>
<h1>Content here.</h1>
<p>Sapibulumnibh phasellus nulla egestibulum enim pretium elit tincidunt estiquam ultrisque donectetur. Sedcondimentumsan odio hendrerit proin vitae dignis nibh ac justo id congue. Amesintesque vel curabitae volutpat donec alique nasceleifendimentesque montesque rhoncus quis eros. Vestnunc nonummy</p>
<p>Montegeraliquam sed pede in cursus praesenec vestas rhoncus wisi at wisi. Condisseloborttis enim et ipsum mauristie id felit adipiscipit ac auctortorttitor sempor. Vitantesqueat sempus non sed et mus sit vivamus purus netus hendiment. Pretiuma diam et id tempus dolor por wisi sed volutpat facilisi.</p>
<p>Wisiet sus adipit phasellentum elit condissim consecteturpiscing sapien vivamus et congue. Utvel tris quismod cursus liberos elit nisse curabitur tur parturpis tellenterdum. Semperligula curabitae tellentesque nulla trices vestas ristibulum id justo auctor facinia. Natisdonec consequat nibh pellus.</p>
<p>Vestibusodio euisque id elerisus lacus tincidunt sit malesuada lacus pellus parturpiscing. Pellenterdumat maecenatoque cras a magna nibh et quis diam ames et. Laoremvolutpat ac dolor eget eget temper lacus vestibus velit lacus venean. Magnaipsum tellus morbi leo aliquat nulla convallis pellentesque.</p>
</body>
<?php
include ("resto.php");
?>

Francis Schiavo · Março 23, 2010

A forma que você fez não está errada, eu costumo fazer mais ou menos assim:

Modelo.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>

<head>
  <title><? if (isset($_GET['Title'])) echo($_GET['Title']); ?></title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>
  <div><? if (isset($_GET['URL'])) { include($_GET['URL']); } ?></div>
</body>

</html>

Teste.php:

<label>Search:<input type="text" /></label>

Tente colocar isso na raiz do seu servidor e chamar assim:

http://<url do servidor ou localhost>/Modelo.php?Title=Teste&URL=Teste.php

Pelo $_GET[] você consegue pegar os valores da querystring passada ?Title=Teste&URL=Teste.php e aplicar dentro do seu modelo.

Dessa forma fica mais dinâmico já que se você quiser alterar o modelo será apenas 1 e você consegue alterar também o titulo.

Seguindo essa dica é só usar a criatividade.

Djonatan Buss · Junho 4, 2010

A forma que você fez não está errada, eu costumo fazer mais ou menos assim:

Tente colocar isso na raiz do seu servidor e chamar assim:

http://<url do servidor ou localhost>/Modelo.php?Title=Teste&URL=Teste.php

Pelo $_GET[] você consegue pegar os valores da querystring passada ?Title=Teste&URL=Teste.php e aplicar dentro do seu modelo.

Dessa forma fica mais dinâmico já que se você quiser alterar o modelo será apenas 1 e você consegue alterar também o titulo.

Seguindo essa dica é só usar a criatividade.

Pô ótimas notícias...

1 - se o que eu fiz nao é bizarro, fico tranquilo pq foi simples

2 - se foi simples daquele jeito vou dar uma estudada na tua dica e fazer melhorzinho...

Brigadão ae Francis...

To sentindo a necessidade de usar as meta tags para cada arquivo e tava analisando aqui antes de implementar

Como fica o google analytics seguindo o modelo que tu segue?

to tendo acesso ao fluxo de visitas ultra especificado pelo analytics

Nao entendi nada, isso suposamente era pra ser um novo post

To sentindo a necessidade de usar as meta tags para cada arquivo e tava analisando aqui antes de implementar

Como fica o google analytics seguindo o modelo que tu segue?

to tendo acesso ao fluxo de visitas ultra especificado pelo analytics

Entrar

Arquivado

Como incluir um modelo HTML feito com CSS

Recommended Posts

Djonatan Buss 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Francis Schiavo 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Djonatan Buss 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Francis Schiavo 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Djonatan Buss 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

comando like (Mysql) no php

mostrar quanto tempo foi postado um conteudo

lendo RSS com PHP mostrando a imagem de preview

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante