Handleiding CMS Online Identity Webontwikkeling. Handleiding CMS

Transcriptie

1 Handleiding CMS 1

2 Inhoudsopgave 1. Inloggen Het CMS Websitecontent Een nieuwe pagina toevoegen Een pagina wijzigen Een pagina verwijderen De WYSIWYG editor Standaard tekstopmaak Afbeeldingen invoegen Links naar andere pagina s of websites Foto s verkleinen met EasyThumbnails Installatie EasyThumbnails Easy Thumbnails instellen Uitleg programma Foto s verkleinen Foto s in het fotoboek zetten Registerobject installeren Foto s uploaden in windows XP Foto s uploaden in windows Vista Albums rangschikken of verwijderen

3 1. Inloggen Voordat u kunt gaan beginnen met het aanpassen van uw website moet u eerst inloggen. U gaat naar waar u uw inloggegevens in kunt vullen die u van ons ontvangen heeft. 2. Het CMS Wij hebben ons CMS zo simpel mogelijk opgebouwd. Dit om het zo gebruiksvriendelijk mogelijk te houden. Bovenin een kleine kop, links het menu en daar rechts van altijd de content zoals in de afbeelding hieronder: Een basis van het CMS is altijd Websitecontent en Gebruikers. Afhankelijk van het soort pakket of toevoegingen die u binnen uw website heeft kan het dus zijn dat onder het kopje Content Management nog meer functionaliteiten staan. In dit voorbeeld heeft de klant dus ook een kopje Nieuwsbrief waar een nieuwsbrief opgesteld en verstuurd kan worden. 1. Websitecontent Aanpassen teksten en foto s van webpagina s 2. Nieuwsbrief Nieuwsbrief opstellen en versturen 3. Gebruikers Aanmaken / wijzigen en verwijderen van gebruikers 3

4 3. Websitecontent Wanneer u op websitecontent klikt krijgt u het volgende scherm. Hier ziet u een overzicht van de pagina s die uw website bevat en heeft hier de volgende keuzes: 1) Een nieuwe pagina toevoegen 2) Een pagina wijzigen 3) Een pagina verwijderen 3.1 Een nieuwe pagina toevoegen Wanneer u een nieuwe pagina aan uw website toe wilt voegen moet u op deze knop klikken. Waarschijnlijk heeft u deze knop vrijwel nooit nodig omdat wij een knop aan de voorkant van uw website toe moeten voegen om de link te leggen met de pagina. 3.2 Een pagina wijzigen Wanneer u de tekst en of de afbeeldingen van een pagina wilt wijzigen klikt u op de Wijzigknop (icoontje met de schroevendraaier en de sleutel Nummer 2). Wanneer u op deze knop geklikt heeft krijgt u het volgende scherm: De pagina bestaat uit twee belangrijke items: 1) De paginatitel 2) De WYSIWYG editor* * Een WYSIWYG (What You See Is What You Get) editor is een gemakkelijke applicatie om tekst heel handig op te maken. Het werkt bijna hetzelfde als bijvoorbeeld Microsoft Word. Onderaan deze pagina staat altijd de knop Wijzigen, wanneer je iets aangepast hebt in dit venster zullen de veranderingen meteen doorgevoerd zijn op de website. In hoofdstuk 4 gaan we dieper in hoe de WYSIWYG editor werkt. 4

5 3.3 Een pagina verwijderen Wanneer u een pagina wilt verwijderen klikt u in het overzicht op de verwijderknop (het kruisje). Denk hier echter wel goed over na want een verwijderde pagina kan niet handig teruggehaald worden. 4. De WYSIWYG editor Onze WYSIWYG editor is een van de meest gebruikte editors op het internet. Hij is zeer gebruiksvriendelijk en de mogelijkheden zijn eindeloos! In dit hoofdstuk gaan we de volgende dingen uitleggen: 1) Standaard tekstopmaak 2) Afbeeldingen invoegen 3) Links naar andere websites en/of pagina s In onderstaande afbeelding zijn de knoppen die bij bovenstaande functionaliteiten horen aangegeven: 4.1 Standaard tekstopmaak U kunt heel handig tekst dikgedrukt, schuingedrukt of onderlijnt maken. Dit doet u met de knoppen, aangegeven bij markering 1. U selecteert met de muis een stuk tekst en drukt daarna op een icoon. De iconen spreken voorzich, dit is een functie die Microsoft Word ook heeft, daarnaast kunt u ook de toetsencombinaties gebruiken na het selecteren van tekst: Control + b (Dikgedrukt) Control + i (Schuingedrukt) Control + u (Onderlijn) 4.2 Afbeeldingen invoegen Binnen de editor is het redelijk gemakkelijk om afbeeldingen in te voegen. Wanneer u gebruik wilt maken van deze functie klikt u op knop 2 (afbeelding van bergen en een zon). Na het klikken op deze knop zal het volgende venster openen: 5

6 Binnen dit venster heeft u de volgende tabbladen/mogelijkheden: 1) Informatie afbeelding 2) Link Hier is algemene informatie te vinden over de afbeelding die gebruikt gaat worden. Wanneer u voor het eerst op deze knop klikt zijn alle velden leeg. Deze worden pas gevuld wanneer een afbeelding gekozen is om te plaatsen binnen de content Wanneer een afbeelding moet linken naar een site of pagina kunt u dit op dit tabblad invoeren. Let er wel op dat op het tabblad Informatie afbeelding (degene die hierboven afgebeeld is) Rand op 0 staat zodat er geen rand om de afbeelding komt te staan 3) Upload Hier heeft u de mogelijkheid een afbeelding te uploaden. Dit betekent dat u bestanden kopieert van uw computer naar de online webruimte. Dit moet u in principe voor iedere afbeelding die u op uw site wilt hebben doen. Dit omdat bestanden die gebruikt worden voor de website zoals afbeeldingen / documenten altijd opgeslagen moeten worden op de zogenaamde webruimte zodat iedereen die de website bezoekt toegang heeft tot de bestanden. 4) Geavanceerd Hier kunt u nog wat extra informatie bij een afbeelding plaatsen. In principe heeft u dit niet nodig 5) Bladeren op server 6

7 Wanneer u een website heeft, maakt u gebruik van webruimte. U kunt dit zien als een soort van online harde schijf waar u alle webbestanden opzet. Wanneer u op Bladeren op server klikt zal een venster openen met alle bestanden die u kunt gebruiken. Ook in dit venster heeft u onderaan de mogelijkheid bestanden up te loaden. 4.3 Links naar andere pagina s of websites Een functionaliteit die ook redelijk vaak gebruikt wordt is het maken van links naar andere pagina s en/of websites. Dit is binnen onze editor erg handig. 1) Typ een stuk tekst dat een link moet worden 2) Selecteer het stuk tekst 3) Klik op de link knop (zie afbeelding hieronder): Er zal een popup openen waar u het een en ander in kunt stellen: Binnen dit venster heeft u de volgende tabbladen/mogelijkheden: 1) Hoofdtabblad waar u de link in kunt stellen 2) Tabblad waar u in kunt stellen wat er moet gebeuren als met op de link klikt 3) U kunt de link verwijzen naar een document (bijvoorbeeld PDF) dat u zelf upload 4) Hier kunt u geavanceerde waardes invullen, dit zult u waarschijnlijk nooit gebruiken 5) Hier moet u de verwijzing invullen waar de link naartoe moet gaan Voorbeeld: 7

8 Wanneer u op het tabblad Doel klikt ziet u het volgende: Bij het doel heeft u de keuze uit de volgende waardes: 1) <niet ingevuld> Deze waarde wordt standaard geselecteerd wanneer u hier niets doet. 2) <frame> Hier kunt u invullen binnen welk frame de pagina moet openen, dit zult u waarschijnlijk nooit gebruiken 3) <popup window> Wanneer u een pagina in een popup wilt laten openen selecteert u deze waarna u verschillende waardes in kunt stellen zoals de grootte van het venster dat geopend wordt e.d. 4) Nieuw venster (_blank) Dit is de meest gebruikte waarde omdat u niet graag mensen van uw site wilt laten gaan. Wanneer u deze waarde selecteert zal, wanneer er op de link geklikt wordt een nieuw venster openen. 5) Hele venster (_top) N.V.T. 6) Zelfde venster (_self) Link opent zich in het venster van de website, de website verdwijnt en de site waar de link naartoe gaat opent 7) Origineel venster (_parent) N.V.T. 8

9 5. Foto s verkleinen met EasyThumbnails Foto s die rechtstreeks van een fotocamera afkomen zijn vaak van erg goede kwaliteit en dus erg groot, te groot om precies te zijn. Een ideale grootte van de langste zijde van foto s ligt rond de 600 pixels. Voordat foto s upgeload worden binnen het CMS dient u deze dus eerst kleiner te maken. Dit kan met verschillende programma s maar in deze handleiding zullen wij het programma EasyThumbnail uitleggen. Met één druk op de knop kan dit programma een hele map foto s de goede grootte maken en op een andere locatie neerzetten. 5.1 Installatie EasyThumbnails Alvorens we het programma kunnen gebruiken moeten we het installeren en dus downloaden. Het downloaden van EasyThumbnails doet u hier: 1) Ga naar bovenstaand webadres en download het programma. 2) Klik op Opslaan en kies een locatie waar u zeker van weet dat u het bestand terug gaat vinden (bijvoorbeeld uw bureaublad) 3) Wanneer het bestand opgeslagen is kunt u op uitvoeren klikken en wanneer dat niet kan gaat u naar uw bureaublad en klikt u op easythumbnail. 9

10 4) Het volgende venster zal zich openen: U klik hier op Next en doet dit net zo lang tot er finish staat. Let wel op dat u ná dit venster akkoord moet gaan met de voorwaarden. Wanneer u op Finish kunt klikken doet u dat. EasyThumbnails is nu geïnstalleerd! 10

11 5.2 Easy Thumbnails instellen Start het programma EasyThumbnails op, dit kan middels een link op het bureaublad of in het menu start. Met dit icoon kunt u het programma opstarten, als het goed is staat deze op uw bureaublad. Wanneer u op dit icoon dubbelgeklikt hebt ziet u het volgende venster: De werking leggen we uit in het volgende hoofdstuk. Allereerst moet u een instelling doen die u maar één keer hoeft te doen. U moet namelijk instellen dat de langste kant van de foto na verkleining maximaal 600 pixels breed is. Dit doet u onder het tabblad Settings wanneer u hier op klikt ziet u het volgende: Zet hier beide waardes op 600 pixels en zorg dat ook de rest hetzelfde ingesteld staat. Het programma is nu klaar voor gebruik. 11

12 5.3 Uitleg programma Start het programma EasyThumbnails op, als dit al gebeurd is zorg dan dat u op het tabblad Files zit. 1) Bestandstype moet altijd op JPEG staan. 2) In dit venster kunt u kiezen in welke map de foto s staan. 3) Wanneer u op een map geklikt hebt in venster 2 komen hier alle JPEG (foto) bestanden te staan die in die map aanwezig zijn. 4) Hier kiest u op welke locatie de bestanden opgeslagen worden. U doet dit met de knop met de drie puntjes. Rechts onderaan dit venster zitten de volgende knoppen: Make all Wanneer een map geselecteerd is kunt ervoor kiezen alle bestanden in die map in één keer te verkleinen Make Wanneer u één foto geselecteerd hebt kunt u op Make klikken. Alleen die foto zal verkleind worden Close Hiermee kunt u het programma afsluiten 12

13 5.4 Foto s verkleinen Om het helemaal duidelijk te maken gaan we in dit hoofdstuk een map foto s verkleinen om op het internet te kunnen gaan gebruiken. 1) Start het programma EasyThumbnails op, als dit al gebeurd is zorg dan dat u op het tabblad Files zit. 2) We selecteren een map waar een aantal foto s / afbeeldingen in staan: We hebben de map Downloads geselecteerd, hier staan 6 foto s in. Dit kunt u zien in het venster onder de mapselectie hier links. 3) Dan moeten we aangeven waar de verkleinde afbeeldingen opgeslagen moeten worden. Hiervoor moet u klikken op de knop met de 3 puntjes (helemaal onderaan). 13

14 4) Wanneer u op deze knop geklikt hebt opent het volgende venster: 1) Huidige locatie waar de bestanden opgeslagen gaan worden 2) Hier kunt u een map kiezen waar de foto s opgeslagen worden 3) Wanneer u een map uitgekozen hebt kunt u een nieuwe map in die map maken waar u de foto s in opslaat om het overzichtelijk te houden 5) Als u de juiste map gekozen heeft klik u op OK. 6) Afhankelijk van of u slechts één foto wilt verkleinen of een hele map klikt u op Make all (alle foto s) of Make (één foto, u dient die betreffende foto dan wel te selecteren) Gefeliciteerd! Als het goed is zijn de foto s succesvol verkleind. Wanneer u nu binnen uw CMS foto s gaat uploaden, doe dat dan vanuit de map waar u uw verkleinde foto s in opgeslagen hebt. Gebruik dus nooit de foto s rechtstreeks van uw camera voor uw website, in de meeste gevallen zijn deze veel te groot en zit uw webruimte zo vol. 14

15 6. Foto s in het fotoboek zetten Wanneer u een fotoboek op de site heeft moet u natuurlijk foto s online kunnen zetten. Wij maken gebruik van het Coppermine Fotoboek en een door ons gemaakt script om de foto s op uw site netjes in uw huisstijl te weergeven. Om foto s up te loaden moet u dus gebruik maken van de bestaande functionaliteiten van het Coppermine fotoboek. 6.1 Registerobject installeren Alvorens we het uploadprogramma kunnen gebruiken moeten we een registerobject installeren. Dit hoeft pér computer maar één keer! Ga naar Hier staat twee keer deze link, één voor Windows XP, één voor Windows Vista. Klik op de link van uw besturingssysteem. Heeft u dus Windows XP? Klik dan op deze link (XP). 6.2 Foto s uploaden in windows XP 1) Wanneer u binnen Windows XP foto s wilt uploaden gaat u naar de map van met de afbeeldingen die op de site moeten komen. 2) Druk op de knop Deze map op het web publiceren : 3) Klik op volgende 4) Selecteer de foto s die u wilt publiceren 5) Kies het goede fotoalbum/website 6) U kunt vervolgens inloggen. Doe dit met de gegevens welke u van ons gekregen heeft. 15

16 7) Wanneer u ingelogd bent kunt u een album aanmaken of de foto s in een bestaand album uploaden: a. Hier kunt u een bestaand album kiezen b. Hier kunt u de naam van een nieuw album invoeren c. Kies hier altijd Geen categorie 8) Klik op volgende, en het album is aangemaakt 9) Klik weer op volgende (alle afbeeldingen 640x480 uploaden) 10) De bestanden worden in de map gezet en de foto s staan online! 6.3 Foto s uploaden in windows Vista Let op, de verkleinfunctie van de foto s werkt binnen windows vista niet. De foto s dienen dus, alvorens ze upgeload worden eerst verkleind te worden. Dit is heel simpel en uitgelegd in het vorig hoofdstuk. Let erop dat ze maximaal 640 pixels breed zijn. Eventueel kunt u uw camera zo instellen dat dit automatisch al het geval is, dan hoeft u niets te verkleinen. 1) Open Windows Photo Gallery (als je onderstaande actie als eens uitgevoerd hebt kan je dit via je bureaublad doen) a. Klik op Start > Computer > Lokaal Station (C:\) b. Ga naar C:\Program Files\Windows Photo Gallery c. Rechtermuisklik op WindowsPhotoGallery.exe d. Kopiëren naar Bureaublad (snelkoppeling maken) 2) Als de map met uw foto s nog niet zichtbaar is, klik dan op Bestand Map aan galerie toevoegen 3) Selecteer de map met uw foto s en klik op ok 4) Klik op Afdrukken en dan Afdrukken bestellen 5) Kies het goede fotoboek 6) U kunt vervolgens inloggen met de inloggegevens welke u van ons gekregen hebt 16

17 7) Wanneer u ingelogd bent kunt u een album aanmaken of de foto s in een bestaand album uploaden: a. Hier kunt u een bestaand album kiezen b. Hier kunt u de naam van een nieuw album invoeren c. Kies hier altijd Geen categorie 8) Klik op volgende, en het album is aangemaakt 9) Klik nu op voltooid 10) Klik nu nogmaals op Afdrukken bestellen 11) U kunt nu de foto s toevoegen aan de al bestaande map (Dit kan helaas niet hetzelfde, dus in één keer als in windows XP) 12) De foto s staan in de aangemaakte map 6.4 Albums rangschikken of verwijderen Wanneer u albums wilt rangschikken of verwijderen gaat u naar 1) U klikt vervolgens op Inloggen 2) Vul uw logingegevens in 3) Ga naar het tabblad Albums a. Hier kunt u een album selecteren en omhoog plaatsen of een album selecteren en verwijderen b. Let erop dat u altijd klikt op de knop Pas wijzigingen toe klikt na een actie. 17