Van een Frontpage-pagina naar een echte webpagina
Hoi Upupa,
KompoZer
Hé, dat is merkwaardig. Bij mij staat deze
js3250.dll ook in de KompoZer-map, en KompoZer doet het gewoon. - Misschien eens een herinstallatie van KompoZer proberen (als administrator)?
=======
Doorhalingen
Niet alleen Internet Explorer (alle versies IE7, IE8 en IE9), maar ook de browsers Firefox, Opera en Safari geven veel meer doorhalingen te zien (en allemaal dezelfde 26 extra). Chrome is de uitzondering!
Hoe komt dat?
Waarschijnlijk omdat in een aantal tabelcellen <td> een
inline style is opgegeven met
style="text-decoration: none line-through; ...". Dat is ongeldige code, want een element kan niet tegelijkertijd een text-decoration "geen" en "doorhalen" hebben.
Bij ongeldige codes gaan browsers hun ingebouwde foutafhandeling toepassen, en die kan verschillen per browser:
- Chrome zal zeggen: "De 'none' is geldige code, die pas ik dus toe; wat daarna komt is dan ongeldig en dat negeer ik".
- De andere browsers zullen zeggen: "Aha, twee waarden voor de text-decoration opgegeven, terwijl het er maar één mag zijn. Dan neem ik de laatste." (net als bij andere css-dingen de laatst doorgegeven waarden altijd eerdere overrulen)
=======
Overige zaken
Ik heb nog eens wat verder in de pagina-code gekeken. Oef!
CSS-fouten
Frontpage is erg goed in het maken van ongeldige css ...
530 css-fouten, zegt een controle met de
css-validator. :shocked:
Doctype
Er ontbreekt een "
Doctype" (fout van Frontpage): dat is nodig om browsers te laten weten om welke soort html het gaat (er zijn verschillende soorten), en een goed Doctype zorgt voor weergave die in alle browsers hetzelfde is. *)
Een doctype van de soort
"Strict" is de beste: die zorgt voor de eigenlijke standaarden waar alle browsers zich aan moeten houden.
Maar ... als je een Doctype Strict aan de pagina toevoegt:
- Dan is dit het resultaat: vlask-ori-strict.htm
- Er valt meteen op dat alle tabelcellen nu veel te hoog zijn, in alle browsers behalve in IE7 (die de standaarden verkeerd toepast): Chrome, Firefox, Opera, Safari, IE8 en IE9.
- Laat je deze pagina door de html-validator controleren, dan komen er helaas ... 883 html-fouten als resultaat uit de bus. :shocked:
Logisch dat Frontpage, dat dateert van 2003 (dus: 10 jaar oud!), niet erg happig is op doctypes: Frontpage zet er allerlei tags en eigenschappen in die in strijd zijn met de standaarden!
Style-spinneweb
Verder is het (waarschijnlijk in de loop der jaren) nogal een ratjetoe aan opmaak geworden:
Er zijn zo'n ... 44 verschillende opmaak classes (.style3, .style4, enz.), die samen zo'n kleine
300 (!) code-regels in beslag nemen.
Los daarvan hebben bijna alle tabelcellen ook nog een eigen inline stijl, in de vorm van:
HTML:
...
<td style="width: 109px; font-weight: 700; font-family: Arial, sans-serif; color: windowtext; font-size: 10.0pt;
font-style: normal; text-decoration: none; text-align: general; vertical-align: bottom; white-space: nowrap;
padding: 0px; border-left-color: inherit; border-right-style: solid; border-right-color: windowtext;
border-top-style: solid; border-top-color: windowtext; border-bottom-style: solid; border-bottom-color: windowtext"
align="center" class="style27">
Los daarvan hebben soms ook nog elementen binnen een een <td>, bv. een <p> of een <span> óók nog een eigen inline style.
Ook dat maakt de pagina erg zwaar: de pagina heeft
ruim 630kB (meer dan een half MB) nodig voor alleen de code.
Conclusie:
Niet zo verwonderlijk, dat browsers zich hierin kunnen verslikken. En nog een wonder dat de pagina er toch nog ongeschonden uit komt (behalve de doorhalingen).
=======
Opnieuw!
Hoe dan die doorhalingen corrigeren? - Eigenlijk zit er voor deze pagina maar één ding op: uithuilen en opnieuw beginnen.
Maar om de tranen te drogen heb ik wat voor je:
Toelichting:
- Er kon flink gesaneerd worden in de css: met 6 ID's en 5 classes ben je gered (in totaal zo'n 100 regels css i.p.v. 300).
- Zo veel mogelijk gemeenschappelijke styles voor dezelfde typen elementen zijn gecombineerd. Alleen afwijkende elementen hebben een eigen stijl (via een ID of class).
- Daardoor hoeven er helemaal geen inline-styles in de <body>-code meer gebruikt te worden! De tabel-code is nu erg simpel en makkelijk in te vullen geworden:
HTML:
...
<tr>
<td class="nr">3</td>
<td class="dag">16</td>
<td class="mnd">januari</td>
<td>M. Soer</td>
<td>J. Been</td>
<td>J. Kuiper</td>
<td>J. Been</td>
<td>L. Noordermeer</td>
</tr>
...
- De omvattende tabel voor de pagina is een tabel voor de opmaak, die beter vervangen kan worden door "gewone" css-vormgeving. Alleen voor het rooster is er nu een tabel.
- De achtergrondfiguren met de roos heb ik gecentreerd om de pagina wat meer evenwicht te geven.
- Het doorstrepen heeft de functie om te laten zien wat al achter de rug is. Dat kan met doorhalen, maar dat maakt het een beetje rommelig in mijn ogen. Mijn suggestie zou zijn: niet doorhalen, maar "uitgrijzen".
In de praktijk is dat erg makkelijk: is iets geweest, dan geef je de betreffende tabel-rij een class mee om te vergrijzen:
<tr class="geweest">, en alles in die rij regelt zich vanzelf.
- De nummers en datums zijn onder elkaar uitgelijnd i.p.v. gecentreerd, dat leest wat makkelijker.
- De tussen de schiet-datums liggende datums voor de bijzondere gelegenheden zou ik gewoon in de datum-volgorde zetten, zodat ze niet over het hoofd kunnen worden gezien.
- De voorgaande jaren zijn voor de meeste surfers niet nodig (het gaat om de aankomende datums), en kunnen gemist worden. Zo doet de pagina ook zijn naam eer aan: Dienstrooster 2013.
- Al met al is de pagina nu nog maar ... 8kB (i.p.v. 630kB). Dat is dus bijna 80 keer zo snel gedownload.
- De namen voor de lege cellen mogen nog ingevuld worden.
- In het begin van de broncode staat een regeltje dat er uit gehaald moeten worden (aangegeven met een commentaar
<!-- ... -->).
- Met "Bestand > Opslaan als ..." kan je 'm downloaden en aanpassen.
Splitsing
Om de dienstroosters van oude jaren niet meteen weg te gooien, zou je die kunnen promoveren tot "archief-pagina" (die via de pagina van het lopende jaar ingekeken kan worden).
Die pagina kan natuurlijk ook helemaal gerenoveerd worden, maar dat hoeft niet perse, en lijkt me voor een archiefpagina ook niet zo belangrijk: die kan nog lekker vol blijven staan met de Frontpage-fouten.
Alleen de doorhalingen kunnen er even snel uit gehaald worden, met:
zoek 'line-through' / vervang door '' (niets).
Zoiets?
Met vriendelijke groet,
CSShunter
____________
*) In principe dan: soms hebben browsers afwijkingen die gecorrigeerd moeten worden (vooral oudere versies van Internet Explorer, de andere sporadisch).
"Dé grootste en gratis computerhelpdesk van Nederland"
