Estilos CSS en DreamWeaver

dreamweaver
Creando Cursos con CourseBuilder y DreamWeaver
25 diciembre, 2014
dreamweaver
Comprobar Ortografía en DreamWeaver
25 diciembre, 2014

Estilos CSS en DreamWeaver

dreamweaver

Imagínate que tu jefe, luego de 2 meses de arduo trabajo en esos preciados 235 archivos .html para ese gran megaproyecto, se le ocurre que esa tablita de arriba, si esa maldita pequeña tabla, se vería mejor si su fondo fuera rojo y sus letras blancas. “Me imagino que ocupaste CSS” pregunta relajado, sin notar que tu cabeza hierve y tus manos se disponen a agarrarlo a trompadas.

Señoras y señores, les presento a su majestad, el CSS. Ta taaán.

El CSS (Hoja de Estilo en Cascada, Cascading Style Sheet para los de colegio inglés) ha sido el gran alivio para los que hemos tenido que maquetear una gran cantidad de archivos. Separa el diseño de la maquetación, no van unidos. Es un simple indicador al browser que le informa ‘Hey socio, esas letras las necesito rojas por favor y más todas las que le diga’. Afortunadamente si quiero cambiar las instrucciones de ese indicador, lo hago sólo una vez y no las 235 veces. Pero hay más.

CSS tiene grandes posibilidades de cambiar la apariencia de un sitio. Entre los trucos más solicitados están: el de cambiar las características de los links (sacarle el subrayado por ejemplo); hacer que en un documento existan todos los tipos de links que yo quiera; jugar con las imágenes de fondo; cambiar la apariencia de objetos de formularios; cambiar cursores; agregar filtros; cambiar características de los elementos de HTML, entre otros. Ustedes deben ser los descubridores: acá va un pequeño empujón.

Vamos a la práctica. Dreamweaver > Windows > CSS Styles. O Shift+F11 es más sencillo. Abre esa paleta y aparecerá por defecto la palabra none y unos iconos abajo a la derecha. Básicamente Dreamweaver da la posibilidad de vincular un nuevo estilo CSS desde un archivo (archivo de extensión .css que puedes abrir desde el block de notas y desde el que puedes tener todos los estilos que necesites), crear un nuevo archivo, editarlo, crear estilos sólo para esa página (incrustados) y además editarlos.

Elegimos Nuevo Estilo y se nos aparece una nueva paleta. En ella hay 5 opciones. Las tres primeras se refieren al tipo de estilo que vamos a crear (una class, redefinir un tag HTML que ya lo explicaremos y usar un CSS selector), y las otras a donde va a estar (en un nuevo documento de estilo o sólo para este). En este ejemplo, escogemos crear una class, le inventamos el nombre y en un nuevo documento. El Dream pregunta dónde guardarlo. Hay que tener especial cuidado sobre todo para los que les encanta estar moviendo archivos. Esto es igual a las rutas de imágenes, se mueven y no aparecen. Ahora si se llega a mover este archivo, tu sitio se verá completamente desconfigurado y tu jefe muy desfigurado.

Bueno, ahora ya es cosa de llegar y llevar. DW ofrece una cantidad bastante grande de parámetros que pueden ser configurados a tu antojo. Hasta el momento vamos bien, pero ¿para qué diablos estamos creando un estilo? Tomemos el ejemplo del comienzo. Tu jefe quiere la tabla de color rojo, letras blancas, cursivas y cada vez que el cursor pase por ahí, que se convierta en el relojito de ‘espere’ (no sé para qué, pero vale el ejemplo). “Ok jefe usted siempre tiene la razón, quiero ser como usted” dirán algunos más motivados. Ya lo demás es fácil. En la categoría Type escogemos la fuente si es necesario, en estilo cursiva, en color el blanco; en la Background, el color rojo; en la Extensions cursor > wait. Listo. Ok > Save > Done.

Ahora a aplicar. Voy donde la tabla, la selecciono, en mi panel de CSS abajo de none ya estará incluido el nuevo estilo y lo pincho. Nada más. Ahí te das cuenta que puedes modificar muchos aspectos de tu página con un sólo click. Uno sólo, no está mal.

Realmente el código del archivo nuevo que generó el Dream es el siguiente:
.caprichoDeMiJefe { font-family: Arial, Helvetica, sans-serif; font-style: italic; cursor: wait; color: #FFFFFF; background-color: #FF0000}
Y en el archivo .htm fue el siguiente (eso sí, debes agregarselo a todos las páginas de tu sitio a través del Attach Style Sheet de la paleta de CSS):
<link rel=”stylesheet” href=”estilos.css” type=”text/css”> Dentro del <HEAD>
Y la tabla queda con este código:
<table width=”50%” border=”0″ cellspacing=”2″ cellpadding=”2″ class=”caprichoDeMiJefe”>
<tr>
<td>Hola amigos</td>
</tr>
</table>

Esto significa que el archivo ya está linkeado con el css y a su vez éste ya tiene definida las órdenes. Si el pelota de tu jefe, después de haber cambiado todas las 235 tablitas, se le ocurre “Siempre dije que el azul es el mejor color”. Ja já, Shift+F11 > Editar Estilo > Elige el archivo > Elige el estilo > Background > Background Color > Color azul > ¡Toma!

Esto último también se puede editar directamente desde el archivo, a través del Notepad o Block de Notas

Volvamos atrás. Ahora queremos redefinir un tag HTML, esto quiere decir que todas las veces que aparezca un tag específico, tendrá las características que queramos. Al abrir la ventana Nuevo Estilo y elegir esta segunda opción, nos aparece una lista de tags a los cuales podemos agregarle características propias. Por ejemplo puedes decidir que desde ahora los <H1> van a tener letra de 18 pixeles. Ojo, estos tags no los muestra la paleta de CSS porque asume que no necesitas aplicarlos arbitrariamente (como las class), sino el 100% de las veces tendrán esas características (a excepción que forzadamente los cambies desde una selección). Si ya no te gustaron los 18 pixeles, solamente debes editarlos desde el Dream o el Notepad.

Por último si quieres ocupar un CSS selector, DW te da a escoger 4 opciones para tus links: Active, Link, Visited y Hover. Link es como debiera mostrarse cuando lo ves por primera vez; el Hover, cuando pasas el puntero sobre él; el Active cuando haces click en él; y el Visited, cuando ya fue visitado. Si no se definen, estos adoptan el color por defecto del HTML. Estos estilos tampoco los muestra la paleta de CSS.

¿Qué nos queda? Sólo informar que a pesar de lo cómodo que es vincular los estilos a un archivo .css hay gente a la que también le puede ser útil que estos estilos sólo estén dentro del documento .html, para eso elige en la ventana Nuevo Estilo, ‘Sólo en este documento’. Lo demás es igual. Por último también puedes vincular tus estilos a una dirección URL:
<link rel=”stylesheet” href=”http://www.terra.cl/include/home/estilo.css” type=”text/css”>

Eso sí, si quieres hacer este truco, cuando quieras aplicar un estilo a una celda por ejemplo, debes hacerlo a manopla (escribir <td class=”valores”>). No va a aparecer ni en la ventana de CSS y aunque lo escribas el Dream no te lo muestra hasta apretar el famoso F12.

Si quieres obtener un programilla especial para manejar estilos http://www.bradsoft.com/topstyle/index.asp.

Bueno muchachos espero que les haya servido de algo. Ahora, a descubrirlo!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *