Handleiding CMS - versie 2.0 Achtereenvolgend komt aan bod: Inleiding Inloggen Nieuwe pagina maken Pagina eigenschappen aanpassen Oude versies van pagina’s terughalen Teksten aanpassen Links maken (en verwijderen) Een document invoegen YouTube filmpje invoegen Een afbeelding/foto invoegen Een aangepaste pagina publiceren Ten slotte
Inleiding: Allereerst een paar belangrijke algemene punten die vaak aan de orde komen: 1) Heel soms is inloggen op de CMS niet mogelijk omdat er ergens een storing is. De CMS wordt door velen tegelijk gebruikt vanaf een centraal punt. Er zijn veel verbindingen tussen de server van de CMS, je eigen computer, je internetprovider en de server van je website. Lukt het niet om in te loggen dan is de oplossing om even te wachten en het later weer te proberen. Het is niet nodig om je wachtwoord hiervoor te veranderen. 1B) SKYPE: Als je met de CMS een pagina aanpast waar een telefoonnummer op staat EN je hebt Skype aanstaan dan veranderd Skype de hele code en een deel van de pagina wordt onleesbaar. Het is daarom goed om, als je met de CMS werkt, je Skype even uitzet. Ze gaan heel slecht samen. 2) Als je een pagina van je website aanpast dan slaat de CMS automatisch de oude pagina voor 6 maanden op. Je kunt dus geen fouten maken omdat je altijd terug kunt naar een oude versie. Als je 10x een aanpassing doet op een pagina dan slaat de CMS dus 10 oude versies voor je op. Hoe je een oude versie kunt terughalen staat in deze handleiding beschreven. 1
3) De ervaring leert dan veel gebruikers van de CMS ruimte maken op een pagina dmv de spatiebalk. Bijv. om op een nieuwe regel te beginnen of om een regel over te slaan. Dit is niet de bedoeling en zal de pagina uitrekken en uit balans brengen. Op een nieuwe regel beginnen doe je dmv de toetsen: Shift-Enter Een regel overslaan doe je dmv: Enter 4) Als je een pagina hebt aangepast en je gaat deze online bekijken dan moet je meestal de pagina verversen (refreshen). Dit omdat je computer/browser een oude versie in zijn geheugen heeft opgeslagen. Je computer doet dit zodat de pagina een volgende keer sneller zal laden. Maar om de aanpassingen te kunnen zien zul je de pagina moeten verversen. Hoe je een pagina ververst is weer voor iedere browser anders. Meestal kun je je browser verversen met een pijltje of pijltjes (blauw of groen) die je bovenin je browser ziet. Andere mogelijkheden: Windows computer de pagina verversen met de F5 toets of nog krachtiger met: Ctrl-F5. Op een Mac: Command-R (de Apple toets plus R) Let op: de browser Firefox ververst tegenwoordig soms erg moeilijk en blijft oude versies tonen. 5) In de handleiding komt vaak terug dat je tekst moet selecteren. Hoe selecteer je tekst? Door met de linkermuisknop ingedrukt van boven naar beneden (of andersom) over de gewenste tekst heen te gaan en als de selectie naar wens is de muisknop los te laten. Na het selecteren zal de geselecteerde tekst een andere kleur hebben. In het onderstaande voorbeeld is er op de eerste regel niets geselecteerd. Op de tweede regel is: “Namaste Webdesign verzorgd tegen een aantrekkelijke prijs” geselecteerd.
6) Als je teksten wilt toevoegen aan je website en deze teksten staan al in Word (of andere teksteditor) dan is het meestal niet nodig om alles opnieuw te typen. Je kunt stukken tekst vanuit Word kopiëren en in de CMS-editor plakken. Vervolgens kijk je of alles naar wens staat. Vaak moet je nog hier en daar wat bijwerken voordat het helemaal goed staat. 7) Het feit dat je een CMS hebt wil niet zeggen dat ik geen aanpassingen voor je kan doen. Ik doe aanpassingen tegen onderhoudstarief: http://www.namaste-webdesign.com/onderhoud.html
******************************************************************************************************
Inloggen Nadat je website online staat en de CMS geactiveerd is zul je inloggegevens ontvangen. Het inlogadres is:
2
http://cmsprofessioneel.namaste-webdesign.com/
Na het inloggen zul je de pagina’s van je website zien (bijvoorbeeld):
De echte naam van een pagina eindigt altijd op .html (zie rode pijl) In dit voorbeeld: agenda.html De naam erboven: Agenda (blauwe pijl) is slechts voor jezelf van belang. Je kunt deze naam veranderen (dmv het icoontje waar de oranje pijl bij staat) en dat heeft geen gevolgen voor je website
Nieuwe pagina maken: 3
Om een nieuwe pagina te maken kun je een bestaande pagina dupliceren. (zwarte pijl hierboven). Stel je wilt een nieuwe pagina maken genaamd: Voorwaarden. Je klikt dan op het dupliceren icoontje (zwarte pijl hierboven). Het volgende scherm verschijnt:
Onder Label vul je in: Voorwaarden
En klik OK.
4
Je ziet nu dat de voorwaarden pagina erbij is gekomen. De CMS heeft zelf de benodigde .html achter voorwaarden gezet (voorwaarden.html) Je kunt nu de nieuwe (voorwaarden) pagina gaan aanpassen en bewerken. Hoe je teksten aanpast, foto’s en documenten invoegt en links maakt naar andere pagina’s kun je in de rest van deze handleiding lezen. Let op!: Je kunt een nieuwe pagina die je zelf hebt gemaakt niet aan het menu (je menuonderwerpen) toevoegen. Je kunt wel vanaf een bestaande pagina een link maken naar je nieuwe pagina. (hoe je een link maakt wordt in deze handleiding beschreven) Wil je de een zelf gemaakte pagina (of pagina’s) ook aan het menu toevoegen dan heb je mijn hulp nodig. Het aanpassen van je menuonderwerpen zal 1 tot 3 strippen kosten. Dit is afhankelijk van hoe uitgebreid en ingewikkeld je menu is. ( zie ook: http://www.namaste-webdesign.com/onderhoud.html ) Als je een pagina van je website wilt verwijderen (deleten) dan klik je op het rode icoontje naast de pagina (zie paarse pijl hierboven). Een pagina verwijderen is definitief. Je kunt hem niet meer terughalen. Als je een pagina verwijderd die ook in het menu staat dan heb je mijn hulp nodig om het menu aan te passen.
Pagina eigenschappen aanpassen en oude versies van pagina’s terughalen. Stel je wilt de pagina eigenschappen ( Titels, Beschrijving, Sleutelwoorden) van de CMS voorbeeldpagina hieronder aanpassen:
5
Je klikt dan de pagina aan (groene pijl hierboven) Het volgende scherm verschijnt:
Groene pijl: met dat icoontje kun je de pagina eigenschappen van je pagina instellen. Dat zijn: 1) de titel 2) de omschrijving 3) de sleutelwoorden Deze 3 eigenschappen zijn belangrijk mbt Google (zoekmachines). Meer informatie hierover kun je downloaden op mijn website: http://www.namaste-webdesign.com/tips-voor-google-optimalisatie.html
6
Rode pijl: met dat icoontje kun je oude versies van de pagina bekijken en ook publiceren. De bovenste regel is altijd de meest recente versie. Oranje pijl: met dat icoontje krijg je 3 mogelijkheden te zien: 1) bewaar concept: als je aan een pagina hebt gewerkt maar deze niet af hebt dan kun je hem opslaan om later aan verder te werken. Als je een volgende keer aan die pagina wilt werken dan vindt je de pagina terug bij het icoontje van de rode pijl hierboven. 2) publiceer op een later tijdstip: je kunt een tijdstip invoeren wanneer je de pagina automatisch wilt laten publiceren. Op dat tijdstip zal de CMS de oude pagina vervangen door de nieuwe. 3) Publiceren: hiermee publiceer je direct de aangepaste pagina.
Teksten aanpassen Klik op het potloodje (blauw pijltje, afbeelding hierboven!) Het volgende scherm opent zich:
7
icoontjes blauwe pijlen (hierboven): Hiermee kun je een actie ongedaan maken. Of een ongedane actie ongedaan maken. (dus het ongedaan maken terugdraaien) icoontjes groene pijlen (hierboven): Hiermee kun je tekst vet maken, schuin maken en onderstrepen. Gebruik het onderstrepen niet teveel want bezoekers zullen denken dat hetgeen onderstreept is links (naar andere pagina’s of andere websites) zijn. Dat zorgt voor verwarring. Voorbeeld: Als je een gedeelte van de tekst vet wilt maken dan selecteer je dat gedeelte van de tekst en vervolgens klik je op de B onder de groene pijl. icoontjes oranje pijlen (hierboven): Hiermee kun je tekst uitlijnen. Links, rechts, midden of uitvullen. Ook hier selecteer je eerst de tekst en vervolgens klik je op één van de 4 icoontjes. icoontjes zwarte pijl (hierboven): Hiermee kun je schakelen tussen volledig scherm en half scherm. Als je de aanpassingen wilt publiceren dan is het nodig dat je terugschakelt naar half scherm.
8
icoontje blauwe pijl (hierboven): Hiermee kun je koppen of een citaat maken. In bovenstaand voorbeeld is de tekst: Welkom bij Namaste Webdesign: Kop 1. Ruim 180 websites in mijn portfolio is: kop 2 Door in de tekst van een kop te klikken kun je zien wat voor soort kop het is. Meestal zijn alle koppen boven aan de pagina kop 1. De andere koppen bij de tekst zijn meestal kop 2 en kop 3. Een kop maak je door gewenste tekst te selecteren (waarvan je een kop wilt maken) en vervolgens bij de blauwe pijl de gewenste kop aan te klikken. icoontje groene pijl (hierboven): Je website heeft standaard een bepaald lettertype. Wil je bepaalde delen een ander lettertype gebruiken dan kan dat met dit icoontje. icoontje oranje pijl (hierboven): Tekst een bepaalde grootte geven. icoontje rode pijl (hierboven): Je website heeft standaard een bepaalde letterkleur. Met dit icoontje kun je delen van je tekst een andere kleur geven. Alle kleuren zijn mogelijk als je eerst klikt op dit icoontje en vervolgens klikt op “meer kleuren”. Daar kun je een kleur aanklikken of als je kunt omgaan met html kleurcodes de code ingeven. Een kleurcode bestaat altijd uit 6 letters en/of cijfers. Met Google is hier genoeg informatie over te vinden. icoontje gele pijl (hierboven): Hiermee kun je tekst markeren. icoontje gele pijl (hierboven): Dit is een gum waarmee je de tekst weer in onopgemaakte staat kunt terugbrengen. Heb je zoals hierboven beschreven de tekst - vet, schuin, onderstreept, ander lettertype, andere lettergrootte, andere kleur of gemarkeerd dan kun je met de gum dit weer ongedaan maken. De tekst die je wilt terug veranderen eerst selecteren en vervolgens op de gum klikken. icoontje zwarte pijl (hierboven): Hiermee kun je een scheidingslijn (streep) invoegen. icoontje paarse pijl (hierboven): Hiermee kun je verschillende soorten tabellen invoegen.
Links maken (en verwijderen) 9
Een link kun je maken van een stukje tekst van een pagina naar:
1) een andere pagina van je eigen website of naar
2) een pagina van een andere website.
1) In onderstaand voorbeeld wordt er een link gemaakt van het woord portfolio naar de portfolio pagina. Het woord portfolio is al geselecteerd. (blauwe pijl hieronder)
Na het selecteren van het woord portfolio klik je op het link icoontje (rode pijl). Onderstaand scherm verschijnt:
10
Bij Link URL vul je de pagina in waar je heen wilt linken: portfolio.html (een andere optie die hetzelfde resultaat oplevert is het envelopje aanklikken (groene pijl) en vervolgens de gewenste pagina – portfolio.html - aanklikken) Bij Doel klik je aan “in hetzelfde venster openen”. Dit omdat je binnen je eigen website blijft. (Als je een link maakt naar een andere website dan klik je op “in een nieuw venster openen”. Op die manier raak je je bezoeker niet kwijt) Bij Titel vul je het onderwerp in waar de link naar toe leidt. Daar had ook “overzicht van mijn werk” ingevuld kunnen worden. Als alles is ingevuld klik je op “invoegen” en de link is gemaakt. Als je een link weer wil verwijderen dan selecteer je de link en vervolgens klik je op het “link verwijderen” icoontje (zwarte pijl hierboven).
2) In onderstaand voorbeeld wordt er een link gemaakt van het woord yoga naar de website www.yoga.nl. Het woord yoga is al geselecteerd. (blauwe pijl)
11
Na het selecteren van het woord yoga klik je op het link icoontje (rode pijl hierboven). Onderstaand scherm verschijnt:
Bij Link URL vul je de pagina in waar je heen wilt linken: http://www.yoga.nl (als je slechts invult: www.yoga.nl dan zal de CMS vragen of er http:// voor moet staan. In dat geval klik je OK en voegt de CMS de rest toe ) Bij Doel klik je aan “in nieuw venster openen”. Op die manier blijft ook het scherm van je eigen website open en raak je je bezoeker niet kwijt) Bij Titel vul je het onderwerp in waar de link naar toe leidt. Daar had ook bijv. “Yoga website” ingevuld kunnen worden. 12
Als alles is ingevuld klik je op “invoegen” en de link is gemaakt. Als je een link weer wil verwijderen dan selecteer je de link en vervolgens klik je op het “link verwijderen” icoontje (zwarte pijl een stuk naar boven).
Een document invoegen. Toevoegen van documenten (bijvoorbeeld PDF, DOC, DOCX, XLS) In onderstaand voorbeeld wil je dat een bezoeker een CV (Worddocument) kan downloaden als hij/zij klikt op de zin “Download hier mijn CV”. Je hebt van tevoren het document gemaakt en het staat op je computer, op het bureaublad. (kan ook bijv. staan in de map Mijn Documenten) Het document heet: cv-namaste.doc (het is goed om voor de benaming van documenten kleine letters te gebruiken en geen spaties maar streepjes) De zin “Download hier mijn CV” is al geselecteerd. (groene pijl hieronder)
Na het selecteren van de zin “Download hier mijn CV”. klik je op het “document invoegen” icoontje (rode pijl hierboven). Onderstaand scherm verschijnt:
13
Je klikt op het envelopje ( Blader, hierboven). Het volgende scherm verschijnt:
14
Je ziet nu (in dit voorbeeld) 3 documenten (groene pijl) die al in de documentenmap van de website zitten. Je kunt er daar een van kiezen. Of je kunt een document van je computer halen (uploaden naar de map van de website). Dat laatste ga je doen en je klikt op: Upload bestanden (rode pijl hierboven). Je kunt nu op je computer naar het document zoeken die je wilt uploaden en erop dubbelklikken (of 1x klikken en “openen”). Het document wordt nu upgeload naar de map van de website (dat kan even duren):
Hierboven is het document upgeload en je klikt erop. Vervolgens klik je OK. Het volgende scherm verschijnt.
15
Bij beschrijving vul je in Namaste CV (of iets anders naar keuze). En je klikt OK. Het document is nu ingevoegd.
YouTube invoegen. Om een YouTube filmpje in te voegen haal je eerst de code van dat filmpje op bij YouTube. Als je het YouTube filmpje voor je hebt (op de YouTube-pagina) kun je (vaak) ergens op “Share” klikken. Vervolgens op “Embed”. ( het is goed om “Show suggested videos when the video finishes” uit te vinken) ( je kunt de gewenste maten aangeven, al staat het standaard meestal al vrij goed ) De code die je nodig hebt zal er ongeveer zo uitzien: <iframe width="560" height="315" src="//www.youtube.com/embed/6v2L2UGZJAM?rel=0" frameborder="0" allowfullscreen>
16
Om het YouTube filmpje in te voegen klik je eerst met de muis op de plek waar je hem wilt invoegen (groene pijl hierboven). Vervolgens klik je op het html-fragment invoegen icoontje (rode pijl hierboven). Het volgende scherm verschijnt:
Hierboven is vervolgens de code ingevoegd. Vervolgens klik je op OK. (Eventueel kun je nu het filmpje in het midden zetten ipv aan de linkerkant. Dat doe je door het filmpje aan te klikken en met het “centreren-icoontje” het filmpje in het midden te plaatsen)
17
In het scherm dat volgt na het klikken op OK wederom op OK klikken. Het YouTube filmpje is nu ingevoegd:
Een afbeelding/foto invoegen.
18
Om een afbeelding in te voegen klik je eerst met de muis op de plek waar je deze wilt invoegen (groene pijl hierboven). (Je kunt ook aan de rechterkant van de tekst klikken of je cursor in het midden zetten dmv het “centreren-icoontje”.) Vervolgens klik je op het afbeelding-invoegen icoontje (rode pijl hierboven). Het volgende scherm verschijnt:
19
Klik op Blader (zie envelopje hierboven). Het volgende scherm verschijnt:
Je ziet nu (in dit voorbeeld) 4 foto’s (groene pijl) die al in de map van de website zitten. Je kunt er daar een van kiezen. Of je kunt een afbeelding van je computer halen (uploaden naar de afbeeldingen map van je website). Dat laatste doen we en je klikt op: Upload bestanden (rode pijl hierboven). Je kunt nu op je computer naar de afbeelding zoeken die je wilt uploaden. In dit geval heb je een foto genaamd landschap gevonden en erop ge-dubbelklikt (of 1x klikken en “openen”). De foto wordt nu upgeload naar de map van de website (dat kan even duren). Hieronder zie je dat de foto nu in de afbeeldingen map van de website zit:
20
Hierboven is de landschapfoto al geselecteerd en ik klik op OK. Het volgende scherm verschijnt:
21
Je kunt het formaat nog wijzigen en/of de foto bijsnijden. Het is een kwestie van uitproberen. Een foto vergroten zorgt ervoor dat hij waziger wordt. Dus vergroot niet teveel. Een foto verkleinen kan door bij Grootte (rode pijl hierboven) een kleiner getal in te geven. Het andere getal zal naar verhouding uit zichzelf mee verkleinen. Je kunt ook de foto bijsnijden. Dat doe je met de linkermuisknop ingedrukt van de ene groene pijl (zie hierboven) naar de andere te bewegen en dan los te laten. Het volgende zul je dan zien:
Dmv. de vierkantjes om de foto heen kun je de foto nu bijsnijden. Je kunt een foto eerst bijsnijden en dan verkleinen of andersom. Nadat de foto naar wens is klik je op OK: De foto staat nu bij de tekst. Je kunt de foto verplaatsen met de “uitlijnen-icoontjes”. Je selecteert de foto en lijnt ‘m links of in het midden of rechts uit. Of je kunt de foto verslepen. Het is een kwestie van uitproberen totdat het goed staat. Pas wel op met uitlijnen/verslepen want je tekst kan daardoor wat verschuiven. 22
Als je een foto hebt verkleind en/of bijgesneden dan behoud de CMS ook het origineel. Zo zie je dat hieronder dat landschap.jpg er nog staat. Dat is het origineel. landschap-1372680633.jpg is de verkleinde foto:
Het origineel kun je, als je die niet meer nodig hebt, evt. verwijderen. Dat doe je door erop te klikken en dan rechtsonder op verwijder klikken. Goed om te weten: Originele foto’s zijn vaak rond 2500 pixels breed. In dat geval moet je de foto dus flink verkleinen. Een tekstvak van een website is vaak tussen de 600 en 900 pixels breed. Als je wilt weten wat de afmetingen zijn van een foto/afbeelding op je computer, dan kun je daar meestal achterkomen met rechtermuisklik en dan “eigenschappen”. Of je muis op de foto houden zonder te klikken werkt vaak ook goed. Als je wilt weten wat de afmetingen zijn van een foto/afbeelding op een website: rechtermuisklik erop en dan eigenschappen of image info (dat verschilt per browser).
23
Een hulpmiddel bij het inpassen van foto’s is deze gratis te downloaden digitale liniaal: http://www.spadixbd.com/freetools/jruler.htm
De aangepaste pagina publiceren. (of bewaren of een datum van publicatie instellen) Nadat je een pagina naar tevredenheid hebt aangepast kun je hem publiceren. Als je op annuleren (blauwe pijl hieronder) klikt dan zal er niets aan je website veranderen. Publiceren doe je door op OK (groene pijl hieronder) te klikken en vervolgens op Opslaan. (rode pijl hieronder).
Nadat je op Opslaan (rode pijl hieronder) hebt geklikt heb je 3 mogelijkheden: 1) bewaar concept: als je aan een pagina hebt gewerkt maar deze niet af hebt dan kun je hem opslaan om later aan verder te werken. Als je een volgende keer aan 24
die pagina wilt werken dan vindt je de pagina terug bij het icoontje van de rode pijl hierboven. 2) publiceer op een later tijdstip: je kunt een tijdstip invoeren wanneer je de pagina automatisch wilt laten publiceren. Op dat tijdstip zal de CMS de oude pagina vervangen door de nieuwe. 3) Publiceren: hiermee publiceer je direct de aangepaste pagina. Nadat je hierop klikt, zal de CMS aangeven: Uw aanpassingen zijn gepubliceerd. Je kunt nu je pagina online gaan bekijken. Als je de aanpassingen niet ziet dan moet je de pagina verversen/refreshen ( zie de inleiding van deze handleiding). Verversen is voor iedere browser weer anders. Met Google heb je binnen 2 minuten achterhaald wat voor jouw browser de beste methode is. (indien de tips die in de inleiding staan niet werken voor jouw browser)
Ten slotte Het gebeurt vaak dat de eerste aanpassingen niet naar wens blijken te zijn. Ook als webdesigner ben je veel bezig met: aanpassen, resultaat bekijken, opnieuw doen, resultaat bekijken, opnieuw doen, bekijken, tevreden. Je kunt altijd terug naar een eerdere versie van een pagina zoals die was voordat je de aanpassingen had gepubliceerd. Daarnaast kun je ook gewoon doorwerken in hetgeen je al hebt aangepast. Het is dus soms een kwestie van uitproberen totdat het naar wens staat. Soms is het niet mogelijk om hetgeen je wilt bereiken perfect te realiseren. Dat komt doordat een CMS altijd beperkingen heeft ten opzichte van een webdesigner die rechtstreeks in de code kan werken. Het is dan goed om zoveel mogelijk de perfectie te benaderen. En oefening baart kunst.
25
