Handleiding Content Management Systeem Umbraco. Versie 1.2

Handleiding Content Management Systeem Umbraco Versie 1.2

Inhoudsopgave 1.

Umbraco tour .......................................................................................................................... 3 1.1 Inloggen in het Umbraco systeem .................................................................................... 3 1.2 De indeling van Umbraco ................................................................................................. 3

2.

Inhoud van uw website ............................................................................................................ 5 2.1 Een nieuwe pagina ........................................................................................................... 6 2.2 Pagina Inhoud .................................................................................................................. 8 2.3 Pagina meta ................................................................................................................... 15 2.4 Pagina eigenschappen .................................................................................................... 15 2.5 Content vlakken ............................................................................................................. 17 2.6 Nieuwsfunctie ................................................................................................................ 18 2.7 Opslaan en publiceren .................................................................................................... 19 2.8 Pagina verplaatsen ......................................................................................................... 19 2.9 Pagina verwijderen ......................................................................................................... 20

3.

Media in uw website .............................................................................................................. 21 3.1 Media aanmaken ............................................................................................................ 21 3.2 Media uploaden ............................................................................................................. 23 3.3 Media eigenschappen .................................................................................................... 24 3.4 Media plaatsen ............................................................................................................... 24

Register .................................................................................................................................. 27

Aride interactieve communicatie - Handleiding Content Management Systeem Umbraco

Pagina | 2

1.

Umbraco tour

Met het content management systeem Umbraco kunt u zelf de content van uw website gestructureerd beheren. De content bestaat al gauw uit honderden elementen: tekst, afbeeldingen, geluid, animaties, video, bestanden die gedownload kunnen worden, et cetera. Aride wil haar klanten graag voorzien van ondersteuning bij het gebruik van Umbraco. Deze handleiding biedt u uitleg met demonstratievideo’s over het gebruik van Umbraco. 1.1 Inloggen in het Umbraco systeem Om de content van uw website te kunnen bewerken moet u inloggen in Umbraco. U komt op het inlogscherm zoals in figuur 1 terecht door te surfen naar: http://www.uwdomein.nl/umbraco uwdomein.nl vervangt u door het domein van uw website.

figuur 1: het inlogscherm

1.2 De indeling van Umbraco Na het invullen van uw gebruikersnaam en wachtwoord komt u in Umbraco terecht. Het Umbraco systeem heeft een vaste indeling zoals te zien is in figuur 2.

figuur 2: het Umbraco systeem


Pagina | 3

In het blokje links onder zijn de secties van Umbraco te zien: Content In deze sectie kunt u pagina’s van uw website toevoegen, bewerken, publiceren en verwijderen. Media In deze sectie kunt u media bestanden zoals afbeeldingen, pdf bestanden, tekst documenten en video’s beheren. In het grotere blok aan de linkerzijde staan de pagina’s van uw website opgesomd. Dit geldt wanneer u zich in de sectie Content bevindt. Bevindt u zich in de sectie Media, dan staat hier een opsomming van de media items in uw website. Wanneer er op een pagina of media item wordt geklikt verschijnt in het grote vlak rechts alle informatie en inhoud van de desbetreffende pagina of het media item. Met behulp van tabbladen worden hier verschillende onderdelen onderscheiden. Over de indeling rest dan nog het bovenste gedeelte. Hier bevinden zich links de knop ‘aanmaken’ en een zoekveld. Met de knop ‘aanmaken’ start u in de sectie Content een nieuwe pagina en in de sectie Media een nieuw media item. Via het zoekveld kunt u de pagina’s van uw website doorzoeken. Rechts bevinden zich drie knoppen. Via de knop ‘over’ krijgt u informatie over de versie van Umbraco, het copyright en de licenties. De knop ‘help’ leidt u naar de ondersteuningswebsite van Aride over Umbraco en met de knop ‘afmelden’ kunt u uitloggen uit het Umbraco systeem.


Pagina | 4

2.

Inhoud van uw website

De inhoud van uw website is in Umbraco ondergebracht in de sectie content. Wanneer u links onder de sectie content aanklikt verschijnt er links een opsomming van de pagina’s op uw website. In figuur 3 is de opsomming van pagina’s in de sectie content te zien.

figuur 3: de sectie content

Deze opsomming correspondeert met de hoofdnavigatie en subnavigatie van de website. Samen met figuur 4 is deze overeenkomst te zien.

figuur 4: screenshot website


Pagina | 5

Wanneer er op een pagina wordt geklikt verschijnt in het grote vlak rechts alle informatie en inhoud van de desbetreffende pagina. Met behulp van tabbladen worden hier verschillende onderdelen onderscheiden. 2.1

Een nieuwe pagina

Een nieuwe pagina aanmaken kan op twee verschillende manieren. De eerste manier is via de knop ‘aanmaken’ helemaal linksboven. Wanneer u deze aanklikt verschijnt het venster uit figuur 5. U moet nu aangeven op welke plaats u een nieuwe pagina wil aanmaken. U selecteert hiervoor de root van uw nieuwe pagina. Dit houdt in dat u de bovenliggende pagina selecteert. U selecteert bijvoorbeeld home als u een hoofdpagina wil aanmaken. In figuur 5 wordt een subpagina aangemaakt onder de pagina inhoud van uw website. De pagina inhoud van uw website is hiervoor dan ook geselecteerd. Als u de juiste root geselecteerd heeft klikt u op ‘ok’.

figuur 5: een nieuwe pagina aanmaken met de ‘Aanmaken’ knop

Een tweede manier om een nieuwe pagina aan te maken is door gebruik te maken van uw rechter muisknop. In de opsomming van pagina’s van uw website klikt u met uw rechtermuisknop op de pagina waaronder u een nieuwe pagina wil aanmaken. In figuur 6 is te zien wat er gebeurt wanneer er met de rechter muisknop op de pagina inhoud van uw website wordt geklikt. Door vervolgens in de verschenen lijst op ‘nieuw’ te klikken wordt een subpagina onder de pagina aangemaakt.


Pagina | 6

figuur 6: een nieuwe pagina aanmaken met de rechter muisknop

Via beide manieren komt u vervolgens terecht bij het venster weergegeven in figuur 7. Hierin kunt u in het invoerveld de naam van uw nieuwe pagina invoeren. Deze is eventueel later nog te veranderen. Ook moet u in dit venster een zogeheten documenttype selecteren. Dit is de template met de vormgeving voor de nieuwe pagina. In veel gevallen is hier enkel één documenttype te selecteren en is de keuze daarmee eenvoudig. Wanneer u wel meerdere keuzes heeft kunt u kijken naar de omschrijving van het documenttype die onder de selectielijst staat.

figuur 7: naam en documenttype bepalen van de nieuwe pagina

Als u de naam en het documenttype heeft gekozen en op aanmaken heeft geklikt, wordt uw nieuwe pagina aangemaakt. Uw nieuwe pagina verschijnt in de opsomming van pagina’s links in beeld. Mocht de nieuwe pagina niet direct verschijnen in deze lijst gebruik dan weer de rechter muisknop op de bovenliggende pagina. In de verschenen lijst klikt u vervolgens op ‘nodes opnieuw inladen’ en uw nieuwe pagina zal alsnog verschijnen. Door hoofdpagina’s en onderliggende subpagina’s creëert u lagen. In het Umbraco systeem kunt u onbeperkt diepere lagen aanmaken. Aride ontwerpt voor u vier lagen. Dit betekend dat u zonder problemen vier lagen kunt aanmaken. Wilt u meer lagen, bespreek dit dan met Aride.


Pagina | 7

2.2

Pagina Inhoud

Wanneer u in de sectie content op een pagina van uw website heeft geklikt, verschijnt er in het grote blok rechts alle informatie en inhoud van de desbetreffende pagina. Met behulp van tabbladen worden hier verschillende onderdelen onderscheiden. In het tabblad inhoud kan de tekst die op uw website te zien is, geschreven of bewerkt worden. In figuur 8 ziet u het tabblad inhoud.

figuur 8: tabblad inhoud van een pagina

In het eerste invoerveld kunt u de paginatitel van uw pagina invullen. Daaronder bij het onderdeel inhoud kunt u de tekst voor uw pagina invoeren. Hierbij kunt u gebruik maken van de editor functies die direct onder het tabblad weergegeven staan. Hieronder worden de verschillende functies nader toegelicht. Opslaan De bewerkingen in uw pagina worden opgeslagen. Ga voor meer uitleg naar paragraaf 2.7 Opslaan en publiceren. Opslaan en publiceren De bewerkingen in uw pagina worden opgeslagen en gepubliceerd. De bewerkingen worden hierdoor zichtbaar op uw website. Ga voor meer uitleg naar paragraaf 2.7 Opslaan en publiceren. Voorbeeld bekijken U kunt via deze knop een voorbeeld bekijken van de pagina waarin u bezig bent. In een nieuw venster zal de desbetreffende pagina van uw website geopend worden. Al u wijzigingen wilt bekijken dient u deze wel eerst op te slaan. HTML bron bewerken Heeft u kennis van html, dan kunt u met deze knop de html code van de tekst bekijken. Heeft u geen kennis van html, dan kunt u de knop negeren en met de functies van de editor de gewenste opmaak realiseren. Ongedaan maken Een handeling ongedaan maken. Een stap terug gaan in uw handelingen.


Pagina | 8

Herhalen Wanneer u een handeling ongedaan gemaakt heeft, kunt u de handeling met deze knop opnieuw herhalen. Knippen Een geselecteerde tekst knippen. Het geselecteerde gedeelte verdwijnt, maar wordt wel onthouden. U kunt het eventueel weer op een andere plaats neerzetten door te plakken. Kopiëren Een geselecteerde tekst wordt gekopieerd. U kunt het vervolgens ergens anders plaatsen door te plakken. Vanuit Word plakken Een tekst die u in Word gekopieerd heeft, kun u met deze knop plakken. In het venster dat verschijnt kunt u door Ctrl+v in te toetsen de tekst plakken. Door vervolgens op ‘invoegen’ te klikken wordt de tekst in uw pagina geplaatst. Eventuele opmaak die u in Word heeft gedaan worden gedeeltelijk overgenomen, naar de stijl van uw website. Voor consistentie en kwaliteit van uw website, kun u het beste de opmaak nalopen wanneer u vanuit Word geplakt heeft. Stijlen Naar het ontwerp van uw website zullen er eventueel stijlen voor u gedefinieerd zijn. Dit zijn bijvoorbeeld koppen met een groter lettertype of andere kleur, die u in uw tekst kunt toevoegen. Wanneer er voor uw website stijlen zijn gedefinieerd, dan staan deze onder de knop. U kunt aan een geselecteerde tekst een stijl meegeven. Vet Tekst vet gedrukt weergeven. Cursief Tekst cursief/schuin gedrukt weergeven. Links uitlijnen De tekst links uitlijnen. Centreren De tekst centreren/in het midden uitlijnen. Rechts uitlijnen De tekst rechts uitlijnen


Pagina | 9

Opsommingtekens Een opsommingteken in uw tekst invoegen. Nummering Nummering toevoegen in uw tekst. Inspringing verkleinen Wanneer u de knop inspringing vergroten heeft gebruikt, kunt u met deze knop de inspringing verkleinen of verwijderen. Inspringing vergroten Met deze knop kunt u tekst een stuk laten inspringen. Hoe vaker u de knop gebruikt, hoe groter de inspringing wordt. Link invoegen/bewerken U kunt met deze knop een link meegeven aan uw tekst. Dit kan een link zijn naar een andere website, een link naar een andere pagina binnen uw website of een media item zoals bijvoorbeeld een pdf bestand. Ook kunt u linken naar een ander gedeelte van de tekst op de pagina of een e-mailadres. Wanneer u een gedeelte van de tekst heeft geselecteerd dat moet dienen als link, kunt u de knop gebruiken. U krijgt vervolgens het venster uit figuur 9 te zien.

figuur 9: een link toevoegen in uw tekst


Pagina | 10

In het eerste invoerveld moet de url: het webadres van de te volgen link komen te staan. Wanneer u naar een andere website wilt linken, moet het webadres van deze website worden ingevuld. U moet er hierbij voor zorgen dat de link begint met http://. Om er zeker van te zijn dat u de goede link invult kunt u de website openen in uw webbrowser en het adres dat dan in de adresbalk staat kopiëren en plakken in het invoerveld. Wanneer u wilt linken naar een pagina in uw eigen website of een media item van u website, kunt u gebruik maken van de opsommingen onder de tabbladen content en media in het venster. Hierin kunt u eenvoudig de gewenste pagina of het media item selecteren. Umbraco vult vervolgens automatisch de url in. Naast de url kunt u nog een titel en een target kiezen. Wanneer u een titel invult zal deze getoond worden in een klein blokje wanneer men met de muis over de link heen gaat. Bij target kunt u kiezen hoe de link geopend word. Er worden vier opties gegevens, maar omdat Umbraco geen gebruik maakt van frames kunt u alleen tussen de eerste twee opties kiezen. De eerste optie: ‘In dit venster / frame openen’, betekend dat de link geopend wordt in het scherm van uw website. Dit houdt in dat de pagina waarop men zich bevindt wordt vervangen door de link. De gebruiker van uw website zal in de webbrowser op vorige moeten klikken op terug te gaan naar uw website. De tweede optie: ‘in nieuw venster openen’, betekend dat een nieuw browserscherm zal openen en de link hierin te zien zal zijn. De gebruiker kan dit venster afsluiten en komt dan op uw website terug. Wanneer u via een link naar een ander gedeelte van de tekst op de pagina wilt gaan, kunt u de laatste optie anchor gebruiken. Wanneer er ankers zijn toegevoegd in uw tekst zijn deze hier te zien en te selecteren. Een gebruiker van uw website zal wanneer er op de link wordt geklikt een sprong binnen de tekst maken naar de plaats waar u het anker heeft geplaatst. Hoe u een anker in uw tekst kan plaatsen staat uitgelegd bij de editor knop anker invoegen/bewerken. Als u een link naar een e-mailadres wilt aanmaken, gebruikt u het invoerveld url. U vult ‘mailto:’ in, gevolgd door het e-mailadres. Een link naar het e-mailadres van Aride wordt bijvoorbeeld ingevuld als ‘mailto:[email protected]’. Wanneer een gebruiker op de link klikt zal een e-mailprogramma openen waarin het e-mailadres al is ingevuld. Link verwijderen U kunt een link in u tekst verwijderen door met de cursor op de link te gaan staan en deze knop te gebruiken. Anker invoegen/bewerken Met behulp van ankers kunt u in lange pagina’s uw gebruiker via een link naar een andere plaats binnen de pagina later springen. Als u binnen de tekst op de plaats staat waar u naar toe wil later springen, klikt u op de knop en u krijgt het venster te zien uit figuur 10.

figuur 10: een anker invoegen


Pagina | 11

U geeft hier het anker een unieke naam en klikt op ‘invoegen’. In de tekst kunt u nu zien dat er een blokje is verschenen met het anker erop. Nu kunt u door een link aan te maken uw gebruikers naar dit anker laten springen. U selecteert hiervoor de gewenste tekst voor de link en klikt op de knop link invoegen/bewerken. In het venster dat verschijnt, kiest u achter anchor het aangemaakte anker. Voor een uitgebreidere uitleg over het aanmaken van de link kunt u de uitleg bekijken bij de editor knop ‘link invoegen/bewerken’. Afbeelding invoegen/bewerken Via deze knop kunt u een afbeelding tussen uw tekst invoegen. U krijgt het venster uit figuur 11 te zien. Met de tabbladen wordt hierin twee opties aangegeven voor het invoegen van een afbeelding. Bij ‘kiezen’ wordt een opsomming gegeven van de afbeeldingen in de sectie media. U kunt hier heel eenvoudig een afbeelding selecteren uit de sectie media. Wanneer u een afbeelding selecteert wordt de url, naam en afmetingen van deze afbeelding automatisch door Umbraco ingevuld. Eventueel kunt u de afmetingen van de afbeelding verkleinen. Wanneer de checkbox ‘verhouding behouden’ is aangevinkt, zorgt deze ervoor dat wanneer u de breedte of hoogte aanpast de andere afmeting automatisch ook wordt aangepast.

figuur 11: een afbeelding invoegen

Ook kunt u kiezen voor het tabblad ‘aanmaken nieuw’ zoals in figuur 12 is weergegeven. Hiermee kunt u een afbeelding invoegen die nog niet in de sectie media staat. Via bladeren kunt u in de mappen op uw computer de afbeelding van uw keuze opzoeken en openen. De naam van de afbeelding wordt door Umbraco automatisch ingevuld, maar deze kunt u naar wens wijzigen. Bij save at kunt u via de link kiezen aangeven in welke map de afbeelding in de sectie media moet worden opgeslagen. Wanneer u alles juist heeft ingevuld en op opslaan klikt, zal de afbeelding in de sectie media worden opgeslagen. In het bovenste gedeelte van het venster zal vervolgens de url, naam en afmetingen van de afbeelding automatisch worden ingevuld. Ook nu kunt u de afmeting eventueel aanpassen.


Pagina | 12

figuur 12: een nieuwe afbeelding invoegen

Nieuwe tabel invoegen Het advies is, om zo min mogelijk tabellen in uw website te gebruiken. Toch kan soms het gebruik van een tabel niet voorkomen worden. Als u bijvoorbeeld een prijslijst in uw website wilt zetten waarbij de bedragen in een tweede rij ook netje onder elkaar worden weergegeven. In figuur 13 is een voorbeeld te zien waarbij een tabel is ingevoegd voor de adresgegevens.

figuur 13: een ingevoegde tabel in het Umbraco systeem

Wanneer u een tabel gaat invoegen verschijnt in het Umbraco systeem het venster uit figuur 14. Bij de algemene eigenschappen van de tabel kunt u allereerst het aantal kolommen en rijen aangeven. Bij ‘ruimte in cel’ en ‘ruimte om cel’ kunt u een waarde aangeven. Hierdoor ontstaat er ruimte rondom de tekst in de cel of ruimte tussen de randen van de cellen. Bij ‘rand’ kunt u ook een waarde aangeven voor de randdikte van de tabel. De waardes van deze drie opties zijn in pixels. 1 cm is 28 pixels. Om het ontwerp van uw website consistent te houden adviseren wij u de waardes op 0 te zetten, maar u bent altijd vrij om dit naar u wens te veranderen.


Pagina | 13

figuur 14: een tabel invoegen

Dan zijn er nog de opties breedte en hoogte. Hier kunt u ook een waarde in pixels invullen. Let bij de breedte op dat de tabel niet breder is dan het ontwerp van uw website. U kunt dit controleren in het Umbraco systeem. Wanneer er bij het vlak met de tekst van uw website een horizontale scrollbalk verschijnt, is uw tabel breder dan het ontwerp. U kunt ook voorkomen dat de tabel te breed wordt door percentages te gebruiken. Wanneer u bij de breedte 100% invult zal de tabel nooit breder worden. Op deze manier worden de kolommen van uw tabel ook automatisch netjes verdeeld over de breedte van het tekstvlak. In het tabblad geavanceerd is er nog de mogelijkheid om de achtergrondkleur en randkleur van de tabel te selecteren. De rand moet hiervoor minimaal de waarde 1 gekregen hebben. Maak bij de keuze voor deze twee opties weer de afweging of het past in het ontwerp van uw website. Symbool invoegen Symbolen in u tekst toevoegen. Enkele voorbeelden zijn: é, &, € en → Een afbeelding op een vaste plaats Het kan voorkomen dat in het ontwerp van uw website een afbeelding een vaste plaats tussen of naast de tekst heeft gekregen. Wanneer dit het geval is zal er in het tabblad inhoud een blokje te zien zijn zoals in figuur 15. Door op ‘kiezen’ te klikken kan een afbeelding ingevoegd worden. De afmetingen van deze afbeelding zullen automatisch gekozen worden. Voor verdere uitleg over het plaatsen van afbeelding verwijzen wij u naar paragraaf 3.4 Media plaatsen.

figuur 15: een afbeelding op een vaste plaats


Pagina | 14

2.3

Pagina meta

Wanneer u in de sectie content op een pagina van uw website heeft geklikt, verschijnt er in het grote blok rechts alle informatie en inhoud van de desbetreffende pagina. Met behulp van tabbladen worden hier verschillende onderdelen onderscheiden. In het tabblad meta kunnen trefwoorden en een omschrijving van de pagina geschreven of bewerkt worden. Deze trefwoorden en omschrijving zijn belangrijk voor zoekmachines. Uw website en pagina’s kunnen hierdoor beter gevonden worden door zoekmachines. In figuur 16 ziet u het tabblad meta.

figuur 16: tabblad meta van een pagina

Bij ‘trefwoorden’ kunt u trefwoorden invullen die betrekking hebben op de inhoud van de pagina. De trefwoorden moeten gescheiden worden door komma’s. Bij ‘omschrijving’ kunt u een korte samenvatting van de pagina inhoud geven. Deze meta gegevens zijn niet zichtbaar voor de bezoekers van uw website. Alleen zoekmachines zullen de gegevens gebruiken. 2.4 Pagina eigenschappen Wanneer u in de sectie content op een pagina van uw website heeft geklikt, verschijnt er in het grote blok rechts alle informatie en inhoud van de desbetreffende pagina. Met behulp van tabbladen worden hier verschillende onderdelen onderscheiden. In het tabblad eigenschappen kunnen eigenschappen van de pagina worden gegeven of bewerkt. In figuur 17 ziet u het tabblad eigenschappen.

figuur 17: tabblad eigenschappen van een pagina


Pagina | 15

Het eerste blokje in het tabblad eigenschappen bevat algemene eigenschappen van de pagina. Deze eigenschappen worden automatisch ingevuld wanneer u de pagina aanmaakt. Eventueel kunt u de naam van de pagina wijzigen. Publicatie opties Hieronder staat een blokje met publicatie gegevens van de pagina. Hierin word aangegeven wanneer uw pagina gewijzigd en gepubliceerd is. Een optionele functie hierbij is, dat u aan kunt geven wanneer u de pagina wil publiceren. Wanneer u bijvoorbeeld een pagina klaar zet en pas later wil publiceren of wanneer u een pagina maar voor een bepaalde periode wilt publiceren, kunt u deze functie gebruiken. Bij ‘publiceer op’ en/of ‘verwijder op’ kunt u met behulp van de kalender een datum selecteren. Wanneer u de pagina opslaat en publiceert worden deze publicatie data geactiveerd. Voor uitgebreidere uitleg over opslaan en publiceren gaat u naar paragraaf 2.7 Opslaan en publiceren. Interne en externe redirect Vervolgens zijn er een paar eigenschappen betreffende de url, zoals te zien is in figuur 18. De url is het webadres van de pagina. De ‘link naar het document’ geeft u de url naar de betreffende pagina. De url die gegeven staat moet achter uw domeinnaam geplaatst worden. Ook is er een redirect functie. Een redirect betekent dat een gebruiker op uw website in de navigatie een pagina aanklikt, maar op een andere pagina terecht komt. Dit is bijvoorbeeld te gebruiken wanneer u in de navigatie twee keer een pagina toevoegt waar dezelfde informatie op moet komen te staan. Zodat u in het Umbraco systeem maar één keer de inhoud van deze pagina’s hoeft toe te voegen of wijzigen kunt u de tweede pagina doorsturen. Er is hiervoor een externe en een interne redirect. Met een externe redirect ziet de gebruiker ook echt de url in de adresbalk veranderen. De gebruiker kan dus zien dat er wordt doorgestuurd. Met een interne redirect veranderd de url niet en is voor de gebruiker niet te zien dat er wordt doorgestuurd. In het Umbraco systeem werkt het instellen van een redirect in beide gevallen hetzelfde. Wanneer u ‘kiezen’ aanklikt om een redirect in te stellen verschijnt er een venster met een opsomming van de pagina’s van uw website. Hierin kunt u de pagina waar naartoe doorgestuurd moet worden selecteren.

figuur 18: tabblad eigenschappen van een pagina


Pagina | 16

Alternatieve url’s De url van de pagina wordt door het Umbraco systeem automatisch aangemaakt. U kunt er voor kiezen om deze url te wijzigen of een extra url aan te maken. Dit zou u kunnen doen om uw pagina in zoekmachines beter vindbaar te maken. Bij beide opties vult u een url in zonder gebruik te maken van spaties, niet te starten met een / of te eindigen met .aspx. De pagina verbergen Tot slot is er een checkbox om een pagina in de navigatie te verbergen. Wanneer u ‘verbergen in navigatie’ aanvinkt is de pagina te bezoeken, maar wordt deze in het navigatiemenu niet weergegeven. U kunt bijvoorbeeld in een tekst linken naar een pagina met meer uitleg, maar u vindt deze pagina niet belangrijk genoeg om direct aan de gebruiker te tonen in de navigatie. Dan kunt u van deze functie gebruik maken. 2.5 Content vlakken Wanneer u in de sectie content op een pagina van uw website heeft geklikt, verschijnt er in het grote blok rechts alle informatie en inhoud van de desbetreffende pagina. Met behulp van tabbladen worden hier verschillende onderdelen onderscheiden. Wanneer er voor de pagina’s van uw website speciale content vlakken zijn ontworpen kunt u een extra tabblad hebben. In figuur 19 ziet u bijvoorbeeld dat de pagina van deze website naast inhoud ook vier content blokken heeft.

figuur 19: voorbeeld content vlakken


Pagina | 17

In figuur 20 ziet u dat hiervoor in het Umbraco systeem een extra tabblad bij de pagina is toegevoegd met de naam tekstblokken. Deze naam kan per website iets verschillen. In dit tabblad kunt u naar het ontwerp van uw website titels, inhoud en/of afbeeldingen toevoegen of wijzigen. Dit gebeurt hetzelfde als in het tabblad inhoud. Voor uitgebreide uitleg over het toevoegen of wijzigen van de inhoud gaat u naar paragraaf 2.2 Pagina inhoud.

figuur 20: extra tabblad in het Umbraco systeem

2.6 Nieuwsfunctie Wellicht maakt u in uw website gebruik van een nieuwsfunctie. Zoals in figuur 21 te zien is staat de nieuwsfunctie met de bijbehorende nieuwsberichten tussen de opsomming van pagina’s in de sectie content. Wanneer u op een nieuwsbericht klikt, verschijnt er in het grote blok rechts alle informatie en inhoud van het desbetreffende nieuwsbericht. Met behulp van tabbladen worden hier verschillende onderdelen onderscheiden. Deze tabbladen hebben dezelfde mogelijkheden en functie dan bij een gewone pagina. Voor de uitleg van de verschillende tabbladen verwijzen wij u naar de paragraven 2.2 Pagina inhoud, 2.3 Pagina meta en 2.4 Pagina eigenschappen.

figuur 21: een nieuwsfunctie


Pagina | 18

2.7

Opslaan en publiceren

Wanneer u een pagina heeft aangemaakt of gewijzigd kan dit alleen opgeslagen of opgeslagen en gepubliceerd worden. Opslaan Door op te slaan worden de wijzigingen opgeslagen in het Umbraco systeem, maar is het nog niet zichtbaar in uw website. In de opsomming van pagina’s is te zien wanneer een pagina opgeslagen, maar nog niet gepubliceerd is. Dit is te zien doordat het icoontje van de pagina een oranje rondje bevat. In figuur 22 is hiervan een voorbeeld te zien.

figuur 22: een opgeslagen, niet gepubliceerde pagina

Opslaan en publiceren Door voor ‘opslaan en publiceren’ te kiezen, worden wijzigingen opgeslagen en gepubliceerd. De wijzigingen worden hierdoor zichtbaar op uw website. 2.8

Pagina verplaatsen

Wanneer u een pagina op een andere plaats wilt zetten kan dit door te verplaatsen of te sorteren. U kiest hiervoor door in de opsomming van uw pagina’s met de rechter muisknop op een pagina te klikken. Er verschijnt vervolgens een menu zoals te zien is in figuur 23. Hierin kunt u kiezen voor ‘verplaatsen’ of ‘sorteren’.

figuur 23: een pagina verplaatsen of sorteren


Pagina | 19

Wanneer u kiest voor verplaatsen kunt u de pagina naar een andere root verplaatsen. In het venster dat verschijnt, kiest u in een opsomming van de pagina’s een nieuwe root. Een root is de bovenliggende pagina. Wanneer u pagina’s met dezelfde bovenliggende pagina in een andere volgorde wilt zetten kiest u voor sorteren. Wilt u zoals in figuur 23 de pagina’s onder bureau in een andere volgorde zetten kies dan bij bureau voor sorteren. U krijgt dan een venster met een opsomming van de subpagina’s van de pagina bureau. Door middel van slepen kunt u de pagina’s naar boven of beneden verplaatsen. 2.9

Pagina verwijderen

U kunt een pagina verwijderen door in de opsomming van de pagina’s van uw website de rechter muisknop te gebruiken. In figuur 24 ziet u hiervan een voorbeeld. In de lijst die verschijnt, kiest u voor ‘verwijderen’. Na een extra vraag of u de pagina wil verwijderen wordt de pagina verwijderd.

figuur 24: een pagina verwijderen

De pagina is echter niet helemaal verwijderd uit het Umbraco systeem. Pagina’s die worden verwijderd, komen in de prullenbak terecht. De prullenbak ziet u helemaal onderaan in de opsomming van al uw pagina’s staan. Mocht u dus toch een verwijderde pagina terug in uw website willen zetten kan dit. U verplaatst dan een pagina uit de prullenbak naar de website. U kunt meer uitleg over een pagina verplaatsen raadplegen in paragraaf 2.8 Pagina verplaatsen.


Pagina | 20

3.

Media in uw website

Alle media items van uw website zijn in Umbraco onder gebracht in de sectie media. Wanneer u links onder de sectie media aanklikt verschijnt er links een opsomming van de media items van uw website. In figuur 25 is de opsomming van media items in de sectie media te zien.

figuur 25: de sectie media

Alle media items kunnen op één of meerdere plaatsen in uw website gebruikt worden met verschillende afmetingen. Wanneer er op een media item wordt geklikt verschijnt in het grote vlak rechts alle informatie en inhoud van het desbetreffende media item. Met behulp van tabbladen worden hier verschillende onderdelen onderscheiden. 3.1

Media aanmaken

Een nieuw media item aanmaken kan op twee verschillende manieren. De eerste manier is via de knop ‘aanmaken’ helemaal linksboven. Wanneer u deze aanklikt verschijnt het venster uit figuur 26. U moet nu aangeven op welke plaats u het media item wil aanmaken. U selecteert hiervoor de root van het media item. Dit houdt in dat u de map selecteert waar het media item in geplaatst moet worden. In figuur 26 wordt een media item aangemaakt in de map home. Als u de juiste root geselecteerd heeft klikt u op ‘ok’.


Pagina | 21

figuur 26: een nieuw media item aanmaken met de ‘Aanmaken’ knop

Een tweede manier om een nieuw media item aan te maken is door gebruik te maken van uw rechter muisknop. In de opsomming van media items van uw website klikt u met uw rechtermuisknop op de map waaronder u een nieuw media item wil aanmaken. In figuur 27 is te zien wat er gebeurt wanneer er met de rechter muisknop op een map wordt geklikt. Door vervolgens in de verschenen lijst op ‘nieuw’ te klikken wordt een media item in de map aangemaakt.

figuur 27: een nieuw media item aanmaken met de rechter muisknop

Via beide manieren komt u vervolgens terecht bij het venster weergegeven in figuur 28. Hierin kunt u in het invoerveld de naam van uw nieuwe media item invoeren. Deze is eventueel later nog te wijzigen. Ook moet u in dit venster een mediatype selecteren. U heeft hier de keuze tussen folder, image en file. U kiest voor folder wanneer u een nieuwe map wilt aanmaken. Hier kunt u dan vervolgens media items in zetten. Hierdoor kunt u uw media items geordend houden. U kiest voor image wanneer u een afbeelding in de media sectie wilt zetten. Dit kunnen jpg, gif of png afbeeldingen zijn. Voor de laatste optie file kiest u wanneer u een bestand in de media sectie wilt zetten. Dit kunnen bijvoorbeeld pdf of office bestanden zijn.


Pagina | 22

Als u de naam en mediatype heeft gekozen en op ‘aanmaken’ heeft geklikt, wordt uw nieuwe media item aangemaakt. Uw nieuwe media item verschijnt in de opsomming van media items links in beeld. Mocht het nieuwe media item niet direct verschijnen in deze lijst gebruik dan weer de rechter muisknop op de bovenliggende map. In de verschenen lijst klikt u vervolgens op ‘nodes opnieuw inladen’ en het nieuwe media item zal alsnog verschijnen.

figuur 28: naam en mediatype bepalen van een nieuw media item

3.2 Media uploaden Wanneer u in de sectie media op een media item heeft geklikt, verschijnt er in het grote blok rechts alle informatie en inhoud van het desbetreffende media item. Met behulp van tabbladen worden hier verschillende onderdelen onderscheiden. In het tabblad afbeelding of bestand, afhankelijk van het mediatype, kunt u een media item uploaden. In figuur 29 ziet u het tabblad afbeelding.

figuur 29: tabblad afbeelding van een media item

U kunt door te klikken op ‘bladeren’, door de bestanden op uw computer bladeren, en het gewenste media item selecteren. Om het media item daadwerkelijk te uploaden klikt u op het opslaan icoon net onder het tabblad. De overige gegevens in dit tabblad zullen dan automatisch ingevuld worden. Hier kunt u de afmetingen, grootte en type van het media item zien.


Pagina | 23

Bij een afbeelding verschijnt in dit tabblad ook een invoerveld voor een alternatieve tekst. Hier kunt u een korte omschrijving geven van de afbeelding. Dit wordt bijvoorbeeld gebruikt door mensen met een visuele beperking, die bij het bekijken van uw website gebruik maken van spraaksoftware. 3.3

Media eigenschappen

Wanneer u in de sectie media op een media item heeft geklikt, verschijnt er in het grote blok rechts alle informatie en inhoud van het desbetreffende media item. Met behulp van tabbladen worden hier verschillende onderdelen onderscheiden. In het tabblad eigenschappen, dat te zien is in figuur 30, kunt u de naam van het media item wijzigen. De overige eigenschappen: aangemaakt door, aangemaakt op en het id worden door Umbraco automatisch ingevuld en zijn niet te wijzigen.

figuur 30: tabblad eigenschappen van een media item

3.4

Media plaatsen

Om media in uw website te plaatsen gaat u allereerst naar de sectie content, door links onder in Umbraco te klikken op ‘content’. In de opsomming van de pagina’s die links verschijnt, selecteert u de pagina waar u media op wil plaatsen. In het grote blok rechts verschijnt nu alle informatie en inhoud van de desbetreffende pagina. Met behulp van tabbladen worden hier verschillende onderdelen onderscheiden. Om media te plaatsen gaat u naar het tabblad inhoud, zoals te zien is in figuur 31.

figuur 31: tabblad inhoud van een pagina

In het invoerveld met de inhoud van de pagina kunt u media plaatsen. Het plaatsen van een afbeelding of een bestand gaat op verschillende manieren.


Pagina | 24

Een afbeelding in de tekst plaatsen Om een afbeelding in te voegen plaatst u de cursor in de tekst waar u de afbeelding wilt invoegen. Vervolgens klikt u bij de editor opties op de volgende knop: Afbeelding invoegen/bewerken U krijgt vervolgens het venster uit figuur 32 te zien. Met de tabbladen wordt hierin twee opties aangegeven voor het invoegen van een afbeelding. Bij ‘kiezen’ wordt een opsomming gegeven van de afbeeldingen in de sectie media. U kunt hier heel eenvoudig een afbeelding selecteren uit de sectie media. Wanneer u een afbeelding selecteert wordt de url, naam en afmetingen van deze afbeelding automatisch door Umbraco ingevuld. Eventueel kunt u de afmetingen van de afbeelding verkleinen. Wanneer de checkbox ‘verhouding behouden’ is aangevinkt, zorgt deze ervoor dat wanneer u de breedte of hoogte aanpast de andere afmeting automatisch ook wordt aangepast.

figuur 32: een afbeelding invoegen

Ook kunt u kiezen voor het tabblad ‘aanmaken nieuw’ zoals in figuur 33 is weergegeven. Hiermee kunt u een afbeelding invoegen die nog niet in de sectie media staat. Via ‘bladeren’ kunt u in de mappen op uw computer de afbeelding van uw keuze opzoeken en openen. De naam van de afbeelding wordt door Umbraco automatisch ingevuld, maar deze kunt u naar wens wijzigen. Bij ‘save at’ kunt u via de link ‘kiezen’ aangeven in welke map de afbeelding in de sectie media moet worden opgeslagen. Wanneer u alles juist heeft ingevuld en op opslaan klikt, zal de afbeelding in de sectie media worden opgeslagen. In het bovenste gedeelte van het venster zal vervolgens de url, naam en afmetingen van de afbeelding automatisch worden ingevuld. Ook nu kunt u de afmeting eventueel aanpassen. Het voordeel van Umbraco bij het plaatsen van afbeeldingen is dat u de afbeelding niet zelf hoeft te schalen naar de gewenste grootte. In de sectie media kunt u grote afbeeldingen plaatsen en ze vervolgens kleiner in een pagina te zetten. Umbraco zorgt ervoor dat de afbeelding voor de pagina kleiner wordt opgehaald. Dit betekent dat afbeeldingen altijd scherp en zo snel mogelijk worden geladen.


Pagina | 25

figuur 33: een nieuwe afbeelding invoegen

Een bestand in de tekst plaatsen In uw website kunt u naar een bestand uit de sectie media linken. Wanneer een gebruiker op de link klikt, zal de gebruiker de keus krijgen om het bestand te openen of op te slaan. Om de link aan te maken selecteert u in inhoud van uw pagina een gedeelte tekst of een afbeelding. Vervolgens klikt u bij de editor opties op de volgende knop: Link invoegen/bewerken In het verschenen venster selecteert u onder het tabblad media het gewenste bestand. Door vervolgens op ‘invoegen’ te klikken wordt de link naar het bestand aangemaakt. Een uitgebreidere uitleg over het invoegen van een link kunt u bekijken in paragraaf 2.2 Pagina inhoud.


Pagina | 26

Register Afbeelding plaatsen

12-13, 14, 24-26

Pagina’s sorteren

19-20

Alternatieve tekst

23-24

Pagina verbergen

17

Alternatieve url

17

Pagina verplaatsen

19-20

Anker invoegen/bewerken

11

Pagina verwijderen

20

Bestand bijlage plaatsen

24-26

Publiceren

8, 16, 19

Content vlakken

17-18

Redirect

16

Document type

7

Root

6, 21-22

Extra tabblad

17-18

Sectie content

4, 5-6

Extra url’s

17

Sectie media

4, 21

Handeling herhalen

9

Symbool invoegen

14

HTML bron bewerken

8

Tabblad afbeelding

23-24

Indeling Umbraco

3-4

Tabblad bestand

23-24

Inhoud pagina

8-13

Tabblad eigenschappen

15-17, 24

Inloggen

3

Tabblad inhoud

8-13

Link invoegen/bewerken

10-11

Tabblad meta

15

Media aanmaken

21-23

Tabel invoegen

13-14

Media eigenschappen

24

Target

10-11

Media plaatsen

12-13, 14, 24-26

Tekst centreren

9

Media type

22-23

Tekst cursief gedrukt

9

Media uploaden

23-24

Tekst inspringing

10

Nieuwsfunctie

18

Tekst links uitlijnen

9

Nummering

10

Tekst knippen

9

Ondersteuningswebsite

4

Tekst kopiëren

9

Ongedaan maken

8

Tekst plakken

9

Opslaan

8, 19

Tekst rechts uitlijnen

9

Opslaan en publiceren

8, 16, 19

Tekststijlen

9

Opsommingtekens

10

Tekst vet gedrukt

9

Pagina aanmaken

6-7

Uitloggen

4

Pagina eigenschappen

15-17

Vaste afbeelding

14

Pagina inhoud

8-13

Voorbeeld bekijken

8

Pagina meta

15


Pagina | 27

Kijk voor meer ondersteuning op help.aride.nl

Aride interactieve communicatie Visserslaan 9 6921 WZ Duiven postbus 167 6920 AD Duiven telefoon 0316 250 520 fax 0316 250 529 e-mail [email protected] www.aride.nl

Handleiding Content Management Systeem Umbraco. Versie 1.2

Recommend Documents