Cómo hacer un cuadro de texto con desplazamiento con XHTML en Dreamweaver WC3

Escrito por max power | Traducido por luis alberto fuentes schwab
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo hacer un cuadro de texto con desplazamiento con XHTML en Dreamweaver WC3
El código XHTML crea desplazamiento de texto. (Comstock/Comstock/Getty Images)

Algunas veces el diseñador web coloca texto dentro de un cuadro de texto desplazable. Esto limita el texto a un espacio determinado dentro del diseño de página. Un cuadro de texto desplazable puede alojar cualquier tamaño de texto, sin interrumpir el posicionamiento de los otros elementos de la página. Muchos diseñadores utilizan el popular programa de Adobe Dreamweaver para escribir el código XHTML y reglas CSS que crean y dan estilo al cuadro de texto.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Instrucciones

  1. 1

    Abre el documento XHTML y cambia a la vista de código. El botón de vista de código se encuentra en el extremo izquierdo de la barra del menú superior.

  2. 2

    Codifica el cuadro de texto con XHTML. Escribe el código de la caja de texto y colócalo dentro del cuerpo de la etiqueta. En el siguiente ejemplo, se ha creado un nuevo cuadro de texto div. El div contiene texto que se ha envuelto en las etiquetas paragraph (párrafo):

    <div> <p>Este es el texto que aparecerá dentro del cuadro de texto. </p> </div>

  3. 3

    Da estilo al cuadro de texto con una nueva clase CSS. Coloca la regla CSS entre las etiquetas head del documento. Esta clase CSS puede personalizar el tamaño de la caja de texto, poner un borde alrededor del cuadro de texto y establecer el relleno o el espacio entre el borde y el texto. Consideremos el siguiente ejemplo de código. Este código da estilo a un cuadro de texto de 250 pixeles por 250 pixeles. Establece un borde sólido de tres pixeles alrededor de la caja. Y, establece un espacio de 10 pixeles de relleno dentro del borde. <style> .textBox {

    height:250px; width:250px; border-style: solid; border-size: 3px; padding: 25px;

    } </style>

  4. 4

    Modifica la propiedad overflow. La propiedad overflow indica al navegador de Internet cómo manejar el texto desbordado. La propiedad acepta cinco valores diferentes. El valor visible permite que el texto desbordado se muestre fuera del cuadro de texto y sea visible para el usuario. El ajuste oculto esconde el texto de exceso. Tanto el valor de desplazamiento y, en la mayoría de los casos el valor auto colocan una barra de desplazamiento al lado del cuadro de texto haciendo que éste se desplace. El valor Inherit o herencia indica que la propiedad hereda el valor de desbordamiento de su elemento principal. Este código de ejemplo se ajusta para contener una propiedad de desbordamiento con un valor de desplazamiento. El cuadro de texto ahora será desplazable.

    <style> .textBox { height:250px; width:250px; border-style: solid; border-size: 3px; padding:25px; overflow: scroll; } </style>

  5. 5

    Asigna la clase CSS a tu cuadro de texto. El código de ejemplo asigna la clase CSS .textBox al código XHTML:

    <div class=”textBox”> <p>Este es el texto que aparecerá dentro del cuadro de texto. </p> </div>

Consejos y advertencias

  • Adobe ofrece una extensión de Scrollbar Styler Dreamweaver. Ésta se integra con Dreamweaver. Permite a los usuarios personalizar la apariencia de la barra de desplazamiento. La extensión puede ser comprada en el sitio web de Dreamweaver por US$5.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles