Webdesign 101 » Dynamisk HTML » Splash Pages

"Splash Pages" med dynamisk HTML

Denne sektion omfatter et par eksempler på, at man ikke nødvendigvis behøver at gribe til Flash-programmering for at lave effektfulde dynamiske indgangssider - Splash Pages, som de vist hedder i fagsproget.

Fordelen ved at bruge dynamisk HTML er, at en sådan side kan ses af alle browsere, uanset om de har en Shockwave plugin eller ej.

Generelt synes jeg ikke om sådanne Splash Pages. De tjener sjældent noget formål udover at påføre brugerne et museklik mere, eventuelt forsinke dem i deres ærinde på vort websted. Jeg har en lumsk mistanke om, at hovedparten af sådanne sider er skabt af webdesignere, der ønsker at udstille deres kompetence udi Flash programmering - som uheldigvis er det, de fleste griber til, når de får sådanne uartige tanker.

Skal det være, bør sådanne sider absolut laves i dynamisk HTML. Du kan på nettet finde websites (f.eks. Gabocorp og DHTML Guru), der har masser af udmærkede eksempler på dette - også langt flottere end jeg, med min beherskede interesse, kan mande mig op til.

Men...

Der kan være en vis fornuft i tingene, hvis en sådan Splash Page bruges til at underholde brugeren, mens der bag kulisserne foregår noget andet andet. Som f.eks. indlæsningen af en hulens masse grafik.

Kvikguide

"Hemmeligheden" bag de eksempler, du finder i denne sektion, er dette enkle:

Mens siden indlæses, ses kun et dækkende lag ("Covering Layer"). Når alle elementer er indlæst, JavaScript, billeder osv. fyrer onload event handleren, og udløser et script, der skjuler det dækkende lag og viser den egentlige side.

Er der meget grafik på den egentlige side, er det en god idé at lave en separat side med det dækkende lag, og i skjul af dette lave en preload af grafikken, der så er til rådighed når onload event handleren fyrer og dermed skifter til den egentlige side.

Det er disse principper, der ligger bag eksemplerne i denne sektion:

Skjul indlæsningen af grafikken

Den enkleste metode til at underholde brugeren, mens en mængde grafik indlæses, er ved hjælp af et statisk "Covering Layer".

Simpel Splash Page med bogstaver

Mit næste eksperiment udi denne type effekter går ud på at placere et antal bogstaver på skærmen i hurtig takt efter hinanden: Splash Page med bogstaver samt forklaring.

Grafisk Splash Page

Denne har jeg valgt at lave i to udgaver, hvor der automatisk skiftes mellem en Microsoft version og en version til alle andre browsere. Microsoft-versionen anvender de IE-specikke overblændingsfiltre MSIE-version), mens versionen til alle andre browsere blot viser en statisk side med et billede (Grafisk side).

Preload af billederne - visning af statusbjælke

De grafiske effekter virker ikke overbevisende, når de betragtes over en modemforbindelse. Der mangler en preload af billederne, det vil sige, billederne skal indlæses i browserens cache, før siden bliver vist. Til den ende demonstrerer jeg et script, der ikke alene foretager denne preload, men også viser en statusbjælke, der holder brugeren orienteret om, hvor langt processen er henne. Preload med statusbjælke

Hvis du har kigget på nogle af de andre sider i denne sektion, før du kigger på denne side, er det en god ide først at tømme din browsercache. Jeg genbruger billederne fra de foregående sideder, og hvis de allerede liger i din cache, går det meget hurtigt med statusbjælken.

Senest opdateret: 6.nov. 2003.

I denne sektion:

Introduktion
Vis noget andet mens siden indlæses
Simpel splash page
Kode til simpel splash page
Grafisk splash page
Koden til grafisk splash page
Preload med statusbjælke
Koden til statusbjælke

E-mail nyhedsbrev

Vælg normal præsentation

Vis siden som den ser ud i udskrift Send siden til udskrift.