Tja, frames. Ik knutsel er zo af en toe mee, en ik weet nog steeds niet of ik er nu zo weg van ben. Aan de andere kant: ze worden veel gebruikt, en ik wil u er toch iets over vertellen. Ondertussen beginnen we dan wel op het terrein van de "enigszins gevorderden" te raken. Beschouwt u dit hoofdstuk dus als "facultatief". Het is een beetje een lang verhaal geworden, waarvoor excuses, maar het is ook niet echt simpel.
Met frames verdeel je een browservenster in stukken. In elk deel wordt een apart HTML-bestand vertoond, en welk bestand dat is kan vanuit het andere deel worden bepaald. Soms herkent u frames doordat er een "rand" (border) tussen de diverse onderdelen zit, meestal wordt die border weggelaten en merkt u het door de aanwezigheid van schuifbalken binnen het venster (in plaats van alleen aan de rand van het venster).
Eigenlijk is het een kwestie van afwegen van extra navigatiemogelijkheden versus optimaal gebruik van schaarse schermruimte. Voorbeeld: u bent een electronische encyclopedie aan het maken, over Nederlandse architecten. Elke architect, u denkt dat het er zo'n 250 zullen zijn, heeft een ingang. Dat wordt dus een lijst met onder elkaar "Bonnema, Abe" tot en met "Rietveld, Gerrit". (De architecten S t/m Z worden verzocht zich niet beledigd te voelen!) Dan hebt u per ingang een stukje tekst met misschien een paar fotootjes van hun bouwwerken. Het is wenselijk dat die lijst met namen steeds op het scherm staat, en onder elkaar neemt hij ook een aanvaardbare ruimte in: u bent hier de linkerreep van zeg 150 tot 200 pixels aan kwijt. (Dat niet alle 150 namen tegelijk zichtbaar zijn is nu eenmaal zo: daar is de schuifbalk binnen dat gedeelte voor.)
Elke keer als u op een naam van een architect klikt, komt het betoog omtrent die architect plus zijn werk in de rechterhelft van het venster terecht. Althans, dat gaan we zo doen.
Inderdaad, typisch in dat soort situaties waarin er veel heen en weer gesprongen wordt, en het wenselijk is dat de keuzemogelijkheden "bij de hand zijn". Encyclopediën, recepten-verzamelingen, dan soort dingen. U begrijpt uiteraard dat wat je aan navigatie extra krijgt, je aan schermruimte verliest.
Nou, laten we maar eens een frame-pagina in elkaar zetten. U moet allereerst voor uzelf bedenken welke verdeling u wilt. U kunt een pagina horizontaal in twee of meer stukken splitsen of verticaal, en u kunt ook binnen elk "stukje venster" weer onderverdelingen maken. Een dergelijk schetsje zou er zo uit kunnen zien:
U wilt hier dus het scherm horizontaal in drie stukken verdelen, en het middelste stuk dan weer verticaal in twee stukken. Dat kan, maar het is weer wat complexer. Met uw goedvinden gaan we eerst een scherm verticaal in twee stukken verdelen, met een stuk "boven" en een stuk "onder", dan knutselen we daarna wel verder.
Er komen drie begrippen om de hoek kijken: frameset, frame en name. "Frameset" wordt gebruikt om aan de indeling van het scherm aan te geven, "frame" om elk individuele frame te definiëren en "name" om de communicatie tussen frames mogelijk te maken. Het definiëren van franes gebeurt bijna altijd op het niveau van de index-pagina, omdat het in beginsel het gedrag van de hele site bepaalt.
De code voor de aldus gemaakte index-pagina ziet er aldus uit:
<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS="200,*">
<FRAME SRC="koppagina.htm" NAME="boven">
<FRAME SRC="beginpagina.htm" NAME="onder">
</FRAMESET>
</HTML>
Even een toelichting. De HEAD-sectie is zoals bekend. Er is hier géén BODY-sectie: die is vervangen door de FRAMESET-definitie. In de FRAMESET-tag wordt hier de verdeling in rijen (rows) aangegeven. De indeling is: eerste stuk (zo'n stuk heet dus een FRAME) 200 pixels hoog, tweede stuk "de rest van het scherm" (het sterretje werkt hier als joker-teken). (Bij drie stukken, opgedeeld in percentages van het scherm, zou dat kunnen worden: ROWS="25%,50%,25%".) Let even op de aanhalingstekens! Vervolgens wordt per frame opgegeven hoe dit frame heet (NAME=) en met welk document dat frame bij het aanroepen van deze pagina gevuld moet worden. Hier heten de frames dus "boven" en "onder" en worden ze met de aangegeven pagina's gevuld.
Om met deze constructie iets te kunnen laten zien, moet u dus drie pagina's hebben: deze index-pagina, en de beide pagina's die de index-pagina tracht te laden.
Stel dat dat bestand "koppagina.htm" een hoeveelheid links bevat naar pagina's die u dan in het stuk "onder" weergegeven wilt hebben, naar Voorgerechten, Hoofdgerechten, Desserts, Dranken en nog zo wat. Dan kunt u op de inmiddels bekende wijze een link maken in de sfeer van <A HREF="desserts.htm">Desserts</A>. U zult dan echter zien dat de dessert-pagina over de koppagina heen wordt neergezet.
We bereiden de "HREF"-opdracht dus wat uit, met het attribuut "TARGET". Hiermee geven we aan "waar het bestand vertoond moet worden". U zoudt hier die tag dus aanvullen tot:
<A HREF="desserts.htm" TARGET="onder">Desserts</A>.
Dus: de naam van het frame, tussen aanhalingstekens.
Voor alle duidelijkheid: die link bevindt zich dus in de tekst van wat hier koppagina.htm is. Dus niet in de frame-definitie-pagina. De enige links die daarin zijn opgenomen zijn die naar de pagina's die bij het laden van de frame-pagina vertoond moeten worden.
(Vanzelfsprekend kunt u in die aldus geladen desserts-pagina ook links opnemen. Als u dat "target=" achterwege laat, wordt het gelinkte bestand in het actuele frame (dus "onder") neergezet, wat in casu de bedoeling is. Netter is het, om bij het werken met frames het "target="-attribuut consequent te hanteren.)
In veel gevallen zult u op uw site een collectie links naar sites van anderen hebben: die van uw zwager, uw voetbalclub of wat dan ook. Als u dat zo doet dat die sites dan in een frame binnen uw site worden getoond, zou dat -overigens niet zo gauw- de indruk kunnen wekken dat die site een onderdeel van uw site vormt. Daarmee zou u het verwijt kunnen krijgen dat u met "andermans veren gaat pronken". Zolang we het over "personal pages" hebben zal dit zo'n vaart niet lopen, maar zodra het om commerciële sites gaat kan het anders liggen.
Maar goed, laten we aannemen dat u elk risico van een mogelijkheid van een schijn van, enzovoorts, wilt vermijden. U kunt dan twee dingen doen. De simpele methode is dat u bij dat rijtje links (in het ene venster dus) uitdrukkelijk zet dat het "sites van derden" betreft. De andere methode is dat u voor die externe sites de frame-structuur verlaat, en ze in een nieuw browservenster vertoont. Dat heeft tevens het voordeel dat uw eigen site niet "verdwijnt" en slechts met de Terug-knop weer bereikt kan worden. U bereikt dat met het attribuut TARGET="_blank". (TARGET="_new" mag blijkbaar ook.) Een link naar de site van de Nederlandse Spoorwegen, te openen in een nieuw venster, zoudt u dus zo formuleren: <A HREF="http://www.ns.nl" TARGET="_blank">Nederlandse Spoorwegen</A>.
Eerlijk gezegd: bij links naar commerciële sites is het niet aan te nemen dat men bereid zal zijn het principe van reciprociteit te handhaven, en een link naar uw site op te nemen. Dan moet u dus zorgen dat uw eigen site bereikbaar blijft. Zolang u maar niet de indruk wekt dat de Nederlandse Spoorwegen van u zijn.
Duur woord voor "frames binnen frames". Wat u op het plaatje hierboven zag, is een genest frame: eerst horizontaal in drieën, dan het middelste stuk verticaal in tweeën. We gaan het iets simpeler doen, aan de hand van een casusje. Laten we het Double Clutch-gebeuren uitbreiden met een overzichtje waarin diverse automerken, Alfa Romeo tot en met Zastava, worden beoordeeld op hun merites als modern classic. De schets leidt tot het volgende idee:
We hebben het dus over 1 bestand voor de frame-definitie, 1 bestand voor de koptekst, 1 bestand met een reeks met automerken, en dan per automerk een bestand met wat we er van vinden. (Dat kan bij Zastava zeer beknopt zijn.) Die koptekst kan iets bevatten als "hier vindt u per merk waar u op moet letten vanuit de optiek van de modern classic-liefhebber" of zo, plus de verdere navigatietoestanden om vanuit dit stuk van de site weer verder te komen.
Dat brengt me direct weer op een best wel belangrijk attribuut. U zult in zo'n situatie "uit de frames willen breken", en weer het hele scherm ter beschikking hebben. Is in voorzien, met het attribuut "TARGET="_top". (Let op de underscore!) De term "_top" betekent iets technisch dat ik ook niet snap, maar dat zoiets betekent als "gooi de frame-structuur weg en begin met een leeg venster". Precies de bedoeling dus.
Probeert u eerst zelf op een papiertje te zetten hoe die frame-beschrijving er uit zou zien; daarna mag u gerust spieken. Ik denk dat we het over de volgende constructie eens zouden kunnen worden:
<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS="150,*">
<FRAME NAME="boven" SRC="koptekst.htm">
<FRAMESET COLS="200,*">
<FRAME NAME="linksonder" SRC="merken.htm">
<FRAME NAME="rechtsonder" SRC="alfa.htm">
</FRAMESET>
</FRAMESET>
<HTML>
Ik heb hier dus gekozen voor een bovenste rand van 150 pixels hoog; iets anders kan dus ook. Het frame voor de rij merken is 200 pixels breed, maar het kan best zijn dat u meer of minder nodig hebt. Dat rijtje met merken kan er sowieso neergezet worden, en ik heb er voor gekozen om dan maar gelijk het eerste merk van die rij neer te zetten. Maar dat mag ook best iets anders zijn.
Hier hoeft binnen de Double Clutch-context eigenlijk maar één link in: terug naar de index-pagina. Het bestand "koptekst.htm" kan er dus uitzien als elk ander HTML-bestand. Ik geef alleen het BODY-gedeelte:
<BODY>
<A HREF="index.htm" TARGET="_top">Terug naar de Double Clutch Homepage</A>
<BR>
<H1>Is uw auto een modern classic?</H1>
Hieronder vindt u per merk of uw auto de moeite waard is om als modern classic gebruikt te worden.
</BODY>
Dit is vrij simpel: u maakt een gewoon HTML-bestand met alle gewenste merken alfabetisch onder elkaar. Eventueel kunt u dat met een UL-lijst doen. Als u het heel mooi wilt maken, kunt u met geneste lijsten maken. Elk item in zo'n lijst bevat dan dus een link naar het bijbehorende bestand-per-merk (c.q. per type).
Een stukkie uit zo'n bestand (maar hier beginnen persoonlijke voorkeuren in te kruipen):
(er is dus al een lijst gedefinieerd, en begonnen bij Audi -overigens geen serieuze modern classic)
<LI>Volvo
<UL>
<LI><A HREF="katterug.htm" TARGET="rechtsonder">Katterug (P544)</A>
<LI><A HREF="amazon.htm" TARGET="rechtsonder">Amazon (P121)</A>
<LI><A HREF="tank.htm" TARGET="rechtsonder">'Tank' (144 t/m 240)</A>
</UL>
<LI><A HREF="zastava.htm" TARGET="rechtsonder">Zastava</A>
Het effect is dus dat "Zastava" gelinkt wordt, "Volvo" niet, maar elk model Volvo weer wel: dat was dus ook de bedoeling.
Eigenlijk zou u nu ook nog een betoog-per-merk moeten maken, maar laat dat maar zitten. Daar zit niets nieuws meer in.
Knutselt u hier eens rustig mee. Hier is waarschijnlijk wel even wat oefening voor nodig.
U kunt nu naar Respons.