cursos online, formacion on-line, teleformación, Elearning, Cursos online de ofimática, diseño gráfico, web, gestión, idiomas, programacion - ADR Formación

Formatos y estilos de texto

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 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. Este 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.

La fuente se define 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 explorador.

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

El explorador, 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 cilc 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 cilc en Aceptar cuando hayamos terminado de añadir fuentes.

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

Consejo: No emplees tipos de fuente raras, es posible que el navegante no las tenga instaladas en su sistema, y en ese caso, verá la página con su fuente predeterminada pudiendo cambiar en gran mediada el aspecto. Elige una lista de fuentes con características similares y no bases el diseño de una página en el tipo de fuente utilizado.

 

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, el lenguaje HTML, no se queda ahí, también nos permite definir de un modo más preciso el tamaño del texto mediante el atributo size de la etiqueta <font>.

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.

Al desplegar las opciones de Tamaño del Inspector de Propiedades podrás diferenciar entre dos tipos de tamaños:

  • Tamaño absoluto: El tamaño no se especifica en puntos, sino que la etiqueta <font> nos permite elegir entre siete tamaños explícitos que el explorador puede mostrar. Estos son los tamaños absolutos, que se representan en la lista de tamaños con números del 1 al 7, el 1 el más pequeño y el 7 el más grande.
  • Tamaño relativo: ¿A qué es relativo?, al tamaño de fuente definido por la etiqueta <BASEFONT>. El tamaño relativo aumenta (+) o disminuye (-) con respecto al establecido como base.

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
  1. Rojo
  2. Verde
  3. 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 eligimos 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. Aparecerá un menú de dialogo como este:


  • 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>Regla horizontal o desde la solapa Común 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 especifico 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á sombrado o no
Regla Horizontal

 

¡NOTA! Te habrás fijado en que con estas herramientas no podemos definir a nuestro gusto detalles como el ancho de la sangría, el interlineado, otros estilos de fuente, el margen de los párrafos, etc. Para ello, con Dreamweaver, deberemos utilizar Estilos CSS, que veremos más adelante.

Todos los derechos reservados © Copyright 2004 ADR Infor S.L.
Contacto: soporte@adrinfor.com