Het gebruik van frames
Les 3

Plaatjes in frames

We gaan eerst even terug naar onze simpele framepagina.

<FRAMESET COLS="50%,50%">
  <FRAME SRC="kim.html">
  <FRAME SRC="lisa.html">
</FRAMESET>

Als je dat leuk vindt kun je plaatjes in een frame zetten. In de map 'examples' van deze cursus staat een bestandje world.gif. Kopieer dit bestandje maar even naar de map waar je je framepagina's opslaat. Je kunt ook hier klikken en het plaatje dan opslaan.

<FRAMESET COLS="50%,50%">
  <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162>
  <FRAME SRC="lisa.html">
</FRAMESET>

Vergeet niet dat het altijd een goede zaak is als je HEIGHT & WIDTH opties bij je plaatjes specificeert.
We gaan eens proberen of we het plaatje netjes in een venstertje kunnen passen. Om te beginnen verklein je het linker frame tot 146 pixels breed. Omdat we een absolute maat opgeven maken we het andere frame variabel.

<FRAMESET COLS="146,*">
  <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162>
  <FRAME SRC="lisa.html">
</FRAMESET>

Vervolgens splitsen we het linker venster in horizontaal in twee delen. Het bovenste deel wordt 162 pixels hoog en het onderste deel neemt de rest voor z'n rekening. In het bovenste deel komt ons plaatje en het onderste deel geven we aan Kim.

<FRAMESET COLS="146,*">
  <FRAMESET ROWS="162,*">
    <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162>
    <FRAME SRC="kim.html">
  </FRAMESET>
  <FRAME SRC="lisa.html">
</FRAMESET>

Zoals je ziet hebben we nu een klein probleempje.

Schuifbalken in beeld of niet?

De schuifbalken die je ziet kunnen we manipuleren door de optie SCROLLING= te laten volgen door YES, NO of AUTO. YES betekent dat det venster schuifbalken krijgt, of ze nu nodig zijn of niet. NO betekent dat er geen schuifbalken worden getoond, zelf niet als de inhoud van het venster zo groot is als Amsterdam en Rotterdam bij elkaar. De browser toont zoveel als er in past. AUTO is de standaard waarde. Als de schuifbalken nodig zijn verschijnen ze, anders blijven ze netjes uit de weg. Laten we onze schuifbalken maar eens verwijderen.

<FRAMESET COLS="146,*">
  <FRAMESET ROWS="162,*">
    <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO>
    <FRAME SRC="kim.html">
  </FRAMESET>
  <FRAME SRC="lisa.html">
</FRAMESET>

Ons probleem is nog steeds niet opgelost. Het plaatje staat niet in het frame zoals we dat graag zouden willen.

De breedte van de marges

Met de opties MARGINWIDTH en MARGINHEIGHT kun je de breedte van de marges regelen. Met MARGIWIDTH regel je de breedte van de linker- en de rechtermarge, met MARGINHEIGHT de boven- en ondermarge.
De browser geeft automatisch een beetje witruimte rond de inhoud van het venster. Normaal gesproken is dit nodig om esthetische redenen maar het kan ook wel eens slecht uitkomen.
We gaan nu alle marges op 1 zetten. (1 is het minimum)

<FRAMESET COLS="146,*">
  <FRAMESET ROWS="162,*">
    <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO
     MARGINWIDTH=1 MARGINHEIGHT=1>
    <FRAME SRC="kim.html">
  </FRAMESET>
  <FRAME SRC="lisa.html">
</FRAMESET>

We komen in de buurt maar we zijn nog niet waar we zijn willen. Hoe zit het nu precies met die marges. Wel, er is een vaste (dus niet te veranderen) marge aan elke zijde van 1 pixel breed. Daarbij komt aan elke kant de variabele marge. Als we de variabele marges aan elke kant op 1 zetten, dan is de werkelijke marge aan elke kant dus 1 + 1 = 2.
Hoe groot moet het frame dan zijn? De tekening is 146 bij 162 pixels. Daar komen aan elke kant 2 pixels bij, dus het frame moet 150 bij 166 pixels worden. Laten we het eens proberen.

<FRAMESET COLS="150,*">
  <FRAMESET ROWS="166,*">
    <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO
     MARGINWIDTH=1 MARGINHEIGHT=1>
    <FRAME SRC="kim.html">
  </FRAMESET>
  <FRAME SRC="lisa.html">
</FRAMESET>

Nu wordt het plaatje goed in het frame geplaatst. Heb je ooit een plaatje gezien in een frame dat aan één of meer kanten was afgekapt? Als je absolute maten gebruikt in combinatie met een variabel frame...
De breedte van je frame kun je uitrekenen door bij de breedte van de afbeelding eerst 2 op tellen en daar nog eens 2 keer de MARGINWIDTH bij te doen. De hoogte reken je op dezelfde manier uit.  *