Updaten van de (klas) webpagina

Updaten van de (klas) webpagina Bij het aanpassen van een webpagina moet je altijd denken in 4 stappen. 1.) Wat moet er op de webpagina komen? (verzamelen van de tekst, foto s, bestanden ) 2.) Plaats de benodigde bestanden naar op server (uploaden (naar Media)). 3.) De pagina/blog aanmaken of aanpassen. 4.) en vooral Controleren!!! INHOUDSOPGAVE ---------------------------------------------------------------------------------------- Blz. 0. Inhoudsopgave 1 1. Inloggen op het administratiesysteem 2 2. Een webpagina/blog aanpassen 3 2.1 Tekst aanpassen 4 2.2 Een beeldje of andere bestanden op de server plaatsen 5 2.3 Een beeldje plaatsen op een webpagina 6 2.4 Linken van andere pagina s en/of bestanden op een webpagina 7 3. Bestanden (foto s) aanpassen met Microsoft Paint 9 4. Een Youtube fimpje plaatsen op een webpagina/blog 12 Tip : Zorg dat de foto s die U wil gebruiken op een gemakkelijk terug te vinden plaats staat, bijvoorbeeld op het bureaublad van de/uw PC. 1/15

1.) Inloggen op het administratiesysteem. Log in op het systeem via de url www.hetopengroene.be/admin of klik op het sleuteltje onderaan de homepagina. -> Gebruik de gebruikersnaam en wachtwoord U heeft gekregen. Gebruikersnaam :. Wachtwoord : (U kan hier uw persoonlijk gebruikersnaam en wachtwoord invullen, zo heb je altijd alles bij de hand in dit bundeltje) 2/15

2.) Een webpagina aanpassen. Ga naar Pagina s Kies de pagina die U wil aanpassen en klik op de naam: Legende : Klikken op de naam = de pagina editeren rood kruisje = de pagina wissen groen vinkje = de pagina bekijken Als je de (klas) pagina of blog niet onmiddellijk ziet staan, dan kan je de groepen openklappen met het groene kruisje. De klasblog van het 1 e Leerjaar zal je pas vinden als je het groene kruisje bij L1 hebt aangeklikt. 3/15

2.1) Tekst aanpassen. Pas aan waar nodig : De webpagina-editor voor de pagina s is gelijkaardig aan Word, dus als je vertrouwd bent met Microsoft Word zal deze webpagina-editor zeer vertrouwd zijn en werkt ongeveer hetzelfde. Tip : Voor het plaatsen van enters en nieuwe lijnen moet je je 1 ding aandachtig zijn : ENTER ALT + ENTER = Nieuwe paragraaf = Nieuwe lijn Opmerking : Plaats nooit veel spaties na elkaar, in HTML (internettaal) bestaat dat niet. Wilt U toch bepaalde onderdelen verder uiteen plaatsen dan moet U met een tabel werken! Het plaatsen van spaties zal resulteren in een foute layout en kan vreemde tekens veroorzaken op uw pagina! Druk op opslaan links onderaan om uw wijzigingen vast te leggen! Controleer uw pagina ALTIJD via de schoolwebsite www.hetopengroene.be 4/15

2.2) Een beeldje of andere bestanden uploaden naar de server. Voordat u uw webpagina, blog of klaswebsite aanpast upload dan altijd eerst alle bestanden die U nodig heeft voor uw webpagina! Als de foto s niet op de server staan kan U de foto niet linken op uw webpagina en kan U dus niet verder. Dus eerst de foto s of bestanden op de server plaatsen, nadien plaatsen. Ga naar Media (menubalk bovenaan): Gebruik de knop Bladeren om het bestand aan te geven die U wil op de server plaatsen (beelden enkel.gif en.jpg maar U kan ook word of Excel bestanden uploaden!) Druk op Upload bestanden Dit kan even duren, afhankelijk van de grootte van het bestand, geef het wat tijd. Als de upload gedaan is komt het bestand bovenaan te staan. 5/15

2.3) Een beeldje (foto) plaatsen op de webpagina. Om nu de bestanden in de webpagina te plaatsen gaat U terug naar Pagina s, kiest U de pagina die U wil aanpassen. Klik op het icoontje Afbeeldingen invoegen/wijzigen. Ziet eruit als een icoontje met een bergje en een zonnetje. (= knopje 2 e rij 4 e van rechts) Klik op bladeren op server Selecteer de foto die u wenst te gebruiken, je krijgt een voorbeeld te zien en druk OK. De foto ziet u nu verschrijnen op de webpagina of blog. Nu moet U eventueel wel nog de foto aanpassen aan de lay-out. Dit doe je op dezelfde manier als in Word. U neemt met de muis het vierkantje op een van de hoeken vast en sleept het naar binnen. Voor het linken van andere bestanden zoals pdf s, word en Excel documenten zie puntje 2.4. Deze moeten altijd als een link geplaatst worden. 6/15

2.4) Linken van andere pagina s en/of bestanden op de webpagina. Voor het linken van pagina s moet je eerst een stuk tekst of een woord hebben, pas dan kan je een link plaatsen. Selecteer een stuk tekst of een woord. Hier heb je twee mogelijkheden : 1. Een interne link (een andere pagina op onze website) 2. Een externe link (een link naar een andere website) Druk op het icoontje Insert Web Link ziet eruit als een ketting en staat naast Insert Image. 7/15

Nu heb je 3 mogelijkheden : A.) U linkt een pagina van de website B.) U linkt een bestand C.) U linkt naar een externe url U kiest een van de 3 mogelijkheden en drukt ok proficiat de link is gemaakt. 8/15

3.) Verkleinen van foto s Om het uploaden te versnellen maar vooral uw werk gemakkelijker te maken tijdens het aanpassen van uw pagina s is het aan te raden uw foto s VOOR het UPLOADEN te verkleinen naar een meer toepasbaar formaat. Klik rechts op de foto die U wil bewerken, en selecteer Bewerken. Microsoft Paint zal openen en hierin kan U gemakkelijk de foto s verkleinen. 9/15

Selecteer onder de menu Afbeelding > Uitrekken/hellen (Ctrl + W). Nu krijgt U een menu om de foto te gaan verkleinen/vergroten/hellen. Verklein de foto procentueel dus als je horizontaal 40% en verticaal 40% neemt zal de foto 40% kleiner worden. Ik raad U aan niet te snel of te grote getallen te nemen. Maak hem liever in een paar stappen kleiner. Als je teveel hebt geselecteerd, gebruik Bewerken > Ongedaan maken (Ctrl + Z) om een stap terug te keren. 10/15

Uw foto is nu een pak kleiner, en zal dus gemakkelijker zijn om mee te werken, en zal een pak sneller op de server staan. Sla de foto op om uw verkleining door te voeren op de effectieve foto. 11/15

4.) Plaatsen van Youtube filmpjes op de website. Ik zal in dit onderdeel toelichten hoe je een Youtube filmpje kan toevoegen aan een pagina of blog op de website. Het plaatsen van een youtube filmpje gebeurt in 2 stappen : 1.) Ophalen van de (embed) code vanop de youtube site. 2.) Plaatsen van de code in de betreffende pagina. 1. Ophalen code Om een filmpje toe te voegen aan de website gaan we dit doen met de embed HTML (*) codes. Het leuke aan Youtube is dat zij een handig tool op hun site hebben geplaatst om de embed-code te opmaken met enkele muisclicks met enkele door de gebruiker opgegeven specificaties. Ga naar Youtube om de code van het filmpje op te halen, rechts onderaan het grijze vak zie je twee regels staan die je kan copieren voor gebruik. Dit zijn URL en embed, het is de embed-code we gaan gebruiken. Wil je de standaard instellingen gebruiken dan kan je de code gewoon zo copieren, wil je deze aanpassen naar eigen smaak dan kan je op het tandwieltje drukken, waarbij de extra opties zichtbaar worden. Als je aanpassingen doet dan wordt de code automatisch aangepast. De embed code ziet er zo uit : <object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/h8ec7_j0ojc&hl=en_us&fs=1&color1=0x3a3a3a&color2 =0x999999"></param><param name="allowfullscreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/h8ec7_j0ojc&hl=en_us&fs=1&color1=0x3a3a3a&color2=0 x999999" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object> 12/15

2. Plaatsen van de code in de pagina. Nu we de code hebben kunnen we het filmpje plaatsen. Ga naar de pagina waar je het filmpje wil plaatsen en open de pagina zoals je die anders zou openen om een andere aanpassing te doen. (*) Gezien we met een embed-code werken dien je hier eenmalig over te schakelen naar internettaal (HTML). Zelf zal je geen code moeten schrijven maar enkel de code die we van Youtube haalden plakken (pasten) op de juiste plaats. Om naar de code-versie van de pagina die je wil aanpassen te gaan druk op het knopje CODE, deze knop kan je vinden linksboven. Dan schakelen we over naar HTML. Mensen die goed kijken zullen opmerken dat de tekst van op hun pagina misschien niet zo duidelijk terugkomt aangevuld met andere toegevoegde codes. Deze codes geven de opdracht aan de internet browser (vb. Internet Explorer, Firefox) van de persoon die de webpagina bekijkt wat er moet gebeuren met de teksten, foto s en of andere onderdelen op de website. Om de integratie van een filmpje mogelijk te maken moet je enkele basisbegrippen kennen. Tags (HTML code) is de basis waarmee een webpagina kan opgemaakt wordt. Ze komen altijd tussen <> te staan bijvoorbeeld <br> en <p>. 1 basisregel moet je kennen om het plaatsen van een Youtube filmpje tot een goed einde te brengen en dat is dat ALS je een HTML-tag opent met < je deze altijd moet afsluiten met >. Dus als je de code plaatst moet dit altijd NA een > zijn. 13/15

Een truckje om de juiste plaats te lokaliseren waar je uw filmpje wil is een bepaalde herkenbare tekst te plaatsen en deze dan te gaan zoeken eens je in de code-versie aan het werk bent. Als voorbeeldgebruik ik bovenstaande (fictieve) pagina. Ik gebruikte youtubehier als herkenbare tekst. Voor alle duidelijkheid zet ik hier alle HTML tags in het VET. <p><strong>titel</strong></p> <p><em>lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consequat imperdiet tellus quis vestibulum. Cras id blandit lectus. Sed lacinia, turpis eget vehicula rutrum, dui massa aliquet turpis, laoreet semper dui nulla vitae magna. Praesent urna lorem, vestibulum ornare sodales vel, malesuada at diam. In tincidunt magna quis sapien lobortis vitae vehicula elit interdum. Suspendisse vel neque est, eget scelerisque massa. Aenean nec nibh risus. </em><br /> <br /> Vestibulum rutrum, metus sit amet pellentesque sollicitudin, dolor velit ullamcorper nisl, at laoreet mi nunc nec nibh. Nunc sit amet congue tortor. Nulla vel viverra nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras arcu risus, blandit id rutrum tempor, elementum ac purus. Morbi quis quam vel tellus bibendum viverra sit amet quis urna. Nullam a mi id arcu sagittis luctus. Ut ac sodales mauris. In imperdiet auctor tempor.</p> <p> </p> <p>youtubehier</p> <p> </p> 14/15

Dus hier kan je Youtubehier wissen en de code dat we haalden van Youtube copieren. Dan wordt het resultaat : <p><strong>titel</strong></p> <p><em>lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consequat imperdiet tellus quis vestibulum. Cras id blandit lectus. Sed lacinia, turpis eget vehicula rutrum, dui massa aliquet turpis, laoreet semper dui nulla vitae magna. Praesent urna lorem, vestibulum ornare sodales vel, malesuada at diam. In tincidunt magna quis sapien lobortis vitae vehicula elit interdum. Suspendisse vel neque est, eget scelerisque massa. Aenean nec nibh risus. </em><br /> <br /> Vestibulum rutrum, metus sit amet pellentesque sollicitudin, dolor velit ullamcorper nisl, at laoreet mi nunc nec nibh. Nunc sit amet congue tortor. Nulla vel viverra nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras arcu risus, blandit id rutrum tempor, elementum ac purus. Morbi quis quam vel tellus bibendum viverra sit amet quis urna. Nullam a mi id arcu sagittis luctus. Ut ac sodales mauris. In imperdiet auctor tempor.</p> <p> </p> <p><object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/h8ec7_j0ojc&hl=en_us&fs=1&color1=0x3a3a3a&color2 =0x999999"></param><param name="allowfullscreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/h8ec7_j0ojc&hl=en_us&fs=1&color1=0x3a3a3a&color2=0 x999999" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object></p> <p> </p> Sla de pagina op door te drukken op het knopje links onderaan Opslaan, het filmpje staat nu op de website. Snelhulp HTML Een HTML-tag dient altijd geopend te worden met < code > maar ook gesloten door </ code > als je dus op een bepaalde pagina op een bepaalde plaatst <b> (= bolt vet) plaatst, maar verder geen </b> dan zal al de rest van de pagina in het vet staan. <p> een paragraaf <br> een spatie <font > een font (kan naast font ook kleur van de tekst bevatten) <img > een foto <a href > een link (snelkoppeling) Mensen die iets meer te weten komen over de geheimen van HTML kunnen onderstaande pagina (en de rest van die website) eens doornemen : http://www.sitemasters.be/tutorials/4/1/1/html/inleiding 15/15