Verslag van de eindopdracht. Een website voor de school

Verslag van de eindopdracht

Een website voor de school © 2005

Eindverslag: Eric Vink, St. Antonius

Inleiding

Een website voor de school Ik loop stage op basisschool St. Antonius. Dit is een Katholieke school in het piepkleine dorpje De Vecht. Hier heb ik mijn eindopdracht in de vorm van een website gemaakt. Waarschijnlijk komen de meeste medestudenten er halverwege hun stage pas achter wat hun eindopdracht zal worden. In mijn geval wist ik dit al zeer vroeg. Namelijk tijdens het sollicitatiegesprek. Dit heeft ook mede mijn keuze bepaald voor deze school, omdat ik het maken en onderhouden van een schoolsite als één van mij taken als ict onderwijs assistent zie.

Basisschool St. Antonius in De Vecht. (Deze foto heb ik ook voor de homepage gebruikt.)

2


Inhoudsopgave: 1. 2. 3. 4. 5. 6. 7. 8. 9.

Hoe het allemaal begon -------------------------------------------------- blz. Oriëntatie ------------------------------------------------------------------ blz. Het programma ------------------------------------------------------------ blz. Eerste opzet --------------------------------------------------------------- blz. Een advertentie ------------------------------------------------------------ blz. De website ------------------------------------------------------------------ blz. De provider ---------------------------------------------------------------- blz. Uitleg webdesign ---------------------------------------------------------- blz. Slotwoord ------------------------------------------------------------------ blz.

4-5 6-7 8-9 10-11 12-13 14-17 18-19 20-25 26-27

3


1.

Hoe het allemaal begon

4


Solliciteren Op 18-11-2004 mocht ik op gesprek komen in De Vecht. Dit liep allemaal voorspoedig en al snel werd mij de vraag gesteld door dhr. Abbenhuis, de directeur, hoe mijn ervaring in het maken van websites is. Dit omdat ik in mijn CV heb staan dat mijn kennis van HTML goed is. Ik bevestig dit dan ook. Meteen krijg ik de vraag om te laten zien wat ik dan zoal gemaakt heb. Leuk, iemand met interesse voor mijn websites. Ik kruip achter de pc van de directeur, (ik ben net een half uurtje op deze school) en start Internet Explorer op. Ik heb een paar voorbeelden laten zien: www.vwinke.tk, een website over dvd en film, www.tvo3.tk, de website van en over de handbaldames van TVO en www.mrhyde.nl, de website van een bluesrockband uit Neede en omstreken. Dhr. Abbenhuis was gelukkig enthousiast over de sites en vertelde over het plan om voor de Antoniusschool een schoolwebsite te maken en dit dan door mij te laten doen. Omdat dit toch al een grote hobby van mij is vind ik dat natuurlijk een fantastisch idee, en we komen overeen dat de site tevens mijn eindopdracht zal worden. Doordat ik dus al in een vroeg stadium wist dat de schoolwebsite mijn eindopdracht is kon ik me gedurende het begin van de stage al oriënteren op bijvoorbeeld de opmaak, uitstraling en andere ideeën. Over het verdere verloop van de sollicitatie doe ik geen verslag. Het mag duidelijk zijn dat die goed is afgelopen aangezien ik ben aangenomen voor de stage.

5


2.

Oriëntatie

6


Ideeën opdoen Voordat je aan een website begint denk je natuurlijk allereerst na over de inhoud en het uiterlijk. Ik had me al bedacht dat er een tweedeling zou moeten komen tussen de schoolsite zelf en een aparte afdeling voor de leerlingen. De schoolsite zelf zou dan iets zakelijker moeten worden terwijl de omgeving voor de leerlingen lekker kleurrijk en speels mag zijn. Ik heb hier natuurlijk contact over gehad met dhr. Abbenhuis en hij liet me hier vrij in. We konden in een later stadium wel kijken hoe het geworden was en hoe dan verder. Prima. Ik had ooit eens, toen ik met Dreamweaver (een html-editor) aan het spelen was, een erg leuk stylesheet* gezien. Ik heb deze weer opgezocht en eens van alle kanten bekeken. En zo was het begin van de site geboren. Ik ben hiermee aan de slag gegaan en had al snel een homepage voor de schoolsite op mijn pc staan, waar ik zelf wel blij mee was. Ik had me ook al bedacht dat het erg leuk zou zijn om voor iedere groep een aparte site te maken die vanuit de schoolpagina te benaderen is. Veel werk, maar het moet te doen zijn. Ik ben hier mee aan het werk gegaan, en heb de pagina’s opgebouwd in frames, omdat dat aardig wat werk kan schelen. Je hoeft dan niet voor elke pagina een nieuw menu te maken bijvoorbeeld. (Later meer over frames.)

Een stukje van de stylesheet. *Stylesheet = Met behulp van Stylesheets kan je de opmaak van html-pagina's vastleggen. Het mooie aan stylesheets is dat je op een centrale plaats de opmaak voor het hele document, of zelfs meerdere documenten kan definiëren. Hierdoor wordt het ontwerp en onderhoud van de pagina's erg vereenvoudigd. Bovendien zijn met stylesheets dingen mogelijk die met gewone html niet mogelijk zijn.

7


3.

Het programma

8


1st Page 2000 In plaats van direct verder uit te wijden over de website zal ik eerst even vertellen met welk programma ik doorgaans werk. Ik werk al jaren met de gratis html-editor 1st Page 2000 van Eversoft. Dit programma staat al een aantal jaren bekend als één van de beste gratis html editors op het internet. Het programma bevat een aantal standaard scripts. Een van die scripts is een soort grap. Het roept een heleboel vensters op die je dan allemaal moet sluiten. Bij de installatie van 1st Page 2000 kan de virusscanner hierover klagen, maar het kan geen kwaad. Ik zou het script persoonlijk niet gebruiken. Lijkt me vrij irritant, en ik denk niet dat mensen er blij mee zijn als je dit op je site hebt staan. Dit programma is geen WYSIWYG* editor, en dat is ook niet de bedoeling. Dit wil zeggen dat je niet wat tekst kan intikken, de tekst opmaken en de pagina opslaan. Het is de bedoeling om wel degelijk html te schrijven. 1st Page 2000 helpt bij het schrijven van die html code door voor veel functies knoppen te hebben en kleur aan verschillende html tags toe te kennen. Er zitten erg veel extra's bij het programma, waaronder 450 Javascripts en Perl-scripts. En een zeer uitgebreide documentatie. Verder kunt je 1st Page 2000 opstarten in 4 verschillende 'looks': Easy, Normal, Expert en Hardcore. Ook is er een FTP-functie die u kunt downloaden. Er zit wel een preview functie in het programma. Een aanrader wat mij betreft!

*WYSIWYG = What you see is what you get.

9


4.

Eerste opzet

10


De eerste aanzet Zoals al eerder gezegd, had ik een eerste opzet gemaakt voor de site. Voor de basissite had ik ook namen gegeven aan de knoppen, en wat tekst ingevuld. Ik heb ook maar meteen mijn digitale camera meegenomen naar school. Ik heb die middag wat foto’s genomen. Een paar van het schoolgebouw, wat van de leerlingen. Het is dan zo rond kerst, dus er is wel sfeer in school. Voor de pagina’s van de groepen had ik bedacht dat het wel leuk zou zijn om iets aan de cursor te hangen. Ik ben op zoek gegaan naar iets bijzonders en heb een paar aardige “cursordieren” gevonden. Nu moeten ze nog aan de cursor plakken. Ik bedoel dat als iemand de muis beweegt dat dan het plaatje volgt. Dus op het internet op zoek naar een bijpassend script. Na een zoektocht op verschillende sites heb ik een javascript gevonden dat werkt. Voorbeeld van een “cursordier” Æ Nu de proef op de som. Ik had al een tijdelijke pagina gemaakt met wat kleurplaten en dergelijke, en met de tekst dat er spoedig een nieuwe site zou komen van de school. Na de kerstvakantie heb ik deze online gezet, om eens te laten keuren door de directeur. Ik heb ook al wat van de gemaakte foto’s ingevoegd. Dan is het al wat meer de site van de school. De heer Abbenhuis was enthousiast. Hij heeft alles goed bekeken en vond het mooi geworden. Hij had alleen nog wel een opmerking over de kleur. Er mocht wat meer kleur komen vond hij. Ik heb hem toen uitgelegd dat ik de schoolsite zelf wat zakelijker wil houden en dat de pagina’s voor de groepen wat vrolijker en kleurrijker worden. Daar kon hij zich goed in vinden, maar ietsje meer kleur mocht toch wel. Dus ik heb hem beloofd hier naar te kijken. Thuis ben ik ’s avonds aan de slag gegaan met het experimenteren met kleuren. Ik heb het stylesheet diverse malen aangepast met verschillende kleurcombinaties voor de achtergrond. Tot ik uiteindelijk tevreden was met een lichtblauwe kleur. (RGB kleur: #D8DFED) De volgende dag de verandering met de directeur doorgesproken en hij was ook tevreden. Het begin is er.

11


5.

Een advertentie

12


Adverteerder gezocht Ik had op de site ruimte gelaten voor een advertentie. De Vecht heeft een klein aantal bedrijven en ik dacht dat er misschien wel één tussen zou zitten die voor een kleinigheidje een advertentie op de schoolsite wil. Ik ben allereerst eens naar het plaatselijke café gelopen en heb daar de eigenaar aangesproken met dit voorstel. Hij zag er niet veel in en zei dan ook iets in de richting van “wat moet ik ermee?” Enigszins teleurgesteld ben ik maar weer naar school gelopen. Ik had gedacht dat hij er wat positiever tegenover zou staan, maar helaas. De volgende dag heb ik dit aan dhr. Abbenhuis gemeld en hij wist misschien nog wel een bedrijfje dat wat meer interesse zou hebben. Dit bedrijf is: “Installatietechniek De Vecht” en zit ook vlak bij school. De school had daar onlangs nog een koelkast weten los te peuteren voor een geschikt bedrag. We zijn daar de volgende dag samen naartoe gelopen en hebben daar met iemand gesproken. We hebben ook de schoolsite laten zien. In principe was ze wel te porren voor een dergelijk initiatief maar moest dat eerst nog met iemand anders overleggen. We hebben toen een afspraak gemaakt voor een week later.

Op de dag van de gemaakte afspraak zijn we weer naar het installatiebedrijf gelopen. Onder het genot van een kop koffie hebben we besproken wat de mogelijkheden zijn. Willen ze alleen een advertentie of ook een pagina met bijvoorbeeld aanbiedingen en dergelijke. Na wat wikken en wegen is er besloten dat een kleine advertentie voldoende is. Over een eventuele vergoeding zal nog gesproken worden. Het weekend daarop ben ik aan de slag gegaan met het ontwerpen van de advertentie. Ik heb dit in Macromedia Flash gedaan. Ik had al wat foto’s genomen van de zaak, en die heb ik erin verwerkt. Later die week zijn we nog een keer langs gegaan om het resultaat te laten zien. Ze zijn er tevreden mee.

13


6.

De website

14


Schoolsite in ontwikkeling Ondertussen ben ik natuurlijk verder gegaan met het knutselen aan de website. Ik heb nog een leuk klokje gevonden, gemaakt in flash, die heb ik er in verwerkt. Ook had ik intussen op verzoek van dhr. Abbenhuis een contactpagina gemaakt met daarop de adresgegevens van school en van het SKBG, de stichting waar de school onder valt. Ik heb er ook nog een routekaartje bij gemaakt. Verder is mij de nieuwsbrief toegestuurd, met het verzoek om deze te plaatsen. Ik heb er ook meteen een nieuwsbrieven archief bij gemaakt. Zo kan iedereen nog eens terugkijken in oudere nieuwsbrieven. Ik heb dhr. Abbenhuis verzocht om iets te schrijven voor de inleiding van de website. Wat algemene informatie en de schoolvisie. Dit is inmiddels gebeurd. Ik heb vast een pagina met nieuws gemaakt. Daarop kun je de laatste updates van de site volgen. En via kennisnet kun je een scriptje kopiëren waarmee je automatisch het laatste nieuws voor, in dit geval, het basisonderwijs op je site kan lezen. En wat natuurlijk niet mag ontbreken is de pagina met links. Ik heb een sectie links gemaakt voor de kinderen, een sectie met de scholen binnen het SKBG en een sectie overige, met links naar onder andere verenigingen uit het dorp. De pagina’s voor de verschillende groepen krijgen al meer vorm. Mijn digitale camera is regelmatig meegegaan naar school. Foto’s van de leerlingen horen natuurlijk op de site. Ik heb in elke groep een fotopagina gemaakt en een activiteitenpagina. Mede door het fanatieke insturen van juf Chantal, krijgt de pagina van groep 3 en 4 al aardig wat inhoud. Chantal is ook degene waarmee ik af en toe overleg heb over de inhoud van de website. Ook de andere pagina’s krijgen al wat meer inhoud. Ik maak zo af en toe zelf wat foto’s van diverse activiteiten en schrijf er dan een klein verslag bij. Op de hoofdpagina heb ik ruimte gemaakt voor verslagen van de diverse schoolactiviteiten. Zo is er bijvoorbeeld al een opening van de nieuwe bibliobus geweest en een sponsorloop voor het Liliane Fonds. Ik heb ook ruimte gemaakt voor een gastenboek. Maar ik heb eerst overlegt of de school wel of niet een gastenboek op de site wil hebben. In eerste instantie zag men het niet zo zitten om een gastenboek te plaatsen omdat men bang was voor rare berichtjes en dergelijke. Ik heb dit verhaal eerst laten rusten en heb het later nog eens opnieuw aangekaart. De directeur vroeg mij naar mijn mening over het wel of niet plaatsen van zo’n gastenboek. Mijn mening is dat je dit altijd kan proberen. Je kunt rare berichten weer verwijderen en zelfs IP adressen blokkeren als het moet. Mocht het helemaal niet werken kan ik het hele gastenboek ook weer verwijderen. We moeten het dan toch maar proberen, en inmiddels functioneert het. We zijn nog geen vreemde berichten tegengekomen. Ik heb bij write2me.nl een gastenboekaccount aangevraagd. Dit werkt perfect, en qua stijl is er ook nog van alles aan te passen.

15


Schoolsite in ontwikkeling Voor het controleren van de hoeveelheid bezoekers en de systemen, resoluties en dergelijke die de bezoekers gebruiken heb ik bij Netstat een account afgesloten voor het bijhouden hiervan.

Ik heb er ook nog iets bijgemaakt waar je kunt zien hoeveel gasten er on-line zijn. Een zogenaamd W.I.E. lijstje. Dit kun je gratis aanvragen op: www.wieonline.nl

Wie is er on-line? Æ Een disclaimer mag tegenwoordig ook niet ontbreken op een website. Ik heb er de volgende tekst voor gebruikt: “De op de site getoonde informatie wordt door antoniusdevecht.nl met zorg samengesteld, doch voor de juistheid en volledigheid daarvan kan niet worden ingestaan. Er wordt geen enkele garantie of verklaring, nog uitdrukkelijk nog stilzwijgend, gegeven terzake van de redelijkheid, juistheid of volledigheid van de informatie welke op de site wordt gepubliceerd of waartoe via de site toegang toe wordt geboden. Iedere aansprakelijkheid voor eventuele schade ten gevolge van toegang tot en gebruik van de site, wordt door antoniusdevecht.nl uitdrukkelijk afgewezen. Er wordt geen garantie geboden voor het foutloos en ononderbroken functioneren van de sites.” Die lijkt mij een aardig correcte tekst voor een disclaimer.

16


Schoolsite in ontwikkeling Ik heb het in het verleden eens met dhr. Abbenhuis over een pagina gehad met leuke dingen zoals spelletjes en kleurplaten. We zouden dit het Antoniushoekje kunnen noemen. Ik ben hier op een gegeven moment mee aan de slag gegaan. Ik heb inderdaad een paar aardige spelletjes gevonden voor de kinderen die ze kunnen downloaden. Ik heb er ook een paar kleurplaten bij geplaatst. En ik vond het leuk om er een poll bij te maken, maar omdat dit vaak in ASP of PHP gemaakt is leek me dat een lastige klus. Ik heb namelijk niet zo heel veel verstand van ASP en PHP. Ik ben toch op zoek gegaan naar leuke ASP scripts, en heb er een paar gevonden. Na wat geëxperimenteer heb ik toch Johan Bijster (een klasgenoot) maar eens gemaild, die is wel thuis in deze talen. Hij had het uitstekende idee om de poll in een i-frame* te plaatsen. Daardoor heb ik verder niets met een ASP site te maken. Ik hoef nu alleen maar de database aan te passen, via een met wachtwoord beveiligde site. Daar kan ik gewoon de nieuwe poll vragen opgeven.

Het administratie paneel

De poll Zo’n poll geeft net als een gastenboek wat interactiviteit aan een website. Ondertussen werden mij de nieuwsbrieven thuis gestuurd, zodat ik die ’s avonds of in het weekend nog even op de site kon zetten. Ook de leraren en leerlingen pagina krijgen al wat inhoud. Ik heb getracht om voor de meeste pagina’s leuke icoontjes te vinden. Dat fleurt de boel altijd op. Bijvoorbeeld:

voor de leraren

voor de nieuwsbrief

voor de links

De schoolgids heb ik omgezet naar pdf formaat, zodat bezoekers deze kunnen downloaden. Dit is waarschijnlijk wel handig voor ouders. *I-Frame = Naast de normale tag bestaat er in HTML ook de <iframe> tag, wat staat voor inline-frame. Met behulp van een iframe kun je een document of site binnen een site weergeven. Je kunt dit zelfs zo maken dat het helemaal niet opvalt dat er een i-frame in je pagina staat, door de randen en schuifbalken weg te laten.

17


7.

De provider

18


XS4All Toen ik op mijn stageschool kwam had de school het internet nog via Kennisnet. Maar toen was al duidelijk dat men zou migreren. De nieuwe provider is XS4All geworden. Ik heb helaas verder geen inspraak gehad op de domeinnaam en het soort abonnement. Dit was allemaal al geregeld door het bedrijf dat op school verantwoordelijk is voor het netwerk. (Dit bedrijf is Daxis) De domeinnaam is geworden: www.antoniusdevecht.nl Namen als stantonius.nl zijn ook allemaal al vergeven. Het abonnement dat gekozen is vind ik erg goed. Voldoende ruimte en de mogelijkheid om eigen scripts plaatsen. Hieronder volgen enige specificaties: SPECIFICATIES ADVANCED WEBSITE

Unix

Windows

Website: Domeinregistratie (.nl/.com/.org/.net/.be/.info/.biz)

1 domein

1 domein

Adres website

www.domeinnaam.nl

www.domeinnaam.nl

Schijfruimte website

100 MB

100 MB

Dataverkeer website

7,5 GB

7,5 GB

Scripts

3 cgi-scripts en eigen scripts

Frontpage en eigen aspscripts

Standaard Active X componenten

-

+

PHP

+

-

ASP

-

+

Server Side Inc.

+

+

MS Access database

-

+

Beveiligde directories

+

-

Uploaden

FTP/SCP

via Frontpage en FTP

E-mail: E-mail

25 POP-mailboxen van 20 25 POP-mailboxen van 20 MB MB

E-mailaliassen

250

250

Onderhoud e-mailadressen

Service Centre

Service Centre

Secure Webmail

+

+

Spamfilter

+

+

VirusFilters

+

+

19


8.

Uitleg webdesign

20


Een woordje HTML Ik zal proberen om nog even wat uit te leggen over HTML, hoe het werkt en hoe je het toepast in frames, omdat die veel gebruikt worden door mensen die beginnen met bouwen van websites. HTML is een afkorting van Hyper Text Markup Language. Zoals de term al zegt is het een "opmaak taal", d.w.z. het vertelt je browser d.m.v. HTML tags hoe de pagina weergegeven moet worden op het scherm. HTML is geen programmeertaal zoals vaak gedacht wordt. De tags kun je vergelijken met bouwstenen uit een lego-set. Er is een bepaald aantal stenen met een vooraf bepaalde vorm die je naar eigen smaak samen kunt voegen om zo een bouwwerk - in dit geval je webpagina - te creëren. Net als lego is ook HTML eenvoudig te leren, terwijl je er ook hele ingewikkelde dingen mee kunt doen, maar met het leren van de basisfuncties kun je al snel fraaie pagina’s bouwen. Iedere pagina bevat gegevens. Deze gegevens hebben de vorm van elementen. Zo heb je elementen voor tekst, plaatjes, formulieren, tabellen, etc. Ieder element bestaat uit drie delen: een begintag, de inhoud en een eindtag. Verder heeft een element verschillende attributen. Zo heeft het element "tekst" bijvoorbeeld als attributen "lettertype" en "lettergrootte". Tenslotte hebben de attributen weer verschillende waarden. Zo heeft de tekst een bepaald lettertype, bijvoorbeeld Arial of Courier. Als je geen waarde opgeeft, dan wordt de standaardwaarde voor het betreffende attribuut gebruikt. Zoals gezegd bestaat een element uit een begintag, de inhoud en een eindtag. Wat zijn nu tags? Een tag is een HTML code die tussen twee haken: < en > staat. Een voorbeeld van een tag is en ook is een tag. Het eerste voorbeeld is een begintag het tweede een eindtag. Een eindtag maak je hetzelfde als de begintag, maar dan met een /. Een standaard HTML bestand is vrij simpel te maken. Het enige wat je nodig hebt is een tekst editor zoals "kladblok" die standaard bij Windows zit. Het is echter aan te raden om een HTML editor te gebruiken. Dit werkt makkelijker en sneller. Een lijstje met goede HTML editors vind je aan het eind van dit hoofdstuk. Nog een opmerking: HTML behandelt hoofdletters en kleine letters hetzelfde. Het maakt dus niet uit of je <TITLE> of typt. Zoals al gezegd heten de commando's tussen < en > tags. Het volgende voorbeeld bevat het basismodel van ieder HTML bestand. <HTML> <HEAD> <TITLE>Hier vul je de titel van je pagina in. Hier komt de inhoud van je pagina. Ok, dit is dus een standaard HTML document. Iedere webpagina bevat dus minimaal het bovenstaande. Maar wat gebeurt er nu eigenlijk? Even een uitleg van de verschillende tags die hier gebruikt worden:

21


Deze tag wordt gebruikt om het begin van een HTML document aan te geven. Als je een HTML bestand maakt, begin je dus altijd met . De tag wordt gebruikt om belangrijke informatie over de pagina in op te nemen. Deze informatie is (vrijwel altijd) onzichtbaar voor de bezoeker van je pagina. Je vindt hier vaak de titel van de pagina (zie hieronder) en ook meta-tags (woorden die helpen om een zoekmachine je site te laten vinden). Javascripts vind je ook vaak in dit gedeelte. <TITLE> en De <TITLE> tag is de begintag van de titel van je pagina. Na deze begintag type je dus de gewenste titel voor je pagina. Deze titel ziet de bezoeker linksboven, in de titelbalk van zijn browserscherm. Vervolgens sluit je de tag met . Dit is de eindtag van de HEAD. Onthoud dat praktisch alle elementen bestaan uit een begintag en een eindtag. De eindtag ziet er hetzelfde uit als de begintag, maar het heeft alleen een / erbij. Vergeet niet begin- en eindtag op te nemen, anders heeft dit (meestal) grote gevolgen voor het resultaat op het scherm. en De en tags zijn veruit de belangrijkste tags in ieder HTML document. De werkelijke inhoud van je pagina komt tussen deze tags te staan. Daarom heet het ook "body", ofwel "lichaam". De tag komt tussen de en tags en na de tag. Ook vind je in het element BODY belangrijke informatie in de attributen over bijvoorbeeld de achtergrondkleur en de tekst. background Hiermee kun je een plaatje gebruiken als achtergrond van je pagina. bgcolor Belangrijk attribuut, om de achtergrondkleur van je pagina te wijzigen. text Met dit attribuut kun je de standaard tekstkleur op je pagina instellen. link Hiermee kun je de kleur van de links op je pagina instellen. alink Bepaalt de kleur van de actieve links. De links zijn actief als je er op klikt. vlink Attribuut waarmee je de kleur van de geklikte links aangeeft. Als een bezoeker terugkeert op je pagina, dan zijn de links waarop hij al geklikt heeft in deze kleur weergegeven. Deze eindtag markeert het einde van een HTML document. Dit is dus de laatste tag die je gebruikt bij het maken van je pagina.

22


Frames in het kort Nog even de beginselen van frames: FRAMES Met zogenaamde 'frames' is het mogelijk het scherm in vensters te verdelen, die apart van elkaar kunnen scrollen. Dit is bijvoorbeeld handig voor links de inhoudsopgave en rechts de echte pagina. Als de pagina dan naar beneden wordt gescrolld blijft de inhoudsopgave altijd zichtbaar. Elk frame bestaat uit een aparte HTML-pagina. Frames worden oa. ondersteund door Netscape Navigator vanaf versie 2 en Microsoft Internet Explorer vanaf versie 3 en Mozilla Firefox. Begin van de definitie van de frames.

Attribuut

Resultaat

COLS=

het scherm verdelen in kolommen: "20%,80%" 2 kolommen, de linker is 20% van de totale breedte, de rechter 80% "20,50%,*" 3 kolommen, de linker is 20 pixels breed, de middelste 50% van de totale breedte, en de rechterkolom is zo breed als de ruimte die dan nog over is

ROWS=

het scherm verdelen in rijen. De werking is verder hetzelfde als COLS

BORDER="getal"

de breedte van de framebalk in pixels

BORDERCOLOR="kleur" de kleur van de framebalk. kleur kan een zelf gemixte RGB kleur ( ="#000000" = zwart ) FRAMEBORDER="no"

wel ( ="yes" ) of geen ( ="no" ) framebalken

FRAMESPACING="getal" de ruimte tussen de frames

Voorbeeld * Hieronder staat de globale indeling van een pagina met een . De attributen in de tags zijn weggelaten. <TITLE> Paginatitel

23


Het komt bijna niet meer voor dat frames niet ondersteund worden. De inhoud van de frames definiëren.

Attribuut

Resultaat

SRC="bestand.html"

de locatie van het html-bestand dat in het frame moet komen

NAME="naam"

de naam van het frame. Naar deze naam moet je verwijzen als je vanuit een ander frame de inhoud van dit frame wil veranderen (zie ook bij TARGET )

SCROLLING="auto"

aangeven of er altijd ( ="yes" ), nooit ( ="no" ) of alleen als het nodig is ( ="auto" ) scrollbalken moeten verschijnen

NORESIZE

als je dit toevoegt kan de bezoeker het frame niet van grootte veranderen

MARGINHEIGHT=getal de afstand tussen het frame en de inhoud van het frame (boven en onder) MARGINWIDTH=getal de afstand tussen het frame en de inhoud van het frame (links en rechts)

Tips

* Voor helemaal onzichtbare frames (in zowel Netscape als Internet Explorer) kan je het volgende voorbeeld gebruiken:

Microsoft Internet Explorer laat standaard een randje van 1 pixel over tussen de rand en de inhoud van een pagina. Netscape Navigator hanteert een grotere rand (ongeveer 5 pixels). Als je bij een frame MARGINWIDTH=1 MARGINHEIGHT=1 toevoegt, laat Netscape Navigator ook maar een randje van 1 pixel over, met als gevolg dat je pagina er in Internet Explorer en in Netscape hetzelfde uitziet! Dit is heel handig als je bijvoorbeeld een afbeelding op een exacte positie boven een achtergrondafbeelding wil plaatsen.

24


’tekst’ wordt getoond als de browser geen frames ondersteunt. Dit kan een melding zijn dat deze pagina's frames gebruiken en een link naar de pagina zonder frames. Er kan dan nog een en toegevoegd worden (zie het voorbeeld). Einde van de definitie van de frames.

TARGET="naam" TARGET is een extra attribuut voor een link . Dit attribuut geeft aan in welk frame de link geladen moet worden als die aangeklikt wordt. Er zijn ook speciale 'targets': TARGET="framenaam" de link wordt getoond in het frame met de naam "naam" TARGET="_top"

de link wordt getoond op het hele scherm (alle frames worden gewist)

TARGET="_self"

de link wordt getoond in het frame waar de link staat

TARGET="_parent"

de link wordt getoond met frames van vorige (bij meerder frames in elkaar)

TARGET="_blank" de link wordt getoond in een nieuw venster zonder naam Als de framenaam niet bestaat wordt er een nieuw venster van de browser gestart en wordt de link daarin getoond. Dat venster krijgt dan de naam die achter de TARGET is opgegeven. Dit alles is natuurlijk maar het topje van de ijsberg die HTML heet. Er is ontzettend veel meer. Voor de geïnteresseerden is er genoeg over te vinden in de boekhandel en/of op het internet. Een lijstje van de betere HTML editors:

1st Page 2000 (freeware) HTML kit (freeware) Ace HTML (freeware en professionele versie) Dreamweaver (professioneel van Macromedia, niet goedkoop) Frontpage (onderdeel van Microsoft Office)

25


9.

Slotwoord

26


Evaluatie Tot slot mijn bevindingen over het maken van een website voor een school. Ik heb in het verleden al verschillende websites gemaakt, maar nog nooit voor een serieuze “opdrachtgever”. Dit maakt toch wel enig verschil. Bijvoorbeeld als er een nieuwsbrief uitkomt voor een bepaalde datum zal die dan ook op de site moeten staan. Terwijl je met een site van jezelf natuurlijk veel minder verplichtingen hebt. Ook moest ik hier meer rekening houden met de uitstraling van de school. Daarom heb ik bijvoorbeeld dit logo geplaatst omdat het St. Antonius een katholieke school is.

Je hebt ook te maken met de verschillende smaken van verschillende mensen. Ik heb hier tot nu toe altijd de gulden middenweg in kunnen vinden. Niet dat dit vaak nodig was overigens. Ook heb je direct contact met de bezoekers van de site. Als je de ene dag iets gemaakt hebt krijg je vrijwel meteen de volgende dag al feedback. Dit is tot nu toe positief, dus dan is het ook wel leuk. Ik heb bijna de volledige vrijheid gekregen van de school voor het ontwerp en het grootste deel van de inhoud. Af en toe werd er achteraf geëvalueerd. Meestal kwamen hier enkele aanvullingen of wensen uit voort, die ik dan meenam in de verdere uitwerking van de schoolsite.

Conclusie: Ik heb met veel plezier aan deze opdracht gewerkt, en hoop natuurlijk dat ik in de toekomst ook de website van basisschool St. Antonius mag blijven beheren. Een website is natuurlijk nooit af en is onderhevig aan voortdurende veranderingen van de inhoud. En waarschijnlijk wordt af en toe ook de opmaak wel aangepast. Normaal gesproken zou er iemand vanuit het opleidingsinstituut komen om de eindopdracht te beoordelen. Dit is door omstandigheden niet gebeurd. Jammer, misschien waren hier nog interessante dingen uit voortgekomen. Wat mijzelf betreft is de website en daarmee de eindopdracht, goed gelukt. En wat ik aan geluiden op school van de directeur, leraren en ouders opvang, zijn zij het daarmee eens. Ik heb veel plezier gehad tijdens de opleiding, die met deze laatste opdracht ook ten einde is. Ik hoop dat ik de opgedane kennis en ervaring mee kan nemen in een toekomstige baan als ict onderwijsassistent. Dit verslag is ook te lezen op mijn portfolio (Onder opdrachten/verslag van de eindopdracht.)

27

Verslag van de eindopdracht. Een website voor de school

Recommend Documents