Cómo usar el panel de texto en el panel de propiedades CSS de Dreamweaver

El panel Texto de Dreamweaver incluye una colección de opciones que controlan la visualización del texto en sus páginas. Puede acceder a las opciones del panel Texto desplazándose hacia abajo por el panel Propiedad hasta llegar a las opciones de Diseño, o haciendo clic en el icono T en la parte superior del panel.

  • Color: Define el color del texto. Puede hacer clic en el color y elegir un color, usar el cuentagotas para muestrear cualquier color en la pantalla, o introducir un código de color hexadecimal en el campo de color. Si introduce un código de color hexadecimal, incluya el signo de numeral inicial (#).
  • Familia Font-Family: Defina una familia tipográfica o una serie de familias. Puede agregar fuentes desde su disco duro local o desde Adobe TypeKit seleccionando Administrar fuentes en la parte inferior de la lista desplegable y abriendo el cuadro de diálogo Administrar fuentes.
  • Estilo de fuente: Introduzca Normal, Cursiva u Oblicua. Sin embargo, la cursiva y el oblicuo raramente son diferentes en un navegador web, así que siga la cursiva a menos que tenga una razón específica para no hacerlo.
  • Variante de fuente: Cambiar el texto a mayúsculas. Pruebe sus diseños cuidadosamente porque este atributo no es soportado por todos los navegadores.
  • Peso de la fuente: Haga que el texto aparezca en negrita seleccionando Negrita o Negrita en la lista desplegable. También puede introducir un número entre 100 y 900 para controlar con mayor precisión el grado de negrita del texto. Para eliminar el formato en negrita, elija Normal o Más claro.
  • Tamaño de fuente: Definir el tamaño del texto. Puede elegir un tamaño numérico específico o un tamaño relativo. Las opciones de tamaño son píxel (px), punto (pt), pica (pc), porcentaje (%), em, rem, ex y ch. Los píxeles, ems y porcentajes son las opciones más utilizadas para los tamaños de texto.
  • Altura de línea: Especifique la altura de la línea en la que se coloca el texto. Al igual que el tamaño del texto, puede especificar la altura de la línea de varias maneras, incluyendo píxeles, ems y porcentajes. Es una buena práctica en la web añadir altura de línea porque al aumentar el espacio alrededor del texto es más fácil leerlo en la pantalla del ordenador.
  • Alinear texto: Alinee a la izquierda, a la derecha, centre o justifique el texto haciendo clic en el icono correspondiente. El primer icono, para Heredar, es el predeterminado. Por ejemplo, puede centrar el texto en el pie de página de su página web incluyendo Text-Align establecido en Centrar en la definición de un estilo que aplica a la etiqueta <div> en la parte inferior de la página.
  • Decoración de textos: Especifique si el texto está subrayado, sobrelineado, tachado o con el efecto de parpadeo. También puede elegir Ninguno, que se utiliza con frecuencia para eliminar el subrayado del texto enlazado.
  • Text-Indent: Especifique la cantidad de texto que se sangrará desde el lado izquierdo de la página introduciendo un número en una de las opciones de tamaño, como píxeles, ems o porcentajes.
  • Puede que hayas escuchado que ahora puedes usar cualquier fuente que quieras en tus páginas web, gracias a la última versión de Cascading Style Sheets, CSS3. Esta afirmación es cierta, pero con algunas limitaciones: Usted debe tener el derecho legal de publicar la fuente, y la fuente debe estar alojada en un servidor web.

    Para ayudar a garantizar que el texto aparezca como usted desea, Dreamweaver incluye colecciones de las fuentes más comunes en los equipos Windows y Macintosh. Estas fuentes se agrupan en familias, tales como

  • Gotham, Helvetica Nue, Helvetica, Arial, sans serif
  • Cambria, Hoefler Text, Liberation Serif, Times, Times, Times New Roman, Times, and serif
  • Puede crear sus propias colecciones de fuentes utilizando el cuadro de diálogo Administrar fuentes, al que puede acceder seleccionando la opción Administrar fuentes en la parte inferior de la lista desplegable Familia de fuentes en el panel Texto del panel Diseñador de CSS.

    La sección Sombra de texto del panel Texto proporciona herramientas para añadir sombras de texto, una de las propiedades CSS más recientes incluidas en la definición CSS3. Las opciones más populares son las siguientes:

  • H-shadow: Añade una sombra a tu texto en el eje horizontal. Primero seleccione una opción de tamaño y, a continuación, introduzca un número en el campo. Por ejemplo, introduzca 2px, para añadir una sombra horizontal de 2 píxeles de ancho.
  • V-shadow: Añade una sombra a tu texto en el eje vertical. Primero seleccione una opción de tamaño y, a continuación, introduzca un número en el campo.
  • Desenfoque: Controla la cantidad de desenfoque en la sombra. Cuanto más grande es el número, más se extiende la sombra o se difumina.
  • Color: Introduzca un código de color hexadecimal para especificar el color de la sombra, o utilice el cuentagotas para muestrear cualquier color en la pantalla.
  • Las características en la parte inferior del panel Texto, que no son tan comunes como las otras opciones del panel Texto, son las siguientes:

  • Transformación de texto: Cambiar el caso de su texto. Las opciones son Mayúsculas, Mayúsculas y Minúsculas. Haga clic en el icono correspondiente para definir esta propiedad.
  • Espaciado de letras: Define la cantidad de espacio en blanco que se inserta entre las letras. Las opciones de tamaño son píxel (px), punto (pt), pica (pc), porcentaje (%), em, rem, ex y ch.
  • Espaciado de palabras: Define la cantidad de espacio en blanco que se inserta entre palabras. Las opciones de tamaño son píxel (px), punto (pt), pica (pc), porcentaje (%), em, rem, ex y ch. (Véase la barra lateral anterior “Comparación de las opciones de tamaño de CSS”).
  • Espacio en blanco: Indique al navegador cómo manejar los saltos de línea y los espacios en un bloque de texto. Sus opciones son Heredar, Normal, Nowrap, Pre, Pre-line, o Pre-wrap. Nowrap es especialmente útil porque evita que los elementos se separen si deben envolverse para que quepan en una ventana del navegador o en otro contenedor.
  • Alineación vertical: Alinea elementos en línea, como texto e imágenes, en relación con los elementos que los rodean. Puede establecer un valor numérico o elegir Línea de base, Sub, Super, Superior, Superior, Superior de texto, Medio, Inferior e Inferior de texto.
  • No Responses

    Write a response