¿Cómo diseño esto? (menu)

Antrim · #1 (**permalink**) 10/03/2011, 15:58

Hola buenas, soy un novato en HTML y CSS (novatísimo, empecé aprendiendo hace 2 días literalmente). Estoy haciendo el proyecto fin de carrera y necesito hacer una tienda online de instrumentos musicales. La web tiene un logo (imagen) con el nombre de la tienda en letras guapas, y debajo un menú horizontal en el que aparecen Inicio, Regístrate, FAQ, Contacto, etc. Además me interesaría tener otro menú horizontal a la izquierda con Guitarras, Bajos, Baterías, etc, y un pequeño cuadrito a la derecha donde estuviera la cesta de la compra.

El problema es que dado que todavía no tengo ni papa de HTML no sé cómo abordar el siguiente problema. A ver si alguno me puede guiar: cuando estamos en la página principal (index.html) y por ejemplo hacemos click en Regístrate en el menú, la idea es que tanto el logo, como los menús se queden donde están y simplemente aparezca el código del formulario (que guardaría en registro.html) en el centro de la página. Pero la única forma que conozco ahora mismo de hacer esto, es que en el archivo registro.html, aparezca copiado y pegado todo el código de index.html con el logo, los menus, etc. Es decir, cargarlo todo otra vez. No sé si me explico. A mí esto, desde mi ignorancia, me parece una chapuza, tener que cargar logo+menus cada vez que viajamos entre la pagina.

¿Existe alguna forma de resolver esto? Busco la solución más simple, puesto que aunque tenga que diseñar la web, el diseño no es lo más importante (pero lo que no quiero es hacer una chapuza!).

Muchas gracias! ;)

Kamae · #2 (**permalink**) 11/03/2011, 04:37

Buenas y bienvenido al maravilloso mundo del HTML jajaj

Como bien dices, es una chapuza, no por funcionamiento, sinó porque el día que tengas que cambiar un acento de una sección, o añadir una nueva, o lo que sea, tendrás que cambiarlo en todos los archivos (yo lo sufrí en el curro con una web de 300 .html aprox y madre mía...)

Lo primero que deberías hacer es tener sólo el menú en una sola página, por ejemplo "menu.html". Luego tener otra que se llame "main.html" por ejemplo, que será el contenido de la página. Y finalmente "index.html" que será el que lo organizará todo para que se vea en una sola página, usando marcos o frames.

Archivo: main.html

Código PHP:

  <html>
<body>
    <center>
    Bienvenidos a mi hueb!
    </center>
</body>
</html>

Archivo: menu.html

Código PHP:

  <html>
<body>
    <center>
    <table style="width:400px; text-align:center;" border="0">
        <tr style="text-align:center;">
            <td><a href="main.html" target="main">Inicio</a></td>
            <td><a href="menu.html" target="main">Registrate</a></td>
            <td>FAQ</td>
            <td>Contacto</td>
        </tr>
    </table>
    <table style="width:300px; text-align:center;" border="0">
        <tr style="text-align:center;">
            <td>Guitarras</td>
            <td>Bajos</td>
            <td>Baterias</td>
        </tr>
    </table>
    </center>
</body>
</html>

Archivo: index.html

Código PHP:

  <html>
<head>
    <title>Mi hueb</title>
</head>
<frameset rows="10%,*" frameborder="1">
    <frame name="menu" src="menu.html" marginwidth="10" marginheight="10" scrolling="auto">
    <frame name="main" src="main.html" marginwidth="10" marginheight="10" scrolling="auto">
</frameset>
</html>

Abre index.html y comprueba que la página de secciones de arriba no cambia, sólo recarga en el marco de abajo. Para hacer eso, fíjate que los links con "a href" deben llevar target="name_del_frame_donde_queremos_cargarlo".
Si no quieres que aparezca la línea separatoria ponle un cero en frameborder="1" (lo dejé visible para que vieras como funciona realmente)

Si necesitas más info googlea buscando "frames HTML".

Saludos!

Antrim · #3 (**permalink**) 11/03/2011, 21:52

Muchas gracias por la respuesta. Ya me vale no haber pensado en los marcos, si hasta recuerdo haberlos utilizado con Frontpage en el instituto.

Ahora viene otro problema. Me he puesto a mirar esto de los marcos y cómo funcionan y tal, y he probado a implementarlos con lo que tengo hasta ahora de código de mi web. Pero no pega en absoluto. Quizá es que mi idea es demasiado complicada para mis pocos conocimientos, pero no creo que los frames vayan a funcionar en mi caso. Subo una screen de lo que llevo hecho para que se vea la idea que llevo:

Como se puede ver hay un logo y dos menús, uno arriba y otro a la izq, he intentado hacerlos lo más atractivos posible a base de CSS e imágenes, y todos los botones se iluminan cuando pasas el ratón por encima. Vamos, que según lo veo yo, a diferencia de lo que sería utilizar marcos, 3 o 4 HTML separados mostrados a la vez, lo que yo quiero es que pedazos de código se mantengan estáticos mientras otros cambian. No sé si me explico (más bien no), espero que alguien entienda lo que digo. Visto lo visto, doy por hecho que voy a tener que utilizar Javascript, PHP, o algo así, puesto que simplemente con marcos no lo veo posible, y no veo más opciones con puramente HTML y CSS.

Por dónde debería tirar? Javascript, PHP, otra cosa? Mi conocimiento de cualquiera de ellos es 0%, así que con que me digáis qué tengo que utilizar me pongo manos a la obra.
También acepto cualquier tipo de crítica (constructiva) sobre lo que llevo hecho hasta el momento!

Gracias!

jomaruro · #4 (**permalink**) 12/03/2011, 03:30

Hola:

Más que utilizar frames, que son te provocará problemas con la indexación en los buscadores deberías utilizar AJAX.

Saludos.

Antrim · #5 (**permalink**) 14/03/2011, 12:36

Es AJAX lo más simple en este caso? No hay forma alguna de hacerlo con PHP o Javascript, que creo que resultaría más simple? Es que estoy buscando como loco en google soluciones para esto y en cada sitio leo una cosa distinta, que si "server side noseque", que si iframes, que si Javascript, que si AJAX...
Estoy hecho un lío, me esperaba que esto fuera algo bastante standard puesto que hoy en día casi cualquier web con aspecto decente funciona así (sin frames, un logo arriba y un menu a la izq que no se inmutan nunca y el contenido que aparece en el centro), pero por lo visto debe haber 1231231 maneras de hacerlo.
Es AJAX la mas simple, o hay algun camino más sencillo y corto?

Gracias!

laratik · #6 (**permalink**) 15/03/2011, 13:21

Creo que hay un camino más simple que AJAX y es include() o require() de PHP, claro que el efecto no sera el mismo que con frames, iframes o AJAX, puesto que tendras que recargar la pagina completa. Pero el codigo que se despliegue sera siempre el que tengas almacenado en los archivos que estas incluyendo. De esta forma solo bastara modificar estos archivos para que se modifiquen todas las paginas que los requieran.

Sugiero que busques en google mas información sobre estas funciones PHP.

leo_nqn · #7 (**permalink**) 15/03/2011, 18:05

Tranquilo, creo que si recien estas entrando en html y css te conviene seguir con ellos y con java script.. pero no te olvides de revisar el Tema AJAX es muy util.. y muy importante.. Saludos..

Kamae · #8 (**permalink**) 16/03/2011, 14:58

Yo coincido con laratik en que lo más sencillo te será el require(); de PHP. De hecho podrías hacer la web toda en HTML y el único código en PHP ser el require(); para llamar a los HTML tal y como has hecho con los frames. Pero la verdad es que AJAX no me lo he mirado mucho nunca, si estás a 0 en ambos lenguajes supongo que "lo mismo dá" que "dá lo mismo" jeje

La diferencia ya te la han explicado, la web con frames recarga sólo uno (o varios) frames en concreto, en cambio el require(); de PHP te recargará toda la página, aunque para algo está la memoria caché :P

laratik · #9 (**permalink**) 16/03/2011, 15:02

De hecho para utilizar AJAX deberas pasar antes por PHP

o cualquier otro lenguaje del lado del servidor. Es decir para AJAX debes saber: html, PHP, javascript y opcionalmente css.... opciones faciles include y require