1 ONTWERP JE EIGEN MET KOMPOZER 2006 Auteur en Copyright Freek Pol. Dit document mag worden gekopieerd en / of verspreid worden zonder toestemming van...
Inhoudsopgave Voorwoord Inleiding Hoofdstuk 1 Voorbereiding Hoofdstuk 2 Eerste pagina Hoofdstuk 3 Een nieuwe pagina Hoofdstuk 4 Hyperlinks Hoofdstuk 5 Controleren HTML-code Hoofdstuk 6 Een fotopagina maken Hoofdstuk 7 Meerdere foto’s toevoegen Hoofdstuk 8 Introductiepagina Hoofdstuk 9 Linkpagina Hoofdstuk 10 Publiceren van de website Hoofdstuk 11 Een tweede website Hoofdstuk 12 Ankers Hoofdstuk 13 Werken met lagen
2 4 6 9 17 20 24 27 31 38 43 45 50 55 57
Extra Bijlagen Informatie over kleuren Je website laten vinden Bezoekersteller / Gastenboek Fotoalbum maken met JAlbum Cascading Style Sheets Domeinnaam CSS Templates
59 60 61 62 68 70 71
1
Voorwoord. Dit cursusboek is in eerste instantie bedoeld voor docenten van SeniorWeb, die aan senioren willen leren, hoe je een website maakt binnen een leercentrum van SeniorWeb Nederland. Bij het schrijven van dit cursusboek is echter ook rekening gehouden met mensen die geen docent zijn en mensen die niet in de gelegenheid zijn om een cursus te volgen en het dus zonder hulp moeten doen. Ook dan kun je zelfstandig met dit boek leren een website te maken, ook al heeft leren in groepsverband (gezellig onder elkaar met ondersteuning) de voorkeur. Je kunt zelf leren HTML te schrijven, maar dat is niet iets dat je even op een zondagmiddag kunt leren, daar is het te complex voor. Het programma dat we in deze cursus gebruiken is de web-editor KompoZer en dat is ‘open source’. Open source programma’s zijn programma’s die gemaakt worden door professionele programmeurs op vrijwillige basis. Zij stellen die programma’s gratis ter beschikking (zoals bijvoorbeeld het besturingssysteem Linux), vanuit de filosofie dat het internet en de programma’s die je voor je computer en internet nodig hebt, voor iedereen toegankelijk moeten zijn, waar ook ter wereld. Daaruit volgde voor deze cursus automatisch de gedachte om de programma’s, die je nodig hebt om een website te bouwen, allemaal open source te laten zijn. Dat wil zeggen: gratis te gebruiken en te verspreiden en desnoods te verbeteren of aan te passen, voor iedereen, waar ook ter wereld. De software is ruim voor handen en van goede kwaliteit, de programma’s doen wat ze beloven te doen. Om uitsluitend die reden is hier voor KompoZer gekozen. Het programma wordt nog steeds ontwikkeld, alleen gebeurt dat in een heel langzaam tempo. Het kent lang zoveel mogelijkheden niet als een commercieel programma maar is toch geschikt genoeg om een uitgebreide basis website mee te maken, zonder al te veel toeters en bellen. Het doet wat het moet doen: webpagina’s maken met correct HTML gebruik, zodat je zelf geen HTML hoeft te leren. In tegenstelling tot veel andere web-editors is de HTMLcode die het programma schrijft foutloos. KompoZer ondersteunt bijvoorbeeld niet het gebruik van frames (een frame is een soort raamwerk waarin twee, drie of wel vier pagina’s geplaatst kunnen worden en die, wanneer je ze in de browser zou bekijken, tegelijkertijd geladen worden. Je ziet één pagina, maar het zijn er dus meer). Een goed voorbeeld van een frames pagina is de website van SeniorWeb West Betuwe. Je zit links het menu (een pagina) en rechts zie je het hoofdscherm (ook een aparte pagina). De beide pagina’s zijn gescheiden door een schuifbalk: http://www.swwb.nl Het werken met frames in een website is populair: het is vaak prettig navigeren, maar voor blinden en slechtzienden die van spraakgestuurde software gebruik moeten maken is het waardeloos omdat niemand het programma vertelt welke pagina als eerste moet worden voorgelezen. Daarnaast maken alle web-editors veel foute HTML code in frame 2
pagina’s. Om die reden hebben de KompoZer ontwikkelaars er van afgezien om het maken van websites opgebouwd uit frames te ondersteunen. Daarnaast kent KompoZer geen invoegtoepassingen om bijvoorbeeld een flash filmpje in te voegen. Een Flash website is een dynamische website die geheel is opgebouwd uit zogenaamde flash (film) bestanden. Als je in een later stadium een website wilt maken met allerlei flash bestanden, lichtkranten, zul je er een andere editor bij nodig hebben. Dat KompoZer dit allemaal niet ondersteunt, heeft allemaal te maken met correct HTML gebruik. Bovendien: wat heeft een blinde / slechtziende aan een schitterend heen en weer bewegende flitsende tekstbalk of aan een filmpje? KompoZer is uitgesproken sober, maar het voldoet voor iedereen, jong en oud. Dit lesboek had ook kunnen heten: websites bouwen voor jong en oud. Leren is tenslotte niet iets dat alleen senioren aangaat. In dit boek leer je stap voor stap een website bouwen, tot en met het publiceren van je website op het internet. Als je redelijk goed bekend bent met de computer, het internet en het gebruik van een tekstverwerker en alle handelingen die daar bij horen gemakkelijk kunt uitvoeren, zul je het bouwen van een website zonder al te veel problemen snel onder de knie krijgen. Dit cursusboek wordt door twee groepen mensen gebruikt. Een groep mensen die de cursus van het internet hebben gehaald en de cursus zelfstandig doen en een groep mensen die een cursus volgen in een lokaal met een docent voor de klas. Dat heeft voor verwarring gezorgd. De cursus is nu zo opgezet dat de uitleg voor beide groepen duidelijk zou moeten zijn en dat het niet zou mogen uitmaken tot welke groep je behoort. In deze uitgave heb ik zoveel mogelijk geprobeerd verwarring hierover te voorkomen. Kom je toch onduidelijkheden tegen, snap je bepaalde dingen niet of kom je een fout tegen, laat mij dit alsjeblieft weten. Een handleiding / cursus boek schrijven is en blijft mensenwerk: [email protected] Je kunt als dat je voorkeur heeft, ook een dubbelzijdig in kleur geprinte en ingebonden versie bestellen. De kosten hiervoor bedragen 15,00 euro, inclusief verzendkosten. Aanvragen via e-mail.
3
Inleiding. Een website of homepage op het internet bestaat uit één of meerdere pagina’s. Om deze webpagina’s te maken heb je een programma nodig om zogenaamde HTML pagina’s te maken. Het is niet veel meer dan een veredelde tekstverwerker. Het verschil met een gewone tekstverwerker zoals Word of WordPerfect is dat een HTML editor alle tekst die je schrijft automatisch omzet naar HTML en alle andere dingen die je invoegt ook automatisch omzet naar HTML code. Dit wordt ook wel een ‘what you see is what you get’ editor genoemd. Alles wat je schrijft en invoegt wordt precies zo in HTML door de browser weergegeven. Andere bekende editors zijn Microsoft FrontPage 2003 en Adobe Dreamweaver. Dit zijn de moeilijkste en duurste programma’s, respectievelijk 300 en 500 euro. FrontPage is in 2007 geheel vernieuwd en heet nu Microsoft Expression Web (nog niet naar het Nederlands vertaald) en Dreamweaver is sinds 2007 ook in het Nederlands beschikbaar. Welke editor je ook neemt, er zijn er nog veel meer, ze hebben allemaal hetzelfde nadeel: ze maken veel fouten in de te schrijven HTML code. Nu kun je je afvragen of dat allemaal wel zo erg is, tenslotte schrijven ook maar weinig Nederlanders foutloos Nederlands. Hier ligt dat toch iets anders. De meeste mensen gebruiken de browser Internet Explorer, gevolgd door de browser Firefox en Opera of Safari. Al die browsers handelen HTML anders af. Internet Explorer vindt de meest grote fouten nog toelaatbaar en laat alles zien zoals het moet. Firefox is veel strenger en laat maar weinig fouten toe. Dit zal als resultaat hebben dat een webpagina met wat fouten er in, in Internet Explorer er heel anders uit kan zien dan in Firefox of een andere strenge browser. Om die reden willen we foutloos HTML zodat we gelijk weten: wordt mijn website goed in Firefox weergegeven, dan wordt mijn website in zijn algemeenheid ook goed in andere browsers weergegeven, en daar is het om te doen. Het gaat er dus niet om welke browser beter is, maar dat goede HTML in alle browsers ook goed wordt weergegeven. Om die reden is het aan te raden om je eigen werk in Firefox te bekijken en niet in Internet Explorer. Firefox geniet onder website bouwers een duidelijke voorkeur en Internet Explorer wordt nauwelijks gebruikt! HTML HTML is de afkorting voor: Hyper Text Markup Language (vooral niet onthouden). Het is een taal die aan de browser ‘vertelt’ hoe alles op de internetpagina moet worden weergegeven. HTML is dus geen programmeertaal, het legt alleen de opmaak en de structuur van de pagina vast. HTML is eigenlijk al verouderd en de opvolger van HTML is XHTML (Extensible Hyper Text Markup Language) en dat kom je ook al vaker tegen, maar nog steeds worden de meeste pagina’s in HTML gemaakt. Op de lange duur zal XHTML het gewonen HTML helemaal gaan vervangen, maar zover is het nog lang niet. Computers zijn op zichzelf nogal domme dingen, ze begrijpen niet waar op een pagina een kop en titel moeten staan en welke afbeelding er op een bepaalde positie geplaatst moet worden. Voor al die specifieke onderdelen en de te bepalen posities moeten dus codes worden geschreven, zodat de browser ‘weet’ hoe hij alles moet weergeven. Die geschreven code heet HTML.
4
Omdat KompoZer foutloos HTML schrijft, gaan we in deze cursus geen aandacht besteden aan HTML, of een poging doen het je te leren. Daarvoor is het een te complexe taal. Webpagina’s kun je dus gewoon op je eigen PC maken met een programma en later op het internet zetten. Dit heet uploaden. Dit doe je in de regel met een FTP programma (File Transport Protocol), waarover later meer. Je stuurt alle bestanden dan met een FTP programma naar een server die jouw pagina’s zichtbaar maakt op het internet, bijvoorbeeld naar de ruimte die je hebt gekregen van je eigen provider om een eigen website neer te zetten. Niet alle providers ondersteunen het FTP gebruik. Je moet dus voordat we zover zijn uitzoeken hoe je bij je provider bestanden kunt uploaden. Kreeg je enkele jaren geleden nog webruimte van je provider om een homepage neer te zetten, de laatste tijd tref je dat nog maar bij weinig providers aan. Wil je nu serieus een website gaan maken, publiceren en vervolgens onderhouden dan is de beste keuze om een eigen domein te kopen. Je koopt voor een paar tientjes per jaar bij een host provider een eigen domein waar je je website kunt laten plaatsen. Meer hierover in de bijlage. Een webpagina met alleen maar kale tekst is niet echt uitnodigend, daarom werken we ook met opgemaakte tekst en met afbeeldingen. Lang niet alle afbeeldingen zijn daar echter geschikt voor, óf omdat de afmeting van de afbeelding veel te groot is, óf omdat de bestandsgrootte veel te hoog is. Een afbeelding met een bestandsgrootte van 50 KB laat zich nu eenmaal sneller bekijken in een browser dan een afbeelding van 300 KB. In een webpagina moeten daarom bestanden zo klein mogelijk zijn. Weliswaar heeft 70% van de Nederlanders een breedband internet verbinding, maar 30% met het nog gewoon doen met een telefoon internet verbinding. Voor deze laatste mensen geldt: een webpagina met 10 foto’s van bijvoorbeeld 1 MB, daar loopt een PC op vast, of de bezoeker loopt weg omdat het laden van de afbeeldingen veel te langzaam gaat. Dat willen we nu juist voorkomen. Niet alleen de grootte van de foto is van belang, maar vooral het bestandsformaat. We hebben dus een foto bewerkingsprogramma nodig voor aanpassingen. In deze cursus maken we gebruik van het foto bewerkingsprogramma PhotoFiltre (Nederlandstalig). Overal in deze handleiding, zult je iets moeten doen. Wanneer je een opdracht moet doen of iets moet uitvoeren staat er een symbool voor: blauw handje.
5
Hoofdstuk 1 Voorbereiding. 1. Mensen die een cursus volgen in een seniorweb leercentrum zullen de bestanden die nodig zijn voor deze cursus allereerst van het internet moeten downloaden. Voor de mensen die deze bestanden al hebben, ga door naar 2. Start de browser en typ in de adresbalk: http://www.kompozer.nl Klik vervolgens op de Download Kompozer pagina en download Kompozer. Kies voor het bestand opslaan. 2. Afhankelijk van de plaats waar je gedownloade bestanden opslaat: verplaats het Zip bestand naar Mijn documenten, klik het aan (éénmaal!), doe rechter muisklik en kies voor: Winzip > Extract to here. De map wordt nu uitgepakt. Er bevindt zich nu in de map Mijn documenten een map Cursus Kompozer 2009. 3. Maak in de map Mijn documenten nog een map aan en noem deze MIJN HOMEPAGE. 4. Open (dubbelklik) de map Cursus Kompozer 2009 5. Selecteer de map Afbeeldingen, klik op het tabblad Bewerken en klik met de linker muisknop op kopiëren. Open nu de map MIJN HOMEPAGE, klik op het tabblad bewerken en klik nu met de linker muisknop op Plakken. 6. Open de map Programma’s (in de map Cursus KompoZer), open de map KompoZer 0.7.10 klik op het pictogram kompozer.exe
Doe rechter muisklik en kies voor kopiëren naar > Bureaublad (snelkoppeling). 7.
Alle bestanden die nodig zijn voor de basis website die we gaan maken staan nu op de goede plaats.
6
Het programma KompoZer is een zogenaamd portable (draagbaar) programma. Dit wil zeggen dat het programma geen installatie bestand kent en dus niet geïnstalleerd hoeft te worden op de computer. Het is direct oproepbaar. Als je KompoZer voor de eerste keer opstart, zie je dat alles in het Engels staat (krijg je een waarschuwing vanwege een niet ondertekende digitale handtekening, deze waarschuwing negeren en gewoon doorgaan). In de map van KompoZer zit echter een taalbestand om het programma om te zetten in de Nederlandse taal. Open KompoZer, ga naar het tabblad Tools, klik op het item Extensions, klik op Install, navigeer naar de map KompoZer, klik het bestaan aan: kpz-langpack-nlNL.xpi Klik op openen en na een paar seconden klik je op install Als je Kompozer nu afsluiten en opnieuw start is het programma in het Nederlands.
Het komt voor dat ondanks een succesvolle installatie van het taalbestand Kompozer zich met geen mogelijkheid in het Nederlands laat instellen. Is dat het geval? Ga dan weer terug naar de website en download en installeer Nvu. Na installatie vindt je direct een snelkoppeling in je taakbalk. Als je alles goed hebt gedaan. Zijn er in de map Mijn documenten twee mappen bijgekomen: De map Cursus Kompozer en de map MIJN HOMEPAGE. De opmaak. Voordat we daadwerkelijk gaan beginnen met het bouwen van een website heb je waarschijnlijk al een idee wat voor website dit moet worden? Je hebt al diverse websites bekeken, waarvan je de ene prachtig vond en de andere weer lelijk. Maak voor jezelf een lijstje met antwoord op de volgende vragen: * * * *
Voor wie maak ik deze website (doelgroep)? Wat voor bezoekers bekijken mijn website? Welke informatie ga ik gebruiken voor mijn website? Hoe moet het uiterlijk worden, zakelijk, sober of juist vrolijk?
Deze informatie zal grotendeels bepalen, hoe je website er uiteindelijk uit komt te zien voor wat betreft opmaak, tekst, kleurgebruik, afbeeldingen en de wijze van navigeren. Een website moet er aantrekkelijk uitzien, zodat je er niet alleen zelf plezier aan beleeft, maar waar ook je bezoekers met plezier naar zullen kijken. Beperk je tot de informatie die bij het onderwerp past. Wees consequent in je opmaak en gebruik voor alle pagina’s dezelfde achtergrondkleur of achtergrondafbeelding. Gebruik ook altijd hetzelfde lettertype en dezelfde lettergrootte. 7
De meest gebruikte lettergrootte is 12 punten, gebruik geen kleiner. Het bovenstaande zullen we in deze cursus in onze eerste oefening nu juist niet doen. We gebruiken alles door elkaar, zodat duidelijk wordt dat een consequent ontwerp het meeste kijkplezier geeft. Iedere keer als Kompozer wordt opgestart, krijg je een scherm voor je met tips. Haal onderin het scherm het vinkje weg, zodat dit een volgende keer niet meer gebeurt en klik ook in de linkerkolom, de site manager weg (kruisje rechtsboven in de kolom) aangezien we deze niet gebruiken.
8
Hoofdstuk 2 De eerste pagina. Voordat we verder gaan: sluit alle schermen. Open de map Cursus Kompozer 2009 en open vervolgens de map Programma’s. Installeer de browser Firefox (dubbelklik op het Firefox Setup 3.0.7. exe pictogram). Maak van Firefox je standaard browser. Bij de eerste keer starten van Firefox wordt gevraagd of je Firefox als tandaard browser wil, kies voor Ja. Installeer het programma PhotoFiltre (lees het lees-mij-eerst tekstbestand!) Start het programma KompoZer via het pictogram op het bureaublad of via snelstarten onderin de taakbalk. Oriënteer je maar eens op alle knoppen. Als je met je muis een knop aanwijst, verschijnt er een onderschrift (alternatieve tekst). Hiermee wordt aangegeven wat de functie van deze knop is. Neem hier even de tijd voor.
De werkbalk lijkt erg veel op de werkbalk van een tekstverwerkingsprogramma, maar ook op de werkbalk van je browser, waarmee je diverse taken kunt uitvoeren. Met de derde knop van links opslaan, kun je de pagina’s opslaan op je eigen computer. De pagina’s worden opgeslagen als een html pagina. Ook al is de pagina die je voor je hebt nog helemaal leeg, klik op: opslaan Er verschijnt nu een scherm waarin je de titel van de huidige pagina moet opgeven.
Type: Welkom op de website van..je eigen naam Dit is de naam die in het titelvenster te lezen is als je de pagina weer opent.
9
Er verschijnt nu weer een scherm met opslaan als, waar je de locatie en de bestandsnaam moet kiezen om de pagina op te slaan. Dit moet natuurlijk de map mijn homepage zijn. Selecteer deze map, klik op openen en haal nu de bestandsnaam van: welkom op de website van… helemaal weg en verander dit door index.
Ter verduidelijking. De eerste pagina van een website wordt altijd en in alle omstandigheden de index.html genoemd. Als je meerdere webpagina’s hebt, dan weet je nu dat de openingspagina van je website de index.html pagina is. Dit is namelijk de belangrijkste pagina. Als iemand met een zoekmachine naar een website zoekt of in de browser een internet adres intypt, gaat de browser altijd op zoek op de server naar de index.html om die als eerste te laten zien. Hoe je de overige pagina’s noemt is niet belangrijk, maar zonder index wordt je website niet gevonden en is die dus onvindbaar. Het grote witte vlak dat je nu onder de werkbalken in KompoZer ziet is in feite je internetpagina. Hierin kun je dus teksten, plaatjes enzovoort gaan plaatsen. Tekst invoegen, gaat op dezelfde manier als in Word. Dit geldt ook voor het veranderen van je lettertype (GROOT, klein, cursief, vet, kleur, uitlijning enzovoort. Om een ander lettertype te selecteren ga je via het tabblad Opmaak / Lettertype naar het lettertype dat je voorkeur heeft, maar let hierbij wel op. Niet iedere PC heeft dezelfde lettertypen. Het lettertype dat je wilt gebruiken kan bij een andere gebruiker afwezig zijn. Gebruik dus een veelvoorkomend en standaard lettertype, zoals: Arial, Arial Black, Courier New, Tahoma, Comic-Sans, Georgia, Impact, Times New Roman, Trebuchet en Verdana. Je kunt bijvoorbeeld het lettertype Agnes wel heel mooi vinden, maar als de PC van je bezoeker dit lettertype niet heeft krijgt hij gewoon een standaard lettertype te zien en zo gaat het beoogde effect dus verloren. Type in je lege pagina: Welkom op de website van..je eigen naam De tekstgrootte staat standaard ingesteld op variabele breedte, dat wil zeggen dat de bezoeker van je website het lettertype en de grootte te zien krijgt, zoals dat op zijn / haar computer is ingesteld. Deze knop vindt je in de werkbalk onder tekst.
10
Je kunt met deze knop de tekstgrootte instellen, maar ook een alinea instellen of terug naar de standaard tekst. KOP1 heeft de grootste letter, KOP6 de kleinste. Zodra je aangeeft dat kop 1 weergegeven moet worden zal dat ook op de computer van de bezoeker worden weergegeven. Zet de cursus maar ergens in de eerste regel en geef deze kop 1 mee. Je kunt met deze knop ook De opmaak Met de knop Opmaak in de werkbalk kunnen we de pagina opmaken. Klik daar op het item: paginakleuren en achtergrond. Er verschijnt nu een venster, zet het bolletje voor: Aangepaste kleuren gebruiken.
Nu is het mogelijk om voor alle onderdelen in het scherm andere kleuren te gebruiken, dan de standaard kleuren. Wil je achtergrondkleur, dan klik je op de knop naast de 11
tekst achtergrond. Er verschijnt dan een kleurenkiezer waar mee je kleuren kunt wijzigen. Wijzig normale tekst in rood. Wijzig de achtergrondkleur in lichtblauw. klik op OK Klik nu in de werkbalk op Opslaan en vervolgens op de knop Bekijken. De browser wordt gestart en laat de pagina nu zien. Vergeten om een pagina op te slaan? Dat is niet erg, je wordt er automatisch op gewezen als je een pagina niet hebt bewaard als je op de knop Bekijken klikt. Als je nog niet eerder met de browser Firefox hebt gewerkt en je start de browser, dan zal er een scherm verschijnen dat toestemming vraagt om een invoegtoepassing te laten starten om het http-protocol te laten uitvoeren. Geef hiervoor toestemming en laat de computer dit onthouden. Ga terug naar KompoZer. Het invoegen van bestanden Geef allereerst twee maal een Enter aan het einde van de eerste regel. Klik in de menubalk op: invoegen Kies in het menu dat verschijnt: Afbeelding Klik in Nvu op de knop: bestand kiezen en in Kompozer op het gele mapje
12
Nu verschijnt de map: mijn documenten Open in de map mijn documenten: de map mijn homepage en vervolgens de map: Afbeeldingen. Selecteer de afbeelding: bosjebloemen.jpg Klik vervolgens op Openen In het scherm dat verschijnt staat een bolletje voor alternatieve tekst: vul hier altijd concreet in waar het hier om gaat, in dit geval vul je in: foto van een bosje bloemen. Klik op OK en vervolgens in de werkbalk op: Opslaan. Bekijk nu de pagina in je browser en vervolgens weer sluiten.
Alternatieve tekst Alternatieve tekst is vooral en met name belangrijk voor blinden en slechtzienden die met gesproken tekstsoftware moeten werken. Wanneer er geen alternatieve tekst wordt gebruikt, zal een blinde / slechtziende veel moeite hebben om te navigeren op een website. Vooral omdat de spraakgestuurde software die zij gebruiken de alternatieve tekst kan voorlezen. Stel je hebt een pagina gemaakt met een flink aantal foto’s zonder alternatieve tekst te hebben gebruik. Er wordt niks voorgelezen en de foto’s worden niet herkend, dus blijft het stil. Deze bezoeker zal geen idee hebben wat er op de website te zien zal zijn. De oorspronkelijke doelstelling van het internet was (en dat is het nog steeds): gratis en vrije informatie toegang voor iedereen, waar ook ter wereld. Als je daar het belang van inziet zul je niet gauw vergeten alternatieve tekst te gebruiken. Invoegen van een afbeelding Een afbeelding in een pagina wordt altijd daar ingevoegd, waar de cursor staat. Staat de cursor in het midden van de pagina dan wordt een afbeelding dus gecentreerd ingevoegd. Je kunt dus al van te voren bepalen waar een afbeelding wordt ingevoegd. De afbeeldinglocatie (dit is de map waar de afbeelding is opgeslagen; de map Afbeeldingen) mag in de webpagina nooit een verwijzing hebben naar een andere map of locatie. dus niet naar je C-schijf en ook niet naar Mijn documenten.
13
Je ziet in de regel van de afbeeldinglocatie een hele lange verwijzing. Als je deze pagina samen met de afbeelding nu op het internet zou zetten en je zou de pagina op het internet bekijken, dan krijg je een pagina te zien met daarin een rood kruisje (Internet Explorer) of een gebroken puzzel stukje (Firefox). Hoe kan dat? De pagina en de afbeelding staan op het internet en de browser vraagt de afbeelding op. Deze gaat nu zoeken naar: file://C:/ Documents and Settings/ enzovoort Maar op de server staat helemaal geen file://C:/Documents and Settings/ enzovoort Er staat straks op de server wel een map Afbeeldingen met daarin de afbeelding: bosje bloemen. En zo moet de verwijzing ook zijn en dat noemen we relatief. In de verwijzing in de schermafbeelding hierboven is de verwijzing nog absoluut. Als je de pagina nu opslaat en weer opent, moet je een vinkje plaatsen voor: √ URL is relatief ten opzichte van paginalocatie en dan zie je alleen staan: Afbeeldingen/bosjebloemen.jpg en dat is correct. Waarom je dat vinkje niet direct kunt plaatsen bij het invoegen van een afbeelding is mij ook niet duidelijk.
Even opletten: Dit is een schermafbeelding van het programma Nvu. Waar je hier de knop Bestand kiezen… ziet staan is dat in Kompozer een opengeklapt geel mapje. Je HTML pagina’s komen later op een server te staan samen met een map Afbeeldingen. Er is dan geen verbinding meer met jouw computer. Wordt er in de html pagina
14
toch een verwijzing naar jouw computer gedaan, wat onmogelijk is, dan zal het gevolg zijn: een rood kruisje omdat de afbeelding niet gevonden kan worden. Kortom: alle afbeeldingen en pagina’s die je gebruikt, verwijzen direct naar de locatie waar ze zijn opgeslagen en zijn daarom altijd relatief. Als een afbeelding op een internetpagina verwijst naar een map: Afbeeldingen, dan moet die map ook daadwerkelijk op het internet staan. Als voorbeeld, om goed te kiezen zien waarom dat nu zo vaak verkeerd gaat (klassieke beginnersfout) kun je dat hier bekijken: http://www.kompozer.nl/roodkruis/ Als alle pagina’s die in dit cursusboek beschreven worden zijn gemaakt, dan komt uiteindelijk de eerste pagina van de website (index) er als volgt uit te zien:
Heb je straks alle pagina’s gemaakt en je kijkt dan in de map Mijn Documenten > Mijn Homepage, dan zou dat er zo moeten komen uit te zien: een map met afbeeldingen en daaronder de gemaakte pagina’s.
15
Zoals je ziet in de schermafbeelding zie je de pagina’s niet zo staan, volgens de volgorde waarin je ze gemaakt hebt, maar op alfabetische volgorde, Windows doet dat automatisch.
16
Hoofdstuk 3 Een nieuwe pagina maken Klik in de werkbalk op de knop Nieuw, de eerste linker knop onder de werkbalk. Er verschijnt nu een lege pagina zonder titel. Je eerste pagina was klaar. Als je KompoZer nog open hebt staan, heb je in tabbladen, twee pagina’s voor je. De index pagina met de titel welkom op de website van… en een pagina met: geen titel. Je kunt ze willekeurig aanklikken. Als je nu de lege pagina voor je hebt, dan klik je op: opslaan. In het scherm dat nu verschijnt vul je in: pagina2 en dan op OK. In het venster ‘opslaan als’ dat nu verschijnt is de naam: pagina2 al ingevuld en klik je op: opslaan. Een afbeelding als achtergrond In de eerste pagina die je gemaakt hebt, heb je een achtergrondkleur gekozen (lichtblauw). Het is niet alleen mogelijk om met een achtergrondkleur te werken, je kunt ook een afbeelding gebruiken als achtergrond. In de map oefenbestanden die op de CD staan heb ik er al een heleboel voor je geplaatst. Heb je daar nog niet genoeg aan dan kun je door te zoeken met Google op: backgrounds, tientallen websites vinden met honderden achtergronden die je vrijelijk kunt opslaan en gebruiken. Kies niet voor opdringerige achtergronden of al te felle kleuren: dat doet pijn aan de ogen en het leidt af van wat je te vertellen hebt. Maak vooral gebruik van neutrale afbeeldingen. We gaan nu een achtergrondafbeelding gebruiken. Klik in de werkbalk op: Opmaak en kies vervolgens onderin het menu voor: paginakleuren en achtergrond. Klik in het scherm dat verschijnt op: bestand kiezen of op het gele mapje, navigeer naar de map: mijn homepage, maak deze open, open de map: Afbeeldingen en selecteer: Achtergrond3.jpg en klik vervolgens op: openen. Kies in ditzelfde scherm voor: Aangepaste kleuren gebruiken. Kies voor de 4 bovenste tekstopties voor de kleur: wit en voor de onderste (achtergrond) de kleur blauw en klik nu op OK. Waarom een achtergrondkleur opgeven als we gebruik maken van een achtergrond afbeelding? Sommige mensen houden niet van afbeeldingen en hebben de weergave voor het tonen van afbeeldingen in hun browser uitgezet. Die mensen krijgen dan een achtergrondkleur te zien in plaats van een afbeelding.
17
Als je thuis met verschillende achtergrondafbeeldingen aan de gang gaat uit de map Oefenbestanden, zul je merken dat, als je de verschillende achtergronden bekijkt, sommige niet mooi worden weergegeven in het programma. Dit ligt altijd aan de afbeelding. Achtergrondafbeeldingen hebben meestal maar een kleine afmeting, het programma doet dan niets anders dan die afbeelding voortdurend herhalen, zodat het scherm gevuld wordt. Daarom kunnen foto’s beter niet als achtergrondafbeelding gebruikt worden, je krijgt de foto dan meerdere malen naast elkaar te zien. We kunnen dit het beste laten zien door een foto als achtergrond te gebruiken. Klik in de werkbalk op: opmaak en kies in het menu voor: paginakleuren en achtergrond. Klik in het scherm op bestand kiezen. Selecteer in de map Afbeeldingen: bosjebloemen, klik op openen en vervolgens op OK. Je ziet nu dat de foto zich steeds herhaalt en dat is gewoon lelijk! Wijzig de achtergrond weer in Achtergrond3 en klik op OK. Vervolgens op: Opslaan. Klik nu op de knop: Bekijken en je ziet nu de pagina zoals die op het internet wordt weergegeven. Sluit de browser. Je hebt nu een index pagina waarop staat: Welkom op de website van… met daaronder een afbeelding van een bosje bloemen, met een lichtblauwe achtergrondkleur. En je hebt nu een pagina met als titel: pagina2 Klik in de werkbalk op: Opmaak en in het menu voor: paginakleuren en achtergrond. Kies in het scherm dat verschijnt op: bestand kiezen of gele mapje, selecteer in de map Afbeeldingen: Achtergrond10.jpg, klik op Openen. Klik vervolgens in het scherm op aangepast kleuren gebruiken en kies bij normale tekstkleur voor wit in plaats van zwart. Klik nu op OK Centreer de cursor in de pagina op de bovenste regel. Kies in de werkbalk bij tekst voor: Kop 2 en schrijf het volgende gedicht over:
Let op: bij het geven van een Enter voor een nieuwe regel: Houdt de Shift toets ingedrukt en geef dan pas een Enter. De cursor blijf nu gecentreerd. Laat je de Shift achterwege dan wordt er automatisch uitgelijnd naar links en naar gewone niet opgemaakte tekst.
18
De Vicieuze cirkel van het beeld. Als ik blijf kijken zoals ik altijd heb gekeken, blijf ik denken zoals ik altijd heb gedacht. Als ik blijf denken zoals ik altijd heb gedacht, blijf ik geloven zoals ik altijd heb geloofd. Als ik blijf geloven zoals ik altijd heb gedaan, blijft mij overkomen wat mij altijd overkomt. Klik in de werkbalk op: Opslaan. We hebben nu twee pagina’s klaar, maar nog niet helemaal, want we kunnen nog niet heen en weer navigeren tussen de twee pagina’s.
19
Hoofdstuk 4 Hyperlinks (Koppelingen) Zoals je op het internet via hyperlinks / koppelingen, door middel van een tekst- of afbeeldingskoppeling, van de ene naar de andere pagina kunt navigeren, zullen wij dus ook in onze pagina’s hyperlinks / koppelingen aan moeten brengen. In het dagelijkse spraakgebruik wordt een hyperlink / koppeling gewoon een link genoemd. Klik in de werkbalk op: Openen en selecteer de index pagina. Plaats de cursor naast de afbeelding van het bosje bloemen (selecteer de afbeelding, gebruik dan de rechter pijltjes toets een keer) en geef 2 x een Enter. Er wordt nu onder de afbeelding een witregel toegevoegd en de cursor staat in het midden van de pagina. Klik in de werkbalk op: Invoegen en kies dan voor: Afbeelding Klik in het scherm dat verschijnt op: Bestand kiezen of het gele mapje, navigeer naar de map Afbeeldingen, selecteer: button4 en klik op openen, geef een alternatieve tekst op (navigatieknop of navigeerknop) en klik dan op OK. De button / knop verschijnt nu als afbeelding op de index pagina. De button / knop is gewoon, net als alle andere afbeeldingen en knoppen van het internet gehaald. Met een button / knop en daaraan een koppeling zijn we nog niet klaar, er moet nog tekst op de button / knop komen te staan, waaruit valt op te maken waar die koppeling naar verwijst. We gaan een klein uitstapje maken naar het fotobewerkingsprogramma. KOMPOZER kan gewoon open blijven staan. Knoppen aanmaken met PhotoFiltre Open op het bureaublad het programma PhotoFlitre. Klik in de menubalk op het tabblad: Bestand en selecteer: Openen. Navigeer naar de map: mijn homepage / Afbeeldingen en open deze map. Selecteer Button4. De button verschijnt nu in het programma. Klik in de werkbalk op de T (tekst).
Er verschijnt nu een venster waarin je de eigenschappen van de tekst kunt selecteren.
20
Arial als letterype. Afmetingen: 14 of 16 en een vinkje voor Vet, vinkje voor cursief naar keuze neerzetten of niet. Kleur: Wit.
Type bij tekstinvoer 2e pagina en klik dan op OK. Zoals je zult zien is de tekst op de knop geplaatst. Omdat we deze knop nog een keer nodig hebben, bewaren we deze knop niet als button4 in de map Afbeeldingen, maar kiezen we voor: Opslaan als: en geven dan als bestandsnaam op: 2epaginaknop. Klik nu op: Opslaan. Er verschijnt nu een compressie scherm (om de afbeelding klein te houden). Je kunt gewoon op OK klikken in dit scherm. Omdat we de knop nu een andere naam hebben gegeven blijft de originele button dus behouden. Dat was ook de bedoeling omdat we deze knop vaker nodig zullen hebben. We gaan nu een koppeling aanbrengen naar de 2epagina. Open in KompoZer de index pagina, voor zover je die niet nog open hebt staan. Haal de button zonder tekst die we ingevoegd hebben weg (selecteren, delete).
Klik in de menubalk op: Invoegen / Afbeelding klik op bestand kiezen en navigeer naar de map Afbeeldingen. 21
Selecteer de knop: 2epaginaknop, klik op openen, geef alternatieve tekst op (navigatieknop of navigeerknop) en klik op OK. De knop wordt nu ingevoegd. Selecteer nu de knop en klik in de werkbalk op de knop Koppeling.
Kies in het venster dat nu verschijnt voor: bestand kiezen. Selecteer in de map: mijn homepage de 2epagina, klik op Openen en dan OK. Klik in de werkbalk op: Opslaan. klik in de werkbalk op: Bekijken. Als je nu in de pagina op de knop 2e pagina gaat staan verschijnt er een handje en kun je er op klikken. Er is dus nu sprake van een actieve koppeling of link. Als je er nu op klikt wordt je automatisch doorverbonden met de 2e pagina.
Nu je bent aangekomen op de tweede pagina is er nog geen knop om terug te keren naar de index. Dat kan natuurlijk wel met de groene terug knop links in de browser, maar dat is niet zoals het hoort. Op iedere knop op een pagina moet je ergens naar toegebracht worden en aangekomen op die pagina moet je ook een knop hebben die je weer terug brengt. Sluit de browser weer af.
Koppeling van de 2epagina naar de index Open PhotoFiltre, klik in het tabblad bestand op: Openen Selecteer in de map: Afbeeldingen weer de knop: button4 en klik op: Openen. Klik in de werkbalk weer op de T (alle vorige instelling zijn bewaard gebleven) en vul bij tekstinvoer in: Home en dan OK. Klik in de werkbalk op het tabblad: Bestand en kies voor: Opslaan als Geef het de bestandsnaam: Home
22
Compressiescherm negeren en op OK klikken. Open in KompoZer de 2epagina. Ga naar de laatste regel van het gedicht, einde van de regel en geef nu een Enter. Centreer de cursor, klik in de werkbalk op: invoegen / Afbeelding, klik op: bestand kiezen, Selecteer in de map Afbeeldingen: Home geef alternatieve tekst op en klik op OK. Selecteer in de 2e pagina nu de knop Home, klik in de werkbalk op de knop: Koppeling, klik op bestand kiezen. Selecteer in de map: mijn homepage het bestand: index, klik op openen en dan OK. Het invoegen van een tekstkoppeling gaat op precies dezelfde manier. Je gebruikt dan geen afbeelding, maar een woord of regel waar je een koppeling mee maakt.
23
Hoofdstuk 5 Controleren van de HTML code Je hebt nu twee basis pagina’s gemaakt, waarin je afbeeldingen en tekst hebt aangebracht en je kunt tussen de twee pagina’s navigeren. Het is dan nu wel aardig om eens te kijken of dat wat je gemaakt hebt ook inderdaad foutloos HTML is. Alvorens we dat gaan doen, gaan we eerst eens kijken of de pagina’s die we in Firefox hebben bekeken ook in Internet Explorer goed zijn te bekijken en of we daar geen problemen tegenkomen. Sluit alle programma’s af. Ga naar de map: mijn homepage, selecteer de index pagina, doe rechter muisklik en kies voor: openen met…en kies voor Internet Explorer. Als alles goed is wordt alles exact zo weer gegeven zoals je het in Firefox hebt gezien. Sluit de browser. Ga nu naar de browser en type in de adresbalk: http://validator.w3.org
Net zoals vroeger onze grammatica gecontroleerd werd door een leraar, zo kunnen we ook onze HTML code laten nakijken door een machine in plaats van een leraar en dat gebeurt door de organisatie W3C. Dat is de organisatie die zich over de hele wereld bezighoudt met de ontwikkeling van het HTML gebeuren en er op toe ziet dat er volgens de regels wordt gewerkt en correct HTML wordt geschreven. Als je het adres hebt ingetypt en je geeft een Enter kom je op de volgende pagina.
Klik nu op de middelste tab: Validate by File Upload Vervolgens krijg je een volgende pagina te zien.
24
Klik op de knop: Bladeren. Navigeer naar de map: mijn homepage en selecteer de index Klik op openen en de pagina verschijnt in het invoerveld. klik nu op Check. De pagina wordt nu gecontroleerd en binnen enkele seconden heb je de uitslag:
Als je dit scherm niet krijgt, maar een pagina met foutmeldingen dan is dat niet leuk maar ook niet erg. De foutmelding verschijnen in het Engels en niet iedereen kan dat ontcijferen. In dat geval laat maar voor wat het is. Of zoek hulp door middel van het internet of een internet forum. Je hebt immers gezien dat in beide browsers je pagina goed wordt weergegeven en als er dan toch een foutje in zit, is dat naar alle waarschijnlijkheid een kleinigheid. Let op: Bij het valideren van je website worden er standaard 3 foutmeldingen gegeven door het W3C. Die hebben allemaal te maken met het menu Opmaak > Paginakleuren en achtergrond. Op het moment dat je aangepaste kleuren gaat gebruiken, genereert Kompozer foute HTML-code (bug). Dit kan op de volgende manier worden opgelost. Wanneer je pagina echt helemaal af is en je gaat er niets meer aan veranderen, open je de pagina met het Kladblok. Klik de pagina aan > Rechter muisklik > Openen met… > Kiezen voor Kladblok.
25
Vervang de allereerste regel: door: Sla de pagina op. Als je de pagina nu opnieuw controleert wordt deze goed gevalideerd. Als je dit doet met alle pagina’s die klaar zijn, wordt je hele website goed gevalideerd.
Omdat je in een PDF-bestand geen regels kunt kopiëren en in een ander document kunt plakken, lijkt mij de volgende handeling de meest gemakkelijke: verwijder in het kladblok de gele markering: en voeg Transitional toe: Je kunt dit natuurlijk voorlopig ook overslaan. Blijven de foutmeldingen beperkt tot de eerder genoemde drie fouten, dan weet je dat de gemaakte webpagina’s toch goed zijn. Overigens hebben de foutmeldingen geen enkele invloed op de weergave van de pagina.
26
Hoofdstuk 6 Een fotopagina maken Kies in de werkbalk voor een nieuwe pagina. Klik nu op Opmaak en kies in het menu voor paginakleuren en achtergrond. Kies voor aangepaste kleuren en geef alle kleuren: Wit. Klik in hetzelfde scherm bij achtergrondafbeelding op: Bestand kiezen of het gele mapje. Selecteer in de map: Afbeeldingen Achtergrond3.jpg en klik dan: Openen en OK. Klik in de werkbalk op: Invoegen, kies in het menu voor Afbeelding. Klik in het scherm dat verschijnt op: Bestand kiezen. Selecteer in de map Afbeeldingen, de afbeelding Agni1280 klik vervolgens op Openen en op OK. Je ziet nu dat de ingevoegde foto veel en veel te groot is. Dit euvel doet zich vooral voor bij foto’s die met een digitale camera zijn gemaakt en op de pc zijn gezet. Die foto’s zijn voor een webpagina veel te groot. De foto is niet alleen in afmeting te groot, de bestandsgrootte is ook nogal fors (214 KB) en zal daarom traag geladen worden. Bovendien is het nadeel van zulke grote foto’s dat je al gauw ruimtegebrek krijgt op de server van je internet provider. Je hebt immers maar een beperkt aantal MB’s ter beschikking. Stel dat je een foto website wilt maken en dat je daar een honderdtal foto’s op kwijt wilt, dan kom je met deze afmetingen en bestandsgrootte al snel in de problemen. Door de afbeelding tot normale proporties terug te brengen wordt ook automatisch de bestandsgrootte aangepast en dat scheelt behoorlijk. Zo kun je veel meer foto’s plaatsen. We moeten dus eerst de afmetingen van de foto’s wijzigen. Verkleinen van foto’s met PhotoFiltre Open het programma Photofiltre. Klik in de werkbalk op: Bestand en dan Openen. Navigeer naar de map: mijn homepage, open de map: Afbeeldingen en selecteer de afbeelding AGNI1280, klik op Openen. Klik in de werkbalk op het tabblad: Afbeelding en kies in het menu voor: Afmetingen afbeelding. In het venster dat nu verschijnt geef je bij de breedte op: 800 pixels. De hoogte wordt automatisch aangepast. Klik op OK. Klik nu op het tabblad: Bestand en kies voor: Opslaan als Navigeer naar de map: Afbeeldingen en geef als bestandsnaam: Agni Er komt nu een melding dat dit bestand al bestaat en de vraag of het moet worden overschreven. Kies voor ja. Dit is enkel een oefening die je een keer gedaan moet hebben, om te weten hoe je met dit programma foto’s kunt verkleinen. Om tijd te winnen heb ik alle foto’s waar 1280 achter staat al verkleind tot 800 x 640
27
Let op: als je digitale foto’s wilt gebruiken voor je website en je verandert de afmetingen om een foto hanteerbaarder te maken sla de foto dan vervolgens altijd op met: Opslaan als..! Hiermee gaat de originele foto niet verloren. Wanneer het formaat van een foto wordt aangepast wordt er ook compressietechniek toegepast. Hiermee neemt de kwaliteit van de foto af, ook al is dat niet zichtbaar. Dezelfde foto later weer vergroten levert dan een slechter resultaat op omdat de compressie niet ongedaan gemaakt kan worden. Met andere woorden: wil je de afmetingen van originele foto’s veranderen zonder de oorspronkelijke foto te verliezen, sla de foto’s voor de zekerheid dan altijd op onder een andere naam. Net zoals we met de foto van AGNI hebben gedaan. Die foto is nu verkleind naar het formaat 800 x 640 pixels en als je nu in de map Afbeeldingen kijkt, zul je zien dat de bestandsgrootte nog maar 63 KB bedraagt in plaats van 241 KB, een aanzienlijke besparing. De grote foto vervangen door een kleiner formaat Selecteer de foto die je in de pagina hebt toegevoegd en verwijder deze met de delete toets. Klik in de werkbalk op het tabblad: Invoegen Kies voor: Afbeelding, vervolgens op: Bestand kiezen Selecteer in de map Afbeeldingen: Agni klik op Openen geef Alternatieve tekst op en klik dan op OK. Je ziet nu dat de foto nog steeds te groot is; er passen niet eens twee foto’s naast elkaar. Als we de foto nu nog verder zouden verkleinen wordt deze er niet mooier op. We gaan daarom nu gebruik maken van een zogenaamde ‘thumbnail’ of miniatuur. Dat wil zeggen: we geven in KompoZer de opdracht om de foto niet groter te tonen dan 200 x 160 pixels zonder daadwerkelijk de foto aan te passen.
Foto’s als thumbnail / miniatuur Klik met de rechtermuisknop op de afbeelding, selecteer in het menu dat verschijnt: afbeelding eigenschappen. Klik op het tabblad Afmetingen en kies daar voor: Aangepaste grootte en zet een vinkje voor: behouden. Geef nu als breedte op: 200 pixels, de hoogte wordt automatisch aangepast. Klik nu op het tabblad: Koppeling en vervolgens op: Bestand kiezen. Bij deze handeling, na het klikken op Bestand kiezen wordt standaard een scherm getoond waarin HTML staat geselecteerd. Met het rolmenu moet Afbeeldingsbestanden geselecteerd worden of Alle bestanden.
28
Selecteer in de map: Afbeeldingen, het bestand Agni.jpg en klik op Openen en dan op OK. Sla de pagina op: fotopagina. Klik nu weer rechtermuisklik op de miniatuur, klik op Afbeelding en koppeling eigenschappen, plaats een vinkje voor: URL is relatief ten opzichte van de pagina locatie. We kunnen nu nog een rand om de foto plaatsen, zodat iedereen in één oogopslag kan zien dat deze miniatuur naar een grotere foto verwijst. Maar omdat dit niet altijd evengoed tot zijn recht komt, laten we dat hier achterwege. Uiteraard kun je hier gerust mee oefenen en als je het mooi vindt, vooral doen. De kleur van de rand is standaard altijd blauw, maar die kun je iedere gewenste / passende kleur geven. Dit doe je door in de werkbalk op tabblad Opmaak te klikken, kies in het menu voor Paginakleuren en achtergrond, en verander de standaard kleuren voor koppelingen. Als je nu, zoals het scherm laat zien, de actieve koppelingstekst en de bezochte koppelingstekst op wit zet, dan wordt de rand van de miniatuur wit in plaats van blauw, wat een mooi contrast geeft op de pagina, ook al is dat een kwestie van persoonlijke smaak.
29
Sla de pagina op en geef als naam op: fotopagina Bekijk de pagina in de browser, je ziet nu weer dat er een handje verschijnt zodra je met de muis op de miniatuur gaat staan. En als je nu klik op de miniatuur krijg je in een nieuw venster een mooie grote foto te zien van Agni, met het formaat 800 x 640 pixels. Sluit het venster met de foto en de browser. Je keert dan automatisch terug in het programma KompoZer. Je ziet nu dat er veel meer ruimte beschikbaar is voor nog meer foto’s. Er kunnen nog zeker drie foto’s naast geplaatst worden. Dit gaan we in de volgende oefening doen.
30
Hoofdstuk 7 Meerdere foto’s aan een pagina toevoegen Klik in de werkbalk op het tabblad Bestand en kies voor openen. Selecteer in de map: mijn homepage, de fotopagina en klik op openen (tenzij je die pagina nog voor je hebt). Selecteer met de muis de afbeelding: Agni, druk eenmaal met de pijltjestoets op rechts. Kies in de werkbalk op het tabblad: Invoegen / Afbeelding en klik vervolgens op Bestand kiezen of het gele mapje. Selecteer in de map: Afbeeldingen, Alpine.jpg, plaats een vinkje voor: URL is relatief, geef alternatieve tekst op en klik op OK. Dubbelklik op de foto, klik op het tabblad Afmetingen en wijzig de breedte in 200 pixels. Klik vervolgens op het tabblad Koppeling, klik op Bestand kiezen, selecteer in de map Afbeeldingen de foto Alpine.jpg, klik op Openen en dan op OK. De miniaturen staan nu strak naast elkaar en er kan er nog een naast worden gezet. Dit doen wij echter niet om de volgende reden: onder deze afbeelding willen we graag wat tekst plaatsen en dan lopen we tegen het probleem aan, dat de tekst onder beide foto’s doorloopt en dat is hier niet mooi. We willen onder iedere foto een aparte tekst. We kunnen dit heel mooi oplossen door gebruik te maken van tabellen. Verwijder beide foto’s op de pagina. Kies in de werkbalk voor Opslaan. Foto’s in tabellen plaatsen Je hebt nu de lege foto pagina voor je. klik in de werkbalk op de knopTabel / Invoegen / Tabel
Selecteer één rij en vier kolommen en klik dan op OK.
31
Er verschijnt nu 1 tabel met vier kolommen / cellen. Zet de cursor in de linker cel, klik in de werkbalk op het menu Tabel en vervolgens op Tabeleigenschappen.
Kies bij uitlijning: gecentreerd
Als je geen randen om de tabel wilt zien zet dan alle waarden bij Rand / Ruimte en Opvulling op 0.
32
Klik op het tabblad cellen en kies daar voor inhoudsuitlijning vertikaal boven en horizontaal gecentreerd.
Klik vervolgens op Toepassen en OK. Herhaal dit bovenstaande bij de overige cellen door op de knop volgende te klikken totdat je alle vier de cellen hebt gehad. Zet nu de cursor in de 1e cel, kies in de werkbalk voor Invoegen / Afbeelding Klik op Bestand kiezen, selecteer in de map Afbeeldingen, Agni.jpg Geef in het tabblad afmeting de juiste breedte op: 200 pixels Geef in het tabblad Koppeling de juiste verwijzing op, dus weer de foto Agni in de map afbeeldingen. Geef alternatieve tekst op en klik opOK. Zet de cursor in de 2e cel en voeg nu respectievelijk en in de andere cellen de volgende foto’s in: Cel 1: Agni Cel 2: Alpine Cel 3: Arboreal Cel 4: Autumnal Klik nu op opslaan en bekijk de pagina in de browser. Nu kunnen we onder iedere foto een toepasselijk stukje tekst plaatsen.
33
Tekst toevoegen onder foto’s Klik met de muis op de eerste foto en druk één maal op de rechterpijltjes toets en geef dan een Enter. De cursor komt nu precies onder de foto te staan. Zet onder de eerste foto de volgende tekst: De planeet Agni. Zet onder de tweede foto: Uitzicht op de berg Alpine. Zet onder de derde foto: Uitzicht op Arboreal. Zet onder de vierde foto: Campingplaats op Autumnal. Als je dit allemaal goed gedaan hebt, staan alle miniaturen keurig op hun plaats met daaronder de tekst. Je kunt, als je dat wilt tabellen een kleur geven. Dat kun je doen in de Tabeleigenschappen. Sla nu de pagina op en bekijk de pagina in de browser.
Om, voor mij, onduidelijke redenen kan het voorkomen dat bij wat langere tekst de afbeeldingen in de cellen niet meer gelijk naast elkaar staan en dat er een verschuiving heeft plaats gevonden. Gebruik in dergelijke gevallen dan minder tekst. Titel toevoegen aan de pagina Je ziet dat de tabel helemaal boven in de pagina is geplaatst en er lijkt geen ruimte te zijn om er nog een titel boven de zetten, dit kan echter wel. Zet de cursor in de eerste cel, verplaats met de pijltjestoets de cursor naar boven en geef 2 maal een Enter. De Tabel wordt twee witregels naar beneden geduwd en er is nu ruimte vrij gekomen voor tekst. Kies bij Tekst voor: kop 1 Centreer de cursor en typ: Mijn Fotopagina Nu moeten we nog een navigatieknop toevoegen om weer terug te kunnen navigeren naar de index pagina. Ook de indexpagina moeten we veranderen om een link te maken met de fotopagina. Navigatie knop aanmaken voor de fotopagina Plaats de cursor in een van de cellen en druk een paar maal op de pijltjestoets naar beneden. De cursor komt nu onder de tabel te staan en we kunnen een button invoegen. Maar…daar moeten we eerst weer tekst opzetten. Start het programma PhotoFiltre.
34
Klik in de werkbalk op Openen. Selecteer in de map Afbeeldingen de button14.jpg en klik op Openen. Klik in de werkbalk op de knop T (tekstopmaak). Kies voor de tekstkleur Zwart, lettertype Arial en Afmetingen 16 punten. Typ in het tekst invoerveld Home en klik dan op OK. Deze knop hebben we ook vaker nodig dus kiezen we voor Opslaan als… Sla de knop op met als bestandsnaam: Home2 Navigatieknop toevoegen aan de fotopagina Ga naar je fotopagina. Klik in de werkbalk op Invoegen. Selecteer in het menu Afbeelding. Selecteer in de map Afbeeldingen: Home en klik op Openen. We gaan nu ook een koppeling met de index pagina aanmaken, dus… Selecteer de knop Home, klik in de werkbalk op de knop Koppeling en selecteer vervolgens in de map: mijn homepage de indexpagina, klik vervolgens op Openen. Centreer de knop door in de werkbalk op centreren te klikken. Sla de pagina op en controleer alles door op de knop Bekijken te klikken. Nog een foto toevoegen aan de fotopagina Er is nog ruimte genoeg over voor nog een mooie foto onder de tabel met de vier foto’s. Plaats de cursor onder de tabel en geef een Enter. Centreer de cursor door op Centreren in de werkbalk te klikken. Klik op Invoegen, selecteer Afbeelding en navigeer naar de map: Afbeeldingen. Selecteer het bestand Mandala en klik op Openen. Klik in het scherm op het tabblad Afmetingen en pas de breedte aan: 400 pixels. Klik op het tabblad Koppeling en maak weer de koppeling naar foto Mandala. De fotopagina is nu klaar en als alles goed is ziet de pagina er nu zo uit:
35
Aanpassen van de index pagina De index pagina moet nu ook weer aangepast worden; we doen dit nu achteraf, maar als je van tevoren ongeveer weet, hoeveel pagina’s je wilt hebben en de titels ook al hebt bedacht, kun je natuurlijk een hele serie knoppen achter elkaar maken om deze later in te voegen. Om zo uniform mogelijk te werken gebruiken we uiteraard dezelfde knoppen. Een index pagina met verschillende knoppen lijkt nergens op en de pagina ziet er ook niet als een geheel uit. Als je de knop die hier in het boek gebruikt wordt niet mooi vindt dan neem je gewoon een andere. Op de CD staan er nog genoeg om een keuze te maken. Let er wel op dat als je tekst op knoppen gaat zetten, je bij het opslaan altijd kiest voor Opslaan als…om zo de originele knop te behouden. Open het programma PhotoFiltre. Klik in de werkblak op het tabblad Bestand en dan op Openen. Selecteer in de map Afbeeldingen button2, klik op openen. Klik op de knop T en kies weer als lettertype Arial, kleur zwart en afmetingen 16 punten. Type Foto’s en klik op OK. Sla de foto op als: fotoknop. Open nu de index pagina.
36
Plaats nu de cursor naast of onder de knop: 2epagina Klik in de werkbalk op Invoegen. Selecteer in de map Afbeeldingen de fotoknop, klik op openen, klik op het tabblad Koppeling, klik op bestand kiezen, selecteer de fotopagina in de map: mijn homepage, klik op openen en dan op OK. Als je alles goed gedaan hebt, kun je nu probleemloos navigeren door alle drie de pagina’s. De basis website is nu bijna klaar, maar we zijn er nog niet. We hebben weliswaar drie mooie pagina’s gemaakt, maar wie zit er nu eigenlijk achter deze website en waarom is die gemaakt? Kortom…Wie bent u eigenlijk? Probeer je een voorstelling te maken van de mensen die je website gaan bezoeken. Dat zullen in eerste instantie vrienden en bekenden zijn, maar afhankelijk van de inhoud van je website en als je met je website meer bekendheid krijgt, zullen volslagen onbekende mensen je website bezoeken. Daarom is het een goed idee om je voor te stellen en uitleg te geven over wie je bent, eventueel wat je doet, en waarom je deze website hebt. Kortom we gaan een introductiepagina maken, waarop je kort en bondig schrijft wat je kwijt wilt aan je bezoekers.
37
Hoofdstuk 8 De introductie pagina Maak een nieuwe pagina en sla deze gelijk op als: introductie Klik in de werkbalk op Opmaak / Paginakleuren en achtergrond Kies voor: aangepaste kleuren gebruiken Klik op Bestand kiezen en selecteer in de map: Afbeeldingen achtergrond23 Klik op Openen. Kies voor alle tekst opties: #D19930
Wat betekent: #D19930 ? Aan het begin van deze cursus is uitgelegd dat HTML aan de browser vertelt hoe alles moet worden weergegeven, opmaak, tekst, afbeeldingen en kleuren. Ook kleuren hebben een eigen code. Als we die code niet opgeven wordt er ook geen kleur weergegeven. Dus als we voor een kleur kiezen, wordt er feitelijk een code neergezet die de browser de opdracht geeft om bijvoorbeeld groen weer te geven. Hier kiezen we voor een goudgeel kleur en die krijgt dan de HTML code #D19930 mee. Zo bestaan er heel algemene kleuren maar ook hele specifieke kleuren. Er bestaan drie hoofdkleuren: rood, groen en blauw. Deze drie hoofdkleuren kunnen bijna eindeloos met elkaar gecombineerd worden. Uiteindelijk hebben we ongeveer 26.000 kleuren tot onze beschikking. In de map Achtergronden op de CD staat een tekstbestand dat de codes bevat van de afwijkende kleuren die we nu willen gaan gebruiken. Wanneer je een Hex code gebruikt moet daar altijd een # voor staan. Door deze (HTML) code weet de browser welke kleur weergegeven moet worden. We hebben nu dus voor een speciale tekstkleur gekozen die een mooi contrast geeft op de zwarte achtergrond. Klik in de werkbalk vier keer op de knop Inspringen.
38
De cursor komt nu mooi naast de linker verticale balk in de afbeelding te staan. Selecteer in de werkbalk bij tekst: Kop 3 Schrijf nu een verhaaltje over jezelf. Pagina’s in secties verdelen Soms is het handig om in een pagina secties aan te brengen, bijvoorbeeld omdat je verschillende gedeeltes in een pagina wilt hebben die zich duidelijk van elkaar onderscheiden. Dit kunnen we gemakkelijk realiseren door een horizontale lijn in te voegen. Zet de cursor op een plaats in de pagina de waar je een horizontale lijn wilt invoegen. Klik in de werkblak op het tabblad Invoegen en kies in het menu voor: Horizontale lijn. Er staat nu over de volle breedte een grijze horizontale lijn. Laten we er nu van uitgaan dat je deze lijn in de breedte niet mooi vindt. KompoZer en Nvu bieden zelf geen mogelijkheden om aanpassingen te doen, maar die aanpassing kunnen we wel realiseren door in de bron van de pagina te kijken en daar wat aan te passen. Veranderingen aanbrengen in de bron van de pagina Klik onderaan de pagina, links, op het tabblad Bron.
Wat je nu allemaal ziet staan is HTML. Er staat voor wat betreft de lijneigenschappen het volgende: hr staat voor horizontale lijn, met een dikte van twee punten en 100% over de pagina. Verander het 100 % maar eens in 50 % en verander 2px in 1px. Klik onderaan in de pagina nu op het tabblad Normaal. 39
Nu kun je zien wat er veranderd is. Op deze manier kun je de breedte en de dikte van de lijn geheel naar eigen wens instellen. Wil je een gekleurde lijn: in de map oefenbestanden op de CD bevindt zich een map met lijnen die je kunt gebruiken. Als je dit wilt, vergeet dan niet om de gekozen lijn te kopiëren naar de map afbeeldingen in mijn homepage.. Knop aanmaken voor de introductie pagina Open het programma PhotoFiltre. Klik in de werkbalk op het menu: Bestand en kies dan voor Openen. Selecteer in de map: Afbeeldingen, button28 en klik op Openen. Klik in de werkbalk op T en type in het tekst invoer veld: Introductie Sla deze button op als: introductieknop Open de index pagina, zet de cursor onder de afbeelding: bosjebloemen. Klik in de werkbalk op Invoegen / Afbeelding / ga naar de map: mijn homepage / Afbeeldingen / selecteer de introductie knop en kies voor openen. Geef alternatieve tekst op: naar de introductie pagina, klik op het tabblad Koppeling, klik op bestand kiezen,selecteer de introductiepagina, klik op Openen en OK Open nu de introductie pagina, klik op Invoegen / Afbeelding / selecteer de Home knop / Klik op Openen, geef alternatieve tekst op: naar de index pagina, klik op het tabblad Koppeling, selecteer in de map: mijn homepage de index pagina, klik op Openen en dan op OK. Sla de pagina op. Een pagina maken met animaties. We hebben tot nu toe alleen gewerkt met afbeeldingen die de bestandsextensie JPG hebben. Dat is ook de meeste gebruikte extensie voor afbeeldingen op het web. Hoewel de extensie PNG ook aan een flinke opmars bezig is. De letters PNG staan voor Portable Network Graphics. (gauw vergeten). De compressie schijnt een stuk beter te zijn dan die van JPG en levert dus een kleinere bestandsgrootte op. Naast JPG / PNG is de extensie GIF nog populairder. Het levert een nog kleinere bestandsgrootte op en is daarom ideaal om te gebruiken als achtergrondafbeelding, daarnaast is het mogelijk om een GIF bestand op te bouwen uit verschillende lagen (denk aan een tekenfilm). Als je een GIF bestand met opgebouwde lagen snel laat herhalen, krijg je een bewegende afbeelding, oftewel een animatie. Kortom GIF-bestanden nemen nauwelijks ruimte in en zijn daarom ideaal voor gebruik op een website (hoewel je er een website ook mee gemakkelijk mee kunt verpesten door een overdaad te gebruiken en sommige mensen is niets te dol). Tevens worden GIF bestanden erg veel gebruikt in e-mail berichten, vooral de emoticons zijn erg populair (deze duiden de emotionele toestand van de schrijver van een e-mail bericht). 40
Omdat de basis van een GIF-afbeelding (de achtergrondkleur) altijd transparant is, moet je voor het gebruik van gifbestanden altijd een zeer lichte achtergrondkleur gebruiken. Een witte achtergrond geeft het mooiste resultaat. Alleen is een witte achtergrond in een webpagina voor de meeste mensen te wit (fel). We gaan nu nog een pagina maken waar we geen statische afbeeldingen gebruiken, maar GIF-bestanden met beweging (animatie). Als je Kompozer open hebt staan maak dan een nieuwe pagina en sla deze meteen op: animaties Of start Kompozer op en sla deze blanco pagina gelijk op. Klik in de werkbalk op Opmaak en dan op Paginakleuren en achtergrond.. en kies voor een lichte achtergrondkleur en klik op OK:
Klik in de menubalk op Invoegen > Afbeelding en op bestand kiezen (gele mapje):
Selecteer in de map Abeeldingen de afbeelding: Bounce en voeg deze toe aan de pagina. Doe dit vervolgens ook met de volgende afbeeldingen: e-mail - Kerst – Kip – Muis – Regenboog – Vogel – Yay.
41
Geef na het invoegen van iedere afbeelding twee maal een TAB, zo komen de afbeeldingen niet te dicht op elkaar te staan. Sla de pagina weer op en bekijk het resultaat. Geef na de laatste afbeelding drie of vier maal een Enter. Klik op Invoegen > Afbeelding > Bestand kiezen en kies de home knop. Na het invoegen de knop selecteren en dan een koppeling maken naar de index pagina. Open PhotoFiltre , op de map Afbeeldingen, kies een knop uit en zet er de tekst Animaties in. Sla de knop op als animaties.jpg Keer nu weer terug naar KompoZer, klik op Invoegen > Afbeelding > bestand kiezen en kies voor de animaties knop. Geef alternatieve tekst op en maak gelijk een koppeling naar de animatie pagina. Je animatie pagina ziet er nu zo uit:
Of je deze pagina nu mooi, grappig of iets anders vindt, je ziet wat het effect van het gebruik van GIF-bestanden is. Ga er in ieder geval (advies) zeer spaarzaam mee om.
42
Hoofdstuk 9 Link pagina maken We gaan nu de laatste pagina maken. Een zogenaamde link pagina. Dat is een aparte pagina waarin je adressen vermeldt van websites waarvan jij vindt dat het de moeite waard is voor je bezoekers om die te bekijken. Dat kunnen websites van familie of vrienden zijn, maar natuurlijk ook de website van bijvoorbeeld Amnesty International, Vrienden van het Gelderse Landschap of de dierentuin. Het is overigens een goed en geaccepteerd gebruik om linken met elkaar uit te wisselen. Bovendien kun je ook vragen om een link om meer bezoekers op je website te krijgen. Stel dat ik een website heb gemaakt die helemaal in het teken staat van het kweken van volièrevogels dan ga ik op het internet op zoek naar andere vogelkwekers en dan vraag ik of zij op hun website het adres van mijn website willen vermelden en dat ik dan op mijn website een vermelding van hun website neerzet. Maak een nieuwe pagina in KompoZer en sla deze gelijk op als link pagina Klik in de werkbalk op Opmaak en selecteer in het menu: Paginakleuren en achtergrond. Selecteer in de map: afbeeldingen achtergrond3 Selecteer in de werkbalk bij Tekst: kop 1 Centreer de cursor en type: Link Pagina. Geef twee maal een Enter. Je kunt op twee manieren linken aan brengen Methode 1 Typ het adres: http:// www.nu.nl Selecteer de hele regel, klik dan op Invoegen en vervolgens op Koppeling. Je ziet nu dat de koppelingslocatie reeds is ingevuld. Klik op OK. Op de pagina zie je nu dat de kleur van de tekst is veranderd in blauw en de tekst is onderstreept. dit is de standaard opmaak voor een hyperlink / link. Uiteraard kun je die kleuren wijzigen in het menu paginakleuren en achtergrond. Sla de pagina op en klik op Bekijken. Als je nu met de muis op de link klikt, wordt je automatisch doorgeschakeld naar de betreffende website. Maar het kan ook anders. Misschien vindt je een hele lijst met internet adressen niet mooi en wil jezelf een omschrijving geven van een website en daar een koppeling aan verbinden. Methode 2 Typ onder de eerste link: Mijn favoriete nieuws site Selecteer deze regel, klik op Koppeling en type in de balk voor de koppelingslocatie: http://www.nu.nl Sla de pagina op. 43
Je ziet nu twee verschillende linken die naar dezelfde website verwijzen. We gaan dit nog een keer doen. Typ: Het forum voor al je KompoZer vragen / problemen Selecteer deze hele regel, klik op Koppeling en type in de balk voor de koppelingslocatie: http://www.mozbrowser.nl/forum Klik op OK. sla de pagina op en klik dan op Bekijken. Klik op de link naar het forum. Dit is een speciaal Forum van Mozilla producten (Firefox, Thunderbird, Nvu/KompoZer en andere Mozilla uitgaven). Je ziet er het subforum Nvu/KompoZer en daar vindt je deskundigen die op de meeste vragen of problemen een passend antwoord of oplossing weten te vinden. Je moet je er dan wel even laten registreren. Je hebt nu op twee manieren een hyperlink / link of koppeling gemaakt door of gelijk het adres in te typen en daar een koppeling van te maken of je maakt zelf een passende tekst en verbindt daar een koppeling aan. De pagina’s die binnen je eigen website naar elkaar verwijzen zijn interne koppelingen. Pagina’s die verwijzen naar pagina’s van een andere website worden externe koppelingen genoemd. Ook op deze pagina moet een knop Home worden ingevoegd. Je weet inmiddels hoe je dat moet doen en vervolgens maak je op de indexpagina een knop voor de linkpagina en koppel je de pagina’s aan elkaar. Als je dit gedaan hebt: sla de pagina’s op en bekijk ze ter controle of alles goed werkt.
44
Hoofdstuk 10 Publiceren van je website Voordat we onze website gaan publiceren, eerst nog een paar opmerkingen over enkele knoppen die we in KompoZer niet hebben gebruikt. Een aantal knoppen op de werkbalk zijn nog niet besproken; dat zijn de knoppen Publiceren, Formulier en in het menu Extra het gebruik van CSS (Cascading Style Sheets). In de publiceerfunctie van KompoZer zitten een paar bugs (fouten) waardoor het publiceren van de website zeer moeilijk gaat en in sommige gevallen helemaal niet. Om die reden gaan we dat met een ander programma doen, een FTP-programma: FileZilla. Met dit programma kunnen we precies zien wat er gebeurt als we bestanden op de server gaan zetten en waar ze worden neergezet, hierover zo dadelijk meer. Formulieren gebruiken we in deze basiscursus niet omdat het maar helemaal de vraag is of je provider het gebruik van formulieren ondersteunt en zo ja welke formulieren worden ondersteund. Er bestaan verschillende formulieren in verschillende scripttalen. Dit kunnen formulieren in Javascript, PHP of CGI zijn. Kompozer kan met alle scriptalen overweg. Allemaal hebben ze hun eigen voordelen en ieder formulier vraagt weer om een specifieke deskundigheid. Wil je met formulieren gaan werken (een e-mail formulier is bijvoorbeeld reuze handig) dan zul je bij je provider informatie moeten opvragen met welk soort formulieren je mag werken. Wil je met een e-mail adres op je website benaderd kunnen worden, zet nooit je e-mail adres publiekelijk op een pagina. Binnen de kortste keren wordt je bedolven onder de spam. Je raakt er nooit meer van verlost en het wordt hoe langer hoe erger. Als je benaderd wilt worden vanaf je website doe het dan als volgt: zet er een tekst neer zoals freekATgmailPUNTcom (dit adres bestaat niet) Iedereen zal begrijpen dat AT vervangen moet worden door @ en PUNT vervangen moet worden door een . Een robot die het internet afstruint op zoek naar e-mail adressen zal een dergelijke regel niet als een e-mail adres interpreteren. Een andere en ook goede optie is om je e-mail adres te vermelden op een afbeelding. Robots kunnen ook geen tekst op afbeeldingen lezen. Op deze manier blijf je verschoond van één van de grootste irritaties van het internet. In het menu Extra komt nog de optie CSS bewerken voor. CSS wordt gebruikt om een website zo te maken dat alle pagina’s er qua opmaak precies hetzelfde eruit komen te zien. In een bestand, de stylesheet (stijlblad) wordt alle opmaak, kleur, tekststijl, lettertype, aantal punten enzovoort opgeslagen. Op iedere pagina wordt een link naar dat bestand gemaakt en zo heb je direct de hele opmaak van je pagina in één keer geregeld. Dat levert een enorme tijdswinst op en het is vreselijk handig, vooral als je een wat grote website gaat maken. Maar ook dit is niet iets wat je even op een vrije zaterdag leert en 45
onder de knie krijgt. Op het internet kun je voldoende en complete online cursussen hierover vinden. Met KompoZer hebben we de pagina’s opgeslagen in de map: mijn homepage en de afbeeldingen hebben we opgeslagen in de map Afbeeldingen. In de pagina’s die we gemaakt hebben, hebben alle afbeeldingen een verwijzing, bijvoorbeeld: Afbeeldingen/achtergrond3.jpg Als we nu onze pagina’s op de server zetten en de map Afbeelding plaatsen we bijvoorbeeld in de map bestanden die ook op de server staat (dit als voorbeeld) en we vragen onze pagina’s op, zul je nooit de afbeeldingen te zien krijgen, maar alleen maar rode kruisjes. Dit klopt ook omdat er in je pagina’s geen enkele verwijzing is naar een map: bestanden/Afbeeldingen/achtergrond3.jpg De browser probeert de map Afbeeldingen wel te vinden maar dat lukt niet omdat die in de map bestanden staat en de browser heeft geen opdracht gekregen om in de map bestanden te gaan zoeken naar een achtergrond. Het antwoord van de browser is: rood kruisje (kan de afbeelding niet vinden). Hou exact dezelfde structuur aan zoals die ook op je pc staat! In deze cursus hebben we maar één map die belangrijk is en dat is de map: Afbeeldingen. Willen de afbeeldingen gevonden kunnen worden dan moet de map met daarin alle afbeeldingen ook zo op de server worden gezet. De map mijn homepage hoeft niet op de server gezet te worden, alleen de inhoud: de webpagina’s. Deze komen in de hoofddirectory (root) op de server te staan. Om pagina’s te kunnen publiceren naar de server van je provider of je eigen domein heb je de volgende gegevens nodig: * Het FTP-adres van de server (bijvoorbeeld; ftp.xs4all.nl). * Je gebruikersnaam (meestal je eigen inlognaam van de provider). * Je wachtwoord (meestal je eigen wachtwoord van de provider). Heb je al deze gegevens bij de hand, dan kunnen we FileZilla starten.
46
Het uploaden / publiceren van de website Start via het Bureaublad FileZilla op. Klik op het tabblad: Bestand en dan op Pagina Manager. Klik vervolgens op de knop: nieuwe site
Typ achtereenvolgens in de daarvoor bestemde vakjes
* Address: je FTP adres * Gebruiker: je gebruikersnaam * Wachtwoord: je wachtwoord *Port: het poortnummer: dit is altijd 21 Alles goed ingevuld: klik op: Verbinden.
47
Als je goed bent ingelogd op de server, verschijnen rechtsboven in het scherm de eventuele bestanden die al op je server staan (hier zie je bestanden staan van een website die op een andere server staan, het kan er dus voor iedereen anders uitzien.
In het scherm links bovenaan (pijl 1) zie je de gevolgde inlog procedure. In het scherm rechts de bestanden die al op de server staan (pijl 2). Geselecteerd is de map mijn homepage (pijl 3). Linksonder staan de pagina’s die je gemaakt hebt en de map Afbeeldingen (vak 4). Klik nu op de map Afbeeldingen en houdt de Shift toets ingedrukt. Klik nu op pagina2 en dan is alles geselecteerd. Laat alle toetsen los (alle bestanden zijn nu blauw geselecteerd). Klik met de linkermuis toets ingedrukt, op de geselecteerde bestanden en sleep nu alles naar het rechterscherm en laat vervolgens de muisknop los.
Je ziet nu dat de bestanden naar de server worden gekopieerd en als dat klaar is staan je bestanden op het internet. Je ziet ze nu ook allemaal in het rechterscherm staan. Sluit nu FileZilla af. Je pagina’s kunnen nu door de browser opgevraagd worden. 48
Als je nu de browser start en je typt het adres van je website in, bijvoorbeeld: http: www.provider.nl/~je account naam/index.html en je geeft een Enter dan zou je nu de website moeten zien die je in deze cursus hebt gemaakt. Als je een website hebt gepubliceerd op het internet, controleer dan nog een keer of alles echt goed werkt. Niets is vervelender dan achteraf te moeten constateren dat dingen niet goed zijn gegaan of dat je iets bent vergeten. Dat is niet alleen vervelend voor jezelf, maar ook voor je bezoekers. Breng je nadien wijzigingen aan in je website en je ziet na het controleren de veranderingen niet doorgevoerd, toets dan F5, zodat de browser gedwongen wordt de pagina opnieuw op te halen. Het onderhouden van een website Dat gaat niet anders dan zoals we het nu gedaan hebben. Het kan natuurlijk voorkomen dat je later iets aan je pagina’s wilt veranderen: iets toevoegen of verwijderen. Dat is dan gewoon weer een kwestie van Nvu opstarten, pagina openen, veranderingen doorvoeren, pagina weer opslaan en de pagina opnieuw op de server zetten. Als je een reeds bestaande pagina op de server wilt vervangen dan krijg je een scherm te zien, met in de titelbalk de tekst: het bestand bestaat al. In dat geval een groen puntje op Overschrijven zetten en zet een vinkje voor gebruik deze Aktie altijd. En klik op OK. Een volgende keer wordt je er niet meer door gehinderd.
49
Hoofdstuk 11 Een tweede website (optioneel) Aan het begin van deze cursus schreef ik: wees consequent in je opmaak! Dat hebben we in de eerste oefening van het maken van een website juist helemaal niet gedaan, integendeel. Tijdens het maken van de voorgaande pagina’s zijn we vooral inconsequent bezig geweest; iedere pagina heeft een andere achtergrond, tekstkleur en overal staan verschillende knoppen. Erg mooi is dat allemaal niet en de website oogt hierdoor niet als een geheel. Dat kan veel beter. Het ging er vooral om de basisvaardigheden onder de knie te krijgen en te leren werken met het programma. Daarom volgt hier nog een oefening voor het maken van een website die wel consequent is voor wat betreft de opmaak. Als je denkt dat je de vorige onderwerpen voldoende beheerst, kun je deze oefening overslaan en beginnen aan je eigen persoonlijke website. De opdracht is nu: geef alle pagina’s die je gaat maken dezelfde achtergrondkleur of achtergrondafbeelding, gebruik overal hetzelfde lettertype en lettergrootte en gebruik overal dezelfde knop voor. Omdat je in de afgelopen lessen al flink wat vaardigheden hebt opgebouwd is de uitleg wat minder uitgebreid dan in het voorgaande gedeelte. Nog een website maken is een goede oefening om te ontdekken hoe het met de opgedane kennis en vaardigheden staat. Eerst ga je de benodigde mappen aanmaken en de bestanden van de map oefenbestanden gebruiken. Ga naar de map: Mijn Documenten en maak een nieuwe map aan met de naam: mijn tweede website, maak in deze map weer een map: afbeeldingen. Kopieer nu de inhoud van de map Oefenbestanden naar de map afbeeldingen. Open KompoZer, klik in de werkbalk op: Opmaak en selecteer in het menu: Paginakleuren en achtergrond. Klik op bestand kiezen en selecteer in de map afbeeldingen achtergrond192.gif Klik nu op openen en OK. Als het zo is dat je de extensie niet ziet staan (gif) moet je even iets veranderen in de instellingen van je PC. Je gaat als volgt te werk: Open: Deze computer en klik in de werkbalk op het tabblad Extra. Selecteer in het menu: Mapopties en klik dan op het tabblad Weergave. Verwijder het vinkje bij de optie: extensies voor bekende bestandstypen verbergen, klik op Toepassen en OK. Als je nu terugkeert naar de map afbeeldingen zul je zien dat achter de bestandsnaam nu ook het bestandstype (extensie) staat vermeld. Ga nu terug naar KompoZer, selecteer in de werkbalk bij Tekst: Kop 2 Selecteer bij lettertype: Palatino Linotype en klik op de knop: centreren. Klik nu op het tabblad: Opmaak, selecteer Paginakleuren en achtergrond, kies 50
voor aangepaste kleuren en kies voor alle opties: wit en vervolgens OK. Typ de volgende tekst: Welkom op de website van Jan de tuinkabouter. Geef eenmaal een enter, klik op invoegen en dan op afbeelding en selecteer in de map oefenbestanden de map lijnen, open deze en selecteer: lijn55.jpg; open deze en klik OK. De lijn staat nu strak onder de tekst. Geef nu viermaal een Enter en klik op: centreren. Klik op Invoegen en dan op Afbeelding. Klik op Bestand kiezen, open de map Foto’s en selecteer daar het bestand Flora.jpg Je ziet nu dat deze foto te groot is. Open PhotoFiltre, open de map oefenbestanden en dan de map foto’s, selecteer de afbeelding flora en verander de afmeting van de foto in 400 pixels. Klik op Bestand en dan op Opslaan als.. en sla de afbeelding nu op in de map afbeeldingen in de map mijn tweede website. Klik nu in KompoZer op opslaan geef als paginanaam op: Welkom op de website van Jan de tuinkabouter en sla de pagina vervolgens op in de map mijn tweede pagina als index pagina. De overige pagina’s die we gaan maken kunnen vervolgens onder een andere naam worden opgeslagen. Stel je nu voor dat de website van Jan de tuinkabouter een website is die voornamelijk zal bestaan uit mooie foto’s van zijn tuin. We willen pagina’s gaan maken die identiek zijn aan elkaar en dat kun je met een paar muisklikken bereiken. Open in KompoZer een nieuwe pagina. voeg net als in de voorgaande pagina achtergrond192 toe, centreer de cursor en sla de pagina nu op in de map mijn tweede website met de naam: overmijzelf Sla deze pagina nogmaals op, bestand opslaan als: tuinfoto’s2005 Sla deze pagina nogmaals op, bestand opslaan als: tuinfoto’s2006 Sla deze pagina nogmaals op, bestand opslaan als: tuinfoto’s2007 Je hebt nu 5 identieke pagina’s ontworpen waarvan de achtergrond en tekstkleur al zijn vastgelegd, dat scheelt weer en dat ziet er dan zo uit:
51
Let op: dat je bij de volgende oefening wanneer je afbeeldingen gaat invoegen, je de afbeeldingen haalt uit de map afbeeldingen van je tweede website en niet uit de map afbeeldingen van Mijn HomePage. Dus goed kijken of je op de goede locatie zit. Open de index pagina Selecteer de afbeelding flora, klik op koppeling, klik op bestand kiezen en selecteer in de map mijn tweede website de overmijzelf pagina, klik op openen en OK. Klik op bekijken en als je nu op de afbeelding flora klikt wordt je doorgelinkt naar de overmijzelf pagina. De index pagina is nu helemaal klaar (sluit de browser). Dat ziet er al heel anders uit dan de eerste index pagina die je hebt gemaakt. Ga nu de pagina overmijzelf verder opmaken: er moeten nog knoppen gemaakt en geplaatst worden om te kunnen navigeren. In de map oefenbestanden zit ook een map buttons waarin een hele verzameling knoppen staat. De overmijzelf pagina We gaan eerst in PhotoFiltre tekst op de te gebruiken knoppen plaatsen. open het programma en selecteer in de map buttons: button125.gif Je ziet nu dat de knop T niet te activeren is (hij is grijs) en je op deze gif afbeelding geen tekst kunt plaatsen. Dit klopt, want zoals eerder uitgelegd, is een gif bestand opgebouwd uit meerdere lagen en die kun je niet zomaar bewerken. Je moet die lagenweer terug brengen tot één laag. Sla deze knop op als button125.jpg: bestand opslaan als en dan als bestandsformaat JPG kiezen. Sla de knop op in de map: afbeeldingen. Open nu de map afbeeldingen, selecteer het bestand button125.jpg en nu zul je zien dat de knop T wel is geactiveerd en je tekst op de knop kunt plaatsen. Selecteer de T knop en geef in het venster de volgende opties aan: * Lettertype: Times New Roman * Afmetingen: 10 punten * Plaats een vinkje bij: vet *Tekstkleur: lichtblauw *Uitlijning: gecentreerd * Tekstinvoer: Tuinfoto’s 2005 Klik OK. Sla deze knop op in de map afbeeldingen als: tuinfoto’s2005 (JPG). Klik in de werkbalk nu op ongedaan maken
52
De tekst wordt nu van de knop verwijderd, zodat je weer een blanco knop hebt. Klik opnieuw op de T knop. Je hoeft nu alleen nog maar de tekstinvoer 2005 te veranderen in 2006. Maak op deze wijze ook nog een knop: * * * *
tuinfoto’s2007 Over mijzelf Home [email protected] Sla alle afbeeldingen op in de map: afbeeldingen. Sluit PhotoFiltre.
Je hebt nu alle benodigde en gelijksoortige knoppen gemaakt. Deze knoppen gaan we nu toevoegen aan de betreffende pagina’s. Open de overmijzelf pagina en klik op centreren. Klik op Invoegen / Afbeelding en selecteer in de map afbeeldingen tuinfoto’s2005 en klik OK. Voeg naast deze knop de afbeeldingen tuinfoto’s2006 en tuinfoto’s2007. Geef vervolgens een Enter. Voeg op deze plaats de knop: Over mijzelf toe en geef een enter. De pagina is nog verder helemaal leeg, er moet nog wat informatie op komen te staan, zodat de bezoekers kunnen lezen waar de website over gaat. Kies als lettertype Tahoma en type de volgende tekst: Welkom op mijn website die helemaal in het teken staat van fotografie. In 2000 ben ik afgestudeerd aan de Academie voor Fotografie en na een aantal jaren te hebben gereisd, bied ik u hier een aantal fotocollecties aan van de laatste drie jaren. Alle foto’s zijn gemaakt met een digitale spiegelreflex camera: Nikon D80 + 18-135mm. Ik hoop dat de foto’s u zullen inspireren. Wilt u reageren dan kunt u een e-mail sturen naar het onderstaande adres. voeg hier nu de knop in: [email protected] Er kan nu, zoals we dat met de eerste website gedaan hebben, een knop Home toegevoegd worden, maar dat is op deze pagina niet nodig. De index pagina bevat geen informatie en is alleen maar de entree naar de website. Voor de andere pagina’s hebben we de knop wel nodig. Voeg nu op alle pagina’s de benodigde knoppen in. Breng koppelingen aan en controleer of alles goed werkt. 53
Als je een lang email adres hebt, dan heb je daarvoor niet altijd de ruimte op een knop en dan heb je een probleem. Dat kan echter gemakkelijk opgelost worden door zelf een knop te maken. Voor deze website hebben we achtergrond192.gif gebruikt en deze kunnen we mooi gebruiken om een email knop mee te maken. Open Photofiltre en open vervolgens in de map afbeeldingen achtergrond192.gif. Sla dit bestand opnieuw op onder de naam emailknop.jpg Sluit de afbeelding en open opnieuw de emailknop.jpg, klik in de werkbalk op Afbeeldingen en selecteer Afmetingen afbeelding. Verwijder het vinkje bij: hoogte/breedte verhoudingen behouden en geef als breedte op: 200 pixels en als hoogte 50 pixels. Klik op OK en klik op Opslaan. Je hebt nu een nieuwe email knop die naadloos aansluit bij de achtergrond. Je kunt er nu het volgende adres in typen, knop T, tekstinvoer: [email protected] Op deze manier kun je je eigen knoppen maken voor een website. De bedoeling van deze oefening was om je het verschil te laten zien tussen een website die er wat rommelig uitzag en een website die mooi uit een geheel bestaat. Het oog wil tenslotte ook wat. Foto’s gaan we nu niet invoegen, er van uitgaande dat je dat voldoende beheerst.
54
Hoofdstuk 12 Het gebruik van Ankers (bookmarks) De website die we nu gemaakt hebben, is een website die voornamelijk uit foto’s bestaat. De foto’s hebben we niet eens geplaatst, want het ging ons voornamelijk om de vormgeving / design. Maar er bestaan natuurlijk niet alleen websites met hoofdzakelijk foto’s, er bestaan ook genoeg websites die voornamelijk vol staan met tekst. Denk hierbij aan dagboeken, reisverslagen en dergelijke. Waar bezoekers van websites in het algemeen een hekel aan hebben is wel het scrollen in pagina’s. Vanaf boven naar beneden moeten scrollen en weer terug. Ook daar is een oplossing voor: het gebruik van ankers. Een anker is een koppeling of een aantal koppelingen binnen een zelfde pagina. Dat gaan we nu oefenen. Open in KompoZer een nieuwe pagina en klik op Openen. Selecteer in de map mijn homepage (de eerste website): pagina2 Selecteer de tekst van het gedicht. Klik in de werkbalk op Bewerken en dan op kopiëren. Ga terug naar de lege pagina, centreer de cursor klik weer op de werkbalk Bewerken en dan op Plakken. Geef onder de laatste regel een Enter. Plak de tekst nu nog een keer. Stel een achtergrondkleur in (Opmaak / Paginakleuren en achtergrond). Selecteer de eerste regel van het gedicht (de titel), klik in de werkbalk op Positie. Er verschijnt dan een scherm waar ingevuld staat de geselecteerde regel. Klik op OK. Je ziet nu dat er een anker is geplaatst (dit is niet zichtbaar in de browser). Ga nu naar de laatste regel van het gedicht en geef een Enter. Type hier de tekst: naar boven Selecteer de tekst, klik in de werkbalk op Positie en klik in het venster dat verschijnt op OK. Je ziet nu dat ook voor deze regel een anker is geplaatst. Selecteer opnieuw de tekst: naar boven en klik dan op Koppeling. Er verschijnt een scherm: koppelingseigenschappen. Selecteer met de knop van het rolmenu de tekst van de eerste regel (de vicieuze cirkel van het beeld) en klik op OK.
55
Sla de pagina op: ankerpagina en bekijk het resultaat nu in de browser. Als je nu naar de onderkant van de pagina gaat, zie je dat de regel naar boven een actieve koppeling is geworden; er staat een streepje onder. Als je nu op deze koppeling klikt dan wordt je met een muisklik naar de eerste regel van de pagina doorgelinkt.
56
Hoofdstuk 13 Werken met lagen Een laatste oefening De lay-out van een webpagina is meestal niet bijzonder. Dit komt door de standaardbeperkingen van de opmaakmogelijkheden die je kunt gebruiken (lettertype, link- rechts- en gecentreerd uitlijnen en afbeeldingen al dan niet met randen). Een goede aanvulling hierop zijn ‘lagen’. De knop voor lagen vindt je bij Nvu in de onderste werkbalk, het eerste pictogram.
De knop lagen in Kompozer vindt je rechtsboven
Lagen zijn aparte vakken waar je iets in kunt stoppen (tekst of afbeelding) en die je dan op een willekeurige positie op de pagina kunt zetten. Ju kunt ook lagen elkaar laten overlappen en kiezen wat de volgorde van de lagen is (wat ligt er onder en wat ligt daar op). Je kunt het beste met lagen werken door eerst de inhoud op een pagina te zetten, dit selecteren en dan op de knop ‘lagen’ klikken. Zo voorkom je dat je een lege laag in je pagina krijgt. Lagen zijn niet zichtbaar in de browser. Open KompoZer of als je KompoZer al open hebt staan, begin met een nieuwe pagina. Ga naar het tabblad Opmaak en dan naar Paginakleuren en achtergrond. Kies hier voor aangepaste kleuren en kies voor alle tekstopties Wit.
57
Klik op de achtergrond en geef als Hex kleur op: #979797 en klik op OK Stel het lettertype bij variabele grootte in op het Lettertype Book Antiqua. Om alvast voldoende ruimte te maken: Geef twee maal een Enter. Typ nu: Welkom in mijn dromenland Geef twee maal een Enter (Shift toets ingedrukt houden) om tekstopmaak te behouden. Typ nu: een plaats waar alles kan en niets verbaast. Geef twee maal een Enter (Shift toets weer ingedrukt houden). Typ: E-mail en geef weer twee maal een Enter. Kies in de werkbalk voor Invoegen / afbeelding / bestand kiezen en selecteer uit de map afbeeldingen de afbeelding: gardendiv.jpg, geef alternatieve tekst op en klik OK. Geef twee maal een Enter en kies weer voor invoegen / afbeelding en selecteer uit de map afbeeldingen: gardenimage.jpg. Selecteer nu de eerste regel en klik op de knop laag en klik nu op het kadertje linksboven in de laag en sleep die nu ergens naar rechts in de grote afbeelding. Selecteer nu de e-mail tekst en klik op de knop laag en sleep deze nu onder of naast of in de boom. Selecteer nu de afbeelding ‘gardendiv’, klik op laag en sleep de laag onder de eerste tekstregel. Selecteer de regel ‘een plaats waar alles kan en niets verbaast’ en sleep nu de laag ergens onder de duif. Nu staan alle lagen in de grote afbeelding. Selecteer nu de grote afbeelding en sleep deze helemaal naar boven in de pagina. Zet alle lagen nu mooi naar rechts onder elkaar en pas de grootte van de tekst aan naar wens. Je kunt in de laag klikken, alle tekst selecteren en dan de grootte en eventueel een andere kleur, naar keuze aangeven. Aan geselecteerde tekstregels / afbeelding in een laag kun je een koppeling naar een andere pagina verbinden, zoals je dat aan het begin van de cursus hebt geleerd. Het mooie aan het werken met lagen is, dat de beperkingen tussen een afbeelding en/of tekst met betrekking tot uitlijning helemaal zijn opgeheven. Je kunt ze plaatsen waar je wilt.
58
Extra bijlagen Extra informatie over kleuren Zoals eerder opgemerkt staan er 26.000 webkleuren tot je beschikking. Het is niet altijd eenvoudig om een mooie achtergrondkleur of letterkleur te vinden. De meeste standaardkleuren die in een editor worden aangeboden zijn meestal hard en fel. Je kunt zelf wel eindeloos gaan knoeien in de hex editor om een geschikte kleur te vinden, maar dat is nogal tijdrovend. Gelukkig bestaat er een heel mooi programma om een gewenste kleur op te sporen. Dat is het programma Color Picker en dat vindt je op de CD, ook in de map programma’s. Javascript Een andere veel gebruikte toepassing op het internet is het gebruik van Javascript. Op bijna iedere webpagina staat wel een stukje Javascript. Er bestaan twee soorten Java scripts. * Cliënt gebaseerd * Server gebaseerd Bij een cliënt gebaseerd script wordt het script direct vanuit de internetpagina uitgevoerd: er wordt bijvoorbeeld een datum en tijd getoond, of een klokje. Het vertonen van popup-schermen, inlogschermen, enzovoort. Bij een server gebaseerd script vindt de uitvoering van de opdracht niet vanuit de pagina zelf plaats, maar gebeurt dat op de server, bijvoorbeeld: het opgeven van een zoekopdracht in een web pagina. Javascript kun je niet zomaar in een webpagina zetten. Het is voor leken een onbegrijpelijke taal en als je het plaatst moet dat foutloos zijn omdat het anders niet werkt. Javascript wordt altijd in de bron van de pagina gezet Omdat Javascript razend populair is, bestaan er aardig wat websites waar je scripts vandaan kan halen om in een pagina te gebruiken. Om te laten zien, hoe Javascript werkt, een voorbeeld: In de map mijn homepage / afbeeldingen staat een kladblok bestand: javascript.txt Open dit bestand, selecteer alle tekst en kopieer dit. Ga terug naar Kompozer en open een lege pagina en klik op de tab bron. Plak nu de tekst onder de Als je nu op de tab Normaal klikt, zie je helemaal niks (behalve een blokje met de tekst SCRIPT) en dat klopt. Geef de pagina nu een gele achtergrondkleur, sla de pagina op als: java Klik op bekijken en als het goed is zie je nu een datum- en tijdaanduiding. Het kan voorkomen dat een script dat je van het internet hebt gehaald helemaal niet werkt: er kan een fout in zitten of het werkt bijvoorbeeld alleen in de Internet-explorer en niet in Firefox of omgekeerd.
59
Een andere reden kan zijn dat Javascript niet werkt is omdat het geblokkeerd is in de browser. Je website laten vinden De websites die je gemaakt hebt of nog gaat maken staan uiteindelijk succes vol gepubliceerd op het internet. De vraag is nu: wordt de website waar je zoveel werk aan hebt besteed nu ook gevonden, door bijvoorbeeld een zoekmachine. Het antwoord hierop is: NEE. We hebben namelijk helemaal geen termen aangegeven op basis waarvan robots die webpagina’s indexeren, je pagina’s kunnen vinden. Alle zoekmachines maken gebruik van robots die 24 uur per dag niets anders doen dan zoeken naar nieuwe websites en die gegevens opslaan in een databasis. Wil je door een zoekmachine gevonden en geïndexeerd worden dan zul je zoektermen moeten opgeven in je pagina. De index pagina is in principe voldoende. Zoektermen voor een robot worden metatags genoemd. Jaren geleden moest je een website nog zelf aanmelden bij een zoekmachine en dat kan nog steeds, maar dat hoeft niet meer, omdat dit volautomatisch gebeurt. Na een aantal weken wordt je website vanzelf opgepikt door een zoekrobot. Er zijn genoeg mensen die metatags in hun pagina achterwege laten omdat hun website alleen voor intimi is bestemd en niet voor het grote publiek. Wil je door een groter publiek gevonden worden dan zijn metatags belangrijk. Metatags worden altijd in de van een pagina gezet. Alles wat in de van een pagina staat laat de browser niet zien, in tegenstelling tot wat in de van een pagina staat. Ga maar eens naar: www.marktplaats.nl Klik dan in de werkbalk op Beeld / Paginabron Je krijgt nu de html-opmaak van de pagina te zien en bovenin de pagina staan de metatags die voor de zoekmachine zijn geschreven. Stel dat we de website die we in deze cursus gemaakt hebben serieus willen gaan publiceren op het internet, dan zouden de metatags voor deze website er als volgt kunnen komen uit te zien: <meta name="title" content="Welkom op de website van…" /> <meta name="description" content="ontwerp je eigen website met kompozer" /> <meta name="keywords"cursus kompozer, kompozer open-source editor, basis cursus kompozer, cursus website maken met kompozer" /> <meta name="language" content="nl" /> <meta name="rating" content="General" /> <meta name="revisit-after" content="30 days" /> <meta name="robots" content="index,follow"/>
60
De title beschrijft de titel van de website. Description: omschrijft waar de website over gaat. Keywords: zijn de steekwoorden, gebruikers zoeken met zoektermen op zoekmachines. Google gaat zoeken en komt bij deze website uit. Language: website is Nederlands Rating: hoe moet deze website geclassificeerd worden; als algemeen. (andere categorieën zijn: onderwijs, kunst, seks, wetenschap, enzovoort). Revisit-after: googlebot (de zoekrobot) bezoek mij opnieuw over 30 dagen. Robots: bewaar de index in de database en volg alle linken. Er zijn nog meer metatags te bedenken, maar voor dit ogenblik zijn dit wel de belangrijkste. Bezoekersteller Het is altijd leuk om te weten waar de bezoekers van je website vandaan komen en hoeveel bezoekers er iedere dag komen. Er bestaan veel tellers: de een is iets nauwkeuriger dan de andere, maar in het algemeen doen ze wat ze moeten doen: tellen. Het maakt daarom ook niet uit of je een teller van Nederlandse bodem haalt, uit België of Amerika. Het enige probleem is: reclame voor de neus van je bezoeker. Vooral de teller van NedStat is hier berucht om. Niet alle tellerfabrikanten maken zich hier schuldig aan. Bij OneStat krijg je een kleine afbeelding op de pagina: Bij BelStat een zeer bescheiden grafiekje: Als je op die iconen klikt die meestal op de index pagina staan, wordt je naar de teller pagina gebracht waar de registratie wordt bijgehouden. Een gastenboek De meeste providers ondersteunen niet het gebruik van een gastenboek. Een gastenboek is niets anders dan een pagina waar bezoekers hun mening kunnen geven over je website. Als je al eens een gastenboek hebt bekeken, zul je niet veel meer tekst tegenkomen dan: goed of mooi gedaan en veel succes verder. Eigenlijk voegt een gastenboek nauwelijks iets toe aan je website en bovendien: alle aanbieders van gastenboeken bedelven je gelijk met reclame.
61
Het maken van een foto album met "JAlbum". LET OP: omdat er steeds nieuwere/aangepaste versies uitkomen, kunnen de getoonde afbeeldingen een beetje afwijken. Dit hoeft verder geen belemmering te zijn om toch succes vol een fotoalbum te maken. Dus niet schrikken als de afbeelding er iets anders uitziet. JAlbum is geen Open Source (de broncode is niet vrijgegeven) maar is wel helemaal gratis en niet commercieel. Het wordt ontwikkeld door een stel programmeurs die het leuk vinden om veel tijd en energie te steken in een programma waarmee het mogelijk is om een foto album online te zetten en dit voor iedereen beschikbaar te stellen. JAlbum is uitermate gemakkelijk in gebruik (kind kan de was doen), met een paar handelingen heb je zo een kompleet foto album gemaakt wat je vervolgens op je webruimte kunt zetten / publiceren. Start je het programma voor het eerst op dan zie je dit scherm. Je hoeft je niet te registreren, dus zet eerst een vinkje voor ‘Don’t show again’ (laat dit niet meer zien) en klik op de knop ‘No, thanks’ (nee, bedankt). Het welkomstscherm verdwijnt.
62
Het scherm ziet er nu zo uit
Nu kunnen we een album aanmaken. Klik als eerste op de knop “Instellingen” in het menu links. Je komt dan in het tabblad Algemeen.
63
Navigeer naar de map waar je de foto’s hebt staan die je wilt gebruiken voor je album. Zie hierboven. Dat kan je C-schijf zijn Mijn documenten, het mag ook een andere plaats zijn. De doelfolder (de map waar het echte album komt te staan is al ingevuld. Als je dat hebt gedaan klik je op de knop sluit.
64
De map met je foto’s worden nu ingeladen in het programma en het enige wat je nu nog hoeft te doen is klikken op album maken.
Het album wordt nu gemaakt volgens de standaard instellingen. Als dit klaar is heb je de mogelijkheid om in het scherm te klikken op voor vertoning. Uiteraard wil je dat en klik je daar op. Het album wordt nu geladen en je kunt met de knoppen door het album navigeren. Je hebt nu met een paar minimale handelingen je album gemaakt. Als je het programma nu sluit, wordt je gevraagd of de instellingen moeten worden opgeslagen kies voor Ja en dan op dezelfde locatie waar het album zich bevindt. Hiermee kun je hetzelfde album in een later stadium veranderen of van meer informatie voorzien. Ben je niet tevreden met het sjabloon van het album, of wil je bepaalde instellingen veranderen? Start Jalbum op > Klik in het menu op Bestand > Klik op Open project
65
Navigeer naar de schijf waar je foto album is opgeslagen en selecteer het jap bestand en klik dan op openen.
Het album wordt nu geladen. Als je nu weer op de knop Instellingen klik krijg je een hele rij van 5 tabbladen met allerlei opties voor aanpassingen/ veranderingen.
Je kunt hier naar hartelust mee experimenteren. Het publiceren van je fotoalbum is al net zo eenvoudig als het publiceren van een website. Als je nu de map open maakt van je foto album, dan zie je niet alleen de foto’s, maar er zijn mappen bijgekomen, wat we nu nodig hebben is de map album. In deze map bevinden zich alle bestanden die je nodig hebt om je album op de server te plaatsen met je FTP programma.
66
Maak met je FTP programma verbinding met je host. Maak op de server een nieuwe map aan: bijvoorbeeld: album en open deze map. Navigeer nu in het linker gedeelte van je FTP programma naar je foto album en dan naar de map album. Zet alle bestanden over in de map album. Als je dat hebt gedaan staat je foto album online. Om nu op het internet je foto album te bekijken, ga je naar het adres van je website, voeg aan het adres in de adresbalk album/index.html toe en gebruik de Enter knop. Je album wordt nu geladen. als voorbeeld: http://www.lingedijk-webdesign.nl/album/index.html
67
Cascading Style Sheets CSS staat voor Cascading Style Sheets. Ook de term "Style Sheets" wordt wel gebruikt. Met CSS kun je in hoge mate de weergave van je pagina bepalen en kun je effecten bereiken die met HTML-tags alleen niet mogelijk zijn. Zo kun je bijvoorbeeld bepalen dat alle
tags 18 Points groot moet zijn in de kleur rood en met het lettertype Arial. Het is dus veel flexibeler dan HTML wat de vormgeving betreft. Je hoeft maar één keer de opmaak van je pagina’s op te geven. CSS stelt je in staat om alle stijlelementen van een website in één document onder te brengen. Dat wil zeggen dat je maar één document hoeft te veranderen om alle pagina's van je site aan te passen. Wil je bijvoorbeeld de kleur van al je Headings veranderen of het lettertype dat je in je paragrafen gebruikt? Dan verander je het CSSdocument en alle pagina's nemen deze stijl dan over. Met HTML zou je al deze wijzigingen in alle pagina's moeten aanbrengen, wat veel meer werk is. De pagina's van je site worden kleiner doordat je veel minder code hoeft te gebruiken. Hierdoor zal je site sneller laden. CSS-code is browser vriendelijk. Het wordt ondersteund door alle nieuwe browsers en dit zorgt ervoor dat de pagina’s in alle browsers er hetzelfde uit zullen zien. De CSS kan in het html-document worden geplaatst, maar meestal wordt gebruik gemaakt van een extern document (kladblok) en dit is ook vrijwel het gemakkelijkste om mee te werken. Als je een stylesheet hebt gemaakt is het enige wat je hoeft te doen: een link aan brengen in html-document naar je stylesheet. Dit geldt voor iedere pagina! Het stylesheet document bewaar je in dezelfde map als waar je ook de html pagina’s hebt geplaatst. Denk aan de extensie css en dus niet opslaan als txt De link naar een stylesheet ziet er in de bron van de pagina zo uit: De titel van de pagina. Hier komt de inhoud van je pagina. Als je die link in iedere van je html pagina plaatst zal de opmaak van alle pagina’s identiek zijn. Laten we met een klein voorbeeld beginnen. Een stylesheet maken waarin is vastgelegd dat de opmaak van de html pagina moet bestaan uit: achtergrondkleur, letterkleur, lettergrootte, regelafstand, kleur van een link, een effect als je op een link gaat staan met je muis en als laatste een kopregel. Kopieer het gedeelte tussen de lijnen ( zie hieronder) en plak dit in het kladblok. Sla het bestand op als stylesheet.css (je vindt dit bestand ook al kant en klaar op de CD: stylesheet.css In de map Cursus Kompozer 2009. 68
Maak een nieuwe blanco pagina aan in Kompozer en plaats in de head van je pagina een link naar je stylesheet. Sla de pagina op als stylesheet.html (normaal gesproken zou je voor een index kiezen) en op dezelfde plaats waar ook je stylesheet is opgeslagen. Type nu wat tekst, geef aan dat dit kopregel (kop1) moet worden, type vervolgens wat gewone tekst en breng een link aan naar een internet pagina. je de pagina weer opslaat en in de browser gaat bekijken dan zul je zien de opmaak volgens de opdrachten in het stylesheet wordt weergegeven.
Je kunt vervolgens op internet veel meer en uitgebreidere informatie vinden over het gebruik van stylesheets van vrij simpel, zoals deze oefening, tot hele complexe stylesheets waar alle opmaak tot in de puntjes wordt geregeld. Je kunt dit voorbeeld van een eenvoudige stylesheet gemakkelijk aanpassen, door eventueel het lettertype, lettergrootte en kleur gebruik aan te passen aan je eigen wensen. Als CSS te ingewikkeld voor je is of gewoon te veel tijd vraagt aan verdieping dan is het ook nog mogelijk om een complete website, inclusief stylesheet (dit samen heet een template) te downloaden via het internet. Deze zogenaamde templates voldoen aan de W3C normen. Er zitten voorbeelden bij die absoluut de moeite waard zijn om te gebruiken. Het kan je enorm veel werk schelen: http://www.freecsstemplates.org/ http://www.free-css.com/ http://templates.arcsin.se/ http://www.opensourcetemplates.org/ Het is met KompoZer heel goed mogelijk om uitgebreide stijlbladen te maken, daarvoor heeft het alle gereedschap in huis. Maar omdat ook het maken van stijlbladen niet tot 69
de basis behoort maar om echte extra studie vraagt, wordt het in deze cursus niet verder behandeld.
Domeinnaam Een domeinnaam is niets anders dan een ruimte die je huurt bij een host-provider. Als je bij een host-provider een eigen domein hebt laten registreren, bijvoorbeeld http://www.mijneigennaam.nl dan is dat domein je eigendom en de host-provider zorgt er voor dat je onder die naam bereikbaar bent op het internet. Vervolgens krijg je webruimte aangeboden om daar je internetpagina’s onder te brengen. Bij het eigen domein krijg je vervolgens de beschikking over ‘eigen naam’ emailadressen, kun je gebruik maken van formulieren en allerlei andere internet toepassingen voor je website. De ruimte die je nodig hebt hangt helemaal af van hoe groot je website wordt. Een ruimte van 250 MB is meer dan genoeg. Wil je ook persoonlijke / back-up bestanden op de server plaatsen dan heb je uiteraard (veel) meer nodig. Er bestaan tientallen host-providers en de prijzen variëren van een paar tientjes per jaar tot meer dan honderd euro per jaar. Hieronder willekeurige bedrijven, als voorbeeld: http://www.hosting2go.nl/ http://www.deheeg.nl/ http://www.sohosted.com/ Wil je het helemaal gratis hebben: http://www.gethost.nl/ Het pakket van 250 MB bij gethost zou ik eerder nemen dan het gratis pakket. Kost maar een paar euro en je hebt er net iets meer zekerheid en service voor. En: http://gratis-host.eu/
70
Websites templates. Deze aanvulling heb ik geschreven voor de wat gevorderde website maker en is nog vrij bescheiden geschreven. Hij is ook meer bedoeld om te laten zien wat er allemaal mogelijk is met css. Als dit te ingewikkeld voor je is: gewoon overslaan! Een template is een sjabloon en een sjabloon is een kant en klare opgemaakte webpagina. In een template is de menustructuur, kleurgebruik, lettertype, locatie van een afbeelding allemaal al vastgelegd. De meeste css templates worden ook nog eens, als bijkomend voordeel, goed gevalideerd door het W3C. Als je zelf niet zo bedreven bent in het ontwerpen van een website dan is het gebruik van een template een geweldige uitkomst. Templates vindt je in alle soorten en maten, bij honderden tegelijk, op het internet. Omdat we er naar streven om een gevalideerde website te maken. Heb ik een template opgezocht. Deze zit in de map template. Deze website is gemaakt met CSS en je hoeft dan ook alleen maar wijzigingen in het CSS bestand door te voeren, om het geheel naar je eigen wensen aan te passen. Heb je een CSS bestand gewijzigd en opnieuw bewaard, dan kun je door de index.html te bekijken direct de veranderingen zien die je hebt aangebracht. Het enige wat je in de index zelf hoeft te veranderen zijn de menu namen en de verwijzingen naar de andere pagina’s die je gaat maken. Met Kompozer open je de index van je template en vervolgens kies je voor opslaan als… om je andere pagina’s een naam te geven. Voordat je daar nu mee gaat experimenteren en om te voorkomen dat je de originele bestanden gaat overschrijven: Maak een kopie van de template die je wilt gaan gebruiken en ga daarmee aan het werk. Mocht er van alles mis gaan, kun je later weer een nieuwe kopie gaan gebruiken. Als voorbeeld de template dobi. Het oorspronkelijke template dobi heb ik omgezet tot een bijna complete website. Ik heb de index geopend, de menuverwijzingen aangepast en vervolgens de index vijf keer achter elkaar opgeslagen als…html bestand. De website dobi heeft zes pagina’s die wat uiterlijk betreft allemaal identiek zijn. Als je de index in de browser gaat bekijken kun je door alle pagina’s navigeren. Met uitzondering van de tekst is dobi eigenlijk al compleet en dus bijna af. Alles wat je verder ziet; de afbeelding in de header (kop van de pagina), de gebruikte achtergrondafbeelding, lettertype, lettergrootte en kleuren wordt allemaal geregeld en vastgelegd in het css bestand. Dit is dat ook het meest belangrijkste bestand van de website. Gaat het daar verkeerd of worden er daar dingen verkeerd omschreven, dan gaat het gelijk op alle pagina’s van de hele website verkeerd. Wil je een andere afbeelding gebruiken, ander lettertype, grootte en kleuren: het css bestand aanpassen! 71
Als voorbeeld. In de map img (images/afbeeldingen) van de template vindt vier afbeeldingen. Twee oorspronkelijke afbeeldingen en twee afbeeldingen die door mij zijn verandert waardoor het uiterlijk van de website is aangepast. Deze twee aangepaste afbeeldingen bepalen nu het gezicht van de website. Dat zijn de afbeeldingen: woningen.jpg en de bdg.jpg Deze afbeeldingen zijn met een fotobewerkingsprogramma aangepast en vervolgens heb ik in het css bestand de verwijzing naar deze afbeeldingen opgegeven. Overal in het css bestand kom je verwijzingen tegen naar gebruikte kleuren, bijvoorbeeld: color : #acaf2c; Door de code in een andere kleurcode te veranderen kun je de gebruikte kleuren van bijvoorbeeld de tekstkleur veranderen. Een kleurcode begint altijd met een # en wordt afgesloten met een punt komma. Heb je een kleur verandert, css bestand opslaan en de index.html in de browser bekijken. Je ziet direct de verandering. Ben je er niet tevreden over, tabblad ‘Bewerken’ en dan kiezen voor ‘ongedaan maken’. Door er veel mee te experimenten zul je er vanzelf enige handigheid in krijgen. Het is vaak een kwestie van vallen en opstaan en wanneer iets mislukt gewoon weer helemaal opnieuw beginnen en diep zuchten. Een heel goed uitgangspunt om je in de beginselen van css te verdiepen en onder de knie te krijgen: http://www.web-garden.be/ Als je meerdere css templates zoekt, dan brengt Google je daar vanzelf naar toe met de zoek opdracht: css templates
