Het ontwerpen van een website

Transcriptie

1 Het ontwerpen van een website Dhr. Goeminne M. Instituut Anneessens- Funck

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 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 : Type site: Categorie: Oefening GiP- Kantoortechnieken Onderwijs Klassenproject 2

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. 3

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: Geef al paragraaf in: Instituut Anneessens- Funck 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. 4

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 5

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. 6

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. 7

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. 8

9 Stap 10: Header veranderen 1) Surf naar de website: 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. 9

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 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. 10

11 Opdracht les 22 januari 2013 Opdracht 1: (Totaal: /10) a) Maak een subpagina 7KG (kleine header) aan bij het tabblad Lessentabellen. b) Deze header is voorzien van de header van het school. c) Voeg een paragraaf met titel in op deze pagina. /2 /1 Titel: Paragraaf: 7KG 3de Leerjaar 3de graad BSO: Kantooradministratie en gegevensbeheer: 7 KG d) Voeg 2 kolommen in. Dit doe je met het element Meervoudige kolommen. /2 Als deze kolom gemaakt is, moet je het element paragraaf in de linker en rechterkolom slepen. e) In deze kolommen komt het volgende: /2 Engels Frans Lichamelijke opvoeding Maatschappelijke vorming Nederlands Bedrijfsbeheer Toegepaste Economie Kantoortechnieken Stage Kantoortechnieken Godsdienst/ Nt. Confess. Zedenleer f) Klik op Publiceren. /3 11

12 Opdracht 2: (Totaal: /10) a) Ga naar de subpagina Kantoor bij het tabblad Studierichtingen. b) Deze header is voorzien van de kleine header van het school. /2 /1 c) Voeg een paragraaf met foto in op deze pagina. Foto: Paragraaf: Kies zelf een foto die te maken heeft met de richting kantoor. Dit gedeelte kopieer je van de site van de school. Dus het gedeelte onder KANTOOR. Let op de layout bij knip- en plakwerk. /2 d) Voeg nu het element KNOP toe onder de paragraaf. e) Druk op de knop: /1 Verander de naam in lessentabel 7KG Kies voor een andere stijl. /2 12

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. 13

14 Opdracht 4: (Totaal: /10) a) Doe hetzelfde als in opdracht 1 en 2 maar nu voor een andere richting. De richting mag je zelf kiezen. Opdracht 3: (Totaal: /5) a) Maak een nieuwe pagina aan Multimedia. (Dit hoort een tabblad te zijn) b) Deze header is voorzien van de kleine header van de school. c) Voeg een paragraaf met titel in op deze pagina. /1 /0,5 Titel: Paragraaf: Activiteiten 7KG. 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. 14

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 15

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. 16