Trucos con plantillas: Menu configurable (1)
19 de enero de 2005 Autor: Andres Cayon Archivado en ArticulosEn este art?lo veremos c?las plantillas pueden cambiar de apariencia seg?ar?tros configurables por el autor, facilitando con ello su reusabilidad.
Hasta DW4, las zonas no editables de una plantilla eran est?cas: No pod? ser modificables por el usuario. Sin embargo, Tanto en DWMX como en DWMX 2004 es posible cambiar ciertas caracter?icas de la misma mediante par?tros que el usuario s?uede modificar en los documentos dependientes.
Esto no impide en ning?aso que la apariencia del nuevo documento permanezca dentro del dise?arcado por la plantilla, como veremos a continuaci?
La idea de este art?lo viene de una pregunta de Joshuatree (saludos, Jose), miembro del foro domestika.org. La cuesti?ra la siguiente:
Utilizamos una plantilla general para todo el sitio, que incluye un men? navegaci?Lo que necesitamos es que en dicho men?arezca seleccionada una opci? otra dependiendo del departamento para el creamos el documento:
Es decir, si el documento basado en dicha plantilla est?elacionado con ‘noticias’, el men?ber?ener esta apariencia:
Y si est?elacionado con ‘ventas’, ?a otra:
Comencemos:
Hemos dise? una plantilla con un men? 4 elementos, ‘principal, noticias, ventas, compras’:
El siguiente paso ser?eclarar un par?tro de Plantilla.
Los par?tros de plantilla son peque?lineas de c?o, envueltas por etiquetas de comentario HTML y que se encuentran dentro del encabezado del documento. Un ejemplo:
Como se puede comprobar, su estructura es muy similar a la de un elemento HTML. Veamos sus atributos:
- name: indica el nombre del par?tro.
- type: indica el tipo de par?tro. Los tipos aceptables son:
- boolean: el par?tro acepta valores del tipo ‘true/false’.
- URL: acepta url’s absolutas y relativas como valor
- color: acepta tanto nombres de colores como valores hexadecimales
number: numeros - text: cadenas de texto
- value: el valor asignado al par?tro; su tipo debe coincidir con el declarado para ‘type’
Por defecto, DW es capaz de escribir de forma autom?ca parametros de tipo booleano para 2 acciones: Crear una regi?pcional y hacer editable un atributo. En el resto de situaciones (como en nuestro caso) deberemos ser nosotros los que las escribamos directamente en el c?o.
Para nuestro men?scribiremos un par?tro de tipo texto:
Una vez guardada la plantilla, crearemos un documento nuevo basado en ella y veremos que, al seleccionar ‘Modificar->Propiedades de Plantilla’ nos aparece esta ventana, donde podremos modificar su valor:
Modificando el men?Una vez a?do el par?tro de plantilla, ha llegado la hora de trabajar en el men?/p>
La idea es simple: segun el texto que pongamos como par?to a trav?‘Formato->Propiedades de Plantilla’, cada fila cargar?n estilo u otro.
Para ello hemos definido 2 selectores en CSS:
.menuitem{
background-color:#FFFFFF;
border: 1px solid #000000;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #000000;
text-align: center;
}
.resalte{
background-color:#999900;
border: 1px solid #000000;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FFFFFF;
text-decoration: underline;
text-align: center;
}
Nuestro men? una tabla:
| Principal |
| Noticias |
En el siguiente art?lo explicaremos otro concepto necesario, las Expresiones de Plantilla, que nos permitir?conseguir que el menu cambie de acuerdo con el valor del par?tro.
Para estos art?los hemos preparado un archivo (menu_plantilla.dwt) de ejemplo (para su descarga es necesario ser miembro registrado).
Muy bueno el artículo.
Felicitaciones