Tutorial

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

¿Cómo 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:

<font face=»Arial, Helvetica, sans-serif» face=»2″ color=»#CCCCCC»>
esto es un texto
</font>

Y las convertiremos en:

<span class=»estilo1″>esto es un texto</span>

Comencemos: El primer paso será crear un nuevo estilo llamado estilo1:

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

CSS Style

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:

Encontrar y reemplazar

En ella vemos combinado expresiones regulares y definición de atributos, que iremos explicando paso a paso:

En el ejemplo buscamos en el documento actual, pero podríamos haber ampliado la búsqueda a todo el sitio o a una carpeta determinada sin modificar nada.

También deberemos activar la casilla «Utilizar Expresiones Regulares», ya que haremos uso de ellas

Las 4 primeras lineas indican que estamos buscando etiquetas <font> 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 último, la última opción hace uso de una expresión regular: permite que dentro del espacio <font></font> exista cualquier tipo de texto, gracias a la expresión regular ([wW]*).

Para los no inciados: ¿qué es una expresión regular? básicamente consiste en una combinación de caracteres que equivalen a ciertas cadenas de texto, de manera que se puedan utilizar para validación de formularios, de entradas de texto, para comprobar si un valor es numérico… Las expresiones regulares (conocidas abreviadamente como RegExps) existen en prácticamente todos los lenguajes y son una herramienta muy poderosa. En un artículo de próxima aparición, Luis Alberto Barbosa explicará con más detalle los tipos de caracteres disponibles y sus equivalencias.

Continuemos:
Tan sólo nos queda definir el reemplazo:

Reemplazaremos etiqueta y contenido por:

<span class=»estilo1″>$1

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

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

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

<font face=»Arial, Helvetica, sans-serif» face=»2″ color=»#CCCCCC»>esto es un texto</font>

La cadena «esto es un texto» coincide con nuestra expresión regular «([Ww]*)» y se convierte auomáticamente en una variable y puede ser llamada directamente utilizando $1. Si hubiésemos utilizado una regexp más complicada que diera lugar a varias coincidencias, cada una de ellas podría ser llamada mediante $1,$2… etc.

Ya simplemente queda pulsar «Reemplazar todo» y automáticamente DW convertirá nuestras viejas etiquetas <font> a etiquetas <span> con un estilo definido.

25 diciembre, 2014
dreamweaver

De FONT a SPAN con Buscar y Reemplazar

En los sitio desarrollados hace tiempo era habitual el uso de etiquetas <font> para aplicar formato al texto. Sin embargo, el uso cada vez más extendido […]
25 diciembre, 2014
dreamweaver

Crear comportamientos de servidor en DreamWeaver

Una de las nuevas características que aparecieron a partir de la versión 4 de Ultradev es la posibilidad de crear nuestros propios comportamientos de servidor de […]
25 diciembre, 2014
dreamweaver

Cambio de tamaño de la ventana activa

A veces es necesario ajustar el tamaño de la ventana del explorador para controlar el diseño o mantener una película Flash en un tamaño específico. Aquí […]
25 diciembre, 2014
dreamweaver

Detectar el navegador en DreamWeaver

La mayoría de los navegantes usan el Explorer, pero desde otros navegadores las cosas suelen verse diferente. Aquí un tutorial para detectar el tipo de navegador […]
25 diciembre, 2014
dreamweaver

Buscador multicriterio en DreamWeaver

La idea de este tutorial es poder mostrarte la forma de crear un buscador que pueda filtrar por distintos criterios. Para poder llevar acabo este tutorial […]
25 diciembre, 2014
dreamweaver

MySQL 4.1 y DreamWeaver

A la hora de tener instalado el MySQL 4.1 y utilizar Macromedia Dreamweaver en entornos Windows te saltara un erro de la validacion del user y […]
25 diciembre, 2014
dreamweaver

Material necesario para realizar Aplicaciones Web

Que se necesita para comenzar a desarrollar aplicaciones web en un ordenador con Windows XP pro. Macromedia Dreamweaver 8 (version actual) —————————————– http://www.macromedia.com/go/trydreamweaver Con esta herramienta […]
25 diciembre, 2014
dreamweaver

Sincronizar archivos en DreamWeaver

Mediante este comando Dreamweaver comprueba, tanto en el sitio local como en el remoto, las correspondencias entre archivos y los actualiza a la versión que deseemos. […]
25 diciembre, 2014
dreamweaver

Ordenar el texto en listas

En muchas ocasiones es interesante ordenar el texto en una lista. En la Barra superior pulsamos sobre Texto tal como se muestra en la siguiente imagen. […]
25 diciembre, 2014
dreamweaver

La composición de páginas usando tablas con DreamWeaver

Los elementos de las páginas se suelen colocar empleando tablas. Si observa las Webs importantes notará que los elementos de las páginas están ordenados dentro de […]
25 diciembre, 2014
dreamweaver

Estructura de la Web en DreamWeaver

El programa Dreamweaver dispone de un sencillo y práctico sistema para gestionar las Webs. Para gestionar un sitio lo abrimos pulsando sobre Sitio en la Barra […]
25 diciembre, 2014
dreamweaver

Doble vista de código en DreamWeaver

Como hemos comentado en la introdución, Dreamweaver no posee por defecto la posibilidad de 2 vistas de código partidas dentro de un mismo documento. Sin embargo, […]
25 diciembre, 2014
dreamweaver

Utilización de un agregador RSS 1.0 remoto con Dreamweaver 8

Macromedia Dreamweaver 8 supone un importante avance en el desarrollo XML, al igual que Dreamweaver MX 2004 en el caso de CSS. El equipo de desarrollo […]
25 diciembre, 2014
dreamweaver

Paleta de Objetos y Barra de Propiedades en DreamWeaver

Hagamos click en File > New Windows y nos encontramos con nuestra página en blanco lista para diseñar. Ahora veamos las herramientas del Dreamweaver. Cuando uno […]
25 diciembre, 2014
dreamweaver

Optimización de la página web para todas las resoluciones

Actualmente casi todas las páginas están optimizadas únicamente para una resolución de 800 x 600 píxeles, y aunque la mayoría de equipos actualmente están configurados a […]
25 diciembre, 2014
dreamweaver

Atajos de teclado en documentos

Este artículo explica las teclas de acceso rápido en HTML; porqué parecen una buena idea, y porqué no ayudan tanto como era de esperar. En Fundosa […]
25 diciembre, 2014
dreamweaver

Alojamiento compartido

El alojamiento web compartido consiste en un servidor que se utiliza para múltiples clientes, una misma máquina aloja multiples dominios. Tiene como principales ventajas: Resulta más […]
25 diciembre, 2014
dreamweaver

Un proyecto en Internet

Un proyecto de Internet es una obra de ingeniería informática que responde a un plan estratégico específico. Todo proyecto de Internet debe tener por tanto una […]
25 diciembre, 2014
dreamweaver

Forzar al navegador a no mostrar las barras de scroll

Digamos que quieres crear una pagina sin scroll, no necesariamente tiene que ser un popup ya que este articulo tratara de mostrarte como crear una ventana […]
25 diciembre, 2014
dreamweaver

Acerca del color en DreamWeaver

Tutorial de nuestro programador Alfredo publicado originalmente en http://www.adrformacion.com/cursos/dream/leccion2/tutorial4.html Se puede definir el color para varios elementos de la página, entre los que se incluyen: Texto. […]
25 diciembre, 2014
dreamweaver

Comparativa entre DreamWeaver MX 2004 y Frontpage 2003

Microsoft Front Page 2003 Se tiene la costumbre de identificar a Front Page como un producto fácil de usar, con pocas prestaciones, y con groseras fallas, […]
25 diciembre, 2014
dreamweaver

Paleta de Colores Web

La ‘paleta Web’ es un conjunto de 216 colores que cada administrador de web debe conocer y utilizar para que los visitantes puedan ver las páginas […]