Het ontwerpen van een website - CLW Don Bosco7kg.weebly.com/uploads/1/4/0/4/14045849/het_on... ·...

Dhr. Goeminne M.

I n s t i t u u t A n n e e s s e n s -‐ F u n c k

Het ontwerpen van een website

Naam: Dhr. Goeminne 2012-‐2013

2

Kantoortechnieken

GiP-‐opdracht: Het ontwerpen van een website De leerlingen maken een website over het studentenbedrijf, m.n. IAF-‐Events en MaxiFunEvents voor het vak Kantoortechnieken. De website heeft als doel informatie verzamelen over de uitstappen en kan tegelijk als promotie van de uitstap dienen.

Stap 1: Surf naar www.weebly.com

Stap 2: Schrijf je in met jouw e-‐mail en kies een wachtwoord

Stap 3: Kies een titel voor de website. Hier gaan we kiezen voor : ‘Oefening GiP-‐Kantoortechnieken’ Type site: Onderwijs Categorie: Klassenproject


3

Stap 4: Een webadres kiezen Hierbij gaan we de eerste optie aanvinken, aangezien de andere opties betalend zijn Als domein kies je: opdrachtJOUWNAAM.weebly.com Je website is nu aangemaakt. En nu is het tijd om de website te vullen met inhoud.

Stap 5: De Homepage bewerken Op het scherm waar je nu bent aanbeland kun je de homepage/front page vullen.

Bovenaan het scherm zie je een menu.

Kies ‘Elements’ uit het menu. ‘Elements’ ofwel de bouwstenen waarmee je de pagina kan

vullen. Denk aan tekst, foto’s en video bijvoorbeeld. Elk element kan je na het plaatsen

ook weer verwijderen of bewerken.


4

Hou het simpel. Voeg eerst tekst toe (dus of ‘Paragraph with title’, ‘Paragraph with

picture’ of ‘Paragraph’). Later kun je het mooier maken of andere dingen toevoegen aan

je website.

Toevoegen van een ‘Element’ is heel simpel. Klik op het ‘Element’ en sleep het naar de plek op de pagina waar je het wil hebben. Bewerken van een ‘Element’ is ook simpel. Gewoon op het ‘Element’ op de pagina klikken en je kunt het bewerken. Verwijderen van een ‘Element’ is ook simpel als het sluiten van een Windows venster. Ga met je muiscursor over het ‘Element’ op de pagina en je ziet een venster verschijnen met een een rode cirkel met een kruis. Als je hierop drukt, kun je het ‘Element’ verwijderen.

We gaan als oefening een website maken voor de school. Voeg een paragraph with title toe. Geef de titel de naam: Instituut Anneessens-‐Funck Geef al paragraaf in: Het Instituut Anneessens-‐Funck ligt in de historische

kern van de stad Brussel. Jaren geleden stroomde de Zenne hier langs, nu stromen nog elke dag "Zinnekes" onze schoolpoort binnen.

In alle grootsheid van Brussel proberen wij onze leerlingen in kleine groepen kansen te geven in hun eigen stad. Dit steeds via een objectieve manier van lesgeven, maar toch vermengd met alle geuren …

Deze tekst is terug te vinden op de homepage van de school.


5

Stap 6: Pagina’s aanmaken

Vervolgens maak ik de andere pagina’s door in het menu te klikken op ‘Pages’. Ik klik op ‘Add Page’ en onder ‘Page Name’ kan je dan de naam van de webpagina invullen. Sla de andere opties even over en druk op ‘Save Settings’ om je pagina op te slaan. Je wordt dan gelijk weer teruggestuurd naar het startscherm waar je je homepage hebt gemaakt. Als je nu in het menu klikt op de nieuw aangemaakte pagina, kun je die ook weer vullen met inhoud.

Maak volgende pagina’s aan zodat je het overzicht hieronder verkrijgt.

Klik daarna op ‘Instellingen opslaan’.

Stap 7: Website publiceren Het wordt tijd op jouw website als eens te publiceren, klik daarvoor op de knop rechtsboven jouw pagina ‘Publiceren’


6

Stap 8: De contactpagina Ga naar de contactpagina van jouw website. Sleep het element ‘Contactformulier’ (bij basis) naar jouw pagina.

Druk op ‘Form options’

Geef volgende form name: Oefening JOUW NAAM Controleer of jouw e-‐mail correct is. Confirmation tekst: Bedankt! Uw gegevens zijn verzonden. We gaan het contactformulier uitbreiden met een JA/NEE-‐vraag. Zo vragen we de bezoeker of hij in de toekomst op de hoogte gebracht wil worden over het nieuws in onze school. Daarvoor slepen we volgende knop naar onze pagina.


7

Dan verkrijg je volgende balk:

Als je deze balk selecteert, dan krijg je bovenaan het volgende te zien:

Kies bij titel veld: Wenst u in de toekomst op de hoogte gebracht te

worden over onze school? Klik op veldopties, dan krijg je het volgende:

Verwijder option 3 door op te klikken. Verander de naam van option 1 in ‘JA’. Verander de naam van option 2 in ‘NEE’. DRUK OP ‘SAVE’. Druk op ‘PUBLICEREN’ en surf eens naar jouw website. Probeer eens het contactformulier in te vullen, zodat je kan nagaan of jouw contactformulier werkt.


8

Stap 9: De opmaak van de website Nu is het tijd om je website mooi te maken.

Kies in het menu de optie ‘Design’.

Je hebt de keuze uit verschillende templates (zogenaamde ‘themes’). Elke template heeft zijn eigen uiterlijk. Denk aan lettertypes, layout en plaatjes. Kijk naar het totaal en niet naar de gebruikte plaatjes. Je kan de afbeeldingen immers eenvoudig aanpassen. Net zoals lettertypes e.d. Probeer wat templates uit. Je kan het zo veranderen, dus probeer gerust wat. Kies wat jij het mooiste vindt. Een voorbeeld: Ga naar de homepage van jouw website.


9

Stap 10: Header veranderen 1) Surf naar de website: http://www.anneessens-‐funck.be 2) Neem een screenshot. 3) Bewerk deze screenshot tot je deze header bekomt:

4) Klik in jouw ‘homepage’ op ‘edit image’ 5) Voeg de header toe van ‘Anneessens-‐Funck’. 6) Klik rechtsboven op SAVE en kies voor ‘Save to all pages’.

7) Je zal zien dat de achtergrond wit is. Selecter de achtergrond van de figuur, dan krijg je volgend venster bovenaan. Kies voor ‘transparant’.

8) Of je kan ook kiezen voor een ‘tall header’. Hiervoor klik je op bij de foto.


10

Stap 11: Wegbeschrijving

1) Maak een subpagina ‘Wegbeschrijving’ aan bij de pagina ‘Contact’ Kies voor een ‘kleine header’

2) Vermeld hierbij: Instituut Anneessens-‐Funck Groot Eiland 39 1000 Brussel 3) Sleep het element ‘Googlekaarten’ naar jouw pagina. 4) Klik in jouw ‘homepage’ op ‘edit image’

5) Klik op de Googlekaart en dan verkrijg je deze balk bovenaan:

6) Typ het adres van de school in het vak adres, kies zelf de breedte, hoogte en positie van jouw googlekaart.

7) Klik op publiceren en ga na of dit het resultaat is dat je wilde.


11

Opdracht les 22 januari 2013

Opdracht 1: (Totaal: /10)

a) Maak een subpagina ‘7KG’ (kleine header) aan bij het tabblad ‘Lessentabellen’. /2

b) Deze header is voorzien van de header van het school. /1

c) Voeg een paragraaf met titel in op deze pagina.

Titel: 7KG Paragraaf: 3de Leerjaar 3de graad BSO: Kantooradministratie en

gegevensbeheer: 7 KG

/2

d) Voeg 2 kolommen in. Dit doe je met het element ‘Meervoudige kolommen’.

Als deze kolom gemaakt is, moet je het element ‘paragraaf’ in de linker en rechterkolom slepen.

/2

e) In deze kolommen komt het volgende:

Engels Frans Lichamelijke opvoeding Maatschappelijke vorming Nederlands Bedrijfsbeheer Toegepaste Economie Kantoortechnieken Stage Kantoortechnieken Godsdienst/ Nt. Confess. Zedenleer

2 4 2 2 3 1 1 4 16 2

/3

f) Klik op ‘Publiceren’.


12


a) Ga naar de subpagina ‘Kantoor’ bij het tabblad ‘Studierichtingen’. /2

b) Deze header is voorzien van de kleine header van het school.

/1 c) Voeg een paragraaf met foto in op deze pagina.

Foto: Kies zelf een foto die te maken heeft met de richting

kantoor. Paragraaf: Dit gedeelte kopieer je van de site van de school.

Dus het gedeelte onder KANTOOR. Let op de lay-‐out bij knip-‐en plakwerk. /2

d) Voeg nu het element ‘KNOP’ toe onder de paragraaf.

/1

e) Druk op de knop:

Verander de naam in ‘lessentabel 7KG’ Kies voor een andere stijl. /2


13

f) Klik daarna op link, dan krijg je volgend venster:

Kies ervoor dat de mensen rechtstreeks naar de lessentabel van 7KG kunnen gaan, wanneer zij de pagina van kantoor bezoeken bij studierichtingen.

/2

g) Klik op publiceren.


14


a) Doe hetzelfde als in opdracht 1 en 2 maar nu voor een andere richting. De richting mag je zelf kiezen.


a) Maak een nieuwe pagina aan ‘Multimedia’. (Dit hoort een tabblad te zijn)

/1 b) Deze header is voorzien van de kleine header van de school.

/0,5

c) Voeg een paragraaf met titel in op deze pagina.

Titel: Activiteiten 7KG. Paragraaf: Hieronder vindt u foto’s terug over de activiteiten van

7KG. /1

d) Voeg nu het element ‘FOTOGALERIE’ toe onder de paragraaf.

e) Download 5 verschillende foto’s die te maken hebben met de richting Kantoor

f) Klik op de fotogalerie en upload deze foto’s. /2,5

g) Klik op publiceren.


15

GiP-‐opdracht Het ontwerpen van een website. Individueel maakt u een website over het studentenbedrijf. De beste website wordt dan ook de officiële website. Wat wordt van jullie verwacht? 1) Maak een nieuwe website.

2) Geef deze een naam. (NaamstudentenbedrijfJOUWNAAM)

3) Kies voor een toepasselijke ‘header’.

4) Maak volgende pagina’s aan:

Home Wie zijn we? Activiteiten Diner leerkrachten Kinderactiviteiten Volwassenenactiviteiten Culturele uitstap Oostende Uitstap Luik Multimedia Diner leerkrachten Kinderactiviteiten Volwassenenactiviteiten Culturele uitstap Oostende Uitstap Luik Français English Contact Wegbeschrijving


16

Wat wordt van jullie verwacht? 5) Kies zelf de opmaak van de website.

6) Het logo van het studentenbedrijf moet op iedere pagina aanwezig zijn. Deze

logo’s kan je terugvinden op 7KG.weebly.com

7) Op de pagina ‘CONTACT’ doe je het volgende:

-‐ Voeg een contactformulier in.

-‐ Voeg een extra element toe, waarbij de bezoeker vraagt of hij/zij in de toekomst op de hoogte wil gehouden worden van onze activiteiten.

8) Op de pagina ‘WEGBESCHRIJVING’ voeg je toe:

-‐ De naam van het studentenbedrijf, adres, BTW-‐nummer -‐ Googlekaart (met het juiste adres)

9) Op de pagina ‘Wie zijn we’ doe je het volgende:

-‐ Stel jezelf even kort voor. (min. 5 regels + foto)

10) Op de pagina’s ‘Home, Français, English’:

-‐ Hierover zal je meer te horen krijgen in de lessen Nederlands, Frans en Engels.

11) Op de subpagina ‘Uitstap Luik’ , tabblad ‘Multimedia’ voeg je toe:

-‐ Fotogalerie, met 5 verschillende foto’s over Luik

12) Op de subpagina ‘Culturele Uitstap Oostende’, tabblad ‘Multimedia’ voeg je

toe:

-‐ Fotogalerie, met 5 verschillende foto’s over Oostende.

De moed om zekerheden los te laten is een vereiste voor creativiteit.

Het ontwerpen van een website - CLW Don Bosco7kg.weebly.com/uploads/1/4/0/4/14045849/het_on... ·...

Documents

Transcript of Het ontwerpen van een website - CLW Don Bosco7kg.weebly.com/uploads/1/4/0/4/14045849/het_on... ·...