STICHTING PROO WEBSITE MODULES

STICHTING PROO WEBSITE MODULES Versie 0.5

STICHTING PROO Onderwerp WEBSITE MODULES Datum 25 november 2010 Auteur Willem van Zalk

Dit document is onderdeel van het STPROO programma. Dit document omvat een beschrijving voor de diverse web site modules en is alleen bestemd voor de Bovenschools ICT-coördinator Stichting PrOo; Rein Kroon. Input wordt geleverd door Michiel van Zalk en Gerwin Vlijm.

1


INHOUDSOPGAVE 1.

Inleiding

3

2.

Inloggen website

4

3.

Modus opties 3.1. 3.2.

Bekijken Bewerken

5 5 5

4.

Website modules 4.1. HTML Pro (Tekst module) 4.2. Live Gallery (Foto Album) 4.3. Slideshow (Foto diashow) 4.4. Kalender 4.5. Live Writer/Blog

6 6 21 26 30 37

5.

Vorige versie 5.1.

42

Versie Geschiedenis


2


1.

Inleiding

In deze handleiding wordt er een uitleg gegeven hoe modules werken en wat je ermee kan doen.

Zo worden er webmodules beschreven die het meest gebruikt worden om de website te vullen. Ook wordt er o.a. beschreven hoe je een bestaande module kan bewerken.

Met de diverse modules kan je bijvoorbeeld teksten, foto’s, afspraken, etc. te plaatsen of aanpassen op de website.

Versie geschiedenis is een van de handige opties voor tekst modules. Met deze optie kan je terug gaan naar vorige versies. Deze optie wordt verder besproken in Websites Modules HTML Pro.


3


2.

Inloggen website

Voordat je een aanpassing of toevoeging op de website kan uitvoeren, moet je eerst inloggen op de website. Typ de link in je web browser en ga naar de website.

Voorbeeld:

Wanneer de website is geladen in je browser kan je inloggen op de volgende manier.

Klik op inloggen.

Vul in het volgende overzicht je gebruikersnaam en wachtwoord in en klik op Login. (Inloggegevens zijn op te vragen bij Rein Kroon)


4


3.

Modus opties

Wanneer je ingelogd bent, dan krijg je een aantal Modus opties te zien.

3.1.

Bekijken Als de optie Bekijken aanstaat, dan zie je de website zoals een bezoeker dat ook ziet. Deze controle optie kan je bijvoorbeeld gebruiken als je een module of pagina hebt aangemaakt/aangepast die alleen voor administrators of geautoriseerde gebruikers zichtbaar moeten zijn. Deze module of pagina mag dan niet zichtbaar zijn.

3.2.

Bewerken Als de optie Bewerken aan staat, dan kan je aanpassingen doen op de website. Er kunnen o.a. modules, teksten, foto’s etc. aangepast worden.


5


4.

Website modules

4.1.

HTML Pro Wanneer je op een pagina een tekst wil plaatsen, moet er een tekst module staan. Deze module staat standaard op elke pagina. In deze module kan je o.a. teksten en/of afbeeldingen plaatsen. Let op! De meeste menu opties voor het aanpassen van de tekst zijn hetzelfde als de Microsoft Office functies.

Je kunt nu een tekst gaan plaatsen. Om een tekst te plaatsen klik je op: Tekst bewerken.

Je krijgt nu het volgende scherm te zien:


6


Je kunt nu tekst gaan plaatsen of plakken vanuit b.v. een Word document. Je moet nog wel even de voorbeeld tekst “Inhoud toevoegen ...” weg halen. Wanneer je bestaande tekst wil kopiëren naar het tekst veld, dan moet je dit kopiëren als platte tekst, omdat er anders op de achtergrond allerlei tekens e.d. mee gekopieerd worden op de website. Om een tekst als platte tekst te plakken in het tekst veld dan kan je dat op de volgende manier doen: Selecteer en kopieer eerst de tekst die je wilt gaan plaatsen en klik dan op het pijltje naast het plak optie icoon.

Klik nu in het pulldown menu op Standaard tekst plakken en de tekst staat nu in het tekst veld.

Je kunt nu kiezen om deze tekst op te slaan, annuleren of eerst een vooruitblik te laten zien, voordat de tekst wordt opgeslagen.


7


Klik op opslaan en de tekst staat nu op de site.

In de Bekijken modus zie je hoe een bezoeker van de site de tekst ziet.

Je kunt ook een link plaatsen in een tekst veld naar b.v. een andere website of pagina. Het duidelijkst om dit te doen is om in het tekst veld een woord of zin te maken die moet verwijzen naar de gewenste website of pagina. Hieronder een voorbeeld van een zin die gaat verwijzen naar de home pagina:

Markeer de zin of het woord die gebruikt moet gaan worden voor de link. Je kunt een woord of zin markeren door voor of achter de zin het woord te gaan staan met je cursor en dan je linkermuisknop in te drukken en vast houden. Sleep dan je cursor over de zin of het woord, totdat deze helemaal geselecteerd is en laat dan je muis los. Je krijgt dan onderstaande te zien:


8


Zorg ervoor dat de tekst gemarkeerd blijft en klik dan in het menu op het hyperlink icoon.

Je krijgt nu onderstaande scherm te zien:

Page:

Hier kan je een pagina kiezen die op de huidige website staat.

URL:

Hier kan je een URL naar een externe pagina of website invullen.

Link Tekst:

Dit is de tekst waar de link op toegepast wordt.

Doel:

Hier kan je o.a. aangeven dat deze in een nieuwe pagina wordt geopend als je op de link klikt

Om een link te maken naar de home pagina, moet deze geselecteerd worden bij Page. Het URL keuze veld wordt nu automatisch goed ingevuld. In het veld Link Tekst kan je het woord of zin typen die zichtbaar moet worden voor de bezoeker. Hier vul je b.v. in: Klik hier om naar de home pagina te gaan. Bij Doel wordt standaard gekozen voor openen in een nieuw venster, omdat dan de huidige pagina ook open blijft staan. Klik op OKE om de link aan te maken.


9


De tekst is nu een link geworden.

Klik op opslaan om de link te testen.

Zo ziet de link eruit voor bezoekers of in de bekijk modus.

Je kunt ook afbeeldingen toevoegen in het tekst veld. Klik met de muiscursor in het tekst veld waar je een afbeelding wil invoegen.

Klik in het menu op het afbeelding invoeg icoon om een afbeelding toe te voegen.

Je kunt kiezen of je een nieuwe afbeelding wil uploaden of dat je een afbeelding wil gebruiken die al op de server staat. Als je een nieuwe afbeelding wil uploaden is het handig om eerst een map aan te maken op de server. Klik op het icoon nieuwe map aanmaken.


10


Geef de map een herkenbare naam als voorbeeld de naam test en klik op OKE.

De map is aangemaakt en zichtbaar in het overzicht. Klik op de nieuwe de map om deze te selecteren. De afbeeldingen die geüpload worden komen dan in de nieuwe map terecht.

Als je op uploaden klikt krijg je het volgende venster te zien.


11


Bladeren:

Hier kan je aangeven welke afbeelding geplaatst moet worden. Wanneer er meerdere afbeeldingen geplaatst moeten worden, dan kunnen deze ingevuld worden in de overige Bladeren velden.

Nieuwe regel:

Wanneer er meer dan drie afbeeldingen geplaatst moeten worden kan je hier op klikken en komt er een extra bladeren veld bij.

Bestand overschrijven:

Als je deze aanzet overschrijft hij afbeeldingen die al op de server staan met dezelfde naam en extensie.

Klik op bladeren om een afbeelding te selecteren.

Klik op Openen om de afbeelding klaar te zetten om te uploaden.

Wanneer je de afbeelding(en) hebt geselecteerd klik je op Uploaden om de afbeelding(en) op de server te plaatsen.


12


Je ziet nu dat de afbeelding in de nieuwe map is geplaatst.

Om de afbeelding aan te passen voor dat je hem in het tekst veld plaatst dan klik je op eigenschappen.


13


Breedte:

Hier kan je aangeven hoe breed de afbeelding moet worden.

Hoogte:

Hier kan je aangeven hoe hoog de afbeelding moet zijn.

Rand kleur:

Hier kan je aangeven welke kleur de rand van de afbeelding moet worden.

Rand grootte:

Hier kan je aangeven of je een Rand wil hebben om je afbeelding en hoe groot deze moet worden.

Tekst Afbeelding: Hier kan je een omschrijving van de afbeelding invullen. Hieronder een voorbeeld van diverse aanpassingen voor een afbeelding.

Om de afbeelding te plaatsen klik je op Invoegen.


14


De afbeelding is nu geplaatst. Wanneer de afbeelding geplaatst is kan je deze groter of kleiner maken door op de afbeelding te klikken. Hierdoor wordt een frame zichtbaar. Dit frame bestaat uit een aantal kleine vierkantjes waar je met je muis op kan gaan staan(de muis cursor verandert nu in een pijltje) en dan houd je de linkermuisknop ingedrukt en kan je het frame groter of kleiner maken.

Als je de grootte naar wens hebt aangepast, kan de afbeelding er als volgt uit zien.

Klik op opslaan om de aanpassing te bewaren.

In de bekijk modus en bezoekers zien het nu zo:


15


Wanneer je een bestaande afbeelding wil gebruiken, dan klik je in het menu op het ‘afbeelding invoegen’ icoon om een afbeelding toe te voegen.

Je kunt nu een bestaande afbeelding aanklikken en dan dezelfde stappen doorlopen voor het plaatsen van een nieuwe afbeelding. Je kunt nu verder met de eigenschappen aanpassen van de afbeelding.

Voorbeeld na plaatsen bestaande afbeelding.


16


Je kunt ook documenten uploaden naar de server en deze als link plaatsen in het tekst veld. Ga in het tekst veld op de juiste plek staan met je muis cursor en klik in het menu op het icoon documenten beheer om een document toe te voegen.

Je krijgt nu de documenten beheer verkenner te zien. (Om een bestaand document te selecteren kan je bladeren in de verkenner en het gewenste bestand te selecteren.)

Om een nieuw document toe te voegen selecteer eerst de map waar het document moet komen of maak een nieuwe map aan. Als je een nieuw document wil uploaden is het handig om eerst een map aan te maken op de server. Klik op het icoon nieuwe map aanmaken.

Geef de map een herkenbare naam (als voorbeeld de naam test) en klik op OKE.


17


Selecteer de map test en Klik op Uploaden.

Je krijgt onderstaand venster te zien.

Bladeren:

Hier kan je aangeven welk document geplaatst moet worden. Wanneer er meerdere documenten geplaatst moeten worden, dan kunnen deze ingevuld worden in de overige Bladeren velden.

Nieuwe regel:

Wanneer er meer dan drie documenten geplaatst moeten worden kan je hier op klikken en komt er een extra bladeren veld bij.

Bestand overschrijven:

Als je deze aanvinkt overschrijft worden documenten op de server met dezelfde naam en extensie overschreven.

Klik op bladeren om een document te selecteren.

Klik op Openen om het document klaar te zetten om te uploaden.


18


Klik nu op Uploaden om het document op de server te plaatsen.

Het bestand staat nu in de test map.

Link Text:

Dit is de naam die zichtbaar en aan klikbaar wordt in het tekst veld om het document te openen.

Klik op invoegen om een link naar het bestand toe te voegen in het tekst veld.

Je ziet nu dat de link test.pdf is geplaatst in het tekst veld.

Voordat je dit opslaat kan je de eigenschappen van deze link aanpassen door met de rechtermuis knop op Test.pdf te klikken en dan Instellen Link eigenschappen aan te klikken.


19


Selecteer bij Doel Nieuw venster om het document in een nieuw venster te openen, dan wordt blijft de huidige pagina openstaan wanneer de link wordt aangeklikt. Klik op OKE om de wijziging op te slaan.

Klik op opslaan om de wijziging op te slaan.

Als je nu in de Bekijk modus of als bezoeker op de link klikt dan wordt het bestand in een nieuwe pagina geopend.


20


4.2.

Live Gallery Met deze module kan je een fotoalbum maken. Deze module staat standaard al geïnstalleerd en is ook al geconfigureerd. Je kunt een nieuw album aanmaken of je kan foto’s toevoegen of verwijderen uit een bestaand album. Om een nieuw album te maken ga je naar de pagina foto album in de bewerken modus.

Om een nieuw album te maken of een bestaande te wijzigen klik je op Afbeeldingen toevoegen.

D

Je krijgt nu het volgende scherm te zien:

.


21


Om een nieuw album aan te maken klik je op Nieuw album.

Je kunt hier de gegevens invullen voor het nieuwe album.

Hoofd Album:

Standaard(None Specified) wordt er een nieuw album aangemaakt. Als je hier een bestaand album kies maakt het systeem een sub album aan en dat is niet overzichtelijk. Daarom kan je deze waarde standaard op None Specified laten staan.

Album naam:

Dit is de naam die het album moet krijgen.

Album beschrijving:

Dit is de omschrijving die je aan het album kan meegeven.

Syndicate:

N.v.t.

Klik op Album toevoegen om het album aan te maken.


22


Je kunt nu foto’s/afbeeldingen toevoegen aan het album. Klik op Browse om afbeeldingen te selecteren die in het album moeten komen te staan. Wanneer deze afbeeldingen al op de server staan, dan moet je bij Afbeelding bron Afbeelding(en) bladeren selecteren.

Selecteer dan de gewenste afbeelding(en) en klik op opslaan.

Wanneer de afbeeldingen zijn geupload naar de website, dan krijg je de melding Picture uploaded successfully… Klik dan op Update om het album bij te werken.


23


Het album is nu aangemaakt. Je kunt de volgorde van de foto’s of de albums aanpassen, door deze te verslepen. Klik op het kruisje en houd de linker muisknop ingedrukt en sleep de afbeelding naar de juiste plaats en laat de muisknop los.

De foto die vooraan wordt gezet, zal in het foto album overzicht als voorbeeld worden weergegeven(Het kan even duren i.v.m. synchronisatie voordat een aanpassing zichtbaar wordt op de website ). Klik op fotoalbum om naar het album overzicht te gaan.

Je ziet nu in het overzicht dat het nieuwe album er onderaan bij staat. Met als voorbeeld de eerste foto in het album.


24


Je kunt de volgorde van de albums op dezelfde manier verplaatsen als de afbeeldingen, door op het kruisje te klikken en de linker muisknop ingedrukt houden en het album te verslepen.

Om foto’s toe te voegen aan een bestaand album klik je in het album overzicht op het plus teken.

Je kunt nu afbeeldingen toevoegen aan het bestaande album. Om foto’s te verwijderen klik je op de foto van het desbetreffende album. Dit wordt dan geopend.

Klik op de prullenbak van de foto die je wilt verwijderen en de foto wordt verwijderd uit het album.


25


4.3.

Slideshow Op de Home pagina staat een Slideshow module geïnstalleerd, deze module laat foto’s als een diashow voorbij komen. Je kunt zelf o.a. kiezen welke foto’s hier voorbij komen, effecten toevoegen of aanpassen van de overgang van de foto’s of de tijdsduur aanpassen hoe lang foto’s in beeld moeten blijven voordat de volgende verschijnt. Om andere foto’s te plaatsen in de module ga je met je muis op home staan dan wordt de pagina Homepage Slideshow zichtbaar en klik op deze pagina.

Je krijgt nu het volgende overzicht te zien.

Hier kan je o.a. bestaande foto’s verwijderen en toevoegen uit de slideshow of de volgorde aanpassen.


26


Om een nieuwe afbeelding toe te voegen klik je op Add Element.

Je krijgt dan het volgende scherm te zien.

Element Type:

Hier kan je aangeven wat voor een bestand je wilt toevoegen. Standaard staat deze op ePicture. Met deze selectie kan je foto’s toevoegen. In het volgende keuze scherm kan je aangeven of je een Single image(1 foto) of Multi image(meerdere foto’s in een zip bestand) wil gaan plaatsen.

Picture:

Hier kan je de foto of het zip bestand selecteren die je wilt uploaden.

Overige velden(Title, Caption en Alt Title) hoeven niet ingevuld te worden(het mag wel), omdat deze niet zichtbaar worden in de slideshow. Als je meerdere afbeeldingen wil uploaden, dan moet je deze bestanden eerst inpakken als zip bestand. Hieronder een voorbeeld om afbeeldingen in te pakken. Let op! De manier om bestanden in te pakken is besturingssysteem(Operating System) afhankelijk. Ga in de Windows verkenner naar de map waar de foto’s staan en selecteer de foto’s die je wilt plaatsen.

Let op! Selecteer niet te veel foto’s in een keer om in te pakken en houd b.v. een maximum van tien foto’s per keer aan.


27


Klik met je rechtermuis knop op een geselecteerde afbeelding en er komt nu een menu in beeld. Ga naar Kopiëren naar->Gecomprimeerde (gezipte map)

Let op! De manier om bestanden in te pakken is besturingssysteem(Operating System) afhankelijk. De foto’s staan nu in een zip bestand en kunnen geüpload worden. Klik op bladeren op de webpagina om het zip bestand te selecteren dat je net hebt aangemaakt.

Ga naar de map waar het zip bestand staat en selecteer deze en klik op openen.

Klik onderaan de pagina op Update en de foto’s worden geüpload.


28


De foto’s staan nu op de server en worden automatisch in de slideshow meegenomen.

Bestaande foto’s kan je naar links of recht verplaatsten door op de pijltjes te klikken onder de foto.

Om een bestaande foto te verwijderen klik je op het potlood icoon onder de betreffende foto.

Je krijgt dan de eigenschappen van de foto te zien.(Deze eigenschappen van de foto zijn al geconfigureerd) Om de foto te verwijderen ga je helemaal naar beneden en klik je op delete.

De afbeelding is nu verwijderd.


29


4.4.

Kalender Op de website staat een pagina Jaarplanner, dit is een online agenda waar je o.a. vergaderingen, afspraken, etc. kunt plaatsen. Om afspraken te bekijken, bewerken of om een nieuwe afspraak te plaatsen klik je op jaarplanner in het menu.

Je krijgt nu het volgende overzicht te zien.

Er staat bovenaan de pagina een aantal opties. Met deze opties kan je o.a. verschillende data bekijken, een andere weergave selecteren of een evenement toevoegen, bewerken of verwijderen.


30


Om door de diverse data te bladeren kan je de volgende opties gebruiken:

De opties zijn van links naar rechts: Pijlen links rechts:

Met de pijlen kan je naar de vorige of volgende maand weergave gaan.

Datum tekstveld:

Hier kan je zien welke datum geselecteerd is , deze datum kan je handmatig aanpassen.

Kalender icoon:

Wanneer je hier op klikt, wordt er een miniweergave van een kalender geopend en kan je de gewenste dag selecteren.

Om de huidige weergave aan te passen of een evenement toe te voegen kan je de volgende opties gebruiken

De opties zijn van links naar rechts: Mijn evenementen:

Wanneer je hier op klikt, dan krijg je alleen je eigen evenementen te zien.

Nieuw evenement toevoegen:

Wanneer je hier op klikt, dan kan je een nieuw evenement plaatsen.

Ga naar vandaag:

Wanneer je hier op klikt, dan ga je in de weergave naar vandaag.

Schakel over naar agenda weergave:

Wanneer je hier op klikt, dan wordt de agendaweergave ingeschakeld.

Schakel over naar lijst weergave:

Wanneer je hier op klikt, dan worden alle evenementen in een lijst overzicht onder elkaar gezet.

Schakel over naar week weergave:

Wanneer je hier op klikt, dan krijg je een overzicht van alle evenementen van de geselecteerde week.

Schakel over naar dag weergave:

Wanneer je hier op klikt, dan krijg je een overzicht van alle evenementen van de geselecteerde dag.

Zoeken:

Hier kan je een zoekopdracht ingeven om te zoeken naar evenementen.


31


Om een nieuw evenement toe te voegen klik je op Nieuwe evenement toevoegen.

Je krijgt dan het volgende overzicht te zien.


32


Titel:

Dit is de titel van het evenement.

Locatie:

Dit is de locatie waar het evenement plaats vindt.

Editor:

Hier kan je de details van het evenement in plaatsen.

Start Datum/Tijd:

Hier kan je de startdatum en -tijd van het evenement aangeven.

Eind Datum/Tijd:

Hier kan je de einddatum en -tijd van het evenement aangeven.

Gebeurtenis Eigenaar Email:

Hier wordt het emailadres van de eigenaar ingevuld.

Is Aanbevolen:

Hier kan je aangeven of het evenement een aanbevolen evenement is.

Verstuur gebeurtenis Herinnering: Hier kan je aangeven of je een herinnering wil ontvangen van dit evenement. Publiceer Datum:

Dit is de datum vanaf wanneer het evenement zichtbaar wordt in de kalender.

Er zijn ook nog extra opties:

Afbeelding Instellingen:

Hier kan je een afbeelding toevoegen aan het evenement.

Bijlage Instellingen:

Hier kan je bijlagen toevoegen aan het evenement.

Terugkerende Instellingen:

Hier kan je instellen of het een terugkerend evenement is.

Inschrijving instellingen:

Deze optie is(nog) niet van toepassing.


33


Voorbeeld van een nieuw evenement:

Het evenement is nu geplaatst en zichtbaar in de jaarplanner.


34


Wanneer er meerdere evenementen op 1 dag staan, dan ziet dat er zo uit.

Wanneer je alle evenementen van die dag wilt zien, dan klik je op de datum(getal).

Je krijgt dan het volgende overzicht te zien:

Wanneer je alleen een specifiek evenement wilt zien dan klik je op het gewenste evenement.

Je krijgt dan het volgende overzicht te zien:


35


Om een bestaand evenement te verwijderen open je het evenement en klik je op meer.

Er wordt nu een nieuw venster geopend. Klik hier op bewerken om het evenement te bewerken.

Als je in het nieuwe venster helemaal naar onderen gaat dan kan je hier klikken op ‘verwijderen’ om dit evenement te verwijderen.

Klik op verwijderen. Het volgende scherm krijg je nu te zien.


36


Klik op OK om het evenement te verwijderen. Het evenement is nu verwijderd.


37


4.5.

Live Writer/Blog

Met Windows Live Writer kun je je postings voor je groep blog offline schrijven en deze in één keer op de website publiceren. Je kunt je postings uitbreiden met foto's, video's, muziek, kaarten, emoticons en meer. Account aanmaken in Windows Live Writer Windows Live Writer versie: 2011 is te downloaden vanaf http://support.stichtingproo.nl onder het tabblad ‘Downloads’. Nadat u succesvol de Windows Live Writer heeft geïnstalleerd vraagt het programma u een weblog-account op te geven. Er verschijnt een pop-up waarbij met vraagt welke webservice er gebruikt wordt. Hier kiest u ‘Andere weblogservice’ en klikt u op volgende.


38


In het volgende venster voert u de volgende gegevens in: Webadres weblog

: http://www.<School URL>.nl (Voorbeeld: http://www.obs-de-rotonde.nl)

Gebruikersnaam Wachtwoord

: Voer hier uw inlognaam in. : Voer hier uw wachtwoord in.

Wanneer u ‘Mijn wachtwoord onthouden’ aanvinkt hoeft u niet elke keer uw wachtwoord in te voeren. Wanneer u de gegevens juist heeft ingevoerd kunt u op Volgende klikken.


39


In het volgende venster voert u de volgende gegevens in: Het gebruikte type weblog:

: Metaweblog API

Webadres voor publicatie

: (Deze code krijgt u van Rein)

Wanneer u de gegevens juist heeft ingevoerd kunt u op Volgende klikken.

Wanneer de pop-up komt met de vraag of deze het Weblogthema moet downloaden klikt u op Nee.


40


In het volgende venster voert u de volgende gegevens in: Gebruikersnaam voor weblog:

: U kunt hier zelf verzonnen naam invoeren (Voorbeeld: Groep 1)

Wanneer u de gegevens juist heeft ingevoerd kunt u op Voltooien klikken.


41


5.

Vorige versie

5.1.

Versie Geschiedenis Een handige optie kan zijn versie-geschiedenis. Wanneer er b.v. een tekst is geschreven en deze later wordt aangepast kan je op eenvoudige wijze teruggaan naar een eerdere versie. Voorbeeld Wanneer je gaat naar een tekstmodule en een oudere versie van deze tekst terug wilt hebben dan klik je op tekst bewerken.

Je krijgt dan onderaan de pagina Versie Geschiedenis te zien.

Vouw deze uit door op het +(plus) teken te klikken.


42


Je krijgt dan het overzicht te zien van de versies die terug gezet kunnen worden.

Selecteer de juiste versie op deze terug te zetten.

De geselecteerde versie is nu terug gezet.


43

STICHTING PROO WEBSITE MODULES

Recommend Documents