Adobe Dreamweaver

Insertar, modificar, buscar y remplazar textos con Adobe Dreamweaver

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (Ninguna valoración todavía)
Cargando...

Insertar, modificar y remplazar textos en un diseño web con Adobe Dreamweaver, es algo sencillo gracias a las características y a las herramientas que este programa nos facilita.

Trabajar con textos en Adobe Dreamweaver es una tarea que puede resultar bastante sencilla, teniendo en cuenta que este programa ofrece una forma de trabajo muy similar a la de los editores de textos más conocidos.

Adobe Dreamweaver hace posible la utilización de varias vías para ingresar y modificar textos en un diseño. Esto no solo tiene la ventaja de permitir al usuario el empleo del sistema de trabajo que le resulte más cómodo, sino que además, dependiendo de la tarea que se encuentre desarrollando, pueda seleccionar el modo más conveniente para hacerlo.

Como agregar o modificar texto en un diseño

Todos los conceptos que manejaremos en adelante, serán mejor comprendidos si se realiza un trabajo práctico a la vez que se lee este artículo. Para ello, bastará con abrir Adobe Dreamweaver, crear un nuevo documento con su archivo CSS (recordemos que es preferible emplear siempre las versiones de los lenguajes y los métodos más avanzados, por lo que recomendamos emplear XHTML 1.1 y CSS en archivo aparte) para practicar todo lo que vayamos aprendiendo.

Agregar texto en el código HTML

Este es el método tradicional, consiste en agregar texto en una página web directamente en su código. Para ello colocaremos el espacio de trabajo en vista de código, que se verá de la siguiente forma:

Agregar o modificar texto en el código

Allí, agregaremos el texto en el sitio que decidamos o modificaremos el existente, dentro de uno de los párrafos o creando un nuevo párrafo. En este último caso, a continuación de una etiqueta de cierre de párrafo </p>, escribiremos el texto entre dos etiquetas <p> y </p> que generaremos.

Agregar el texto en la vista de diseño

Este es el método que distingue a los editores WYSIWYG como Adobe Dreamweaver, ya que permite introducir elementos o modificaciones de los mismos en misma vista de la página. Para este ejercicio, colocaremos el área de trabajo de Dreamweaver en vista de diseño, obteniéndose la siguiente vista:

Agregar o modificar texto en el diseño

Una vez allí, introduciremos el texto en el sitio que queramos o modificaremos el texto presente. Si hacemos clic en una línea de un párrafo, agregaremos el texto o podremos modificar el texto del párrafo seleccionado. Si le damos “enter”, generaremos un nuevo párrafo y podremos introducir allí un texto. Si pasamos a la vista de diseño o a la vista dividida, podremos apreciar que los cambios que introducimos en la vista de diseño son traducidos en la vista de código y viceversa.

Modificar textos con “Buscar y remplazar”

La forma más eficiente de sustituir un texto en Dreamweaver es emplear la herramienta de búsqueda y sustitución. Para esto, haremos clic en “Edición / Buscar y remplazar” de la barra de herramientas estándar, tras lo que se abrirá el siguiente cuadro:

Buscar y remplazar

En este cuadro seleccionaremos primero el lugar donde realizaremos la búsqueda. Para ello contamos con las siguientes opciones:

  1. Texto seleccionado: Se realiza la búsqueda y sustitución en un texto previamente seleccionado.
  2. Documento actual: La búsqueda y remplazo de texto se produce en todo el documento que se encuentra en pantalla.
  3. Documentos abiertos: Busca y remplaza textos en todos los documentos que en ese momento se encuentran abiertos.
  4. Carpeta: Al seleccionar esta opción, aparece un ícono que permite seleccionar una carpeta o introducir su nombre. La búsqueda se realizará en todos los documentos HTML y de texto que se encuentren en ella.
  5. Archivos seleccionados en el sitio: La búsqueda y remplazo de texto se producirá en los archivos previamente seleccionados del panel Archivos (Ventana / Archivos de la barra de herramientas estándar).
  6. Sitio local actual: La búsqueda comprenderá todos los archivos que se encuentran en todos los directorios del sitio en el que nos encontremos trabajando.

A continuación se puede elegir que tipo de búsqueda que se realizará, pudiendo optarse por tres tipos:

  1. Código fuente: La búsqueda se producirá dentro del código.
  2. Texto: Buscará el texto dentro de la vista en la que se encuentre trabajando.
  3. Texto (avanzado): Permite la búsqueda dentro o fuera de la etiqueta HTML que se seleccione.
  4. Etiqueta específica: Buscará la etiqueta HTML que se seleccione.

Luego, en el cuadro correspondiente, insertaremos el texto que deseamos buscar y en el siguiente, el texto que remplazará al existente. Debajo podremos optar por que la búsqueda sea sensible o no a mayúsculas y minúsculas, omitir o no los espacios en blanco o si se empleará expresión regular. Si selecciona esta última opción, se considera a algunos caracteres como operadores de expresiones regulares; por ejemplo, si se busca “el vaso v*”, podrá encontrar “el vaso vacío” o “el vaso volcado

Como ejercicio, abramos el cuadro “Buscar y Remplazar”. En él seleccionaremos “Documento actual” y “Texto”. En el campo “Buscar” escribiremos “el color” y en el campo remplazar escribiremos “la coloración”. A continuación haremos clic en “Remplazar todos”, y los dos textos “el color” que aparecen en la página de ejemplo en ambas columnas, serán remplazados. Luego, podremos emplear otras opciones para familiarizarnos con esta poderosa herramienta.

En el cuadro, aparecen dos íconos, uno para guardar la búsqueda y otro para cargar una búsqueda guardada, que permiten automatizar tareas de búsqueda o búsqueda y remplazo que se realizan con frecuencia. Una vez finalizada la búsqueda y cerrado el cuadro, si se desea repetir la última búsqueda, bastará con presionar la tecla F3 y la misma se hará sin necesidad de abrir nuevamente el cuadro. Cada vez que se presione esta tecla, se obtendrá el mismo resultado que si se hiciera clic en el botón “Buscar Siguiente” del cuadro “Buscar y Remplazar”.

Buscar un texto seleccionado

Otra forma de buscar un texto determinado, es seleccionar el texto en cualquiera de los modos de vista de Dreamweaver y hacer clic en “Edición / Buscar selección” de la barra de herramientas estándar, o empleando las teclas de método abreviado “mayúscula + F3”. En este caso, se buscará un texto igual al seleccionado.

Texto seleccionado con Buscar y Remplazar

Para probar esta opción, seleccionaremos las palabras “El color de fondo de este div sólo se mostrará a lo largo del contenido” que se encuentra en la columna izquierda. Empleando cualquiera de los dos métodos descritos en el párrafo anterior, automáticamente quedará seleccionado un texto idéntico que se encuentra en la barra derecha de la página de ejemplo.

Deja una respuesta