sitio dinamico

Iniciado por DaNuK, 11 Junio 2013, 21:20 PM

0 Miembros y 1 Visitante están viendo este tema.

DaNuK

hola buenas tardes compañeros del foro en esta ocacion acudo a ustedes porque me ha surgido una duda en cuanto a los sitios web mi duda es el siguiente:
para que una pagina tenga siempre el mismo encabezado como le puedo hacer, si en index tengo el diseño completo y al momento de hacer clic en un menu se muestre su contenido abajo del encabezado. tengo que crear otra pagina desde 0 con el mismo encabezado y diferente contenido o como es para que me muestre el contenido abajo del encabezado.
Saludos

<a href ="http://programacionrapido.blogspot.com">Programacion .Net</a>

Shell Root

#1
Son plantillas es decir,

Código (php) [Seleccionar]

# header.php  -> Todo el contenido [tt]HTML[/tt] hasta empezar el [tt]<BODY>[/tt].
# content.php -> Todo el contenido que se va a mostrar.
# footer.php  -> Todo el contenido [tt]HTML[/tt] hasta empezar el [tt]</BODY>[/tt].
Por eso no duermo, por si tras mi ventana hay un cuervo. Cuelgo de hilos sueltos sabiendo que hay veneno en el aire.

DaNuK

Código (html4strict) [Seleccionar]

header>
<div id="logo">
<img src="img/trompeta.jpg" alt=""/>
</div>
<div id="txt">
<strong>HECTOR TOMAS</strong>

</div>
</header>
<div id="wrap">
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="javascript:envia('biografia.html','main')">Eventos</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Biografia</a></li>
</ul>
</nav>
<div class="flexslider">
<ul class="slides">
<li><a href="#"><img src="img/conc.jpg" alt=""/></a></li>
<li><a href="#"><img src="img/conc1.jpg" alt=""/></a></li>
<li><a href="#"><img src="img/conc3.jpg" alt=""/></a></li>
</ul>
</div>
<section id="main">
<article class="izquierda">
<h2>Videos Recientes</h2>
</article>
<article  class="derecha">
<h2>Proximos eventos</h2>
</article>
</section>
<footer>
<section></section>
<section></section>
</footer>

lo que quiero es que reemplaze el contenido de lo que tengo en main al hacer clic en cualquier menu.
Se puede usar ajax ? o tengo que crear varias paginas con el mismo header y footer y diferente contenido ?
Saludos

<a href ="http://programacionrapido.blogspot.com">Programacion .Net</a>

Hacksturcon

Podrias hacerlo usando ajax si. Con el metodo Load de JQuery se hace sin misterio. Ej:

$("#ID_DIV").load("web.html");

Pero si tu servidor tiene PHP yo optaria por la formula que menciona shellroot y usar includes en PHP.

Creo que no hay diferencia real entre los dos metodos a la hora de la verdad, pero siempre he encontrado mas comodo e intuitivo el usar plantillas por PHP. Quizas sean manias de alguien que aprendio a programar webs sin ajax XD.

DaNuK

podrian ser mas explicito conel de php  ? por favor
tendrian que ser tres archivos por separado   y en el index incluirlos nadmas para crear la pag. principal ? o como

<a href ="http://programacionrapido.blogspot.com">Programacion .Net</a>

Hacksturcon

Creas 2 archivos:

header.php

En este fichero colocas el codigo HTML desde el principio del fichero, hasta donde acaban los menus y empieza el "cuerpo" del website (no me refiero al tag body). En tu caso creo que seria hasta el fin de la capa "nav".

Footer.php

En este fichero colocas todo el pie de pagina.

---

Con esos dos ficheros puedes crear tus paginas simplemente haciendo includes en PHP

<?php include(header.php); ?>
<codigo HTML de la pagina>
<?php include(footer.php); ?>



Otra forma de hacerlo seria crear un fichero index.php con el contenido HTML y donde vaya el cuerpo crear una condicion en PHP. Este es un ejemplo de uno de mis trabajos que quizas te oriente.


   <body>
    <!-- HEADER -->
      <div class="header">
            <div class="menuContainer">
                <ul id="menu">
                    <li><a href="index2.php">INICIO</a></li>
                    <li><a href="index2.php?mod=1">ARTICULOS</a></li>
                    <li><a href="index2.php?mod=2">PORTFOLIO</a></li>
                    <li><a href="index2.php?mod=3">CONTACTO</a></li>
                </ul>
            </div>  
            <img src="theme/logo.png" alt="Logotipo" name="Logo" width="151" height="36" id="logo" style="display: block;" />
</div>
        <!-- end .header -->
        <!-- PAGE BODY -->
         <div class="content">
    <?php
                                $GET_MOD
=proteger($_GET["mod"],"s");
$mod="modules/dashboard.php";
//hacemos un switch entre los diferentes apartados
 
 switch ($GET_MOD)
 {
case 1:
$mod="modules/blog.php"
break;
case 2:
$mod="modules/portfolio.php"
break;
case 3:
$mod="modules/contact.php"
break;

 
 }
 include($mod);
    
    
?>

    </div>
        <!-- end .page body -->
        <!-- FOOTER -->
          <div class="footer">
       
          </div>
        <!-- end. footer -->
</body>






DaNuK

Gracias amigo lo voy a checar Saludos

<a href ="http://programacionrapido.blogspot.com">Programacion .Net</a>