Come fare una casella di testo scorrevole con XHTML in Dreamweaver WC3

April 14

Come fare una casella di testo scorrevole con XHTML in Dreamweaver WC3


Un web designer a volte pone testo all'interno di una casella di testo scorrevole. Questo limita il testo di un certo spazio entro il layout della propria pagina. Una casella di testo scorrevole in grado di ospitare qualsiasi dimensione del testo, senza interrompere il posizionamento degli altri elementi della pagina. Molti designer usano il popolare programma di Adobe Dreamweaver per scrivere le regole del codice XHTML e CSS che creano e lo stile la casella di testo.

istruzione

1 Aprire il documento XHTML e passare alla vista Codice di Dreamweaver. Il pulsante di visualizzazione del codice si trova sul lato di estrema sinistra della barra dei menu in alto.

2 Codice della casella di testo con XHTML. Scrivere il codice per la casella di testo e posizionarlo all'interno del tag body. Nel seguente esempio, è stata creata una nuova casella di testo div. Il div contiene il testo che è stato avvolto in tag di paragrafo:

<Div>

<P> Questo è il testo che apparirà all'interno della casella di testo.

</ P>

</ Div>

3 Lo stile casella di testo con una nuova classe CSS. Posizionare la regola CSS tra i tag head del documento. Questa classe CSS può personalizzare la dimensione della casella di testo, inserire un bordo intorno alla casella di testo e stabilire imbottitura o lo spazio tra il bordo e il testo. Si consideri il seguente codice di esempio. Questo codice stili di una casella di testo di 250 pixel per 250 pixel. Si pone un confine di tre pixel solido attorno alla scatola. E, un arco di 10 pixel di imbottitura è stata impostata all'interno del confine.

<Style>

.casella di testo {

altezza: 250px;

width: 250px;

border-style: solido;

border-size: 3px;

padding: 25px;

}

</ Style>

4 Personalizzare la proprietà overflow. La proprietà overflow dice al browser di Internet come gestire testo in eccesso. La struttura accetta cinque valori diversi. Il valore visibile avrebbe lasciato la fuoriuscita di testo in eccesso fuori della casella di testo e rimanere visibili per l'utente. L'impostazione nascosta nasconde il testo in eccesso. Il valore di scorrimento e nella maggior parte dei casi il valore auto sia posto una barra di scorrimento accanto alla casella di testo rendendo la casella di testo scorrevole. Eredita valore indica la proprietà di ereditare l'impostazione di overflow dal suo elemento genitore. Questo codice di esempio è stato rettificato per contenere una proprietà overflow con un valore di scorrimento. La casella di testo sarà ora scorrevole.

<Style>

.casella di testo {

altezza: 250px;

width: 250px;

border-style: solido;

border-size: 3px;

padding: 25px;

overflow: scroll;

}

</ Style>

5 Assegnare la classe CSS per la vostra casella di testo. Il codice di esempio assegna la classe CSS .textBox al codice XHTML:

<Div class = "di testo">

<P> Questo è il testo che apparirà all'interno della casella di testo.

</ P>

</ Div>

Consigli e avvertenze

  • Adobe offre un'estensione Scrollbar Styler Dreamweaver. Si integra con Dreamweaver. Esso consente agli utenti di personalizzare l'aspetto della barra di scorrimento. L'estensione può essere acquistato dal sito Dreamweaver per $ 5.