Achtergrondfiguur verdeeld over de frames van een frameset

Sommige websites hebben een opmaak, waarbij het lijkt alsof er een floating frame (<IFRAME>-tag) in zit. Alle (scrollende) tekst en figuren staan in een beperkt stuk van de pagina. Bij nadere beschouwing blijkt echter dat de bladzijde is opgebouwd uit frames. Opvallend detail daarbij is dat de achtergrondfiguur verdeeld lijkt te zijn over meerdere frames.
Op deze bladzijde staat beschreven hoe je zoiets aanpakt. De code kun je downloaden, inclusief de plaatjes.

De voorbeelden op deze pagina zijn ontleend aan de (oude) website van "De Spil" in Giessenburg. Als je als christen een paar daagjes rust zoekt, om even weg te zijn van alle beslommeringen, zou je daar eens moeten gaan kijken!
De website van De Spil is helemaal veranderd. Daardoor kun je helaas niet meer zien hoe het er in het "echt" uit ziet.

• Het uiteindelijke doel van de paginaopmaak wordt getoond in voorbeeld 1. De pagina is opgebouwd uit frames, maar dat zie je niet omdat alle frameborders zijn uitgezet. Om te zien hoe de frames zijn verdeeld bekijk je voorbeeld 2.
• Lees vooral ook de tekst in deze voorbeelden.
   
• Er worden twee items besproken:
  1. De hier gebruikte <frameset>- en <frame>-tags
  2. De <style>-tag in de HEAD van de benodigde HTML-bestanden.
   
• De <frameset> en de <frame>'s zien er als volgt uit:

  <frameset cols="178,622*" frameborder="no" border="0" framespacing="0" rows="*">
    <frame name="leftFrame" scrolling="no" noresize src="vb72zij.htm" marginwidth="0" marginheight="0" frameborder="NO">
    <frameset rows="92,1*" frameborder="no" border="0" framespacing="0">
      <frame name="topFrame" scrolling="no" noresize src="vb72top.htm">
      <frameset cols="570,100%" frameborder="no" border="0" framespacing="0">
        <frame name="mainFrame" src="vb72text.htm" marginwidth="10" marginheight="0">
        <frame name="rightFrame" scrolling="no" src="vb72leeg.htm">
      </frameset>
    </frameset>
  </frameset>

  De hier getoonde HTML is van voorbeeld 1.
• Merk op dat het linker frame (waarin de file vb72zij.htm wordt geladen) altijd 178 pixels breed is. Voor de "rest" wordt 622* opgegeven, wat zoveel betekent als: "Minimaal 622 pixels, maar zoveel als nodig is".
• Het zelfde wordt gedaan bij de verdeling in rijen voor de bovenrand en de "rest": 92,1*.
  De kolom (mainFrame) waarin de file vb72txt.htm wordt geladen is altijd 570 pixels breed. De rechtermarge (rightFrame, file vb72leeg.htm) wordt altijd aangevuld tot 100%.
• Voor je eigen doeleinden moet je eventueel de grootte van de frames aanpassen. De voorbeelden zijn gericht op 800 × 600 beeldpunten.
   
• De <style>-tag in de HEAD van de file vb72zij.htm ziet er als volgt uit:

  body {
  font-family: Arial, Helvetica, sans-serif;
  color: #FFFFFF;
  background-attachment: fixed;
  background-color: #FFFFFF;
  background-image: url(vb72zij.gif);
  background-repeat: no-repeat;
  background-position: left top;
  border-style: none;
  border-top-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 0px;
  border-left-width: 0px
  }

  Deze style definieert drie onderdelen:
  1. Het letterfont (font-family en color).
  2. De achtergrond (background-attachment, -color, -image, -repeat en -position).
  3. De breedte van de buitenrand (border-style, -top/-right/-bottom/-left-width), in beeldpunten (pixels).
  De verschillende instellingen spreken voor zichzelf.
   
• Het zal nodig zijn om hier-en-daar wat te wijzigen, zoals kleuren, de URL van de figuur (in de file vb72top.htm staat: url(vb72top.gif)), en eventueel ook de instelling van background-position.
• Merk op dat dit werkt doordat background-attachment: fixed; en background-repeat: no-repeat; zijn ingesteld. Hierdoor zit de achtergrondfiguur op een vaste plaats en herhaalt zich niet.
• Bij gebruik van een kleine achtergrondfiguur zou je kunnen proberen wat het effect is van background-repeat: repeat-x; of background-repeat: repeat-y;.

Gebruik:

• De <frameset>- en <frame>-tags vind je in de files vb72fra1.htm en vb72fra2.htm. Deze files zitten in de .ZIP-file die je kunt downloaden.
• De benodigde <style>-tags in de HEAD vind je in de files vb72zij.htm en vb72top.htm. Deze files zitten in de .ZIP-file die je kunt downloaden.

Downloaden:
 
Druk op de knop:  File: voorb072.zip, 19 716 bytes.