ONTWERP JE EIGEN

MET KOMPOZER

2006 Auteur en Copyright Freek Pol. Dit document mag gekopieerd worden uitsluitend voor eigen ge ruik. Commerci!le verspreiding is nooit toegestaan. "er#iene uitgave $eptem er 20%2

&nhoudsopgave 'oorwoord &nleiding "oo)dstuk % "oo)dstuk 2 "oo)dstuk , "oo)dstuk ( "oo)dstuk "oo)dstuk 6 "oo)dstuk 2 "oo)dstuk + "oo)dstuk 4 "oo)dstuk %0 "oo)dstuk %% "oo)dstuk %2 "oo)dstuk %, *6tra 7i8lagen 9leuren : ;ava$cript 5e site laten vinden .eller : <asten oek Fotoal um Cascading $tyle $heets Domeinnaam C$$ templates -2 -, -(:---+ 60 6% 'oor ereiding *erste pagina *en nieuwe pagina "yperlinks Controleren "./01code *en )otopagina maken /eerdere )oto3s toevoegen &ntroductiepagina 0inkpagina Pu liceren van de we site *en tweede we site Ankers maken 5erken met lagen 2 ( 6 + %%+ 2% 2, 26 ,, ,2 ,4 (( (+ -0

'oorwoord. Dit cursus oek is in eerste instantie edoeld voor docenten= die aan senioren willen leren= hoe 8e een we site maakt innen een seniorwe leercentrum. 7i8 het schri8ven van dit cursus oek is echter ook rekening gehouden met mensen die geen docent #i8n en mensen die niet in de gelegenheid #i8n om een cursus te volgen en het dus #onder hulp moeten doen. >ok dan kun 8e #el)standig met dit oek leren een we site te maken= ook al hee)t leren in groepsver and ?ge#ellig onder elkaar met ondersteuning@ de voorkeur. ;e kunt #el) leren "./0 te schri8ven= maar dat is niet iets dat 8e even op een #ondagmiddag kunt leren= daar is het te comple6 voor. 5il 8e 8e er verder in verdiepen. "et startpunt voor htmlA httpA::www.handleidinghtml.nl: "et programma dat we in de#e cursus ge ruiken is de we 1editor 9ompoBer en dat is 3open source3. >pen source programma3s #i8n programma3s die gemaakt worden door pro)essionele programmeurs op vri8willige asis. Bi8 stellen die programma3s gratis ter eschikking ?#oals i8voor eeld het esturingssysteem 0inu6@= vanuit de )iloso)ie dat het internet en de programma3s die 8e voor 8e computer en internet nodig he t= voor iedereen toegankeli8k moeten #i8n= waar ook ter wereld. Daaruit volgde voor de#e cursus automatisch de gedachte om de programma3s= die 8e nodig he t om een we site te ouwen= allemaal open source te laten #i8n. Dat wil #eggenA gratis te ge ruiken en te verspreiden en desnoods te ver eteren o) aan te passen= voor iedereen= waar ook ter wereld. De so)tware is ruim voor handen en van goede kwaliteit= de programma3s doen wat #e eloven te doen. >m uitsluitend die reden is hier voor 9ompoBer geko#en. "et programma wordt nog steeds ontwikkeld= alleen ge eurt dat in een heel lang#aam tempo. "et kent lang #oveel mogeli8kheden niet als een commercieel programma maar is toch geschikt genoeg om een uitge reide asis we site mee te maken= #onder al te veel toeters en ellen. "et doet wat het moet doenA we pagina3s maken met correct "./0 ge ruik= #odat 8e #el) geen "./0 hoe)t te leren. &n tegenstelling tot veel andere we 1 editors is de "./01code die het programma schri8)t )outloos. 9ompoBer ondersteunt i8voor eeld niet het ge ruik van )rames ?een )rame is een soort raamwerk waarin twee= drie o) wel vier pagina3s geplaatst kunnen worden en die= wanneer 8e #e in de rowser #ou eki8ken= tegeli8kerti8d geladen worden. ;e #iet CCn pagina= maar het #i8n er dus meer@. /eer uitleg en voor eeldenA httpA::www.homepage1maken.nl:htmlcursus:les+.php "et werken met )rames in een we site is populairA het is vaak prettig navigeren= maar voor linden en slecht#ienden die van spraak estuurde so)tware ge ruik moeten maken is het waardeloos omdat niemand het programma vertelt welke pagina als eerste moet worden voorgele#en. Daarnaast maken alle we 1editors veel )oute "./0 code in )rame pagina3s. >m die reden he en de 9ompoBer ontwikkelaars er van a)ge#ien om het maken van we sites opge ouwd uit )rames te ondersteunen. Daarnaast kent 9ompoBer geen invoegtoepassingen om i8voor eeld een )lash )ilmp8e in te voegen. *en Flash we site is een dynamische we site die geheel is opge ouwd uit #ogenaamde )lash ?)ilm@ estanden. Als 8e in een later

stadium een we site wilt maken met allerlei )lash estanden= lichtkranten= #ul 8e er een andere editor i8 nodig he en. Dat 9ompoBer dit allemaal niet ondersteunt= hee)t allemaal te maken met correct "./0 ge ruik. 7ovendienA wat hee)t een linde : slecht#iende aan een schitterend heen en weer ewegende )litsende tekst alk o) aan een )ilmp8eD >ok al hee)t 9ompoBer geen invoegtoepassingen voor )ilm:video= een Eou.u e )ilmp8e kan #onder pro lemen ingevoegd en a)gespeeld worden in een gemaakte we pagina. >p de we site van Eou.u e staat onder een )ilmp8e alti8d de code ?delen@ om een )ilmp8e in te voegen om in de roncode van de we pagina te plaatsen. 9ompoBer is uitgesproken so er= maar het voldoet voor iedereen= 8ong en oud. De#e cursus had ook kunnen hetenA we sites ouwen voor 8ong en oud. 0eren is tenslotte niet iets dat alleen senioren aangaat. &n de#e cursus leer 8e stap voor stap een we site ouwen= tot en met het pu liceren van 8e we site op het internet. Als 8e redeli8k goed ekend ent met de computer= het internet en het ge ruik van een tekstverwerker en alle handelingen die daar i8 horen gemakkeli8k kunt uitvoeren= #ul 8e het ouwen van een we site #onder al te veel pro lemen snel onder de knie kri8gen. De#e cursus is geschreven ti8dens het ge ruik van 5indows FP. >ndertussen #i8n er nieuwere esturingssystemen verschenen= wat etekend dat werk alken er anders #i8n gaan uit#ien en soms ook van plaats #i8n verwisseld en andere namen he en gekregen. &k ga er vanuit dat dit geen elemmering #al #i8n. >ok onder 5indows 2 valt er uitstekend met 9ompoBer te werken. Dit cursus oek wordt door twee groepen mensen ge ruikt. *en groep mensen die de cursus van het internet he en gehaald en de cursus #el)standig doen en een groep mensen die een cursus volgen in een lokaal met een docent voor de klas. Dat hee)t voor verwarring ge#orgd. De cursus is nu #o opge#et dat de uitleg voor eide groepen duideli8k #ou moeten #i8n en dat het niet #ou mogen uitmaken tot welke groep 8e ehoort. &n de#e uitgave he ik #oveel mogeli8k gepro eerd verwarring hierover te voorkomen. 9om 8e toch onduideli8kheden tegen= snap 8e epaalde dingen niet o) kom 8e een )out tegen= schroom niet mi8 dit te laten weten. *en handleiding : cursus oek schri8ven is en li8)t tenslotte mensenwerkA lingedi8kGgmail.com ;e kunt als dat 8e voorkeur hee)t= ook een du el#i8dig in kleur geprinte ?ring and@ versie estellen. De kosten hiervoor edragen 20=00 euro= inclusie) ver#endkosten. Aanvragen via e1mail.

Inleiding. *en we site o) homepage op het internet estaat uit CCn o) meerdere pagina3s. >m de#e we pagina3s te maken he 8e een programma nodig om #ogenaamde "./0 pagina3s te maken. "et is niet veel meer dan een veredelde tekstverwerker. "et verschil met een gewone tekstverwerker #oals 5ord o) 5ordPer)ect is dat een "./0 editor alle tekst die 8e schri8)t automatisch om#et naar "./0 en alle andere dingen die 8e invoegt ook automatisch om#et naar "./0 code. Dit wordt ook wel een 3what you see is what you get3 editor genoemd. Alles wat 8e schri8)t en invoegt wordt precies #o in "./0 door de rowser weergegeven. Andere ekende editors #i8n /icroso)t FrontPage 200, en Ado e Dreamweaver. Dit #i8n de moeili8kste en de duurste programma3s= respectieveli8k ,00 en -00 euro. FrontPage is in 2002 geheel vernieuwd en heet nu /icroso)t *6pression 5e ?niet naar het Hederlands vertaald@ en Dreamweaver is sinds 2002 ook in het Hederlands eschik aar. 5elke editor 8e ook neemt= er #i8n er nog veel meer= #e he en allemaal het#el)de nadeelA #e maken veel )outen in de te schri8ven "./0 code. Hu kun 8e 8e a)vragen o) dat allemaal wel #o erg is= tenslotte schri8ven ook maar weinig Hederlanders )outloos Hederlands. "ier ligt dat toch iets anders. De meeste mensen ge ruiken de rowser &nternet *6plorer= gevolgd door de rowser Fire)o6 en <oogle Chrome= >pera o) $a)ari. Al die rowsers handelen "./0 anders a). &nternet *6plorer vindt de meest grote )outen ?lees slechte html code@ nog toelaat aar en laat alles #ien #oals het moet. Fire)o6 is veel strenger en laat maar weinig )outen toe. Dit #al als resultaat he en dat een we pagina met wat )outen er in= in &nternet *6plorer er heel anders uit kan #ien dan in Fire)o6 o) een andere strenge rowser. >m die reden willen we )outloos "./0 #odat we geli8k wetenA wordt mi8n we site goed in Fire)o6 weergegeven= dan wordt mi8n we site in #i8n algemeenheid ook goed in andere rowsers weergegeven= en daar is het om te doen. "et gaat er dus niet om welke rowser eter is= maar dat goede "./0 in alle rowsers ook goed wordt weergegeven. >m die reden is het aan te raden om 8e eigen werk in Fire)o6 te eki8ken en niet in &nternet *6plorer. <e ruik vooral de rowser van 8e eigen voorkeur maar vergeet de anderen niet. HTML "./0 is de a)korting voorA "yper .e6t /arkup 0anguage ?vooral niet onthouden@. "et is een taal die aan de rowser 3vertelt3 hoe alles op de internetpagina moet worden weergegeven. "./0 is dus geen programmeertaal= het legt alleen de opmaak en de structuur van de pagina vast. "./0 is eigenli8k al verouderd en de opvolger van "./0 is F"./0 ?*6tensi le "yper .e6t /arkup 0anguage@ en dat kom 8e ook al vaker tegen= maar nog steeds worden de meeste pagina3s in "./0 gemaakt. >p de lange duur #al F"./0 het gewone "./0 helemaal gaan vervangen= maar #over is het nog lang niet.

Computers #i8n op #ich#el) nogal domme dingen= #e egri8pen niet waar op een pagina een kop en titel moeten staan en welke a) eelding er op een epaalde positie geplaatst moet worden. 'oor al die speci)ieke onderdelen en de te epalen posities moeten dus codes worden geschreven= #odat de rowser 3weet3 hoe hi8 alles moet weergeven. Die geschreven code heet "./0. >mdat 9ompoBer )outloos "./0 schri8)t= gaan we in de#e cursus geen aandacht esteden aan "./0= o) een poging doen het 8e te leren. Daarvoor is het een te comple6e taal. 5e pagina3s kun 8e dus gewoon op 8e eigen PC maken met een programma en later op het internet #etten. Dit heet uploaden. Dit doe 8e in de regel met een F.P programma ?File .ransport Protocol@= waarover later meer. ;e stuurt alle estanden dan met een F.P programma naar een server die 8ouw pagina3s #icht aar maakt op het internet= i8voor eeld naar de ruimte die 8e he t gekregen van 8e eigen provider om een eigen we site neer te #etten. Hiet alle providers ondersteunen het F.P ge ruik. ;e moet dus voordat we #over #i8n uit#oeken hoe 8e i8 8e provider estanden kunt uploaden. 9reeg 8e enkele 8aren geleden nog we ruimte van 8e provider om een homepage neer te #etten= de laatste ti8d tre) 8e dat nog maar i8 weinig providers aan. 5il 8e nu serieus een we site gaan maken= pu liceren en vervolgens onderhouden dan is de este keu#e om een eigen domein te kopen. ;e koopt voor een paar tient8es per 8aar i8 een host provider een eigen domein waar 8e 8e we site kunt laten plaatsen. /eer hierover in de i8lage. *en we pagina met alleen maar kale tekst is niet echt uitnodigend= daarom werken we ook met opgemaakte tekst en met a) eeldingen. 0ang niet alle a) eeldingen #i8n daar echter geschikt voor= I) omdat de a)meting van de a) eelding veel te groot is= I) omdat de estandsgrootte veel te hoog is. *en a) eelding met een estandsgrootte van -0 97 laat #ich nu eenmaal sneller eki8ken in een rowser dan een a) eelding van ,00 97. &n een we pagina moeten daarom estanden #o klein mogeli8k #i8n. 5eliswaar hee)t +0J van de Hederlanders een reed and internet ver inding= maar 20J met het nog gewoon doen met een tele)oon internet ver inding. 'oor de#e laatste mensen geldtA een we pagina met %0 )oto3s van i8voor eeld % /7= daar loopt een PC op vast= o) de e#oeker loopt weg omdat het laden van de a) eeldingen veel te lang#aam gaat. Dat willen we nu 8uist voorkomen. >) we nu een lang#ame o) snelle internetver inding he enA mensen willen dat een we site snel geladen wordt en willen niet wachtenK Hiet alleen de grootte van de )oto is van elang= maar vooral het estands)ormaat. 5e he en dus een )oto ewerkingsprogramma nodig voor aanpassingen. &n de#e cursus maken we ge ruik van het )oto ewerkingsprogramma PhotoFiltre ?Hederlandstalig@. >veral in de#e handleiding= #ul 8e iets moeten doen. 5anneer 8e een opdracht moet doen o) iets moet uitvoeren wordt de tekstkleurA rood.

Hoofdstuk 1 Voo !e eiding. /ensen die een cursus volgen in een leercentrum #ullen de estanden die nodig #i8n voor de#e cursus aangereikt kri8gen van hun docent. 'oor de mensen die de#e estanden al gedownload he enA A)hankeli8k van de plaats waar 8e gedownloade estanden opslaatA verplaats het cursuskompo#er.#ip estand naar /i8n documenten o) Documenten= klik het aan ?CCnmaal@= doe rechter muisklik en kies voorA hier uitpakken. "et #ip estand wordt nu uitgepakt. *r evindt #ich nu in de map /i8n documenten o) Documenten een map Cursus 9ompoBer. /aak in de map /i8n documenten nog een map aan en noem de#e /&;H ">/* PA<*. >pen ?du elklik@ de map Cursus 9ompoBer. $electeer de map A) eeldingen= klik op het ta lad 7ewerken en klik met de linker muisknop op kopi!ren. >pen nu de map /&;H ">/*PA<*= klik op het ta lad ewerken en klik nu met de linker muisknop op Plakken. De map A) eeldingen is nu gekopieerd naar de map /&;H ">/*PA<* >pen de map Programma3s ?in de map Cursus 9ompoBer@= open de map 9ompoBer 0.2.%0 klik op het pictogram 9ompoBer.e6e Doe rechter muisklik en kies voor kopi!ren naar L 7ureau lad ?snelkoppeling@. Alle estanden die nodig #i8n voor de asis we site die we gaan maken staan nu op de goede plaats. "et programma 9ompoBer is een #ogenaamd porta le ?draag aar@ programma. Dit wil #eggen dat het programma geen installatie estand kent en dus niet geMnstalleerd hoe)t te worden op de computer. "et is direct oproep aar. Als 8e 9ompoBer voor de eerste keer opstart= #ie 8e dat alles in het *ngels staat ?kri8g 8e een waarschuwing vanwege een niet ondertekende digitale handtekening= de#e waarschuwing negeren en gewoon doorgaan@. &n de map van 9ompoBer #it echter een taal estand om het programma om te #etten in de Hederlandse taal. >pen 9ompoBer= ga naar het ta lad .ools= klik op het item *6tensions= klik op &nstall= navigeer naar de map 9ompoBer= klik het estaan aanA kp#1 langpack1nlH0.6pi 9lik op openen en na een paar seconden klik 8e op install Als 8e 9ompoBer nu a)sluiten en opnieuw start is het programma in het Heder lands. Als 8e alles goed he t gedaan. Bi8n er in de map /i8n documenten twee

mappen i8gekomenA De map Cursus 9ompoBer en de map /&;H ">/*PA<*. "e o#$%%k. 'oordat we daadwerkeli8k gaan eginnen met het ouwen van een we site he 8e waarschi8nli8k al een idee wat voor we site dit moet wordenD ;e he t al diverse we sites ekeken= waarvan 8e de ene prachtig vond en de andere weer leli8k. /aak voor 8e#el) een li8st8e met antwoord op de volgende vragenA N 'oor wie maak ik de#e we site ?doelgroep@D N 5at voor e#oekers eki8ken mi8n we siteD N 5elke in)ormatie ga ik ge ruiken voor mi8n we siteD N "oe moet het uiterli8k worden= #akeli8k= so er o) 8uist vroli8kD De#e in)ormatie #al grotendeels epalen= hoe 8e we site er uiteindeli8k uit komt te #ien voor wat etre)t opmaak= tekst= kleurge ruik= a) eeldingen en de wi8#e van navigeren. *en we site moet er aantrekkeli8k uit#ien= #odat 8e er niet alleen #el) ple#ier aan elee)t= maar waar ook 8e e#oekers met ple#ier naar #ullen ki8ken. 7eperk 8e tot de in)ormatie die i8 het onderwerp past. 5ees conseOuent in 8e opmaak en ge ruik voor alle pagina3s de#el)de achtergrondkleur o) achtergronda) eelding. <e ruik ook alti8d het#el)de lettertype en de#el)de lettergrootte. De meest ge ruikte lettergrootte is %2 punten= ge ruik geen kleiner. "et ovenstaande #ullen we in de#e cursus in on#e eerste oe)ening nu 8uist niet doen. 5e ge ruiken alles door elkaar= #odat duideli8k wordt dat een conseOuent ontwerp het meeste ki8kple#ier gee)t. &edere keer als 9ompoBer wordt opgestart= kri8g 8e een scherm voor 8e met tips. "aal onderin het scherm het vink8e weg= #odat dit een volgende keer niet meer ge eurt en klik ook in de linkerkolom= de site manager weg ?kruis8e rechts oven in de kolom@ aange#ien we de#e niet ge ruiken. De inge ouwde sitemanager van 9ompoBer is erg onhandig in het ge ruik.

Hoofdstuk & "e ee ste #%gin%. 'oordat we verder gaanA sluit alle schermen:vensters. 'oordat we met 9ompoBer aan de slag gaat eerst iets ingewikkeldstA Bodra er in 9ompoBer een nieuwe lanco pagina wordt aangemaakt= wordt er geli8k ver orgen html code gegenereerd. 5e kunnen dat #ien in de ron van de pagina. Die code is F"./0 %.0 $trict ?strenge codering die geen enkele )out toestaat@.

5i8 willen graag wat soepeler en niet al te streng coderen en gelukkig kunnen we dat #el) wat minder streng a)stellen. <a in 9ompoBer naar het ta lad *6tra L 'oorkeuren L <eavanceerd en plaats het ollet8e voor D.D .ransitional en klik vervolgens op >9. De#e instelling wordt onthouden en de pagina3s die we gaan maken worden ontworpen in F"./0 %.0 .ransitional.

>pen de map Cursus 9ompoBer en open vervolgens de map Programma3s. &nstalleer de rowser Fire)o6 ?du elklik op het Fire)o6 $etup e6e pictogram@. /aak van Fire)o6 8e standaard rowser. 7i8 de eerste keer starten van Fire)o6 wordt gevraagd o) 8e Fire)o6 als tandaard rowser wil= kies voor ;a. &nstalleer het programma PhotoFiltre ?lees het lees1mi81eerst tekst estandK@ $tart het programma 9ompoBer via het pictogram op het ureau lad o) via snelstarten onderin de taak alk. >ri!nteer 8e maar eens op alle knoppen. Als 8e met 8e muis een knop aanwi8st= verschi8nt er een onderschri)t ?alternatieve tekst@. "iermee wordt aangegeven wat de )unctie van de#e knop is. Heem hier even de ti8d voor.

De werk alk li8kt erg veel op de werk alk van een tekstverwerkingsprogramma= maar ook op de werk alk van 8e rowser= waarmee 8e diverse taken kunt uitvoeren. /et de derde knop van links opslaan= kun 8e de pagina3s opslaan op 8e eigen computer. De pagina3s worden opgeslagen als een html pagina. >ok al is de pagina die 8e voor 8e he t nog helemaal leeg= klik opA opslaan. *r verschi8nt nu een scherm waarin 8e de titel van de huidige pagina moet opgeven.

.ypeA 5elkom op de we site van ?8e eigen naam@.

Dit is de naam die in het titelvenster te le#en is als 8e de pagina weer opent= de paginatitel. *r verschi8nt nu weer een scherm met opslaan als= waar 8e de locatie en de estandsnaam moet kie#en om de pagina op te slaan. Dit moet natuurli8k de map mi8n homepage #i8n. $electeer de#e map= klik op openen en haal nu de estandsnaam vanA welkom op de we site vanP helemaal weg en verander dit door inde6.

Te 'e duideli(king. "e )) ste #%gin% '%n een *e!site *o dt %lti(d en in %lle o$st%ndig+eden de inde,.+t$l genoe$d. Als 8e meerdere we pagina3s he t= dan weet 8e nu dat de openingspagina van 8e we site de inde,.+t$l pagina is. Dit is nameli8k de elangri8kste pagina. Als iemand met een #oekmachine naar een we site #oekt o) in de rowser een internet adres intypt= gaat de rowser alti8d op #oek op de server naar de inde6.html om die als eerste te laten #ien. "oe 8e de overige pagina3s noemt is niet elangri8k= maar #onder inde6 wordt 8e we site niet gevonden en is die dus onvind aar. "et grote witte vlak dat 8e nu onder de werk alken in 9ompoBer #iet is in )eite 8e internetpagina. "ierin kun 8e dus teksten= plaat8es en#ovoort gaan plaatsen. .ekst invoegen= gaat op de#el)de manier als in 5ord. Dit geldt ook voor het veranderen van 8e lettertype ?<Q>>.= klein= cursie)= vet= kleur= uitli8ning en#ovoort. >m een ander lettertype te selecteren ga 8e via het ta lad >pmaak : 0ettertype naar het lettertype dat 8e voorkeur hee)t= maar let hier i8 wel op. Hiet iedere PC hee)t de#el)de lettertypen. "et lettertype dat 8e wilt ge ruiken kan i8 een andere ge ruiker a)we#ig #i8n.

<e ruik dus een veel voorkomend en standaard lettertype= #oalsA Arial= Arial 7lack= Courier Hew= .ahoma= Comic1$ans= <eorgia= &mpact= .imes Hew Qoman= .re uchet en 'erdana. ;e kunt i8voor eeld het lettertype Agnes wel heel mooi vinden= maar als de PC van 8e e#oeker dit lettertype niet hee)t kri8gt hi8 gewoon een standaard lettertype te #ien en #o gaat het eoogde e))ect dus verloren. .ype in 8e lege paginaA 5elkom op de we site van..?8e eigen naam@ De tekstgrootte staat standaard ingesteld op varia ele reedte= dat wil #eggen dat de e#oeker van 8e we site het lettertype en de grootte te #ien kri8gt= #oals dat op #i8n:haar computer is ingesteld. De#e knop vindt 8e in de werk alk onder tekst. ;e kunt met de#e knop de tekstgrootte instellen= maar ook een alinea instellen o) terug naar de standaard tekst. 9>P% hee)t de grootste letter= 9>P6 de kleinste. Bodra 8e aangee)t dat kop % weergegeven moet worden #al dat ook op de computer van de e#oeker worden weergegeven. Bet de cursus maar ergens in de eerste regel en gee) de#e kop % mee. "e o#$%%k /et de knop >pmaak in de werk alk kunnen we de pagina opmaken. 9lik daar op het itemA paginakleuren en achtergrond. *r verschi8nt nu een venster= #et het ollet8e voorA Aangepaste kleuren ge ruiken.

Hu is het mogeli8k om voor alle onderdelen in het scherm andere kleuren te ge ruiken= dan de standaard kleuren. 5il 8e een achtergrondkleur= dan klik 8e op de knop naast de tekst achtergrond. *r verschi8nt dan een kleurenkie#er waar mee 8e kleuren kunt wi8#igen. 5i8#ig normale tekst in rood. 5i8#ig de achtergrondkleur in licht lauw. 9lik op >9.

9lik nu in de werk alk op >pslaan en vervolgens op de knop 7eki8ken. De rowser wordt gestart en laat de pagina nu #ien. 'ergeten om een pagina op te slaanD Dat is niet erg= 8e wordt er automatisch op gewe#en als 8e een pagina niet he t ewaard als 8e op de knop 7eki8ken klikt. Als 8e nog niet eerder met de rowser Fire)o6 he t gewerkt en 8e start de rowser= dan #al er een scherm verschi8nen dat toestemming vraagt om een invoegtoepassing te laten starten om het http1protocol te laten uitvoeren. <ee) hiervoor toestemming en laat de computer dit onthouden. Anders li8)t die vraag terugkomen. $luit het venster en 8e keert terug naar 9ompoBer.

Het in'oegen '%n !est%nden <ee) allereerst twee maal een *nter aan het einde van de eerste regel. 9lik in de menu alk opA invoegen 9ies in het menu dat verschi8ntA A) eelding 9lik op het gele map8e.

Hu verschi8nt de mapA mi8n documenten >pen in de map mi8n documentenA de map mi8n homepage en vervolgens de mapA A) eeldingen. $electeer de a) eeldingA os8e loemen.8pg 9lik vervolgens op >penen

&n het scherm dat verschi8nt staat een ollet8e voor alternatieve tekstA vul hier alti8d concreet in waar het hier om gaat= in dit geval vul 8e inA )oto van een os loemen. 9lik op >9 en vervolgens in de werk alk opA >pslaan. 7eki8k nu de pagina in 8e rowser en vervolgens weer sluiten. -lte n%tie'e tekst Alternatieve tekst is vooral en met name elangri8k voor linden en slecht#ienden die met gesproken tekstso)tware moeten werken. 5anneer er geen alternatieve tekst wordt ge ruikt= #al een linde : slecht#iende veel moeite he en om te navigeren op een we site. 'ooral omdat de spraak estuurde so)tware die #i8 ge ruiken de alternatieve tekst kan voorle#en. $tel 8e he t een pagina gemaakt met een )link aantal )oto3s #onder alternatieve tekst te he en ge ruik. *r wordt niks voorgele#en en de )oto3s worden niet herkend= dus li8)t het stil. De#e e#oeker #al geen idee he en wat er op de we site te 3#ien3 #al #i8n. De oorspronkeli8ke doelstelling van het internet was ?en dat is het nog steeds@A gratis en vri8e in)ormatie toegang voor iedereen= waar ook ter wereld. Als 8e daar het elang van in#iet #ul 8e niet gauw vergeten alternatieve tekst te ge ruiken. In'oegen '%n een %f!eelding *en a) eelding in een pagina wordt alti8d daar ingevoegd= waar de cursor staat. $taat de cursor in het midden van de pagina dan wordt een a) eelding dus gecentreerd ingevoegd. ;e kunt dus al van te voren epalen waar een a) eelding wordt ingevoegd. De a) eeldingslocatie ?dit is de map waar de a) eelding is opgeslagenR de map A) eeldingen@ mag in de we pagina nooit een verwi8#ing he en naar een andere map o) locatie. dus niet naar 8e C1schi8) en ook niet naar /i8n documenten. ;e #iet in de regel van de a) eeldingslocatie een hele lange verwi8#ing. Als 8e de#e pagina samen met de a) eelding nu op het internet #ou #etten en 8e #ou de pagina op het internet eki8ken= dan kri8g 8e een pagina te #ien met daarin een rood kruis8e ?&nternet *6plorer@ o) een ge roken pu##el stuk8e ?Fire)o6@. "oe kan datD De pagina en de a) eelding staan op het internet en de rowser vraagt de a) eelding op. De#e gaat nu #oeken naarA )ileA::CA: Documents and $ettings: en#ovoort /aar op de server staat helemaal geen )ileA::CA:Documents and $ettings: en#ovoort *r staat straks op de server wel een map A) eeldingen met daarin de a) eeldingA os8e loemen. *n #o moet de verwi8#ing ook #i8n en dat noemen we relatie). &n de verwi8#ing in de scherma) eelding hier oven is de verwi8#ing nog a soluut.

Als 8e de pagina nu opslaat en weer opent= moet 8e een vink8e plaatsen voorA 3 SQ0 is relatie) ten op#ichte van paginalocatie en dan #ie 8e alleen staanA A) eeldingen: os8e loemen.8pg en dat is correct. 5aarom 8e dat vink8e niet direct kunt plaatsen i8 het invoegen van een a) eelding is mi8 ook niet duideli8k.

;e "./0 pagina3s komen later op een server te staan samen met een map A) eeldingen. *r is dan geen ver inding meer met 8ouw computer. 5ordt er in de html pagina toch een verwi8#ing naar 8ouw computer gedaan= wat onmogeli8k is= dan #al het gevolg #i8nA een rood kruis8e omdat de a) eelding niet gevonden kan worden. 9ortomA alle a) eeldingen en pagina3s die 8e ge ruikt= verwi8#en direct naar de locatie waar #e #i8n opgeslagen en #i8n daarom alti8d relatie). Als een a) eelding op een internetpagina verwi8st naar een mapA A) eeldingen= dan moet die map ook daadwerkeli8k op het internet staan. Als voor eeld= om goed te kie#en #ien waarom dat nu #o vaak verkeerd gaat ?klassieke eginners)out@ kun 8e dat hier eki8kenA httpA::www.kompo#er.nl:roodkruis:

"e 8e straks alle pagina3s gemaakt en 8e ki8kt dan in de map /i8n Documenten L /i8n "omepage= dan #ou dat er #o moeten komen uit te #ienA een map met a) eeldingen en daaronder de gemaakte pagina3s Boals 8e #iet in de scherma) eelding #ie 8e de pagina3s niet #o staan= volgens de volgorde waarin 8e #e gemaakt he t= maar op al)a etische volgorde= 5indows doet dat automatisch.

Hoofdstuk . Een nieu*e #%gin% $%ken 9lik in de werk alk op de knop Hieuw= de eerste linker knop onder de werk alk. *r verschi8nt nu een lege pagina #onder titel. ;e eerste pagina was klaar. Als 8e 9ompoBer nog open he t staan= he 8e in ta laden= twee pagina3s voor 8e. De inde6 pagina met de titel welkom op de we site vanP en een pagina metA geen titel. ;e kunt #e willekeurig aanklikken. Als 8e nu de lege pagina voor 8e he t= dan klik 8e opA opslaan. &n het scherm dat nu verschi8nt vul 8e inA pagina2 en dan op >9. &n het venster 3opslaan als3 dat nu verschi8nt is de naamA pagina2 al ingevuld en klik 8e opA opslaan. Een %f!eelding %ls %/+te g ond &n de eerste pagina die 8e gemaakt he t= he 8e een achtergrondkleur geko#en ?licht lauw@. "et is niet alleen mogeli8k om met een achtergrondkleur te werken= 8e kunt ook een a) eelding ge ruiken als achtergrond. &n de map oe)en estanden die op de CD staan he ik er al een hele oel voor 8e geplaatst. "e 8e daar nog niet genoeg aan dan kun 8e door te #oeken met <oogle opA ackgrounds= tientallen we sites vinden met honderden achtergronden die 8e vri8eli8k kunt opslaan en ge ruiken. 9ies niet voor opdringerige achtergronden o) al te )elle kleurenA dat doet pi8n aan de ogen en het leidt a) van wat 8e te vertellen he t. /aak vooral ge ruik van neutrale a) eeldingen. 5e gaan nu een achtergronda) eelding ge ruiken.

9lik in de werk alk opA >pmaak en kies vervolgens onderin het menu voorA paginakleuren en achtergrond. 9lik in het scherm dat verschi8nt opA estand kie#en o) op het gele map8e= navigeer naar de mapA mi8n homepage= maak de#e open= open de mapA A) eeldingen en selecteerA Achtergrond,.8pg en klik vervolgens opA openen. 9ies in dit#el)de scherm voorA Aangepaste kleuren ge ruiken. 9ies voor de ( ovenste tekstopties voor de kleurA wit en voor de onderste ?achtergrond@ de kleur lauw en klik nu op >9. 5aarom een achtergrondkleur opgeven als we ge ruik maken van een achtergrond a) eeldingD $ommige mensen houden niet van a) eeldingen en he en de weergave voor het tonen van a) eeldingen in hun rowser uitge#et. Die mensen kri8gen dan een achtergrondkleur te #ien in plaats van een a) eelding. Als 8e thuis met verschillende achtergronda) eeldingen aan de gang gaat uit de map >e)en estanden= #ul 8e merken dat= als 8e de verschillende achtergronden eki8kt= sommige niet mooi worden weergegeven in het programma. Dit ligt alti8d aan de a) eelding. Achtergronda) eeldingen he en meestal maar een kleine a)meting= het programma doet dan niets anders dan die a) eelding voortdurend herhalen= #odat het scherm gevuld wordt. Daarom kunnen )oto3s eter niet als achtergronda) eelding ge ruikt worden= 8e kri8gt de )oto dan meerdere malen naast elkaar te #ien. 5e kunnen dit het este laten #ien door een )oto als achtergrond te ge ruiken. 9lik in de werk alk opA opmaak en kies in het menu voorA paginakleuren en achtergrond. 9lik in het scherm op estand kie#en. $electeer in de map A) eeldingenA os8e loemen= klik op openen en vervolgens op >9. ;e #iet nu dat de )oto #ich steeds herhaalt en dat is gewoon leli8kK 5i8#ig de achtergrond weer in Achtergrond, en klik op >9. 'ervolgens opA >pslaan. 9lik nu op de knopA 7eki8ken en 8e #iet nu de pagina #oals die op het internet wordt weergegeven. $luit de rowser. ;e he t nu een inde6 pagina waarop staatA 5elkom op de we site vanP met daaronder een a) eelding van een os8e loemen= met een licht lauwe achtergrondkleur. *n 8e he t nu een pagina met als titelA pagina2 9lik in de werk alk opA >pmaak en in het menu voorA paginakleuren en achtergrond. 9ies in het scherm dat verschi8nt opA estand kie#en o) gele map8e= selecteer in de map A) eeldingenA Achtergrond%0.8pg= klik op >penen. 9lik vervolgens in het scherm op aangepast kleuren ge ruiken en kies i8 normale tekstkleur voor wit in plaats van #wart. 9lik nu op >9 Centreer de cursor in de pagina op de ovenste regel. 9ies in de werk alk i8 tekst voorA 9op 2 en schri8) het volgende gedicht overA

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. De vicieu#e cirkel van het eeld. Als ik li8) ki8ken #oals ik alti8d he gekeken= li8) ik denken #oals ik alti8d he gedacht. Als ik li8) denken #oals ik alti8d he gedacht= li8) ik geloven #oals ik alti8d he geloo)d. Als ik li8) geloven #oals ik alti8d he gedaan= li8)t mi8 overkomen wat mi8 alti8d overkomt. 9lik in de werk alk opA >pslaan. 5e he en nu twee pagina3s klaar= maar nog niet helemaal= want we kunnen nog niet heen en weer navigeren tussen de twee pagina3s.

Hoofdstuk 0 H1#e links 2Ko##elingen3 Boals 8e op het internet via hyperlinks : koppelingen= door middel van een tekst1 o) a) eeldingskoppeling= van de ene naar de andere pagina kunt navigeren= #ullen wi8 dus ook in on#e pagina3s hyperlinks : koppelingen aan moeten rengen. &n het dageli8kse spraakge ruik wordt een hyperlink : koppeling gewoon een link genoemd. 9lik in de werk alk opA >penen en selecteer de inde6 pagina. Plaats de cursor naast de a) eelding van het os8e loemen ?selecteer de a) eelding= ge ruik dan de rechter pi8lt8es toets een keer@ en gee) 2 6 een *nter. *r wordt nu onder de a) eelding een witregel toegevoegd en de cursor staat in het midden van de pagina. 9lik in de werk alk opA &nvoegen en kies dan voorA A) eelding 9lik in het scherm dat verschi8nt opA 7estand kie#en o) het gele map8e= navigeer naar de map A) eeldingen= selecteerA utton( en klik op openen= gee) een alternatieve tekst op ?navigatieknop o) navigeerknop@ en klik dan op >9. De utton : knop verschi8nt nu als a) eelding op de inde6 pagina. De utton : knop is gewoon= net als alle andere a) eeldingen en knoppen van het internet gehaald. /et een utton : knop en daaraan een koppeling #i8n we nog niet klaar= er moet nog tekst op de utton : knop komen te staan= waaruit valt op te maken waar die koppeling naar verwi8st. 5e gaan een klein uitstap8e maken naar het )oto ewerkingsprogramma. 9ompoBer kan gewoon open li8ven staan. Kno##en %%n$%ken $et P+oto4ilt e >pen op het ureau lad het programma PhotoFlitre. 9lik in de menu alk op het ta ladA 7estand en selecteerA >penen. Havigeer naar de mapA mi8n homepage : A) eeldingen en open de#e map. $electeer 7utton(. De utton verschi8nt nu in het programma. 9lik in de werk alk op de . ?tekst@.

*r verschi8nt nu een venster waarin 8e de eigenschappen van de tekst kunt selecteren. Arial als letterype. A)metingenA %( o) %6 en een vink8e voor 'et= vink8e voor cursie) naar keu#e neer#etten o) niet. 9leurA 5it.

.ype i8 tekstinvoer 2 pagina en klik dan op >9. Boals 8e #ult #ien is de tekst op de knop geplaatst. >mdat we de#e knop nog een keer nodig he en= ewaren we de#e knop niet als utton( in de map A) eeldingen= maar kie#en we voorA >pslaan alsA en geven dan als estandsnaam opA 2epaginaknop. 9lik nu opA >pslaan. *r verschi8nt nu een compressie scherm ?om de a) eelding klein te houden@. ;e kunt gewoon op >9 klikken in dit scherm. >mdat we de knop nu een andere naam he en gegeven li8)t de originele utton dus ehouden. Dat was ook de edoeling omdat we de#e knop vaker nodig #ullen he en. 5e gaan nu een koppeling aan rengen naar de 2epagina. >pen in 9ompoBer de inde6 pagina= voor #over 8e die niet nog open he t staan. "aal de utton #onder tekst die we ingevoegd he en weg ?selecteren= delete@. 9lik in de menu alk opA &nvoegen : A) eelding klik op estand kie#en en navigeer naar de map A) eeldingen. $electeer de knopA 2epaginaknop= klik op openen= gee) alternatieve tekst op ?navigatieknop o) navigeerknop@ en klik op >9. De knop wordt nu ingevoegd. $electeer nu de knop en klik in de werk alk op de knop 9oppeling.

9ies in het venster dat nu verschi8nt voorA estand kie#en. $electeer in de mapA mi8n homepage de 2epagina= klik op >penen en dan >9. 9lik in de werk alk opA >pslaan. klik in de werk alk opA 7eki8ken. Als 8e nu in de pagina op de knop 2 pagina gaat staan verschi8nt er een hand8e en kun 8e er op klikken. *r is dus nu sprake van een actieve koppeling o) link. Als 8e er nu op klikt wordt 8e automatisch doorver onden met de 2 pagina. Hu 8e ent aangekomen op de tweede pagina is er nog geen knop om terug te keren naar de inde6. Dat kan natuurli8k wel met de terug knop links in de rowser= maar dat is niet #oals het hoort.

>p iedere knop op een pagina moet 8e ergens naar toege racht worden en aangekomen op die pagina moet 8e ook een knop he en die 8e weer terug rengt. $luit de rowser weer a). Ko##eling '%n de &e#%gin% n%% de inde, >pen PhotoFiltre= klik in het ta lad estand opA >penen $electeer in de mapA A) eeldingen weer de knopA utton( en klik opA >penen. 9lik in de werk alk weer op de . ?alle vorige instelling #i8n ewaard ge leven@ en vul i8 tekstinvoer inA "ome en dan >9. 9lik in de werk alk op het ta ladA 7estand en kies voorA >pslaan als <ee) het de estandsnaamA "ome Compressiescherm negeren en op >9 klikken. >pen in 9ompoBer de 2epagina. <a naar de laatste regel van het gedicht= einde van de regel en gee) nu een *nter. Centreer de cursor= klik in de werk alk opA invoegen : A) eelding= klik opA estand kie#en= $electeer in de map A) eeldingenA "ome gee) alternatieve tekst op en klik op >9. $electeer in de 2 pagina nu de knop "ome= klik in de werk alk op de knopA 9oppeling= klik op estand kie#en. $electeer in de mapA mi8n homepage het estandA inde6= klik op openen en dan >9. "et invoegen van een tekstkoppeling gaat op precies de#el)de manier. ;e ge ruikt dan geen a) eelding= maar een woord o) regel waar 8e een koppeling mee maakt.

Hoofdstuk 5 6ont ole en '%n de HTML /ode 0ees voor 8e nu aan de slag gaat met het controleren van de html code het hoo)dstuk eerst eens rustig door. Als het onderstaande te ingewikkeld voor je is: alsjeblieft overslaan Het is niet van we!enlijk belang. Bolang de rowser?s@ de we site maar goed weergee)t. ;e he t nu twee asis pagina3s gemaakt= waarin 8e a) eeldingen en tekst he t aange racht en 8e kunt tussen de twee pagina3s navigeren. "et is dan nu wel aardig om eens te ki8ken o) dat wat 8e gemaakt he t ook

inderdaad )outloos "./0 is. Alvorens we dat gaan doen= gaan we eerst eens ki8ken o) de pagina3s die we in Fire)o6 he en ekeken ook in &nternet *6plorer goed #i8n te eki8ken en o) we daar geen pro lemen tegenkomen. $luit alle programma3s a). <a naar de mapA mi8n homepage= selecteer de inde6 pagina= doe rechter muisklik en kies voorA openen metPen kies voor &nternet *6plorer. Als alles goed is wordt alles e6act #o weer gegeven #oals 8e het in Fire)o6 he t ge#ien. $luit de rowser. <a nu naar de rowser en type in de adres alkA httpA::validator.w,.org Het #oals vroeger on#e grammatica gecontroleerd werd door een leraar= #o kunnen we ook on#e "./0 code laten naki8ken door een machine in plaats van een leraar en dat ge eurt door de organisatie 5,C. Dat is de organisatie die #ich over de hele wereld e#ighoudt met de ontwikkeling van het "./0 ge euren en er op toe #iet dat er volgens de regels wordt gewerkt en correct "./0 wordt geschreven. Als 8e het adres he t ingetypt en 8e gee)t een *nter kom 8e op de volgende pagina. 9lik nu op de middelste ta A 'alidate y File Spload

'ervolgens kri8g 8e een volgende pagina te #ien.

9lik op de knopA 7laderen. Havigeer naar de mapA mi8n homepage en selecteer de inde6 9lik op openen en de pagina verschi8nt in het invoerveld. klik nu op Check.

De pagina wordt nu gecontroleerd en innen enkele seconden he 8e de uitslag. 9ri8g 8e de uitslag #oals hieronder in de a) eelding is te #ien= dan is de we pagina helemaal )outloos in html geschrevenA

Als 8e dit scherm niet kri8gt= maar een pagina met )outmeldingen dan is dat niet #o leuk maar ook niet erg. De )outmelding verschi8nen in het *ngels en niet iedereen kan dat ontci8)eren. &n dat geval laat maar voor wat het is. >) #oek hulp door middel van het internet o) een internet )orum. ;e he t immers met eigen ogen ge#ien dat in eide rowsers 8e pagina goed wordt weergegeven en als er dan toch een )out8e in #it= is dat naar alle waarschi8nli8kheid een kleinigheid. >verigens he en de )outmeldingen geen enkele invloed op de weergave van de pagina.

Hoofdstuk 7 Een foto#%gin% $%ken 9ies in de werk alk voor een nieuwe pagina. 9lik nu op >pmaak en kies in het menu voor paginakleuren en

achtergrond. 9ies voor aangepaste kleuren en gee) alle kleurenA 5it. 9lik in het#el)de scherm i8 achtergronda) eelding opA 7estand kie#en o) het gele map8e. $electeer in de mapA A) eeldingen Achtergrond,.8pg en klik danA >penen en >9. 9lik in de werk alk opA &nvoegen= kies in het menu voor A) eelding. 9lik in het scherm dat verschi8nt opA 7estand kie#en. $electeer in de map A) eeldingen= de a) eelding Agni%2+0 klik vervolgens op >penen en op >9. ;e #iet nu dat de ingevoegde )oto veel en veel te groot is. Dit euvel doet #ich vooral voor i8 )oto3s die met een digitale camera #i8n gemaakt en op de pc #i8n ge#et. Die )oto3s #i8n voor een we pagina veel te groot. De )oto is niet alleen in a)meting te groot= de estandsgrootte is ook nogal )ors ?2%( 97@ en #al daarom traag geladen worden. 7ovendien is het nadeel van #ulke grote )oto3s dat 8e al gauw ruimtege rek kri8gt op de server van 8e internet provider. ;e he t immers maar een eperkt aantal /73s ter eschikking. $tel dat 8e een )oto we site wilt maken en dat 8e daar een honderdtal )oto3s op kwi8t wilt= dan kom 8e met de#e a)metingen en estandsgrootte al snel in de pro lemen. Door de a) eelding tot normale proporties terug te rengen wordt ook automatisch de estandsgrootte aangepast en dat scheelt ehoorli8k. Bo kun 8e veel meer )oto3s plaatsen. 5e moeten dus eerst de a)metingen van de )oto3s wi8#igen. Ve kleinen '%n foto8s $et P+oto4ilt e >pen het programma PhotoFiltre. 9lik in de werk alk opA 7estand en dan >penen. Havigeer naar de mapA mi8n homepage= open de mapA A) eeldingen en selecteer de a) eelding A<H&%2+0= klik op >penen. 9lik in de werk alk op het ta ladA A) eelding en kies in het menu voorA A)metingen a) eelding. &n het venster dat nu verschi8nt gee) 8e i8 de reedte opA +00 pi6els. De hoogte wordt automatisch aangepast. 9lik op >9. 9lik nu op het ta ladA 7estand en kies voorA >pslaan als Havigeer naar de mapA A) eeldingen en gee) als estandsnaamA Agni *r komt nu een melding dat dit estand al estaat en de vraag o) het moet worden overschreven. 9ies voor 8a. Dit is enkel een oe)ening die 8e een keer gedaan moet he en= om te weten hoe 8e met dit programma )oto3s kunt verkleinen. >m ti8d te winnen he ik alle oorspronkeli8ke )oto3s al verkleind tot +00 6 6(0 p6.

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: #pslaan als.. Hiermee gaat de originele foto niet verloren. $anneer 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 !ichtbaar. De!elfde foto later weer vergroten levert dan een slechter resultaat op omdat de compressie niet ongedaan gemaakt kan worden. &et andere woorden: wil je de afmetingen van originele foto"s veranderen !onder de oorspronkelijke foto te verlie!en% sla de foto"s voor de !ekerheid dan altijd op onder een andere naam. 'et !oals we met de foto van A(') hebben gedaan. Die foto is nu verkleind naar het formaat *++ , -.+ pi,els en als je nu in de map Afbeeldingen kijkt% !ul je !ien dat de bestandsgrootte nog maar -/ 01 bedraagt in plaats van 2.3 01% een aan!ienlijke besparing. "e g ote foto 'e '%ngen doo een kleine fo $%%t $electeer de )oto die 8e in de pagina he t toegevoegd en verwi8der de#e met de delete toets. 9lik in de werk alk op het ta ladA &nvoegen 9ies voorA A) eelding= vervolgens opA 7estand kie#en $electeer in de map A) eeldingenA Agni klik op >penen gee) Alternatieve tekst op en klik dan op >9. ;e #iet nu dat de )oto nog steeds te groot isR er passen niet eens twee )oto3s naast elkaar. Als we de )oto nu nog verder #ouden verkleinen wordt de#e er niet mooier op. 5e gaan daarom nu ge ruik maken van een #ogenaamde 3thum nail3 o) miniatuur. Dat wil #eggenA we geven in 9ompoBer de opdracht om de )oto niet groter te tonen dan 200 6 %60 pi6els #onder daadwerkeli8k de )oto aan te passen. 4oto8s %ls t+u$!n%il9$ini%tuu 9lik met de rechtermuisknop op de a) eelding= selecteer in het menu dat verschi8ntA a) eelding eigenschappen. 9lik op het ta lad A)metingen en kies daar voorA Aangepaste grootte en #et een vink8e voorA ehouden. <ee) nu als reedte opA 200 pi6els= de hoogte wordt automatisch aangepast. 9lik nu op het ta ladA 9oppeling en vervolgens opA 7estand kie#en. 7i8 de#e handeling= na het klikken op 7estand kie#en wordt standaard een scherm getoond waarin "./0 staat geselecteerd. /et het a)rolmenu moet A) eeldings estanden geselecteerd worden o) Alle estanden.

Als 8e dit niet aanpast worden a) eeldingen niet #icht aar. $electeer in de mapA A) eeldingen= het estand Agni.8pg en klik op >penen en dan op >9. $la de pagina opA )otopagina. 9lik nu weer rechter muisklik op de miniatuur= klik op A) eelding en koppeling eigenschappen= plaats een vink8e voorA SQ0 is relatie) ten op#ichte van de pagina locatie. 5e kunnen nu nog een rand om de )oto plaatsen= #odat iedereen in CCn oogopslag kan #ien dat de#e miniatuur naar een grotere )oto verwi8st. /aar omdat dit niet alti8d evengoed tot #i8n recht komt= laten we dat hier achterwege. Siteraard kun 8e hier gerust mee oe)enen en als 8e het mooi vindt= vooral doen. De kleur van de rand is standaard alti8d lauw= maar die kun 8e iedere gewenste : passende kleur geven. Dit doe 8e door in de werk alk op ta lad >pmaak te klikken= kies in het menu voor Paginakleuren en achtergrond= en verander de standaard kleuren voor koppelingen. Als 8e nu= #oals het scherm laat #ien= de actieve koppelingstekst en de e#ochte koppelingstekst op wit #et= dan wordt de rand van de miniatuur wit in plaats van lauw= wat een mooi contrast gee)t op de pagina= ook al is dat een kwestie van persoonli8ke smaak.

$la de pagina op en gee) als naam opA )otopagina 7eki8k de pagina in de rowser= 8e #iet nu weer dat er een hand8e verschi8nt #odra 8e met de muis op de miniatuur gaat staan. *n als 8e nu klik op de miniatuur kri8g 8e in een nieuw venster een mooie grote )oto te #ien van Agni= met het )ormaat +00 6 6(0 pi6els. $luit het venster met de )oto en de rowser. ;e keert dan automatisch terug in het programma 9ompoBer. ;e #iet nu dat er veel meer ruimte eschik aar is voor nog meer )oto3s. *r kunnen nog #eker drie )oto3s naast geplaatst worden. Dit gaan we in de volgende oe)ening doen.

Hoofdstuk : Mee de e foto8s %%n een #%gin% toe'oegen 9lik in de werk alk op het ta lad 7estand en kies voor openen. $electeer in de mapA mi8n homepage= de )otopagina en klik op openen ?ten#i8 8e die pagina nog voor 8e he t@. $electeer met de muis de a) eeldingA Agni= druk eenmaal met de pi8lt8estoets op rechts. 9ies in de werk alk op het ta ladA &nvoegen : A) eelding en klik vervolgens op 7estand kie#en o) het gele map8e. $electeer in de mapA A) eeldingen= Alpine.8pg= plaats een vink8e voorA SQ0 is relatie)= gee) alternatieve tekst op en klik op >9. Du elklik op de )oto= klik op het ta lad A)metingen en wi8#ig de reedte in 200 pi6els. 9lik vervolgens op het ta lad 9oppeling= klik op 7estand kie#en= selecteer in de map A) eeldingen de )oto Alpine.8pg= klik op >penen en dan op >9. De miniaturen staan nu strak naast elkaar en er kan er nog een naast worden ge#et. Dit doen wi8 echter niet om de volgende redenA onder de#e a) eelding willen we graag wat tekst plaatsen en dan lopen we tegen het pro leem aan= dat de tekst onder eide )oto3s doorloopt en dat is hier niet mooi. 5e willen onder iedere )oto een aparte tekst. 5e kunnen dit heel mooi oplossen door ge ruik te maken van ta ellen. 'erwi8der eide )oto3s op de pagina. 9ies in de werk alk voor >pslaan. 4oto8s in t%!ellen #l%%tsen ;e he t nu de lege )oto pagina voor 8e. 9lik in de werk alk op de knop .a el : &nvoegen : .a el $electeer CCn ri8 en vier kolommen en klik dan op >9.

*r verschi8nt nu % ta el met vier kolommen : cellen. Bet de cursor in de linker cel= klik in de werk alk op het menu .a el en vervolgens op .a eleigenschappen.

9ies i8 uitli8ningA gecentreerd Als 8e geen randen om de ta el wilt #ien #et dan alle waarden i8 Qand : Quimte en >pvulling op 0. 9lik op het ta lad cellen en kies daar voor inhoudsuitli8ning verticaal oven en hori#ontaal gecentreerd. 9lik vervolgens op .oepassen en >9. "erhaal dit ovenstaande i8 de overige cellen door op de knop volgende te klikken totdat 8e alle vier de cellen he t gehad. Bet nu de cursor in de % cel= kies in de werk alk voor &nvoegen :A) eelding 9lik op 7estand kie#en= selecteer in de map A) eeldingen= Agni.8pg <ee) in het ta lad a)meting de 8uiste reedte opA 200 pi6els <ee) in het ta lad 9oppeling de 8uiste verwi8#ing op= dus weer de )oto Agni in de map a) eeldingen. <ee) alternatieve tekst op en klik op >9. Bet de cursor in de 2 cel en voeg nu respectieveli8k en in de andere cellen de volgende )oto3s inA Cel Cel Cel Cel %A 2A ,A (A Agni Alpine Ar oreal Autumnal

9lik nu op opslaan en eki8k de pagina in de rowser. Hu kunnen we onder iedere )oto een toepasseli8k stuk8e tekst plaatsen. Tekst toe'oegen onde foto8s 9lik met de muis op de eerste )oto en druk CCn maal op de rechter pi8lt8estoets en gee) dan een *nter. De cursor komt nu precies onder de )oto te staan. Bet onder de eerste )oto de volgende tekstA De planeet Agni. Bet onder de tweede )otoA Sit#icht op de erg Alpine. Bet onder de derde )otoA Sit#icht op Ar oreal. Bet onder de vierde )otoA Campingplaats op Autumnal. Als 8e dit allemaal goed gedaan he t= staan alle miniaturen keurig op hun plaats met daaronder de tekst. ;e kunt= als 8e dat wilt ta ellen een kleur geven. Dat kun 8e doen in de .a eleigenschappen. $la nu de pagina op en eki8k de pagina in de rowser. #m% 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. (ebruik in dergelijke gevallen dan minder tekst. Titel toe'oegen %%n de #%gin% ;e #iet dat de ta el helemaal oven in de pagina is geplaatst en er li8kt geen ruimte te #i8n om er nog een titel oven de #etten= dit kan echter wel. Bet de cursor in de eerste cel= verplaats met de pi8lt8estoets de cursor naar oven en gee) 2 maal een *nter. De .a el wordt twee witregels naar eneden geduwd en er is nu ruimte vri8 gekomen voor tekst. 9ies i8 .ekst voorA kop % Centreer de cursor en typA /i8n Fotopagina Hu moeten we nog een navigatieknop toevoegen om weer terug te kunnen navigeren naar de inde6 pagina. >ok de inde6pagina moeten we veranderen om een link te maken met de )otopagina. N%'ig%tie kno# %%n$%ken 'oo de foto#%gin% Plaats de cursor in een van de cellen en druk een paar maal op de pi8lt8estoets naar eneden. De cursor komt nu onder de ta el te staan en we kunnen een utton invoegen. /aarPdaar moeten we eerst weer tekst op#etten. $tart het programma PhotoFiltre. 9lik in de werk alk op >penen. $electeer in de map A) eeldingen de utton%(.8pg en klik op >penen. 9lik in de werk alk op de knop . ?tekstopmaak@. 9ies voor de tekstkleur Bwart= lettertype Arial en A)metingen %6 punten..yp in het tekst invoerveld "ome en klik dan op >9.

De#e knop he en we ook vaker nodig dus kie#en we voor >pslaan als... $la de knop op met als estandsnaamA "ome2 N%'ig%tiekno# toe'oegen %%n de foto#%gin% <a naar 8e )otopagina in 9ompoBer. 9lik in de werk alk op &nvoegen. $electeer in het menu A) eelding. $electeer in de map A) eeldingenA "ome2 en klik op >penen. 5e gaan nu ook een koppeling met de inde6 pagina aanmaken= dus... $electeer de knop "ome= klik in de werk alk op de knop 9oppeling en selecteer vervolgens in de mapA mi8n homepage de inde6pagina= klik vervolgens op >penen. Centreer de knop door in de werk alk op centreren te klikken. $la de pagina op en controleer alles door op de knop 7eki8ken te klikken. Nog een foto toe'oegen %%n de foto#%gin% *r is nog ruimte genoeg over voor nog een mooie )oto onder de ta el met de vier )oto3s. Plaats de cursor onder de ta el en gee) een *nter. Centreer de cursor door op Centreren in de werk alk te klikken. 9lik op &nvoegen= selecteer A) eelding en navigeer naar de mapA A) eeldingen. $electeer het estand /andala en klik op >penen. 9lik in het scherm op het ta lad A)metingen en pas de reedte aanA (00 pi6els. 9lik op het ta lad 9oppeling en maak weer de koppeling naar )oto /andala. De )otopagina is nu klaar en als alles goed is #iet de pagina er nu #o uitA

Het gebruik van tabellen. 4abellen !ijn bij uitstek geschikt om foto"s mooi te rangschikken% maar gebruik het niet voor het rangschikken en ordenen van tekst. Het gebruik hiervoor wordt ten !eerste afgeraden% omdat het vertragend werkt op de browsers. Het werken met tabellen% met uit!ondering van foto"s% wordt vrijwel nergens meer toegepast. Het is een achterhaalde manier van een website opbouwen. -%n#%ssen '%n de inde, #%gin% De inde6 pagina moet nu ook weer aangepast wordenR we doen dit nu achtera)= maar als 8e van tevoren ongeveer weet= hoeveel pagina3s 8e wilt he en en de titels ook al he t edacht= kun 8e natuurli8k een hele serie knoppen achter elkaar maken om de#e later in te voegen. >m #o uni)orm mogeli8k te werken ge ruiken we uiteraard de#el)de knoppen. *en inde6 pagina met verschillende knoppen li8kt nergens op en de pagina #iet er ook niet als een geheel uit. Als 8e de knop die hier in het oek ge ruikt wordt niet mooi vindt dan neem 8e gewoon een andere. &n de map >e)en estanden : 7uttons staan er nog genoeg om een keu#e te maken. 0et er wel op dat als 8e tekst op knoppen gaat #etten= 8e i8 het opslaan alti8d kiest voor Opslaan als... om #o de originele knop te ehouden.

>pen het programma PhotoFiltre. 9lik in de werk lak op het ta lad 7estand en dan op >penen. $electeer in de map A) eeldingen utton2= klik op openen. 9lik op de knop . en kies weer als lettertype Arial= kleur #wart en a)metingen %6 punten. .ype Foto3s en klik op >9. $la de )oto op alsA )otoknop. >pen nu de inde6pagina in 9ompoBer. Plaats nu de cursor naast o) onder de knopA 2epagina 9lik in de werk alk op &nvoegen. $electeer in de map A) eeldingen de )otoknop= klik op openen= klik op het ta lad 9oppeling= klik op estand kie#en= selecteer de )otopagina in de mapA mi8n homepage= klik op openen en dan op >9. Als 8e alles goed gedaan he t= kun 8e nu pro leemloos navigeren door alle drie de pagina3s. De asis we site is nu i8na klaar= maar we #i8n er nog niet. 5e he en weliswaar drie mooie pagina3s gemaakt= maar wie #it er nu eigenli8k achter de#e we site en waarom is die gemaaktD 9ortom...wie ent u eigenli8kD Pro eer 8e een voorstelling te maken van de mensen die 8e we site gaan e#oeken. Dat #ullen in eerste instantie vrienden en ekenden #i8n= maar a)hankeli8k van de inhoud van 8e we site en als 8e met 8e we site meer ekendheid kri8gt= #ullen volslagen on ekende mensen 8e we site e#oeken. Daarom is het een goed idee om 8e #el) voor te stellen ?als 8e dat wilt@ en uitleg te geven over wie 8e ent= eventueel wat 8e doet= en waarom 8e de#e we site he t. 9ortom we gaan een introductiepagina maken= waarop 8e kort en ondig schri8)t wat 8e kwi8t wilt aan 8e e#oekers.

Hoofdstuk ; "e int odu/tie #%gin% /aak een nieuwe pagina en sla de#e geli8k op alsA introductie 9lik in de werk alk op >pmaak : Paginakleuren en achtergrond 9ies voorA aangepaste kleuren ge ruiken 9lik op 7estand kie#en en selecteer in de mapA A) eeldingen achtergrond2, 9lik op >penen. 9ies voor alle tekst optiesA 3D%44,0

5at etekentA 3D%44,0 D Aan het egin van de#e cursus is uitgelegd dat "./0 aan de rowser vertelt hoe alles moet worden weergegeven= opmaak= tekst= a) eeldingen en kleuren. >ok kleuren he en een eigen code. Als we die code niet opgeven wordt er ook geen kleur weergegeven. Dus als we voor een kleur kie#en= wordt er )eiteli8k een code neerge#et die de rowser de opdracht gee)t om i8voor eeld groen weer te geven. "ier kie#en we voor een goudgeel kleur en die kri8gt dan de "./0 code 3D%44,0 mee. Bo estaan er heel algemene kleuren maar ook hele speci)ieke kleuren. *r estaan drie hoo)dkleurenA rood= groen en lauw. De#e drie hoo)dkleuren kunnen i8na eindeloos met elkaar gecom ineerd worden. Siteindeli8k he en we meer dan 3- miljoen 5(1 kleuren tot on#e eschikking. &n de map Achtergronden staat een tekst estand dat de codes evat van de a)wi8kende kleuren die we nu willen gaan ge ruiken. 5anneer 8e een "e6 code ge ruikt moet daar alti8d een T voor staan. Door de#e ?"./0@ code weet de rowser welke kleur weergegeven moet worden. 5e he en nu dus voor een speciale tekstkleur geko#en die een mooi contrast gee)t op de #warte achtergrond.

9lik in de werk alk vier keer op de knop &nspringen.

De cursor komt nu mooi naast de linker verticale alk in de a) eelding te staan. $electeer in de werk alk i8 tekstA 9op , $chri8) nu een verhaalt8e over 8e#el). P%gin%8s in se/ties 'e delen $oms is het handig om in een pagina secties aan te rengen= i8voor eeld omdat 8e verschillende gedeeltes in een pagina wilt he en die #ich duideli8k van elkaar onderscheiden. Dit kunnen we gemakkeli8k realiseren door een hori#ontale li8n in te voegen. Bet de cursor op een plaats in de pagina de waar 8e een hori#ontale li8n wilt invoegen. 9lik in de werk alk op het ta lad &nvoegen en kies in het menu voorA "ori#ontale li8n. *r staat nu over de volle reedte een gri8#e hori#ontale li8n. 0aten we er nu van uitgaan dat 8e de#e li8n in de reedte niet mooi vindt. 9ompoBer iedt #el) geen mogeli8kheden om aanpassingen te doen= maar die aanpassing kunnen we wel realiseren door in de ron van de pagina te ki8ken en daar wat aan te passen. Ve %nde ingen %%n! engen in de ! on '%n de #%gin% 9lik onderaan de pagina= links= op het ta lad 7ron.

5at 8e nu allemaal #iet staan is "./0. *r staat voor wat etre)t de li8neigenschappen het volgendeA Uhr styleVWwidthA %00JR heightA 2p6RWL hr staat voor hori#ontale li8n= met een dikte van twee punten en %00J over de pagina. 'erander het %00 J maar eens in -0 J en verander 2p6 in %p6. 9lik onderaan in de pagina nu op het ta lad Hormaal.

Hu kun 8e #ien wat er veranderd is. >p de#e manier kun 8e de reedte en de dikte van de li8n geheel naar eigen wens instellen. 5il 8e een gekleurde li8nA in de map oe)en estanden evindt #ich een map met li8nen die 8e kunt ge ruiken. Als 8e dit wilt= vergeet dan niet om de geko#en li8n te kopi!ren naar de map a) eeldingen in mi8n homepage.. Kno# %%n$%ken 'oo de int odu/tie #%gin% >pen het programma PhotoFiltre. 9lik in de werk alk op het menuA 7estand en kies dan voor >penen. $electeer in de mapA A) eeldingen= utton2+ en klik op >penen. 9lik in de werk alk op . en type in het tekst invoer veldA &ntroductie $la de#e utton op alsA introductieknop >pen de inde6 pagina= #et de cursor onder de a) eeldingA os8e loemen. 9lik in de werk alk op &nvoegen : A) eelding : ga naar de mapA mi8n homepage : A) eeldingen : selecteer de introductie knop en kies voor openen. <ee) alternatieve tekst opA naar de introductie pagina= klik op het ta lad 9oppeling= klik op estand kie#en=selecteer de introductiepagina= klik op >penen en >9 >pen nu de introductie pagina= klik op &nvoegen : A) eelding : selecteer de "ome knop : 9lik op >penen= gee) alternatieve tekst opA naar de inde6 pagina= klik op het ta lad 9oppeling= selecteer in de mapA mi8n homepage de inde6 pagina= klik op >penen en dan op >9. $la de pagina op. Een #%gin% $%ken $et %ni$%ties. 5e he en tot nu toe alleen gewerkt met a) eeldingen die de estandse6tensie ;P< he en. Dat is ook de meeste ge ruikte e6tensie voor a) eeldingen op het we . "oewel de e6tensie PH< ook aan een )linke opmars e#ig is. De letters PH< staan voor Porta le Hetwork <raphics. ?gauw vergeten@. De compressie schi8nt een stuk eter te #i8n dan die van ;P< en levert dus een kleinere estandsgrootte op. Haast ;P< : PH< is de e6tensie <&F nog populairder. "et levert een nog kleinere estandsgrootte op en is daarom ideaal om te ge ruiken als achtergronda) eelding= daarnaast is het mogeli8k om een <&F estand op te ouwen uit verschillende lagen ?denk aan een teken)ilm@. Als 8e een <&F estand met opge ouwde lagen snel laat herhalen= kri8g 8e een ewegende a) eelding= o)tewel een animatie. 9ortom <&F1 estanden nemen nauweli8ks ruimte in en #i8n daarom ideaal voor ge ruik op een we site ?hoewel 8e er een we site ook mee gemakkeli8k mee kunt verpesten door een overdaad te ge ruiken en sommige mensen is niets te dol@. .evens worden <&F estanden erg veel ge ruikt in e1mail erichten= vooral de emoticons #i8n erg populair ?de#e duiden de emotionele toestand van de schri8ver van een e1mail ericht@. >mdat de asis van een <&F1a) eelding ?de achtergrondkleur@ alti8d

transparant is= moet 8e voor het ge ruik van gi) estanden alti8d een #eer lichte achtergrondkleur ge ruiken. *en witte achtergrond gee)t het mooiste resultaat. Alleen is een witte achtergrond in een we pagina voor de meeste mensen te wit ?)el@. 5e gaan nu nog een pagina maken waar we geen statische a) eeldingen ge ruiken= maar <&F1 estanden met eweging ?animatie@. Als 8e 9ompoBer open he t staan maak dan een nieuwe pagina en sla de#e meteen opA animaties >) start 9ompoBer op en sla de#e lanco pagina geli8k op. 9lik in de werk alk op >pmaak en dan op Paginakleuren en achtergrond.. en kies voor een lichte achtergrondkleur en klik op >9A 9lik in de menu alk op &nvoegen L A) eelding en op estand kie#en ?gele map8e@A $electeer in de map A eeldingen de a) eeldingA 7ounce en voeg de#e toe aan de pagina. Doe dit vervolgens ook met de volgende a) eeldingenA e1mail 1 9erst 3 9ip 3 /uis 3 Qegen oog 3 'ogel 3 Eay. <ee) na het invoegen van iedere a) eelding twee maal een .A7= #o komen de a) eeldingen niet te dicht op elkaar te staan. $la de pagina weer op en eki8k het resultaat. <ee) na de laatste a) eelding drie o) vier maal een *nter. 9lik op &nvoegen L A) eelding L 7estand kie#en en kies de home knop. Ha het invoegen de knop selecteren en dan een koppeling maken naar de inde6 pagina. >pen PhotoFiltre = op de map A) eeldingen= kies een knop uit en #et er de tekst Animaties in. $la de knop op als animaties.8pg 9eer nu weer terug naar 9ompoBer= klik op &nvoegen L A) eelding L estand kie#en en kies voor de animaties knop. <ee) alternatieve tekst op en maak geli8k een koppeling naar de animatie pagina. >) 8e de#e pagina nu mooi= grappig o) iets anders vindt= 8e #iet wat het e))ect van het ge ruik van <&F1 estanden is. <a er in ieder geval ?advies@ #eer spaar#aam mee om.

Hoofdstuk < Link #%gin% $%ken 5e gaan nu de laatste pagina maken. *en #ogenaamde link pagina. Dat is een aparte pagina waarin 8e adressen vermeldt van we sites waarvan 8i8 vindt dat het de moeite waard is voor 8e e#oekers om die te eki8ken. Dat kunnen we sites van )amilie o) vrienden #i8n= maar natuurli8k ook de we site van i8voor eeld Amnesty &nternational= 'rienden van het <elderse 0andschap o) de dierentuin. "et is overigens een goed en geaccepteerd ge ruik om linken met elkaar uit te wisselen. 7ovendien kun 8e ook vragen om een link om meer e#oekers op 8e we site te kri8gen. $tel dat ik een we site he gemaakt die helemaal in het teken staat van het kweken van voliXrevogels dan ga ik op het internet op #oek naar andere vogelkwekers en dan vraag ik o) #i8 op hun we site het adres van mi8n we site willen vermelden en dat ik dan op mi8n we site een vermelding van hun we site neer#et. /aak een nieuwe pagina in 9ompoBer en sla de#e geli8k op als link pagina. 9lik in de werk alk op >pmaak en selecteer in het menuA Paginakleuren en achtergrond. $electeer in de mapA a) eeldingen achtergrond, $electeer in de werk alk i8 .ekstA kop % Centreer de cursor en typeA 0ink Pagina. <ee) twee maal een *nter. ;e kunt op twee manieren linken aan rengen Met+ode 1 .yp het adresA httpA::www.nu.nl $electeer de hele regel= klik dan op &nvoegen en vervolgens op 9oppeling. ;e #iet nu dat de koppelingslocatie reeds is ingevuld. 9lik op >9. >p de pagina #ie 8e nu dat de kleur van de tekst is veranderd in lauw en de tekst is onderstreept. dit is de standaard opmaak voor een hyperlink : link. Siteraard kun 8e die kleuren wi8#igen in het menu paginakleuren en achtergrond. $la de pagina op en klik op 7eki8ken. Als 8e nu met de muis op de link klikt= wordt 8e automatisch doorgeschakeld naar de etre))ende we site. /aar het kan ook anders. /isschien vindt 8e een hele li8st met internet adressen niet mooi en wil 8e#el) een omschri8ving geven van een we site en daar een koppeling aan ver inden. Met+ode & .yp onder de eerste linkA /i8n )avoriete nieuws site $electeer de#e regel= klik op 9oppeling en type in de alk voor de koppelingslocatieA httpA::www.nu.nl en sla de pagina op.

;e #iet nu twee verschillende linken die naar de#el)de we site verwi8#en. 5e gaan dit nog een keer doen. .ypA "et )orum voor al 8e 9ompoBer vragen:pro lemen $electeer de#e hele regel= klik op 9oppeling en type in de alk voor de koppelingslocatieA httpA::www.mo# rowser.nl:)orum 9lik op >9. sla de pagina op en klik dan op 7eki8ken. 9lik op de link naar het )orum. Dit is een speciaal Forum van /o#illa producten ?Fire)o6= .hunder ird= Hvu:9ompoBer en andere /o#illa uitgaven@. ;e #iet er het su )orum Hvu:9ompoBer en daar vindt 8e deskundigen die op de meeste vragen o) pro lemen een passend antwoord o) oplossing weten te vinden. ;e moet 8e er dan wel even laten registreren. ;e he t nu op twee manieren een hyperlink : link o) koppeling gemaakt door o) geli8k het adres in te typen en daar een koppeling van te maken o) 8e maakt #el) een passende tekst en ver indt daar een koppeling aan. De pagina3s die innen 8e eigen we site naar elkaar verwi8#en #i8n interne koppelingen. Pagina3s die verwi8#en naar pagina3s van een andere we site worden e,terne koppelingen genoemd. >ok op de#e pagina moet een knop "ome worden ingevoegd. ;e weet inmiddels hoe 8e dat moet doen en vervolgens maak 8e op de inde6pagina een knop voor de 0inkpagina en koppel 8e de pagina3s aan elkaar. Als 8e dit gedaan he tA sla de pagina3s op en eki8k #e ter controle o) alles goed werkt.

Hoofdstuk 1= Pu!li/e en '%n (e *e!site 'oordat we on#e we site gaan pu liceren= eerst nog een paar opmerkingen over enkele knoppen die we in 9ompoBer niet he en ge ruikt. *en aantal knoppen op de werk alk #i8n nog niet esprokenR dat #i8n de knoppen Pu liceren= Formulier en in het menu *6tra het ge ruik van C$$ ?Cascading $tyle $heets@. &n de pu liceer)unctie van 9ompoBer #itten een paar ugs ?)outen@ waardoor het pu liceren van de we site #eer moeili8k gaat en in sommige gevallen helemaal niet. >m die reden gaan we dat met een ander programma doen= een F.P1programmaA FileBilla. /et dit programma kunnen we precies #ien wat er ge eurt als we estanden op de server gaan #etten en waar #e worden neerge#et= hierover #o dadeli8k meer. Formulieren ge ruiken we in de#e asiscursus niet omdat het maar helemaal de vraag is o) 8e provider het ge ruik van )ormulieren ondersteunt en #o 8a welke )ormulieren worden ondersteund. *r estaan verschillende )ormulieren in verschillende script talen. Dit kunnen )ormulieren in ;ava$cript= P"P o) C<& #i8n. P"P wordt vri8wel het meest ge ruikt en is ook het meest veilig. 9ompoBer kan met alle script talen overweg. Allemaal he en #e hun eigen voordelen en ieder )ormulier vraagt weer om een speci)ieke deskundigheid. 5il 8e met )ormulieren gaan werken ?een e1mail )ormulier is i8voor eeld reu#e handig@ dan #ul 8e i8 8e host van 8e we site in)ormatie moeten opvragen met welk soort )ormulieren 8e mag werken. 5il 8e direct een snel en goed werkend e1mail )ormulier. Die kunt 8e tegen een geringe vergoeding i8 mi8 aanvragen. 5il 8e met een e1mail adres op 8e we site enaderd kunnen worden ?#ou ik #el) nooit doen@= #et dan nooit 8e e1mail adres pu liekeli8k op een pagina. 7innen de kortste keren wordt 8e edolven onder de spam. ;e raakt er nooit meer van verlost en het wordt hoe langer hoe erger. Als 8e enaderd wilt worden vana) 8e we site doe het dan als volgtA #et er een tekst neer #oals )reek8eA.gmailPSH.com ?dit adres estaat niet@ &edereen #al egri8pen dat A. vervangen moet worden door G en PSH. vervangen moet worden door een . *en ro ot die het internet a)struint op #oek naar e1mail adressen #al een dergeli8ke regel niet als een e1mail adres interpreteren. *en andere en ook goede optie is om 8e e1mail adres te vermelden op een a) eelding. Qo ots kunnen ook geen tekst op a) eeldingen le#en. >p de#e manier li8) 8e verschoond van CCn van de grootste irritaties van het internet. *en e1mail )ormulier is en li8)t de meest eenvoudige en veiligste methode. &n het menu *6tra komt nog de optie C$$ ewerken voor. C$$ wordt ge ruikt om een we site #o te maken dat alle pagina3s er Oua opmaak precies het#el)de eruit komen te #ien. &n een estand= de stylesheet ?sti8l lad@ wordt alle opmaak= kleur= tekststi8l=

lettertype= aantal punten en#ovoort opgeslagen. >p iedere pagina wordt een link naar dat estand gemaakt en #o he 8e direct de hele opmaak van 8e pagina in CCn keer geregeld. Dat levert een enorme ti8dswinst op en het is vreseli8k handig= vooral als 8e een wat grote we site gaat maken. /aar ook dit is niet iets wat 8e even op een vri8e #aterdag leert en onder de knie kri8gt. >p het internet kun 8e voldoende en complete online cursussen hierover vinden. /et 9ompoBer he en we de pagina3s opgeslagen in de mapA mi8n homepage en de a) eeldingen he en we opgeslagen in de map A) eeldingen. &n de pagina3s die we gemaakt he en= he en alle a) eeldingen een verwi8#ing= i8voor eeldA A) eeldingen:achtergrond,.8pg Als we nu on#e pagina3s op de server #etten en de map A) eelding plaatsen we i8voor eeld in de map estanden die ook op de server staat ?dit als voor eeld@ en we vragen on#e pagina3s op= #ul 8e nooit de a) eeldingen te #ien kri8gen= maar alleen maar rode kruis8es. Dit klopt ook omdat er in 8e pagina3s geen enkele verwi8#ing is naar een mapA estanden:A) eeldingen:achtergrond,.8pg De rowser pro eert de map A) eeldingen wel te vinden maar dat lukt niet omdat die in de map estanden staat en de rowser hee)t geen opdracht gekregen om in de map estanden te gaan #oeken naar een achtergrond. "et antwoord van de rowser isA rood kruis8e ?kan de a) eelding niet vinden@. Hou e,act de!elfde structuur aan !oals die ook op je pc staat &n de#e cursus he en we maar CCn map die elangri8k is en dat is de mapA A) eeldingen. 5illen de a) eeldingen gevonden kunnen worden dan moet de map met daarin alle a) eeldingen ook #o op de server worden ge#et. De map mi8n homepage hoe)t niet op de server ge#et te worden= alleen de inhoudA de we pagina3s. De#e komen in de hoo)ddirectory ?root@ op de server te staan. >m pagina3s te kunnen pu liceren naar de server van 8e provider o) 8e eigen domein he 8e de volgende gegevens nodigA N "et F.P1adres van de server ? i8voor eeldR )tp.6s(all.nl@. N ;e ge ruikersnaam ?meestal 8e eigen inlognaam van de provider@. N ;e wachtwoord ?meestal 8e eigen wachtwoord van de provider@. "e 8e al de#e gegevens i8 de hand= dan kunnen we FileBilla starten.

Het u#lo%den 9 #u!li/e en '%n de *e!site $tart via het 7ureau lad FileBilla op. 9lik op het ta ladA 7estand en dan op $ite eheer. 9lik vervolgens op de knopA nieuwe site

.yp achtereenvolgens in de daarvoor estemde vak8es N "ostA 8e F.P adres N <e ruikerA 8e ge ruikersnaam N 5achtwoordA 8e wachtwoord NPortA het poortnummerA dit is alti8d 2%= mag 8e leeg laten.

Alles goed ingevuldA klik opA 'er inden. Als 8e goed ent ingelogd op de server= verschi8nen rechts oven in het scherm de eventuele estanden die al op 8e server staan ?hier #ie 8e estanden staan van een we site die op een andere server staan= het kan er dus voor iedereen anders uit#ien.

&n het scherm links ovenaan ?%@ #ie 8e de gevolgde inlog procedure. &n het scherm rechts de estanden die al op de server staan ?2@. <eselecteerd is de map mi8n homepage ?,@. 0inksonder staan de pagina3s die 8e gemaakt he t en de map A) eeldingen ?(@ 9lik nu op de map A) eeldingen en houdt de $hi)t toets ingedrukt. 9lik nu op pagina2 en dan is alles geselecteerd. 0aat alle toetsen los ?alle estanden #i8n nu lauw geselecteerd@. 9lik met de linkermuis toets ingedrukt= op de geselecteerde estanden en sleep nu alles naar het rechter scherm en laat vervolgens de muisknop los. ;e #iet nu dat de estanden naar de server worden gekopieerd en als dat klaar is staan 8e estanden op het internet. ;e #iet #e nu ook allemaal in het rechter scherm staan. $luit nu FileBilla a). ;e pagina3s kunnen nu door de rowser opgevraagd worden. Als 8e nu de rowser start en 8e typt het adres van 8e we site in de adres alk= en 8e gee)t een *nter dan #ou 8e nu de we site moeten #ien die 8e in de#e cursus he t gemaakt. Als 8e een we site he t gepu liceerd op het internet= controleer dan nog een keer o) alles echt goed werkt. Hiets is vervelender dan achtera) te moeten constateren dat dingen niet goed #i8n gegaan o) dat 8e iets ent vergeten. Dat is niet alleen vervelend voor 8e#el)= maar ook voor 8e e#oekers.

7reng 8e nadien wi8#igingen aan in 8e we site en 8e #iet na het controleren de veranderingen niet doorgevoerd= toets dan CtrlYF-= #odat de rowser gedwongen wordt de pagina opnieuw op van de server te halen en de pagina niet opnieuw uit de ti8deli8ke map haalt. Het onde +ouden '%n een *e!site Dat gaat niet anders dan #oals we het nu gedaan he en. "et kan natuurli8k voorkomen dat 8e later iets aan 8e pagina3s wilt veranderenA iets toevoegen o) verwi8deren. Dat is dan gewoon weer een kwestie van het programma opstarten= pagina openen= veranderingen doorvoeren= pagina weer opslaan en de pagina opnieuw op de server #etten. Als 8e een reeds estaande pagina op de server wilt vervangen dan kri8g 8e een scherm te #ien= met in de titel alk de tekstA het estand estaat al. &n dat geval een groen punt8e op >verschri8ven #etten en #et een vink8e voor ge ruik de#e Aktie alti8d. *n klik op >9. *en volgende keer wordt 8e er niet meer door gehinderd. Hoofdstuk 11 Een t*eede *e!site 2o#tioneel3 Aan het egin van de#e cursus schree) ikA wees conseOuent in 8e opmaakK Dat he en we in de eerste oe)ening van het maken van een we site 8uist helemaal niet gedaan= integendeel. .i8dens het maken van de voorgaande pagina3s #i8n we vooral inconseOuent e#ig geweestR iedere pagina hee)t een andere achtergrond= tekstkleur en overal staan verschillende knoppen. *rg mooi is dat allemaal niet en de we site oogt hierdoor niet als een geheel. Dat kan veel eter. "et ging er vooral om de asisvaardigheden onder de knie te kri8gen en te leren werken met het programma. Daarom volgt hier nog een oe)ening voor het maken van een we site die wel conseOuent is voor wat etre)t de opmaak. Als 8e denkt dat 8e de vorige onderwerpen voldoende eheerst= kun 8e de#e oe)ening overslaan en eginnen aan 8e eigen persoonli8ke we site. De opdracht is nuA gee) alle pagina3s die 8e gaat maken de#el)de achtergrondkleur o) achtergronda) eelding= ge ruik overal het#el)de lettertype en lettergrootte en ge ruik overal de#el)de knop voor. >mdat 8e in de a)gelopen lessen al )link wat vaardigheden he t opge ouwd is de uitleg wat minder uitge reid dan in het voorgaande gedeelte. Hog een we site maken is een goede oe)ening om te ontdekken hoe het met de opgedane kennis en vaardigheden staat. *erst ga 8e de enodigde mappen aanmaken en de estanden van de map oe)en estanden ge ruiken. <a naar de mapA /i8n Documenten en maak een nieuwe map aan met de naamA mi8n tweede we site= maak in de#e map weer een mapA a) eeldingen. 9opieer nu de inhoud van de map >e)en estanden naar de map a) eeldingen.

>pen 9ompoBer= klik in de werk alk opA >pmaak en selecteer in het menuA Paginakleuren en achtergrond. 9lik op estand kie#en en selecteer in de map a) eeldingen achtergrond%42.gi) 9lik nu op openen en >9. Als het #o is dat 8e de e6tensie niet #iet staan ?gi)@ moet 8e even iets veranderen in de instellingen van 8e PC. ;e gaat als volgt te werkA >penA De#e computer en klik in de werk alk op het ta lad *6tra. $electeer in het menuA /apopties en klik dan op het ta lad 5eergave. 'erwi8der het vink8e i8 de optieA e6tensies voor ekende estandstypen ver ergen= klik op .oepassen en >9. Als 8e nu terugkeert naar de map a) eeldingen #ul 8e #ien dat achter de estandsnaam nu ook het estandstype ?e6tensie@ staat vermeld. <a nu terug naar 9ompoBer= selecteer in de werk alk i8 .ekstA 9op 2 $electeer i8 lettertypeA Palatino 0inotype en klik op de knopA centreren. 9lik nu op het ta ladA >pmaak= selecteer Paginakleuren en achtergrond= kies voor aangepaste kleuren en kies voor alle optiesA wit en vervolgens >9. .yp de volgende tekstA $elkom op de website van 6an de tuinkabouter. <ee) eenmaal een enter= klik op invoegen en dan op a) eelding en selecteer in de map oe)en estanden de map li8nen= open de#e en selecteerA li8n--.8pgR open de#e en klik >9. De li8n staat nu strak onder de tekst. <ee) nu viermaal een *nter en klik opA centreren. 9lik op &nvoegen en dan op A) eelding. 9lik op 7estand kie#en= open de map Foto3s en selecteer daar het estand Flora.8pg ;e #iet nu dat de#e )oto te groot is. >pen PhotoFiltre= open de map oe)en estanden en dan de map )oto3s= selecteer de a) eelding )lora en verander de a)meting van de )oto in (00 pi6els. 9lik op 7estand en dan op >pslaan als.. en sla de a) eelding nu op in de map a) eeldingen in de map mi8n tweede we site. 9lik nu in 9ompoBer op opslaan gee) als paginanaam opA 5elkom op de we site van ;an de tuinka outer en sla de pagina vervolgens op in de map mi8n tweede pagina als inde6 pagina. De overige pagina3s die we gaan maken kunnen vervolgens onder een andere naam worden opgeslagen. $tel 8e nu voor dat de we site van ;an de tuinka outer een we site is die voornameli8k #al estaan uit mooie )oto3s van #i8n tuin. 5e willen pagina3s gaan maken die identiek #i8n aan elkaar en dat kun 8e met een paar muisklikken ereiken.

>pen in 9ompoBer een nieuwe pagina. voeg net als in de voorgaande pagina achtergrond%42 toe= centreer de cursor en sla de pagina nu op in de map mi8n tweede we site met de naamA overmi8#el) $la de#e pagina nogmaals op= estand opslaan alsA tuin)oto3s200$la de#e pagina nogmaals op= estand opslaan alsA tuin)oto3s2006 $la de#e pagina nogmaals op= estand opslaan alsA tuin)oto3s2002 ;e he t nu - identieke pagina3s ontworpen waarvan de achtergrond en tekstkleur al #i8n vastgelegd= dat scheelt weer en dat #iet er dan #o uitA 0et opA dat 8e i8 de volgende oe)ening wanneer 8e a) eeldingen gaat invoegen= 8e de a) eeldingen haalt uit de map a) eeldingen van 8e tweede we site en niet uit de map a) eeldingen van /i8n "omePage. Dus goed ki8ken o) 8e op de goede locatie #it. 0et er ook ieder keer op dat ge ruikte a) eeldingen relatie) #i8n ten op#ichte van de pagina locatie. >pen de inde6 pagina $electeer de a) eelding )lora= klik op koppeling= klik op estand kie#en en selecteer in de map mi8n tweede we site de overmi8#el) pagina= klik op openen en >9. 9lik op eki8ken en als 8e nu op de a) eelding )lora klikt wordt 8e doorgelinkt naar de overmi8#el) pagina. De inde6 pagina is nu helemaal klaar ?sluit de rowser@. Dat #iet er al heel anders uit dan de eerste inde6 pagina die 8e he t gemaakt. <a nu de pagina overmi8#el) verder opmakenA er moeten nog knoppen gemaakt en geplaatst worden om te kunnen navigeren. &n de map oe)en estanden ?A) eeldingen@ #it ook een map uttons waarin een hele ver#ameling knoppen staat. "e o'e $i(>elf #%gin% 5e gaan eerst in PhotoFiltre tekst op de te ge ruiken knoppen plaatsen. >pen het programma en selecteer in de map uttonsA utton%2-.gi) ;e #iet nu dat de knop . niet te activeren is ?hi8 is gri8s@ en 8e op de#e gi) a) eelding geen tekst kunt plaatsen. Dit klopt= want #oals eerder uitgelegd= is een gi) estand opge ouwd uit meerdere lagen en die kun 8e niet #omaar ewerken. ;e moet die lagenweer terug rengen tot CCn laag. $la de#e knop op als utton%2-.8pgA estand opslaan als en dan als estands)ormaat ;P< kie#en. $la de knop op in de mapA a) eeldingen. >pen nu de map a) eeldingen= selecteer het estand utton%2-.8pg en nu #ul 8e #ien dat de knop . wel is geactiveerd en 8e tekst op de knop kunt plaatsen. $electeer de . knop en gee) in het venster de volgende opties aanA

N 0ettertypeA .imes Hew Qoman N A)metingenA %0 punten N Plaats een vink8e i8A vet N.ekstkleurA licht lauw NSitli8ningA gecentreerd N .ekstinvoerA .uin)oto3s 2009lik >9. $la de#e knop op in de map a) eeldingen alsA tuin)oto3s200- ?;P<@. 9lik in de werk alk nu op ongedaan maken De tekst wordt nu van de knop verwi8derd= #odat 8e weer een lanco knop he t. 9lik opnieuw op de . knop. ;e hoe)t nu alleen nog maar de tekstinvoer 200- te veranderen in 2006. /aak op de#e wi8#e ook nog een knopA N tuin)oto3s2002 N >ver mi8#el) N "ome N ikkeGhome.nl $la alle a) eeldingen op in de mapA a) eeldingen. $luit PhotoFiltre. ;e he t nu alle enodigde en geli8ksoortige knoppen gemaakt. De#e knoppen gaan we nu toevoegen aan de etre))ende pagina3s. >pen de overmi8#el) pagina en klik op centreren. 9lik op &nvoegen : A) eelding en selecteer in de map a) eeldingen tuin)oto3s200- en klik >9. 'oeg naast de#e knop de a) eeldingen tuin)oto3s2006 en tuin)oto3s2002. <ee) vervolgens een *nter. 'oeg op de#e plaats de knopA >ver mi8#el) toe en gee) een enter. De pagina is nog verder helemaal leeg= er moet nog wat in)ormatie op komen te staan= #odat de e#oekers kunnen le#en waar de we site over gaat. 9ies als lettertype .ahoma en type de volgende tekstA 5elkom op mi8n we site die helemaal in het teken staat van )otogra)ie. &n 2000 en ik a)gestudeerd aan de Academie voor Fotogra)ie en na een aantal 8aren te he en gereisd= ied ik u hier een aantal )otocollecties aan van de laatste drie 8aren. Alle )oto3s #i8n gemaakt met een digitale spiegelre)le6 cameraA Hikon D+0 Y %+1%,-mm. &k hoop dat de )oto3s u #ullen inspireren. 5ilt u reageren dan kunt u een e1mail sturen naar het onderstaande adres. voeg hier nu de knop inA ikkeGhome.nl *r kan nu= #oals we dat met de eerste we site gedaan he en= een knop "ome toegevoegd worden= maar dat is op de#e pagina niet nodig. De inde6 pagina evat geen in)ormatie en is alleen maar de entree naar de we site. 'oor de andere pagina3s he en we de knop wel nodig. 'oeg nu op alle pagina3s de enodigde knoppen in. 7reng koppelingen aan en controleer o) alles goed werkt.

Als 8e een lang email adres he t= dan he 8e daarvoor niet alti8d de ruimte op een knop en dan he 8e een pro leem. Dat kan echter gemakkeli8k opgelost worden door #el) een knop te maken. 'oor de#e we site he en we achtergrond%42.gi) ge ruikt en de#e kunnen we mooi ge ruiken om een email knop mee te maken. >pen PhotoFiltre en open vervolgens in de map a) eeldingen achtergrond%42.gi). $la dit estand opnieuw op onder de naam emailknop.8pg $luit de a) eelding en open opnieuw de emailknop.8pg= klik in de werk alk op A) eeldingen en selecteer A)metingen a) eelding. 'erwi8der het vink8e i8A hoogte: reedte verhoudingen ehouden en gee) als reedte opA 200 pi6els en als hoogte -0 pi6els. 9lik op >9 en klik op >pslaan. ;e he t nu een nieuwe email knop die naadloos aansluit i8 de achtergrond. ;e kunt er nu het volgende adres in typen= knop .= tekstinvoerA tuinka outerGtuinwereld.nl >p de#e manier kun 8e 8e eigen knoppen maken voor een we site. De edoeling van de#e oe)ening was om 8e het verschil te laten #ien tussen een we site die er wat rommelig uit#ag en een we site die mooi uit een geheel estaat. "et oog wil tenslotte ook wat. Foto3s gaan we nu niet invoegen= er van uitgaande dat 8e dat voldoende eheerst. (ebruik bij foto"s van een digitale camera nooit de originele afbeeldingen. De!e !ijn wat formaat betreft veel en veel te groot. Eerst aanpassen naar een formaat van bijvoorbeeld *++ , -++ pi,els. 4en!ij je er bewust voor kiest een afbeelding te gebruiken met een hele hoge resolutie.

Hoofdstuk 1& Het ge! uik '%n -nke s 2!ook$% ks3 De we site die we nu gemaakt he en= is een we site die voornameli8k uit )oto3s estaat. De )oto3s he en we niet eens geplaatst= want het ging ons voornameli8k om de vormgeving : design. /aar er estaan natuurli8k niet alleen we sites met hoo)d#akeli8k )oto3s= er estaan ook genoeg we sites die voornameli8k vol staan met tekst. Denk hier i8 aan dag oeken= reisverslagen en dergeli8ke. 5aar e#oekers van we sites in het algemeen een hekel aan he en is wel het scrollen in pagina3s. 'ana) oven naar eneden moeten scrollen en weer terug. >ok daar is een oplossing voorA het ge ruik van ankers. *en anker is een koppeling o) een aantal koppelingen innen een #el)de pagina. Dat gaan we nu oe)enen. >pen in 9ompoBer een nieuwe pagina en klik op >penen. $electeer in de map mi8n homepage ?de eerste we site@A pagina2 $electeer de tekst van het gedicht. 9lik in de werk alk op 7ewerken en dan op kopi!ren. <a terug naar de lege pagina= centreer de cursor klik weer op de werk alk 7ewerken en dan op Plakken. <ee) onder de laatste regel een *nter. Plak de tekst nu nog een keer. $tel een achtergrondkleur in ?>pmaak : Paginakleuren en achtergrond@. $electeer de eerste regel van het gedicht ?de titel@= klik in de werk alk op Positie. *r verschi8nt dan een scherm waar ingevuld staat de geselecteerde regel. 9lik op >9. ;e #iet nu dat er een anker is geplaatst ?dit is niet #icht aar in de rowser@. <a nu naar de laatste regel van het gedicht en gee) een *nter. .ype hier de tekstA naar oven $electeer de tekst= klik in de werk alk op Positie en klik in het venster dat verschi8nt op >9. ;e #iet nu dat ook voor de#e regel een anker is geplaatst. $electeer opnieuw de tekstA naar oven en klik dan op 9oppeling. *r verschi8nt een schermA koppelingseigenschappen. $electeer met de knop van het uitrol menu de tekst van de eerste regel ?de vicieu#e cirkel van het eeld@ en klik op >9. $la de pagina opA ankerpagina en eki8k het resultaat nu in de rowser. Als 8e nu naar de onderkant van de pagina gaat= #ie 8e dat de regel naar oven een actieve koppeling is gewordenR er staat een streep8e onder. Als 8e nu op de#e koppeling klikt dan wordt 8e met een muisklik naar de eerste regel van de pagina door gelinkt.

Hoofdstuk 1. We ken $et l%gen *en laatste oe)ening De lay1out van een we pagina is meestal niet i8#onder. Dit komt door de standaard eperkingen van de opmaakmogeli8kheden die 8e kunt ge ruiken ?lettertype= link1 rechts1 en gecentreerd uitli8nen en a) eeldingen al dan niet met randen@. *en goede aanvulling hierop #i8n 3lagen3. De knop lagen in 9ompoBer vindt 8e rechts oven

0agen #i8n aparte vakken waar 8e iets in kunt stoppen ?tekst o) a) eelding@ en die 8e dan op een willekeurige positie op de pagina kunt #etten. ;e kunt ook lagen elkaar laten overlappen en kie#en wat de volgorde van de lagen is ?wat ligt er onder en wat ligt daar op@. ;e kunt het este met lagen werken door eerst de inhoud op een pagina te #etten= dit selecteren en dan op de knop 3lagen3 klikken. Bo voorkom 8e dat 8e een lege laag in 8e pagina kri8gt. 0agen #i8n niet #icht aar in de rowser. >pen 9ompoBer o) als 8e 9ompoBer al open he t staan= egin met een nieuwe pagina. <a naar het ta lad >pmaak en dan naar Paginakleuren en achtergrond. 9ies hier voor aangepaste kleuren en kies voor alle tekstopties 5it. 9lik op de achtergrond en gee) als "e6 kleur opA 3424242 en klik op >9 $tel het lettertype i8 varia ele grootte in op het 0ettertype 7ook AntiOua. >m alvast voldoende ruimte te makenA <ee) twee maal een *nter. .yp nuA 5elkom in mi8n dromenland <ee) twee maal een *nter ?$hi)t toets ingedrukt houden@ om tekstopmaak te ehouden. .yp nuA een plaats waar alles kan en niets ver aast. <ee) twee maal een *nter ?$hi)t toets weer ingedrukt houden@. .ypA *1mail en gee) weer twee maal een *nter. 9ies in de werk alk voor &nvoegen : a) eelding : estand kie#en en selecteer uit de map a) eeldingen de a) eeldingA gardendiv.8pg= gee) alternatieve tekst op en klik >9. <ee) twee maal een *nter en kies weer voor invoegen : a) eelding en selecteer uit de map a) eeldingenA gardenimage.8pg. $electeer nu de eerste regel en klik op de knop laag en klik nu op het kadert8e links oven in de laag en sleep die nu ergens naar rechts in de grote a) eelding. $electeer nu de e1mail tekst en klik op de knop laag en sleep de#e nu onder o) naast o) in de oom. $electeer nu de a) eelding 3gardendiv3= klik op laag en sleep de laag onder de eerste tekstregel. $electeer de regel 3een plaats waar alles kan en niets ver aast3 en sleep nu de laag ergens onder de dui). Hu staan alle lagen in de grote a) eelding. $electeer nu de grote a) eelding en sleep de#e helemaal naar oven in

de pagina. Bet alle lagen nu mooi naar rechts onder elkaar en pas de grootte van de tekst aan naar wens. ;e kunt in de laag klikken= alle tekst selecteren en dan de grootte en eventueel een andere kleur= naar keu#e aangeven. Aan geselecteerde tekstregels : a) eelding in een laag kun 8e een koppeling naar een andere pagina ver inden= #oals 8e dat aan het egin van de cursus he t geleerd. "et mooie aan het werken met lagen is= dat de eperkingen tussen een a) eelding en:o) tekst met etrekking tot uitli8ning helemaal #i8n opgeheven. ;e kunt #e plaatsen waar 8e wilt. E,t % !i(l%gen E,t % info $%tie o'e kleu en Boals eerder opgemerkt staan er ruim %6 mil8oen we kleuren tot 8e eschikking. "et is niet alti8d eenvoudig om een mooie achtergrondkleur o) letterkleur te vinden. De meeste standaardkleuren die in een editor worden aange oden #i8n meestal hard en )el. ;e kunt #el) wel eindeloos gaan knoeien in de he6 editor om een geschikte kleur te vinden= maar dat is nogal ti8drovend. <elukkig estaat er een heel mooi programma om een gewenste kleur op te sporen. Dat is het programma Color Picker en die vindt 8e in de map programma3s= J%'%?/ i#t *en andere veel ge ruikte toepassing op het internet is het ge ruik van ;ava$cript. >p i8na iedere we pagina staat wel een stuk8e ;ava$cript. *r estaan twee soorten ;ava scripts. N Cli!nt ge aseerd N $erver ge aseerd 7i8 een cli!nt ge aseerd script wordt het script direct vanuit de internetpagina uitgevoerdA er wordt i8voor eeld een datum en ti8d getoond= o) een klok8e. "et vertonen van popup1schermen= inlogschermen= en#ovoort. 7i8 een server ge aseerd script vindt de uitvoering van de opdracht niet vanuit de pagina #el) plaats= maar ge eurt dat op de server= i8voor eeldA het opgeven van een #oekopdracht in een we pagina. ;ava$cript kun 8e niet #omaar in een we pagina #etten. "et is voor leken een on egri8peli8ke taal en als 8e het plaatst moet dat )outloos #i8n omdat het anders niet werkt. ;ava$cript wordt alti8d in de ron van de pagina ge#et >mdat ;ava$cript ra#end populair is= estaan er aardig wat we sites waar 8e scripts vandaan kan halen om in een pagina te ge ruiken. >m te laten #ien= hoe ;ava$cript werkt= een voor eeldA &n de map mi8n homepage : a) eeldingen staat een klad lok estandA 8avascript.t6t >pen dit estand= selecteer alle tekst en kopieer dit. <a terug naar 9ompoBer en open een lege pagina en klik op de ta ron.

Plak nu de tekst onder de U odyL Als 8e nu op de ta Hormaal klikt= #ie 8e helemaal niks ? ehalve een lok8e met de tekst $CQ&P.@ en dat klopt. <ee) de pagina nu een gele achtergrondkleur= sla de pagina op alsA 8ava 9lik op eki8ken en als het goed is #ie 8e nu een datum1 en ti8daanduiding. "et kan voorkomen dat een script dat 8e van het internet he t gehaald helemaal niet werktA er kan een )out in #itten o) het werkt i8voor eeld alleen in de &nternet *6plorer en niet in Fire)o6 o) omgekeerd. *en andere reden kan #i8n dat ;ava$cript niet werkt is omdat het ge lokkeerd is in de rowser. Je *e!site l%ten 'inden De we sites die 8e gemaakt he t o) nog gaat maken staan uiteindeli8k succes vol gepu liceerd op het internet. De vraag is nuA wordt de we site waar 8e #oveel werk aan he t esteed nu ook gevonden= door i8voor eeld een #oekmachine. "et antwoord hierop isA ;a= mits........ 5e he en nameli8k helemaal geen termen aangegeven op asis waarvan ro ots die we pagina3s inde6eren= 8e pagina3s kunnen vinden. Alle #oekmachines maken ge ruik van ro ots die 2( uur per dag niets anders doen dan #oeken naar nieuwe we sites en die gegevens opslaan in een data asis. 5il 8e door een #oekmachine gevonden en geMnde6eerd worden dan #ul 8e #oektermen moeten opgeven in 8e pagina. De inde6 pagina is in principe voldoende. Boektermen voor een ro ot worden metatags genoemd. ;aren geleden moest 8e een we site nog #el) aanmelden i8 een #oekmachine en dat kan nog steeds= maar dat hoe)t niet meer= omdat dit volautomatisch ge eurt. Ha een aantal weken wordt 8e we site van#el) opgepikt door een #oekro ot. *r #i8n genoeg mensen die metatags in hun pagina achterwege laten omdat hun we site alleen voor intimi is estemd en niet voor het grote pu liek. 5il 8e door een groter pu liek gevonden worden dan #i8n metatags elangri8k. /etatags worden alti8d in de UheadL van een pagina ge#et. Alles wat in de UheadL van een pagina staat laat de rowser niet #ien= in tegenstelling tot wat in de U odyL van een pagina staat. <a maar eens naarA www.marktplaats.nl 9lik dan in de werk alk op 7eeld : Pagina ron ;e kri8gt nu de html1opmaak van de pagina te #ien en ovenin de pagina staan de metatags die voor de #oekmachine #i8n geschreven. $tel dat we de we site die we in de#e cursus gemaakt he en serieus willen gaan pu liceren op het internet= dan #ouden de metatags voor de#e we site er als volgt kunnen komen uit te #ienA

Umeta nameVWtitleW contentVW5elkom op de we site vanPW :L Umeta nameVWdescriptionW contentVWontwerp 8e eigen we site met 9ompoBerW :L Umeta nameVWkeywordsW contentVWcursus 9ompoBer= 9ompoBer open1 source editor= asis cursus 9ompoBer= cursus we site maken met 9ompoBerW :L Umeta nameVWlanguageW contentVWnlW :L Umeta nameVWratingW contentVW<eneralW :L Umeta nameVWrevisit1a)terW contentVW,0 daysW :L Umeta nameVWro otsW contentVWinde6=)ollowW:L De title eschri8)t de titel van de we site. DescriptionA omschri8)t waar de we site over gaat. 9eywordsA #i8n de steekwoorden= ge ruikers #oeken met #oektermen op #oekmachines. <oogle gaat #oeken en komt i8 de#e we site uit. 0anguageA we site is Hederlands QatingA hoe moet de#e we site geclassi)iceerd wordenR als algemeen. ?andere categorie!n #i8nA onderwi8s= kunst= seks= wetenschap= en#ovoort@. Qevisit1a)terA google ot ?de #oekro ot@ e#oek mi8 opnieuw over ,0 dagen. Qo otsA ewaar de inde6 in de #oekmachine data ase en volg alle linken. *r #i8n nog meer metatags te edenken= maar voor dit ogen lik #i8n dit wel de elangri8kste. @e>oeke stelle "et is alti8d leuk om te weten waar de e#oekers van 8e we site vandaan komen en hoeveel e#oekers er iedere dag komen. *r estaan veel tellersA de een is iets nauwkeuriger dan de andere= maar in het algemeen doen #e wat #e moeten doenA tellen. "et maakt daarom ook niet uit o) 8e een teller van Hederlandse odem haalt= uit 7elgi! o) Amerika. "et enige pro leem isA reclame voor de neus van 8e e#oeker. 'ooral de teller van Hed$tat is hier erucht om. Hiet alle teller)a rikanten maken #ich hier schuldig aan. 7i8 >ne$tat kri8g 8e een kleine a) eelding op de paginaA 7i8 7el$tat een #eer escheiden gra)iek8eA Als 8e op die iconen klikt die meestal op de inde6 pagina staan= wordt 8e naar de teller pagina ge racht waar de registratie wordt i8gehouden. Een g%sten!oek De meeste providers ondersteunen niet het ge ruik van een gasten oek. *en gasten oek is niets anders dan een pagina waar e#oekers hun mening kunnen geven over 8e we site. Als 8e al eens een gasten oek he t ekeken= #ul 8e niet veel meer tekst tegenkomen danA goed o) mooi gedaan en veel succes verder. *igenli8k voegt een gasten oek nauweli8ks iets toe aan 8e we site en ovendienA alle aan ieders van gasten oeken edelven 8e geli8k met reclame.

Het $%ken '%n een foto %l!u$ $et AJ-l!u$A. LE4 #7: omdat er steeds nieuwere8aangepaste versies uitkomen% kunnen de getoonde afbeeldingen een beetje afwijken. Dit hoeft verder geen belemmering te !ijn om toch succes vol een fotoalbum te maken. Dus niet schrikken als de afbeelding er iets anders uit!iet. 6Album is geen #pen Source 9de 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 !etten en dit voor iedereen beschikbaar te stellen. 6Album is uitermate gemakkelijk in gebruik 9kind kan de was doen:% met een paar handelingen heb je !o een kompleet foto album gemaakt wat je vervolgens op je webruimte kunt !etten 8 publiceren. Start je het programma voor het eerst op dan !ie je dit scherm. 6e hoeft je niet te registreren% dus !et eerst een vinkje voor "Don"t show again" 9laat dit niet meer !ien: en klik op de knop "'o% thanks" 9nee% bedankt:. Het welkomstscherm verdwijnt. 6album kent ook een betaalde versie met iets meer functionaliteit. $elke versie je ook kiest% het is een prachtig programma voor het maken van een fotoalbum. 7i8 het opstarten van 8Al um verschi8nt er een aanmeld venster voor registratie maar dat is niet verplicht. ;e kunt er voor kie#en om 8e#el) te registreren. "et vervolg en egin scherm #iet er nu #o uit

9lik als eerste in het gedeelte 3skin en sti8l3 op de knop 3 om het uiterli8k van 8e we al um te epalen. *r is een ruim aan od van diverse layouts.

9lik vervolgend in het midden van het venster op 3voeg a) eeldingen toe3 en als 8e dat gedaan he t worden de )oto3s ingeladen in het programma.

;e hoe)t nu alleen nog maar op de knop 3maak al um3 te klikken en het al um wordt gemaakt. Havigeer naar de map waar 8e de )oto3s he t staan die 8e wilt ge ruiken voor 8e al um. Bie hier oven. Dat kan 8e C1schi8) #i8n /i8n documenten= het mag ook een andere plaats #i8n. De doel)older ?de map waar het echte al um komt te staan is al ingevuld. Als 8e dat he t gedaan klik 8e op de knop sluit. De map met 8e )oto3s worden nu ingeladen in het programma en het enige wat 8e nu nog hoe)t te doen is klikken op al um maken. "et al um wordt nu gemaakt volgens de standaard instellingen. Als dit klaar is he 8e de mogeli8kheid om in het scherm te klikken op voor vertoning. Siteraard wil 8e dat en klik 8e daar op. "et al um wordt nu geladen en 8e kunt met de knoppen door het al um navigeren. ;e he t nu met een paar minimale handelingen 8e al um gemaakt. Als 8e het programma nu sluit= wordt 8e gevraagd o) de instellingen moeten worden opgeslagen kies voor ;a en dan op de#el)de locatie waar het al um #ich evindt. "iermee kun 8e het#el)de al um in een later stadium veranderen o) van meer in)ormatie voor#ien. 7en 8e niet tevreden met het s8a loon van het al um= o) wil 8e epaalde instellingen veranderenD $tart ;al um op L 9lik in het menu op 7estand L 9lik op >pen pro8ect Havigeer naar de schi8) waar 8e )oto al um is opgeslagen en selecteer het 8ap estand en klik dan op openen. "et al um wordt nu geladen. Als 8e nu weer op de knop &nstellingen klik kri8g 8e een hele ri8 van - ta laden met allerlei opties voor

aanpassingen: veranderingen. ;e kunt hier naar hartenlust mee e6perimenteren. "et pu liceren van 8e )otoal um is al net #o eenvoudig als het pu liceren van een we site. Als 8e nu de map open maakt van 8e )oto al um= dan #ie 8e niet alleen de )oto3s= maar er #i8n mappen i8gekomen= wat we nu nodig he en is de map al um. &n de#e map evinden #ich alle estanden die 8e nodig he t om 8e al um op de server te plaatsen met 8e F.P programma. /aak met 8e F.P programma ver inding met 8e host. /aak op de server een nieuwe map aanA i8voor eeldA al um en open de#e map. Havigeer nu in het linker gedeelte van 8e F.P programma naar 8e )oto al um en dan naar de map al um. Bet alle estanden over in de map al um. Als 8e dat he t gedaan staat 8e )oto al um online. >m nu op het internet 8e )oto al um te eki8ken= ga 8e naar het adres van 8e we site= voeg aan het adres in de adres alk al um:inde6.html toe en ge ruik de *nter knop. ;e al um wordt nu geladen. Als voor eeldA httpA::www.9ompoBer.nl:al um:inde6.html 6%s/%ding ?t1le ?+eets C$$ staat voor Cascading $tyle $heets. >ok de term W$tyle $heetsW wordt wel ge ruikt. /et C$$ kun 8e in hoge mate de weergave van 8e pagina epalen en kun 8e e))ecten ereiken die met "./01tags alleen niet mogeli8k #i8n. Bo kun 8e i8voor eeld epalen dat alle Uh,L tags %+ Points groot moet #i8n in de kleur rood en met het lettertype Arial. "et is dus veel )le6i eler dan "./0 wat de vormgeving etre)t. ;e hoe)t maar CCn keer de opmaak van 8e pagina3s op te geven. C$$ stelt 8e in staat om alle sti8lelementen van een we site in CCn document onder te rengen. Dat wil #eggen dat 8e maar CCn document hoe)t te veranderen om alle pagina3s van 8e site aan te passen. 5il 8e i8voor eeld de kleur van al 8e "eadings veranderen o) het lettertype dat 8e in 8e paragra)en ge ruiktD Dan verander 8e het C$$1document en alle pagina3s nemen de#e sti8l dan over. /et "./0 #ou 8e al de#e wi8#igingen in alle pagina3s moeten aan rengen= wat veel meer werk is. De pagina3s van 8e site worden kleiner doordat 8e veel minder code hoe)t te ge ruiken. "ierdoor #al 8e site sneller laden. C$$1code is rowser vriendeli8k. "et wordt ondersteund door alle nieuwe rowsers en dit #orgt ervoor dat de pagina3s in alle rowsers er het#el)de uit #ullen #ien. De C$$ kan in het html document worden geplaatst= maar meestal wordt ge ruik gemaakt van een e6tern document ?klad lok@ en dit is ook vri8wel het gemakkeli8kste om mee te werken. Als 8e een stylesheet he t gemaakt is het enige wat 8e hoe)t te doenA een link aan rengen in html document naar 8e stylesheet. Dit geldt voor iedere paginaK

"et stylesheet document ewaar 8e in de#el)de map als waar 8e ook de html pagina3s he t geplaatst. Denk aan de e6tensie css en dus niet opslaan als t6t De link naar een stylesheet #iet er in de ron van de pagina #o uitA UhtmlL UheadL UtitleLDe titel van de pagina.U:titleL Ulink hre)VWstylesheet.cssW relVWstylesheetW typeVWte6t:cssW :L U:headL U odyL "ier komt de inhoud van 8e pagina. U: odyL U:htmlL Als 8e die link in iedere UheadLU:headL van 8e html pagina plaatst #al de opmaak van alle pagina3s identiek #i8n. 0aten we met een klein voor eeld eginnen. *en stylesheet maken waarin is vast gelegd dat de opmaak van de html pagina moet estaan uitA achtergrondkleur= letterkleur= lettergrootte= regela)stand= kleur van een link= een e))ect als 8e op een link gaat staan met 8e muis en als laatste een kopregel. 9opieer het gedeelte tussen de li8nen ? #ie hieronder@ en plak dit in het klad lok. $la het estand op als stylesheet.css ?8e vindt dit estand ook al kant en klaar in de cursuskompo#er mapA stylesheet.css

ody Z colorA 3-2-%( R ackground1colorA 3e4e %R )ont1)amilyA .imes= W.imes Hew QomanW= seri)R )ont1si#eA %2p6R line1heightA 20p6R te6t1alignA le)tR[ aAlink Z te6t1decorationA underlineR[ aAhover Z te6t1decorationA underlineR colorA 34400,,R[ h% Z )ont1)amilyA .imes= W.imes Hew QomanW= seri)R )ont1weightA oldR te6t1alignA le)tR )ont1si#eA 20p6R[ /aak een nieuwe lanco pagina aan in 9ompoBer en plaats in de head van 8e pagina een link naar 8e stylesheet. Ulink hre)VWstylesheet.cssW relVWstylesheetW typeVWte6t:cssW :L $la de pagina op als stylesheet.html ?normaal gesproken #ou 8e voor

een inde6 kie#en@ en op de#el)de plaats waar ook 8e stylesheet is opgeslagen. .ype nu wat tekst= gee) aan dat dit kopregel ?kop%@ moet worden= type vervolgens wat gewone tekst en reng een link aan naar een internet pagina. Als 8e de pagina weer opslaat en in de rowser gaat eki8ken dan #ul 8e #ien dat de opmaak volgens de opdrachten in het stylesheet wordt weergegeven. ;e kunt vervolgens op internet veel meer en uitge reidere in)ormatie vinden over het ge ruik van stylesheets van vri8 simpel= #oals de#e oe)ening= tot hele comple6e stylesheets waar alle opmaak tot in de punt8es wordt geregeld. ;e kunt dit voor eeld van een eenvoudige stylesheet gemakkeli8k aanpassen= door eventueel het lettertype= lettergrootte en kleur ge ruik aan te passen aan 8e eigen wensen. Als C$$ te ingewikkeld voor 8e is o) gewoon te veel ti8d vraagt aan verdieping dan is het ook nog mogeli8k om een complete we site= inclusie) stylesheet ?dit samen heet een template@ te downloaden via het internet. De#e #ogenaamde templates voldoen aan de 5,C normen. *r #itten voor eelden i8 die a soluut de moeite waard #i8n om te ge ruiken. "et kan 8e enorm veel werk schelenA httpA::www.)reecsstemplates.org: httpA::www.)ree1css.com: httpA::templates.arcsin.se: httpA::www.opensourcetemplates.org: "et is met 9ompoBer heel goed mogeli8k om uitge reide sti8l laden te maken= daarvoor hee)t het alle gereedschap in huis. /aar omdat ook het maken van sti8l laden niet tot de asis ehoort maar om echte e6tra studie vraagt= wordt het in de#e cursus niet verder ehandeld. "o$einn%%$ *en domeinnaam is niets anders dan een ruimte die 8e huurt i8 een host provider. Als 8e i8 een host provider een eigen domein he t laten registreren= i8voor eeld httpA::www.mi8neigennaam.nl dan is dat domein 8e eigendom en de host provider #orgt er voor dat 8e onder die naam ereik aar ent op het internet. 'ervolgens kri8g 8e we ruimte aange oden om daar 8e internetpagina3s onder te rengen. 7i8 het eigen domein kri8g 8e vervolgens de eschikking over 3eigen naam3 e1 mailadressen= kun 8e ge ruik maken van )ormulieren en allerlei andere internet toepassingen voor 8e we site. De ruimte die 8e nodig he t hangt helemaal a) van hoe groot 8e we site wordt. *en ruimte van 2-0 /7 is meer dan genoeg. 5il 8e ook persoonli8ke : ack1up estanden op de server plaatsen dan he 8e uiteraard ?veel@ meer nodig.

*r estaan tientallen host providers en de pri8#en vari!ren van een paar tient8es per 8aar tot meer dan honderd euro per 8aar. "ieronder willekeurige edri8ven= als voor eeldA httpA::www.hosting2go.nl: httpA::www.sohosted.com: 5il 8e het goed en goedkoop he httpA::www.gethost.nl: enA

"et pakket van 2-0 /7 is voor een standaard we site= meer dan voldoende. De 9ompoBer we site staat i8 de#e laatst genoemde. We!sites te$#l%tes. De#e aanvulling he ik geschreven voor de wat gevorderde we site maker en is nog vri8 escheiden geschreven. "i8 is ook meer edoeld om te laten #ien wat er allemaal mogeli8k is met css. Als dit te ingewikkeld voor 8e isA gewoon overslaanK *en template is een s8a loon en een s8a loon is een kant en klare opgemaakte we pagina. &n een template is de menustructuur= kleurge ruik= lettertype= locatie van een a) eelding allemaal al vastgelegd. De meeste css templates worden ook nog eens= als i8komend voordeel= goed gevalideerd door het 5,C. Als 8e #el) niet #o edreven ent in het ontwerpen van een we site dan is het ge ruik van een template een geweldige uitkomst. .emplates vindt 8e in alle soorten en maten= i8 honderden tegeli8k= op het internet. >mdat we er naar streven om een gevalideerde we site te maken. "e ik een template opge#ocht. De#e #it in de map template. De#e we site is gemaakt met C$$ en 8e hoe)t dan ook alleen maar wi8#igingen in het C$$ estand door te voeren= om het geheel naar 8e eigen wensen aan te passen. "e 8e een C$$ estand gewi8#igd en opnieuw ewaard= dan kun 8e door de inde6.html te eki8ken direct de veranderingen #ien die 8e he t aange racht. "et enige wat 8e in de inde6 #el) hoe)t te veranderen #i8n de menu namen en de verwi8#ingen naar de andere pagina3s die 8e gaat maken. /et 9ompoBer open 8e de inde6 van 8e template en vervolgens kies 8e voor opslaan alsP om 8e andere pagina3s een naam te geven. 'oordat 8e daar nu mee gaat e6perimenteren en om te voorkomen dat 8e de originele estanden gaat overschri8venA /aak een kopie van de template die 8e wilt gaan ge ruiken en ga daarmee aan het werk. /ocht er van alles mis gaan= kun 8e later weer een nieuwe kopie gaan ge ruiken. Als voor eeld de template do i. "et oorspronkeli8ke template do i he ik omge#et tot een i8na complete we site. &k he de inde6 geopend= de menuverwi8#ingen aangepast en vervolgens de inde6 vi8) keer achter elkaar opgeslagen alsPhtml estand.

De we site do i hee)t #es pagina3s die wat uiterli8k etre)t allemaal identiek #i8n. Als 8e de inde6 in de rowser gaat eki8ken kun 8e door alle pagina3s navigeren. /et uit#ondering van de tekst is do i eigenli8k al compleet en dus i8na a). Alles wat 8e verder #ietR de a) eelding in de header ?kop van de pagina@= de ge ruikte achtergronda) eelding= lettertype= lettergrootte en kleuren wordt allemaal geregeld en vastgelegd in het css estand. Dit is dat ook het meest elangri8kste estand van de we site. <aat het daar verkeerd o) worden er daar dingen verkeerd omschreven= dan gaat het geli8k op alle pagina3s van de hele we site verkeerd. 5il 8e een andere a) eelding ge ruiken= ander lettertype= grootte en kleurenA het css estand aanpassenK Als voor eeld. &n de map img ?images:a) eeldingen@ van de template vindt 8e vier a) eeldingen. .wee oorspronkeli8ke a) eeldingen en twee a) eeldingen die door mi8 #i8n veranderd waardoor het uiterli8k van de we site is aangepast. De#e twee aangepaste a) eeldingen epalen nu het ge#icht van de we site. Dat #i8n de a) eeldingenA woningen.8pg en de dg.8pg De#e a) eeldingen #i8n met een )oto ewerkingsprogramma aangepast en vervolgens he ik in het css estand de verwi8#ing naar de#e a) eeldingen opgegeven. >veral in het css estand kom 8e verwi8#ingen tegen naar ge ruikte kleuren= i8voor eeldA color A 3aca)2cR Door de code in een andere kleurcode te veranderen kun 8e de ge ruikte kleuren van i8voor eeld de tekstkleur veranderen. *en kleurcode egint alti8d met een 3 en wordt a)gesloten met een punt komma. "e 8e een kleur verandert= css estand opslaan en de inde6.html in de rowser eki8ken. ;e #iet direct de verandering. 7en 8e er niet tevreden over= ta lad 37ewerken3 en dan kie#en voor 3ongedaan maken3. Door er veel mee te e6perimenten #ul 8e er van#el) enige handigheid in kri8gen. "et is vaak een kwestie van vallen en opstaan en wanneer iets mislukt gewoon weer helemaal opnieuw eginnen en diep #uchten. *en heel goed uitgangspunt om 8e in de eginselen van css te verdiepen en onder de knie te kri8genA httpA::www.we 1garden. e: Als 8e meerdere css templates #oekt= dan rengt <oogle 8e daar van#el) naar toe met de #oek opdrachtA css templates