Menu en todo mi sitio web
Estimado experto me veo en la tediosa labor de al realizar un cambio en mi barra de navegación de insertar la misma en todas mis páginas una por una lo cual es tedioso ya que tengo más de 40 páginas. En tu experiencia no tendrías alguna forma de que cada página busque el menu desplegable en una carpeta donde este ubicado dicho menu.
Es decir que la página busque el código donde yo lo direccione y cada vez que deba cambiar uno de mis rubros solo deba cambiar la barra y no insertarla en cada una de mis páginas.
Es decir que la página busque el código donde yo lo direccione y cada vez que deba cambiar uno de mis rubros solo deba cambiar la barra y no insertarla en cada una de mis páginas.
1 respuesta
Respuesta de Kike Rodríguez
1
Tienes varias formas de hacerlo, de pendiendo de lo que sepas de javascript, de php, de css, etc.
Depende también mucho, de como tengas estructurada la página. Si está todo en divs y solo es cambiar el div del menu por uno nuevo, si lo tienes ocn una buena hoja de estilos para que el cambio no afecte al resto del código, etc.
Por supuesto, se puede escribir el código del menu, y colocarlo en una página independiente que después cada página lea y lo presente en pantalla, es factible, pero creo que es la solución más complicada si no se sabe muy bien manejar los lenguajes mencionados. Sería crear el menú de forma dinámica al crear la página.
Hay soluciones más sencillas. Te daré un consejo para futuras páginas si las haces de igual modo: trabaja con plantillas (si usas por ejemplo dreamweaver). No sé si lo has hecho alguna vez. Consiste en diseñar un esquema de la página en el que se encuentra el menú principal, el pie de la página, los head, etc. y dejar como regiones editables el resto, o sea, el contenido por ejemplo. Así creas las páginas usando la plantilla, y cuando haces un cambio en la misma, actualiza todas las páginas de forma automática.
Pero una vez hecha ya, o si no tienes posibilidad de usar un programa que te permita plantillas, o no tienes tiempo para hacerlo, y de lenguajes no andas muy puesto, te recomendaría usar un iframe. Con un iframe creas una página principal, con el menú, el pie de la página la cabecera, etc. y luego un iframe que alberga el contenido. El iframe básicamente sirve para cargar el contenido de páginas web de una forma sencilla. Así, la solución no pasa por que cada página cargue el menú, si no al revés, que el menú cargue las 40 páginas según se pulsen los enlaces. Así cada vez que cambias esa página principal, añades más enlaces al menú, etc. tan solo tienes que diseñar la nueva página sin tener que hacer modificaciones en las demás.
Te pongo un ejemplo de iframe para que veas como funciona. Si no es la solución que buscas, no dudes en decírmelo, pero debes darme un poco más de información, sobre como está hecha la página, lenguajes, estilos, etc. que sabes tú de programación, en fin, para ajustar más la respuesta a tus necesidades y conocimientos:
- La página index contiene todo el diseño menos el contenido, que se cargará en el iframe
<body>
<div id="menu">
<!-- En "target" ponemos el nombre (name) del iframe -->
<!-- Cambia "pagina1.html, pagina2.html" etc. por páginas que tengas hechas para ver como funciona -->
<a href="pagina1.html" target="contenido">enlace uno</a>
<a href="pagina2.html" target="contenido">enlace dos</a>
<a href="pagina3.html" target="contenido">enlace tres</a>
</div>
<!-- En "src" ponemos la primera página que se carga en el iframe -->
<iframe id="contenido" name="contenido" src="pagina1.html">
<!-- Aquí puedes poner contenido que se verá si el navegador no acepta iframes -->
</iframe>
<!-- Asígnale estilos con "style" o con CSS igual que si fuera un div: posicion, ancho, alto, borde, etc. -->
</body>
Depende también mucho, de como tengas estructurada la página. Si está todo en divs y solo es cambiar el div del menu por uno nuevo, si lo tienes ocn una buena hoja de estilos para que el cambio no afecte al resto del código, etc.
Por supuesto, se puede escribir el código del menu, y colocarlo en una página independiente que después cada página lea y lo presente en pantalla, es factible, pero creo que es la solución más complicada si no se sabe muy bien manejar los lenguajes mencionados. Sería crear el menú de forma dinámica al crear la página.
Hay soluciones más sencillas. Te daré un consejo para futuras páginas si las haces de igual modo: trabaja con plantillas (si usas por ejemplo dreamweaver). No sé si lo has hecho alguna vez. Consiste en diseñar un esquema de la página en el que se encuentra el menú principal, el pie de la página, los head, etc. y dejar como regiones editables el resto, o sea, el contenido por ejemplo. Así creas las páginas usando la plantilla, y cuando haces un cambio en la misma, actualiza todas las páginas de forma automática.
Pero una vez hecha ya, o si no tienes posibilidad de usar un programa que te permita plantillas, o no tienes tiempo para hacerlo, y de lenguajes no andas muy puesto, te recomendaría usar un iframe. Con un iframe creas una página principal, con el menú, el pie de la página la cabecera, etc. y luego un iframe que alberga el contenido. El iframe básicamente sirve para cargar el contenido de páginas web de una forma sencilla. Así, la solución no pasa por que cada página cargue el menú, si no al revés, que el menú cargue las 40 páginas según se pulsen los enlaces. Así cada vez que cambias esa página principal, añades más enlaces al menú, etc. tan solo tienes que diseñar la nueva página sin tener que hacer modificaciones en las demás.
Te pongo un ejemplo de iframe para que veas como funciona. Si no es la solución que buscas, no dudes en decírmelo, pero debes darme un poco más de información, sobre como está hecha la página, lenguajes, estilos, etc. que sabes tú de programación, en fin, para ajustar más la respuesta a tus necesidades y conocimientos:
- La página index contiene todo el diseño menos el contenido, que se cargará en el iframe
<body>
<div id="menu">
<!-- En "target" ponemos el nombre (name) del iframe -->
<!-- Cambia "pagina1.html, pagina2.html" etc. por páginas que tengas hechas para ver como funciona -->
<a href="pagina1.html" target="contenido">enlace uno</a>
<a href="pagina2.html" target="contenido">enlace dos</a>
<a href="pagina3.html" target="contenido">enlace tres</a>
</div>
<!-- En "src" ponemos la primera página que se carga en el iframe -->
<iframe id="contenido" name="contenido" src="pagina1.html">
<!-- Aquí puedes poner contenido que se verá si el navegador no acepta iframes -->
</iframe>
<!-- Asígnale estilos con "style" o con CSS igual que si fuera un div: posicion, ancho, alto, borde, etc. -->
</body>
Gracias por responder a la brevedad experto, desde ya es una respuesta muy completa y aceptable, y me disculpo por no brindar más información ya que estaba medio apurado.Yo estoy haciendo la página en dreamwevar cs3, mediante tablas lo cual me habían dicho que es tedioso pero como ya esta terminada la tuve que dejar otro contratiempo era que mi cliente necesitaba la web lista y en menos de un mes la tuve que sacar.
El menu lo tengo generado en sothink dhtml menu, el cual te lo recomiendo por si no lo conocías ya que es muy completo.
Bueno el tema esta que cuando tengo que agregar un rubro al menu que tengo tengo que sacar la fila donde estaba ubicada mi menu e dejarla en blanco y luego ir al dhtml menúes y publicarlo página por página, este programa te publica ademas el código en java lo cual estaba pensando que abría alguna forma de solo crear un menu y mediante código que cada página llame al menu creado en la raíz del sitio, para evitar el tedioso trabajo de repetir lo ya mencionado en todas las página (40), de lenguajes conozco un poco de java, un poco de php y css, pero estoy en constante aprendizaje ya que me emociona y disfruto mucho el crear una página y que es posible compartirla a millones de personas.
Espero haberme expricado y te aclaro que con lo que comentaste de los iframes la verdad no entiendo mucho, si me podrías orientar me seria muy útil. Desde ya muchas gracias por tu tiempo.
El menu lo tengo generado en sothink dhtml menu, el cual te lo recomiendo por si no lo conocías ya que es muy completo.
Bueno el tema esta que cuando tengo que agregar un rubro al menu que tengo tengo que sacar la fila donde estaba ubicada mi menu e dejarla en blanco y luego ir al dhtml menúes y publicarlo página por página, este programa te publica ademas el código en java lo cual estaba pensando que abría alguna forma de solo crear un menu y mediante código que cada página llame al menu creado en la raíz del sitio, para evitar el tedioso trabajo de repetir lo ya mencionado en todas las página (40), de lenguajes conozco un poco de java, un poco de php y css, pero estoy en constante aprendizaje ya que me emociona y disfruto mucho el crear una página y que es posible compartirla a millones de personas.
Espero haberme expricado y te aclaro que con lo que comentaste de los iframes la verdad no entiendo mucho, si me podrías orientar me seria muy útil. Desde ya muchas gracias por tu tiempo.
Lo del iframe es de lo más sencillo. Coge la página principal de tu web, en ella supongo que habrá una cabecera con el logo de la empresa, algún texto, etc, el menú arriba o a la derecha, puede que tengas algún tipo de banner o similar y un pie de página y por supuesto el contenido.
Dejas toda la página tal como está, excepto el contenido. Lo copias y haces una página nueva con el que se llame por ejemplo "primera.html" y todo ese contenido lo cambias por (con los valores que necesites de altura y ancho, te sobrará el top y el left, pero te los pongo para que veas muchas de las opciones de estilo del iframe, si lo tienes en tablas es más sencillo, sustituyes todas las celdas del contenido por una celda única con el iframe y el tamaño que tenían):
<iframe id="contenido" name="contenido" src="primera.html" style="top:30px; left:200px; width:300px; height:400px;" frameborder="0" scrolling="no">
</iframe>
Tendrás la página principal igual que la tenías antes, solo que ahora hay un index con el menu y la estructura de la página y con un iframe donde cargas el resto de las 40 páginas. Para ello con las 39 restantes haces los mismo, deja solo el contenido, el resto lo eliminas, menu, pie, cabecera, banners, lo que sea que ya está en el index.
El menu conserva los enlaces como los tenía, es decir si al pulsar "Contacto" te abría antes "contacto.html" ahora hará lo mismo, pero cargándola dentro del iframe.
Para que funcione, lo único que tienes que cambiar en el menú es en cada enlace "target", supongo que lo tienes en "_self" para que te abra la nueva página en la misma ventana, pues lo cambias y lo pones como 'target="contenido"' (que es el nombre del iframe.
Para verlo funcionar es muy sencillo. Crea una nueva página llamada menu.html y pega el código completo del primer mensaje:
<body>
<div id="menu">
<!-- En "target" ponemos el nombre (name) del iframe -->
<!-- Cambia "pagina1.html, pagina2.html" etc. por páginas que tengas hechas para ver como funciona -->
<a href="pagina1.html" target="contenido">enlace uno</a>
<a href="pagina2.html" target="contenido">enlace dos</a>
<a href="pagina3.html" target="contenido">enlace tres</a>
</div>
<!-- En "src" ponemos la primera página que se carga en el iframe -->
<iframe id="contenido" name="contenido" src="pagina1.html">
<!-- Aquí puedes poner contenido que se verá si el navegador no acepta iframes -->
</iframe>
<!-- Asígnale estilos con "style" o con CSS igual que si fuera un div: posición, ancho, alto, borde, etc. -->
</body>
Ahora crea páginas llamadas pagina1.html, pagina2.html y pagina3.html en la misma carpeta, en estas inserta lo que quieras.
Abre menu.html y veras como funcionan los enlaces, así entenderás lo que te estoy explicando del iframe, si no lo has probado, hazlo.
Si una vez lo hayas visto, no es lo que buscas, me lo dices, pero ya nos metemos en Ajax un poco, y en hacer el menú en xml o cargar código con llamadas al servidor, y créeme, es más complicado y tendrás que modificar mucho las 40 páginas.
Kike
Dejas toda la página tal como está, excepto el contenido. Lo copias y haces una página nueva con el que se llame por ejemplo "primera.html" y todo ese contenido lo cambias por (con los valores que necesites de altura y ancho, te sobrará el top y el left, pero te los pongo para que veas muchas de las opciones de estilo del iframe, si lo tienes en tablas es más sencillo, sustituyes todas las celdas del contenido por una celda única con el iframe y el tamaño que tenían):
<iframe id="contenido" name="contenido" src="primera.html" style="top:30px; left:200px; width:300px; height:400px;" frameborder="0" scrolling="no">
</iframe>
Tendrás la página principal igual que la tenías antes, solo que ahora hay un index con el menu y la estructura de la página y con un iframe donde cargas el resto de las 40 páginas. Para ello con las 39 restantes haces los mismo, deja solo el contenido, el resto lo eliminas, menu, pie, cabecera, banners, lo que sea que ya está en el index.
El menu conserva los enlaces como los tenía, es decir si al pulsar "Contacto" te abría antes "contacto.html" ahora hará lo mismo, pero cargándola dentro del iframe.
Para que funcione, lo único que tienes que cambiar en el menú es en cada enlace "target", supongo que lo tienes en "_self" para que te abra la nueva página en la misma ventana, pues lo cambias y lo pones como 'target="contenido"' (que es el nombre del iframe.
Para verlo funcionar es muy sencillo. Crea una nueva página llamada menu.html y pega el código completo del primer mensaje:
<body>
<div id="menu">
<!-- En "target" ponemos el nombre (name) del iframe -->
<!-- Cambia "pagina1.html, pagina2.html" etc. por páginas que tengas hechas para ver como funciona -->
<a href="pagina1.html" target="contenido">enlace uno</a>
<a href="pagina2.html" target="contenido">enlace dos</a>
<a href="pagina3.html" target="contenido">enlace tres</a>
</div>
<!-- En "src" ponemos la primera página que se carga en el iframe -->
<iframe id="contenido" name="contenido" src="pagina1.html">
<!-- Aquí puedes poner contenido que se verá si el navegador no acepta iframes -->
</iframe>
<!-- Asígnale estilos con "style" o con CSS igual que si fuera un div: posición, ancho, alto, borde, etc. -->
</body>
Ahora crea páginas llamadas pagina1.html, pagina2.html y pagina3.html en la misma carpeta, en estas inserta lo que quieras.
Abre menu.html y veras como funcionan los enlaces, así entenderás lo que te estoy explicando del iframe, si no lo has probado, hazlo.
Si una vez lo hayas visto, no es lo que buscas, me lo dices, pero ya nos metemos en Ajax un poco, y en hacer el menú en xml o cargar código con llamadas al servidor, y créeme, es más complicado y tendrás que modificar mucho las 40 páginas.
Kike
Estimado experto desde ya muchas gracias por tu explicación que por demás esta decir es muy detallada y explicativa así como orientativa.he solucionado mi problema del menu.Lo que tenia que hacer es publicar un archivo java que seria guardado en la raíz del sitio luego direccdionar cada página que busque ese archivo en java(que es el menu que te había comentado creado con el sothink dhtml menu), así que ahora solo tengo que cambiar mi menu y publicarlo nuevamente sobre escibiendo el anterior y todos los menu se me cambian, automáticamente. Otra cosa que hice fue poner el menu en un
<div> al cual le di ciertos criterios css.Pero mi duda es la siguiente como para optimizar mi web posteriormente, es preferible trabajar con iframes y div al momento de crear mi web?¿por que?disculpa mi ignoracia pero espero que me saques esta duda.
Desde ya muchas gracias por tu ayuda.
<div> al cual le di ciertos criterios css.Pero mi duda es la siguiente como para optimizar mi web posteriormente, es preferible trabajar con iframes y div al momento de crear mi web?¿por que?disculpa mi ignoracia pero espero que me saques esta duda.
Desde ya muchas gracias por tu ayuda.
Primero mis disculpas, de java no sé absolutamente nada por lo que yo a esa solución no habría llegado a no ser como te decía (y como hace java) haciendo llamadas al servidor.
No, el iframe era una solución a ese problema puntual para no rehacer todas las páginas, y te puede resultar útil para alguna cosa puntual (como cargar páginas externas a tu servidor), pero está desaconsejado su uso, así como el de las tablas, en aras del buen uso de las CSS y de la creación de páginas conformes con el estándar del W3C. No es que no te vaya a funcionar, pero a la larga lo "desaconsejado" se pierde en el tiempo y los nuevos navegadores pueden ir dejando de implementarlo, no de una versión para otra, pero a la larga las webs dejan de funcionar correctamente, como pasó por ejemplo con las de HTML 4 que la gente diseñó sin atenerse al estándar.
En vez de tablas (se que es más cómodo y rápido) usa divs y css. La razón principal es que ahora las webs no se presentan solo en pantalla de tft de 21", se ven en móviles, pda's, notebooks, impresoras, etc. Y una buena estructuración permite que tú página se muestre adecuadamente en cada dispositivo si te atienes a los estándares, y te aseguras de que no se quedan obsoletas enseguida y no puedan mostrarse adecuadamente en nuevos elementos de hardware o a través de nuevos navegadores (o versiones).
Elimina todos los estilos de las páginas y mételos en hojas de estilos, te ayudará a la hora de modificar tu web y de reutilizar código.
Pero sobre todo, para evitar el problema que tuviste ahora, estructura muy bien las páginas desde el principio, evalúa los cambios que es posible que tengas que hacer y en base a eso diséñalas de forma que esos posibles cambios no te causen un gran trastorno. En este caso, si el menú va en todas las páginas y puede ser susceptible de modificación, o creas el menú de forma dinámica al cargar la página o usas, como te había comentado, plantillas. Con dreamweaver son muy sencillas de utilizar. Guardas un documento como plantilla, el index.html por ejemplo, y lo que sea variable de una página a otra lo pones como "región editable", lo que va a ser igual para todas las páginas no lo tocas. Así, al crear una nueva página, seleccionas la plantilla, en las regiones editables metes el contenido, y si cambia el menú de nuevo, lo modificas en la plantilla y automáticamente te actualiza todas las páginas. Una región editable por ejemplo son las meta, que varían de una página a otra, si no tendrán todas el mismo titulo y las mismas keywords. Pero las hojas de estilo, por ejemplo, pueden quedar fijas, de esta forma si las cambias de carpeta, se actualiza el cambio en todas las páginas sin tener que entrar en ellas una por una.
Puedes, con paciencia, ir cambiando las páginas. Crea la plantilla, pruébala bien, y poco a poco, no creo que haya problema para copiar y pegar, vas creando de nuevo las páginas en base a la plantilla.
No, el iframe era una solución a ese problema puntual para no rehacer todas las páginas, y te puede resultar útil para alguna cosa puntual (como cargar páginas externas a tu servidor), pero está desaconsejado su uso, así como el de las tablas, en aras del buen uso de las CSS y de la creación de páginas conformes con el estándar del W3C. No es que no te vaya a funcionar, pero a la larga lo "desaconsejado" se pierde en el tiempo y los nuevos navegadores pueden ir dejando de implementarlo, no de una versión para otra, pero a la larga las webs dejan de funcionar correctamente, como pasó por ejemplo con las de HTML 4 que la gente diseñó sin atenerse al estándar.
En vez de tablas (se que es más cómodo y rápido) usa divs y css. La razón principal es que ahora las webs no se presentan solo en pantalla de tft de 21", se ven en móviles, pda's, notebooks, impresoras, etc. Y una buena estructuración permite que tú página se muestre adecuadamente en cada dispositivo si te atienes a los estándares, y te aseguras de que no se quedan obsoletas enseguida y no puedan mostrarse adecuadamente en nuevos elementos de hardware o a través de nuevos navegadores (o versiones).
Elimina todos los estilos de las páginas y mételos en hojas de estilos, te ayudará a la hora de modificar tu web y de reutilizar código.
Pero sobre todo, para evitar el problema que tuviste ahora, estructura muy bien las páginas desde el principio, evalúa los cambios que es posible que tengas que hacer y en base a eso diséñalas de forma que esos posibles cambios no te causen un gran trastorno. En este caso, si el menú va en todas las páginas y puede ser susceptible de modificación, o creas el menú de forma dinámica al cargar la página o usas, como te había comentado, plantillas. Con dreamweaver son muy sencillas de utilizar. Guardas un documento como plantilla, el index.html por ejemplo, y lo que sea variable de una página a otra lo pones como "región editable", lo que va a ser igual para todas las páginas no lo tocas. Así, al crear una nueva página, seleccionas la plantilla, en las regiones editables metes el contenido, y si cambia el menú de nuevo, lo modificas en la plantilla y automáticamente te actualiza todas las páginas. Una región editable por ejemplo son las meta, que varían de una página a otra, si no tendrán todas el mismo titulo y las mismas keywords. Pero las hojas de estilo, por ejemplo, pueden quedar fijas, de esta forma si las cambias de carpeta, se actualiza el cambio en todas las páginas sin tener que entrar en ellas una por una.
Puedes, con paciencia, ir cambiando las páginas. Crea la plantilla, pruébala bien, y poco a poco, no creo que haya problema para copiar y pegar, vas creando de nuevo las páginas en base a la plantilla.
Estimado kike muchas gracias por los consejos aportados muy específicos y puntales con respecto a mi problema, es verdad lo de que debería haber tenido en cuenta los estándares ya que debería ser yo,"diseñador el que deba tener estos aspectos en cuanta a la hora de planear una web es que como te comente, soy algo nuevo en esto, peo cada día se aprende algo nuevo y lo intento implementar en mis webs. me gustaría que como experto me des tu opinión acerca de las mismas y que si me puedes dar algún consejo de como mejorar mis webs me lo hagas saber ya que la critica es lo que permite mejorar.
Le comento que puede contar conmigo para lo que necesite mi mail es [email protected] o [email protected] en lo que lo pueda ayudar cuente conmigo.
Muchas gracias por su tiempo acá les dejo mis web
luego le paso mi link de web para que pueda evaluarlas, si es posible.
Atentamente
Claudio del valle
Le comento que puede contar conmigo para lo que necesite mi mail es [email protected] o [email protected] en lo que lo pueda ayudar cuente conmigo.
Muchas gracias por su tiempo acá les dejo mis web
luego le paso mi link de web para que pueda evaluarlas, si es posible.
Atentamente
Claudio del valle
Hola tengo el mismo problema y pensé los de los frame, pero para el SEO es complicado, por que no cambia la URL. Si encontraron la solución me cuentan ?? - Enzo Tribiani