Sesión 3

El texto

A lo largo de este tema vamos a aprender a cambiar las propiedades del texto y a crear estilos CSS, que permiten asignar al texto estilos creados por nosotros mismos, no predefinidos.

Características del texto

Las características del texto seleccionado pueden ser definidas a través del menú Texto, y a través del inspector de propiedades. Vamos a ver las posibilidades que se nos ofrecen a través del inspector de propiedades, aunque sean menos que las que se nos ofrecen a través del menú Texto.  Formato:  Permite seleccionar un formato de párrafo ya definido para HTML, que puede ser encabezado, párrafo o preformateado. Los encabezados se utilizan para establecer títulos dentro de un documento. El formato preformateado sirve para que el texto aparezca tal cual ha sido escrito, por ejemplo, si entre dos palabras se introducen varios espacios solo se considera uno, pero al establecer el formato preformateado se respetará que hayan varios espacios en lugar de solo uno.  Fuente: Permite seleccionar un conjunto de fuentes. Aparecen conjuntos de fuentes en lugar de una sola, ya que es posible que al establecer una única fuente el usuario no la tenga en su ordenador. El seleccionar un conjunto de fuentes posibilita que en el caso de que el usuario no tenga una fuente se aplique otra del conjunto. Por ejemplo, si seleccionamos Arial, Helvetica, Sans-serif, el texto se verá con la fuente Arial, pero si esta no existe se verá en Helvetica.  Tamaño:  Permite cambiar el tamaño del texto. El tamaño lo podemos indicar en diversas unidades, en píxeles, centímetros, etc...  Color:  Permite seleccionar el color de la fuente, ignorando el color que se haya definido en las propiedades de la página. Si no se ha establecido ningún color en las propiedades de la página ni aquí, el color del texto por defecto será el negro.  Estilo:  Estos botones permiten establecer si el texto aparecerá en negrita o en cursiva. A través del menú Texto también se puede, entre otras cosas, subrayar el texto. Esta opción no aparece en el panel de Propiedades ya que de normal no suele utilizarse, debido a que los vínculos aparecen subrayados y el subrayar texto normal podría hacer que el usuario pensara que se trata de un vínculo.  Alinear:  A través de estos botones es posible establecer la alineación del texto de una de estas cuatro formas distintas: izquierda, centrada, derecha y justificada.  Lista:  Estos botones permiten crear listas con viñetas o listas numeradas.  Sangria:  Estos dos botones permiten sangrar el texto y anular la sangría. La sangría es una especie de márgen que se establece a ambos lados del texto. En este caso caso los botones se refieren a sangría a la izquierda del texto.

Para practicar puedes realizar el Ejercicio paso a paso Insertar texto y modificar sus propiedades.

Listas

Es posible insertar texto a modo de lista. A su vez, la lista puede ser numerada o con viñetas. Para que un texto que ya ha sido introducido en el documento se convierta en una lista, simplemente hay que seleccionarlo y pulsar sobre la opción de lista correspondiente, ya sea a través del inspector de propiedades, o a través del menú Texto. La lista con viñetas (desordenada) se selecciona a través del botón  , mientras que la lista numerada (ordenada) se selecciona a través del botón .

Ejemplo de lista numerada (ordenada): Preparar la mochila Sacar los libros de ese día Introducir los libros del día siguiente Ponerme el pijama Lavarme los dientes Poner el despertador

Ejemplo de lista con viñetas (desordenada): Perro Gato Aves Canario Loro Hamster

Para establecer listas anidadas dentro de otras como en los ejemplos anteriores, es necesario añadir una sangría en los elementos de la lista que se desee que pasen a formar parte de la lista anidada. A través del menú Texto, opción Lista, es posible acceder a las propiedades de la lista seleccionada. Se debe seleccionar el texto de la lista previamente o tener el cursor en algún lugar de la lista para que se active este submenú. En la ventana Propiedades de lista se puede especificar el tipo de lista (con números o con viñetas), el tipo de números o viñetas que se utilizarán (en la propiedad Estilo:), y en el caso de las listas ordenadas, el número por el que comenzará el recuento.

Caracteres Especiales

A veces necesitarás introducir caracteres especiales en tus páginas. Debido al modo editor de Diseño de Dreamweaver esta tarea es muy sencilla utilizando el teclado, podemos incluir caracteres como á, ê, ì, ö, ç.. de forma rápida por si quieres poner dos espacios en blanco y los introduces por teclado, Dreamweaver no los creará, deberás introducirlo dos veces utilizando la opción que vamos a ver a continuación. Haz clic en el menú Insertar y selecciona la opción HTML verás el desplegable de la imagen de la derecha. Sólo coloca el puntero del ratón sobre Caracteres especiales y verás una lista rápida de los caracteres más utilizados que no pueden ser introducidos mediante teclado. Para introducir alguno de estos caracteres en tus textos sólo selecciónalo en la lista y aparecerá en la vista de Diseño. Si el carácter que buscas no se encontrase allí, haz clic en Otro... y se abrirá una ventana desde donde podrás seleccionar caracteres entre una lista bastante más amplia:

Estilos CSS. Introducción

En el menú Texto, opción Estilo, aparecen una serie de estilos predefinidos que pueden aplicarse al texto seleccionado. Los estilos CSS están en hojas de estilo de actualización automática (también denominadas Hojas de Estilo en Cascada) se utilizan para combinar una serie de atributos del texto, como pueden ser el color o el tamaño, de modo que no sea necesario asignar estos atributos uno a uno cada vez que se desee repetir la asignación de esos mismos valores a otras partes del texto. También algunas de sus opciones pueden utilizarse para definir atributos de imágenes y otras características que no permitían definir los estilos HTML en versiones anteriores, como el color de fondo para el texto, etc. Incluso permiten aplicar un estilo sobre todas las etiquetas HTML de un mismo tipo, como puede ser la etiqueta A HREF, que corresponde a los hiperenlaces. De este modo, todos los hiperenlaces de la página adquirirían la apariencia definida en ese estilo. Un estilo CSS no es más que un conjunto de reglas de formato que controlan el aspecto del contenido de una página Web. Los estilos CSS aportan gran flexibilidad y control al aspecto exacto que se busca en una página, desde la posición precisa de elementos hasta el diseño de fuentes y estilos concretos. Una de las grandes ventajas de los estilos CSS reside en que cuentan con una capacidad simple de actualización; cuando actualiza un estilo CSS, el formato de todos los documentos que usan ese estilo se actualiza automáticamente. Crear un Estilo Personalizado   Con Dreamweaver 8, las características que apliquemos a un texto crearán automáticamente estilos CSS que se incrustarán en el documento actual y se aplicarán únicamente sobre él. Veámoslo:  Para crear un Estilo CSS personalizado: 1. En el documento, se selecciona el texto al que se desea aplicar características concretas. 2. En el inspector de propiedades se modifican todas las propiedades de formato de texto, se establecen los atributos de la fuente y del párrafo que queramos. Automáticamente Dreamweaver creará un nuevo estilo con el nombre Estilo1 o Estilo2 o Estilo3,... según los nombres de los estilos ya creados. Aparecerá el nombre Estilo1 en el cuadro Estilo del panel Propiedades. También se puede cambiar el nombre del estilo, es mejor que el estilo tenga un nombre que indique a qué tipo de texto se va a aplicar. Para ello desplegamos la lista de estilos y seleccionamos la opción Cambiar nombre... Aparecerá un cuadro de diálogo para que introduzcamos el nuevo nombre como la imagen inferior. Seguidamente se coloca el nuevo nombre sin espacios en blanco. En este caso: miestilo. Al aceptar, aparecerá un panel con el nombre Resultados. Cerrar esta ventana. De esta manera se puede crear un estilo para añadirlo a un documento. Cada nuevo estilo que se crea, se añade a la lista de estilos, y los podemos acceder también de una manera rápida a través del menú Texto, opción Estilos CSS. En el Panel CSS se puede verificar que se ha añadido automáticamente el nuevo estilo. Si lo deseas, puedes aprender más sobre el panel CSS aquí . Aplicar un Estilo   Para aplicar un Estilo CSS personalizado: En el documento, selecciona el texto al que deseas aplicar el estilo CSS, o sitúa el punto de inserción del mouse en un párrafo para aplicar el estilo a todo el párrafo. Si seleccionas un rango de texto dentro de un párrafo, el Estilo CSS sólo afectará al rango seleccionado. En el inspector de Propiedades se selecciona el estilo creado por nosotros de la lista que aparece al desplegar el cuadro Estilo.  Para practicar puedes realizar el Ejercicio paso a paso Crear estilo de clase. Hojas de Estilos Podemos exportar estilos que se encuentren incrustados en la página HTML a una nueva hoja de estilos haciendo clic derecho sobre el estilo en el Panel CSS y seleccionandoExportar. Se abrirá el cuadro de diálogo Exportar estilos como archivo CSS que te permitirá guardar todos los estilos incrustados en un nuevo archivo CSS. Esta opción es muy útil si tienes los estilos incrustados en una página y queremos utilizarlos en otras también. Simplemente pasamos los estilos incrustados a una hoja de estilos y luego la adjuntamos en cualquier página que queramos utilizarlos. Para asignar una hoja de estilos a una página despliega el cuadro Estilo que se encuentra en el Inspector de Propiedades y selecciona Adjuntar hoja de estilos... En Arch./URL debe especificarse la ruta y el nombre de la hoja de estilos. Elegimos si queremos Vincular o importar la hoja de estilos. Si elegimos Vincular la hoja no se incrusta en la página sino que se añade a la página una referencia a la hoja, esto permite que cualquier cambio realizado en la hoja quede reflejado de manera automática en todas las páginas que utilizan la hoja. Esta es la opción más aconsejable si vamos a utilizar el estilo en más de una página, de esta forma sólo será necesario vincular cada una de los archivos que quieras qeu se vean afectados a la hoja de estilos que hayas creado. Si elegimos Importar la hoja se incrusta en la página. La opción Media te permitirá seleccionar el tipo de medio al que se asociará la hoja de estilos, por ejemplo, screen (pantalla), print (impresora) o tv (webtv). Estas opciones te permitirán crear hojas de estilos para soportes diferentes. Puedes crear una para screen, que será la que se muestre cuando navegues por Internet, y otra para print que será la que se utilice cuando se imprima el contenido del archivo. Después de Aceptar, la hoja con sus estilos aparecerá en el panel CSS.