Tecnología

Inicio

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

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


Un diseñador web a veces coloca texto dentro de un cuadro de texto desplazable. Esto limita el texto a un cierto espacio dentro de la disposición de su página. Un cuadro de texto desplazable puede albergar cualquier tamaño de texto, sin alterar la posición de los otros elementos de la página. Muchos diseñadores utilizan el popular programa de Adobe Dreamweaver para escribir las reglas del código XHTML y CSS que crean y el estilo de la caja de texto.

Instrucciones

1 Abra el documento XHTML y cambie a la vista Código de Dreamweaver. El botón de vista de código se encuentra en la parte situada más a la izquierda de la barra de menú superior.

2 Código del cuadro de texto con XHTML. Escribir el código para su cuadro de texto y colocarlo dentro del cuerpo de la etiqueta. En el siguiente ejemplo, un nuevo div cuadro de texto ha sido creado. El div contiene texto que ha sido envuelta en las etiquetas de párrafo:

<Div>

<P> Este es el texto que aparecerá en el interior del cuadro de texto.

</ P>

</ Div>

3 Estilo del cuadro de texto con una nueva clase CSS. Coloque la regla CSS entre las etiquetas de la cabeza de su documento. Esta clase CSS puede personalizar el tamaño del cuadro de texto, colocar un borde alrededor del cuadro de texto y establecer el relleno o el espacio entre el borde y el texto. Considere el siguiente código de ejemplo. Este código estilos un cuadro de texto de 250 píxeles por 250 píxeles. Se coloca un sólido frontera de tres píxeles alrededor de la caja. Y, un lapso de 10 píxeles de acolchado se ha fijado en el interior de la frontera.

<Style>

.caja de texto {

altura: 250px;

Anchura: 250px;

Border-style: sólido;

frontera-size: 3px;

padding: 25px;

}

</ Style>

4 Personalizar la propiedad overflow. La propiedad de desbordamiento indica al navegador de Internet cómo manejar texto desbordado. El establecimiento acepta cinco valores diferentes. El valor visibles dejaría que el derrame de texto desbordado fuera de la caja de texto y permanecer visible para el usuario. El ajuste oculto oculta el texto exceso. El valor de desplazamiento y, en la mayoría de los casos el valor auto tanto colocan una barra de desplazamiento al lado del cuadro de texto haciendo que el cuadro de texto desplazable. valor heredar dice, la propiedad hereda la configuración de desbordamiento de su elemento padre. Este código de ejemplo se ha ajustado para contener un desbordamiento de la propiedad con un valor de desplazamiento. El cuadro de texto será ahora desplazable.

<Style>

.caja de texto {

altura: 250px;

Anchura: 250px;

Border-style: sólido;

frontera-size: 3px;

padding: 25px;

overflow: desplazarse;

}

</ Style>

5 Asignar la clase CSS a la caja de texto. El código de ejemplo asigna la clase .textBox CSS para el código XHTML:

<Div class = "cuadro de diálogo">

<P> Este es el texto que aparecerá en el interior del cuadro de texto.

</ P>

</ Div>

Consejos y advertencias

  • Adobe ofrece una extensión de la barra de desplazamiento Styler Dreamweaver. Se integra con Dreamweaver. Permite a los usuarios personalizar la apariencia de la barra de desplazamiento. La extensión puede ser adquirido en el sitio Web de Dreamweaver por $ 5.