Hoi lubbersvos,
Er heeft hier even een link gestaan (nu weer weggehaald), en ik heb even gekeken of er iets aan te doen valt.
Het was op de index-pagina nogal een mierenhoop met heel veel takjes van in elkaar geneste frames en framesets geworden.
HTML:
<frameset rows="138,*" frameborder="NO" border="0" framespacing="0">
<frameset frameborder="NO" border="0" framespacing="0" cols="*">
<frame name="topFrame1" scrolling="NO" noresize src="boven.html" target="front" >
</frameset>
<frameset frameborder="NO" border="0" framespacing="0" cols="*">
<frameset frameborder="NO" border="0" framespacing="0" rows="*">
<frameset cols="174,*" frameborder="NO" border="0" framespacing="0">
<frame name="leftFrame" scrolling="NO" noresize src="menu.html" target="front">
<frameset rows="*,27" frameborder="NO" border="0" framespacing="0">
<frameset frameborder="NO" border="0" framespacing="0" cols="*">
<frameset frameborder="NO" border="0" framespacing="0" rows="*">
<frameset cols="*,27" frameborder="NO" border="0" framespacing="0">
<frame name="front" src="home.html">
<frame name="rightFrame" scrolling="NO" noresize src="links.html">
</frameset>
</frameset>
</frameset>
<frameset frameborder="NO" border="0" framespacing="0" cols="*">
<frame name="bottomFrame" scrolling="NO" noresize src="onder.html">
</frameset>
</frameset>
</frameset>
</frameset>
</frameset>
</frameset>
Wat dacht je hiervan:
HTML:
<frameset rows="138,*" framespacing="0" frameborder="NO" border="0" >
<frame name="topFrame" src="boven.html" scrolling="NO" noresize target="front">
<frameset cols="174,*">
<frame name="leftFrame" src="menu.html" scrolling="NO" noresize target="front">
<frame name="front" src="home.html" noresize>
</frameset>
</frameset>
=======
Maar eigenlijk zou ik je een paar heel andere adviezen willen geven.
FrontPage naar de prullenbak!
FrontPage heeft altijd bar slechte html-codes afgeleverd, en wordt de laatste jaren niet meer bijgewerkt: dat maakt het nog erger. - Ook Microsoft zelf raadt FrontPage nu af (wijsheid komt met de jaren!
).
- Bijna hetzelfde qua bediening is KompoZer. Die is gratis, hier te downloaden, en stukken beter.
- Op hun download-pagina kan je desgewenst ook een NL-taalpakket downloaden om erbij te doen.
Frames naar de prullenbak!
Het gebruik van framesets en frame-pagina's was in de oertijd van zo'n 10 jaar geleden schering en inslag. Maar er zitten enorme nadelen aan, de indeling/opmaak van websites kan tegenwoordig anders en ook beter, en frames zijn erg af te raden.
- Nadeel is bijvoorbeeld: als je jullie site in Google opvraagt, zie je een prachtig overzichtje met verschillende pagina's van de site (kan je trots op zijn, dat hebben niet alle sites!). Maar klik je op een vervolg-paginas, dan krijg je alleen die pagina te zien, zonder menu, en kan je niet bij het begin van de site komen.
- Zie verder: Alles over Frames van webrichtlijnen.nl (heel erg goede en degelijke site met veel uitleg & tips).
Tabellen naar de prullenbak!
Ook tabellen werden vroeger veel gebruikt: die gaven houvast voor de opmaak van een website. Rond 2002 begonnen echter al een aantal sites afscheid te nemen van een tabel-opmaak, toegejuicht door webgoeroes als Eric Meyer (
zie hier).
- De kreet was toen: "Look Ma, No Tables!", want het was net uitgevonden; bv. in de gelijknamige layout-voorbeelden Look Ma, No Tables van Eric Costello in 2004 werden een aantal CSS-technieken behandeld.
- Maar er moest nog veel overtuigingsarbeid plaatsvinden, zoals bv. blijkt uit Douglas Bowman's artikel Throwing tables out the window, ook uit 2004. Hij nam de toenmalige tabellen-site van Microsoft onderhanden, en toonde aan waarom en hoe dat veel beter kon. Dat deed MS later ook (zie Still throwing tables).
Hoewel er nog webbouwers (en op internet ronddabberende achterhaalde tutorials!) blijven vasthouden aan een tabel-opmaak, is de norm tegenwoordig anders. Zie:
Richtlijn R-pd.11.1 van de webrichtlijnen.nl.
Wat dan wel? Toveren met CSS!
CSS (Cascading Style Sheets) is nu het toverwoord. Het is erg de moeite waard je daarin wat te verdiepen, want behalve een betere en flexibeler opmaak dan met tabellen kan je er nog veel meer mee bereiken.
Theorie in praktijk
Als je CSS in de praktijk gaat brengen, zie je al gauw de voordelen.
Ter illustratie: twee pagina's uit je site, zonder frames, zonder tabellen.
Toelichting:
- Tussen deze twee kan je schakelen in het menu (de andere menu-pagina's doen het niet).
- Zie de broncode voor de simpele html-structuur.
- Er is één stylesheet luvoh-stylesheet.css met alle opmaak-stijlen, dat voor elke pagina in de site gebruikt wordt. In de <head> van de pagina's wordt het aangehaakt.
- De frameset-pagina is vervallen: de index.html is meteen de homepage.
- De frame-pagina's zijn vervallen: alle pagina's zijn gewone complete pagina's (goed bereikbaar met Google)..
- Het menu staat nu (hetzelfde) op elke pagina: dat is simpel te kopiëren en plakken in nieuwe pagina's.
- Dan hoeft eigenlijk alleen de inhoud van de pagina's aangemaakt te worden.
- Hiervoor kunnen wat aanvullingen in het stylesheet nodig zijn.
- De site is nu erg flexibel geworden en er zijn geen scrollbars als ze niet nodig zijn.
- Als de lettergrootte door de bezoeker anders wordt ingesteld, valt de site niet uit elkaar.
- Hij volgt de standaarden en is cross-browser: doet het bv. in Firefox, Chrome, Opera, Safari en Internet Explorer.
- Hij is op verschillende resoluties goed te bekijken. Bij grotere beeldschermen (bv. 1280*1024px of groter) komt de site horizontaal in het midden gecentreerd te staan. Bij 1024*7698px past het er in de breedte precies op. Bij een klein scherm van 800*600px is de inhoud van de pagina precies leesbaar als je één keer naar rechts scrolt (het menu is dan buiten beeld, maar je kunt mooi doorlezen met de verticale scrollbar).
- Er verschuift niets in het beeld als van venstergrootte of resolutie gewisseld wordt: de site ziet er altijd hetzelfde uit.
- Daarvoor mogen afbeeldingen in de inhoud niet breder dan max. 750px zijn.
- De foto-afbeeldingen zijn geoptimaliseerd: ipv 200kB (homepage) nu 100kB, en ipv samen 102kB (wiezijnwij) nu 40kB, waarmee de pagina's wat sneller zijn.
- Voor de achtergrond van de menu-links is een wissel-image gebruikt: een combinatie-plaatje (4kB) van de gewone toestand en de hover-toestand, waarbij met css wordt geregeld welk partje gebruikt wordt.
- De css zorgt er ook voor dat de pagina die aan staat, in het menu automatisch opgelicht wordt (de html-code voor het menu is hetzelfde).
Zo ongeveer!
=======
Verder zit er in de huige pagina
menu.html een foutje.
Er staat bij de link "Contact":
HTML:
<b><font face="Verdana" size="2" color="#FFFFFF">
<a href="http://contact.html">
<img border="0" src="images/abalbul1.gif" width="15" height="15"></a>
<a href="mailto:.....@online.nl"><span style="text-decoration: none">
contact</span></a></font></b>
Maar de pagina "http://contact.html" bestaat niet, want daar zit geen domeinnaam bij. En met domeinnaam is er ook geen pagina "contact.html" op de site.
Gevolg: als je op "Contact" klikt, wordt in Internet Explorer, Chrome, Opera en Safari ongevraagd je webmail-programma geopend; en in Firefox wordt het menu een witte kolom.
De bezoeker kan alleen maar terug door de pagina te vernieuwen.
Als je dit doet:
- het hele menu-item "Contact" schrappen,
- en van het e-mail adres er onder een "mailto" link maken (zie css-testpagina's),
... ben je daar van af.
Met vriendelijke groet,
CSShunter
