Inhoud. 1. Inloggen 3

Transcriptie

1

2 Inhoud 1. Inloggen 3 2. Bewerken in ABC Hoe ziet de overzichtspagina eruit Menustructuur Overige pagina s Statistieken Externe koppeling Gebruikers toevoegen/verwijderen Uitloggen 7 3. Pagina bewerken Tabbladen algemeen, afbeeldingen, configuratie, bijlagen Meta title, meta sleutelwoorden en meta beschrijving Menu titel, inhoud titel, subtitel Tekstvak en uitleg iconen Afbeeldingen Meerdere afbeeldingen tegelijk toevoegen Afbeeldingen in andere volgorde Afbeeldingen uitsnijden Bijlagen Linkmodule met links naar externe partijen 20 2

3 1. Inloggen Ga naar de website (bijv. en voeg /abc toe achter jouw domeinnaam om naar het inlogscherm te gaan (dus bijv. Bij het openen van ABC zie je een invoerscherm waarbij een aantal gegevens wordt gevraagd (afbeelding 1). Je kan nu inloggen met onderstaande logingegevens: Gebruikersnaam Wachtwoord En klik vervolgens op de knop inloggen. Afbeelding 1 Nadat je bent ingelogd kom je in het CMS waar je wijzigingen kan aanbrengen op de website. Gebruik Google Chrome als internetbrowser voor ABC3. 3

4 2. Bewerken in ABC3 2.1 Hoe ziet de overzichtspagina eruit Na het invoeren van de gebruikersnaam, het wachtwoord en het klikken op de knop inloggen kom je op het hoofdscherm van ABC3. Je ziet de volgende gedeeltes in het hoofdscherm (afbeelding 2): 2.2 Menustructuur 2.3 Overige pagina s 2.4 Statistieken 2.5 Externe koppeling 2.6 Gebruikers 2.7 Uitloggen Afbeelding 2 4

5 2.2 Menustructuur In de menustructuur vind je alle elementen van de website, zoals de pagina s, subpagina s, artikelen, nieuwsberichten, afbeeldingen e.d. De menustructuur is te zien in afbeelding 3. Het hoofdmenu dat doorgaans horizontaal op de website staat, vind je van boven naar beneden in ABC. Afbeelding 3 Item toevoegen met de groene plus ( ) pagina, subpagina, artikel, nieuwsitem etc. Binnen de menustructuur is het mogelijk om een pagina, subpagina, artikel of bijvoorbeeld nieuwsbericht toe te voegen. De onderdelen die voor jouw website relevant zijn worden getoond. In de bestaande menustructuur staat achter elk item in kleine cursieve letters om welk type het gaat. Onder een hoofdmenu-pagina (die in het menu staat) kan een subpagina worden geplaatst en onder een subpagina een artikel of bijvoorbeeld nieuwsbericht. Door op het groene plusteken te klikken naast een bestaande pagina kun je een pagina of artikel toevoegen. Rechts van de menustructuur verschijnt een keuzebalk, zie afbeelding 4, waarin je dient aan te geven welke toepassing je wenst te maken. Klik daarna op de groene button Opslaan. Afbeelding 4 5

6 Item bewerken ( ) Door op het potloodje te klikken, kun je een item bewerken. Hierover meer in hoofdstuk 3 Pagina s bewerken. Pagina activeren of deactiveren ( / ) Je kunt zelf beslissen welke pagina s wel of niet zichtbaar zijn op jouw website. Door op het play-teken te klikken activeer je de betreffende pagina. Het play-teken veranderd nu in een pauzeteken. Dit pauzeteken kun je aanklikken als je de pagina wilt deactiveren. Gehele menu uitvouwen Tevens zijn er subpagina s aangemaakt (of nog zelf aan te maken), welke ingesprongen worden weergegeven. Zie afbeelding 5. Met het plus- of minteken in het kleine vierkantje ( / ) kun je het gehele menu (oftewel onderliggende pagina s, artikelen, nieuwsberichten e.d.) uitvouwen. Afbeelding 5 Item omhoog verplaatsen Door op een (sub)pagina te klikken en deze te verslepen, kan de volgorde van de items worden aangepast. Zo kun je zelf bepalen op welke positie de subpagina s in het (sub)menu van de website komen te staan. Door met ingedrukte muisknop een subpagina omhoog te verslepen, schuift het item één of meerdere plaats(en) naar boven in het menu. Je verhoogt hiermee eigenlijk de prioriteit van het item. Item omlaag verplaatsen (niet in alle modules) Door met ingedrukte muisknop een subpagina omlaag te verslepen, schuift het item één of meerdere plaats(en) naar beneden in het menu. Je verlaagt hiermee eigenlijk de prioriteit van het item. Item verwijderen met de rode min ( ) pagina, artikel, nieuwsitem etc. Door op het rode minnetje te klikken, kun je een item verwijderen. Je krijgt na het klikken eerst nog de vraag of je zeker weet dat je het item wilt verwijderen. Bij het drukken op OK wordt het item verwijderd en bij annuleren wordt er niets gedaan. Door deze tussenstap kun je vrijwel nooit iets per ongeluk verwijderen. 2.3 Overige pagina s De items die onder Overige pagina s staan worden niet getoond in de menubalk. Dit zijn losse onderdelen, zoals de algemene voorwaarden, afspraakformulieren, social media (bijvoorbeeld Tweets). Het toevoegen, uitvouwen, aanpassen of verwijderen van deze items gaat exact hetzelfde als bij de menustructuur. Zie voor uitleg van diverse iconen hoofdstuk 2.2 Menustructuur. 6

7 2.4 Statistieken De items die onder Statistieken staan bevatten handige resultaten van de website, zie afbeelding 6. Hier staan het aantal bekeken pagina s, aantal bezoeken, pagina s per bezoek, weigeringspercentage, gemiddelde tijd op de website en het aantal nieuwe websitebezoekers. Afbeelding Externe koppeling Via externe koppelingen ga je naar de externe koppelingen die gekoppeld zijn aan jouw website. Een externe koppeling kan Google Analytics zijn, maar ook bijvoorbeeld social media, zoals Twitter. Met de Twitter functie kun je gemakkelijk berichten delen die je ook op jouw website plaatst. 2.6 Gebruikers toevoegen/verwijderen Door op gebruikers (afbeelding 7) te klikken navigeert u naar een overzicht van de gebruikers. Hier is het mogelijk om een gebruiker of beheerder toe te voegen of te verwijderen. Wanneer u een gebruiker toevoegt, wordt tevens gevraagd om een wachtwoord. Afbeelding Uitloggen Door op de zeshoekige uitlogknop te klikken, verlaat u ABC (afbeelding 7). 7

8 3. Pagina bewerken Om een pagina te bewerken klik je op het potlood voor één van de items uit de menustructuur/overige pagina s. Je komt in de teksteditor van de gekozen pagina, zie afbeelding 8. Afbeelding 8 8

9 3.1 Tabbladen algemeen, afbeeldingen, configuratie, bijlagen Je ziet de volgende tabbladen: algemeen, afbeeldingen, configuratie en in sommige gevallen bijlagen. In principe zijn de tabbladen algemeen en afbeeldingen voldoende om jouw bewerking uit te voeren en kun je de andere opties buiten beschouwing laten. Afbeelding 9 Onder het tabblad algemeen kun je tekst wijzigen, toevoegen of verwijderen. Boven aan het overzicht vind je het type, bijvoorbeeld een pagina, artikel of nieuwsbericht. (afbeelding 8 + 9). Daaronder staat de plaats- en wijzigingsdatum van de betreffende pagina. Daarna zie je de URL (naam van de websitepagina) en aan welke websitepagina het bericht gekoppeld is. Daaronder zie je invoervelden, zoals de metatags, titels en het tekstvak waarin je tekst kunt plaatsen en wijzigen. Wijzigingen worden pas definitief doorgevoerd wanneer je klikt op de groene button Meta titel, meta sleutelwoorden en meta beschrijving Om er voor te zorgen dat je website goed wordt gevonden in zoekmachines (bijvoorbeeld Google) is het sterk aan te raden om de metatitel, meta sleutelwoorden en meta beschrijving te vullen. De teksten in de meta-velden zijn niet zichtbaar op de website, maar wel in de zoekresultaten van Google. Het is belangrijk om bij het vullen van de website al goed na te denken over de vindbaarheid. Meta Titel De meta titel is de tekstregel die je op twee plaatsen terug ziet: (1) in het tabblad van je website en (2) als koppen van de zoekresultaten. Het is belangrijk dat deze titel een beschrijving van de betreffende pagina is én dat het een zoeker aanspreekt tussen alle zoekresultaten in Google. De titel geeft ruimte aan ongeveer 70 karakters. Meta sleutelwoorden Meta sleutelwoorden zijn niet zichtbaar in de zoekmachine of de website, maar zorgen er wel voor dat je website/pagina als relevant wordt gezien voor die specifieke zoekwoorden. Denk dus voor iedere pagina na over zoekwoorden die mensen zullen gebruiken waarvoor die pagina een relevant antwoord is. Vul bij de zoekwoorden alléén de woorden in die relevant zijn voor de inhoud van de pagina en varieer met synoniemen, enkelvouds- en meervoudsvormen. Meta beschrijving De meta beschrijving is de tekst die in Google in beeld komt onder de titelregel. Het is van belang dat hier een tekst staat die bijdraagt aan jouw website doelen en die tevens belangrijke zoekwoorden bevat. Denk hierbij aan een tekst van ongeveer 156 karakters. 9

10 3.1.2 Menu titel, inhoud titel, subtitel De tekst die zichtbaar is op de website wordt ingevuld bij: Menu titel Bij de menu titel plaats je de titel die zichtbaar moet zijn in het menu van je website. Inhoud titel Bij inhoud titel plaats je de titel die zichtbaar moet zijn boven aan de betreffende pagina. Subtitel (is in sommige gevallen aanwezig) Bij subtitel plaats je de titel die zichtbaar moet zijn onder de inhoud titel op de betreffende pagina Tekstvak en uitleg iconen Het toevoegen van tekst is mogelijk in het tekstvak. Er zijn diverse opties om teksten te plaatsen in het tekstvak. Bekijk hieronder de uitleg van de iconen welke boven het tekstvak staan (afbeelding 10). Het is ook mogelijk om met je muis op de betreffend icoon te gaan staan voor een omschrijving. Afbeelding 10 Broncode ( ) Een broncode is de programmeertaal van een tekst, afbeelding of bijvoorbeeld video die geplaatst is in het tekstvak. Doorgaans hoeft deze knop niet te worden gebruikt. Het kan voorkomen dat je via een externe partij een HTML-code krijgt toegezonden voor bijvoorbeeld het plaatsen van een video. Door middel van deze knop kun je deze broncode zelf plaatsen. Kopiëren ( ) Wil je een stuk tekst in een ander programma gebruiken, dan kun je een stuk tekst selecteren en na het klikken op deze knop wordt de tekst in het geheugen geplaatst. In het andere programma of in het tekstvak zelf kun je klikken op de knop plakken ( ) om daar de tekst te plaatsen. Je kopieert dan dus de oorspronkelijke tekst. Plakken ( ) Heb je een tekst in het geheugen staan door eerder op de knop kopiëren ( ) te hebben geklikt, dan kun je via de knop plakken de tekst uit het geheugen plaatsen op de plek waar de muisaanwijzer staat te knipperen. Plakken als platte tekst ( ) Heb je een reeds opgemaakte tekst of een tekst opgemaakt in een ander programma zoals Microsoft Word? Kies dan in het programma waar de originele tekst staat voor kopiëren (bv. via selecteren van de tekst en vervolgens CTRL+C). Nadat dit is gedaan, kun je in het tekstvak klikken waar je deze tekst wilt hebben en klik dan op de knop Plakken als platte tekst. (Zie ook plakken via Word ) 10

11 Plakken via Word ( ) (aangeraden methode) Heb je een tekst opgemaakt in Microsoft Word dan kun je het beste de tekst op de volgende manier in de editor plakken. Bij het aanklikken van de knop plakken via Word krijg je onderstaand scherm te zien, zie afbeelding 11. Plak de tekst met CTRL+V in het tekstvak. Vervolgens kun je op de groene button OK klikken om de tekst in de teksteditor te plaatsen. Afbeelding 11 Vetgedrukte tekst ( ) Na het aanklikken van deze knop wordt de daarop getypte tekst vetgedrukt. Ben je klaar met de dikgedrukte tekst, dan klik je wederom op deze knop om de functie uit te schakelen. Heb je al een tekst, dan kun je deze selecteren en na het klikken op deze knop zal deze tekst vetgedrukt worden. Cursieve tekst ( ) Na het aanklikken van deze knop wordt de daaropvolgend getypte tekst cursief. Ben je klaar dan klik je wederom op deze knop om de functie uit te schakelen. Heb je al een tekst, dan kun je deze selecteren en na het klikken op deze knop zal deze tekst cursief worden opgemaakt. Onderstrepen ( ) Na het aanklikken van deze knop wordt de daaropvolgend getypte tekst onderstreept. Ben je klaar dan klik je wederom op deze knop om de functie uit te schakelen. Heb je al een tekst dan kun je deze selecteren en na het klikken op deze knop zal deze tekst onderstreept opgemaakt worden. Genummerde lijst ( ) Via deze knop wordt een genummerde lijst gecreëerd zoals hieronder weergegeven. Om de genummerde lijst te verwijderen selecteer je de tekst en klik je nogmaals op de knop. 1. Optie 1 2. Optie 2 3. Optie 3 Opsomminglijst ( ) Via deze knop wordt een opsomminglijst gecreëerd zoals hieronder weergegeven. Om de opsomminglijst te verwijderen, selecteer je de tekst en klik je nogmaals op de knop. Optie 1 Optie 2 Optie 3 11

12 Link invoegen/wijzigen ( ) Via deze knop kun je een link maken die verwijst naar een andere pagina, andere website of naar een bestand in de vorm van een interne link. Om een link te maken selecteer je eerst het woord of een aantal woorden die als link moeten gaan functioneren. Bij het klikken op de knop Link invoegen/wijzigen volgt een scherm, zie afbeelding 12. Afbeelding 12 Tabblad Linkomschrijving Hierbij kies je bij Linktype of het gaat om een URL (website), interne link (een pagina van je eigen website) of . De optie bij Protocol laat je staan op - Bij URL voer je de URL (naam van de externe website) in waarnaar de link moet verwijzen. - Bij Interne link voer je de betreffende pagina (URL van je eigen websitepagina) in waarnaar de link moet verwijzen. - Bij voer je het volgende in: adres, onderwerp van de en inhoud van het bericht. Tabblad Doelvenster Standaard wordt de link in hetzelfde venster geopend als waarin de website is geopend. Om dit aan te passen kun je desgewenst gaan naar het tabblad Doel waar je het doelvenster kunt opgeven. De mogelijkheden staan hieronder: Frame: dit is een optie waar wij geen gebruik van maken aangezien wij de website niet in frames opbouwen. Is jouw website wel in frames opgebouwd dan kun je hier de framenaam invullen waarin de verwijzing wordt geopend. Popup window: via deze optie kun je een extra venster openen bovenop het venster die je reeds geopend hebt en de verwijzing daarin tonen. Als aanvulling heb je een aantal opties zoals de breedte en hoogte van het popup-venster. Nieuw venster: dit is de meest gebruikte optie. Hiermee wordt de verwijzing in een nieuw venster geopend. Zelfde venster: de verwijzing wordt in hetzelfde venster geopend. Origineel venster: de verwijzing wordt in het hoofdvenster geopend. (werkzaam in tabbased browsers) Tabblad Geavanceerd Deze optie hoef je niet te gebruiken 12

13 Afbeelding in de tekst ( ) Via deze knop is het plaatsen van een afbeelding in de tekst mogelijk. Er verschijnt dan een scherm van de eigenschappen van betreffende afbeelding. Via de button Bladeren op de server kies je een afbeelding van je computer (afbeelding 13). Afbeelding 13 Je kan een afbeelding toevoegen via de bladeren op server button. Je kan daarna bij Alternatieve tekst de afbeelding een naam geven die zichtbaar wordt wanneer je met je muis over de afbeelding gaat. Ook kan je de foto een bepaalde afmeting geven. Wanneer je het slotje gesloten houdt, worden de afmetingen van de afbeelding geschaald. Als laatste kun je aangeven bij uitlijning waar de afbeelding geplaatst moet worden. Dit kan links, midden of rechts worden uitgelijnd. Tabel ( ) Tabellen worden gebruikt om tekst netjes in kolommen en rijen onder te verdelen zodat opsommingen duidelijk en overzichtelijk blijven. Klik je op het icoon om een tabel toe te voegen dan kun je de tabeleigenschappen (afbeelding 14) invoeren, zoals: aantal rijen, kolommen, randdikte, uitlijning, breedte, hoogte, celafstand, celopvulling, onderschrift, samenvatting. Klik na het invoeren van de gegeven vervolgens op de button OK. Wil je wijzigingen aanbrengen in de tabel? Ga dan met je muis op de tabel staan en klik op je rechter muisknop. Je ziet dan welke opties er zijn. Afbeelding 14 13

14 Lees meer ( ) Via deze knop plaats je een lees meer button in de tekst. Je kunt de lees meer het beste plaatsen na de eerste alinea van je tekst. Hierdoor houd je de betreffende pagina overzichtelijk. Speciaal teken ( ) Via deze knop is het plaatsen van speciale tekens mogelijk. Tekens van internet kunnen problemen opleveren. Via deze weg wordt de site optimaal gehouden en worden problemen met speciale karakters voorkomen. Klik op het gewenste teken en na het teken te hebben aangeklikt, wordt het automatisch ingevoegd. 14

15 3.2. Afbeeldingen Aan de pagina s kan je één of meerdere afbeeldingen toevoegen. Ga voor het toevoegen van afbeeldingen naar het tabblad afbeeldingen. Er verschijnt een scherm zoals bij afbeelding 15. Door op de knop bladeren te klikken, opent een nieuw venster. Je hebt de mogelijkheid om een bestand van de harde schijf te kiezen. Afbeelding 15 De afbeelding wordt geplaatst wanneer je op opslaan klikt. Eventueel kun je er voor kiezen om nog een afbeelding toe te voegen. Klik hiervoor op nog een afbeelding toevoegen en klik opnieuw op opslaan. De eerste afbeelding is altijd de afbeelding die getoond wordt in het overzicht. Toegevoegde afbeeldingen worden automatisch verkleind en indien nodig bijgesneden, zodat ze passen binnen het ontwerp van jouw website. Het gevolg is dat de afbeelding soms niet op de juiste manier wordt weergegeven. Ga naar paragraaf Afbeeldingen uitsnijden voor informatie over het juiste weergeven van de afbeelding Meerdere afbeeldingen tegelijk toevoegen (niet voor Internet Explorer) Wanneer je een pagina of artikel hebt waarbij je meerdere afbeeldingen wilt plaatsen, bijvoorbeeld bij een product of project, dan hoef je hiervoor slechts één handeling te doen (bij gebruik van Google Chrome of Firefox als browser). Klik op het tabblad afbeeldingen en vervolgens op bladeren. Je kunt hier meerdere afbeeldingen selecteren door op de betreffende bestanden te klikken. De geselecteerde bestanden lichten blauw op (afbeelding 16). Klik vervolgens op openen en tot slot op opslaan. De geselecteerde afbeeldingen worden toegevoegd aan de pagina. In het tabblad afbeeldingen zie je hiervan een voorvertoning. Afbeelding 16 Tip! Het selecteren van meerdere afbeeldingen kan op twee manieren: 1. Houd de Ctrl-toets op het toetsenbord ingedrukt en klik vervolgens met de muis één voor één op de gewenste bestanden. De selectie licht blauw op. 2. Sleep met de linker muisknop ingedrukt over de bestanden die u wilt selecteren. De selectie licht blauw op. 15

16 Nota bene: Het is niet per se nodig om via de knop bladeren naar de map met afbeeldingen te gaan. Wanneer je al een dialoogvenster hebt geopend op het bureaublad (afbeelding 17), dan kun je ook daar de gewenste afbeeldingen selecteren en deze slepen naar het vakje links van bladeren. Afbeelding Afbeeldingen in een andere volgorde Heb je meerdere afbeeldingen toegevoegd, maar staan ze niet in de goede volgorde? Sleep dan eenvoudig de voorvertoning naar de gewenste plaats (afbeelding 18). Klik vervolgens op opslaan om de wijzigingen definitief door te voeren. Afbeelding 18 16

17 3.2.3 Afbeeldingen uitsnijden Wanneer je een afbeelding toevoegt, dan kan het voorkomen dat deze niet het geschikte formaat heeft. Daarom worden afbeeldingen automatisch verkleind en indien nodig bijgesneden. Het gevolg is dat de afbeelding op de website niet weergegeven wordt zoals gewenst (zie afbeeldingen hieronder). Optimale weergave Onjuiste weergave Je kunt daarom zelf een gewenste uitsnijding aangeven in ABC. In het tabblad afbeeldingen staat de voorvertoning van de afbeelding. Hierin staan een minnetje ( ) om de afbeelding te verwijderen en een bewerkbutton( ). Klik op bewerken ( ). Er opent een nieuw scherm met daarin één of meer afmetingen (afbeelding 19). De weergegeven afmetingen horen bij de verschillende afbeeldingformaten die zichtbaar zijn aan de bezoekerskant van jouw webpagina. Afbeelding 19 Deze afmetingen zijn gekoppeld aan de verschillende weergaves in het ontwerp van de website. In een lijst met producten staan bijvoorbeeld kleinere afbeeldingen en bij een uitgelicht product staat een grotere afbeelding. Voor ieder van deze formaten kun je een gewenste uitsnede selecteren. Wanneer je dit niet doet, dan wordt een automatisch uitsnede gemaakt. Wanneer je het vakje voor de betreffende afmeting aanvinkt, dan wordt de afbeelding zichtbaar (afbeelding 20). Afbeelding 20 17

18 Het selectievakje (afbeelding 21) geeft aan hoe de afbeelding op dit moment wordt weergegeven. Door de vierkantjes aan de randen te verslepen verander je de selectie voor de uitsnede (afbeelding 22). Je kunt dit zo groot of klein maken als gewenst is. Klik vervolgens op bevestigen rechts onderin het dialoogscherm en klik daarna op opslaan om de bewerking op te slaan. Je kunt de selectie voor ieder weergegeven formaat bewerken. Op die manier kies je zelf de mooiste weergave van het beeldmateriaal. Afbeelding 21 Afbeelding 22 18

19 3.3 Bijlagen Op je website of bij een bepaald item kun je, mits verwerkt in de techniek, een bijlage toevoegen. Je klikt hiervoor op het potloodje naast de betreffende pagina. Vervolgens ga je naar het tabblad bijlagen (afbeelding 23). Klik op bladeren naast het invoerveld en selecteer vervolgens het gewenste bestand op jouw pc. Klik vervolgens op opslaan om de bewerking te voltooien. Je kunt er eveneens voor kiezen om meerdere bijlagen toe te voegen door dezelfde bewerking opnieuw uit te voeren. Afbeelding 23 De titel van de bijlage wordt overgenomen uit de bestandnaam. Vaak zijn dit namen die niet relevant voor de bezoeker zijn (bijvoorbeeld: _infosheet_laatsteversie_v2). Daarom kun je bij het Nederlandse vlaggetje (afbeelding 24) een nieuwe titel invoeren die zichtbaar is voor de bezoeker. Kies hier voor een duidelijke omschrijving van het bestand, zodat de bezoeker weet wat hij gaat openen (bijvoorbeeld: Infosheet websites_uitlegabc3_downloadversie). Afbeelding 24 19

20 3.4 Linkmodule - met links naar externe partijen Het is mogelijk om in de bestaande menustructuur een pagina met links op te nemen. In dit menuitem plaats je links van externe partijen die relevant zijn voor de bezoekers van jouw website. Er is eveneens ruimte voor een korte toelichting op de link. Om een link toe te voegen is het van belang dat deze als type (nieuwe pagina) kan worden toegevoegd. Wanneer dit het geval is, dan staat er in de sitemap een pagina genaamd Links. Door op het groene plusje te klikken kun je een link toevoegen. Stap 1 = klik op de groene plus ( ) Stap 2 = kies voor link in het drop down menu Vervolgens kun je de link invoeren en bewerken door op het potloodje ( ) te klikken. Stap 3 = Geef bij inhoud titel een naam aan de link Stap 4 = Voer bij link het betreffende webadres is Stap 5 (optioneel) = Geeft een korte beschrijving van de link en de relevantie ervan. Stap 6 = klik op opslaan om de bewerking af te ronden. Het veld waarin je werkt ziet er uit zoals in afbeelding 25. Je kunt er voor kiezen om meerdere links toe te voegen en te beschrijven. Hiervoor gebruik je opnieuw de groene plus. Afbeelding 25 20