Als u Opera gebruikt, druk op F11 voor de OperaShow versie. Gebruik PgUp en PgDn om te bladeren tussen de slides.

Switch tussen stijlen door: 'Beeld > Paginastijl / Stijl > ...' te kiezen.

Slideshowpresentaties met XHTML en CSS

door Koen De Vreeze

Projector Slideshow presentaties maken zonder gebruik te maken van het proprietaire Powerpoint formaat en toch zowat overal te gebruiken is. Ja het kan, met XHTML en CSS!

Types

TypeClientTechniek
OSF: Opera Show FormatOperaXHTML1 + CSS2.1
S5: Simple Standards-Based Slide Show SystemBijna elke browserXHTML1 + CSS en JavaScript
HTML SlidyBijna elke browserHTML + CSS en JavaScript

Opera Show, is de simpelste versie en S5 is er compatible mee. HTML Slidy gaat meteen naar slideshow modus. S5 doet hetzelfde behalve in Opera.

Deze presentatie lijkt op het OSF standaard maar wijkt af op sommige vlakken.

Wat zijn de vereisten?

Werking tijdens presenteren

Enkel van toepassing op OperaShow

Hoe maak je het?

  1. Maak gewoon een webpagina met je afbeeldingen en teksten erin.
  2. Deel je tekst in slides op door de delen in divs te steken.
  3. Voeg in je css een sectie @media projection toe.
  4. Plaats daarin div {page-break-after: always;}

Meer over paged media (page-break, ...) op de W3C CSS2 specificatie

Voorbeeld

html:

<div class="slide">
	<h1>Welkom</h1>
	<p>Dit is de eerste slide</p>
</div>
<div class="slide">
	<h1>Slot</h1>
	<p>Dankwoordje</p>
</div>

Bijbehorende css:

@media projection {
	div.slide {
		page-break-after: always;
	}
}

Bekijk de broncode van deze slideshow voor een uitgebreider voorbeeld.

Voor- en nadelen

Voordelen

Nadelen

Meer informatie:

Koen De Vreeze © 2006