Tutorial

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!

25 diciembre, 2014
dreamweaver

Estilos CSS en 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 […]
25 diciembre, 2014
dreamweaver

Enviar Formulario por E-Mail con DreamWeaver

Aunque la mejor opción para enviar formularios por e-mail es tener un script server-side que maneje el envío, por ejemplo en PHP, ASP, Perl, etc. O […]
25 diciembre, 2014
dreamweaver

Las Etiquetas HTML y DreamWeaver

Hola, antes que nada, este es un artículo técnico, para usuarios nuevos e intermedios (Queda hecha la aclaración). Prólogo Las «gracias» del HTML en su concepción […]
25 diciembre, 2014
dreamweaver

Los Modos de Diseño de DreamWeaver

DreamWeaver soporta 3 modos de diseño, Estándar, Ampliada y Diseño, todos ellos accesibles desde la vida Diseño (Ver > Diseño). Para acceder a cada modo debemos […]
25 diciembre, 2014
dreamweaver

El problema del Ancho de Banda y DreamWeaver

Todos soñamos con un pelito de fibra óptica o al menos una T3, pero la realidad es que probablemente nuestra conexión a Internet sea por un […]
25 diciembre, 2014
dreamweaver

Informe de Errores en DreamWeaver

DreamWeaver MX 2004 posee una interesante herramienta para comprobar los posibles errores de visualización de nuestra página en varios navegadores. Para ver un informe sobre los […]
25 diciembre, 2014
dreamweaver

CSS en tiempo Diseño con DreamWeaver

A muchos os habrá pasado alguna vez si utilizáis archivos incluidos en vuestros documentos: la imposibilidad de ver realment como quedan realmente si estáis utilizando CSS, […]
25 diciembre, 2014
dreamweaver

Manejo de fechas en PHP y MySQL con DreamWeaver

Este es el primero de una serie de 3 tutoriales sobre manipulacion de fechas en PHP y MySQL, orientado sobre todo a los usuarios de Dreamweaver […]
25 diciembre, 2014
dreamweaver

Historial de Acciones en DreamWeaver

Existe una ventana "History" donde se registra cada paso que realizas en un documento de Dreamweaver desde que lo abriste. Esta tiene mucha utilidad ya que […]
25 diciembre, 2014
dreamweaver

Trabajo en Grupo con DreamWeaver

Siempre es complicado coordinar el desarrollo de una página web entre varias personas que trabajen en ella simultáneamente. Por suerte, Dreamweaver 3 incorpora un mecanismo de […]
25 diciembre, 2014
dreamweaver

Importar Datos en DreamWeaver

Dreamweaver te permite importar datos en tablas, que es mucho más sencillo que cortar y pegar contenidos una celda tras otra. La única pega es que […]
25 diciembre, 2014
dreamweaver

Vista diseño para formatos no reconocidos en DreamWeaver

DM MX, en principio, sólo permite utilizar el modo vista diseño con aquellos archivos cuyas extensiones reconoce «oficialmente»: ASP, JSP, PHP3, PHP, HTML… ¿Y si intentamos […]
25 diciembre, 2014
dreamweaver

Mi Primera Extensión en DreamWeaver

Este tutorial nos mostrará los aspectos básicos de cómo se crea una extensión para Dreamweaver y, si seguís los pasos, podréis crear vosotros mismos la extensión […]
25 diciembre, 2014
dreamweaver

¿Por que programación dinámica con DreamWeaver?

Con la aparición del dreamweaver MX y todas sus funcionalidades, es la primera pregunta que hacen los montajistas tradicionales. Las páginas dinámicas o páginas activas ya […]
25 diciembre, 2014
dreamweaver

Server Side Include en DreamWeaver

Una capacidad desperdiciada en dreamweaver y muchas veces no entendida Alguien me preguntó el otro día para qué servía ese botoncito con signo gato en los […]
25 diciembre, 2014
dreamweaver

Funciones de Búsqueda de DreamWeaver

1.- Tienes que cambiar el color de fondo de todas las páginas de tu sitio y no usaste plantillas? 2.- Conque al &·%$·&%·»$ del jefe ahora […]
25 diciembre, 2014
dreamweaver

Extensiones para Discapacitados en DreamWeaver

Habilitar nuestros sitios web para que puedan ser cómodamente visitados por personas que no tienen conexiones rápidas, browsers de última generación —e incluso por usuarios con […]
25 diciembre, 2014
dreamweaver

Creando Cursos con CourseBuilder y DreamWeaver

Siguiendo con las extensiones gratuitas de Dreamweaver, le echamos una mirada a Coursebuilder, que nos permite crear instrucción en línea sin complicarnos la existencia Coursebuilder es […]
25 diciembre, 2014
dreamweaver

Extensiones DreamWeaver

Una de las características que proporciona Dreamweaver que no hacen otros editores es la posibilidad de ampliar su funcionalidad por medio de extensiones, muchas de las […]
25 diciembre, 2014
dreamweaver

El protocolo FTP y DreamWeaver

Ftp es un protocolo para la transferencia de archivos. Lo cual significa la capacidad de enviar un archivo digital de un lugar “local” a uno “remoto” […]
25 diciembre, 2014
dreamweaver

Capacitando a nuestros usuarios: Coursebuilder

Siguiendo con las extensiones gratuitas de Dreamweaver, le echamos una mirada a Coursebuilder, que nos permite crear instrucción en línea sin complicarnos la existencia. Coursebuilder es […]
25 diciembre, 2014
dreamweaver

Creación de páginas web a base de tablas en Dreamweaver

En Dreamweaver 4: En en el tag BODY colocar la propiedad topmargin=0 y leftmargin=0, Por ej: <body topmargin=0 leftmargin=0> Oprima: vista de disposición en el panel […]