Una de las ventajas de un administrador de contenido como Drupal es que permite crear menus que cambian de acuerdo como cambia el cotenido o bien cambiar cuando el usuario ajusta estos menus desde la administración.
Estos menús dinámicos resultan muy útiles y es posible cambiar su diseño modificando el css del tema que se use. Algunas veces por razones de imagen, de diseño es necesario crear un menú que este hecho de imágenes y que permita el uso de fotografías, algún efecto que se integra al fondo o bien que se use una fuente muy en particular y siendo el resultado una imagen se vera igual en cualquier navegador.
Esto claro tiene varias desventajas, hacer un menú de este tipo implica que desde un inicio se tenga muy claro que paginas y secciones van en el , ya que un cambio posterior implicara modificar estas imágenes o bien reconstruir completamente el menú, resulta pues una solución bastante rígida que impide que el usuario final modifique este menu, por lo menos desde la administración de Drupal.
Armar el menu
El primer paso es diseñar el menú en cualquier programa de edición de imagen ya sea photoshop, fireworks o corel draw, lo importante es que permita dos cosas por una lado dar salida al diseño como imagen ya sea jpg, gif o png, por otro que el programa tenga capaz (layers) para poder crear los dos estados del boton, el estado normal cuando no se pasa el mouse y el estado de over cuando se pasa encima el mouse y sucede algo, puede ser que la letra cambie de color o hasta el fondo cambie, es un efecto sencillo de un cuadro que permite dejar claro que es un boton y que liga a algo.
Se tiene que recortar cada botón, resultando en dos imágenes por botón, en caso de photoshop y fireworks permite hacer esto más o menos automáticamente
Una vez que se recorta todo, si se uso firework se tiene una carpeta con todas las imágenes y un archivo html que con la estructura del menú así como el código de javascript necesario para hacer el efecto de mouseover (también es posible crear el efecto con css http://www.webtaller.com/construccion/lenguajes/css/lecciones/menu_con_efecto_onmouseover_con_css.php) si se creo desde photoshop el menú lo más probable es que se tenga un archivo html pero sin el efecto de mouseover que se tendrá que crear en dreamweaver o bien directamente editando el código, también se obtendrá una carpeta con todas las imagenes del menu.
Es importante quitar a este codigo html toda la declaración de que tipo de documento es
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
todas las etiquetas <head> y <body>
solo debe quedar las etiquetas <script> que es el código javascript, todo lo que esta <table> que es la estructura y liga a las imágenes y si se usara css lo que esta en las etiquetas <style>
no se requiere lo demás del código del html ya que tanto la declaración de el tipo de documento como las otras etiquetas de la paginas las dará directamente el tema de drupal, solo se insertara el código del menú y no una pagina completa (lo cual causaría un conflicto)
Integrar a tema de drupal
Para integrar el tema a un tema de drupal se tiene que entender algunas cosas básicas de los temas, primero que la mayoría de los temas de Drupal están hechos con divs y no con tablas y cuando se entra por primera vez a ver el código que los componen, generalmente en el archivo page.tpl.php lo que se ve son solo hileras de divs y no una vista de como se vera ya montado sobre un sitio. En cambio el código html que sale de los programas de edición de imágenes crean un código de tablas.
la segunda cosa que se debe entender es más o menos como se compone el código de un tema la estructura es fundamentalmente la misma de un documento html solamente que con llamadas a diversos códigos php.
Después de la etiqueta <body> se empieza a estructurar las diferentes secciones que componen el diseño, cada tema aborda diferente como estructurar, pero generalmente tiene una sección de header que es reconocible por algún div o class integrado al div como <div id="header"> y también por que aparece llamados en php como estos:
<?php if ($header): ?>
<div id="header-blocks" class="region region-header">
<?php print $header; ?>
</div> <!-- /#header-blocks -->
<?php endif; ?>
o bien a el logotipo o a el texto de presentación al sitio.
después generalmente se cierra el div y se empieza a llamar un marco general para el contenido del sitio o bien se llama directamente la columna de la izquierda
<?php if ($left): ?>
<div id="sidebar-left"><div id="sidebar-left-inner" class="region region-left">
<?php print $left; ?>
</div></div> <!-- /#sidebar-left-inner, /#sidebar-left -->
<?php endif; ?>
y luego el contenido
<div id="content-area">
<?php print $content; ?>
</div>
y después la columna de la izquierda y finalmente el pie de la pagina. Es importante recalcar que planteo un esquema muy general, al ver cada tema se encuentra uno con más código.
Una vez que se tiene identificado donde insertar el menu se puede colocar el codigo por ejemplo si escogemos la cabeza, el codigo quedaria así:
?php if ($header): ?>
<div id="header-blocks" class="region region-header">
<?php print $header; ?>
<table>
<tr>
<td colspan="3" id="sidebar-left3"><table border="0" cellpadding="0" cellspacing="0" width="750">
<!-- fwtable fwsrc="maytemenuenglish.png" fwbase="maytemenuenglish.jpg" fwstyle="Dreamweaver" fwdocid = "1252102515" fwnested="0" -->
<tr>
<td><img src="/themes/english/images/maytemenuenglish_r1_c1.jpg" alt="" name="maytemenuenglish_r1_c1" width="76" height="55" border="0" id="maytemenuenglish_r1_c1" /></td>
<td><a href="javascript:;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('maytemenuenglish_r1_c2','','themes/english/images/maytemenuenglish_r1_c2_f2.jpg',1);"><img src=/themes/english/images/maytemenuenglish_r1_c2.jpg" alt="" name="maytemenuenglish_r1_c2" width="106" height="55" border="0" id="maytemenuenglish_r1_c2" /></a></td>
</tr>
</table>
</div> <!-- /#header-blocks -->
<?php endif; ?>
En este caso pongo el código en parte de un sitio que hice que es el de Mayteprida.com junto con el código de header que se mostró más arriba.
Uno pensaría que al colocar el código del menu ya es más que suficiente pero faltan algunos pasos más, el primero es que se requiere cambiar las ligas a cada imagen, generalmente al crear el menu se tienen ligas como images/nombredelaimagen.jpg lo que indica que la imagen esta en un folder que se llama images, para que funcione una liga dentro de un tema de drupal se requiere especificar más la ruta de la imagen, cada tema de drupal generalmente una carpeta que se llama images, para llamar a la imagen se tiene que poner una ruta de este tipo: themes/nombredeltema/images/nombredelaimagen.jpg de esta manera se indica que la imagen esta en el folder de temas de Drupal, dentro del tema en la carpeta que se llama images, también es posible agregar una ruta absoluta incluyendo el nombre del sitio, pero no es la mejor opción.
Es importante también arriba de la etiqueta <table > poner todo el código javascript que se usara o bien hacer un llamada a un archivo js que contenga este codigo que servira para hacer el efecto de mouseover, si se usara algún código css se tendría que hacer un llamado también, pero es mejor integrar todo el codigo css nuevo a el archivo style.css que ya incluya el tema de Drupal.
ahora bien es importante revisar el código css que tiene el tema de Drupal ya que al insertar este codigo del menú muchas veces no se ve tal cual se creo, muchos temas traen en su código (o no traen) definiciones para las etiquetas table y tr que le dan espacios de más a este tipo de código, también muchos temas tienen espacios definidos para la cabeza o justificaciones que hacen que un menu no siempre quede a la primera en el lugar donde uno lo pensó, por lo que se tiene que modificar el código css para que no cause ningún conflicto con el código.
Como poner un menu de imagenes en Drupal
Categorias
Versión
Mostrar contenido a determinados usuarios.
En respuesta a Mostrar contenido a determinados usuarios. por jsequeiros (no verificado)
Permisos
Tablas en drupal 7
Por favor que alguien me diga como puedo mostrar un menú dentro de una tabla???
En respuesta a Tablas en drupal 7 por Marisel2015 (no verificado)
respuesta
Puedes crear un bloque y en el bloque pones todo el html con la tabla. aun que ya no se recomienda usar tablas para menús.
En respuesta a respuesta por ahuacan
Gracias por la respuesta pero...
Muchas gracias por la respuesta ...la verdad es mi 1er sitio web y estoy aprendiendo drupal ahora...He estudiado y avanzado mucho ,pero hay muchas cosas que no sé:
Cuando se crea un menú...se crea un bloque con el mismo nombre,osea que esa parte ya la tengo,ahora en cuánto a poner todo el html con la tabla,dd sería en mi page.tpl ???
En respuesta a Gracias por la respuesta pero... por Marisel2015 (no verificado)
Depende
Si tu menú esta dentro de el sistema de menús de drupal se crea automaticamente el bloque (esto supongo ya lo viste). Si quieres crear un menú con imágenes más bien crea un bloque y pon en el cuerpo del bloque el html. Podrias poner un menu con html e imagenes directamente en el tema, pero eso sería muy rigido, no lo recomiendo.
Añadir nuevo comentario