Hallo Bert,
Voor ik het vergeet even over indexeren: zoekmachines indexeren alles wat ze tegenkomen. Je hebt hier 'n pagina neergezet, mogelijk wordt die bezocht door zoekmachines. Zolang je aan het experimenteren bent, wil je waarschijnlijk niet dat Google e.d. je pagina indexeren en vindbaar maken. Als je in de <head> het volgende zet:
<meta name = "robots" content="noindex">
zullen Google, Bing, enz. hem niet indexeren. Niet vergeten weg te halen natuurlijk als het af is.
Ik vind de lay-out 'n stuk beter. Alleen vind ik de roodbruine achtergrondkleur niet prettig. Ik vraag me ook af of 'n oranje letter op roodbruin wel echt prettig leest. Maar dit zijn van die dingen, waarvoor een groter forum eigenlijk beter is. Blauw is mijn lievelingskleur, en rood absoluut niet. Dus het kan ook zijn dat er persoonlijke voorkeur meespeelt. Bij meer meningen filter je dat er min of meer uit.
Ik heb even gekeken hoe 'n kleurenblinde het ziet, en wat dat betreft is er geen bezwaar.
De lay-out vind ik dus persoonlijk een stuk beter, bij de kleuren heb ik wel vragen.
Ik las je stukje over tabellen. Ooit kon je alleen met tabellen een lay-out maken. En allerlei programma's zoals FrontPage gebruikten dat ook. Dan komt er een nieuwe systeem, en dan kost het tijd voordat iedereen daar de voordelen van ziet.
Inmiddels is het zo dat 99,9% van de 'deskundigen' tabellen voor lay-out echt in de ban heeft gedaan. Je hoeft mij niet te geloven, maar kijk maar in een goede boekhandel in boeken over het maken van sites: al jarenlang worden in élk boek tabellen afgeraden, zonder enige uitzondering. Alleen op internet vind je (helaas) nog steeds heel veel cursussen waarin tabellen worden aangeraden. Zelfs nog recente cursussen. Maar in dat soort cursussen stikt het meestal ook van de andere fouten.
Je moet het natuurlijk helemaal zelf weten, maar divs e.d. in plaats van tabellen is écht veel makkelijker, als je het eenmaal onder de knie hebt.
Op het ogenblik werk je met frames. Als je één grote pagina maakt, komen die tabellen van de diverse frames ook nog 'ns bij elkaar te staan. Dus nog dieper genest. Als je dan 'n probleem hebt, wordt het echt 'n ongelooflijk gedoe dat te corrigeren.
Een tabel wordt regel voor regel gelezen. Ook door zoekmachines. Dus eerst de bovenste row, met alle cellen daarin. Dan de volgende, enz. Dat kan dus een totaal andere volgorde en samenhang zijn dan wat een mens op het scherm ziet. Daardoor is een tabel vaak volstrekt onsamenhangende wartaal, ook voor zoekmachines. En ook volstrekt ontoegankelijk voor screenreaders e.d.
Maar het is jouw site, dus de keuze is aan jou. Alleen heeft het echt niets met fundamentalisme te maken: css is gewoon echt een nieuwere en betere techniek dan tabellen voor lay-out.
Boeken over (x)html en css (die gaan altijd samen, als het 'n goed boek is) adviseren kan ik eigenlijk niet. Dat heeft 'n luxe reden: de laatste jaren zijn er eigenlijk geen slechte boeken meer verschenen. Het beste kun je naar 'n goede boekhandel gaan en gewoon kijken wat jou het beste ligt: een opbouw in lessen, lezen van a tot z, voorbeelden uit de praktijk.
Maar eigenlijk heb je volgens mij aan die cursussen voldoende, tenzij je echt sitebouwer wilt worden. Ervaring doe je alleen op door ermee te gaan werken.
Dan de vraag over hoe nu verder. Als het om kompozer gaat, kan ik daar niet echt bij helpen.
De pagina met html moet altijd eindigen op .html. De pagina met css (de stylesheet) moet altijd eindigen op .css.
De css zit bij jou in de pagina zelf. In kompozer kun je die exporten naar een extern bestand. Als je de pagina 'normaal' bekijkt (ik heb de Engelse versie, weet niet wat er precies in de Nederlandse staat, maar het is 'n tab linksonderaan), dan kun je via Tools (Extra?) een css-editor openen. Daarmee kun je een apart stylesheet maken.
Dat stylesheet komt dan in een eigen bestand te staan en is voor élke pagina opnieuw te gebruiken.
Nu komt het probleem: hoe dat moet, weet ik niet. Ik werk zelf nooit met Kompozer, dus vragen daarover kan ik ook niet beantwoorden. Daarvoor kun je beter 'n groter forum proberen of het (Nederlandstalige) forum over Composer/nvu/Kompozer op
http://www.mozbrowser.nl/forum/viewforum.php?f=26
Toch nog even over zonder Kompozer of zoiets werken. Er zijn ook mogelijkheden om veranderingen gelijk te zien, terwijl je toch alles zelf doet.
Kladblok is volstrekt ongeschikt om html/css in te schrijven. Leuk programma, maar niet hiervoor.
Als je notepad++ (let op de ++) installeert, is dat veel geschikter. Dat is Kladblok met twee plussen. Eén van de voordelen is dat je code kleurtjes krijgt, waardoor hij veel leesbaarder wordt. Je kunt ook vanuit notepad++ de code gelijk openen in Firefox/IE/Safari of noem maar op, zodat je ook gelijk veranderingen ziet.
Als je in Firefox zou ontwikkelen (Google Chrome schijnt onderhand evenveel mogelijkheden te hebben, maar dat ken ik nou eenmaal niet zo goed), heb je uitstekende hulpmiddelen die ook gelijk laten zien wat er gebeurt als je iets verandert. Mocht je het willen proberen, dan vind je hier wat extensies (uitbreidingen) bij Firefox die echt heel goed zijn:
http://css-voorbeelden.nl/links.html#a-ger-debug-ff
Ik heb die pagina van jou even 'omgebouwd' naar een aparte html- en een apart css-bestand. Deze pagina zou je als basis voor andere pagina's kunnen gebruiken: gewoon veranderen wat er anders in moet worden. Omdat de opmaak nu helemaal in de css staat, is die geldig voor élke pagina waar je hem aan koppelt.
Dit geeft misschien even 'n beter beeld van hoe html/css er uit komt te zien.
* De css is aan de html gekoppeld via <link rel="stylesheet" enz.
* Tussen <title> en </title> zet je de titel van de pagina. Dat is wat je bovenin de browser ziet.
* Bij het menu miste de <ul> en </ul>. Die heb ik toegevoegd. Bij de css voor <ul> heb ik list-style-type, margin en padding toegevoegd. Margin en padding is verschillend in diverse browsers, dus die moet je altijd even zelf opgeven. Lijst-style-type: none verwijdert de balletjes e.d. bij een lijst.
* Binnen een lijst mag er niets buiten de <li> staat. Bij jou stonden er <br>'s. Die heb ik weggehaald. Waar de scheiding moest komen, heb ik de <li> onder de scheiding een class="scheiding" gegeven. In de css heb ik die <li>'s een marge aan de bovenkant gegeven.
Zou je nu besluiten de scheiding groter/kleiner te maken, weg te halen, noem maar op, hoef je maar op 1 plaats voor de hele site een wijziging aan te brengen, en niet in elk bestand een <br> toe te voegen of zo.
* In div#content heb ik de <br>'s weggehaald. Als je de tekst in <p>'s zet, krijgen die automatisch een marge boven en onder (die je aan kunt passen met css).
Voor de bovenste <p> heb ik in de css toegevoegd:
#content p:first-child: margin-top: 0;
In normale taal; een <p> binnen #content. Maar alleen als die het EERSTE kind is, dus alleen de eerste <p>. Nu wordt alleen bij de bovenste <p> de marge bovenaan verwijderd.
(:first-child is iets waar veel mensen moeite mee hebben, maar dat soort dingen leer je vanzelf wel)
* De charset heb ik veranderd in utf-8. utf-8 is met stip de beste. Je mag dat gewoon geloven of, als je daar lol in hebt, hier het uitgebreide waarom en zo lezen:
http://css-voorbeelden.nl/artikelen/htm ... n-064.html
Jouw copyright-teken verscheen bij mij als een vraagteken. Dat kun je op twee manieren voorkomen: utf-8 gebruiken (en je tekst ook opslaan als utf-8, elke goede editor kan dat. Kun je meestal instellen bij voorkeuren of zoiets). Of een 'entiteit' gebruiken. Voor het copyright-teken is dat ©
* In het menu heb ik bij schaatsenmakers een link toegevoegd. Dat moet je dus voor elke link doen. De <title> is van belang voor zoekmachines, spraakbrowsers, e.d.
De text-decoration en color heb ik weggehaald bij #navigation. Die hebben namelijk alleen maar invloed op een link <a> als je ze rechtstreeks bij die link opgeeft. Dus in de css is ook verschenen #navigation li a (links die binnen een lijst-ingang liggen, die weer binnen #navigation ligt).
Nou, dat is nogal wat informatie. Vermoedelijk ben je inmiddels wat groen en blauw uitgeslagen
Maar op dit moment hoef je eigenlijk niet veel meer dan dit te weten om verder te gaan. De meeste pagina's zullen in principe vrijwel hetzelfde worden, met alleen andere inhoud. Voordeel van externe css is ook bijvoorbeeld, dat je bij meer pagina's kunt uitproberen of de kleuren bevallen. Wil je ze wijzigen, dan hoeft dat alleen maar in dat ene externe stylesheet.
Het is natuurlijk jouw site en ik kan me goed voorstellen dat je voor Kompozer kiest, omdat dat makkelijker lijkt. Ik schrijf lijkt, omdat ik het persoonlijk veel makkelijker vind om dingen met de hand te doen dan zo'n programma te leren kennen, met alle vreemdigheden die elk programma heeft. (Ben trouwens bepaald niet de enige die dat makkelijker vindt.) Alleen: als je voor kompzer kiest, dan kan ik je niet helpen met vragen over dat programma. Dat kost me te veel tijd, want dan moet ik daar eerst zelf mee leren werken. Ik kan wel altijd vragen over html/css beantwoorden, maar hoe je dat dan in Kompozer moet aanbrengen, daar haak ik dan af.
O ja. Dat menu, dat komt natuurlijk op (vrijwel) elke pagina terug. Net zoals mogelijk de header en de footer. Als je enkele pagina's hebt die helemaal goed zijn, zou je dat kunnen vervangen door aparte bestandjes. Je voegt dan dat bestand in, zodat je niet op elke pagina opnieuw dat menu neer hoeft te zetten. Empirisch is namelijk aangetoond dat het tot neerslachtigheid lijdt als je later een pagina wilt toevoegen of verwijderen
Als je php of ssi gebruikt om menu e.d. in te voegen, hoef je maar op één plaats 'n wijziging aan te brengen. Maar beter is om wel eerst even 'n paar pagina's te maken, zodat je zeker weet dat alles goed werkt.
P.S.: waar ik niet naar heb gekeken: waarschijnlijk kan er nog heel wat css uit, zoals font-style: normale. Programma's als Kompozer zetten er meestal heel wat overbodige css in. En er kan waarschijnlijk ook wel wat gecombineerd worden.
En ps 2: font-family klopt niet helemaal. Namen met spaties moeten tussen aanhalingstekens. En ik zou er sans-serif aan toevoegen. Als iemand dan geen Trebuchet MS heeft, wordt in ieder geval een font zonder schreef (dwarsstreepjes) gebruikt:
font-family: "Trebuchet MS", sans-serif;
Code: Selecteer alles
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="stijl.css">
<title>Het virtuele schaatsenmuseum</title>
</head>
<body>
<div id="container">
<div id="banner">
<img width="980" height="180" alt="fragment from painting Cable" src="images/alg-banner-n.jpg">
</div>
<div id="titelbalk">titel en paginanummers</div>
<div id="navigation">
<ul>
<li><img width="43" height="21" alt="engelse vlag" src="images/alg-vlg.gif"><br><br>baanschaatsen</li>
<li>kunstschaatsen</li>
<li>ijshockeyschaatsen</li>
<li>zwierschaatsen</li>
<li>bijzondere schaatsen</li>
<li>krulschaatsen</li>
<li>kinderschaatsen</li>
<li class="scheiding"><a href="schaatsenmakers.html" title="schaatsenmakers">schaatsenmakers</a>schaatsenmakers</li>
<li>merktekens en etiketten</li>
<li class="scheiding">schaatsen-abc</li>
<li>schaatsdisciplines</li>
<li>historische ontwikkeling</li>
<li class="scheiding">kampioenen</li>
<li>wereldrecords</li>
<li class="scheiding">bibliotheek</li>
<li>galerie</li>
<li>museumwinkel</li>
<li>spreekbeurt</li>
</ul>
</div>
<div id="content">
<p>Hier komt de content. Het uitgangspunt is dat er twee kolommen zijn, horizontaal verdeeld in verschillende 'compartimenten' van 300px breed en een padding van 1px. In het midden wordt een margin van 2px aangehouden. Doorgaans zal in het ene compartiment een foto worden getoond en in het naastliggende de begeleidende tekst. Alle foto's zijn 300px breed. </p>
<p>Soms zullen de horizontale compartimenten worden gefuseerd tot een groot veld van 606px met een padding van 1px. Dit om zo nu en dan een grote foto te kunnen plaatsen.<br><br>Deze opzet is gekozen om het geheel 'rustig' te houden.</p>
<p>Ik vraag mij af of ik hiervoor toch maar niet weer gebruik moet gaan maken van tabellen. Dat lijkt mij het gemakkelijkst te werken. En verschillende deskundigen hebben daar praktisch gezien geen enkel bezwaar tegen. Het zou bij voor- en tegenstanders meer om 'fundamentalisme' gaan.<br><br><br><br><br><br><br><br><br><br><br><br></p>
</div>
<div id="right">Dit wordt de rechterkolom. Hier is plaats voor detailfoto's en toelichtende teksten.</div>
<div id="footer">
<div>home | sitemap | auteursrechten | contact</div>
</div>
<div id="copyright"><br>Copyright © 2002-11 Het virtuele Schaatsenmuseum. Alle rechten voorbehouden.</div>
</div>
</body>
</html>
Code: Selecteer alles
#banner {
padding: 0px;
margin-bottom: 15px;
width: 980px;
height: 180px;
}
#container {
border: 1px solid #930000;
margin: 0px;
background-color: #660000;
width: 980px;
font-family: Trebuchet MS;
color: #ffff99;
}
#navigation {
margin: 0px 4px 0px 0px;
padding: 3px 3px 3px 0px;
float: left;
font-family: Trebuchet MS;
list-style-type: none;
text-align: right;
width: 177px;
font-size: 9pt;
}
#navigation ul {
text-decoration: none;
text-align: right;
list-style-type: none;
margin: 0;
padding: 0;
}
#navigation li a {
text-decoration: none;
color: #fc3;
}
#navigation ul li.scheiding {
margin-top: 16px;
}
#right {
padding: 3px 0px 3px 3px;
float: left;
width: 183px;
text-align: left;
font-size: 9pt;
color: #ffcc33;
}
#content {
padding: 3px 0px;
float: left;
margin-right: 4px;
background-color: #930000;
width: 606px;
font-size: 11pt;
}
#content p:first-child {
margin-top: 0;
}
#titelbalk {
margin-top: 15px;
margin-bottom: 10px;
height: 25px;
padding-top: 6px;
padding-bottom: 3px;
width: 980px;
font-size: 14pt;
text-align: center;
background-color: #930000;
font-weight: normal;
}
#footer {
position: relative;
text-align: center;
clear: both;
max-width: 980px;
background-color: #930000;
top: 10px;
max-height: 30px;
}
#copyright {
width: 980px;
color: #ffcc33;
font-size: 8pt;
top: 30px;
clear: both;
text-align: center;
height: 40px;
}