Alternativa marcos - Cabecera y menú en subpáginas sin replicar código

viclobon · #1 (**permalink**) 27/09/2008, 02:22

Hola a todos,

Tengo una duda super-básica a la que no consigo encontrar solución satisfactoria.

Tengo una página con marcos y he decidido cambiar el diseño a HTML + CSS para hacerla más moderna y atractiva.

El esquema básico es este:

Código:

<html>
    <head> ... </head>
    <body>

        <div id="cabecera"> ... </div>

        <div id="menu"> ... </div>

        <div id="CONTENIDO"> ... </div>

        <div id="pie_de_pagina"> ... </div>

    </body>
</html>

Y la pregunta es: ¿Cómo puedo incluir las partes comunes (cabecera, menú, pie de página) en el resto de mis subpáginas sin replicar el código en cada una de ellas?

La idea sería (si se puede ¿?) tener el código HTML comnún en archivos separados (cabecera.html, menu.html, pie_de_pagina.html) y poder decir en cada subpágina:

Código:

<html>
    <head> ... </head>
    <body>

        <!-- Inclúyeme aquí el contenido de cabecera.html -->

        <!-- Inclúyeme aquí el contenido de menu.html -->

        <div id="CONTENIDO_DE_LA_SUBPAGINA"> ... </div>

        <!-- Inclúyeme aquí el contenido de pie_de_pagina.html -->

    </body>
</html>

Leo por ahí que están los includes de java, utilizar la etiqueta <object>, PHP, ASP, etc. pero no sé cuál es la mejor forma, la más sencilla y más compatible con todos los navegadores y tecnologías.
¿Cómo se hace esto normalmente? Porque asumo que casi todas las páginas lo hacen.

La solución básica es replicar el código comnún en todas las subpáginas, pero eso es una chapuza porque si cambias algo de las zonas comunes (cabecera, menú, pie de página) tienes que ir al código de todas las subpáginas e ir cambiándolo una por una.

Muchas gracias. Perdón si esto está explicado hasta la saciedad en algún sitio, yo no he conseguido encontrarlo... :(

Víctor

Gordenay · #2 (**permalink**) 27/09/2008, 05:22

Solamente mediante XHTML no se puede, por lo que deberias incorporar alguna otra tecnologia.

De las que has indicado, considero que PHP es la mas sencilla de aprender. De todos modos debes tener en cuenta:

1) Antes mirar tutoriales de PHP comprueba que tu hosting soporta PHP (casi todos lo hacen)

2) PHP es un lenguaje de scripting, mientras que XHTML es de marcado (encontrarás bastantes diferencias) por lo que antes de hacer nada en tu web, mejor haz unas cuantas pruebas en otros documentos.

3) Si tienes alguna duda puedes preguntar en el Foro de PHP de forosdelweb y seguro que allí te pueden aconsejar bien.

viclobon · #3 (**permalink**) 27/09/2008, 08:47

Gracias por tu respuesta Gordenay.

Haré lo que haga falta para conseguir el resultado que quiero pero en principio quería hacerlo sin tener que usar PHP o cosas similares, para que fuese lo más sencillo y compatible posible.
Porque, por ejemplo, el alojamiento web de ONO, que es el que utilizo, no soporta PHP

¿Como lo hacen las webs que sólo utilizan (X)HTML y CSS? ¿Replican el código común en todas sus subpáginas?

Soy ingeniero informático pero como supongo muchos por aquí entenderán, lo que te enseñan en la universidad de "informática útil" brilla por su ausencia. Es frustrante, no sé ni hacer una web en condiciones. Por lo menos puedo entender y aprender casi cualquier código con relativa facilidad...

NUCKLEAR · #4 (**permalink**) 28/09/2008, 07:33

Como buen ingeniero informatico deberias usar google como tu principal fuente de recursos. una simple busqueda no haria mal.

Tips
como usar php include()
hosting que soporte php
hosting gratis php -> aca si te ayudo 0fess, 000webhost, awardspace
manuales tutoriales php
como instalar appserv
www.librosweb.es ->excelente lectura

Saludos

PD:
1. Normalmente si es una pagina muy pequeña podrias repetir una y otra vez. Pero si el diseño se va toranndo complejo y exige un constante cambio del contenido, llamese menu, pie de pagina, si tendrias que usar php(lo recomiendo por que es lo mas sencillo para hacer este tipo de trabajos)
2. Y no es JAVA es javascript a lo que te refieres, son dos cosas totalmente distintas.

Mefaltatiempo · #5 (**permalink**) 28/09/2008, 09:37

Buscando, buscando, mira que me encontré:

http://www.cristalab.com/tutoriales/203/como-usar-include-y-require-en-php.html

Corté y copié a pelo el código de mi tabla de menú en un nuevo documento html.
Dentro de la etiqueta TD donde tenía metida la tabla simplemente puse la llamada include del php al documento con la tabla. Evidentemente renombré mi página de "página.html" a "página.php". Y funcionó a la primera, al cargarse la página se cargó la tabla externalizada y se colocó dentro de la celda deseada. ESTO ES MÁGICO.
Además acabo de animarme a convertir mi tabla de menú en una lista de menú y maquetarla con CSS.

Gracias viclobon por estar buscando lo mismo que yo.
Gracias Gordenay por despejar mis dudas.
Gracias NUKLEAR por los tips de orientación.

thorgal5 · #6 (**permalink**) 23/10/2008, 13:19

¿Una alternativa a los marcos como la que dice viclobon podría ser algo así?

http://www.sarabi.es/

Mi problema es el siguiente: tengo una web con marcos:

http://www.zaragozaoriental.com/contenido.php

Si navego desde la dirección principal todo va bien, pero si por ejemplo google encuentra un apartado de mi web y el usuario quiere ir directamente a él, no salen los marcos. Ejemplo:

http://www.zaragozaoriental.com/profesoras.html

Lo que quiero yo es poder tener un marco pero que si pongo la dirección de un apartado, me siga saliendo el marco. Por ejemplo como hace ésta:

http://www.sarabi.es/

http://www.sarabi.es/devorah/devorah.html

Sé que si hago la web sin marcos puedo conseguir lo que busco, pero sin embargo esta última web que os pongo no parece que lo haga así, sino que lo hace con un marco superior...

No sé si me he explicado bien, gracias de antemano.

Saludos

PD: lo siento por el copiar y pegar, pero aún no tengo permisos para insertar urls...