BEKNOPTE HANDLEIDING – BUES CMS Soort CMS: Versie: Laatste wijziging:
INHOUDSOPGAVE 1. 2. 3. 4. 5. 6. 7.
Inleiding Inloggen Control Panel Pagina Administratie WYSIWYG-Editor Tips voor in het CMS Begrippenlijst
Afbeelding: BUES INSTAP CMS
INSTAP CMS 1.0 03-02-2009
HOOFDSTUK 1. INLEIDING Beheer Uw Eigen Site CMS is een platform CMS systeem. Dit wil zeggen dat het CMS vanaf 1 server wordt aangeroepen om zodoende u eigen website bij te kunnen werken. Voor het inloggen surft u altijd eerst naar de website van BUES. Op deze website kan rechts bovenaan worden ingelogd met een eigen e-mailadres en een persoonlijk wachtwoord. Meer over het inloggen leest u terug in hoofdstuk 2. Via het platform van BUES wordt ingelogd, de combinatie gebruikersnaam en wachtwoord zorgt ervoor dat u inlogt op u eigen CMS omgeving. In deze omgeving bevind zich u persoonlijk controlpanel waarin standaard de Pagina Administratie Module actief is en mogelijk ook extra modules, indien daar voor gekozen is. De wijzigingen die u aanbrengt wanneer u bent ingelogd zijn na het opslaan direct zichtbaar op u eigen website. Er zit geen vertraging in. Door bijvoorbeeld 2 internet browsers, of tabbladen naast elkaar te openen kan er direct gewisseld worden tussen het BUES Platform en u eigen website. Door na het aanpassen via het CMS, de andere browser of tabblad te openen, direct op verversen te klikken (Vernieuwen / F5) zit u het eindresultaat direct op u beeldscherm. 1 opmerking vooraf: Wanneer de pop-up van onderstaande afbeelding verschijnt dient u altijd te klikken op: Toegang toestaan. Dit is een melding van de browser waarin u werkt en kan totaal geen kwaad voor de werking van het CMS of andere processen op u pc.
Dit geld ook voor onderstaande melding:
Klik op de totale gele regel om het element te activeren, dit kan ook gegarandeerd geen kwaad. In de handleiding worden veel afkortingen en mogelijk technische omschrijvingen gebruikt. De uitleg en betekenis van deze elementen is terug te vinden in de begrippenlijst van deze handleiding.
Veel succes met het nieuwe CMS systeem en met het bijwerken van u eigen website.
HOOFDSTUK 2. INLOGGEN Inloggen tot het CMS systeem gaat via de website van BUES: www.bues.nl Rechts bovenaan op deze website bevind zich in het blauwe kader de “klanten login” (Zie afbeelding2) Op deze login kan worden ingelogd met u eigen e-mailadres en een persoonlijk wachtwoord. De gebruikersnaam kan onthouden worden voor elke keer dat u terug komt op deze website. Het onthouden is alleen van toepassing op de computer waarop u werkt, waarop cookies in u Browser op “aan” staan. Wanneer u cookies opruimt zult u een volgende keer u e-mailadres opnieuw in moeten toetsen.
Afbeelding: Klanten login + wachtwoord vergeten functie. WACHTWOORD VERGETEN Indien u het CMS wachtwoord vergeten bent, of niet meer onthouden zijn doordat mogelijk cookies zijn opgeruimd op u PC kunt u gebruik maken van de wachtwoord vergeten functie. Deze bevind zich eveneens in de Klanten login. Door op wachtwoord vergeten? Te klikken verschijnt er automatisch een nieuw kader in de pagina, waar u enkel en alleen het e-mailadres hoeft in te toetsen. Door op verstuur te klikken wordt binnen enkele ogenblikken een nieuw wachtwoord toegezonden. WACHTWOORD AANPASSEN Wanneer u bent ingelogd kunt u zelfstandig u wachtwoord aanpassen in de Profiel opties (zie screenshot volgende pagina) EXTRA LOGINS Voor het Instap CMS zijn maximaal 2 users in te zetten
HOOFDSTUK 3. CONTROLPANEL Het BUES Control Panel is het hart van het CMS systeem. Via dit panel kunnen de aanwezige modules benadert worden om zodoende de inhoud van u website te bewerken. Standaard is de Pagina Administratie module inbegrepen in het Control Panel. Met deze module kunt u elke tekstpagina van u website bewerken. Meer over deze module wordt in hoofdstuk 4 nader toegelicht. Het Control Panel van het BUES Instap CMS bevind zich altijd aan de linkerkant van de pagina. Onder elkaar worden de aanwezige extra modules opgesomd. Door op de naam van de module te klikken opent zich aan de rechterkant de betreffende module om u aanpassingen of toevoegingen door te voeren. (Zie afbeelding)
Afbeelding: Control Panel BUES Instap CMS (Status: ingelogd) Op bovenstaande afbeelding bevind zich aan de linkerzijde het Control Panel, met daarin de optionele Pagina Administratie SEO module. Deze SEO module is niet standaard, de Pagina Administratie standaard wel. De extra modules weergegeven in dit voorbeeld zijn: Fotoalbum, Gastenboek en Nieuws module. Rechts staan de Profiel opties. Hier kunt u het login wachtwoord aangepast. Links onderaan kunt u uitloggen als u klaar bent met de updates.
HOOFDSTUK 4. PAGINA ADMINISTRATIE MODULE De Pagina Administratie module is de standaard module in het BUES CMS systeem. Deze module bevat de WYSIWYG-Editor waarmee teksten kunnen worden aangepast, afbeeldingen e.d. kunnen worden ingevoegd etc. De editor bevat vele functionaliteiten en opties die u wellicht bekend voorkomen uit Microsoft Word of Outlook. Op onderstaande afbeelding ziet u een voorbeeld van deze Pagina Administratie module. Meer uitleg over de WYSIWYG-Editor vind u in hoofdstuk 5.
Afbeelding: Pagina Administratie module + WYSIWYG-Editor + Diverse extra modules
PAGINA SELECTEREN Bij de Pagina Administratie module kunt u via de speciale dropdownbox alle pagina’s met slechts 1 click oproepen om ze daarna te bewerken. Deze dropdownbox is in bovenstaande afbeelding te zien. Deze bevind zicht bovenaan, daar waar de regel “Over ons” in het blauw is gekleurd. “Over ons” is dus een pagina van de website, die zodoende geselecteerd wordt om te gaan bewerken.
NIEUWE PAGINA TOEVOEGEN Via de Pagina Administratie module kunnen ook nieuwe pagina’s worden aangemaakt. Bij het aanmaken van een nieuwe pagina kunt u zelf een “Paginanaam” invoeren en een “koptekst”. De koptekst staat voor de titel van de pagina, deze is niet verplicht in te vullen, paginanaam wel. De koptekst kan worden voorzien van een SIFR module zodat elk gewenst lettertype, hoe sierlijk het ook is, op koppen kan worden ingezet.
Afbeelding: Nieuwe pagina toevoegen + benodigdheden (Pagina Administratie module)
De nieuwe pagina’s die via de Pagina Administratie module worden aangemaakt worden niet automatisch meegenomen in de navigatie van de website. Er wordt niet automatisch een navigatiebutton aangemaakt. De toegevoegde pagina is vervolgens op te roepen via de interne Quicklink optie in de WYSIWYG-Editor. Deze quicklink optie wordt nader besproken in dit hoofdstuk 5. Bij het aanmaken van de pagina kan direct tekst en desgewenst een afbeelding worden ingevoegd zodat er altijd iets zichtbaar is op de pagina wanneer u de pagina via de knop “Toevoegen” toevoegt. Wanneer een pagina met naam is toegevoegd, dan is deze ook direct aan de Quicklinks optie toegevoegd.
STATUS BEPALEN Als nieuwe pagina’s via het CMS worden aangemaakt kan er vooraf gekozen worden of dat de pagina weergegeven mag worden of niet. Dit is te doen bij de optie Status. Standaard staat de status op “Open” omdat de pagina toch eerst aangeroepen moet worden via een interne link voordat een bezoeker de inhoud kan zien. Met deze optie kunnen alle pagina’s, voor bijvoorbeeld onderhoud, tijdelijk worden “Gesloten”.
Afbeelding: Weergave enkele pagina’s met “status” Open (blauw) en Gesloten (rood) + bewerk opties
HOOFDSTUK 5. WYSIWYG-Editor Op onderstaande Afbeelding 1 ziet u in een opslag wat bedoeld wordt met de WYSIWYG-Editor
Afbeelding 1: Standaard WYSIWYG-Editor
Via de WYSIWYG-Editor kunnen alle pagina’s in de website worden bewerkt. Voor sommige modules wordt een basis versie van de editor ingezet. Deze ziet u op de volgende afbeelding
Afbeelding 2: Basis editor De basis editor wordt af en toe in de losse optionele modules gebruikt. Deze is bedoeld om enkel en alleen tekst te plaatsen die benodigd is, bijvoorbeeld als omschrijving bij een fotoalbum of een inleidende tekst voor een nieuwsbericht.
WYSIWYG EDITOR LEGENDA Op de volgende pagina’s worden alle buttons uit het CMS systeem uitgelegd. Sommige opties zijn met slechts een paar woorden of zinnen te omschrijven. Andere opties hebben extra mogelijkheden, deze worden dan later omschreven en besproken met behulp van afbeeldingen. De buttons staan op een willekeurige volgorde.
Knippen (Knippen van tekst uit de pagina tekst om te plakken in een nieuwe alinea of nieuwe pagina)
Kopiëren Kopiëren van tekst uit pagina tekst om opnieuw te plakken in een nieuwe alinea of pagina.
Plakken Indien u via de knoppen: kopiëren of knippen een tekst heeft geselecteerd, kunt u deze tekst opnieuw plakken in de CMS pagina’s. !!! ATTENTIE !!! Ook teksten vanuit b.v. Word of een e-mailbericht kunnen met deze optie geplakt worden in een pagina. Wij adviseren niet direct uit Word of een e-mailbericht te plakken aangezien dit mogelijk schadelijke HTML en opmaak code bevat waarmee de editor niet goed om kan gaan. Meer informatie over het plakken uit Word of een e-mailbericht is na te lezen bij het volgende icoontje: HTML opruimen.
HTML opruimen (Verwijder opmaak) Met deze knop kan, wanneer u toch geplakte tekst uit Word, een “oude website” of een e-mailbericht heeft geplakt in de editor, de tekstopmaak tot zover mogelijk worden opgeschoond. !!! ATTENTIE !!! Wij adviseren om teksten gekopieerd vanuit Word, een “oude website” of een e-mailbericht eerst te plakken in Windows kladblok/notepad. Vanuit dit kladblok kunt u vervolgens de tekst weer kopiëren en plakken in de CMS Editor. Dan zijn de resultaten en instellingen van de weer te geven pagina altijd optimaal. Het beste is om van begin af aan elke pagina van teksten te voorzien in de editor.
Ongedaan maken Met deze optie kunt u stappen terug wandelen. Zo kunnen bijvoorbeeld foutjes met 1 klik weggehaald worden, zonder dat u helemaal opnieuw moet beginnen.
Opnieuw Met deze optie kunt u stappen vooruit maken, indien vooraf gebruik is gemaakt van de “Ongedaan maken” functionaliteit.
Genummerde opsomming Eenvoudig een genummerde opsomming toekennen aan belangrijke opties, mededelingen of andere punten. Door opnieuw op de knop te klikken haalt u de opsomming er vanaf.
Ongesorteerde opsomming Eenvoudig een ongesorteerde opsomming toekennen aan belangrijke opties, mededelingen of andere punten. Door opnieuw op de knop te klikken haalt u de opsomming er vanaf.
Hyperlink Hyperlinks aanmaken naar websites van derden of interne Quicklinks aanmaken naar interne pagina’s. Hyperlinks zijn ook toe te passen op teksten en afbeeldingen.
Hyperlink verwijderen Aangemaakte hyperlinks, zowel intern als extern verwijderen.
Bestandsbeheer Hiermee krijgt u toegang tot het CMS upload systeem waar afbeeldingen (JPG, JPEG, GIF en PNG), document bestanden (PDF .DOC .XLS .PPT .DOCX .XLSX etc) geupload kunnen worden in het CMS. Eveneens krijgt u hier toegang tot de Image Resize en Rotate module.
Afbeelding eigenschappen Met deze optie kunnen de eigenschappen van een afbeelding worden aangepast of ingegeven zoals o.a. naam, randen om foto, horizontale en verticale ruimte en positie. Ook de alternatieve tekst voor de zoekmachines is hier in te geven.
Flash Via deze module zijn flash movies (bestanden) eenvoudig in de pagina toe te voegen
Horizontale lijn Horizontale lijn plaatsen in de pagina. Deze is altijd 100% in de breedte (Horizontaal)
Vet Teksten dik drukken (Bold)
Schuingedrukt Teksten schuin zetten (Italic)
Onderstrepen Teksten onderstrepen (Underline)
Strike through Teksten doorstrepen
Links Tekst uitlijnen naar links
Midden Tekst uitlijnen vanuit het midden
Rechts Tekst uitlijnen naar rechts
Justify Tekst uitlijnen over totale tekstbreedte van links naar rechts (Uitvullen)
Inspringen Tekstkader, zin of titel in laten springen
Terugspringen Tekstkader, zin of titel terug laten springen
Voorgrond kleur Voorgrond kleur van de tekst instellen !!! ATTENTIE !!! Alle websites worden opgeleverd met een vooraf ingesteld lettertype en een letterkleur door middel van CSS stijlsheets. Zo worden de standaard ingestelde kleuren automatisch weergegeven. Met deze functie kunt u teksten alsnog een nieuwe kleur geven.
Achtergrondkeur Achtergrond kleur van de tekst instellen.
Superschrift Superschrift toepassen. Bij
superschrift
gaat de tekst hoger in de zin staan zoals nu zichtbaar is.
Subschrift Subschrift toepassen. Bij subschrift gaat de tekst lager in de zin staan zoals nu zichtbaar is.
Opmaak bepalen Via de opmaak functie kan de tekst groter of kleiner gemaakt worden !!! ATTENTIE !!! Deze kolom is alleen via de hoofd CSS stylesheet aan te passen door de webprogrammeur
Alinea + headings Via de vooraf ingestelde headings kunnen koppen ingesteld worden, meestal zijn deze koppen groter en hebben standaard een andere kleur. !!! ATTENTIE !!! Deze kolom is alleen via de hoofd CSS stylesheet aan te passen door de webprogrammeur
Tabel creeren Invoegen van een tabel in de pagina, aantal kolommen, rijen en randen zijn vooraf in te stellen
Tabel eigenschappen Instellen van breedte, positie, cellen, kolommen, tussenruimte etc.
Cel eigenschappen Per cel de eigenschappen instellen zoals breedte, horizontale en verticale uitlijning etc.
Rij invoeren Extra rij invoegen aan een tabel. U dient met de cursor in de tabel te staan
Kolom invoeren Extra kolom invoegen aan een tabel. U dient met de cursor in de tabel te staan
Rij verwijderen Rij verwijderen uit een een tabel. U dient met de cursor in de tabel te staan
Kolom verwijderen Kolom verwijderen uit een een tabel. U dient met de cursor in de tabel te staan
Samenvoegen naar rechts Meerdere rijen of kolommen samenvoegen naar rechts
Samenvoegen naar onderen Meerdere rijen of kolommen samenvoegen naar onderen
Cellen horizontaal splitsen Cellen opsplitsen in 2 cellen, horizontaal
Cellen verticaal splisten Cellen opsplitsen in 2 cellen, verticaal
Overschakelen naar rand Indien in de pagina tabellen worden gebruikt zonder rand, dan zijn de randen via deze knop tijdelijk te activeren. Bij het opslaan blijft de tabelrand zoals die was, de rand wordt niet mee opgeslagen.
YouTube plugin Eenvoudig YouTube filmpjes inladen in u eigen website via de YouTube url die te kopieren is vanaf de Youtube website. Opmerking: De film speelt alleen af aan de voorzijde van de website, voor de bezoeker. De film zelf is niet zichtbaar in de admin van het CMS. Wanneer YouTube een film van zijn eigen website verwijderd is het filmpje niet langer meer zichtbaar in u eigen website.
Youtube filmpje geven enkele W3C errors aan, dit komt vanaf het YouTube platform. Dit is niets ernstigs maar vermelden dit even vooraf. Wij adviseren een Videomodule af te nemen.
Lightbox image vergroting Met 1 klik een lightbox vergroting toepassen op een afbeelding in de pagina. Voor deze functie zal er via de image rotate module eerst een thumbnail en een large image aangemaakt dienen te zijn. Meer uitleg over het aanmaken van die bestanden vindt u verderop terug in deze handleiding.
HOOFDSTUK 6. UITLEG WYSIWYG-EDITOR EXTRA OPTIES In de editor zijn verschillende buttons die voor een vervolg scherm zorgen met diverse kenmerken, mogelijkheden, eigenschappen en opties. Zo kunt u o.a. hyperlinks aanmaken, afbeeldingen invoegen, teksten kleur geven, tabellen invoegen en bestanden ter download plaatsen. Deze opties worden uitgelegd a.d.h.v. een omschrijving en aangevuld met Afbeeldings.
EXTERNE HYPERLINK AANMAKEN Afbeelding 1: hyperlink eigenschappen
Afbeelding 2: Doel instellen
Wat dient u te doen, of in te vullen voor een hyperlink: Selecteer een tekst (en of een afbeelding) met de muis en klik op de “hyperlink” knop. Type: Link (Laten staan) URL: Naam van de website. (http://www.naamvandewebsite.nl) Quick links: Bij deze optie niet benodigd Doel: Doel Instellen via de dropdown functie op: Nieuw Scherm (_Blank) (Zie Afbeelding 2) Titel: Naam van de hyperlink invoeren, bijvoorbeeld: Bekijk website van…… Ok: Link wordt aangemaakt, u keert automatisch terug in de pagina waar u bezig was. Op de volgende pagina een voorbeeld van een interne link aanmaken. http:// niet vergeten in te vullen bij de url.
INTERNE QUICKLINKS AANMAKEN Via dezelfde eigenschappen van de hyperlinks kunnen eenvoudig interne links van pagina naar pagina worden aangemaakt. Handig voor o.a. “Lees meer” pagina’s. Via de Quicklinks kunt u naar elke willekeurige pagina in de website linken, die is aangemaakt in de Pagina Administratie Module. Wederom aan de hand van een afbeelding en een omschrijving de uitleg hiervan: Afbeelding 1: hyperlink eigenschappen
Afbeelding 2: Quicklink selectie
Wat dient u te doen, of in te vullen voor een quicklink: Type: URL: Quick links: Doel: Titel: Ok:
Link (laten staan) Bij deze optie niet benodigd Selecteer een pagina waar u naar wilt linken via de dropdownbox (Zie Afbeelding 2) Doel staat standaard goed ingesteld (dit frame (_self) Naam van de hyperlink invoeren, bijvoorbeeld: Bekijk pagina van Model Top Link wordt aangemaakt, u keert automatisch terug in de pagina waar u bezig was.
TIP Wij adviseren u bij elke link die wordt aangemaakt de Titel in te voeren. Zo kunnen zoekmachines de naam van een link inlezen en beoordelen. Op de volgende pagina bevind zich extra uitleg voor het aanmaken van een Anker.
ANKERS MAKEN Sommige pagina’s bevatten veel content verdeeld over verschillende onderwerpen. Om snel naar een bepaald onderwerp door te schieten, zonder zelf te moeten scrollen, is het mogelijk een anker systeem aan te maken. Een anker systeem is een soort van interne navigatie van een onderwerp naar de tekst verderop in de pagina. Wat dient u te doen, om een anker systeem aan te maken: Eerst dient u alle onderwerpjes die op de pagina omschreven gaan worden onder elkaar op te sommen. Indien u alle onderwerpjes heeft opgesomt raden wij aan om voor elk onderwerp direct de tekst die daarbij hoort in de pagina weg te schrijven. Indien u daar mee klaar bent kan het aanmaken van ankers beginnen. Ga voor het aanmaken van een anker voor een van de door u zelf aangemaakte onderwerpen staan, zie Afbeelding 1. Als u voor het onderwerp staat klikt u op de “hyperlink” knop. Dan opent opnieuw het hyperlink eigenschappen venster, zie Afbeelding 2. Maak nu de keuze: Anker, via de dropdownbox. Afbeelding 1: Anker inzetten voor onderwerp
Afbeelding 2: Aanmaken naam van Anker.
Afbeelding 3: Anker benoemen
Na de anker selectie verschijnen de Anker opties, zie Afbeelding 3. Hier kunnen de naam en de titel van een anker worden ingegeven. Bij naam mogen géén spaties en bijzondere tekens zoals o.a. komma’s gebruikt worden, dan werkt het systeem niet. Alle ankers dienen vooraf te worden aangemaakt, voordat er gelinkt kan worden.
Linken naar een anker kan beginnen wanneer alle ankers zijn opgemaakt in de pagina. Om een link te kunnen maken van een onderwerp naar een “Anker” dient eerst het onderwep zelf geselecteerd te worden (zie Afbeelding 4). Met de muis kunt u van rechts naar links eenvoudig een onderwerp (stukje tekst) selecteren. Als het stukje tekst geselecteerd is, dan kleurt het zwart (met de tekst in wit), als het zwart is kunt u in de editor op de “Hyperlink” button klikken. Afbeelding 4: selecteren onderwerp
Afbeelding 5: Linken naar “aangemaakt” anker
Na het klikken op de Hyperlink optie, opent het Hyperlink eigenschappen venster. Uit de dropdown kunt u nu ook kiezen voor: “Link naar anker” (zie Afbeelding 5). Klik niet op OK Na het selecteren van “Link naar anker” opent er een nieuw scherm waar een “Anker” dropdownbox verschijnt (zie Afbeelding 6). Wanneer u klikt op deze dropdownbox verschijnen alle aangemaakte Ankers (Afbeelding 7)
Afbeelding 6: Anker dropdownbox verschijnt
Afbeelding 7: Dropdown keuze uit aangemaakte ankers.
Selecteer het gewenste anker en klik vervolgens op OK. Een anker is nu aangemaakt. TIP Vergeet dan de pagina zelf ook niet op te slaan, als u dat vergeet is al het werk voor niets geweest.
BESTANDEN INVOEGEN Via “bestandsbeheer” (zie Afbeelding 1) is het mogelijk vooraf bestanden in te laden zodat deze later op elke willekeurige pagina kunnen worden ingevoegd. Bestanden die via “Bladeren” geupload kunnen worden zijn: Images bestanden: JPG – JPEG – GIF – PNG* Files bestanden: PDF, Word, Excel, PowerPoint Flash bestanden: SWF Om orde en structuur te krijgen in de bestandsbeheer module kan er onderscheid gemaakt worden tussen de verschillende bestanden die worden geupload via de file manager (zie Afbeelding 2). Zo kunt u met de filemanager dropdownbox drie mappen selecteren om in te uploaden. Dit zijn de volgende drie mappen: Images, Files en Flash movies. Per map kunt u rechts aangeven welke bestanden worden weergegeven. Afbeelding 1: Bestandsbeheer met de opties: Verwijderen, bewerken en hernoemen.
Afbeelding 2: Bestandsbeheer – File manager
AFBEELDING INVOEGEN Via “bestandsbeheer” kunt u geuploade afbeeldingen plaatsen in elke willekeurige webpagina. U hoeft de afbeelding alleen maar op te zoeken, te selecteren (met de muis 1x aanklikken) en via de button OK wordt de afbeelding direct in de pagina geplaatst waar u de aktie onderneemt. Voor het gemak zit er een ingebouwde preview functie ingebouwd voor afbeeldingen, zodat u vooraf ziet of dat het de juiste afbeelding betreft. Andere afbeelding eigenschappen worden weergegeven zoals: bestandsnaam, grootte, datum aangepast en afmetingen. Verder bestaat er de mogelijkheid de afbeelding te downloaden.
AFBEELDING EIGENSCHAPPEN Wanneer een afbeelding is geplaatst in de pagina kunt u daarna de afbeelding positioneren zoals u wenst via de “Afbeelding eigenschappen” (zie Afbeelding 1) button in het CMS. Dan volgt onderstaande eigenschappen scherm, met daarin verschillende functies. Afbeelding 1: Afbeelding eigenschappen.
Toelichting afbeelding eigenschappen scherm Bron: Alternatieve tekst: Titel: Breedte: Contrain proportions: CSS class: Uitlijnen: Rand: Hor. en Vert. ruimte
Niet bewerken, deze regel is automatisch gevuld Geef de naam of titel van de afbeelding in (zoekmachine vriendelijk) Geef de naam of titel van de afbeelding in (zoekmachine vriendelijk) Hoogte en breedte worden automatisch weergegeven van de afbeelding Aangevinkt laten, functie niet benodigd Standaard ingesteld op Normaal (Middels maatwerk kan dit aangepast worden) Lijn de afbeelding uit naar o.a. links, rechts, midden etc. Standaard staat rand op 0. Indien u een randje om de foto wenst getal in te geven. Ruimte horizontaal (links en rechts) en verticaal (boven en beneden) Door bijvoorbeeld 5 in te vullen zal de tekst nooit een afbeelding aanraken.
Een afbeelding verkleinen kan met de “Image resize & rotate module”. Deze optie maakt o.a. van een grote zware foto een lichte webkwaliteit foto. Meer uitleg over deze functionaliteit is terug te vinden op de volgende pagina.
IMAGE RESIZE & ROTATE FUNCTIE Wanneer u afbeeldingen rechtstreeks vanaf u fotocamera op de computer zet, vervolgens deze foto direct inlaad in de “bestandsbeheer module” is de kans zeer groot dat deze originele foto groter is dan 1MB. Deze originele afbeelding dient eerst bewerkt te worden voordat deze wordt geplaatst in de webpagina. Afbeelding 1: Afbeelding in “bestandsbeheer” selecteren
Om een afbeelding te verkleinen selecteert u eerst de afbeelding, zie Afbeelding 1. Vervolgens klikt u op het tabblad: Image resize, of onderaan op de knop “Bewerken”. Dan opent het volgende scherm: Afbeelding 2: Resize en Draaien functionaliteit
De huidige formaten worden direct weergegeven achter: Resize to. Door in dit vlakje de gewenste breedte of hoogte in te geven en vervolgens op de knop: Resize te klikken ziet u dat de afbeelding verkleint wordt. Wanneer de afbeelding verkleint is kunt u links onder op de knop: “Opslaan” klikken. Let op: Alle bewerkte afbeeldingen worden automatisch opgeslagen in de map: thumbs. Dit gele mapje is altijd zichtbaar in de “bestandsbeheer module”, in de map “images”.
THUMBNAIL EN LARGE IMAGE Indien u dubbelklikt op het mapje: thumbs, dan schiet u direct in dit mapje en ziet u de bewerkte afbeeldingen staan. Voor de naam van de afbeelding wordt automatisch thumb_ of large_ gezet. Dit doet het systeem omdat zo de Lightbox vergroting wordt bepaald. Thumb staat voor thumbnail, dat is een kleine afbeelding. Large staat voor groot en dat is de grote afbeelding. Deze 2 zijn benodigd voor de vergroting van een foto. De resize module maakt van afbeeldingen onder de 400 breedte automatisch een thumb_ afbeelding aan. Is het formaat groter dan 400 breed dan wordt er een large_ afbeelding aangemaakt.
HERNOEMEN Indien u de afbeeldingnaam wilt hernoemen dan is dat mogelijk. Dit kan zeer simpel door op de knop “Hernoemen” te klikken. Dan opent een nieuw venster waar u zelf een nieuwe naam kunt ingeven. Let wel op, de naam dient altijd te volgen met .jpg / .png / .gif Het hernoemen geldt alleen op de omschrijving voor de punt.
AFBEELDING DRAAIEN Wanneer een foto liggend is gemaakt en u deze staande in de website wilt invoegen is dat mogelijk met de “Draaien” functie in de module. Selecteer daarvoor de gewenste afbeelding en klik op 1 van de pijltjes rechts boven aan om linksom of rechtsom te draaien. Klik daarna op opslaan en de afbeelding wordt opgeslagen zoals u wilt en uiteraard ook in webkwaliteit. Via “Hernoemen” kan large_ of thumb_ uit de naam gehaald worden.
LIGHTBOX VERGROTING AFBEELDING VERGROTING TOEPASSEN MET LIGHTBOX FUNCTIONALITEIT Voor het gebruik van de “Lightbox vergroting” zijn altijd een thumb_ en een large_ bestand benodigd. Een afbeelding voor de Lightbox vergroting dient vooraf altijd geresized te worden naar een kleine en een grote foto via de resize module. De namen thumb_ en large_ moeten altijd aanwezig zijn voor de Lightbox vergroting en de 2 bestanden dienen ook altijd in de map thumbs te staan. Hernoemen van afbeeldingen in de hoofdmap kan wel, maar door daar zelf thumb_ en large_ aan te maken via hernoemen zal de lightbox niet werken. De optie haalt enkel en alleen zijn bestanden uit de map: thumbs. In de Lightbox fotovergroting is “Tip een vriend” een standaard inbegrepen optie. Deze optie zorgt ervoor dat bezoekers een foto door kunnen sturen naar een vriend(in). Deze zal wellicht ook weer op u website terug gaan komen en dat is positief voor de traffic die een website genereert. Hoe populairder een website wordt des te vaker zoekmachines ook een kijkje komen nemen en dat is alleen maar positief voor de uiteindelijke zoekmachine resultaten.
PDF WORD EXCEL ETC. BESTANDEN TER DOWNLOAD PLAATSEN Het invoegen van een bestand ter download is heel eenvoudig. Om een bezoeker bijvoorbeeld een Word of PDF document te laten downloaden om integraal de inhoud te lezen dan kunt u zelf een bestand ter download plaatsen in de webpagina. Het aanmaken van een download bestand is deels hetzelfde als een hyperlink aanmaken. Eerst dient u een stukje tekst te selecteren of een afbeelding waaraan de download gekoppeld mag worden. Daarna klikt u op de “hyperlink” knop en dan opent het hyperlink eigenschappen scherm, zie onderstaande Afbeelding 1. Afbeelding 1: Hyperlink eigenschappen + toegang naar “bestandsbeheer”
Achter het veld URL: staat een vierkantje met daarin 3 stipjes. Klik vervolgens op dit vierkantje, hierna opent het “bestandbeheer” scherm. Maak dan een selectie op: Files. Daarna worden o.a. PDF en Word bestanden zichtbaar. Selecteer hier het te downloaden bestand en klik op OK. In het onderstaande voorbeeld is een PDF bestand geselecteerd. Daarna valt u direct terug op het standaard eigenschappen scherm, waar u de titel van de download in kunt vullen. Verder dient u het Doel op Nieuw venster (_Blank) in te stellen. Dan wordt het te downloaden bestand in een nieuw venster geopend en is u website nog steeds zichtbaar als met het nieuwe venster weg klikt. Afbeelding 2: Weergave / overzicht files
AANPASSEN VAN TEKSTKLEUR Wanneer er wordt geklikt op het kleuren opties om de tekstkleur aan te passen (zowel voorgrond als achtergrond kleur) dan opent zich een kleurenpalet in een nieuw venster, zie Afbeelding 1. Afbeelding 1: Kleurenpalet
Uit dit palet kunt u middels de muis een kleur naar keuze aanwijzen en via OK toekennen aan de tekst die u had geselecteerd. Als extra optie kunt u ook RGB, HSB en een HTML kleurcode ingeven. Zo kunt u alle kleuren aanmaken en toepassen.
EXTRA: WISSELENDE HEADERS Indien in de website een fadeshow is ingebouwd, dan is het mogelijk deze te koppelen aan de Bestands Beheer Module. In deze module zit standaard de map: “Thumbs”. Indien er een CMS fadeshow is verwerkt in de website dan is er in de module een extra map te vinden genaamd: “Visuals”. De fadeshow kan zodoende via de map visuals zelf geupdate worden met nieuw fotomateriaal door foto’s daar in up te loaden. Door nummers te gebruiken als 1 – 2 – 3 – 4 etc. leest de module de foto’s automatisch op volgorde uit. Om een nieuwe afbeelding te uploaden (bijvoorbeeld 1.jpg) dient de oude 1.jpg eerst verwijderd te worden.
TABEL AANMAKEN Tabellen zijn ideaal voor het aanmaken van nette overzichten in de webpagina. Zo kunt u rijen en kolommen invoegen waar data in gezet kan worden. Grote voordeel is dat alle data netjes lijnt. Vooraf dient u voor uzelf even te schetsen hoeveel kolommen u denkt nodig te hebben, dat werkt het meest prettig. Er kunnen weliswaar via de tabel opties extra rijen en kolommen worden bijgemaakt, maar het werkt handiger als dit vooraf wordt ingegeven. Dan kunnen alle instellingen makkelijker worden verwezenlijkt. Bij het aanmaken van een tabel klikt u op de Tabel creëren knop, het volgende scherm verschijnt dan: Afbeelding 1: Tabel eigenschappen
Afbeelding 2: cel eigenschappen
TABEL EIGENSCHAPPEN Via het tabel eigenschappen scherm kunt u vooraf de volgende elementen instellen: Rijen: Aantal horizontale velden Kolommen: Aantal verticale velden Breedte: Breedte in % of Pixels (100% is gehele pagina breedte) Hoogte: Niet van toepassing Rand: Geef getal in. Breedte is in pixels. Tabel zonder rand is 0 Cel opvulling links: Afstand in de cel tot de rand Cel opvulling rechts: Afstand buiten de cel tot de rand Achtergrond kleur: Niet aan te bevelen i.v.m. zoekmachine vriendelijkheid Achtergrond afbeelding: Niet aan te bevelen i.v.m. zoekmachine vriendelijkheid Via de vierkantjes, met daarin de 3 puntjes kunt u voor de kleur het kleurenpalet oproepen en bij de achtergrond afbeelding word de bestandsbeheer module opgeroepen om een afbeelding te selecteren.
CEL EIGENSCHAPPEN Via het cel eigenschappen scherm (Afbeelding 2) kunt u vooraf de volgende elementen instellen: CSS klasse: Staat altijd op “Normaal”. Dit dient zo te blijven Horizontale uitlijning: Positie van de tekst in de cel (Links, midden en rechts) Verticale uitlijning: Positie van de tekst in de cel (Top, midden, onder en onderste lijn) Breedte: Breedte in % of Pixels Hoogte: Niet van toepassing Regels niet afbreken: Aanvinken als u de tekstregels niet afgebroken wilt hebben Achtergrond kleur: Niet aan te bevelen i.v.m. zoekmachine vriendelijkheid Achtergrond afbeelding: Niet aan te bevelen i.v.m. zoekmachine vriendelijkheid
HOOFDSTUK 6. TIPS VOOR IN HET CMS ENTERS MAKEN Om enters tussen de teksten te maken kunt u klikken op ENTER op u toetsenbord. Om kleine enters te maken klikt u op u toetsenbord op: SHIFT + ENTER (Tegelijk) BENOEMEN VAN ELEMENTEN Alle afbeeldingen voorzien van een Alternatieve tekst en een titel (Zoekmachine vriendelijk) Alle hyperlinks voorzien van een Titel (Zoekmachine vriendelijk) AFBEELDINGEN UPLOADEN Als blijkt dat u originele camera foto’s meer dan 3MB zijn, dan kunt u ze wel via het CMS systeem importeren, maar dan duurt het aanzienlijk langer om deze in te laden. Dit komt omdat het via internet gaat en o.a. afhankelijk is van de snelheid van u eigen internet lijn. Wij adviseren u dan de foto’s vooraf te verkleinen op u pc met een software pakket wat mogelijk bij u fotocamera bij is geleverd. Hoe minder zwaar de foto is, des te sneller de upload zal zijn. GROTE OF ONGEBRUIKTE AFBEELDINGEN VERWIJDEREN Na het resizen van een afbeelding (kleine en grote afbeelding) voor de bijvoorbeeld de lightbox vergroting adviseren wij u de originele foto te verwijderen. Dit bespaard u diskspace. De bewerkte foto’s zijn vele malen lichter en blijven dan behouden in de thumbs map. YOUTUBE De YouTube plugin is een leuke extra tool. Echter wordt deze film altijd via YouTube ingeladen, deze staat dus niet fysiek op u eigen website. Als youTube beslist het filmpje van zijn server af te halen, dan is de video ook niet langer meer te bekijken op u website.
HOOFDSTUK 7. BEGRIPPENLIJST BUES: Beheer Uw Eigen Site CMS: Content Management Systeem Webbrowser: Een webbrowser (ook internetbrowser of (web)bladeraar genoemd) is een computerprogramma om webpagina's te kunnen bekijken Tabblad Onderdeel van een browser waarin meerdere webpagina’s naast elkaar geopend kunnen worden. Cookies: Cookies of magic cookies, zijn kleine beetjes informatie die een server naar de browser stuurt met de bedoeling dat deze informatie bij een volgend bezoek weer naar de server teruggestuurd wordt. Hiermee kan op een eenvoudige manier informatie over de internetgebruikers bijgehouden worden. SEO Search Enigine Optimalisation = Zoekmachine optimalisatie. (Pagina Administratie seo: Pagina administratie met extra velden om zoekmachine vriendelijke elementen zoals META TAGS per pagina toe te kunnen passen. META TAGS Metatags zijn tekstuele onderdelen van een webpagina die niet bestemd zijn voor reguliere bezoekers maar juist extra informatie bieden over de webpagina voor zoekmachines, browsers en sommige andere applicaties SIFR SIFR (Scalable Inman Flash Replacement) staat vrij vertaald voor 'schaalbare Flash vervanging' en is bedoeld om kleine gedeeltes van de tekst zoals titels, quotes en tussenkopjes te vervangen door een door de auteur gekozen lettertype, zonder dat dit lettertype geïnstalleerd hoeft te zijn op het systeem van de gebruiker.
