Hoe maak je een tekstvak waarin kan worden gebladerd met XHTML in Dreamweaver WC3

Hoe maak je een tekstvak waarin kan worden gebladerd met XHTML in Dreamweaver WC3


Een webdesigner plaatst soms de tekst binnen een tekstvak waarin kan worden gebladerd. Dit beperkt de tekst aan een bepaalde ruimte binnen zijn pagina-indeling. Een schuifbaar tekstvak kunt hosten elke grootte van de tekst, zonder te verstoren de positionering van de andere elementen op de pagina. Veel ontwerpers gebruiken de populaire Adobe Dreamweaver-programma om te schrijven van de code XHTML en CSS-regels die maken en stijl in het tekstvak.

Instructies

1

Uw XHTML-document openen en overschakelen naar Dreamweaver codeweergave. De knop van de weergave code is aan de zijkant van de uiterst links van de bovenste menubalk.

2

Het tekstvak met XHTML-code. Schrijven van de code voor het tekstvak en plaats deze binnen de lichaamsmarkering. In het volgende voorbeeld wordt is een nieuwe tekst vak div-element gemaakt. Het div-element bevat tekst die heeft zijn verpakt in alineacodes:

< div >

< p > Dit is de tekst die wordt weergegeven in het tekstvak.

< /p >

< / div >

3

Stijl het tekstvak met een nieuwe CSS-klasse. Plaats de CSS-regel tussen de hoofd-tags van uw document. Deze CSS-klasse kan de grootte van het tekstvak aanpassen, plaatst u een rand rond het tekstvak en schept opvulling of ruimte tussen de rand en de tekst. Overweeg de volgende voorbeeldcode. Deze code stijlen een tekstvak van 250 x 250 pixels. Het legt een stevige rand van de drie pixel rond het vak. En een reeks 10 pixels opvulling is ingesteld binnenkant van de rand.

< style >

.textBox {}

hoogte: 250px;

breedte: 250px;

border-style: solid;

rand-grootte: 3px;

padding: 25px;

}

< / style >

4

Aanpassen van de eigenschap overflow. De eigenschap overflow vertelt de internetbrowser hoe te te behandelen van overlopende tekst. De eigenschap accepteert vijf verschillende waarden. De zichtbare waarde zou laten de overlopende tekst buiten het tekstvak morsen en zichtbaar blijven voor de gebruiker. De verborgen instelling verborgen de overtollige tekst. De waarde van de scroll en in de meeste gevallen de auto waarde beide plaatsen een scrollbar naast het tekstvak maken van het tekstvak waarin kan worden gebladerd. Erven waarde geeft de eigenschap de instelling van de overloop overneemt van het bovenliggende element. Deze voorbeeldcode is aangepast in een eigenschap van de overloop met een waarde van schuifbalken bevatten. Het tekstvak voortaan waarin kan worden gebladerd.

< style >

.textBox {}

hoogte: 250px;

breedte: 250px;

border-style: solid;

rand-grootte: 3px;

opvulling: 25px;

overloop: schuiven;

}

< / style >

5

De CSS-klasse toewijzen aan uw tekstvak. De code van de steekproef wijst de .textBox CSS-klasse toe aan de XHTML-code:

< div class = "textBox" >

< p > Dit is de tekst die wordt weergegeven in het tekstvak.

< /p >

< / div >

Tips & waarschuwingen

  • Adobe biedt een Scrollbar Styler Dreamweaver extensie. Het integreert met Dreamweaver. Op verstrekken verbruiker voor het aanpassen van het uiterlijk van de schuifbalk. De uitbreiding kan worden gekocht bij de Dreamweaver-website voor $5.