Hoi MrHook,
Aha, nu begrijp ik ook wat je in een andere vraag bedoelde met het invliegen van een vogeltje in een nestkastje!
Daar zullen we ook een mouw aan passen. Maar eerst nog heel wat anders ...
- - - - - - - - - - -
Nou, die Photoshop met zijn "handige" slice-tool en Dreamweaver hebben er een mooie bende van gemaakt. Dit is helaas een goed voorbeeld van hoe het
niet moet:
- Deze toch simpel opgezette pagina is in 50 images (vijf-tig!) gesliced.
- Om die op hun plaats te krijgen, zijn tabellen voor de opmaak gebruikt.
- De afbeeldingen zitten er allemaal als voorgrond-afbeeldingen in, zodat je er geen tekst overheen kunt zetten (tenzij met heel veel moeite).
- Er zitten ook wat essentiële fouten in de html.
- Als je de handel ombouwt tot achtergrondafbeeldingen (waar wel tekst overheen kan komen), dan zorgt de tabel-opmaak in vaste cellen ervoor, dat de pagina uit elkaar valt bij meer tekst dan er in een cel past.
- De html wordt door de tabellen vreselijk onoverzichtelijk, en als je over een paar maanden eens iets wilt wijzigen, zoek je je het rimram.
- Voor elke pagina zou je opnieuw zo'n verfoeilijke tabel moeten maken, wat schouwspelen oplevert als dit:
HTML:
<tr>
<td colspan="2"><img src="images/index_41.png" width="32" height="9" alt=""></td>
<td colspan="2"><img src="images/index_42.png" width="41" height="9" alt=""></td>
<td colspan="3"><img src="images/index_43.png" width="22" height="9" alt=""></td>
<td><img src="images/index_44.png" width="37" height="9" alt=""></td>
<td colspan="2"><img src="images/index_45.png" width="46" height="9" alt=""></td>
<td colspan="2"><img src="images/index_46.png" width="43" height="9" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="9" alt=""></td>
</tr>
<tr>
<td rowspan="2"><img src="images/index_47.png" width="19" height="30" alt=""></td>
<td colspan="15"><img src="images/index_48.png" width="214" height="10" alt=""></td>
<td rowspan="2"><img src="images/index_49.png" width="23" height="30" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="10" alt=""></td>
</tr>
<tr>
<td colspan="15"><img src="images/index_50.png" width="214" height="20" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="20" alt=""></td>
</tr>
<tr>
<td><img src="images/spacer.gif" width="63" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="38" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="101" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="19" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="27" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="19" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="13" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="7" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="34" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="7" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="7" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="4" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="11" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="7" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="7" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="37" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="7" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="31" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="15" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="7" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="20" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="23" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="55" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="5" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="137" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="23" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="51" height="1" alt=""></td>
</tr>
enz.
enz.
enz.
't Is bar en boos!
Maar we gaan die jongens en meisjes van Adobe eens een lesje leren!
:d :d :d
We slopen de tabel uit de pagina, en ach, de hele rest eigenlijk ook maar: we beginnen gewoon overnieuw met een lege pagina.
- Alle afbeeldingen gaan naar de achtergrond, behalve het logo.
- Met CSS zetten we alles op z'n plaats.
- Ik werk altijd direct in de broncode (code-weergave), dat gaat wel zo vlot. En dat kan ook in Kladblok (of de betere Notepad++), dus de hele Dreamweaver hebben we niet nodig.
- Bij elke fase kan je in de broncode zien wat ik precies gedaan heb.
Fase 1
Behalve bovenaan en onderaan bestaat de pagina eigenlijk uit één kolom met verloop-grijs aan de randen, en wit in het midden. Die kolom plaatsen we zichzelf naar beneden toe herhalend (met repeat-y) in het midden van de pagina. Hij wordt 770px breed, anders wordt het zo smalletjes op een breedscherm monitor (en op een resolutie van 800x600px past het er nog steeds op).
Fase 2
Aan de onderkant maken we een <div> ("division" = indelingsblok) precies zo groot als het onderrandje met schaduw.
Fase 3
Bovenaan maken we ook een <div>, de "header". Deze ligt vanzelf in een vlak boven de achtergondkolom, en in deze <div> kunnen we een nieuwe achtergrondfiguur zetten. Dat is de achtergrond voor de kop, die nu mooi op de onderliggende kolom is geplakt, en deze op die plek onzichtbaar maakt.
Fase 4
Tot nu toe hebben we 3 afbeeldingen gebruikt. Maar die kunnen we naast elkaar in één afbeelding samenvoegen. Dan hoeft er maar één keer een image op de server opgehaald te worden in plaats van drie. Omdat het achtergrond-afbeeldingen zijn, kunnen we met de onderdelen van het ene image gaan schuiven tot ze op de goede plek zitten: met de eigenschap, jawel: background-position.
Fase 5
Tijd voor het logo. Ik heb 't logo wat minder hoog gemaakt, zodat er meer ruimte overblijft voor de inhoud van de pagina, en 't vogeltje war gezelliger ingekleurd.
Eerst in de html zetten ...
Fase 6
... en dan naar de goede plek verhuizen. Op het logo kan geklikt worden om naar de homepage te gaan.
Fase 7
Maar het logo als plaatje heeft geen tekst, en dat is wat moeilijk lezen voor Google en tekstvoorlees-browsers. We maken er ook een tekst-link bij.
Fase 8
Maar dat staat niet mooi. Dus halen we die tekst-link van het scherm af door 'm op een positie van 9999px links van het beeldscherm te zetten. Niets meer te zien! Maar Google en tekstbrowsers kunnen 'm wel lezen.
Fase 9
Faviconnetje gemaakt en toegevoegd.
Fase 10
De nestkastjes! Deze namen in het origineel nogal wat ruimte in beslag. XZe zijn wat verkleind, en naar rechts boven verhuisd, zodat er weer meer ruimte overblijft voor de inhoude van de pagina zelf. Zo kunnen ze ook op alle pagina's blijven staan zonder te storen.
Er meteen een gecombineerd e afbeelding van gemaakt, meer ook de kastjes met hover-effect erin. Eerst een horizontaal menu-lijstje met allemaal dezelfde.
Fase 11
Dan de achtergrondposities aangepast zodat het de verschillende kastjes voor de links zijn.
Fase 12
De hover-posities erbij. Daar vliegen je vogeltjes!
Fase 13
Met een class-naam voor de body (.home, .kim, .kosten, enz.) kan je regelen dat bij een bekeken pagina telkens zijn eigen kastjes uit het menu "aan" staat.
Fase 14
Als de opmaak van de voetregels klaar is, kan de opmaak van de inhoud in de css gezet worden: alles is klaar om de pagina te vullen.
Fase 15
Alle css is in een apart "stylesheet" gezet. Dat kan nu meteen voor alle andere pagina's gebruikt worden.
Klaar!
Resultaten
- Er zijn nu 3 images gebruikt in plaats van 50: dat scheelt dus 47 keer aanvragen van een image bij de server.
- De gecombineerde afbeeldingen hebben een meer dan drie keer kleinere bestandsgrootte dan de losse.
- De tabellen zijn van het toneel verdwenen.
- De nu nog lege pagina is zeker vier keer zo snel geworden. Bij een pagina die met inhoud gevuld wordt, is het verschil tussen de twee modellen nog groter.
- Aan html in de <body> is een hele pagina nu geworden:
HTML:
<body class="home">
<div id="wrapper">
<div id="header">
<ul id="menu">
<li><a id="home" title="Home" href="#"><span>Home</span></a></li>
<li><a id="kim" title="Kim" href="kim.htm"><span>Kim</span></a></li>
<li><a id="kosten" title="Kosten" href="kosten.htm"><span>Kosten</span></a></li>
<li><a id="kadobon" title="Kadobon" href="kadobon.htm"><span>Kadobon</span></a></li>
<li><a id="kontakt" title="Kontakt" href="kontakt.htm"><span>Kontakt</span></a></li>
</ul>
<a href="index.html" title="Naar Kim's Kiekjes homepage"><img
src="images/kkiekjes-logo287x145.png" width="287" height="145"
alt="" /><span>Kim's Kiekjes</span></a>
</div>
<div id="content">
...
hier de inhoud van de pagina
...
</div>
</div>
<div id="bottom"><!-- ! --></div>
<div id="footer">
...
hier de inhoud van de voettekst
...
</div>
</body>
Zo, dat was in sneltreinvaart
van tabel- naar css-opmaak, en
van slices naar css-sprites.
De theorie in een wat langzamer tempo staat hier mooi uitgelegd:
Succes!
Met vriendelijke groet,
CSShunter
