Training website beheer Training WZSW website beheer 2008 www.triggr.nl
Training website beheer Inhoud Principe werking internet...3 Principe CMS (Typo3)...4 CMS elementen (Structuur / content)...5 Inloggen CMS beheer...6 Schermindeling CMS Linker menu...7 Midden menu...8 Rechter scherm...9 Navigeren...10 Contextueel menu...10 Structuur elementen...11 Content elementen...12 Scherm-functies...14 Beheer via voorkant...15 WZSW website structuur opbouw...16 Laatste nieuws: als content element...17 Laatste nieuws: als pagina element...18 Laatste nieuws: als nieuws-extensie...19 2008 www.triggr.nl 2
Training website beheer Principe Internet Even voor de inleiding, de achtergrond van de werking van het internet. Het internet is niets meer dan een hoop aan elkaar geschakelde computers. Elke computer heeft zijn eigen unieke nummer, het zogenaamde IP-adres. In het schema: Aan het internet-netwerk zijn aan de ene kant computers aangesloten die alleen maar dienen om gegevens te delen, zogenaamde servers. Deze hangen zoveel mogelijk samen in rekken op strategische locaties over de hele wereld. Bekende datacenters staan in Nederland in vrijwel alle grote steden. WZSW staat in een datacenter in Amsterdam. In zo s rek zit een server met meerdere harde schijven en op zo n schijf huren wij een klein stukje wat op zich ook een uniek IP nummer heeft (eenvirtuele IP). Op dat betreffende stukje staat alles wat met de website en e-mail te maken heeft. De website database, CMS, documenten, afbeeldingen, e-mail boxen, etc. Aan de andere kant van het internet zitten de gebruikers die op het internet surfen, zoeken en kijken. Deze kijken via het internet op de webserver in het datacenter naar onze website. 2008 www.triggr.nl
Training website beheer Principe CMS Nu een korte inleiding van een CMS. CMS staat voor Content Management Systeem en is niets anders dan een tool voor het organiseren van grote hoeveelheden data (text, beeld, documenten, etc). Via een achterdeur gaat met bij de website naar binnen, waarna men zaken via het CMS kan wijzigen. Een CMS werkt met een paar basis onderdelen: een database voor opslag, een template voor de basis vormgeving en een engine een motor die deze combineerd naar web-pagina s. Wij maken gebruik van een Open Source CMS Typo3. Hierbij is de de engine gratis en moet alleen alles ingericht worden. Een CMS heeft standaard een aantal functies zoals het plaatsen van text en beeld, maken van formulieren, versturen van e-mails, beschermen van bepaalde pagina s etc. Deze functies kunnen met extensies worden uitgebreid. Er zijn voor Typo3 teveel extensies om op te noemen. Voorbeelden zijn een nieuws-module, voor het maken van nieuwsberichten. Een forum, beheerders-login, nieuwsbrieven, document-beheer, etc. 2008 www.triggr.nl
Training website beheer Structuur elementen en content elementen Bij het beheer via een CMS moet men een paar zaken weten. Het CMS werkt met een aantal elementen om de pagina s en inhoud op de goede plek te plaatsen. Structuur elementen De structuur elementen zeggen het eigenlijk al; deze geven structuur aan de website. Deze bepalen het menu, het zijn de pagina s en de sub-pagina s en nog meer. Content elementen De content elementen geven inhoud aan de pagina s. Content elementen zijn text, beeld, tabellen, formulieren, etc. Het zijn elementen die men in/op de pagina s plaats zodat de bezoeker zaken ziet als men de site bezoekt. Structuur Content 2008 www.triggr.nl
Training website beheer Inloggen CMS Zoals gezegd, men gaat via een achterdeur binnen om via het CMS de website te beheren. Via het adres: http://beheer.wzsw.nl/ of http://www.wzsw.nl/typo3/ komt men op de login van het CMS. Hierin vult men de gegevens in die men heeft verkregen voor de login. Vervolgens komt men binnen op het beginscherm van het CMS met in het algemene vak uitleg over de onderdelen in het linker-menu. Opdracht Ga naar het login-scherm (beheer.wzsw.nl) en login met de gegevens die u heeft verkregen! 2008 www.triggr.nl
Training website beheer Schermindeling CMS Het scherm van het Typo3 CMS bestaat uit een aantal onderdelen die hieronder worden beschreven. Linker-menu Het linker menu is het functie-menu van Typo3. Via dit menu kan men de inhoud van het CMS zichtbaar maken. Men kan instellingen plegen en pagina s bekijken. Van boven naar beneden de volgende onderdelen. - Page-symbool: hiermee bekijkt men de content elementen van een pagina, welke inhoud staat op de pagina. - View-symbool: hiermee kan men de pagina bekijken hoe deze eruit ziet aan de voorkant - List-symbool: hiermee ziet men alles wat er op het structuur element ingedeeld staat. Men kan namenlijk veel meer elementen in een pagina zetten dan alleen content! - Filelist-symbool: hiermee bekijkt men de inhoud van de afbeeldingen en documenten op de server - Setup-symbool: voor persoonlijke instellingen over de werking van het CMS - Help-symbool: voor extra hulp, helaas alleen in Engels... Opdracht Klik op de verschillende symbolen en kijk wat het scherm aangeeft 2008 www.triggr.nl
Training website beheer Schermindeling CMS Het scherm van het Typo3 CMS bestaat uit een aantal onderdelen die hieronder worden beschreven. Midden-menu Het middelste menu wisseld naar gelang de functie die men kiest. Bij de Web -symbolen (page - view - list) krijgt men de website structuur te zien. Kiest men Filelist in het menu, dan krijgt men de structuur op de webserver te zien. Hier staan de afbeeldingen, logo s en documenten (Word - PDF - Excell) in een map van deze gemeente. Opdracht Kies verschillende onderdelen uit het linker menu en uit de structuur. Kijk wat er in het rechter veld gebeurd. 2008 www.triggr.nl 8
Training website beheer Schermindeling CMS Het scherm van het Typo3 CMS bestaat uit een aantal onderdelen die hieronder worden beschreven. Rechter scherm Nadat men een keuze heeft gemaakt in het linker menu en een pagina (of map) heeft gekozen uit het middelste, structuur-menu, ziet men in het rechter scherm de inhoud. Bij het page menu ziet men de content elementen van deze pagina. Bij de List ziet men de inhoud in een lijst, en nog veel meer. Via de List ziet men namenlijk ook de sub-pagina s en verborgen elementen. Bij de Filelist kijkt men op de server. Hier staan een aantal mappen met afbeeldingen en documenten. Content via Page Content via List Content via Filelist 2008 www.triggr.nl
Training website beheer 10 Navigeren Het CMS bestaat niet alleen uit een aantal menu s met schermen. Er zitten een hele hoop functies verborgen voor het aanmaken, wijzigen en navigeren. Men heeft ervoor gezorgd dat er meerdere wegen naar hetzelfde punt kunnen gaan. Daarom is één bepaalde weg niet altijd de snelste of eenvoudigste. Men kan door de site heen navigeren door op de naam van een pagina te klikken. Men kan de structuur open en dicht klappen door op het of de te klikken. Opdracht Klap de gehele structuur een keer open en dicht. Kijk welke pagina s en symbolen er voorkomen. Klik bij verschillende pagina s op het vergootglas en kijk of u iets herkend... Contextueel menu Men kan functies kiezen als men op het icoon van een pagina klikt contextueel menu uit de cursor.. Er komt dan een zogenaamd Via dit menu kan men structuur elementen bewerken. Het spreekt voor zich wat deze allemaal doen. - bekijk / voorvertoning - bewerken - nieuwe pagina / element - info over - copiëren - versie (niet toegankelijk) - knippen - history / vorige / terug (niet toegankelijk) overige opties - verbergen - zichtbaarheid aanpassen - pagina element-instellingen wijzigen 2008 www.triggr.nl 10
Training website beheer 11 Structuur elementen Zoals gezegd, structuur elementen bepalen de structuur van de website. Ze bepalen het menu en kunnen bezoekers een bepaalde richting op sturen. Structuur elementen zijn meestal pagina s maar men kan ook structuur elementen inzetten om mensen rechtstreeks naar een andere plek te sturen. Dit is een zogenaamde schortcut. Om een overzicht van de elementen te geven gaan we nu een nieuw element aanmaken. Opdracht Ga via het page -symbool naar de pagina Eten en drinken binnen de infodiensten. Ga via het contextueel menu van eten en drinken een pagina aanmaken. Deze pagina moet binnen eten en drinken vallen. We krijgen nu een aantal invulvelden (hide, naam, alias en subtitle). Vul bij naam Restaurants in en eventueel een subtitel. Standaard wordt de pagina verborgen gehouden omdat er feitelijk nog geen content in de pagina staat. Hide zouden we kunnen uitvinken... Dit is een standaard pagina. Door het drop-down menu te bekijken kunnen we de werking van deze pagina wijzigen naar een - Advanced: voor meer opties voor zoekwoorden en beschrijvingen - External URL: om direct te verwijzen naar een website ergens op het internet - Shortcut: om direct naar een andere pagina binnen onze eigen website te verwijzen - Not in menu: om een pagina te verbergen voor het menu, De pagina bestaat wel en is te bereiken via een doorverwijzing of link - System folder: deze kunnen we gebruiken voor elementen die we niet rechtstreeks als content in een pagina kunnen opnemen, zoals gegevens van gebruikers, templates, nieuwsberichten, etc. We kiezen gewoon de standaard, de andere opties kunt u een andere keer proberen... Bewaar de pagina met deze iconen (Opslaan / opslaan en bekijken / opslaan en sluiten / sluiten zonder opslaan / verwijderen / alias/ verwijzing) Nu hebben we een pagina aangemaakt binnen Eten en drinken van infodiensten. Deze pagina is leeg, dus die gaan we nu vullen... 2008 www.triggr.nl 11
Training website beheer 12 Content elementen De content elementen geven inhoud aan de pagina s. Dat is precies wat we nu gaan doen. Opdracht Ga met het page -symbool naar de zojuist aangemaakte pagina Restaurants. Nu zien we in het rechter scherm een overzicht dat leeg is. Met de iconen bovenin kunnen de gegevens van de pagina worden gewijzigd of kan men de pagina bekijken aan de voorkant. In het content-veld kunt u met dit icoon een nieuw content element aanmaken. Klik deze... Vervolgens kunnen we kiezen uit een aantal content elementen: - Text een stuk opgemaakte tekst - Text met afbeelding text met een afbeelding - Alleen een afbeelding - Lijst een genummerde lijst of met punten - Tabel een tabel - Document(en) Word, Exceel, PDF, etc - Multimedia voor het plaatsen van flash of films - Site structuur een overzicht van pagina s met doorlink - HTML als je iets speciaals wilt en je kunt HTML, ga je gang... - Mailform een e-mail formulier met alle opties - Search form een zoek veld om door de site (of delen van) te zoeken - Login form dit is om op een beveiligd deel te komen (niet toegankelijk) Opdracht Kies voor een normaal text element, geef een titel voor deze text en typ een stukje text. Maak teksten vet en cursief en sla het op en bekijk meteen de pagina met 2008 www.triggr.nl 12
Training website beheer 13 Content elementen (2) We hebben nu een stukje tekst geplaatst. Nu kunnen we daar ook een afbeelding bij plaatsen. Dit kunnen we doen door een nieuw content element te plaatsen, maar we kunnen ook het text element omzetten naar een text met afbeelding element. Opdracht Open het juist gemaakt element (of het staat nog open). Boven in het content element staat een drop-down met text. Wijzig deze van text in text with image en bevestig. Nu krijgen we onder het textveld een paar nieuwe opties voor een afbeelding. Invoegen afbeelding Er staan bij sommige gemeentes op de server al een aantal afbeeldingen klaar. Dit hebben we gezien bij de inhoud van de Filelist in het linker menu. We kunnen ook kiezen nieuwe beelden rechtstreeks vanaf de eigen computer te plaatsen. Afbeelding van server Als we een afbeelding van de server willen invoegen kiezen we het mapje van deze iconen. Door op de naam van de afbeelding te klikken wordt deze toegevoegd. Afbeelding van de eigen computer Als we een afbeelding van de eigen computer willen invoegen kiezen we blader. Via de Windows verkenner kunt u de afbeelding kiezen. Deze wordt dan naar de website geladen. Vervolgens kan met de positie van de afbeelding kiezen via en kan men ook de groote van de afbeelding kiezen en eventueel de afbeelding linken met een andere pagina of URL of de foto na een klik laten vergroten naar het originele formaat. Opdracht Kies een afbeelding van de server. Ze het formaat op 200 en lijn het rechts van de text uit. Bewaar de pagina. 2008 www.triggr.nl 13
Training website beheer 14 Meer uitleg schermfuncties Nu hebben we gezien hoe we eenvoudig een tekst met afbeelding in een pagina plaatsen. Het CMS systeem geeft nog veel meer mogelijkheden die teveel zijn om hier te bespreken. Er zijn een paar zaken die ik toch even wil bespreken. Men kan elementen wijzigen vannuit het page symbool, maar men kan ook directer werken via het list symbool. Bijvoorbeel, onderstaand dezelfde pagina bekeken onder page symbool links en list symbol rechts. Onder de list-modus heeft men sneller toegang tot veel meer onderliggende elementen en kan men bijvoorbeeld ook snel in de structuur schuiven door pagina s te verplaatsen. pagina-element direct bewerken of voorvertonen pagina-element positie verschuiven pagina-element direct zichtbaar/onzichtbaar maken huidig pagina element bewerken element copieëren/knippen uitgebreide scherm-opties tonen content-element direct bewerken of voorvertonen 2008 www.triggr.nl 14
Training website beheer 15 Andere manier van beheren We hebben geleerd via de achterdeur de website te beheren. Er zijn binnen Typo3 voor bijna alles meerdere mogelijkheden om tot hetzelfde resultaat te komen. Zo ook voor het beheren. Voor eenvoudige tekstcorrecties kan men bijvoorbeeld ook de website aan de voorkant beheren. Dit doen we door in te loggen via de normale beheer login. Vervolgens gaat u naar de normale website (voorkant) en daar ziet men overal potloodjes bij de teksten en afbeeldingen staan. potlood voor direct wijzigen van content element 2008 www.triggr.nl 15
Training website beheer 16 Opbouw van de website en structuur Hieronder een kleine uitleg hoe de huidige website en structuur precies in elkaar zitten en waarom. Er wordt voor een WZSW gemeente website gebruik gemaakt van 5 templates. - homepage (vaste template) - diensten gebruiken - diensten aanbieden - project - infodiensten Deze hoofdgroepen komt men ook in de hoofdstructuur tegen. Bij de verschillende type pagina s horen verschillende symbooltjes of icoontjes. Sommige type pagina s kennen geen inhoud en kunnen daarom ook geen content elementen bevatten. Schrik dus niet als er rechts geen elementen staan. Waarschijnlijk is de pagina een shortcut. Bijvoorbeeld, onderstaande hoofdstuk-pagina. Deze pagina kan informatie bevatten voordat men in de sub-pagina s komt, maar er is gekozen hier niets te plaatsen en direct door te verwijzen naar een pagina binnenin. De reden is deels van technische aard en deels voor een gebruiksvriendelijke navigatie. Er is dus ook geen content mogelijk omdat deze pagina alleen doorverwijst. Hieronder een beetje uitleg over de iconen... huidig element is een shortcut en heeft daarom geen content. Bezoekers worden meteen doorgestuurd naar een volgende pagina. uitgeschakelde pagina. Deze is tijdelijk uitgeschakeld omdat er nog aan gewerkt wordt of tijdelijk buiten gebruik is Externe URL; dit element zorgd ervoor dat mensen meteen doorgaan naar een URL ergens op het internet, in dit geval direct naar de website van de gemeente Hilvarenbeek Storage folder; een map in de structuur. Hierin staan de template elementen waarmee het design van de website wordt bepaald. Leeg omdat u geen toegang heeft tot deze elementen. 2008 www.triggr.nl 16
Training website beheer 17 Laatste nieuws Het laatste nieuws kan op verschillende manieren in de website geplaatst worden. - content element - pagina element met conten element - via een nieuws-module en extensie conten element Als content element Elk nieuwsitem als content item in een pagina. Dan krijgt men een lange lijst van alle nieuws op 1 pagina. Niet bladeren of doorlinken, gewoon onder elkaar. kijk maar bij Dongen (dongen.wzsw.nl) 2008 www.triggr.nl 17
Training website beheer 18 Als pagina element met conten element Voor elk item een nieuwe pagina maken en op de eerste pagina een sitemap plaatsen. Dan moet men voor elk nieuwsitem een pagina én een content element aanmaken. (gilzerijen.wzsw.nl) Het nieuws wordt in de structuur opgenomen als separate pagina s en op elke pagina staat 1 item. Men kan erop klikken via het menu of men maakt ze toegankelijk via een sitemap sitemap content element om de nieuwspagina s ook IN de pagina aanklikbaar te maken. 2008 www.triggr.nl 18
Training website beheer 19 Via een nieuws-module en extensie conten element Men plaats de nieuwsitems als speciaal content element in de pagina of een map. Deze zijn niet direct zichtbaar als content element. Om deze zichtbaar te maken in een pagina moet men op de betreffende pagina een extensie content element plaatsen met een verwijzing naar de nieuws-items. (tilburg.wzsw.nl) Lijst van nieuwsberichten, nieuws content elementen alleen zichtbaar in de list modus, omdat deze niet rechstreeks in de pagina te plaatsen zijn. Nieuws-extensie conten element om de berichten in de pagina te plaatsen 2008 www.triggr.nl 19