NIWO - nl.internet.www.ontwerpFAQ

WDG Webontwerp FAQ deel 6: Weergave-effecten

  1. Hoe maak ik een aangepaste lijn?
  2. Hoe maak ik een lijst met aangepaste bullets?
  3. Waar kan ik een "hit counter" (bezoekteller) verkrijgen?
  4. Hoe geef ik de huidige datum of tijd weer in mijn document?
  5. Hoe krijg ik een lopende tekst in de status balk?
  6. Hoe lijn ik tekst of afbeeldingen rechts uit?
  7. Hoe verwijder ik de ruimte rondom/tussen mijn afbeeldingen?
  8. Hoe laat ik de eerste regel van mijn alinea inspringen?
  9. Hoe laat ik een blok tekst inspringen?
  10. Hoe verwijder ik de marges rondom mijn pagina?
  11. Hoe maak ik een pagina-einde?
  12. Hoe stel ik lettertypes in mijn webpagina's in?
  13. Hoe kan ik kleuren aangeven?
  14. Hoe verander ik de kleur van een stuk tekst?
  15. Hoe kan achtergrondafbeeldingen aangeven?
  16. Hoe krijg ik een vastgezette achtergrondafbeelding?
  17. Hoe krijg ik een niet-herhalende achtergrondafbeelding?
  18. Hoe krijg ik een aangepast pictogram wanneer mensen mijn site bookmarken?

6.1. Hoe maak ik een aangepaste lijn?

De beste mogelijkheid is waarschijnlijk het gebruik van een gecentreerde IMG met een lijn van "--" tekens als ALT-tekst:

<P ALIGN=center><IMG SRC="custom-line.gif" ALT="--------------------"></P>

Voor een experimentele maar wat elegantere aanpak, kun je over "CSS1 and the Decorative HR" lezen op /saved/~flavell/www/hrstyle.html.

[Inhoudsopgave]

6.2. Hoe maak ik een lijst met aangepaste bullets?

Voor aangepaste bullets zijn er verschillende methodes, geen van allen echt bevredigend:

  • Gebruik de list-style property van Cascading stylesheets. Dit zou de voorkeursmethode moeten zijn voor het gebruik van aangepaste bullets, maar dit wordt helaas niet breed ondersteund door browsers. Maar niet-ondersteunende browsers zullen een normale bullet laten zien, zodat het gebruik van deze methode geen problemen oplevert. Zie http://www.rc.tudelft.nl/mirhtml/css/css.htm> voor meer informatie over stylesheets.
  • Gebruik een <DL> met <DD> -tags met voorafgaande afbeeldingen (met ALIGN en een geschikte ALT-tekst) en geen <DT>; dit zal niet zo mooi zijn als een "echte" lijst.
  • Gebruik een tabel met twee kolommen, met de bullets in de linker kolom en de tekst in de rechter. Omdat browsers niets laten zien voordat de hele tabel is ingeladen, kan dit langzaam zijn bij lange lijsten.
  • Maak de bullet met het inspringen ingebouwd. Als je bijvoorbeeld een bullet gebruikt die 10 pixels breed en hoog is, maak dan de achtergrond 25 pixels breed (transparant) en plaats de bullet helemaal naar rechts. Dit zorgt voor een 15-pixel inspringing links van de bullet. Hierdoor wordt de byte grootte van het plaatje iets groter, maar omdat het allemaal één kleur is voegt het niet veel toe. Deze methode werkt niet goed met lijst items die groter zijn dan een regel (en vergeet niet dat je niet kunt weten hoe lang een regel zal zijn op het scherm van de bezoeker).

[Inhoudsopgave]

6.3. Waar kan ik een "hit counter" (bezoekteller) verkrijgen?

Een bezoekteller is een klein script of programma dat, telkens als een document wordt benaderd vanaf de server, een nummer ophoogt.

Waarom wil je er een? Als je denkt dat het je zal vertellen hoe vaak jouw documenten worden benaderd, dan heb je het mis. Geen enkele teller kan bezoeken vanaf browser-caches of proxy-caches bijhouden. Sommige tellers gebruiken het inlezen van afbeeldingen om de teller te verhogen; deze tellers negeren bezoeken van tekst-browsers, of van browsers met het inladen van afbeeldingen uitgeschakeld, of van gebruikers die de overdracht hebben onderbroken. Sommige tellers vereisen zelfs toegang tot een site op afstand, die onbereikbaar of overbelast kan zijn, wat een vertraging veroorzaakt bij het weergeven van je documenten.

De meeste webservers houden een logboek bij van bezoeken aan documenten die opgeslagen zijn op de server. Deze 'logs' kunnen worden bewerkt om informatie te verkrijgen over het *relatieve* aantal bezoeken over een langere periode. Er is geen reden om dit getal op te presenteren aan je bezoekers, omdat zij geen referenties hebben om dit getal mee te vergelijken. Niet alle dienstverleners geven toegang tot server logs, maar velen hebben scripts die informatie geven over bezoek aan een bepaald document. Raadpleeg je systeembeheerder of dienstverlener voor details.

Teller-diensten en informatie zijn beschikbaar vanaf Yahoo's lijst met tellers: http://dir.yahoo.com/Computers_and_Internet/Internet/World_Wide_Web/Programming/Access_Counters/

Een bespreking van de beperkingen van webverkeerstatistieken is te vinden op http://www.cranfield.ac.uk/docs/stats/

[Inhoudsopgave]

6.4. Hoe geef ik de huidige datum of tijd weer in mijn document?

Met 'server-side includes'. Vraag aan je webmaster of dit wordt ondersteund, en wat de exacte syntax is voor jouw server. Maar dit zal de lokale tijd op de server weergeven, niet de tijd bij de gebruiker. En als het document is gecached, dan zal de datum na verloop van tijd natuurlijk verkeerd zijn. JavaScript kan worden gebruikt voor de lokale tijd van de gebruiker, maar nogmaals, aangezien de meeste mensen al een of meer klokken op hun scherm hebben, waarom nog eentje erbij?

Als je van plan bent de huidige datum of tijd op je pagina's te plaatsen, met behulp van een CGI, JavaScript of VBScript, tel tot tien en bedenk dat het netwerkbronnen verbruikt, de laadtijd van je pagina doet toenemen en goede caching voorkomt. Als je denkt dat het echt nodig is, bijvoorbeeld om lezers te informeren over de up-times van een FTP-server, prima, ga je gang. Maar als, aan de andere kant, de enige reden is 'het ziet er cool uit!' - denk dan nog eens na.

[Inhoudsopgave]

6.5. Hoe krijg ik een lopende tekst in de status balk?

Dit is geen HTML-vraag; het wordt gedaan met JavaScript. Bekijk een pagina die het heeft, en kopieer het script vanuit de bron.

Dit script heeft twee grote problemen. Ten eerste: gewoonlijk gebruikt het script ergens de decrement operator (c--). De "--" tekst in een commentaar sluit dit commentaar af in sommige browsers, waardoor je code kan "lekken". Hetzelfde geldt voor ">".

Ten tweede, bedenk dat veel mensen dit zelfs erger dan <BLINK> vinden, en dat het ook de status informatie onderdrukt die normaal gesproken in de statusbalk verschijnt. Het belemmert mensen in het zien waar een link naar toe gaat.

[Inhoudsopgave]

6.6. Hoe lijn ik tekst of afbeeldingen rechts uit?

Je kan het ALIGN=right attribuut gebruiken met paragrafen, divisies en headers, net zoals je align=center gebruikt om gecentreerde paragrafen te maken en dergelijke. Dit zorgt voor het rechts uitlijnen van de tekst (links gebroken).

Misschien wil je eigenlijk de tekst uitvullen, waarmee zowel op de linker- als op de rechterkantlijn is uitgelijnd, zodat alle regels even lang zijn. (Dit wordt soms onterecht "rechts uitvullen" genoemd.) Er is geen manier om tekst uit te vullen in HTML 3.2, maar het kan wel met een CSS1 stylesheet met "text-align: justify". (Voordat je dit doet, een voorbehoud: alhoewel uitgevulde tekst er mooier uit kan zien, blijkt uit analyse van menselijke eigenschappen dat links uitlijnen, rechts gebroken, in de praktijk makkelijker te lezen en te begrijpen is.)

Voor afbeeldingen kan je <IMG ALIGN=right SRC="..." ALT="..."> gebruiken voor de lopende tekst. De afbeelding zal gaan zweven aan de rechterkantlijn, en de lopende tekst zal er omheen vloeien. Vergeet niet om <BR CLEAR=right> of <BR CLEAR=all> te gebruiken om het einde van de tekst aan te geven die op deze manier beïnvloed wordt.

[Inhoudsopgave]

6.7. Hoe verwijder ik de ruimte rondom/tussen mijn afbeeldingen?

Zorg ervoor, als de afbeeldingen zich in en tabel bevinden, dat de BORDER-, CELLSPACING- en CELLPADDING-attributen op 0 staan. Extra ruimte tussen afbeeldingen wordt ook vaak veroozaakt door witruimte ronden om <IMG>-tag in de markup. Vervang bijvoorbeeld dit:

<TD ...>
<IMG SRC=... ALT=...>
<IMG SRC=... ALT=...>
</TD>

door dit:

<TD ...><IMG SRC=... ALT=...><IMG SRC=... ALT=...></TD>

Volgens de laatste specificaties zouden deze twee hetlzefde moeten betekenen. Maar gebruikelijke browsers houden zich in dit geval niet aan de specificaties.

[Inhoudsopgave]

6.8. Hoe laat ik de eerste regel van mijn alinea inspringen?

Gebruik een stylesheet met de volgende regel:

P { text-indent: 5% }

Zie http://www.rc.tudelft.nl/mirhtml/css/css.htm> voor meer informatie over stylesheets.

[Inhoudsopgave]

6.9. Hoe laat ik een blok tekst inspringen?

Gebruik een stylesheet om een linkermarge voor het hele document of een deel daarvan in te stellen:

  /* Het hele document */
  BODY { margin-left: 20% }

  /* Een deel van een document met CLASS="foo" */
  .foo { margin-left: 15% }

Zie http://www.rc.tudelft.nl/mirhtml/css/css.htm> voor meer informatie over stylesheets.

[Inhoudsopgave]

6.10. Hoe verwijder ik de marges rondom mijn pagina?

De meest geëigende manier is het voorstellen van marges met een stylesheet. Cascading Style Sheets gebruiken de margin-eigenschap om margen vast te stellen. Meer informatie over Cascading Style Sheets kan worden gevonden op: http://www.rc.tudelft.nl/mirhtml/css/css.htm
Meer informatie over de margin-eigenschap van CSS kan worden gevonden op: http://www.rc.tudelft.nl/mirhtml/css/margin.htm

Met fabrikant-eigen HTML-uitbreidingen, kunt u de marges voor bepaalde browsers instellen. Internet Explorer 3+ ondersteund de TOPMARGIN- en LEFTMARGIN-attributen. Internet Explorer 4+ voegde ondersteuning toe voor de BOTTOMMARGIN- en RIGHTMARGIN-attributen. Navigator 4+ ondersteunt de MARGINWIDTH- en MARGINHEIGHT-attributen. De meeste andere browsers negeren deze fabrikant-eigen uitbreidigen.

CSS en fabrikant-eigen HTML kunnen worden gecombineerd. Het volgende is in de meeste browse-situaties effectief:

<body marginheight="0" topmargin="0" vspace="0" marginwidth="0" leftmargin="0" hspace="0" style="margin:0">

Meer informatie is beschikbaar op http://www.cs.tut.fi/~jkorpela/www/margins.html

Merk ook op dat Navigator altijd rechts ruimte overlaat voor een schuifbalk, maar deze alleen op het scherm tekent als het document lang genoeg is om schuiven nodig te hebben. Als het document geen schuiven nodig heeft, blijft er een rechter"marge" achter die niet kan worden verwijderd.

[Inhoudsopgave]

6.11. Hoe maak ik een pagina-einde?

Pagina-eindes zijn mogelijk met Cascading stylesheets, Level 2, maar dat wordt niet goed ondersteund door browsers. Zie http://www.w3.org/TR/REC-CSS2/page.html#page-breaks voor informatie over CSS2 pagina-eindes.

In het algemeen geldt, dat pagina-eindes niet toepasselijk zijn op het web omdat wat voor jou een leuk pagina-einde is, met jouw lettertype en -grootte, voor mij een onhandig pagina-einde kan zijn, met mijn lettertype en -grootte.

Als je een netjes opgemaakt afdrukexemplaar moet hebben van je HTML-documenten, kun je ook overwegen om speciaal daarvoor gemaakte hulpmiddelen te gebruiken, in plaats van de Afdrukfunctie van de browser. Zo maakt html2ps netjes opgemaakte PostScript output van HTML-documenten, en gebruikt HTML Scissor speciale HTML-commentaren om pagina-einders te suggereren.

[Inhoudsopgave]

6.12. Hoe stel ik lettertypes in mijn webpagina's in?

Als je wilt dat anderen jouw webpagina met een bepaald lettertype zien, is de meest geschikte manier hiervoor het voorstellen van de lettertype-weergave met een stylesheet. Cascading Style Sheets gebruikt de font-family-eigenschap om lettertypes op te geven. Meer informatie over Cascading Style Sheets is te vinden op: http://www.rc.tudelft.nl/mirhtml/css/css.htm
Meer informatie over de CSS-eigenschap font-family is te vinden op: http://www.rc.tudelft.nl/mirhtml/css/font.htm#font-family

In HTML kan ook het BASEFONT-element worden gebruikt om een bepaald lettertype voor te stellen voor het gehele document. Het BASEFONT-element beïnvloed het gehele document. Meer informatie over het BASEFONT-element is te vinden op: http://www.handleidinghtml.nl/html/elementen/basefont.html

In HTML kan ook het FONT-element worden gebruikt om een bepaald lettertype voor te stellen. Het FONT-element moet binnen elke blok-element worden herhaald, aangezien het zelf alleen maar inline (tekst-niveau) elementen kan bevatten. Gebruik van het FONT-element brengt meerdere bruikbaarheids- en toegankelijkheidsproblemen met zich mee, zie: http://www.mcsr.olemiss.edu/%7Emudws/font.html
Meer informatie over het FONT-element is te vinden op: http://www.handleidinghtml.nl/html/elementen/font.html

Met beide methodes lopen auteurs het risico dat het systeem van een lezer een lettertype heeft met dezelfde naam, dat heel anders is. "Chicago" kan bijvoorbeeld een leuk tekst-lettertype, of een display-lettertype met letters gemaakt met "kogelgaten", of een dingbat-lettertype met plaatjes van gebouwen zijn (voor het maken van skylines).

Verder moeten auteurs ofwel een lettertypes (of een groep van verwante lettertypes) gebruiken die algemeen beschikbaar zijn op veel systemen, of dynamische fonts aanbieden aan hun lezers. Als het lettertype niet is geïnstalleerd op het systeem van de lezer, of de lezer haalt het dynamische lettertype niet binnen, dan krijgt deze een standaard lettertype te zien. Sommige browsers kunnen een vervangend lettertype gebruiken dat minder leesbaar is dan hun normale standaard lettertype, indien het voorgestelde lettertype niet is gevonden.

Netscape en Microsoft hebben concurrende formaten voor dynamische lettertypes ontwikkeld. TrueDoc werkt met Navigator 4+ en (met een plug-in) met Internet Explorer 4+. OpenType werkt met Internet Explorer 4+. Zie voor meer informatie over TrueDoc (inclusief de WebFont Maker): http://www.truedoc.com/webpages/intro/
Zie voor meer informatie over OpenType (inclusief Microsoft's Web Embedding Fonts Tool (WEFT)) http://www.microsoft.com/typography/web/

Zie voor practisch advies met betrekking tot het gebruik van lettertypes op het web </faq/artikelen/fontstyle.html

[Inhoudsopgave]

6.13. Hoe kan ik kleuren aangeven?

Als je wilt dat anderen uw webpagina met bepaalde kleuren zien, is de meest geschikte manier hiervoor het voorstellen van de kleuren met een stylesheet. Cascading Style Sheets gebruiken de eigenschappen color en background-color om tekst- en achtergrondkleur op te geven. Om tegenstrijdigheden tussen de standaard-kleuren van de lezer en de door de auteur opgegeven kleuren te voorkomen, dienen deze twee eigenschappen altijd tegelijk te worden gebruikt. Meer informatie over Cascading Style Sheets is te vinden op: http://www.rc.tudelft.nl/mirhtml/css/css.htm
Meer informatie over de CSS-eigenschap color is te vinden op: http://www.rc.tudelft.nl/mirhtml/css/color.htm#color
Meer informatie over de CSS-eigenschap background-color is te vinden op: http://www.rc.tudelft.nl/mirhtml/css/color.htm#background-color

In HTML kun je kleuren voorstellen met de TEXT-, LINK-, VLINK- (bezochte link), ALINK- (actieve link) en BGCOLOR- (achtergrondkleur) -attributen van het BODY-element. Als een van hen wordt gebruikt, dan moeten ze allemaal worden gebruikt om te verzekeren dat de standaardkleuren van de lezer niet door de kleuren die door de auteur zijn opgegeven heen lopen. Hier volgt een voorbeeld:

<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#000080">

Meer informatie over het BODY-element is te vinden op: http://www.handleidinghtml.nl/html/elementen/body.html

Auteurs moeten er niet van uit gaan dat de opgegeven kleuren worden gebruikt, aangezien browsers het voor de gebruikers mogelijk maken, om de in documenten opgegeven kleuren uit te schakelen.

[Inhoudsopgave]

6.14. Hoe verander ik de kleur van een stuk tekst?

De meest geschikte manier is het gebruiken van toepasselijke structurele markup, en de gewenste kleur op te geven met een stylesheet. Als je een kleur alleen in bepaalde gevallen wilt opgeven voor een element, kun je een 'class' gebruiken om aan te geven welke gevallen dat zijn. In het volgende CSS-voorbeeld is opgegeven dat benadrukte tekst met de 'class' "speciaal" groen moet zijn (met een witte achtergrond):

EM.speciaal { color: green; background: white; }

Wanneer de weergave plaatsvind met deze CSS-regels, zal de benadrukte tekst in het volgende HTML-voorbeeld in het groen worden weergegeven:

normale tekst <EM CLASS="speciaal">nebadrukte tekst</EM> normale tekst

Meer informatie over Cascading Style Sheets is te vinden op: http://www.rc.tudelft.nl/mirhtml/css/css.htm

In HTML kan ook het FONT-element worden gebruikt om kleuren voor te stelllen. Gebruik van het FONT-element brengt meerdere gebruiks- en toegankelijkheidsproblemen met zich mee, zie: http://www.mcsr.olemiss.edu/%7Emudws/font.html
Meer informatie over het FONT-element is te vinden op: http://www.handleidinghtml.nl/html/elementen/font.html

[Inhoudsopgave]

6.15. How can I specify background images?

Als je wilt dat anderen jouw webpagina zien met een bepaalde achtergrondafbeelding, is de meest geschikte manier hiervoor het voorstellen van de achtergrond met een stylesheet. Cascading Style Sheets gebruiken de eigenschap background-image om een achtergrondafbeelding op te geven. Meer informatie over Cascading Style Sheets is te vinden op: http://www.rc.tudelft.nl/mirhtml/css/css.htm
Meer informatie over de CSS-eigenschap background-image is te vinden op: http://www.rc.tudelft.nl/mirhtml/css/color.htm#background-image

Met HTML kun je een gestapelde achtergrondafbeelding voorstellen met het BACKGROUND-attribuut van het BODY-element. Hier volgt een voorbeeld:

<body background="afbeeldingsbestand.gif" bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#000080">

Meer informatie over het BODY-element is te vinden op: http://www.handleidinghtml.nl/html/elementen/body.html

Als je een achtergrondafbeelding opgeeft, moet je ook tekst-, link-, en achtergrondkleuren opgeven (zie het antwoord op de vraag "Hoe kan ik kleuren aangeven?") aangezien de standaardkleuren van de lezer mogelijk niet genoeg contrast geven tegenover jouw achtergrondafbeelding. De achtergrondkleur zal worden toegepast door degenen die geen afbeeldingen laden. Auteurs moeten er niet rekenen op de opgegeven achtergrondafbeelding, aangezien browsers het voor de gebruikers mogelijk maken om het laden van afbeeldigen uit te zetten, of om in documenten opgegeven achtergronden uit te schakelen.

[Inhoudsopgave]

6.16. Hoe krijg ik een vastgezette achtergrondafbeelding?

Gebruik een stylesheet met de volgende regel:

body { color: black; background: white url(foo.gif) fixed }

Merk op dat de fixed eigenschap, die in het bovenstaande stylesheet is gebruikt, wordt ondersteund door Internet Explorer 3+, Netscape Navigator 5+, en andere browsers. Het proprietary BGPROPERTIES=fixed attribuut daarentegen wordt alleen ondersteund door Internet Explorer 3+.

[Inhoudsopgave]

6.17. Hoe krijg ik een niet-herhalende achtergrondafbeelding?

Gebruik een stylesheet met de volgende regel:

body { color: black; background: white url(foo.gif) no-repeat }

[Inhoudsopgave]

6.18. Hoe krijg ik een aangepast pictogram wanneer mensen mijn site bookmarken?

Dit is een mogelijkheid die door Internet Explorer 5.x is geïntroduceerd. De browser vraagt standaard een bestand genaamd "favicon.ico" aan, op hetzelfde basis-URL als het document dat wordt gebookmarkt. Als het dit bestand niet kan vinden, zal het ook nog eens een poging doen in de rootdirectory van je site. Webauteurs kunnen een ander pad opgeven voor het pictogrambestand met een <LINK>-element zoals dit: <LINK REL="SHORTCUT ICON" HREF="/padnaam/bestandsnaam.ico">

De afbeelding moet 16 bij 16 pixels groot zijn, in het Windows pictogram-bestandsformaat. Als je grafische programma het Windows pictogram-bestandsformaat niet ondersteunt, kun je een hulpmiddel gebruiken zoals de gratis Java-gebaseerde pictogram-generator op http://www.favicon.com/ om je pictogram te converteren/creeëren.

Zie voor meer informatie http://msdn.microsoft.com/workshop/Author/dhtml/howto/ShortcutIcon.asp of zoek naar "favicon.ico" op http://msdn.microsoft.com/workshop/essentials/versions/ICPIE5.asp

[Inhoudsopgave]