Hoi barondesalis,
Wat een vreselijk leuke en uitgebreide en goed gedocumenteerde site!
Ik kom in de verleiding er eens goed voor te gaan zitten en alles op m'n gemak te gaan lezen/bekijken, en daarmee je vragen je vragen te laten.
Maar toch eerst de vragen!
Ad 1
Puur html vormt de basis van elke site, en dat zal zomaar niet verdwijnen. De Google-bot is een soort pure text-browser, die juist alleen maar de html ziet (en geen opmaak of afbeeldingen) en ook niet met javascript of andere scripts uit de voeten kan.
Bijvoorbeeld de inhoud van de pagina
Submenu museumgalerie ziet er in de ogen van Google als volgt uit:
De getallen tussen rechthoekige haakjes zijn de links: dat gaat dus geweldig goed, alle vervolgpagina's kunnen gevonden worden.
Ook de
inline styles in de html-code (in de vorm van
style="text-decoration: none" enz.) zie ik niet gauw verdwijnen. Dat is een verschijningsvorm van CSS; in alle specificaties staat dat dergelijke inline styles mogelijk zijn en toegestaan zijn, en dat zal wel zo moeten blijven. Als browsers daar niet meer aan zouden doen, wordt het kind met het badwater weggegooid. Dan zou 3/4 of meer van de huidige sites qua opmaak in elkaar storten en dat wil geen browserfabrikant op z'n geweten hebben.
Conclusie: over vraag 1 hoef je je niet ongerust te maken.
Wel spelen er een paar andere dingen bij html-codering (zie Overige Opmerkingen hieronder).
=======
Ad 2
Ik denk dat je met KompoZer eigenlijk al een heel eind zult kunnen komen. Dat heeft (net als Frontpage) een WYSIWYG-ontwerpweergave en een code-weergave om zo nodig onder water te kunnen duiken. En de interface van KompoZer is nagenoeg hetzelfde als die van Frontpage. Het essentiële verschil: KompoZer scheidt betere code af!
- Bijkomend voor als je het echt mooi wilt maken: enige studie van CSS + html.
Joomla, Drupla en Wordpress zijn geen recht-voor-z'n-raap webeditors, maar Content Management Systemen. Daar kan je niet zomaar een bestaande site van 600 pagina's in zetten... Je moet de spelregels van het CMS volgen, en dat betekent: een template/model uitzoeken (en aan je wensen aanpassen; zal ook best een karwei zijn), en dan de inhoud op de manier van het CMS er in plaatsen. Alles overnieuw als het ware.
- Bijkomend: leren omgaan met het CMS, + ook studie van CSS + html.
Dreamweaver, MS Expression Web e.d. zijn wèl webeditors (met ook WYSIWYG aan boord, evenals codeview), maar dan van het geavanceerde soort: met allerlei toeters en bellen; daar mag je dan ook flink voor betalen! - Wat ze ook beweren over "makkelijk" en zo: om de mogelijkheden van bv. Dreamweaver te kunnen benutten, heb je wel kennis van zaken (CSS, html) nodig, anders ben je blind bezig (met alle gevolgen van dien). Plus: je moet de uitgebreide interface/handleiding gaan leren, en uitvogelen welke nadelen ze hebben (dat vertellen ze er niet bij), en daar correcties op leren loslaten.
- Bijkomend: Euri sparen, leren omgaan met de editor, + ook studie van CSS + html.
=======
Overige Opmerkingen
Tabellen
Inderdaad beter om die te vervangen door css-opmaak. Zal best een klusje zijn, maar niet alles hoeft tegelijk. En als je eenmaal een css-paginamodel hebt (of een paar, als er diverse soorten pagina's zijn), dan is toevoegen van een extra regel of extra link niet moeilijker dan het bijplaatsen in een tabel. Zit je in de WYSIWYG-weergave, dan geef je na de laatste opsommings-regel een Enter, en je tikt vrolijk verder met de nieuwe regel: alles gaat vanzelf!
- In de WYSIWYG-weergave zie je meteen (het grootste deel van) de opmaak die met een css-stylesheet gemaakt is, dat vereenvoudigt de zaak (je hoeft niet apart in de css te duiken om iets uit te breiden).
Fotogalerij-oplossing
Met wat css en hulp van een klein javascript-bestandje is er best wat moois in elkaar te timmeren.
In plaats van dit soort dingen:
HTML:
<table border="0" cellspacing="0" cellpadding="0" id="fpGalleryTable_4511">
<tr>
<tr><td height="10"></td>
</tr>
<tr />
<script language="JavaScript1.1">
if (navigator.appName == "Netscape")
document.write("<td bgcolor='#AAAAAA' width='1'> </td>");
</script>
<td valign="top" style="border-left-style: solid; border-left-width: 1; border-left-color:black">
<table border="0" cellpadding="2" cellspacing="0" align="center" width="120">
<tr>
<td valign="top" align="center" height="120">
<a href="images/mk-nl-nsa.meteor-300.jpg">
<img border="0" vspace="5" hspace="12" src="photogallery/photo00027083/mk-nl-nsa.meteor-300.jpg" width="100" height="43" title="" /></a>
</td>
</tr>
<tr>
<td valign="top">
<font face="Trebuchet MS"><FONT SIZE="1"></FONT><P><FONT SIZE="1">Meteor - Handelsmerk NSA Schaatsenfabriek N.V., Akkrum - 1950-1980</FONT></P><FONT SIZE="1"></FONT></font>
</td>
</tr>
</table>
</td>
<script language="JavaScript1.1">
if (navigator.appName == "Netscape")
document.write("<td bgcolor='#AAAAAA' width='1'> </td>");
</script>
<td valign="top" style="border-left-style: solid; border-left-width: 1; border-left-color:black">
<table border="0" cellpadding="2" cellspacing="0" align="center" width="120">
<tr>
<td valign="top" align="center" height="120">
<a href="images/mk-nl-meyjes-300.jpg">
<img border="0" vspace="5" hspace="12" src="photogallery/photo00027083/mk-nl-meyjes-300.jpg" width="100" height="54" title="" /></a>
</td>
</tr>
<tr>
<td valign="top">
<font face="Trebuchet MS"><FONT SIZE="1"></FONT><P><FONT SIZE="1">Meyjes & Höweler - Handelsmerk van een Amsterdams winkelbedrijf; ca. 1940</FONT></P><FONT SIZE="1"></FONT></font>
</td>
</tr>
</table>
</td>
<script language="JavaScript1.1">
if (navigator.appName == "Netscape")
document.write("<td bgcolor='#AAAAAA' width='1'> </td>");
</script>
<td valign="top" style="border-left-style: solid; border-left-width: 1; border-left-color:black">
<table border="0" cellpadding="2" cellspacing="0" align="center" width="120">
<tr>
<td valign="top" align="center" height="120">
<a href="images/mk-nl-minkema-300.jpg">
<img border="0" vspace="5" hspace="12" src="photogallery/photo00027083/mk-nl-minkema-300.jpg" width="100" height="37" title="" /></a>
</td>
</tr>
<tr>
<td valign="top">
<font face="Trebuchet MS"><FONT SIZE="1"></FONT><P><FONT SIZE="1">D.G. Minkema - Smidsmerk van Durk Durks Minkema, Oosterlittens - 1884-1920</FONT></P><FONT SIZE="1"></FONT></font>
</td>
</tr>
</table>
</td>
<script language="JavaScript1.1">
if (navigator.appName == "Netscape")
document.write("<td bgcolor='#AAAAAA' width='1'> </td>");
</script>
<td valign="top" style="border-left-style: solid; border-left-width: 1; border-left-color:black">
<table border="0" cellpadding="2" cellspacing="0" align="center" width="120">
<tr>
<td valign="top" align="center" height="120">
<a href="images/mk-nl-mirck.jp.p'end-420.jpg">
<img border="0" vspace="5" hspace="12" src="photogallery/photo00027083/mk-nl-mirck.jp.p'end-420.jpg" width="100" height="50" title="" /></a>
</td>
</tr>
<tr>
<td valign="top">
<font face="Trebuchet MS"><FONT SIZE="1"></FONT><P><FONT SIZE="1">J.P. Mirck - Smidsmerk van J.P. Mirck, Purmerend - ca.1900</FONT></P><FONT SIZE="1"></FONT></font>
</td>
</tr>
</table>
</td>
... kan je dan in de html-code zetten iets als dit:
HTML:
<div id="serie">
<a href="vergroting1.jpg">|<img src="kleintje1.jpg" alt="" title="" /><span>Bijschrift bij deze foto 1</span></a>
<a href="vergroting2.jpg">|<img src="kleintje2.jpg" alt="" title="" /><span>Bijschrift bij deze foto 2</span></a>
<a href="vergroting3.jpg">|<img src="kleintje3.jpg" alt="" title="" /><span>Bijschrift bij deze foto 3</span></a>
<a href="vergroting4.jpg">|<img src="kleintje4.jpg" alt="" title="" /><span>Bijschrift bij deze foto 4</span></a>
<a href="vergroting5.jpg">|<img src="kleintje5.jpg" alt="" title="" /><span>Bijschrift bij deze foto 5</span></a>
... enz.
</div>
...
<script type="text/javascript" src="scripts/fotopagina.js"></script>
</body>
</html>
Heb je eenmaal een kleintje aangeklikt om de vergroting te zien, dan kan je op de vergroting-pagina met
Volgende /
Vorige doorbladeren op de vergrotingen.
- Nieuwe foto erbij? Eén nieuwe regel toevoegen met de bron van het kleintje (voor de overzichtspagina), plus de vindplaats van de vergroting, en klaar.
- Foto er af? Eén regel wissen (de rest sluit vanzelf aan), en klaar!
- Volgorde wisselen? Knip en plak één regel voor de nieuwe tussenliggende (nummervolgorde mag willekeurig zijn), en klaar.
Zo eenvoudig kan het zijn.
Goede html: alle opmaak naar de css!
Wat op je site wel erg aan verbetering toe is, is de html-code zelf (vooral dankzij FP, denk ik). Ik zie bv.:
- Géén Doctype, de eerste vereiste voor een html-pagina (dan weten de browsers welke standaarden ze moeten aanhouden).
- Tags als <font face="Calibri">, die uit de oertijd stammen, en slechte/foutieve html opleveren; dit is een opmaak-regel, die in de css thuishoort.
- Eigenschappen als bgcolor="#201E3E" bordercolor="#201E3E", eveneens verboden waar > te vervangen door css.
- Als je bv. de pagina Nijdam en NSA laat toetsen door de Quickscan van de webrichtlijnen.nl, dan komt er een magere score van 32/47 uit; een aantal basiszaken zijn niet op orde.
Meer over Doctypes, geldige html en browsertoestanden:
zie hier op het forum.
Terzijde: de css maak je één keer, en dat stylesheet haak je aan op elke pagina; daarmee wordt alles sitebreed geregeld.
Frames, hm...
De site is opgebouwd uit frames, om makkelijk gelijkblijvende elementen als de kop en het menu op elke pagina te krijgen. Dat is wel een manier waarop het kan, maar daar zitten enorme nadelen aan vast (zie:
Why frames suck *) en
Alles over frames).
Hetzelfde kan ook anders, en nog heel makkelijk ook.
(zie bv.
hier).
Houd moed!
Met vriendelijke groet,
CSShunter
___________
*) Artikel van 16 jaar geleden (!) van usability-expert Jakob Nielsen - daar heeft FrontPage zich niets van aangetrokken.
[edit]Ah, kruispost![/edit] Ik had deze pagina een paar uurtjes openstaan, en zag de reactie van Tecsman nog niet.
Voor een CMS valt zeker veel te zeggen; gelukkig beweer ik niet het omgekeerde!
