<< Website Ontwerp | Website Index | Hoe Maak Ik Een Banner >>
Nadat het internet oorspronkelijk als militair medium begonnen was, werd het al snel door de academische wereld gebruikt om gegevens uit te wisselen. Eerst door middel van FTP, Usenet, Email, Gopher en soortgelijk.
Met als doel eenvoudig informatie uit te wisselen tussen verschillende platformen (zoals Windows, Macintosh en Unix) is HTML ontwikkeld. Doel van HTML was het uitwisselen van informatie, niet een mooie layout. De basis html kwam ook niet veel verder dan een paar koppen (H1.H2…) en wat vet (B) en wat mogelijkheden tot het maken van tabellen. Met computers die niet veel verder kwamen dan 640x480 en 16 of 256 kleuren met een Pc die een factor of duizend minder presteerde dan de huidige was er ook geen mogelijkheid tot meer.
Met het toenemende gebruik van het internet, ook door niet techneuten, en de groei van de processor kracht, beeldscherm resoluties enzovoorts kwam er steeds meer behoefte aan mogelijkheden voor de opmaak van documenten. Met name Netscape heeft hier aan de weg getimmerd met de introductie van nieuwe elementen en attributen om kleur en stijl aan een pagina te geven. Webontwikkelaars gebruikten hun creatieve geest om met de beperkte mogelijkheden om hun pagina’s toch het gewenste uiterlijk te geven. Zo werden de tabel tags (TABLE,TR,TD ed) die oorspronkelijk bedoelt waren om informatie tabel-vormig weer te geven massaal gebruikt voor de lay-out van een pagina.
Er trad een verstrengeling op van ontwerp en inhoud, met als gevolg dat pagina’s onder andere minder makkelijk te onderhouden werden em meer gebruik van bandbreedt maakten.
Om de problemen op te lossen zijn de Cascading style sheets (CSS) ontwikkeld. Een opmaak-taal die volledige los van de inhoud gekoppeld kan worden.
Met CSS is heel veel mogelijk, en er zijn diverse goede beschrijvingen (http://www.handleidinghtml.nl/). Op deze pagina een aantal voorbeelden om de lay-out van een pagina te verzorgen met behulp van de divisie (DIV) tag.
Een probleem hebben ze met CSS helaas niet opgelost, er is nog steeds geen garantie dat een webpagina er overal hetzelfde uitziet.
De basis is elke keer hetzelfde, zes keer een <div>. Alleen de stijl wordt aangepast. Voor de demo's maak ik gebruik van style definities die in het document geplaatst worden, het zou ook een .css bestand kunnen zijn.
<div id='een'> <h1>DIV EEN</h1> </div> <div id='twee'> <h1>DIV TWEE</h1> </div> <div id='drie'> <h1>DIV DRIE</h1> </div> <div id='vier'> <h1>DIV VIER</h1> </div> <div id='vijf'> <h1>DIV VIJF</h1> </div> <div id='zes'> <h1>DIV ZES</h1> </div>
Voor het gemak heb ik elke Divisie een aparte kleur gegeven met behulp van background-color. Om de Divisie te vullen heb ik er elke keer de gebruikte stijl definitie ingezet. Als deze niet goed te lezen is kun je altijd nog de broncode bekijken.
Met width en height geef je een divisie afmetingen. Met position, left en top plaats je de divisie ten op zichte van de vorige. De divisies worden altijd onder elkaar geplaatst.
Met position:absolute kun je de divisies een vaste plek geven op een pagina
Weer met position:absolute een heuse layout gemaakt, kop-balk, menu links,rechts en een inhoud vlak. Zie dat er twee divisies ontbreken, Divisie-twee is met de stijl z-index:-1 achter divisie-een verstopt, en divisie-zes is met display:hidden helemaal verborgen.
Met position:absolute kom je in de problemen om het moment dat je bijvoorbeeld nog een balk beneden wilt hebben. Je weet niet precies hoe lang de menu's en tekst zijn en dus kun je divisie-zes geen positie mee geven. Deze komt dan te staan onder de laatste divisie die geen position:absolute stijl had.
Een layout met position:absolute en z-index. Als je de stijl definities van deze pagina bekijkt zie het de betekenis van het 'cascading' in CSS. Er staan meerdere definities in van de kleuren van de divisies. Je kunt meerdere stijl definities achter elkaar zetten. De laatste is altijd de geldige. Je kunt dus voor een site een style-sheet maken, en daarachter per deel van een site onder kleuren gebruiken, of voor 1 pagina de kleur aanpassen.
<head> <link rel='stylesheet' href='web.css' type='text/css' /> <link rel='stylesheet' href='deelweb.css' type='text/css' /> <style> definities voor deze pagina </style> </head>
<< Website Ontwerp | Website Index | Hoe Maak Ik Een Banner >>
©