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

Lección 21. Cambiar el tipo y el tamaño de la fuente

Dreamweaver presenta los textos por defecto con la fuente Times New Roman. Este tipo, habitual en todos los sistemas, viene definido como fuente proporcional en el cuadro Preferencias de la aplicación. La fuente proporcional es la utilizada para mostrar los textos a los que no les ha sido aplicado formato alguno. Pero no todos los usuarios que accedan a nuestras páginas presentarán esta misma configuración en sus sistemas, lo que puede alterar el visionado en el navegador de los documentos. El programa permite asignar tipos diferentes al predeterminado mediante la inclusión de etiquetas de fuente. Para ello debe ser seleccionada una de las combinaciones de fuente disponibles. Los navegadores utilizan la primera fuente de la combinación que se localice en el sistema del usuario. Si la primera no puede ser encontrada en el sistema, el navegador pasa a utilizar la segunda, y así sucesivamente.

RECUERDE

El desarrollador de las páginas puede crear sus propias listas de fuentes personalizadas. El cuadro de diálogo Editar lista de fuentes permite crear listas añadiendo las fuentes y familias de fuentes disponibles en el sistema.

1 En la lección anterior conocimos el modo de aplicar formatos de encabezado a los párrafos de texto en Dreamweaver. Tras las acciones realizadas anteriormente, nos encontramos con la página principal del sitio elemental, index.html, situada en primer plano y el primero de sus párrafos seleccionado. En esta lección conoceremos el sistema de fuentes utilizado por el programa. Despliegue el menú Formato y seleccione la opción Fuente.

2 El signo de verificación que muestra la opción Predeterminada del submenú indica que es la opción actualmente activa. Además, Dreamweaver presenta una serie de listas de fuentes para su elección directa. Las combinaciones de fuentes determinan cómo muestra un navegador el texto de la página Web. Un navegador utiliza la primera fuente de la combinación que se encuentre en el sistema del usuario; si no está instalada ninguna de las fuentes de la combinación, el navegador mostrará el texto de acuerdo con las preferencias que tenga definidas. En el submenú desplegado seleccione la lista de fuentes Arial, Helvetica, sans-serif. (1)

La lista que presenta el comando Fuente del menú Formato son combinaciones de fuentes que presenta el programa por defecto.

3 Los cambios de combinaciones de fuentes y de colores de fuentes deben realizarse definiendo reglas para los estilos CSS, por lo que el programa abre el cuadro Nueva regla CSS. Por el momento, y dado que todavía no hemos trabajado con los estilos CSS, cierre este cuadro pulsando el botón Cancelar. (2)

4 A continuación, despliegue el menú Edición y haga clic sobre el comando Preferencias.

5 Se abre de esta forma el cuadro de preferencias del programa. Active la categoría Fuentes.

6 La parte superior de este cuadro queda reservada a la configuración de fuentes, que permite especificar el conjunto de fuentes que se emplea en Dreamweaver para documentos que utilizan un determinado tipo de codificación. Despliegue el campo Fuente proporcional pulsando en su botón de flecha. (3)

El valor predeterminado del campo Fuente proporcional depende de las fuentes que se encuentren instaladas en el sistema.

La fuente utilizada para todo el texto que aparece en la vista Código del inspector de código se refleja en el campo Vista de Código del cuadro de preferencias.

7 La fuente proporcional es la que utiliza Dreamweaver para mostrar texto normal de las páginas, mientras que la fuente fija es la que utiliza para mostrar texto en las etiquetas pre, code y tt. Dreamweaver predetermina representar los textos bajo un aspecto seguro, por lo que se encuentra seleccionada una de las fuentes clásicas, Times New Roman, disponible en la práctica totalidad de sistemas. Teclee la letra c para mostrar las fuentes que empiezan por dicha letra, seleccione la fuente Courier New y pulse el botón Aceptar.

8 Dreamweaver aplica el tipo de letra elegido a todos los textos de las páginas del sitio actual, no sólo al seleccionado. (4) También puede cambiar las fuentes desde el cuadro Propiedades de la página. Pulse ese botón del Inspector de propiedades.

9 En el cuadro de diálogo Propiedades de la página, mostrando el contenido de la categoría Apariencia (CSS). El cambio de fuente debe realizarse en esta categoría. Despliegue el campo Fuente de página, seleccione la opción Arial, Helvética, sans-serif y pulse Aceptar. (5)

10 Ahora sí, se aplica la primera fuente de la combinación elegida, aunque en este caso sólo en el fragmento seleccionado. (6) Pulse el icono Guardar de la barra de herramientas Estándar para guardar los cambios realizados en la página index.html.

El orden que aparece en la lista de combinaciones de fuentes en el cuadro Propiedades de la página es el mismo que se refleja en el submenú Fuentes del menú Formato.

11 Precisamente para solventar los problemas derivados de la hipotética carencia de fuentes en los sistemas, Dreamweaver permite la selección de listas de fuentes en lugar de fuentes individuales. La selección de una combinación dota de alternativas la posible ausencia de fuentes en el equipo del usuario final de las páginas. Despliegue el menú Formato, despliegue el comando Fuente y, en éste, seleccione la opción Editar lista de fuentes. (7)

Al tiempo que va escribiendo el nombre de la fuente, el cuadro Fuentes disponibles se va actualizando con los tipos de letra que coinciden con el texto insertado.

12 El cuadro de diálogo Editar lista de fuentes permite definir listas de fuentes personalizadas. El cuadro superior muestra las diversas combinaciones de fuentes preexistentes, de posible selección para su aplicación. El cuadro Fuentes disponibles muestra todos los tipos de nuestro sistema. En el campo situado en la parte inferior del cuadro Fuentes disponibles, escriba el nombre Courier, seleccione la fuente Courier New de este cuadro y haga clic sobre el botón que presenta una doble punta de flecha apuntando a la izquierda. (8)

13 Compruebe como la fuente seleccionada se inserta en el cuadro Fuentes elegidas y pasa a ser la primera de la lista personalizada. A continuación, haga doble clic sobre la fuente disponible llamada Courier.

14 La nueva fuente seleccionada, Courier, queda en la segunda posición de la lista. Ésta es la que cargará el navegador si el equipo del usuario no dispone de la primera de las fuentes seleccionadas, Courier New. Podemos añadir a la lista personalizada el número de fuentes de nuestro sistema que creamos oportuno. Haga doble clic en el campo situado debajo del cuadro Fuentes disponibles, que muestra la fuente Courier para seleccionarla, escriba las letras ar y, cuando se actualice el cuadro de fuentes disponibles, haga doble clic, por este orden, en las fuentes Arial y Arial Black. (9)

15 También podemos eliminar las fuentes elegidas que no deseemos utilizar. Haga clic sobre la fuente Arial Black en el cuadro Fuentes elegidas para seleccionarla y pulse el botón que presenta dos flechas apuntando a la derecha. (10)

Compruebe como, a medida que va insertando nuevas fuentes en el cuadro Fuentes elegidas, éstas pasan a formar parte también del cuadro Lista de fuentes.

16 Por otra parte, los botones de la parte superior del cuadro de diálogo Editar lista de fuentes permiten organizar las diferentes listas, determinando el orden en el que quedarán dispuestas para su selección. El botón (+) permite la creación de una nueva lista mientras que el botón (-) elimina la combinación seleccionada. Haga clic en el botón de la parte superior del cuadro que muestra una punta de flecha apuntando hacia arriba.

17 Una vez configurada la nueva combinación, pulse el botón Aceptar.

18 La lista de fuentes personalizada pasa a estar disponible para su aplicación. Acceda al cuadro Propiedades de la página pulsando el correspondiente botón del Inspector de propiedades.

19 Despliegue el campo Fuente de página, seleccione la nueva combinación Courier, Courier New, Arial y pulse el botón Aceptar.

20 Compruebe el aspecto de la página tras estos cambios. (11) Pulse sobre el comando Guardar de la barra de herramientas Estándar para almacenar los cambios realizados en la página index.html y ponga en primer plano el documento texto.html pulsando en su pestaña.

21 Al igual que sucede con la fuente, Dreamweaver predetermina un tamaño para mostrar los textos que no han sido modificados. Este tamaño, 12 puntos, guarda relación con la fuente proporcional seleccionada en el cuadro Preferencias. Veremos ahora el modo de cambiar el tamaño de los textos en Dreamweaver sin necesidad de definir encabezados. Despliegue el menú Edición y pulse sobre el comando Preferencias.

22 En pasos anteriores establecimos la fuente Courier New como la predeterminada para mostrar los textos en Dreamweaver. Todos los textos de la página actual se muestran con este tipo. Despliegue el campo Tamaño correspondiente a la fuente proporcional y seleccione la opción correspondiente a 11 puntos, 11 pt.

23 Para comprobar que el nuevo tamaño se aplica a la totalidad de párrafos de la página, haga clic en Aceptar.

24 El cambio afecta a la totalidad de bloques de texto de la página ya que todos están definidos como párrafos y, por tanto, todo el texto presenta la fuente y el tamaño establecidos como fuente proporcional. (12) Acabe este ejercicio guardando los cambios mediante la pulsación del comando Guardar de la Barra de herramientas Estándar.

Resulta aconsejable incluir en la lista alguna de las llamadas familias genéricas de fuentes: cursiva, fantasía, monoespacio, sans-serif y serif.

La nueva combinación de fuentes personalizada también estará disponible en el submenú del comando Fuentes del menú Formato.

El programa predetermina un tamaño para el texto que carece de formato.

RECUERDE

Si ninguna de las fuentes de la lista Fuentes elegidas está disponible en el sistema del usuario, el texto aparecerá en la fuente predeterminada asociada con la familia genérica de fuentes.

Lección 22. Aplicar un estilo al texto

Dreamweaver aplica automáticamente el estilo de fuente negrita a los textos que presentan formato de encabezado. La propia etiqueta que define el encabezado contiene las instrucciones para la aplicación del estilo de fuente mencionado. Pero el programa permite además la definición de diferentes estilos de fuente para los fragmentos del texto. Así los estilos negrita y cursiva, clásicos en todos los editores de texto, pueden ser aplicados mediante las opciones de la barra de herramientas Insertar, las de la Barra de menús y las del panel Propiedades. Por defecto, así queda definido en el cuadro de diálogo Preferencias, el programa no aplica las tradicionales etiquetas de estos estilos (b e i, respectivamente) sino que utiliza otras que consiguen el mismo resultado transmitiendo un mayor número de información al navegador. Se trata de las etiquetas strong y em, correspondientes a los estilos de fuente Destacado y Énfasis.

RECUERDE

El submenú Estilo del menú Formato posibilita la selección de estilos de fuente adicionales, entre ellos el subrayado, que suele reservarse a los textos que presentan un enlace y que no aparece ni en el Inspector de propiedades ni en la ficha Texto de la barra de herramientas o el panel Insertar.

1 Vimos en las lecciones anteriores cómo el establecimiento de encabezados suponía una alteración del tamaño de los textos, al tiempo que se les modificaba el estilo de fuente. En este ejemplo práctico conoceremos el modo de aplicar estilos de fuente a los diferentes fragmentos de texto. Continuamos trabajando con la página texto.html, actualmente en primer plano en el área de trabajo del programa. Para empezar, seleccione completamente la primera línea de la página pulsando en su margen izquierdo. (1)

Recuerde que también puede seleccionar un fragmento de texto mediante la técnica de arrastre.

Los estilos de fuente ofrecidos son variados, siendo los tres primeros (Negrita, Cursiva y Subrayado) los principales.

2 Dreamweaver permite asignar la totalidad de estilos de fuente aplicables mediante las opciones de la Barra de menús. Despliegue el menú Formato, seleccione la opción Estilo y, en el submenú desplegado, pulse en la opción Subrayado. (2)

3 El texto seleccionado queda subrayado. (3) Como veremos en lecciones posteriores, habitualmente se reserva el subrayado para los textos que funcionan como enlaces. Es por ello que el Inspector de propiedades no muestra opción de subrayado cuando un texto se encuentra seleccionado. En cambio sí presenta los botones correspondientes a los otros dos estilos principales, comunes en la mayoría de los editores: Negrita y Cursiva. La pulsación del botón Negrita, identificado con la letra B, permite la aplicación directa de este estilo de fuente. Pulse el botón Negrita del panel Propiedades.

4 El botón correspondiente al estilo Cursiva queda identificado por la letra I. Haga clic en dicho botón del Inspector de propiedades.

5 Dreamweaver permite la aplicación de estos estilos de fuente básicos mediante el uso de etiquetas alternativas a las tradicionalmente utilizadas. Despliegue el menú Edición, pulse sobre el comando Preferencias y, en el cuadro de preferencias del programa, seleccione la categoría General.

6 Entre las configuraciones establecidas por defecto, queda fijada la utilización de la etiqueta strong en lugar de la tradicional del estilo de fuente negrita, b. Del mismo modo el programa utiliza por defecto etiquetas em para indicar la aplicación del estilo cursiva, tradicionalmente aplicado mediante la etiqueta i. Puede comprobarlo viendo la correspondiente opción en la sección Opciones de edición. (3) Las etiquetas strong y em proporcionan al navegador más información semántica que las anteriormente utilizadas. Pulse el botón Aceptar sin realizar modificaciones.

Recuerde que la combinación de teclas que ejecuta la apertura del cuadro de preferencias del programa es Ctrl + U.

Si desea que el programa prescinda de las etiquetas strong y em y utilice las típicas b e i, desmarque la opción Utilizar <strong> y <em> en lugar de <b> y <i>.

La etiqueta <u> del selector de etiquetas es la que indica la aplicación del estilo subrayado.

También es posible aplicar los estilos Negrita y Cursiva a través de la barra de herramientas Insertar.

7 De este modo el selector de la Barra de estado muestra las etiquetas strong y em, que indican la aplicación al texto seleccionado de los estilos negrita y cursiva, aunque la etiqueta que aparece seleccionada es sólo la última de ellas, <em>. (4) Haga doble clic en la primera palabra del segundo párrafo para seleccionarla. (5)

8 La definición de párrafos como encabezados implica la aplicación del estilo negrita a todo el bloque de texto, al tiempo que define su tamaño. Pero los estilos de fuente se aplican únicamente a los fragmentos de texto seleccionados. Pulse el botón Negrita de la barra de herramientas Insertar. (6)

9 Haga doble clic en la primera palabra del tercer párrafo, la palabra Cabinas, y, una vez seleccionada, pulse en la etiqueta <p> de la Barra de estado. (7)

El selector de la Barra de estado muestra todas las etiquetas que afectan a la selección actual y permite la selección directa de los fragmentos de texto modificados y, en todo caso, siempre facilita la selección completa de los diferentes bloques de texto.

10 La barra de herramientas Insertar presenta botones específicos para la inserción de etiquetas strong y em. De este modo se posibilita su introducción en caso de haber cambiado la configuración de las preferencias del programa, de modo que se puedan introducir las etiquetas b e i tradicionales de los estilos de fuente. Pulse el botón Énfasis, situado en la cuarta posición de la mencionada barra.

11 Automáticamente se aplica la etiqueta em al texto seleccionado, que pasa a mostrar el estilo de fuente Énfasis. (8) El resultado es idéntico al conseguido mediante la aplicación del atributo cursiva. Pulse sobre el comando Guardar de la barra de herramientas Estándar para guardar los cambios realizados y ponga en primer plano la página index.html haciendo clic en su pestaña.

12 Seleccione el término MAR y tierra que encabeza el segundo párrafo y pulse el botón Destacado de la barra de herramientas Insertar, identificado por la letra S. (9)

Los estilos de texto negrita y cursiva pueden aplicarse también mediante las combinaciones de teclas Ctrl + B y Ctrl + I, respectivamente.

13 La pulsación del botón Destacado aplica la etiqueta strong al texto seleccionado. La barra de herramientas Insertar también permite aplicar de modo directo estilos de párrafo. El botón Párrafo, quinto de los botones de la mencionada barra, permite eliminar los encabezados, recuperando el texto el aspecto predeterminado para la fuente proporcional en el cuadro de diálogo Preferencias. Pulse dicho botón.

14 La eliminación del encabezado supone la eliminación del estilo negrita en el párrafo, exceptuando el término seleccionado del mismo, al que fue aplicado este atributo de forma individual. Haga clic en la etiqueta p de la Barra de estado y pulse el botón Destacado de la barra de herramientas Insertar.

15 Los siguientes dos botones, agrupados junto al botón Párrafo en la barra de herramientas Insertar, permiten establecer otro tipo de formatos de párrafo predefinidos. Pulse el botón Comillas en versalita, situado a la derecha del botón Párrafo. (10)

16 La aplicación de esta opción comporta la aplicación de sangrías al párrafo. (11) Conoceremos el modo de sangrar textos en una lección posterior. Por su parte la pulsación del botón Texto preformateado, pre, aplica al texto el formato configurado como fuente fija en el cuadro de diálogo de propiedades. Haga doble clic sobre la primera palabra del tercer párrafo de la página, la palabra velero, y pulse en la etiqueta h2 de la Barra de estado.

17 Por último, el menú Formato presenta una serie de estilos de fuente adicionales. Despliegue dicho menú, muestre con un clic su submenú Estilo y, en éste, seleccione la opción Teclado.

18 No realizaremos más modificaciones por el momento. En la siguiente lección conoceremos el modo de cambiar el color de los textos. Guarde los cambios realizados pulsando sobre el comando Guardar de la barra de herramientas Estándar para finalizar este ejemplo práctico.

Lección 23. Aplicar color al texto

Dreamweaver predetermina la aplicación del color negro a los textos incluidos en las páginas. El programa permite cambiar esta configuración desde la categoría Apariencia HTML del cuadro de diálogo Propiedades de la página. El campo Texto de esa categoría da acceso a un selector de color, que permite elegir el tono entre las diferentes muestras propuestas en una paleta emergente, o directamente capturar el color de pantalla. Además, Dreamweaver posibilita el cambio de color del texto seleccionado, de modo que el nuevo tono prevalezca sobre el preestablecido para la página, aunque para ello se debe definir una clase para el estilo CSS. Las paletas de Dreamweaver presentan una serie de botones en su parte superior. El botón de flecha del extremo derecho da paso a un menú de opciones que permite cargar diferentes paletas de color. La pulsación del botón Color predeterminado devuelve al texto el color establecido en las propiedades de la página. El botón Colores del sistema conduce al cuadro de diálogo Color, que posibilita la personalización de los tonos a través de seis parámetros. Tres hacen referencia a los colores primarios utilizados en la mezcla y los otros tres son los correspondientes al matiz, la saturación y el brillo.