Creëer je eigen website in Weebly!

Transcriptie

1 Creëer je eigen website in Weebly! Hoeveel websites heb jij al in je leven bezocht? Kan je ze niet meer tellen? Tuurlijk niet, er zijn ontelbaar veel websites te vinden op het internet voor ieder wat wils. Vandaag is de dag dat jij aan de enorme hoeveelheid websites op het web er eentje toevoegt, namelijk je eigen webpagina. Dankzij de gratis website Weebly is je eigen website maken kinderspel, geen moeilijk codeertaal, geen ingewikkelde handelingen maar gewoon een super handige en leuke manier van vorm geven aan je website. Klaar om een webdesigner te worden? Stap 1 : Het aanmaken van je webdomein. Elke website heeft zijn eigen domein. Je moet de URL (voorbeeld: van de website in de adresbalk ingeven en dan verschijnt de website voor je neus! Om een adres aan te maken: - Surf je eerst naar - Op de beginpagina van de website kan je onmiddellijk je gegevens invullen om een account aan te maken (dat is verplicht) Type hier je zelfgekozen wachtwoord Als je klaar bent druk je op Sign Up. It s free! - Hierna moet je een captcha ingeven om aan te tonen dat je een echte mens bent en geen computer die geprogrammeerd is om valse websites aan te maken. Type gewoon de bovenstaande tekst over in de balk eronder. And Mondingu Als je klaar bent druk je op Ok, laten we beginnen!

2 Als alles volgens plan verloopt dan zou je nu een welkom bericht krijgen waar je je titel voor je website kan kiezen. Dit ziet er zo uit: - Allereerst kies je een titel, die eigenlijk een beetje je site samenvat. Op de opdrachtenblad zien jullie dat dit een website over jouw favoriete muziekgroep, zanger/zangeres of film moet gaan dus maak een keuze. - Dan kan je bij Type site zeggen wat voor type jouw website is, is het een informatieve website, is het een website voor een bedrijf... Hier kiezen wij voor Personal (een persoonlijke site) De verschillende mogelijkheden met uitleg à Persoonlijke website. à Website voor een bedrijf à Website van een groep of organisatie zoals vb. Broederlijk delen à Educatieve website over scholen à Website over trouwen, met trouwfoto s... à Portfolio, een website waar jij uitlegt wie je bent en waar je je werk kan laten zien aan mensen à Andere, komt jouw type website niet overeen met één van de bovenstaande, dan kies je Other. - Als alles ingevuld en gekozen is klik je op - Nu moet je effectief je url kiezen die mensen in de adresbalk moeten ingeven om jouw website te bezoeken, net zoals jij juist gedaan hebt bij Weebly. Weebly biedt een gratis webadres aan waarvoor jij niets speciaals moet doen. Als compensatie hiervoor komt in je webadres.weebly bij om te laten zien dat het een website gemaakt in Weebly is (=reclame). Je hebt ook de mogelijkheid om een webadres te kopen of er één te gebruiken dat je al hebt. Wij kiezen voor de eerste optie. Is de naam die je in gedachte had gekozen, dan krijg je rechts het rode kruis met bezet, verzin een andere titel. Vb. Mijn eerste keuze was ladygaga.weebly.com maar dat is jammer genoeg bezet dus koos ik voor superladygaga.weebly.com wat wel beschikbaar is. - Als alles ingevuld en gekozen is klik je op

3 Stap 2 : Aan de slag! Nu het administratieve eindelijk achter de rug is kunnen we aan de slag met het creëren van onze webpagina. Hoe ziet Weebly er nu uit? - Het rode kader is de werkbalk. Hier ga je eigenlijk alle elementen die jij op je website wilt kiezen. Wil je bijvoorbeeld een foto met tekst dan ga je naar elementen en kies je voor paragraaf met foto. Hierna sleep je dat element gewoon naar de plaats waar jij wilt dit element wilt. Je kan hier ook extra pagina s invoegen en beheerders kiezen die mee kunnen bouwen aan je website. Maar meer daarover in de volgende stappen - In het groene kader zien we de lay-out van je pagina dus hoe je pagina eruit gaat zien. Op dit moment is het nog vrij leeg en vind ik het thema ook nog niet zo passen. Hoe we dit veranderen komt in de volgende stappen.

4 2.1 : Een thema kiezen. Een thema kiezen dat kennen jullie wel als je aan PowerPoint denkt, dan weet je dat je daar ook een ruime selectie had aan thema s waar je uit kon kiezen. Als je in je werkblad op Design klikt krijg je een aantal van de beschikbare thema s. - Het groene kader is hier het submenu, waar je 3 keuzes kunt maken. We zitten nu in de favorieten thema s. Dat wil zeggen dat dit de meest gebruikte thema s zijn. Je kan ze gewoon aanklikken en automatisch zal ook je website van thema veranderen. Maak je geen zorgen over de foto die er standaard instaat, die kunnen we later wijzigen. Hier heb je ook designopties die je eigenlijk het lettertype en lettergrootte van de tekst laat aanpassen voor de titel, het menu, de links en de tekst in de website zelf. Als laatste heb je alle thema s waar je uit de categorieën kunt kiezen en je alle thema s kan zien. - Het rode kader verandert afhankelijk wat je in het submenu hebt gekozen: - Favorieten, je kan de thema s gewoon aanklikken en dan verandert je website automatisch. - Designopties, het lettertype, lettergrootte en kleur van de tekst laat aanpassen voor de titel, het menu, de links en de tekst in de website zelf. - Alle thema s, een lijst met alle thema s die Weebly te bieden heeft, gerangschikt per categorie. Hier kan je door de verschillende pagina s navigeren. Hier kies je een categorie. Als je de categorie van bijvoorbeeld business neemt dan zullen alle thema s een zakelijk karakter hebben.

5 2.1.1: Gekozen thema aanpassen. Ik koos voor een leuk en licht thema. Nu zien jullie ook dat daar een afbeelding staat die eigenlijk totaal niks te maken heeft met mijn gekozen onderwerp Lady Gaga. Deze afbeelding is een header en gaat op elke pagina terugkomen dus het is belangrijk dat we deze goed opmaken. Als je met de muis over de afbeelding gaat verschijnt er in rechterbovenhoek deze knop: Als je op deze knop klikt, kan je de afbeelding op je webpagina wijzigen. Als je hierop klikt dan krijg je onderstaand scherm: Het eerst wat we zien zijn de grepen rond de foto. Deze herkennen jullie wel van Word waar je de afbeelding mee kan vergroten, verkleinen en verplaatsen. Hiernaast zien jullie in de rechterbovenhoek een kruis staan. Klik hierop om deze afbeelding te verwijderen want wij gaan een nieuwe afbeelding invoegen.

6 In het rode kader zien we een aantal knoppen die hieronder worden besproken: Als je hierop klikt dan kan je een extra foto in de header zetten. Dit kan je gebruiken om twee foto s naast elkaar te zetten als je niet zo een brede foto hebt. à Een foto toevoegen wordt hier besproken deze techniek komt nog enkele keren terug en dan wordt er altijd naar hier verwezen. Als je op afbeelding toevoegen klikt krijg je dit venster: In het rode kader zien we dat we 4 mogelijkheden hebben om een afbeelding in te voegen. Nu het makkelijkste is enkel de eerste optie te gebruiken en die ga ik ook enkel bespreken. Een afbeelding invoegen werkt net hetzelfde als bij andere programma's. Je klikt op de groene balk en je krijgt een pop-up waar je door je mappenstructuur kan navigeren, ga naar de gewenste map waar de foto zich in begeeft (het beste is één map waar alle foto s zich in bevinden) en klik dan op ok. De foto zal even laden en verschijnt dan op je beeldscherm. Als je hierop klikt dan kan je bij je foto ook nog wat tekst toevoegen. Je krijgt dan op de foto een kader waar sample text in staat, deze gewoon selecteren, verwijderen en de gewenste tekst invoegen. Als je voor add text koos komt er in je werkbalk dit te staan. Hier kan je het lettertype, grote en of de tekst in het vet of cursief moet staan wijzigen. De 4 T ernaast zijn effecten voor de tekst. - Color : verander de kleur - Shadow : schaduw aan je tekst geven (gebruik de schuifbalk) - Glow : laat je tekst oplichten (vb. Op donkere achtergronden, gebruik de schuifbalk en kies een kleur) - Opacity : de zichtbaarheid van de tekst. (gebruik de schuifbalk)

7 Crop is beter bekend als een afbeelding bijsnijden. Ongewenste stukken die je niet in een afbeelding wilt kan je hier eraf snijden. Net zoals bij de grepen die je krijgt om te schalen kan je hier stukken van de foto afsnijden. à Als je klaar bent druk je op Rotate of een afbeelding roteren is simpel, als je op deze knop klikt, komt er in je werkbalk onderstaande afbeelding te zien. à Als je klaar bent druk je op Met de schuifbalk kan je de afbeeldingen gewoon ronddraaien naar links of naar rechts en met de knoppen vertical en horizontal spiegel je de afbeelding rond de x of y as. Opacity is zichtbaarheid van de afbeeldingen. Om de afbeelding een beetje of helemaal doorzichtig te maken gebruik je de schuifbalk die je in de werkbalk krijgt als je deze functie aanklikt. à Als je klaar bent druk je op Fade of vervaag is bijna net hetzelfde als opacity, het enige verschil is dat je nu niet heel de afbeelding doorzichtig maakt, maar een stuk ervan laat vervagen in een richting. Dit is moeilijk uit te leggen en heel makkelijk te begrijpen, probeer het maar is. à Als je klaar bent druk je op Effect is een effect aan de foto toevoegen. Je kan de afbeelding in het zwart/wit, normaal of ouderwets zetten bij colouring in de werkbalk. Bij edges (=randen) kan je 3 verschillende soorten randen kiezen. à Als je klaar bent druk je op

8 Ziezo, als je wat hebt gespeeld met de knoppen dan klik je in de werkbalk rechtsboven op save. Save image to: Hier kan je kiezen of je deze bewerking toepast op enkel deze pagina (only this page), alle pagina s (all pages) of alleen de geselecteerde pagina s (= only selected pages...). Wij kiezen voor Only this page omdat wij nog maar één pagina hebben. Revert to original = alles ongedaan maken en terug naar de originelen afbeelding gaan Ziezo, ik laat jullie alvast zien wat ik ervan heb gemaakt, ik hoop dat jullie iets leuks hebben gemaakt. Zien jullie ook linksboven de titel lady Gaga? Deze kan je ook nog aanpassen, of zelf veranderen in een logo of verwijderen door er met je muis op te klikken: Off : Deze tekst verbergen Text : de text laten staan (klik erop om deze aan te passen) Logo : upload een logo om in de plaats te zetten van de tekst. Een logo uploaden is hetzelfde als een afbeelding en wordt in stap 2.1 besproken

9 Stap 3 : Inhoud toevoegen Het wordt tijd dat we eens wat inhoud aan onze pagina gaan toevoegen. Kies in de werkbalk voor elementen. Net zoals bij design zien we hier ook weer in het rode kader mogelijkheden (4) en dan afhankelijk van welke mogelijkheid er is geselecteerd veranderd onze werkbalk in het groene kader. Alles bij elementen werkt met slepen. Je speelt het gewenste element dat je wilt naar de gewenste plaats in je webpagina. Sleep nu Paragraaf met foto onder je header afbeelding. Als alles vlot is verlopen moet je dit zien. Dit bewerken is super simpel. Je klikt gewoon in de tekst om de tekst te veranderen en om de afbeelding aan te passen en te bewerken klik je op het blauwe vierkant. Dan kan je een foto uploaden (=zie stap 2.1.1) en in verhouding slepen. Als je klaar bent klikt je op ok en dan is de afbeelding geplaatst. Als je in de tekst klikt komt deze werkbalk erbij. Herkennen jullie alle symbolen? Tuurlijk wel, het lijkt heel sterk op Word. Tekst kan je Vet, cursief en onderlijnen. De A staat voor de tekst in kleur te zetten en de + en staat voor het lettertype groter of kleiner te maken. De Tx gebruik je de kleur en stijl van de tekst terug naar standaard zetten, vergeet niet eerst je tekst te selecteren.

10 Met dit symbool kan je een link maken naar een andere website of naar een andere pagina binnen je website. Selecteer eerst de tekst die je als link wilt gebruiken en klik daarna op deze knop. Dan krijg je dit te zien: Type hier een adres van een webpagina in die niets te maken heeft met jouw website (bv. Kies hier (indien je meerdere pagina s hebt) een pagina waar je de link binnen jouw website wilt laten linken. Hier link je naar een afbeelding of foto die binnen je website te vinden is. Hier link je naar een adres (een programma om te mailen zal dan openen als je hier op klikt) à Klik op opslaan als je klaar bent. Met deze knop kan je gerangschikte/ongerangschikte lijsten maken zoals in Word. Met deze knop ga je een stap terug of een stap vooruit als je je vergist hebt.

11 Ziezo, nu weten jullie al hoe jullie een element moeten invoegen en bewerken. In de volgende stap komen er sommige elementen niet aan bod omdat deze zo hard lijken op de paragraaf met foto. Ik zal jullie ondertussen eens laten zien wat ik tot hiertoe heb. Ziet er al goed uit vind ik! Ik hoop dat jullie tot hiertoe alles begrijpen en geen problemen hebben ondervonden. Stap 3.1 : basis elementen Goed we gaan nu kijken hoe we elementen aan onze pagina moeten toevoegen. We beginnen met de basiselementen in de werkbalk. Alle elementen die in je website staan kan je ook nog eens op een andere plaats zetten door ze gewoon te slepen boven of onder een gewenst object. Tip: vergeet de sleeptechniek niet. Zien jullie op deze knop ook rechtsonder pro staan? Dat betekend dat we deze functie enkel kunnen gebruiken als we een pro versie kopen van Weebly. Dit is jammer want het is altijd leuk om een video toe te voegen maar er zijn andere manier zoals YouTube die we zo meteen gaan bespreken. Een contactformulier is een handige tool om mensen vragen te laten stellen en die kunnen ze dan automatisch opsturen naar jouw adres. Op de volgende pagina gaan we eens kijken hoe we zo een formulier moeten maken.

12 Sleep het element in je pagina en je krijgt een standaard formulier te zien De tekst kan je bewerken door erop te klikken dat weten jullie. Maar er zijn een paar opties die je kan veranderen. Omdat deze bundel al enorm uitgebreid is en omdat deze functies al gevorderd zijn geef ik jullie ze kort mee en daar kunnen jullie als je dat wilt zelfs er eens uitproberen. In de werkbalk kunnen jullie extra velden bijzetten zoals optieknoppen of meerkeuzevakjes. Standaard is dit een goed formulier maar voor degene die willen kan je er heel wat meer mee doen. Met dit element verdeel je je website in meerdere kolommen zoals je dat ook kan doen in Word met tekst en tabellen. Je kiest het aantal kolommen door met dit extra werkbalkje het aantal kolommen te kiezen. Hier kan je gewoon op dezelfde wijze terug elementen slepen en de gewenste kolommen. Aangepast HTML is voor mensen die webdesign hebben gestudeerd en die heel wat afweten van hoe je en website moet coderen. Ik stel voor dat we deze functie met rust laten. Heb je ooit een super populaire website dan kan je met deze functie van Google reclame maken op je website waar je dan een klein bedrag voor krijgt. Jammer genoeg komt deze functie niet voor ons in aanmerking omdat we pas begonnen zijn met onze website... Maar je weet nooit als je website heel populair is, dan is dit de manier om een centje te verdienen.

13 Stap 3.2 : Multimedia elementen Multimedia heeft te maken met muziek, video, foto s... Hier zijn ook een paar functies voor de proversie van Weebly maar gelukkige zijn de leukste gratis! Een fotogalerij is meestal een aparte pagina waar er een heleboel foto s op staan. Bezoekers kunnen een miniatuur van de foto aanklikken en dan zal deze vergroten tot zijn originele formaat. Een fotogalerij maken is hetzelfde als afbeeldingen uploaden, alleen selecteer je hier meer afbeeldingen en gaat Weebly automatisch ze in een miniatuur zetten. Dankzij deze extra werkbalk kan je ook nog eens kiezen hoeveel kolommen je wilt van afbeeldingen, hoe groot de spatie moet zijn tussen de afbeeldingen, of er een rand te zien is en of je wilt bijsnijden. Een diapresentatie is een slideshow waar afbeeldingen automatisch veranderen na verloop van een paar seconden. Net zoals in de fotogalerie moet je een reeks afbeeldingen selecteren die je wilt laten zien maar eerst moet je een stramien kiezen van hoe je diapresentatie eruit ziet Eén van deze mogelijkheden kan je kiezen. Als je je keuze hebt gemaakt klik je op Continue. Klik op deze knop om afbeeldingen te selecteren die je in je diavoorstelling wilt.

14 Hierna kom je op dit venster. Hier kan je je foto s verschuiven in de volgorde waarin jij wilt dat de foto s tevoorschijn komen. Met de knop Add Photo kan je nog extra foto s toevoegen en als je op het vuilbakje klikt op de afbeelding dan verwijder je deze. Ben je klaar? Dan klik je op Save. Dankzij deze extra werkbalk kan je nog met de oranje knop terug naar het bovenstaande venster. Met nav Stijl kan je zeggen dat ze ook miniaturen van de afbeeldingen bij de slideshow moeten zetten waar bezoeker op kunnen klikken. Bij nav locatie zeg je waar die miniaturen zich moeten uitlijnen: boven, onder, links of rechts. Bij overgangsstijl zeg je hoe de afbeeldingen moeten overgaan, bv. Dat ze in elkaar vervagen of dat ze elkaar eruit schuiven. Autoplay staat aan of uit en dat wil zeggen dat als het aan staat de diavoorstelling automatisch begint te spelen als de website wordt geopend, en uit wil zeggen dat de bezoeker eerst op start moet klikken voor de diavoorstelling begint. Een bestand kan van alles zijn, denk aan een Word-bestand of een muziek bestand. Als je dit toevoegt aan je website hebben bezoekers de mogelijkheid om dit bestand te downloaden. Een bestand uploaden is hetzelfde als een afbeeldingen upload en maakt gebruik van de extra werkbalk. maar Een Flashbestand is een bestand dat jullie wel zullen herkennen. Een flash-bestand kan bijvoorbeeld een web spelletje zijn dat bezoekers dan op jullie site kunnen spelen. Omdat je hier enorm veel met kan en omdat dit al gevorderd is is het kort aangehaald verder ga ik er niet op in.

15 Google-kaarten kan je ook toevoegen aan een website. Als je dit erin sleept krijg je een extra werkbalk. Hier kan je je adres ingeven, hoe breed en hoog de kaart moet zijn, waar deze gelijnd staat, of er een pijltje op je adres komt en hoe hard hij moet inzoomen. Dit is heel leuk probeer het zeker eens uit! Weet je nog dat we geen filmpjes konden toevoegen? Dit gaat wel via het YouTubeelement. Sleep het naar de gewenste plaats en er komt een standaard filmpje tevoorschijn. Klik hierop en een extra werkbalk verschijnt. Hier kan je de URL van de video in plakken. Dat is het adres dat je vindt als je het juiste YouTube filmpje aan het kijken bent vind je dat adres terug in de URL-balk. (vb. Deze URL plak je daar. Dan kan je kiezen welk formaat het filmpje moet hebben en hoe het filmpje moet uitgelijnd zijn. Ziezo, je kan nu zonder problemen je eerste pagina naar hartenlust maken. Er zijn nog 2 andere elementen die ik niet besproken heb maar deze zijn vaak betalend en gevorderd dus helemaal niet nodig en vaak ook saai. Werk nu aan je pagina en ga naar de volgende stap! Hier is alvast mijn voorbeeld:

16 Stap 4 : Een extra pagina aanmaken Nu een website bestaat vaak uit meerder pagina s. We gaan in deze stap leren hoe we een nieuwe pagina aanmaken. In je werkbalk vind je Pagina s terug als je hierop klik dan kom je hier uit : Hier spreken de knoppen voor zich. Hier kan je met add page een nieuwe pagina aanmaken. Met add blog kan je een blog aanmaken waarin je dagdagelijkse dingen kan vertellen. Je kan rechtsboven de pagina bewerken. Als je meerdere pagina s hebt klik je hierop om deze met elementen te bewerken! Je kan deze pagina ook kopiëren of verwijderen. Een Paginanaam is belangrijk want deze komt in je menu te staan. Zorg dat dit maar één woord is dat heel duidelijk omschrijft waarover je pagina gaat. Je kan deze pagina ook verbergen zodat alleen jij weet dat die bestaat.

17 Hier staan al je pagina s die je hebt aangemaakt. De volgorde waarin ze hier staan, zo staan ze ook in je menu. Door ze te verslepen naar boven of onder wijzig je de volgorde. Klaar met de instellingen? Vergeet dan zeker niet de instellingen te bewaren.

18 Stap 5 : Beheerders van je website Een website bestaat vaak uit meerdere mensen die informatie erop kunnen zetten. Sommige mensen hebben meer mogelijkheden als andere zo kunnen sommige mensen enkel tekst toevoegen en sommige kunnen zelfs het thema van de website veranderen. Dit alles hangt af van de positie je hebt binnen de website. Om dit van dichterbij te bekijken klikken jullie op Editors in de werkbalk. Op dit ogenblik ben jij nog maar alleen als beheerder van je website. Wilt je iemand toevoegen dan klik je op Editors toevoegen :, daarna krijg je dit venster. Hier zien we dat we beheerders kunnen toevoegen aan de hand van hun adres. De verschillende functies zijn beheerder (deze kan alles veranderen), auteur (kan enkel delen aanpassen die jij als beheerder hebt gekozen) en mensen die enkel toegang hebben tot het dashboard maar niet kunnen aanpassen. Jammer genoeg zijn de 2 laatste functie niet gratis en kan je enkel mensen beheerder maken. Doe dit door de van je buurman in te vullen en hem een mailtje te sturen met een uitnodiging om lid te worden van je website.

19 Stap 6 : instellingen wijzigen Als je op instellingen klikt in de werkbalk heb je nog de mogelijkheid om het domein van je website en de titel ervan te veranderen. Omdat dit heel eenvoudig is en de rest van de functies niet gratis zijn ga ik hier niet dieper op in. Stap 7 : Publiceer. Stap 7 en tevens de laatste stap! Is je website volledig online zetten. In de werkbalk vind je de rechtsboven de knop : Klik hierop als je zeker bent dat je website in orde is en dan krijg je dit venster. Je website staat nu officieel online en als je nu naar je website surft dan zal die ook verschijnen. Super gedaan, je hebt zojuist je eerste website gemaakt die voor iedereen van België tot China beschikbaar is. Ik stel voor dat je deze bundel goed bewaard moest het nog eens beginnen te kriebelen om een website te maken of je wilt meteen terug aan de slag dan vind je hierin de belangrijkste stappen die je moet ondernemen om je website tot een goed einde te brengen Veel succes met je website,