Un Web designer a volte inserisce il testo all'interno di una casella di testo scorrevole. Questo limita il testo di un certo spazio all'interno del layout della sua pagina. Una casella di testo scorrevole può ospitare qualsiasi dimensione del testo, senza interrompere il posizionamento degli altri elementi nella pagina. Molti designer utilizzano il popolare programma di Adobe Dreamweaver per scrivere codice XHTML e CSS che creano le regole stile casella di testo.
Istruzioni
1
Aprire il documento XHTML e passare alla visualizzazione codice di Dreamweaver. Il pulsante Visualizza codice è al lato di estrema sinistra della barra dei menu in alto.
2
Codice casella di testo con XHTML. Scrivere il codice per la casella di testo e inserirlo all'interno del tag body. Nell'esempio seguente, è stato creato un nuovo div di casella di testo. Il div contiene testo che è stato avvolto in tag di paragrafo:
< div >
< p > questo è il testo che verrà visualizzato all'interno della casella di testo.
</p >
< / div >
3
Stile della casella di testo con una nuova classe CSS. Posto la regola CSS tra i tag head del documento. Questa classe CSS possa personalizzare le dimensioni della casella di testo, inserire un bordo intorno alla casella di testo e stabilire l'imbottitura o lo spazio tra il bordo e il testo. Si consideri il seguente codice di esempio. Questo codice stili una casella di testo di 250 x 250 pixel. Inserisce un bordo solido di tre pixel intorno alla scatola. E, un arco di 10 pixel di riempimento è stato impostato all'interno del confine.
< style >
.textBox () {
Altezza: 250px;
Larghezza: 250px;
border-style: solid;
dimensione del bordo: 3px;
Imbottitura: 25px;
}
< / stile >
4
Personalizzare la proprietà overflow. La proprietà overflow indica al browser di Internet come gestire il testo in eccesso. La proprietà accetta cinque valori diversi. Il valore visibile avrebbe lasciato il testo in eccesso fuoriesca la casella di testo e rimangono visibili all'utente. L'impostazione nascosto nasconde il testo in eccesso. Il valore di scorrimento e nella maggior parte dei casi il valore di auto sia inserire una barra di scorrimento accanto alla casella di testo che rende la casella di testo scorrevole. Ereditano valore indica la proprietà di ereditare l'impostazione overflow dal relativo elemento padre. Questo esempio di codice è stato adattato per contenere una proprietà overflow con un valore di scorrimento. La casella di testo sarà scorrevole.
< style >
.textBox () {
Altezza: 250px;
Larghezza: 250px;
border-style: solid;
dimensione del bordo: 3px;
Imbottitura: 25px;
overflow: scroll;
}
< / stile >
5
Assegnare la classe CSS alla casella di testo. Nell'esempio di codice assegna la classe CSS di .textBox per il codice XHTML:
< div class = "textBox" >
< p > questo è il testo che verrà visualizzato all'interno della casella di testo.
</p >
< / div >
Consigli & Avvertenze
- Adobe offre un'estensione di Dreamweaver Styler Scrollbar. Si integra con Dreamweaver. Esso consente agli utenti di personalizzare l'aspetto della barra di scorrimento. L'estensione può essere acquistato dal sito Web di Dreamweaver per $5.