Curso de Dreamweaver MX

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.

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.

 

Ver video en formato de WMV Ver video en formato de Flash 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.

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


ATENCIÓN:
Ten en cuenta que si dejamos un tamaño en relativo no sabremos exactamente qué tamaño va a adquirir en el navegador del usuario, ya que desde el navegador se puede manipular el tamaño de los textos (en el I.E. Ver > Tamaño de texto), cambiando por tanto el tamaño predeterminado del navegador.

Si el texto tiene tamaño absoluto es indiferente a los cambios que se hagan desde el navegador.


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.

 



Si desea obtener un acceso sin restricciones a los contenidos del curso de Dreamweaver MX y disfrutar de todas las herramientas del aula virtual (Videos explicativos streaming, acceso a los foros, chat, ejercicios resueltos, la ayuda del tutor, audioconferencia, estudio de grabación, test y actividades de autoevaluación, etc...) puede inscribirse completamente gratis y comenzar a realizar de forma inmediata el curso.