• Estilo del texto
• Modificando propiedades de texto
• Alineando texto
• Creando listas
• Existen 3 tipos de listas en HTML
• Como modificar las propiedades de una lista
• Haciendo todo esto desde la paleta Propiedades
• Creando un estilo HTML
• Como crear un estilo HTML
• Como aplicar un estilo existente
• Corrigiendo ortográficamente el documento
• Usando las opciones de buscar y reemplazar
• Salvar el documento

Estilo del texto

 Modificando propiedades de texto

Hasta ahora, hemos visto como introducir texto en nuestro documento, pero aún no hemos visto como variar sus propiedades para tener mayor control sobre el formato que deben presentar en pantalla. Es muy normal que dentro del texto de nuestro documento, queramos tener algunos textos destacados en negrita, o tal vez variar el tamaño de algunos párrafos Todo esto lo podemos hacer cÛmodamente desde distintos puntos de Dreamweaver.

Antes de ver como podemos formatear nuestro texto, es necesario que entendamos que hay dos tipos de formateado que podemos aplicar en un documento HTML:

• Formateado Físico: De esta forma indicamos al navegador que un determinado texto se debe mostrar en itálica, o en negrita, o cual debe ser su tamaño. Ahora bien, no se le atribuye ninguna cualidad lógica o motivo a ese formateo. Es simplemente un formateado físico de determinadas partes del texto.
• Formateado Lógico: Este tipo de formateado del texto es algo distinto al anterior. Lo que hacemos es indicar mediante las oportunas instrucciones que un determinado texto es "destacado", o que es una "dirección", o que es un texto de "ejemplo". El navegador interpretará esta indicación lógica y formateará físicamente el texto indicado en función a la característica lógica que le hemos atribuido.

Puede que en principio nos parezca lo mismo forastera un texto físicamente para que aparezca en negrita, que atribuirle la cualidad lógica "Strong" (fuerte), que también mostrará el texto en negrita, pero en realidad no lo es. Mientras que en el primer caso el navegador no tiene ningún conocimiento del tipo de texto que esta forrajeando en el segundo caso sí.

Pongamos un ejemplo real:

Existen determinados navegadores que están especialmente desarrollados para que personas invidentes puedan navegar por Internet. Estos navegadores "leen" el contenido de un documento HTML, para que el invidente pueda escucharlo. Bien, si el navegador es consciente de que el texto que ha de leer es "importante" o "destacado" puede poner especial énfasis en el pronunciamiento de ese texto. Por el contrario, si ese texto simplemente esta formateado físicamente en itálica, el navegador no lo interpretará de ninguna manera especial, no tendrá ninguna cualidad lógica que atribuirle.

Lo que tratamos de decir es que, los estilos lógicos y los estilos físicos aplicados a un texto, pueden llegar a parecer iguales, de hecho un estilo lógico "strong" o fuerte, puede ser mostrado en un navegador igual que un estilo físico "bold" o negrita. La diferencia radica en que, en el primer caso además de formatearlo físicamente, hemos atribuido una cualidad lógica al texto y el navegador es consciente de ella. En el segundo caso, el texto no tiene ninguna cualidad lógica para el navegador. Así, alguien puede desarrollar un navegador que muestre los estilos lógicos de una determinada manera, y en el ejemplo que utilizábamos anteriormente, hacer que un texto "strong" se corresponda con un subida de volumen en la la lectura del contenido de la página.

Es por tanto recomendable que seamos consciente de la diferencia entre ambos, para poder utilizarlos según nos convenga. Por desgracia, la mayoría de los desarrolladores se han decantado por el formateado físico, tal vez porque les resulta más predecible. Mi recomendación es que se use el formateado lógico siempre que sea posible.

Pasemos a la práctica. En Dreamweaver hay varios puntos desde los que podemos atribuir y modificar las cualidades de un texto. El primer sitio al que acudir, lógicamente es el menú Text.

En este menú encontramos distintas opciones para modificar los párrafos de nuestro documento y los párrafos de nuestro documento, o parte del texto contenido en los mismos. Veamos cuales son estas opciones:

• Indent: Hasta ahora hemos visto como crear párrafos en nuestros documentos, pero no solo de párrafos vive el hombre. En HTML existen otros tipos de bloques de texto que se pueden crear. Así tenemos "blockquote" o nota destacada. Este es un tipo de párrafo. especial, que se muestra sangrado con respecto al resto, para que resalte el hecho de que es un texto destacado o nota especial. La directiva HTML encargada de esto es <BLOCKQUOTE> </BLOCKQUOTE>. En Dreamweaver podemos hacer esto con menú Text > Indent.

  Ejemplo:

  Texto tratado como Blockquote. Observe como se ha sangrado este bloque con respecto al resto de los textos contenidos en este documento.

  Observe como podemos acumular distintos niveles de indentación, simplemente añadiendo un nuevo "blockquote" dentro del actual.

  NOTA: En realidad, BLOCKQUOTE es una directiva HTML que fue definida en el estándar, para marcar párrafos de texto que se habían extraído de otro documento. Se puede considerar que es un formateado lógico de un párrafo. Dado que en HTML no hay otra manera de indentar bloques de texto, esta directiva ha sido utilizada por los diseñadores para conseguir el efecto físico de indentación, haciendo caso omiso de las recomendaciones de uso de esta directiva.

• Outdent: Realiza la opción contraria a Indent. Es decir, eliminaría la indentación/es que se hubieran aplicado a un texto determinado.
• Forma: Un bloque de texto en HTML, como ya hemos visto, no tiene porque ser siempre un párrafo. Un bloque de texto puede ser interpretado también como un titular o cabecera. Por ejemplo, podemos tener un párrafo. que tenga un titular o cabecera. Para ello, utilizaríamos la directiva HTML . En este submenú del menú text, podemos escoger entre los 6 tipos de "Heading" que hay disponibles en HTML. Así tenemos que los tamaños de las letras son menores en el Heading 6, y mayores en el Heading 1.

  Otra opción que HTML pone a nuestra disposición es la de texto preformateado. Esta opción nos permite que el texto que escribamos, sea mostrado en el navegador, tal cual lo introducimos en el documento, respetando las tabulaciones o espacios que hubiéramos incluido.

  Ejemplos:

  Heading 1

  Heading 2

  Heading 3

  Heading 4

  Heading 5

  Heading 6

  	Este texto,    Ha sido 		preformateado.

• Font: Este menú nos permite especificar la fuente que se utilizará para visualizar el texto seleccionado. Dado que la fuente que seleccionemos puede que no este en el ordenador del usuario final, se proporciona una lista de fuentes similares, para que en caso de que una opción no este disponible, se pueda escoger otra fuente de las incorporadas en la lista.

  Dreamweaver ofrece una lista de fuentes preconfiguradas, que se ajustan a las fuentes más comúnmente utilizadas. En la mayoría de las ocasiones nos será suficiente con las listas predeterminadas, aunque si lo deseamos podemos modificar las listas actuales o crear las nuestras propias utilizando menú Text > Font > Edit Font List...

  

  NOTA: En caso de modificar alguna de las listas existentes, o de crear nuestra propia lista, hemos de tener en cuenta dos cosas: Primero, que tal vez las fuentes que incluyamos en esa lista no estén disponibles en la maquina del usuario final, por lo que no debemos añadir fuentes muy poco comunes. Segundo, que tal vez el usuario tenga configurado su ordenador para que no se respeten las fuentes indicadas en el documento. En cualquiera de los casos, hemos de tener en cuenta que la garantía de que el usuario visualice el documento con las fuentes que nosotros queremos es del 0%. Nunca podemos tener la seguridad de que sea así. Por tanto, debemos de desechar la idea de controlar al 100% la apariencia de nuestro documento.

• Style: En este submenú tenemos disponibles las opciones de formateado, tanto físico como lógico del texto seleccionado. Como mencionábamos al principio, aunque puedan aparecer iguales en un navegador, hay diferencias entre formatear lógicamente y formatear físicamente. Para ver en que consiste cada estilo, tenemos la siguiente tabla:

  Formateado Físico	Formateado Lógico
  Negrita	Teletype
  Itálica	Emphasis
  Subrayado	Strong
  Strikethrough (tachado)	Code
  	Variable
  	Sample
  	Keyboard
  	Citation
  	Definition

  Observa que en su apariencia, mucho de los estilos lógicos y físicos se parecen. Ya hemos comentado que la diferencia no esta en su apariencia física sino en como el navegador llega a ella: Conociendo las cualidades lógicas del texto, o porque físicamente así se lo hemos indicado.

  Los estilos son acumulables, así podemos tener un texto negrita y cursiva, aplicando primero un estilo y después otro al mismo texto.

  Si le aplicamos un estilo a una texto, y después se lo queremos quitar, podemos ir nuevamente al menú Text > Style y desactivar el estilo deseado.

  TRUCO: Dreamweaver pone a nuestra disposición una serie de menús contextuales, que nos muestran las opciones más útiles en función al elemento con el que estamos trabajando. Para abrir este menú, podemos hacer Click Derecho (PC) o CTRL + CLick (Mac) sobre el objeto en cuestión. Para aplicar estilos a un texto, podemos utilizar el menú contextual si nos resulta más cómodo que navegar por los menús superiores. Otra opción que tenemos, es utilizar los tags que tenemos en la esquina de la ventana inferior. Como dijimos anteriormente, en esta parte aparecen todos los tags HTML (de padre a hijo) que definen y formatean el elemento actual. Si tenemos conocimientos de HTML, podemos eliminar los tags que no necesitemos simplemente haciendo Click Derecho (PC), CTRL + Click (Mac) Sobre el tag deseado, y seleccionando la opción "Remove Tag" en el menú emergente.

• Size: Especifica un tamaño de letra para el texto seleccionado. El tamaño 1 es el más pequeño, mientras que el tamaño 7 es el más grande.
• Size Increase: Incrementa el tamaño de la fuente actual por defecto en el texto seleccionado. La diferencia con la opción anterior es que, mientras aquel marcaba un tamaño absoluto para la fuente, este marca un incremento relativo al tamaño actual de la fuente del texto seleccionado. Así, podemos tener un texto con tamaño 3, que sea un poco más grande que el resto. El incremento es menor con "+1", y mayor con "+7".
• Size Decrease: realiza la acción contraria a la anterior. Decrementa el tamaño de una fuente de manera relativa al tamaño actual.
• Color: Permite ajustar o modificar el color para el texto seleccionado.

Con lo aprendido hasta ahora, puede crear y modificar un documento HTML con texto, aplicar distintos formatos a los contenidos de su página, variar el tamaño o el color de los mismos. Practique con estas posibilidades.

 Alineando texto

En este subcapítulo aprenderemos algo más sobre el formateado de texto. Hablaremos concretamente sobre la alineación del texto con respecto a la ventana. En realidad, ajustar el alineado del texto en Dreamweaver es bastante sencillo.

En HTML tenemos 3 tipos de alineación que se pueden aplicar a un bloque de texto: Izquierda, Centrada y derecha. Como es lógico pensar, la alineación izquierda ajustará el texto para que se alinee al margen izquierdo del documento. La alineación centrada, ajustará el texto para que se muestre en el centro del documento y la alineación derecha hará lo propio con el margen derecho del documento.

En HTML tradicional, no existe la posibilidad de justificar un texto. Esta es una funcionalidad que ha sido añadida a través del HTML dinámico y que veremos más adelante.

Algo ha tener en cuenta a la hora de alinear los contenidos de una página, es que podemos alinear bloques de texto, es decir, podemos seleccionar alineación izquierda para un párrafo., pero no podemos determinar que unas líneas de un párrafo. tengan una alineación y otras líneas otra. Una vez dicho esto, cada bloque de texto puede tener su propia alineación. Así, podemos encontrar unos párrafos alineados a la izquierda y otros a la derecha.

NOTA: Un bloque de texto en HTML es todo aquel texto que esta incluido dentro de la misma marca HTML. Podemos considerar bloques de texto los párrafos, los "headings", los "blockquotes" o notas y los textos preformateados. Cada uno de ellos están definidos por una marca HTML y por tanto componen un bloque.

Para aplicar alineación a un bloque de texto, primero tendremos que seleccionarlo. Existen, como ya hemos visto varias maneras de hacer esto. Seleccionarlo manualmente con el ratón, Posicionar el cursor dentro de un bloque de texto o utilizar los tags que aparecen en la esquina inferior izquierda de la ventana para seleccionar el bloque actual.

Una vez seleccionado el bloque al que vamos a aplicar una alineación, simplemente tenemos que seleccionar la alineación adecuada en el menú Text > Alignement.

• Left: Alineación izquierda.
• Center: Alineación Centrada
• Right: Alineación Derecha

Observe que al aplicar la alineación, solo el / los bloques de texto seleccionados adoptan la nueva alineación, permaneciendo intactos los demás.

TRUCO: Si quiere variar la alineación de todos los bloques en el documento actual, puede seleccionar todo utilizando menú Edit > Select All, o puede hacer click sobre el tag <BODY> que aparece en la esquina inferior de la ventana. Con todo el documento seleccionado, aplique la alineación correspondiente.

 Creando listas

Una posibilidad que ofrece HTML es la de crear listas con los elementos de un determinado bloque de texto. Por ejemplo, el indice de un libro podría ser tratado en HTML como una lista. También podríamos tener interés en generar una lista con las 10 claves para el éxito en la web. En fin, la aplicación de esta directiva HTML puede ser variada.

Una lista HTML es un bloque de texto en el que los elementos aparecen destacados, de manera que cada nuevo elemento de la lista es resaltado por un gráfico o por un elemento textual indicativo de su posición en la lista.

 Existen 3 tipos de listas en HTML

Éstas son:

• Listas Desordenadas: Son listas en las que cada uno de los elementos esta marcado por un elemento gráfico a la izquierda del mismo. Cada salto de línea, es interpretado por Dreamweaver por la inclusión de un nuevo elemento a la lista y automáticamente añade el elemento gráfico que lo marca. Este elemento gráfico puede ser un círculo negro, un círculo vacío o un cuadrado. Veremos más adelante como modificar este acento gráfico por defecto. La marca HTML que define la lista es <UL> </UL>, y cada nuevo elemento de la lista es definido por la marca <LI> </LI>.

  Ejemplo:

  • uno
  • dos
  • tres
  • cuatro
• Listas Ordenadas: Son listas en las que cada uno de los elementos esta marcado por un elemento textual, que indica la posición del elemento en la lista. Esta posición puede venir dada por números enteros, letras del alfabeto o numeración romana. Veremos posteriormente como personalizar este elemento. La marca HTML que define la lista es <OL> </OL>, y cada nuevo elemento de la lista es definido por la marca <LI> </LI>.

  Ejemplo:

  1. uno
  2. dos
  3. tres
  4. cuatro
• Listas Descriptivas: Este tipo de listas son algo distintas a las demás. En estas listas los elementos tienen dos partes, una primera en la que se cita el elemento de la lista, y una segunda en la que se puede añadir una descripción del elemento. Por tanto, cada elemento de esta lista esta compuesto por el elemento en sí y por la descripción del mismo. La marca HTML que define esta lista es <DL> </DL>. El elemento viene dado por la marca <DT>, y la descripción del elemento por la marcar <DD>.

  Ejemplo

  Elemento 1

  Descripción del elemento 1

  Elemento 2

  Descripción del elemento 2

  Elemento 3

  Descripción del elemento 3

Para insertar una lista en nuestro documento, usaremos menú Text > List. Allí podemos escoger uno de los tres tipos de listas que hemos descrito anteriormente.

• Unordered List: Añade una lista desordenada al documento.
• Ordered List: añade una lista ordenada al documento
• Definition List: añade una lista descriptiva al documento.

Una vez seleccionada el tipo de lista que vamos a crear, basta con empezar a introducir los elementos de la misma, recordando que cada salto de línea forzado con "return" añadirá un nuevo elemento a la lista. En el momento que queramos dar por finalizada nuestra lista, bastará con pulsar la tecla "return" dos veces.

 Como modificar las propiedades de una lista

Como hemos dicho anteriormente, las listas desordenadas pueden mostrar distintos elementos gráficos para marcar los distintos elementos que la componen. De igual forma, las listas ordenadas, pueden utilizar distintos tipos de numeración para mostrar la situación de cada elemento.

Para modificar estas opciones por defectos, podemos seleccionar una lista completa, o posicionar el cursor en un elemento de la lista que queremos modificar. Con el cursor en esa situación, podemos acceder a menú Text > List > Properties...

En esta ventana podemos ajustar las propiedades de una lista en su conjunto, o las propiedades del elemento seleccionado y los subsiguientes. Como vemos en la imagen superior, tenemos dos zonas definidas dentro de la ventana. Una primera zona en la que podemos definir las propiedades de la lista actual, de manera genérica, y una segunda parte, encerrada en un recuadro, que nos permite ajustar las propiedades del elemento actual. Todos los cambios que realicemos sobre la lista, afectarán a todos los elementos que la componen. Por el contrario, todos los cambios que realicemos sobre el elemento seleccionado, afectarán a éste y los elementos que lo siguen.

Veamos cuales son los parámetros que podemos ajustar:

• List Type: Nos permite redefinir el tipo de lista que estamos utilizando. Con este comando podemos convertir una lista ordenada en desordenada y viceversa.

  NOTA: En este menú aparecen dos listas que no hemos descrito anteriormente "Directory List" y "Menu List", la razón de que no se hayan descrito es que actualmente no se utilizan, ni están soportadas por ningún navegador, aunque en su día fueron definidas en el estándar HTML. Lo mejor es simplemente que las ignoremos.

• Style: En este campo podremos definir el acento gráfico que queremos usar para los elementos de nuestra lista desordenada, o el tipo de numeración que queremos en caso de que tengamos una lista ordenada. Entre los elementos gráficos podemos escoger Bullet (circulo sólido), Circle (circulo vacío) o Square (cuadrado). En el caso de tener una lista ordenada, podemos escoger entre números enteros, letras del alfabeto o numeración romana. En estos dos últimos casos, podemos elegir entre mayúsculas o minúsculas.
• Start Count: Las listas ordenadas empiezan a numerarse por el número 1, y continuan hacía adelante. En este parámetro podemos ajustar que la lista comience a numerarse desde cualquier otra posición numérica.
• New Style: Dentro de la zona en la que podemos ajustar las propiedades del elemento actual, tenemos esta opción que nos permite elegir un nuevo estilo para este elemento. Como ya hemos dicho anteriormente, este nuevo estilo solo afectará al elemento actual y los que le sigan en la lista y no a la lista completa.
• Reset Count To: En caso de que estemos trabajando en una lista ordenada, podemos utilizar este control para comenzar una nueva numeración a partir del elemento actual.

 Haciendo todo esto desde la paleta Propiedades

Bueno, ya hemos visto como modificar y formatear distintos bloques de texto, alinearlos y como crear listas. Bien, pues muchas de estas cosas que podemos hacer desde los menús, podemos hacerlas directamente utilizando la paleta Propiedades.

Como ya dijimos en el capítulo anterior, la paleta de propiedades permite tener control sobre los elementos en los que estamos trabajando, cambiando su apariencia de manera contextual en relación al tipo de objeto seleccionado.

Cuando trabajamos con textos, muchas de las cosas que hemos visto las podemos realizar más cómodamente desde la paleta Propiedades.

• Bloque de texto: En la lista desplegable "Forma", podemos escoger el tipo de bloque de texto que estamos definiendo. Podemos escoger entre Párrafo., los distintos "Headings" o texto preformateado.
• Lista de Fuentes: Desde este menú desplegable, tenemos acceso a las listas de fuentes que hay definidas, para aplicárselas al párrafo. seleccionado. De igual manera, desde aquÌ podemos acceder a la ventana que nos permite editar la lista de fuentes.
• Tamaño: En este campo podemos insertar el tamaño que queremos para el texto seleccionado. Podemos escoger entre tamaños absolutos o Incrementar / Decrementar el tamaño actual.
• Color: En este doble control, podemos ajustar el color del texto seleccionado. Podemos utilizar el control de la izquierda para seleccionar un color de la paleta de colores que se despliega, o si conocemos la nomenclatura del color que deseamos, podemos introducirla directamente en el campo de texto adyacente.
• Formatos Físicos y Alineación: Con esta serie de controles, podemos ajustar la alineación del texto seleccionado, así como aplicarle los formateados físicos "negrita" e "Itálica".
• Controles de Listas: con esta serie de controles podemos crear y modificar listas y sus elementos. Este conjunto de controles es bastante completo y merece un análisis más profundo:

  Los dos primeros controles, nos permiten insertar una lista Desordenada o una lista Ordenada, en la posición actual del cursor.

  Los dos siguientes controles, son los controles que nos permiten indentar un bloque o deshacer la indentación. Son los equivalentes a Text > Indent, Text > Outdent.

Por otro lado, HTML ofrece la posibilidad de crear listas anidadas, es decir, listas cuyos elementos en un momento determinado puedan ser otras listas. El nivel de anidación que podemos llegar a tener es infinito, ya que una lista anidada en otra, puede contener a su vez otras listas anidadas.

Cada una de estas listas anidadas, para diferenciarse de los elementos de la lista matriz, se indenta o tabula con respecto a los demás elementos, para diferenciar unas listas de otras. Podríamos considerar estas listas anidadas, como subniveles dentro de un nivel superior.

A continuación tenemos un ejemplo de listas anidadas:

• Elemento lista matriz
• Elemento lista matriz
  • Lista anidada nivel 1
  • Elemento lista anidada nivel 1
    1. Elemento 1 lista anidada nivel 2
    2. Elemento 2 lista anidada nivel 2
  • Elemento lista anidada nivel 1
• Elemento lista matriz
• Elemento lista matriz

Como vemos, cada una de las listas anidadas puede tener su estilo propio, con independencia de la lista matriz en la que se encuentra anidada. Así, podemos encontrar listas ordenadas, anidadas dentro de listas desordenadas.

Pues bien, podemos utilizar los controles Indent / Outdent de la paleta Propiedades, para crear una lista anidada dentro de una lista matriz. Indent, creará una lista anidada en un subnivel por debajo del actual. Outdent, volverá a la lista de elementos matriz. Experimente con esto para crear listas complejas.

Por último, a través del botón "List Item....", accedemos a la ventana de propiedades de la lista que veíamos anteriormente.

 Creando un estilo HTML

Como hemos visto hasta ahora, en cualquier momento podemos formatear fácilmente un texto de nuestro documento. Ahora bien, si necesitamos aplicar un formato continuamente a distintos textos de nuestro documento tal vez sea conveniente almacenar esos ajustes de alguna forma, de manera que podamos aplicarlos de una sola vez al texto que deseemos en cada ocasión.

Precisamente esto, es lo que hace la nueva funcionalidad de Dreamweaver 3.0, " Estilos HTML". Podemos definir unos estilos HTML (no confundir con hojas de estilo dinámico), de manera que aplicar un conjunto de ajustes a un texto, sea tan fácil como aplicarle un estilo HTML predefinido.

 Como crear un estilo HTML

Para crear un estilo HTML tenemos que usar menú Text > HTML Styles > New Style...

En esta ventana podemos definir los atributos y propiedades del nuevo estilo.

• Name: El nombre con el que será conocido el estilo que estemos creando.
• Apply To: Definimos aquí si queremos que el estilo creado se aplique al texto seleccionado, o por el contrario a todo el bloque del texto seleccionado.
• When Applying: En estos botones de radio, podemos elegir entre la posibilidad de que el estilo que creemos se una a los estilos que ya tuviera el texto seleccionado, o que el estilo aplicado sustituya todos los ajustes que pudiera tener el texto seleccionado anteriormente.
• Font Attributes: En este conjunto de controles ajustamos las propiedades de la fuente para el estilo. Así podemos ajustar la fuente o lista de fuentes a utilizar, el tamaño, el color, y el formateado físico o lógico que tendrá el texto.
• Paragraph Attributes: En este conjunto de controles ajustarÌamos las opciones para el párrafo. o bloque de texto. Que tipo de bloque será (párrafo., heading o preformateado), y la alineación.

Cuando estemos de acuerdo con todos los ajustes, podemos pulsar en OK y tendremos nuestro propio estilo definido. Si queremos empezar de nuevo, podemos borrar todos los ajustes utilizando el botón "Clear".

 Como aplicar un estilo existente

Una vez que tenemos definidos los estilos que utilizaremos en nuestro documento, aplicarlos es tan sencillo como seleccionar un texto y seleccionar uno de los estilos de la lista que aparece en menú Text > HTML Style.

También, si lo deseamos podemos abrir la paleta HTML Styles, utilizando menú Window > HTML Styles, o lanzándola desde el lanzador o el minilanzador en la esquina inferior derecha de la ventana del documento.

Desde esta paleta, la gestión y aplicación de estilos HTML en nuestros documentos es mucho más sencilla y productiva. Desde ella, podemos aplicar cualquiera de los estilos existentes, crear nuevos estilos, o eliminar aquellos que no nos interesen.

TRUCO: podemos utilizar los ajustes aplicados a un texto como punto de partida para la creación de un estilo. Si tenemos un texto que hemos formateado con ajustes HTML, con el seleccionado, podemos crear un nuevo estilo y veremos que Dreamweaver nos muestra la ventana para definir un nuevo estilo con los ajustes del texto seleccionado.

 Corrigiendo ortográficamente el documento

Cuando tengamos creado nuestro documento, nos enfrentaremos a la dura tarea de corrección de los textos. Esto es algo que todo buen contenido tiene que tener pulido y optimizado (aunque a veces no lo logremos como desearíamos).

En ese proceso de corrección, Dreamweaver pone a nuestro alcance algunas herramientas útiles, muy parecidas a las que podemos encontrar en los procesadores de texto.

Ya vimos en el anterior capítulo como instalar diccionarios en la aplicación. Si no lo recuerda, vuelva al tema 1, donde explicamos este proceso convenientemente.

Si tenemos los diccionarios oportunos instalados, y hemos elegido en las preferencias el diccionario correspondiente al idioma en el que estamos escribiendo el contenido de nuestros documentos., Podemos utilizar el asistente de corrección ortográfica de Dreamweaver. Para abrirlo, usamos menú Text > Check Spelling.

Por defecto, Dreamweaver comenzará el chequeado ortográfico del documento actual, deteniÈndose en cada palabra dudosa.

En ese caso, nos mostrará la palabra dudosa en el primer campo, y nos dará una lista de sugerencias por las que podríamos cambiar la palabra en seleccionada. Podemos elegir una de estas sugerencias, o introducir manualmente la palabra corregida en el campo Change To.

Los controles que encontramos en esta ventana tienen las siguientes funciones:

• Add to Personal: Dreamweaver mantiene un diccionario del usuario, de manera que cuando el programa detecte una palabra dudosa, el usuario pueda almacenar esta palabra para futuras incidencias, en caso de que el usuario este seguro de que la palabra es correcta. De esta manera, se puede decir que Dreamweaver va aprendiendo nuevos términos y vocablos. Este botón añade la palabra seleccionada al diccionario personal.
• Ignore: Ignora la palabra dudosa y continua el chequeado del documento.
• Ignore All: ignora esta palabra dudosa y las futuras incidencias de esta palabra en el resto del documento.
• Change: Cambia la palabra dudosa, por la palabra que aparece en el campo Change To. Como ya hemos dicho anterioremente, podemos seleccionar una de las palabras que aparecen en la lista de sugerencias.
• Change All: cambia la palabra dudosa actual, así como todas las incidencias futuras de esta palabra en el resto del documento, por la palabra indicada.
• Close: Cierra la ventana y da por concluida la labor de chequeo ortográfico.

TRUCO: Si queremos chequear solamente parte del documento actual, podemos seleccionar la parte deseada, antes de abrir la ventana del corrector. En ese caso, Dreamweaver chequeará solo la selección. Cuando termine de chequear la selección, nos preguntará si queremos chequear el resto del documento.

 Usando las opciones de buscar y reemplazar

Otra herramienta que nos puede resultar de gran utilidad en la corrección de documentos, son las herramientas de búsqueda y reemplazo de texto.

Para buscar un texto o palabra por el documento actual, podemos utilizar la ventana que aparece al seleccionar menú Edit > Find...

Para buscar y reemplazar un texto o palabra por el documento actual, podemos utilizar la ventana que aparece al seleccionar Edit > Replace...

Dado que las opciones de la ventana de búsqueda (Find) son prácticamente idénticas a las de Reemplazar (Replace...), a excepción hecha de las opciones de sustitución que no aparecen en la primera, estudiáremos la segunda opción. Todo lo que aprendamos sobre esta segunda opción será aplicable a la primera.

Como vemos en la imagen superior, las capacidades de esta herramienta son muy potentes. Veamos en que consisten los distintos controles que tenemos:

• Find In: definimos aquí el entorno en el que vamos a buscar el texto especificado. Hemos dicho hasta ahora que podíamos utilizar esta herramienta para buscar dentro del documento actual, pero no es del todo cierto. Esta herramienta es tan potente que nos permitirá realizar búsquedas en el documento actual, en todo el site activo o en los documentos de una carpeta que seleccionemos.
• Find What: Aquí insertaríamos el texto que queremos encontrar. No solo podemos buscar texto. También podemos buscar en el código HTML, o seleccionar las opciones de búsqueda de texto avanzadas o las opciones de búsqueda y sustitución de tags de HTML. Estas opciones son muy potentes. Veremos algo más en profundidad estas opciones dentro de poco.
• Replace With: Aquí insertamos el texto con el que queramos sustituir el texto buscado. Cuando realizamos búsquedas en el código HTML, podemos insertar nuevo código HTML para que reemplace al anterior.

A continuación encontramos dos botones gráficos. El botón con un "disquete" sirve para guardar la consulta que se esta realizando para su posterior uso. El botón con la "Carpeta", se utiliza para recuperar una consulta que fue guardada anteriormente.

Finalmente, encontramos 3 "checkbox" que nos permiten ajusta algo más la búsqueda:

La primera opción activada, hace que la búsqueda del texto sea sensible a las Mayúsculas / Minúsculas. La segunda opción activada, ignora los espacios en blanco extras. La tercera opción activada, permite el uso de comodines para definir la expresión a buscar o reemplazar, de un modo similar al que se haría para comparar expresiones en Perl. Por su complejidad no veremos esta última opción en este curso, ya que tampoco será muy frecuente que la utilicemos, máximo si tenemos en cuenta las posibilidades avanzadas de búsqueda que ofrece Dreamweaver y que veremos a continuación..

Una vez que tengamos definida la consulta, podemos utilizar los botones de la ventana, para realizar alguna acción.

• Find Next: Busca la siguiente incidencia de la expresión indicada.
• Find All: Busca todas las incidencias de la expresión indicada. En la parte inferior de la ventana, irán apareciendo estas incidencias, así como los documentos en los que fueron halladas.
• Replace: Sustituye la incidencia seleccionada, por la expresión de reemplazo. Si hemos usado Find All, podemos seleccionar la incidencia que queremos reemplazar de la lista que aparece en la parte inferior de la ventana.
• Replace All: sustituye todas las incidencias encontradas por la expresión de reemplazo.

TRUCO: Si al abrir esta ventana, hubiéramos seleccionado un texto previamente en el documento, este texto será considerado automáticamente el texto a buscar.

Como hemos visto antes, no solo podemos realizar búsqueda sobre el texto, sino que también podemos realizarlas sobre el HTML. El funcionamiento es parecido, con la salvedad de que al buscar sobre el HTML no estaremos ignorando las marcas de HTML en la búsqueda y por tanto también podremos reemplazar estas.

Así por ejemplo, podemos sustituir todos los bloques de texto párrafo, por bloques de texto preformateado. Para ello buscaremos todos los tags <P> y los sustituiremos por <PRE>. En fin, las posibilidades de esta utilidad son muchas, máxime si tenemos conocimientos de HTML.

Podemos utilizar las opciones de búsqueda de texto avanzadas, para buscar texto que se encuentre dentro de un determinado tag de HTML, o de un tag de HTML con un determinado atributo ignorando las incidencias que no cumplan estas condiciones añadidas.

Por último podemos seleccionar las opciones de búsqueda y reemplazo de tags, cuya ventana mostramos a continuación:

Observamos que esta ventana nos permite fácilmente localizar un tag dentro de un documento HTML, que además tenga una serie de características añadidas, como un determinado atributo con un valor concreto y reemplazarlo automáticamente por otro tag HTML, o cambiar solo uno de sus atributos.

Estas opciones son muy avanzadas, aunque algo complejas si no se tienen conocimientos previos de HTML. Sin embargo, los usuarios experimentados en el manejo y edición del HTML, encontrarán muy potentes estas herramientas. A medida que vaya alcanzando mayores niveles de comprensión sobre la tecnología que hay detrás de un documento HTML (y en ese camino Dreamweaver puede ser un gran aliado), irá encontrando mayor utilidad a estas opciones avanzadas.

 Salvar el documento

Como final a este capítulo en el que hemos profundizado en la creación y edición de páginas compuestas por texto, nos queda ver algo que quizá sea lo más sencillo de realizar, pero también lo más importante: Guardar nuestros documentos en el disco convenientemente.

Las opciones para Abrir, Cerrar, guardar o guardar como... un documento de Flash se encuentran como cabría esperar en el menú File...

Si ha llegado hasta aquí, supongo que esta familiarizado con abrir y cerrar documentos, salvarlos etc., pero solo a modo de recordatorio, explicamos brevemente estas opciones:

• Open: Abre un documento que fue salvado previamente
• Close: Cierra el documento actual.
• Save: Salva el documento actual. Si aún no lo hemos hecho previamente, se nos preguntará un nombre para el fichero. Recordemos que un nombre de un documento HTML no puede tener espacios en blanco y que debe terminar con la extensión .html o .htm. Es una buena norma que todas las letras del nombre estén en minúsculas, ya que algunas plataformas en la red, son sensibles a las Mayúsculas / Minúsculas.
• Save As: Salva el documento actual con otro nombre, de manera que mantiene el documento con el nombre anterior.
• Revert: Esta opción nos permite recuperar la última versión salvada del documento actual, rechazando los cambios que se realizaron desde entonces. Sería el equivalente a cerrar el documento sin salvar los cambios y abrirlo de nuevo.

RECOMENDACIÓN: Salva tus documentos tan frecuentemente como puedas, para evitar perdidas de los cambios indeseadas. Cuando necesites probara una opción, tal vez sería bueno que guardara una segunda versión del fichero utilizando Save As..., de esta manera siempre podrá volver al estado anterior.