Inicio » Informática técnica. » Diseño Web y Multimedia » Curso de Dreamweaver CS3 » Propiedades del texto: Fuente, tamaño y color

Curso de Dreamweaver CS3

Cursos Relacionados:

Propiedades del texto: Fuente, tamaño y color


Inscríbete ahora y accede a 3 unidades gratis

Evalua el curso de Dreamweaver CS3 y accede a las 3 unidades gratis con acceso completo al aula virtual donde podrás disfrutar de la inestimable ayuda del tutor y una gran variedad de recursos como videotutoriales, ejercicios resueltos, foros, enlaces, bibliografía, etc....


Fuente o tipografía

Los diseñadores gráficos pueden utilizar normalmente tantas fuentes como haya configuradas en su sistema.
Los diseñadores Web, por el contrario, solo podremos utilizar la fuentes que el usuario pueda tener instaladas en su equipo.
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.

Para asignar una serie de fuentes a un texto, seguimos estos pasos:

  1. Seleccionamos el texto.
  2. Desplegamos, en el panel PROPIEDADES, el cuadro de lista desplegable 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.

¿Por qué aparecen las fuentes en una lista y no una a una?
Al insertar las fuentes en listas damos al navegador más de una opción. Por ejemplo, sí elegimos la lista Arial, Helvetica, Sans-serif el navegador intentará mostrar el texto con la fuente Arial. Sí no la encuentra en el ordenador donde se reproduzca la pagina web , lo intentará con la siguiente fuente de la lista, que en este caso es la Helvetica. Sí tampoco hay suerte buscará cualquier tipografía de la familia sans-serif (sin serifa, o también llamadas de palo seco)
Así se progresaría hasta agotar todas las fuentes de la lista, mostrando el texto entonces con la fuente predeterminada.

guía RÁPIDA: FAMILIAS DE FUENTES

- sans-serif o de palo seco: los palos de los caracteres acaban en seco (Arial, Verdana..)
- serif : los palos acaban en remates o serifas (Times, Georgia ...)
- monoespaciadas : todos los caracteres tienen el mismo ancho (Courier..)

 


Inscríbete ahora y accede a 3 unidades gratis

Evalua el curso de Dreamweaver CS3 y accede a las 3 unidades gratis con acceso completo al aula virtual donde podrás disfrutar de la inestimable ayuda del tutor y una gran variedad de recursos como videotutoriales, ejercicios resueltos, foros, enlaces, bibliografía, etc....


Editar Lista de fuentes.

¿Qué ocurre si quiero utilizar otra serie de fuentes  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 Fuentes del Panel 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 seleccionamos  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. Sí deseamos añadir una serie de fuentes diferentes 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.

CONSEJOS AL USAR TIPOGRAFÍAS

- 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.
- Procura que la última fuente de la lista sea una fuente genérica (sans-serif, serif o monotype)


Inscríbete ahora y accede a 3 unidades gratis

Evalua el curso de Dreamweaver CS3 y accede a las 3 unidades gratis con acceso completo al aula virtual donde podrás disfrutar de la inestimable ayuda del tutor y una gran variedad de recursos como videotutoriales, ejercicios resueltos, foros, enlaces, bibliografía, etc....


Tamaño

Recuerda que al aplicar a un paquete el Formato de Encabezado 1, 2 , 3 ... ya se le aumenta de forma predeterminada el tamaño.
Pero DW 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, seleccionamos el texto y elegimos el tamaño desde su menú desplegable Tam en el panel 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 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.
¡¡ EL USUARIO PUEDE CAMBIAR EL TAMAÑO DEL TEXTO RELATIVO !!

Ten en cuenta que si dejamos un tamaño en relativo dejamos que el usuario pueda modificar el tamaño del texto de la página, ya que ,desde el navegador ,se puede manipular el tamaño de los textos (menú 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.


Inscríbete ahora y accede a 3 unidades gratis

Evalua el curso de Dreamweaver CS3 y accede a las 3 unidades gratis con acceso completo al aula virtual donde podrás disfrutar de la inestimable ayuda del tutor y una gran variedad de recursos como videotutoriales, ejercicios resueltos, foros, enlaces, bibliografía, etc....


Color

En cualquier momento que tengamos que seleccionar un color en Dreamweaver lo haremos a través de este tipo de botón que adquirirá el color que posteriormente seleccionemos.

Cuando lo pulsemos aparecerá el selector de color tipo de todos los programas de Macromedia (si habéis utilizado alguno de ellos conoceréis el mecanismo de este selector):

   
El cursor se convierte inmediatamente en un pequeño cuentagotas.
En la esquina superior izquierda se verá una muestra del color por el que pasa encima, podemos seleccionar un color de la muestra o salir y seleccionar cualquier color existente en la pantalla. Para elegir el color basta con hacer clic en el color de nuestra elección.
   
Por medio de la flecha situada en la esquina superior derecha podemos elegir el tipo de paleta de colores que queremos ver en este selector. Hay que tener en cuenta que las paletas Cubo de color y Tono continuo son seguras para la Web. Mientras que SO Windows, SO Mac y Escala de grises no lo son.
   
  • Si, una vez abierto este selector no nos decidimos por ninguno solo hemos de pulsar este botón
  • Puede que no nos interese ninguno de los colores de la muestra. No importa, podemos seleccionar un color personalizado pulsando el botón .
    Desde el cuadro de diálogo que se despliega podemos crear un nuevo color de varios modos, uno muy utilizado es la introducción de los valores de rojo, verde y azul del color buscado.

  1. Si el color que precisamos está en las muestras de la izquierda hacemos clic sobre él.
  2. Si es necesario crear el color, las opciones que se presentan son:
    • Indicar los valores de matiz, saturación y luminosidad.
    • Indicar el porcentaje de rojo, verde y azul.
    • Seleccionar el color haciendo clic sobre la matriz de color de la derecha. Hacemos clic sobre cualquier parte de la matriz, movemos el puntero horizontalmente para cambiar el matiz, movemos el puntero verticalmente para cambiar la saturación y utilizamos el control deslizante de la derecha para ajustar la luminosidad.
  3. Si se quiere añadir el color a la lista de colores personalizados hacemos clic sobre el botón Agregar a los colores personalizados.
  4. Finalmente hacemos clic sobre el botón Aceptar.

 

Dato Técnico: El color en HTML

Las etiquetas Web emplean colores por combinación de ROJO, VERDE y AZUL, el valor máximo para cada color es 255 (FF en hexadecimal), y el valor mínimo 0 (0 en hexadecimal). Por ejemplo un color codificado así #FF0000 es rojo puro, pues tiene FF (255 de rojo), 0 (00 de verde) y 0 (00 de azul).

 


Inscríbete ahora y accede a 3 unidades gratis

Evalua el curso de Dreamweaver CS3 y accede a las 3 unidades gratis con acceso completo al aula virtual donde podrás disfrutar de la inestimable ayuda del tutor y una gran variedad de recursos como videotutoriales, ejercicios resueltos, foros, enlaces, bibliografía, etc....


Si desea obtener un acceso sin restricciones a los contenidos del curso de Dreamweaver CS3 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.