Maak je eigen homepage met FrontPage (deel 8)
Op deze pagina gaan we eens
kijken naar effecten voor tekst, knoppen en pagina's.
Decoratie van de
snelkoppelingen (hyperlinks).
Tot nu toe hebben we die
alleen standaard gebruikt, weleenswaar met eigen kleuren, maar toch, een
saai gezicht, het zou veel leuker zijn om ze bijvoorbeeld
op te laten lichten als de muis er over gaat.
Om dat effect te bereiken
moet je een code toevoegen in de kop van de pagina, dus tussen <head> en
</head>. Open een van je pagina’s waar een of meer snelkoppelingen op
voorkomen. Klik op de tab HTML en type de volgende code, bijvoorbeeld
direct na <head> of net voor <title>, maar in elk geval niet zomaar ergens
tussen de regels.
<style TYPE="text/css">
<!--
A:link {color:"#0000ff";}
A:visited {color:"#0000ff";}
A:hover {text-decoration: underline; color:"red";}
A{text-decoration:none}
-->
</style>
Sla de pagina op en klik op
Voorbeeld om het effect te bekijken. Als het goed is zie je de hyperlink nu
rood oplichten en is die onderstreept op het moment dat je er met de muis
over gaat. Een standaard hyperlink wordt onderstreept getoond, maar de
laatste regel in de code zorgt ervoor dat die standaard onderlijning wordt
verwijderd.
Wil je helemaal geen
onderstreping zien? Dan moet je het stukje code text-decoration: underline;
uit de A:hoover regel verwijderen. De regel gaat er dan zo uitzien: A:hover
{color:"red";}
De kleuren mag je aanpassen
en zoals je in het voorbeeld kunt zien mag dat met een kleurcode of een
naam voor de gewenste kleur, maar dat moet dan wel de Engelse benaming
daarvoor zijn.
Knoppen met aanwijseffect
Maar er zijn nog andere
leuke zaken, zo zou je bijvoorbeeld knoppen met aanwijseffect kunnen
gebruiken. Voor ons voorbeeld kun je een nieuwe pagina gebruiken, maar de
eerder gemaakte index.html mag natuurlijk ook.
 |
Open de
pagina en kies uit het rolmenu Invoegen de optie Onderdeel, Knop met
aanwijseffect… In het menu dat dan verschijnt kun je een aantal zaken
invullen. De
tekst voor de knop, de kleuren die je zou willen gebruiken en nog veel
meer van dat moois. |
De tekst mag je zelf
verzinnen en ik stel voor om de kleuren nog even met rust te laten, want
het is best wel moeilijk om een leuke combinatie te vinden. Rest ons de
optie Koppelen aan… want die moet wel worden ingevuld, dat is de
snelkoppeling naar een andere pagina.
Als het goed is heb je nog
een aantal pagina’s uit vorige voorbeelden, dus klik op Bladeren en
selecteer pagina1.html om de knop te koppelen aan die pagina. Sla je werk
op en bekijk het effect met je browser. Best een aardig effect hč, dat
oplichtten van de knoppen als je er met de muis overgaat, dus wat let je,
maak er nog maar een paar, onder elkaar, naast elkaar, wat jij wilt.
Je kunt de knoppen
aanpassen naar smaak, een effect kiezen, het lettertype, de kleuren en de
afmeting veranderen. Je kunt ook geluidseffecten toevoegen, klik maar op de
knop Aangepast, dan vind je de optie. Je moet wel een vastgesteld formaat
geluidsbestanden (au) gebruiken, deze zijn geschikt voor het gebruik met
Java op de meeste systemen, waarschijnlijk heeft men om die reden voor dit
formaat gekozen.
| Helaas
zijn dit soort bestanden maar moeizaam te vinden maar, je vindt ze wel
vaak op spelletjes cd’s en hier en daar op het Internet kom je ze ook
wel tegen, zoek maar eens met je favoriete zoekrobot naar “au format”. |
 |
Je kunt veranderen wat je
maar wilt en bijvoorbeeld ook eigen plaatjes gebruiken, maar die moet je
dan natuurlijk wel eerst zelf maken. Met een dubbele klik op de knop kun je
het knopmenu altijd weer tevoorschijn halen zodat je te allen tijde
veranderingen aan kan brengen.
Nog even dit, voor het
gebruik van dit soort knoppen zijn wel wat extra bestanden nodig,
fphover.class en fphoverx.class en natuurlijk ook de eventuele
geluidsbestanden die je hebt gebruikt. Op zich hoef jij je daar geen zorgen
over te maken, want FrontPage regelt dat wel voor je maar, je moet die
bestanden wel uploaden naar de server om de knoppen ook online te kunnen
gebruiken.
Paginaovergangen
FrontPage biedt nog een
aardige optie. Je kunt pagina’s voorzien van overgangen. Dat zijn leuke
effecten bij het opstarten en wisselen van de pagina’s. Het is jammer, maar
lang niet iedereen zal dit soort aardigheidjes echt kunnen waarderen omdat
het soms erg vertragend werkt, maar… het is tenslotte jouw pagina, dus wat
houdt je tegen 
 |
Open de
pagina waarop je een overgang aan wil brengen.
Kies uit het rolmenu
Opmaak de optie Overgang tussen pagina’s. Maak je keuze bij Gebeurtenis,
Pagina openen, pagina sluiten etc. Vul het aantal seconden in en kies
een Overgangseffect.
Klik op OK om het
menu te sluiten. Je kunt het resultaat in de browser bekijken. |
Mocht een en ander je
achteraf toch niet zo bevallen, dan kun je het effect op dezelfde manier
ongedaan maken, selecteer in dat geval Geen effect uit de lijst
Overgangseffect en klik OK. Je mag meerdere effecten op een pagina
gebruiken, bijvoorbeeld een bij het openen en een bij het afsluiten.
Je kunt wat extra beweging
op je pagina aanbrengen door bijvoorbeeld een stukje tekst geanimeerd
tevoorschijn te laten komen. Probeer maar. Type een stukje tekst en geef
dat met behulp van de opmaakattributen de gewenste plaats op de pagina.
Plaats dan de cursor erop en kies uit het rolmenu Opmaak de optie Dynamic
HTML-effecten.
 |
Er
verschijnt een venster waarin je een aantal instellingen kan maken. Kies
bijvoorbeeld:
Pagina laden, Binnenvliegen, Vanaf rechtsonder.
Sluit het venster met
het kruisje en bekijk het effect met je browser. Er zijn nog tal van
andere instellingen, stuk voor stuk aardige effecten, voor elk wat wils
en, je mag ook een afbeeldingen gebruiken in plaats van tekst, want
daarmee werkt Dynamic HTML-effecten ook. |
Lukt het niet? Ga als volgt
te werk, Voeg een plaatje in, al dan niet in een tabel om het de gewenste
plaats te geven, markeer het en kies ook nu de optie Dynamic HTML-effecten
uit het rolmenu Opmaak. Maak de gewenste instellingen en sluit het venster
met het kruisje.
