A medida que se deja de utilizar la etiqueta font para reeplazarla por estilos CSS, se hace complicado reemplazarlas en un sitio ya existente. En este tutorial veremos c? con la potencia de “Buscar y Reemplazar” podemos conseguir muchos avances.

En los sitio desarrollados hace tiempo era habitual el uso de etiquetas
para aplicar formato al texto. Sin embargo, el uso cada vez m?extendido de
CSS ha hecho que la etiqueta apenas se utilice en nuestros d? (De hecho se
encuentra ya fuera del estandar html).

¿C?puede Dreamweaver ayudarnos a convertir nuestras viejas etiquetas font
en
estilos CSS? Aprovechando la potencia de “Buscar y Reemplazar”.

Como ejemplo, buscaremos etiquetas que tengan esta apariencia:


esto es un texto

Y las convertiremos en:

esto es un texto

Comencemos: El primer paso ser?rear un nuevo estilo llamado estilo1:

.estilo1 {
font-family: Arial, Helvetica, sans-serif;
color: #CCCCCC;

}

Con el estilo creado (podemos guardarlo en un archivo css aparte, ya que lo
que nos interesa es que exista), abriemos la ventana de buscar y reemplazar:

En ella vemos combinado expresiones regulares y definici?e atributos, que
iremos explicando paso a paso:

En el ejemplo buscamos en el documento actual, pero podr?os haber ampliado
la b?eda a todo el sitio o a una carpeta determinada sin modificar nada.

Tambi?deberemos activar la casilla “Utilizar Expresiones Regulares”, ya que
haremos uso de ellas

Las 4 primeras lineas indican que estamos buscando etiquetas con los
siguientes atributos (no importa el orden):

  • Debe contener el atributo color=”#CCCCCC”
  • Debe contener: size=”2″
  • Debe contener: face=”Arial, Helvetica, sans-serif”

Por ?mo, la ?ma opci?ace uso de una expresi?egular: permite que dentro
del espacio exista cualquier tipo de texto, gracias a la expresi?egular ([\w\W]*).

Para los no inciados: ¿qu?s una expresi?egular?
b?camente consiste en una combinaci?e caracteres que equivalen a ciertas
cadenas de texto, de manera que se puedan utilizar para validaci?e formularios,
de entradas de texto, para comprobar si un valor es num?co… Las expresiones
regulares (conocidas abreviadamente como RegExps) existen en pr?icamente todos
los
lenguajes
y
son
una herramienta muy poderosa. En un art?lo de pr?a aparici?Luis Alberto
Barbosa
explicar?on m?detalle los tipos de caracteres disponibles y sus equivalencias.

Continuemos:
Tan s?nos queda definir el reemplazo:

Reemplazaremos etiqueta y contenido por:

$1

Es importante notar que no es necesario escribir la etiqueta de cierre, ya que
DW la reemplaza autom?camente.

¿Y qu?ignifica $1?
Se trata sencillamente
de una variable.

¿Donde la hemos definido, entonces? al utilizar una expresi?egular: Al utilizar
expresiones regulares, las cadenas de texto de cada coincidencia se convierten
en
variables
que
son
declaradas
como $1,$2,$3…
As?en:

esto
es un texto

La cadena “esto es un texto” coincide con nuestra expresi?egular “([\W\w]*)”
y se convierte auom?camente en una variable y puede ser llamada directamente
utilizando
$1.
Si
hubi?mos
utilizado
una
regexp
m?complicada que diera lugar a varias coincidencias, cada una de ellas podr?ser llamada mediante $1,$2… etc.

Ya simplemente queda pulsar “Reemplazar todo” y autom?camente DW convertir?uestras viejas etiquetas a etiquetas con un estilo definido.

DWUG Users: en la seccion de ficheros encontrar? un documento html y un archivo que contiene el reemplazo de muestra utilizado en el tutorial (convertir_font_en_span.zip)