sitio dinamico

DaNuK · 11 Junio 2013, 21:20 PM

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

Shell Root · 12 Junio 2013, 00:23 AM

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].

DaNuK · 12 Junio 2013, 19:01 PM

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

Hacksturcon · 12 Junio 2013, 20:06 PM

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 · 12 Junio 2013, 20:26 PM

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

Hacksturcon · 12 Junio 2013, 21:14 PM

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

Código [Seleccionar]

<?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.

Código [Seleccionar]


   <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 · 14 Junio 2013, 22:43 PM

Gracias amigo lo voy a checar Saludos