Handleiding internet Het maken van pagina s

Transcriptie

1 Handleiding internet Het maken van pagina s Hoofdstuk IV Vullen van pagina s met tekst en beeld

2 Het vullen van een pagina met tekst en beeld In dit hoofdstuk gaan we een van de pagina s vullen met tekst en beeld. Om de pagina te openen, klik je op de naam van de pagina. Als je de pagina hebt gemaakt met behulp van het sjabloon [ Standaard Pagina ], dan heb je al een inhoudselement. Zet je muis ergens op het inhoudselement en de donkere balk zal oplichten. Nu zie je het gereedschap om de pagina mee te bewerken, van links naar rechts: - bewerken - zichtbaar maken/verbergen - kopiëren - referentie maken - knippen - koppeling verwijderen Het laatste icoontje, koppeling verwijderen, zorgt dat het element van de pagina verdwijnt maar nog niet definitief wordt weggegooid. Hier over meer aan het einde van dit hoofdstuk. Als je de pagina hebt gemaakt met het icoontje of via het pagina-menu, heb je een lege pagina. Hier gaan we een inhoudselement inzetten door te klikken op het icoontje van een pagina met een groen kruisje, op de plek waar we hem willen hebben, in dit geval in de Content kolom:

3 Je kiest hier voor het inhoudselement Tekst met afbeelding. Het inhoudselement opent nu op het eerste tabblad Algemeen. Dit is ook waar je terecht komt als je al een inhoudselement hebt en op het potloodje klikt om te bewerken. Vul bij de Header de titel in van de tekst die je wilt maken (of niets, als je geen titel wilt) en in het tekstblok de tekst.

4 De zogenaamde Rich Text Editor werkt grotendeels hetzelfde als gewone tekstprogramma s zoals Word. Verschil is dat een deel van de opmaakmogelijkheden verborgen (grijs) zijn zolang er geen tekst is geselecteerd. Wanneer je een stuk tekst selecteert, komen deze extra mogelijkheden naar voren: Het maken van een link in de tekst. Je kunt links maken naar pagina s op de eigen site, naar andere sites, naar een bestand dat bezoekers kunnen downloaden of naar een mailadres. Om een link te maken, klik je na het selecteren van de tekst waar je de link achter wilt hangen op het wereldbolletje met een schakeltje.

5 Je krijgt een scherm met verschillende tabbladen voor verschillende soorten links: Pagina verwijst naar een pagina in de boomstructuur. Je klapt hem uit via het driehoekje. Een rood driehoekje er achter betekent dat er sub-pagina s of inhoudselementen zijn. Je kunt ook naar een inhoudselement linken, dan opent hij de pagina op de plek waar dit element staat. Bestand verwijst naar een bestand uit de Bestandenlijst. Ook hier selecteer je deze door de mappen te openen met het driehoekje. Door op de link te klikken, download de bezoeker het bestand. Map verwijst naar een map in de Bestandenlijst. Deze optie geeft echter geen resultaat voor de bezoeker, dus wordt niet gebruikt. Externe URL verwijst naar een andere website. Deze link opent standaard in een ander tabblad, zodat je de bezoeker niet kwijt bent als hij de andere website sluit. In het veld URL voeg je het website adres in en daarna klik je op Sla link op. NB: Als je een link wilt aanpassen, selecteer je de tekst opnieuw. In het pop-up scherm zie je vooraan een vijfde tabblad: Verwijder link. Als je daar op klikt, haalt hij de link weg. Daarna kan je de link opnieuw invoeren. Ook een link helemaal verwijderen doe je met deze tab. Alleen de tekst in de editor verwijderen is meestal niet voldoende. Om een link te maken naar een adres, voer je in het veld het mailadres in en klik je op Sla link op. De link wordt op de website versleuteld, dat houdt in dat hij niet herkenbaar is voor programma s die mailadressen verzamelen om spam te versturen. Aan de voorkant (frontend) zien de bezoekers (at) in plaats van Als je op de link klikt, opent deze een nieuwe mail in je mailprogramma en wordt de link terugvertaald naar een gewoon mailadres met

6 Voor de link zie je een icoontje met een pijltje. Dit icoontje vertelt aan de bezoeker wat de link doet. In het voorbeeld hebben we een link gemaakt naar de externe pagina Het icoontje geeft een pijltje schuin naar boven, dat betekent een link naar een andere website. Een horizontaal pijltje geeft aan dat het een link is naar een eigen pagina, een pijltje naar beneden is een link naar een downloadbaar bestand en een klein envelopje is een link naar een mailadres. Als je dit icoontje niet mooi vindt, kan je het wissen in de editor, maar vooral als je links maakt in de tekst, is het voor de bezoeker wel handig om te weten wat ze aanklikken. Toevoegen van een afbeelding Om een afbeelding toe te voegen, ga je naar het tabblad Afbeeldingen. Afbeeldingen selecteer je uit de Bestandenlijst, waar je terecht komt als je op de knop Afbeelding toevoegen klikt. Je kunt ieder bestand kiezen dat in de lijst staat, ongeacht in welke map deze staat. Staat het bestand dat je wilt hebben er nog niet in, dan kan je deze heel makkelijk toevoegen terwijl je werkt. Je hoeft de pagina dus niet af te sluiten. (De voorbeelden hieronder zijn deels gemaakt op de test-afdeling) Klik op Afbeelding toevoegen (zie boven). Open in de Bestandenlijst de map waar je de afbeelding wilt plaatsen. In dit voorbeeld is een map gemaakt die 'Overig beeld' heet.

7 Je ziet nu welke map je geopend hebt en wat daar al in staat. Om het beeld dat je nu wilt gebruiken hier aan toe te voegen, klik je op Bestanden kiezen. Je komt dan op je eigen computer terecht, waar je bladert naar het beeld wat je wilt plaatsen. Dubbelklik op het beeld of klik onderaan het scherm op 'Openen' en je haalt het beeld binnen.

8 Als de naam van de afbeelding in het schermpje staat, klik je op Uploaden. Het beeld staat nu in de lijst van de map. Vink het vakje bij het beeld aan en kies 'Selectie importeren'.

9 Het beeld staat nu in het inhoudselement en je kunt hem verder opmaken. Een onderschrift toevoegen doe je in het vakje Beschrijving. Om de bezoeker de kans te geven de foto groter te bekijken dan hoe hij in de tekst wordt getoond, klik je het vinkje aan bij Vergroot op klik. Je kunt ook op deze manier meerdere bestanden in 1x uploaden. Selecteer daartoe de bestanden die je wilt hebben (bijvoorbeeld met Ctrl + de muis) en klik op 'Openen' onderaan het scherm. In plaats van de naam van de afbeelding zie je nu het aantal beelden dat je geselecteerd hebt.

10 En na 'Uploaden' staan ze allemaal in de lijst. In het volgende tabblad, Weergave, kan je aangeven hoe je de afbeelding het liefst gepositioneerd ziet op de pagina. Denk daarbij aan de opmerking bij het hoofdstuk Algemene informatie: de site is responsive, dus de plek waar je de foto zet, is nooit echt vast.

11 In het tabblad Weergave kan je (zie groene kader) een maat opgeven (voer alleen breedte OF hoogte in, anders vervormt het beeld), je kunt aangeven of er een rand om de foto heen moet, en er zijn een paar speciale effecten, die worden hier niet verder behandeld, je kunt ze uitproberen als je dat interessant vindt. In het rode kader zie je hoe je de afbeelding kunt plaatsen ten opzicht van de tekst: in de tekst, naast, onder of boven de tekst, links of rechts uitgelijnd of gecentreerd. Onder het tabblad Toegang kan je de pagina zichtbaar of onzichtbaar zetten (groen kader), je kunt een automatische link onderaan het artikel maken waardoor de bezoeker terug gaat naar de bovenkant van de pagina (oranje kader, alleen handig als je heel lange pagina s hebt) en je kunt eventueel een start- en einddatum aangeven als je de inhoud alleen een beperkte tijd wilt zien. Om te kijken hoe de pagina geworden is, klik je op het opslaan + bekijken icoontje bovenaan de pagine (diskette met oogje). In een nieuw tabblad krijg je de pagina te zien met rechts boven het woord PREVIEW en overal bewerk-potloodjes. Die potloodjes geven je de kans om ook vanuit die pagina dingen even aan te passen, als je bijvoorbeeld alleen een punt vergeten hebt of een kleine typefout ontdekt. Let wel op dat je goed opslaat, zowel wanneer je op deze manier hebt aangepast, als wanneer je terug bent op de backend van de pagina, anders wordt het niet overgenomen.

12 Het resultaat: In de linkerbalk zie je de verschillende pagina s die zijn aangemaakt. NB: Wanneer je geen pagina te zien krijgt, is vermoedelijk nog niet geactiveerd dat je de nog verborgen elementen kunt zien. Als dat het geval is, ga je met de scrollbalk zo vermogelijk naar beneden, tot je het zogenaamde Adminpaneel ziet. Vink daar onder Bekijk de twee mogelijkheden aan en klik vervolgens op Actualiseren en als het goed is krijg je dan ook de nog verborgen pagina s te zien als je nogmaals op opslaan en bekijken klikt. Het kan zijn dat het Adminpaneel is ingeklapt. Je ziet dan alleen een donkere balk. Met de pijltjes rechts in die balk open je het paneel.

13 Teksten kopiëren van andere bronnen Wanneer je teksten overneemt van andere bronnen, zoals bijvoorbeeld uit een Word document, heb je grote kans dat de opmaak van het document niet goed wordt weergegeven op de webpagina. Er zijn verschillende manieren om de opmaak van zulke teksten te verwijderen. Opmaak van tevoren verwijderen: Kopieer of knip de tekst uit de oorspronkelijke bron en plak deze in het Kladblok (op Windows computers te vinden onder Bureau-accessoires). Kopieer of knip de tekst uit het Kladblok en plak deze in de Rich Text Editor (RTE). Opmaak na afloop verwijderen: Selecteer de geplakte tekst en kies in het menu van de RTE voor het icoontje van het bezempje om opmaak te verwijderen. Je krijgt dan een pop-up scherm met diverse mogelijkheden. Opmaak verwijderen tijdens het werken: Er bestaan kleine gratis freeware programma s die er voor zorgen dat opmaak verdwijnt als je de tekst plakt. Een voorbeeld hiervan is Puretext ( waarbij je knipt of kopieert zoals je gewend bent, maar plakt met de Windows-toets + V in plaats van Ctrl + V. De rechterkolom MEER Het vullen van de rechter kolom werkt op dezelfde manier. Je kunt per pagina inhoudselementen toevoegen aan de rechter kolom. Er is geen limiet aan het aantal inhoudselementen. Het onderste deel met het Word lid-plaatje en de tabs met Forum en Tuinlog schuiven dan naar beneden. Denk wel goed na wat je in de content kolom plaatst en wat in de rechter kolom. De rechter kolom is bij uitstek geschikt voor leuk ondersteunend beeld, voor links naar gerelateerde websites, voor kleine stukjes extra informatie, etc. De overige inhoudselementen Dit nog invullen als het opschonen van de lijst klaar is.