Intro

Drie jaar geleden ruilde ik een loopbaan als krantenredacteur in voor het ongebonden, mondaine en liederlijke leven van de freelancejournalist. En al die tijd was ik van plan om een website op te trekken waarop ik tenminste kan laten zien wat ik doe. Niks fancy, gewoon iets van een paar pagina’s dat als online visitekaartje kan dienen.

Maar als iemand me vraagt waar ze blijft, moet ik hetzelfde antwoord geven als drie jaar geleden: “Ik ben ermee bezig.” Het lijkt namelijk zo’n gedoe.

Onlangs botste ik dan KompoZer, een web authoring tool die eenvoudig genoeg in elkaar zit om snel met een rudimentaire webpagina voor de dag te komen. Deze workshop is overigens ook geschikt voor Mac-gebruikers: de Mac OS X-versie van KompoZer zit krek hetzelfde in elkaar als de Windows-uitvoering.

STAP 1: KompoZer opstarten

Haal eerst even de tool naar je pc. Surf naar www.kompozer.net en klik op de Download-knop. Er wordt een gecomprimeerde map naar je harde schijf gehaald, die je unzipt, waarna je de map opendoet. KompoZer heeft geen installatie nodig, zodat je er meteen mee aan de slag kan. Klik op het uitvoerbare bestand KompoZer, en je bent weg.

Er verschijnt een hoofdvenster met zo’n KompoZer Tips-dialoogvenster erbovenop, maar dat ga ik uitschakelen. Vink Show tips at startup uit en klik op Close. KompoZer bestaat uit twee hoofdcomponenten: het centrale venster waarin je de site optrekt, en een Site Manager-zijbalk om de website(s) die je maakt te kunnen beheren.

Onderaan kan je kiezen uit vier verschillende modi. We zitten in Normal, maar je kan bijvoorbeeld ook een Preview tonen van de site zoals ze eruit zou zien in een browser.

STAP 2: Tekst, structuur en vormgeving

Tijd om dat maagdelijk witte blad onder handen te nemen. Voer in het open venster de tekst in die je op de openingspagina van je website wil zien verschijnen. Je hoeft nog geen rekening te houden met kleurtjes en andere tierelantijnen: dat komt zo meteen wel.

Aangezien ik KompoZer hier gebruik voor de bouw van een ‘professionele’ website – bedoeld om bijvoorbeeld je bijberoep of serieuze hobby aan te prijzen – moet de tekst wervend en helder uitleggen wat ik doe, en moet ik mijn sterke punten in de verf zetten.

Denk even na over de tekst voor je hem aan de pagina toevertrouwt. Als je weg bent met je pagina, sla je hem eerst even op via het menu File, Save. De naam die je hem geeft, komt ook als titel op de tab. Als je meerdere pagina’s in je website wil plaatsen, is het nu het moment om die op te stellen. Klik met de rechtermuisknop op het openstaande tabblad en klik op New Tab.

STAP 3: Lettertype en kleur aanpassen

Tijd om de pagina’s er een beetje lekkerder te laten uitzien. Ik begin met het lettertype. Op dit moment heb ik er nog geen gekozen, waardoor mijn site dus in het standaardfont van de browser (meestal Times New Roman) wordt afgebeeld. Selecteer de tekst die in een bepaald lettertype moet, en verander dat via het menu Format, Font.

Doe daar niet te gek mee: twee, maximum drie verschillende lettertypes over je hele website moeten volstaan, anders wordt je site een rommeltje. Onder datzelfde Format-menu kan je ook de tekstgrootte aanpassen met Size. Verder gaan we ook snel de kleuren veranderen.

Dat gaat opnieuw via Format, waar je onderaan Page Colors and Background kiest. Selecteer Use custom colors, en kies de kleuren voor elk element op je pagina. Uiteraard is het hier een kwestie van alles eerst uit te proberen, zodat je geen kleuren kiest die vloeken met elkaar.

STAP 4: Beelden toevoegen

Tijd om er een beeldje bij te voegen. Niet onbelangrijk als je bijvoorbeeld iets doet dat visueel moet worden voorgesteld, maar ook een portretfoto van jezelf kan nooit kwaad. Ik moet eerst het beeld nog ergens zetten waar de html-code van de pagina het altijd vindt. Parkeer het liefst in dezelfde map als je html-bestand.

Zet de cursor nu op de plaats waar je beeld moet worden ingevoegd en klik bovenaan op Image. Klik naast Image Location op het mapje, selecteer het beeld op je harde schijf en klik op Openen. Vink ook het vakje Don’t use alternate text aan: alternatieve tekst is gemaakt voor browsers die geen beelden doorlaten, en die bestaan al eventjes niet meer.

Ga nu naar de tab Appearance om aan te geven hoe het beeld op je pagina moet: onder Align Text to Image laat je de tekst bijvoorbeeld links of rechts rond je beeld ‘wrappen’. Je kan hier ook al de omvang van je beeld aanpassen, maar dat doe ik zo meteen op een snellere manier. Klik op OK en selecteer vervolgens het (wellicht veel te grote) beeld. Door de beeldhoeken te verslepen, pas je het mooi in je pagina.

STAP 5: Links plaatsen

Nu komt het belangrijkste element: je moet ervoor zorgen dat alle pagina’s op je site naar elkaar doorlinken, en ook links leveren naar andere plaatsen op het internet. Ik begin met een eenvoudige link toe te voegen. Daarvoor selecteer ik een woord of zinsdeel in de tekst, en ga ik naar het menu-item Insert, Link. Er komt een nieuw venster tevoorschijn waarin je de url van je link kan invoeren. Sluit af met OK.

Nu we weten hoe dat werkt, gaan we – heel belangrijk! – van onze website een gesloten circuit maken, met pagina’s die naar elkaar doorlinken. Dat gaat het makkelijkst met een horizontale linkbalk, waarop alle andere pagina’s in je site naast elkaar staan afgebeeld.

Zet die op al je pagina’s, en laat ze naar elkaar doorlinken door er telkens een link met de pagina in kwestie aan toe te voegen. Belangrijk is dat je hier de naam van het bestand volledig juist intikt, met inbegrip van de extensie .html.

STAP 6: Publiceren

Voordat we onze site aan een ftp-server toevertrouwen, is het raadzaam om ze live uit te proberen in je browser. Test even of alle pagina’s naar elkaar doorlinken, zorg ervoor dat alle beelden te zien zijn (is dat niet zo, dan ligt dat meestal aan het feit dat de html-code van je pagina het beeld niet terugvindt), en tweak de pagina’s hier en daar nog wat bij.

Ben je tevreden met het resultaat, dan klik je in de menubalk van Kompozer op Publish. Onder Settings voer je de html- en ftp-adressen van je webruimte in, net als je login en wachtwoord voor die laatste: zorg ervoor dat je alle gegevens van je internetprovider of hostingleverancier bij de hand hebt. Tot slot gooi je alles live via de knop Publish.

Opgelet: publiceren gebeurt per pagina, dus als je site meerdere bladzijden beslaat, moet je dit proces een paar keer herhalen.

External links

KompoZer