Formato Básico de Texto

Como indicamos más arriba, si queremos modificar las características de un texto, o cualquier otro elemento, la manera más directa es a través del Inspector o Panel de Propiedades. Algunas de ellas se pueden modificar también desde el menú Texto o la solapa Texto del panel Insertar. Pero aconsejamos de nuevo el uso del Inspector de Propiedades por su inmediatez y comodidad.
Si no lo tenemos visible seleccionamos Ventana>Propiedades. Éste es su aspecto una vez hemos seleccionado en texto.

Pulsando sobre el icono del triángulo de la esquina inferior derecha se amplía y nos muestra todas las opciones.

Estilo de Párrafo.

El texto en HTML está compuesto principalmente por encabezados y párrafos. Los encabezados separan las secciones principales del documento, de igual modo que un periódico utiliza titulares y subtítulos. HTML tiene 6 niveles de encabezados. El encabezado mayor utiliza la etiqueta <h1></h1> y el menor <h6></h6>. Para asignar a un párrafo un estilo de párrafo estándar de HTML los pasos a seguir son:

1. Situamos el cursor en el párrafo al cual se quiere asignar el formato.
2. Desplegamos la lista Formato situada en la esquina izquierda del Inspector de Propiedades.
3. Finalmente seleccionamos el estilo que se quiere aplicar al párrafo.

Otros estilos accesibles desde esta lista son:

• Ninguno: Introduce texto entre saltos de línea, NO entre etiquetas <p> y </p>, como hará Párrafo.
• Preformateado: estilo de texto que emplea letra mono espaciada, con este estilo se respetan los espacios entre palabras del código HTML, se emplea de una manera rudimentaria para alinear texto. La etiqueta que emplea es <PRE></PRE>.
• Párrafo: generar un párrafo normal empleando las etiquetas <P> y </P>

Fuente.

Los diseñadores pueden utilizar normalmente tantas fuentes como haya configuradas en su sistema. Los diseñadores de páginas Web, por el contrario, solo podremos utilizar la fuentes instaladas en el sistema del visitante. En el caso de que utilicemos una fuente que nuestro visitante no tenga instalada, el explorador usará una fuente definida como predeterminada, por norma general es Times New Roman.

El código HTML representa la fuente con el atributo face de la etiqueta <Font>. Ya que nunca sabremos con certeza las fuentes que se encuentran instaladas en el equipo del visitante, el lenguaje HTML, permite ofrecer un determinado número de fuentes al navegador.

<font face="Arial, Helvetica, Sans-serif"> Éste es un ejemplo de texto y su código </font>

El navegador, al leer este código, intentará mostrar el texto con la fuente Arial. Si no existe, lo intentará con la siguiente fuente de la lista, que en este caso es la Helvetica. Así se progresaría hasta agotar todas las fuentes de la lista, mostrando el texto entonces con la fuente predeterminada.

Dreamweaver aplica series de fuentes de una forma directa. Para asignar una serie de fuentes a un texto, seguimos estos pasos:

1. Seleccionamos el texto.
2. Desplegamos, en el Inspector de Propiedades, el cuadro de lista desplegable de fuentes o ejecuta el comando Texto>Fuente.
3. Seleccionamos de la lista la fuente deseada. Si deseamos usar la fuente que tiene configurada en navegador por defecto, seleccionamos la opción Predeterminada.

También es posible introducir el nombre de la fuente o la serie de fuentes directamente en el cuadro de la lista desplegable del Inspector de Propiedades.

Editar Lista de fuentes.

¿Qué ocurre si quiero utilizar otra serie de fuentes de las que yo tengo instaladas? Por defecto el programa nos ofrece unas seis series de fuentes, pero nosotros podemos editar la lista que queramos. Para ello debemos seleccionar la opción Editar lista de fuentes... de la lista deplegable de fuentes del Inspector de Propiedades o del menú Texto>Fuente.

1. Si el cuadro de Fuentes elegidas estuviese vacío, hacemos clic sobre el icono de Añadir situado en la parte superior del cuadro de dialogo ( el del signo +) o selecciona la opción Agregar fuentes de la lista siguiente en el cuadro de desplazamiento Lista de fuentes.
2. Seleccionamos una fuente en el cuadro de desplazamiento Fuentes disponibles.
3. Presionamos el botón << para transferir la fuente seleccionada a la lista Fuentes elegidas.
4. Para quitar una fuente de esta lista la seleccionamos y pulsamos sobre el botón >>.
5. Repetimos los tres pasos anteriores hasta tener las fuentes deseadas en la lista Fuentes elegidas.
6. Si deseamos añadir una serie de fuentes diferente debemos repetir los pasos desde el principio.
7. Hacemos clic en Aceptar cuando hayamos terminado de añadir fuentes.

La lista desplegable de Fuentes disponibles muestra todas las fuentes instaladas en nuestro sistema.

El problema de las fuentes. Editar listas de tipos de letra.

Negrita y cursiva.

Desde el mismo Inspector de Propiedades podemos aplicar estilo directamente a un texto seleccionado pulsando los iconos de negrita y/o cursiva.

Tamaño.

Los seis diferentes encabezados disponibles nos permiten asignar a una línea o a todo un párrafo tamaños relativos. Por suerte, Dreamweaver MX 2004, no se queda ahí, también nos permite definir de un modo más preciso el tamaño del texto, incluso más alládel lenguaje HTML.

Para aplicar un tamaño determinado a un texto seleccionado seguimos el mismo método que utilizábamos para aplicar una fuente, es decir, desde su menú desplegable en el Inspector de Propiedades.

• Tamaño absoluto: El tamaño lo podemos determinar numéricamente según la medida elegida. En el menú aparecen unos números, son tamaños predeterminados en puntos. Pero si la medida que hemos elegido son los píxeles nosotros mismos podemos teclear el numero exacto del tamaño.
• Tamaño relativo: ¿A qué es relativo?, al tamaño de fuente predeterminado del navegador. Ese tamaño de fuente predeterminado (igual a la opción de Ninguno) tendría una tamaño igual al tamaño "intermedio"... o, en tamaño absoluto, igual a 12 puntos. A partir de ese tamaño, podemos ir aumentándolo o disminuyéndolo según las opciones que se nos ofrecen.

en la Versión MX...

... No se pueden aplicar tamaños absolutos (en pixeles o puntos), porque no trabaja con Estilos de forma predetermoinada. Esto lo veremos con detalle más adelante. Los tamaños son relativos. Pero ahora.. ¿a qué equivale el tamaño predeterminado del navegador? El tamaño 3: ese pasa a ser la referencia de estos tamaños relativos. A partir de ese tamaño podemos elegir uno mayor o menos. Los dos grupos de tamaños inferiores (+ y -) se utilizan para elegir un tamaño mayor o menor que el tamaño predeterminado. Desde DW MX se puede usar tamaños absolutos con Estilos CSS, cosa que la versión 2004 hace, como vemos, de forma predeterminada.

Alineación de Párrafos.

Para establecer la alineación del Párrafo:

1. Situamos el cursor en el Párrafo que queremos modificar.
2. Selecciona en el Inspector de Propiedades la alineación que deseamos pulsando su botón correspondiente.
   Los diferentes códigos que se introducen son:
   • Izquierda: <p align="left">.</p>
   • Centro: <p align="center"></p>
   • Derecha: <p align="right"></p>
   • Justificar: <p align="justify"></p>

También se puede acceder desde el menú Texto>Alinear, y seleccionamos la alineación elegida.

Sangría de Párrafos.

Para modificar la sangría del Párrafo:

1. Situamos el cursor en el párrafo que queremos sangrar.
2. En el Inspector de Propiedades, pulsamos el icono Sangría de texto o Anular la sangría de texto según deseemos.
   Dreamweaver introduce directamente las etiquetas <blockquote> y </blockquote>.

Propiedades fundamentales del texto.

Listas.

Hay tres tipos de listas:

• Listas sin ordenar: También llamadas viñetas. Se introducen por medio del icono de Viñetas del Inspector de Propiedades.

Viñetas	HTML
Rojo Verde Azul	<ul> <li>Rojo</li> <li>Verde</li> <li>Azul</li> </ul>

• Listas ordenadas: También llamadas numeraciones. Se introduce con el icono de Numeraciones del Inspector de Propiedades.

Numeración	HTML
Rojo Verde Azul	<ol> <li>Rojo</li> <li>Verde</li> <li>Azul</li> </ol>

• Listas de definición:

Diferente a las anteriores y poco utilizada. Diferencia entre término de la definición y descripción de la definición (más sangrados). Este tipo de lista solo se puede aplicar eligiéndola desde el menú Texto>Lista.

Para crear una lista nueva.

1. Situamos el cursor en el lugar en el que deseamos añadir la lista y actuamos como sigue:
   • Hacemos clic en el botón Lista ordenada o Lista sin ordenar del inspector de Propiedades.
   • Elegimos Texto > Lista y seleccione el tipo de lista deseado: Lista sin ordenar (con viñetas), Lista ordenada (numerada) o Lista de definición.
2. Escribimos el texto del elemento de la lista y presiona INTRO para crear otro elemento de la lista.
3. Para terminar la lista, desactiva el icono de la lista en el inspector de Propiedades.

Para crear una lista usando texto existente

1. Seleccionamos una serie de párrafos para convertirlos en una lista.
2. Hacemos clic en el botón Lista sin ordenar o Lista ordenada del Inspector de Propiedades o elegimos Texto>Lista y seleccionamos el tipo de lista deseado: Lista sin ordenar, Lista ordenada o Lista de definición.

Para crear una lista anidada:

Una lista anidada es aquélla que contiene otras listas. Por ejemplo, en algunos casos puede resultar conveniente anidar una lista ordenada o con viñetas en otra numerada u ordenada. Por ejemplo:

• Extremidad Superior
  • mano
    1. falanges
    2. metacarpo
    3. muñeca
  • antebrazo
  • brazo
• Extremidad Inferior

1. Realizamos una lista simple con todos los elementos, en este caso no numerada.
2. Seleccionamos los elementos de lista que deseamos anidar.
3. Hacemos clic en el botón Sangría del Inspector de Propiedades o elegimos Texto> Sangría.
   Dreamweaver sangrará el texto y creará una lista distinta con los atributos HTML de la lista original.
4. Aplicamos un nuevo estilo o tipo de lista al texto sangrado siguiendo el procedimiento ya detallado.

PROPIEDADES DE LA LISTA

Una vez realizada una lista se puede modificar. Para modificar una lista situamos el cursor dentro de la misma y seleccionamos Texto>Listas>Propiedades o pulsamos este botón que aparece en el panel de Propiedades . Aparecerá un menú de dialogo como éste:

• Tipo de lista : Cambia la representación de los elementos de toda la lista.
• Estilo : Una vez elegido un tipo de lista podemos seleccionar su estilo: si son viñetas, círculos o cuadrados, y si es una numeración podemos elegir que sea alfabética, en numeración romana, etc.
• Iniciar recuento : Activa si es una lista ordenada o numeración. Aquí podemos elegir por qué número comienza la lista.
• Nuevo estilo : Actúa como el campo Estilo pero solo sobre el elemento en el que esté situado el cursor.
• Rest recuento a : Actúa como el campo Iniciar recuento pero solo sobre el elemento en el que esté situado el cursor.

Listas

Regla horizontal.

Para insertar una línea horizontal de separación simplemente habrá que seleccionar la opción Insertar>HTML>Regla horizontal o desde la solapa HTML del panel Insertar . En el código HTML de la línea se representará como <hr>.

Una vez insertada se le pueden modificar las propiedades desde el Inspector de Propiedades. Al seleccionar la regla horizontal nos ofrece estas posibilidades:

Desde estos campos podemos determinar:

• nombre específico para diferenciarla en el código (no se suele utilizar)
• el ancho de la regla (en píxeles o en tanto por ciento con respecto al ancho de la pagina)
• el alto de la regla
• su alineación en la página
• si tendrá sombreado o no

Regla Horizontal