Start pagina
Android
Artikelen
Beveiliging
Tips & trucs
Windows 7
Windows 8
Windows 10
Downloads
Links

     

Maak je eigen homepage met FrontPage (deel 11)

Je kunt ook handig gebruik maken van frames pagina's om plaatjes weer te geven en bijvoorbeeld categorieën in de knoppenbalk maken die op hun beurt weer thumbnail pagina's weergeven. Maar automatisch vertonen zoals een diashow is misschien toch net even aardiger. Het kan beide en het is maar net wat jij leuk vindt.

Natuurlijk zijn er programma's te krijgen die diashows voor je kunnen weergeven, dat zijn vaak javascripts maar, over het algemeen werken die alleen goed met kleinere afbeeldingen. Alle afbeeldingen moeten eerst in het geheugen worden opgeslagen (gedownload) wat, bij een grote serie flink wat tijd vraagt en het is maar de vraag of de bezoekers van jouw pagina dat er wel voor over hebben. Hetgeen natuurlijk wel het geval is als je plaatjes interessant genoeg zijn

Als je dit soort scripts (programma's) zonder reclame wilt dan zal je er ook nog eens een flinke prijs voor moeten betalen. Desondanks zijn er hele aardige bij die naast het vertonen van afbeeldingen ook nog vaak fraaie effecten vertonen. Interesse? Kijk dan bijvoorbeeld maar eens bij AnfyJava en Riada.

In onderstaand voorbeeld gaan wij anders te werk. We hebben geen extra attributen nodig maar werken met een aantal pagina's voorzien van metatags, die ervoor zorgen dat een pagina na een vooraf bepaald aantal seconden wordt ververst en daarnaast ook een volgende pagina opstart.

Voorbeeld voor een diashow

Start FrontPage met een nieuwe pagina. Voeg een afbeelding in en sla de pagina op als afbeelding01.html. Maak nog een paar pagina's, voeg afbeeldingen in en sla ze op met namen als afbeelding02.html, afbeelding03.html enz. Een stuk of vijf is voorlopig genoeg, maar je mag er zoveel maken als je wilt. Maak ook een pagina diashow.html.

Tips: Sla de documenten en plaatjes op in een nieuwe map en noem die bijvoorbeeld diashow. Zo kun je alle attributen voor je presentatie later weer makkelijk terugvinden. Om alles nog wat netter te maken kun je de afbeeldingen centreren en de titel van de pagina invullen, die tekst wordt dan later in de top van de browser weergegeven. Op die manier heb je de afbeelding dan gelijk ook van commentaar voorzien.

Open diashow.html en type Start diashow, maak van die tekst een hyperlink naar afbeelding01.html - Klaar? Ga dan als volgt verder:

bulletOpen afbeelding01.html
bulletKies Eigenschappen van pagina...
bulletVul desgewenst de titel voor de pagina in.
bulletKlik Aangepast
bulletKlik Toevoegen onder Systeemvariabelen [HTTP-EQUIV]
bulletAls naam vul je in: refresh
bulletAls waarde: 10; url=http://provider/~gebruikersnaam/map/afbeelding02.html

De laatste regel moet natuurlijk worden aangepast met jouw gegevens:

bullet provider is bijvoorbeeld: home.kabelfoon.nl
bullet gebruikersnaam: ~jantje
bullet map is bijvoorbeeld diashow of een andere naam waarin jij je documenten en plaatjes hebt opgeslagen.

In dat geval moet de regel er zo uit zien:

10; url=http://home.kabelfoon.nl/~jantje/diashow/afbeelding02.html

De waarde 10; mag je vervangen door een ander getal, daarmee wordt de tijdsduur voor het verversen bepaald. Hou er rekening mee dat een bezoeker de afbeeldingen moet downloaden, dus... zet de tijd niet te scherp, anders kon het wel eens zijn dat de pagina alweer gaat verversen voor de afbeelding wordt getoond

Tip: Bewerk je afbeeldingen zodat ze een klein en voor het web geschikt formaat krijgen, dat scheelt aanmerkelijk in download tijd!

Sla de pagina op. Open afbeelding02.html en maak ook hiervoor weer een metatag, maar verander in de laatste regel afbeelding02.html in afbeelding03.html. Ga zo verder tot de laatste pagina van de show. Daar verander je afbeelding...html in diashow.html waardoor na het verversen van de laatste pagina de startpagina weer in beeld komt.

Op die startpagina zou je natuurlijk meerdere hyperlinks naar diverse diashows kunnen maken. Als je de onderdelen voor de verschillende presentaties elk in een eigen map plaatst is het makkelijk werken en... je zou dan ook de pagina's van de eerste show kunnen hergebruiken. Andere plaatjes erop en klaar, sneller kan niet!

Misschien is het wel aardig om onder de afbeeldingen een begeleidende tekst te typen en... een stop optie te maken. Type Diashow stoppen of iets dergelijks en maak daar een hyperlink van naar diashow.html. Op die manier kan een bezoeker de presentatie op elk gewenst moment stoppen. Klik hier voor een voorbeeld!

Je kunt je diashow nog een extra tintje geven door paginaovergangen te gebruiken. Maar dat werkt alleen maar goed bij het verlaten van de actieve pagina, immers, het effect zal niet of nauwelijks zichtbaar zijn bij het openen van een pagina omdat de afbeelding dan nog niet gedownload is.

Bladwijzers gebruiken

Op pagina's met veel tekst en/of onderwerpen zou je bladwijzers kunnen gebruiken. Zo kun je bijvoorbeeld aan het begin van de pagina hyperlinks maken naar de betreffende onderwerpen, waardoor je bezoeker met een simpele muisklik gemakkelijk naar een onderwerp naar keuze kan springen. Probeer maar eens en klik op: Tip! De pagina zal verspringen en bovenaan het venster staat te lezen: Tip: Bewerk je afbeeldingen etc. (Klik ook daar aangekomen weer op Tip: om hier terug te keren).

Hoe werkt dat?

Markeer, in de eerste regel van een alinea, een woord, dat is dus de plaats waar je naartoe wilt springen. Klik het rolmenu Invoegen, klik Bladwijzer... en klik OK.

Maak dan, bijvoorbeeld aan het begin van de pagina, een tekst die naar het onderwerp verwijst. Markeer de tekst en klik op het pictogram hyperlink.

Klik in het venster Hyperlink maken op het pijltje naast Bladwijzer, selecteer het woord waarvan je zojuist een bladwijzer hebt gemaakt, klik OK om het venster af te sluiten.

Je mag zoveel bladwijzers maken als je wilt en je kunt zelfs naar een bepaalde alinea op een andere pagina springen! Daarvoor moet je dan wel eerst een bladwijzer op die pagina maken. Dan maak je een hyperlink op de pagina vanwaar je naar de alinea wilt springen en typt daarachter #bladwijzer. Voor alle duidelijkheid, stel dat je bladwijzer op de doelpagina afbeeldingen heet en de doelpagina voorwoord.html dan ziet de hyperlink er dus zo uit: voorwoord.html#afbeeldingen en met een klik op de hyperlink zal de alinea op de doelpagina bovenaan het venster verschijnen.