Kitabı oku: «Manual de Dreamweaver CS5», sayfa 8

El texto en Dreamweaver
Introducción

Aunque Dreamweaver no es, lógicamente, un programa dedicado al procesamiento de textos, la aplicación permite la inserción y la edición de escritos en sus páginas web. Sin ninguna duda, el texto es una parte fundamental de un sitio web, sea cual sea el contenido que presente, y por tanto es fundamental el conocimiento acerca de cómo insertarlo y editarlo.

La versión CS5 de Dreamweaver no presenta novedad alguna respecto al texto. En las lecciones que conforman este apartado, el lector aprenderá a insertar texto en las páginas, tanto directamente desde el teclado como procedente de otros documentos. En este caso, aprenderá que con los comandos típicos de selección, copia y pegado es posible traspasar información de un documento a otro. Una vez insertado el texto, es muy importante saber cómo editarlo para modificarlo en cuanto a formato se refiere. Así, en una serie de lecciones, se muestra cómo cambio la fuente, el tamaño del tipo de letra y el color de la misma, aprovechando para conocer las distintas paletas de colores de que dispone la aplicación.

La modificación de algunos aspectos relacionados con el formato de texto, como las combinaciones de fuente, requieren en esta versión del programa la creación de nuevas reglas de estilos CSS.

Dreamweaver presenta un formato de texto predeterminado que utiliza en todas las páginas web creadas. Sin embargo, el usuario puede modificar este formato en cuanto a fuente, tamaño y color según sus preferencias.

La gestión de párrafos también se trata en estas lecciones; es interesante comprobar cómo se reflejan los distintos párrafos en el selector de etiquetas de la Barra de estado de la aplicación, así como los distintos estilos de texto.

Según el contenido de las páginas web creadas en Dreamweaver, el uso de listas numeradas o no numeradas puede resultar una gran solución.

Dreamweaver cuenta con distintas paletas de colores, recomendables según el destino del sitio web que se esté creando.

Entre el texto que se puede insertar una página web se encuentran los caracteres especiales y las listas, ambos elementos tratados por separado en sus correspondientes lecciones. Las listas pueden ser ordenadas o no ordenadas, y su estado puede ser modificadas una vez creadas.

En las últimas lecciones de este apartado, el lector aprenderá a crear regiones editables con archivos de InContext Editing, a revisar ortográficamente los documentos y a utilizar la función de búsqueda y reemplazo de Dreamweaver.

Lección 18. Insertar texto

El texto es el principal componente de una página Web y, además de ser un perfecto transmisor de información, presenta la ventaja de su escaso tamaño en bytes, por lo que su inclusión en las páginas no repercute prácticamente en el tiempo de descarga. Dreamweaver funciona de manera similar a muchas aplicaciones de tratamiento de textos. Los textos de una página quedan divididos en párrafos mediante los saltos de carro. La pulsación de la tecla Retorno implica la creación de un nuevo párrafo. Los navegadores Web insertan automáticamente una línea en blanco de espacio entre los párrafos. El programa permite añadir una única línea de espacio entre los párrafos mediante la inserción de un salto de línea. El menú Insertar y la barra de herramientas del mismo nombre dan acceso a la inserción de este tipo de carácter especial. Para introducir un salto de línea mediante el teclado debe ser utilizada la combinación Mayúsculas + Retorno.

RECUERDE

Lógicamente, debido a que no es un procesador de textos, Dreamweaver presenta ciertas limitaciones relacionadas con la inserción de texto, por ejemplo, la imposibilidad de insertar dos espacios en blanco seguidos.

1 En esta primera lección dedicada a la inclusión de contenidos en la página conoceremos el modo de insertar texto. Para realizar las prácticas de texto utilizaremos las páginas del sitio elemental, creado en lecciones anteriores. Empezaremos editando su página principal. Desde el panel Archivos, haga doble clic en el icono del archivo index.html.

2 Como recordará, esta página principal cuenta con una imagen de rastreo que insertamos en una lección anterior. Antes de continuar, y para poder trabajar en este caso con total comodidad, ocultaremos esta imagen. Para ello, despliegue el menú Ver, haga clic en el comando Imagen de rastreo y pulse sobre la opción Mostrar. (1)

Si prefiere eliminar por completo la imagen de rastreo, recuerde que debe acceder al cuadro de diálogo Propiedades de la página, acceder a la categoría Imagen de rastreo y suprimir la ruta de archivo referente a la imagen en cuestión.

3 La imagen ya no aparece en la página, aunque continúa presente en el sitio. (2) Dreamweaver se comporta de manera similar a la mayoría de los editores de texto del mercado. Así, en los documentos carentes de contenido el cursor de edición queda situado en la primera línea de la página. Para introducir un texto basta con teclearlo. Al inicio de la página, escriba la palabra velero y pulse la barra espaciadora de su teclado.

4 El programa presenta una serie de limitaciones en la edición de texto. Por ejemplo, en principio resulta imposible insertar más de un espacio entre palabras. Pulse nuevamente la barra espaciadora del teclado para comprobarlo, complete la frase escribiendo el término de ocasión y pulse la tecla Retorno.

5 Al igual que la mayoría de procesadores de texto, Dreamweaver se encarga de pasar a la siguiente línea cuando el texto alcanza el margen derecho de la página. Para insertar un salto de carro hemos optado por pulsar la tecla Retorno. La pulsación de esta tecla comporta la creación de un segundo párrafo en la página. En la Barra de estado, aparece la etiqueta identificativa de este elemento: p. Teclee la frase de ejemplo Entre para ver más. (3)

La combinación de teclas Mayús + Intro inserta automáticamente un salto de línea en el punto en que se encuentra el cursor de edición.

6 Entre el párrafo inicial y el nuevo queda una línea en blanco, ya que los navegadores Web la insertan automáticamente para espaciar los diferentes bloques de texto de una página. Pero el programa permite la inserción de los llamados saltos de línea. Uno de los menús de la aplicación posibilita la introducción de todos los elementos que puede contener una página. Despliegue el menú Insertar, pulse en el comando HTML y, en su submenú, seleccione la opción Caracteres especiales. (4)

7 El programa posibilita de esta forma la introducción de elementos de texto cuya inserción mediante el teclado no es intuitiva, o no resulta posible. Seleccione el comando Salto de línea.

8 La nueva línea forma parte del mismo párrafo que la anterior. Dreamweaver permite definir el comportamiento de los saltos de línea en el cuadro de diálogo Preferencias. De momento, seguiremos insertando texto en la página. En la nueva línea, escriba la frase de ejemplo ver fotos. (5)

9 La barra de herramientas Insertar, ubicada debajo de la Barra de menús, permite la inserción de todo tipo de elementos. Organizada por categorías, esta barra de herramientas presenta una ficha dedicada en exclusiva a los elementos de texto, la cual, al estar escribiendo en la página, se muestra activa. Haga clic en la pestaña Texto. (6)

10 Las opciones que presenta la pestaña Texto permiten la inserción directa de etiquetas HTML relacionadas con el texto. El último de los comandos muestra una punta de flecha a la derecha de su icono. Haga clic en esta punta de flecha para consultar su contenido.

11 El programa agrupa en un solo comando de la barra todos los caracteres especiales. El seleccionado por defecto es el que aparece en la primera posición de la lista desplegada, Salto de línea. La pulsación del botón, en lugar de la punta de flecha, hubiera insertado un salto de línea en el documento de forma directa. Tras la pulsación en la punta de flecha, para insertar uno de los elementos listados basta con pulsar sobre él. Seleccione el comando Salto de línea. (7)

12 En la siguiente lección conoceremos el modo de insertar texto procedente de otros documentos. Dejaremos en este punto, por tanto, la presente, no sin antes almacenar las modificaciones efectuadas. Recuerde que si quiere conservar el documento en su estado original puede utilizar el comando Guardar como para crear una copia. Pulse el comando Guardar de la barra de herramientas Estándar. (8)

Resulta conveniente almacenar frecuentemente los cambios para evitar pérdidas accidentales.

RECUERDE

Por defecto, la barra de herramientas Insertar se presenta en el espacio de trabajo a modo de panel, en la parte derecha del área de trabajo; en las primeras lecciones de este curso desplazamos este panel hasta situarlo a modo de barra de herramientas.

Lección 19. Seleccionar, copiar y pegar texto

La copia y pegado de texto resulta una alternativa a su introducción directa mediante el teclado. Entre los tipos de documentos que los profesionales de la Web reciben con contenido de texto para incorporarlos en las páginas Web, se incluyen los archivos de texto ASCII, los archivos en formato de texto enriquecido y los documentos de MS Office. Dreamweaver posibilita la extracción de texto de cualquiera de estos tipos de archivos y su posterior incorporación a una página Web. El programa no mantiene el formato de texto aplicado en el resto de aplicaciones, pero conserva los saltos de línea. El texto debe ser seleccionado para poder proceder a su copia. Una vez seleccionado, el texto puede ser copiado mediante la combinación de teclas Control + C, el menú contextual de la selección o el menú de edición del programa. El método abreviado de teclado correspondiente al pegado es Control +V y tanto éste como el de copia son comunes en todas las aplicaciones que trabajan bajo el entorno de Windows. Copiando y pegando texto ahorramos tiempo en la edición de los documentos.

1 Si en la práctica anterior insertamos mediante el teclado una serie de textos en la página principal del sitio elemental, index.html, en esta lección conoceremos el modo de incluir textos mediante la selección, copia y pegado de los mismos. Para ello, vamos a utilizar un par de documentos de texto, presentación.docx y descripción.docx, creados con Microsoft Word, el procesador de textos de Office, que puede descargar desde nuestra página web y guardar en la carpeta de documentos de su equipo. Cuando disponga de ellos, empezaremos abriendo el primero en su aplicación original. Para ello, despliegue el menú de Inicio y haga clic en el elemento Documentos. (1)

Existen múltiples métodos de selección de texto mediante el ratón, el teclado o la combinación de ambos.

2 De esta forma accedemos directamente a la carpeta de documentos del equipo. Haga doble clic en el icono del documento de texto presentación.docx.

3 Se abre el programa Microsoft Word, con el que ha sido creado el documento en cuestión. Antes de continuar, debemos advertirle que, como comprobará enseguida, el texto presenta graves errores ortográficos; no se preocupe ni los corrija, puesto que estos nos servirán más adelante para practicar con la revisión de textos en Dreamweaver. Dicho esto, pulse la combinación de teclas Ctrl + E para seleccionar todo el texto del documento. (2)

4 El comando Copiar viene identificado en todos los programas por el icono de la doble hoja. Sin embargo, y dado que no tiene por qué conocer los elementos de la interfaz de Word, utilizaremos una nueva combinación de teclas para copiar el contenido seleccionado. Pulse para ello la combinación Ctrl + C.

5 Una vez copiado el texto, haga clic en el botón de aspa de la Barra de título del programa para salir de él.

6 Mantendremos abierta la carpeta de documentos, puesto que utilizaremos otro de sus documentos más tarde. Sitúe el puntero en la parte inferior de la pantalla y, en la Barra de tareas, pulse en el botón correspondiente a Dreamweaver para restaurar esta aplicación.

7 Nos interesa que el texto copiado quede pegado en la parte inicial de la página. Para ello deberemos situar el cursor de edición ante la primera letra incluida. Pulse delante de la letra inicial de la primera línea, despliegue el menú Edición y seleccione el comando Pegar. (3)

La combinación de teclas para pegar un elemento previamente copiado o cortado es Ctrl + V.

8 El pegado se efectúa a partir del punto en el que se encontraba el cursor de edición. (4) Este texto es la presentación de una empresa ficticia de compra-venta de embarcaciones. Para empezar copiaremos el nombre de la empresa. Haga clic delante de la palabra MAR, al inicio del texto, pulse la tecla Mayúsculas y, sin soltarla, haga clic detrás de la palabra tierra. (5)

9 Y para copiar un elemento seleccionado, independientemente de su formato, podemos utilizar la combinación de teclas correspondiente, la barra de herramientas Estándar, el menú Edición del programa o el menú contextual de la selección. En este caso, pulse sobre el comando Copiar de la barra de herramientas Estándar, octavo icono de dicha barra. (6)

El método más sencillo para seleccionar una única palabra consiste en hacer doble clic sobre ella.

La combinación de teclas para copiar un elemento es Ctrl + C.

10 Para deseleccionar una palabra basta con pulsar en otro punto de la página, en el cual quedará situado el cursor de edición. Pulse al inicio de la línea y haga clic sobre el comando Pegar de la barra de herramientas Estándar, el noveno icono de dicha barra.

11 La palabra pegada queda incluida como parte del párrafo. Para que la nueva palabra constituya un párrafo independiente, pulse la tecla Retorno.

12 Para seleccionar un fragmento de un párrafo pueden ser utilizados diversos métodos. Quizás el más intuitivo resulta pulsar ante la primera letra que quiera ser seleccionada y utilizar la técnica de arrastre, soltando el botón del ratón al situar el puntero sobre la última. La combinación de teclado y ratón también facilita esta operación. Así en prácticas anteriores vimos cómo seleccionar fragmentos de texto con la ayuda de la tecla Mayúsculas. Si lo que se pretende es seleccionar una línea completa basta con pulsar a su izquierda, en el margen de la página. Haga clic en el margen izquierdo de la página, a la altura de la primera línea del segundo párrafo.

13 Si se desea seleccionar un párrafo completo se puede utilizar la etiqueta correspondiente de la Barra de estado. En este caso, haga clic en la etiqueta párrafo, p. (7)

Al situar el puntero del ratón al inicio de una línea, la forma de dicho puntero cambia para mostrar una flecha.

Para seleccionar un párrafo entero, también es posible hacer un triple clic en el margen de dicho párrafo.

A diferencia de otros programas, en Dreamweaver el método abreviado de teclado correspondiente es Ctrl + A.

14 Y si lo que se quiere es seleccionar la totalidad del contenido de la página, puede pulsar la etiqueta body o ejecutar el comando Seleccionar todo. En este caso, despliegue el menú Edición y pulse sobre dicho comando. (8)

15 Haga clic al final de la página, fuera de la selección, para situar el cursor de edición en este punto.

16 En la segunda parte de esta práctica utilizaremos el documento texto.html del sitio elemental. No cerraremos el archivo actual, index.html, sino que nos limitaremos a almacenar las modificaciones efectuadas. Pulse sobre el comando Guardar de la barra de herramientas Estándar. (9)

17 Abriremos el documento desde el panel Archivos. Muestre dicho panel, expanda la carpeta documentos pulsando en el signo + que precede su nombre y haga doble clic en el icono del documento texto.html. (10)

RECUERDE

La tecla Control permite variar la función de las teclas Inicio y Fin. Así la combinación de Control con la primera sitúa el cursor al inicio de la pá-gina, no de la línea. Si se pulsan simultáneamente las teclas Control y Fin el cursor de edición queda posicionado al final de la página.

18 En esta página insertaremos el contenido del documento de texto descripción.docx. Desplace el puntero a la parte inferior de la pantalla y, en la Barra de tareas, pulse en el botón correspondiente a la carpeta Documentos, que permanece abierta.

19 Haga doble clic en el icono del documento de texto descripción.docx para abrir la aplicación asociada al mismo.

20 El texto presenta un formato diferente al anteriormente copiado, concretamente un tipo de letra diferente. Copiaremos todo el texto para comprobar si Dreamweaver mantiene el formato original del texto. Para ello, en primer lugar deberemos seleccionarlo. Pulse la combinación de teclas Ctrl + E y, a continuación, pulse la combinación Ctrl + C para copiar este contenido.

21 Para seguir adelante, cierre la aplicación pulsando el botón de aspa de su Barra de título.

22 Como no necesitaremos utilizar más documentos para realizar las prácticas del curso relativas al texto en Dreamweaver, cierre la ventana de documentos haciendo clic en el botón de aspa de su Barra de título.

23 Finalmente pegaremos el texto copiado. Despliegue de nuevo el menú Edición y haga clic sobre el comando Pegar. (11)

24 Dreamweaver no respeta el formato original del texto. El texto pegado presenta en la página el mismo tipo de letra que el tecleado en el documento index.html y el pegado posteriormente en él, procedente del archivo presentación.docx. El programa tiene predeterminado un formato y lo aplica para presentar los textos que carecen de él. En las próximas lecciones conoceremos el modo de dar formato a los textos en Dreamweaver. Para finalizar este ejercicio, guarde los cambios realizados pulsando sobre el comando Guardar. (12)

Lección 20. Modificar el formato de un párrafo

Una vez introducido el texto en las páginas, Dreamweaver posibilita la edición de su formato. En principio los diferentes bloques de texto de una página presentan el formato llamado Párrafo, y la etiqueta correspondiente en el selector de la Barra de estado permite su selección directa. El formato Párrafo presenta las características normales del texto visualizado en Dreamweaver, el tamaño y estilo de fuente predeterminados. Estas características no siempre se corresponden exactamente con las del texto posteriormente visualizado en el navegador. El programa, además de la opción que permite la selección de un formato predeterminado, que aplica la fuente y el tamaño de la misma establecidos como Fuente fija entre las preferencias del programa, también posibilita la definición de formatos relativos para los diferentes bloques de texto de una página: los encabezados. Un encabezado define una serie de parámetros, tamaño de letra y estilo, de un bloque de texto completo.

RECUERDE

Dreamweaver permite definir siete tipos de encabezados, siendo el primero de ellos, Encabezado 1, el que aplica un tamaño de letra mayor a los textos. A cada encabezado le corresponde una etiqueta HTML, que se identifica con la letra h seguida del número de encabezado correspondiente. Cuando se aplica una etiqueta de encabezado a un párrafo, Dreamweaver añade automáticamente la siguiente línea de texto como un párrafo sencillo.

1 En esta lección le mostraremos cómo cambiar el formato de un párrafo incluido en una página de Dreamweaver. Para empezar, aprenderá que también es posible copiar y pegar el texto de una página en otra del mismo sitio web. Empecemos. En el documento texto.html, pulse en el margen izquierdo de la página a la altura de la primera línea. (1)

2 Copiaremos el texto seleccionado para posteriormente pegarlo en la parte final de la página principal del sitio elemental, de modo que, mientras que en la página original el texto queda como un párrafo independiente, en el documento index.html quede integrado como una simple línea de un párrafo. Pulse sobre el comando Copiar de la barra de herramientas Estándar para copiar el texto seleccionado (2) y ponga en primer plano la página index.html pulsando en su pestaña.

Recuerde que si lo prefiere también puede utilizar la técnica de arrastre o la combinación del teclado y el ratón para seleccionar una línea de texto.

3 El cursor de edición se encuentra situado al final de la página index.html, en una línea vacía que fue creada con un salto de línea. Pulse ahora sobre el comando Pegar de la barra de herramientas Estándar. (3)

4 El texto pegado pasa a conformar la segunda línea del quinto párrafo de la página, todos ellos separados por un salto de carro y la consiguiente línea libre. A continuación, seleccione la primera línea de esta página, MAR y tierra. (4)

5 De este modo el texto seleccionado constituye en sí mismo un párrafo independiente. El programa permite aplicar opciones de formato a los diferentes párrafos de una página. El menú Formato contiene, agrupados, todos los comandos relativos al formato de los textos. Despliegue este menú y haga clic sobre el comando Formato de párrafo.

6 Las diferentes opciones de formato de párrafos vienen recogidas en el submenú desplegado. Por defecto los textos tienen asignado un formato llamado precisamente Párrafo. A la izquierda de este comando del submenú se muestra el signo que lo verifica. Seleccione la opción Texto preformateado. (5)

Al seleccionar la opción Texto preformateado aplicamos al texto la etiqueta pre y, por consiguiente, el tipo y tamaño de letra configurado en Dreamweaver como Fuente fija. Veremos la diferencia entre la fuente proporcional y la fuente fija en las próximas lecciones.

7 Los formatos de párrafo definen diversas características del texto, entre ellas el estilo y el tamaño de la fuente. (6) Pero todos estos parámetros son relativos, ya que el texto visualizado en Dreamweaver no siempre se corresponde con el que muestra el navegador. Existen muchos factores que alteran la visualización de las páginas. La pestaña Texto de la barra de herramientas Insertar permite aplicar a un párrafo el formato de encabezado, aunque con ciertas limitaciones. Mientras que el submenú Formato de párrafo presenta siete opciones diferenciadas de encabezado, la mencionada barra de herramientas únicamente muestra tres. Haga clic en el botón h1 de la barra de herramientas Insertar. (7)

8 El texto seleccionado queda definido como un encabezado de Estilo 1 y, por tanto, aparece en la Barra de estado la etiqueta correspondiente, h1. (8) Este tipo de encabezado define al tiempo el aumento de tamaño y la aplicación del estilo negrita al texto. Para observar mejor el resultado de la aplicación de la etiqueta encabezado, pulse al final de la palabra seleccionada. (9)

Los encabezados quedan identificados en la Barra de estado por la letra (h) a la que sigue el número de encabezado correspondiente.

Al eliminar la selección del texto, la etiqueta correspondiente deja de estar activa, aunque continúa reflejándose en la Barra de estado.

9 Cabría suponer que la introducción de un salto de carro implicaría la creación de un nuevo párrafo con el mismo formato de encabezado; sin embargo, por defecto el programa crea los nuevos párrafos sin aplicar el formato anterior. Para comprobarlo, pulse la tecla Retorno.

10 Efectivamente, vea el cambio de etiqueta en la Barra de estado Veamos cómo cambiar esta característica del programa. Despliegue el menú Edición y pulse sobre el comando Preferencias.

11 El apartado Opciones de edición de la categoría General del cuadro de preferencias permite definir si los nuevos párrafos deben preservar el formato de los precedentes. Por defecto se encuentra activada la opción Cambiar a párrafo sencillo tras el encabezado. Esto es debido a que en la mayoría de las ocasiones interesa trabajar con párrafos sencillos, carentes de formato inicial. Haga clic en Aceptar sin realizar ningún cambio. (10)

Recuerde que puede acceder al cuadro de preferencias del programa pulsando la combinación de teclas Ctrl + U.

12 Seguidamente cambiaremos simultáneamente el formato de los dos párrafos siguientes de la página, pero antes, pulse la tecla Suprimir para eliminar un salto de carro y, por tanto, una de las líneas carentes de contenido.

13 Combinaremos ratón y teclado para seleccionar los dos siguientes párrafos conjuntamente. Con el cursor de edición situado delante de la primera palabra del segundo párrafo, haga clic tras la última letra de la palabra ocasión, en el tercer párrafo de la página, mientras mantiene pulsada la tecla Mayúsculas. (11)

14 Para definir los párrafos seleccionados como encabezados, pulse esta vez el comando h2 _de la barra de herramientas Insertar. (12)

15 El encabezado 2 presenta un tamaño de letra menor al seleccionado para el primer párrafo. Ahora comprobaremos que para aplicar un tipo de encabezado a un párrafo no es necesario que éste se encuentre totalmente seleccionado. Para ello, seleccione el término MAR y tierra que encabeza la selección actual (13) y haga clic en el comando h3 de la barra de herramientas Insertar.

16 Los formatos de párrafo se aplican a la totalidad del bloque de texto. (14) Así la etiqueta h3 del selector de la Barra de estado que ha aparecido nos permite seleccionar de modo directo el párrafo que presenta este formato de encabezado. Para comprobarlo, pulse en dicha etiqueta.

17 Por último el Inspector de propiedades también permite la aplicación de formatos de párrafo a los textos. Despliegue el campo Formato de este panel y seleccione, en este caso, la opción Encabezado 4. (15)

18 Los encabezados de mayor numeración aplican tamaños de letra menores, además del estilo negrita común a todo este tipo de párrafos. (16) En las siguientes lecciones veremos el modo de cambiar las propiedades de fragmentos de texto. Haga clic al inicio de la página actual y, por último, pulse el comando Guardar de la barra de herramientas Estándar para almacenar los cambios realizados.

Cuando un texto se encuentra seleccionado, el Inspector de propiedades presenta una serie de cuadros que permiten definir las opciones relativas a este tipo de elementos.

La opción Ninguno del campo Formato del panel Propiedades permite desactivar todas las opciones de formato aplicadas a un párrafo, devolviendo así su formato inicial.