Stap 4: Teksten in alle vormen en
kleuren
Toen we het over het gebruik van
lettertypes hadden, hebben we al enkele
mogelijkheden van de <FONT>-tag
besproken. Met enkele simpele attributen
kun je zowel de kleur als de weergavevorm
en de grootte van het lettertype bepalen.
Enkele voorbeelden :
We
veranderen de grootte
van het
lettertype.
<font face="Comic Sans MS"
size="3">We </font>
<font face="Comic Sans MS"
size="4">veranderen</font>
<font face="Comic Sans MS"
size="5">de</font>
<font face="Comic Sans MS"
size="6">grootte</font>
<font face="Comic Sans MS"
size="5">van</font>
<font face="Comic Sans MS"
size="4">het</font>
<font face="Comic Sans MS"
size="3">lettertype.</font>
Of misschien
liever
de kleuren ?
<font face="Comic Sans MS"
size="5"><font
color="#FF9966">Of</font>
<font
color="#00FF00">misschien</font>
<font
color="#66CCFF">liever</font>
<font
color="#FF00FF">de</font>
<font
color="#FF0000">kleuren</font>
<font color="#0000FF">?</font>
Je voelt al aan waar de beperking van
deze effecten moeten gesitueerd worden: in
de lettertypes die de gebruiker op zijn
computer heeft. Daarom maken designers
vaak gebruik van teksten die bij iedere
gebruiker op de juiste wijze worden
weergegeven. Ze doen dat door afbeeldingen
te creëren die lettertekens en tekst
bevatten. Zo kent de creativiteit geen
grenzen meer, maar is men wel aangewezen
op speciale programma's om de tekst aan te
maken. Meestal gebruik je voor
teksteffecten een grafisch programma. Er
zijn er een heleboel. Op iedere
sharewaresite vind je er minstens tien
verschillende. Uit de grote
verscheidenheid vermelden er hier dan ook
maar enkele :
Paintshop
pro |
http://www.corel.com/
Een hypervolledig pakket met
onbegrensde mogelijkheden. Vereist
wel enig inzicht in het grafisch
aanmaken van teksten. Shareware. De
oudere versies van PaintShop (3.12
en 4.1) waren vroeger helemaal
gratis. Misschien vind je zo'n
gratis exemplaar via http://www.shareware.com
? |
Adobe
Photoshop |
http://www.adobe.com/products/photoshop/index.html
- Een topprogramma met alle denkbare
opties. PhotoShop is een commercieel
programma en is niet goedkoop, maar
je kunt er zowat alles mee doen. |
MS
Paint |
Standaard meegeleverd
met Windows. Vrij beperkt van
mogelijkheden, maar voor
routineklussen erg geschikt. |
FontTwister |
http://www.neuber.com/twister/index.html
- Eenvoudig te bedienen,
fantastische effecten, shareware. |
Je kunt ook on-line via het internet
terecht : op een aantal sites kun je in
beperkte mate zelf teksten met effecten
aanmaken. Hieronder vermelden we een site
die speciale teksteffecten aanlevert :
Cooltext |
http://www.cooltext.com
- Biedt de mogelijkheid logo's en
buttons samen te stellen, die je na
het beëindigen van de werkzaamheden
kunt downloaden. Ongeschikt voor
lange teksten. |
Toch biedt het gebruik maken van tekst in
de vorm van afbeeldingen heel wat nadelen.
Telkens als de tekst moet gewijzigd
worden, moet er immers een nieuwe
afbeelding aangemaakt worden: een moeizame
en onflexibele werkwijze. Bovendien hebben
afbeeldingen meer tijd nodig om ingeladen
te worden dan HTML-teksten. Het vedient
dus altijd de voorkeur tekst aan te maken
met HTML-codes of CSS Style sheets.
Wat
zijn CSS Style sheets ?
Cascading Style Sheets (CSS) kunnen tussen
de gewone HTML-codes gebruikt worden. Aan
HTML-tags kan een willekeurige opmaak
toegewezen worden, zodat de browser
voorgeschreven krijgt hoe de tag op de
computer van de gebruiker moet vertaald
worden. We geven hieronder een simpel
voorbeeldje van een stijlbestand, dat in
de HEAD-sectie van de HTML-pagina
geplaatst moet worden :
<STYLE
TYPE="TEXT/CSS">
.main {
background-color: #EEE3D8;
color: #8D6235;
font-family: Verdana, Arial, Helvetica,
sans-serif;
font-size: 10px;
font-style: normal;
font-weight: normal;
padding-left: 7px;
}
</STYLE>
Dit bestand geeft telkens er een <P
class="paragraaf">-tag gebruikt wordt
als resultaat de tekstgrootte en -kleur,
fonttype en uitlijning zoals we die op
deze site gebruiken.
We zouden een hele website nodig hebben
om uit te leggen hoe CSS precies werkt.
Dit thema valt dus (voorlopig ?) buiten
het bestek van deze site, maar meer
gegevens kun je online krijgen bij :
|