Dit artikel legt uit hoe je HTML templates in de content kan gebruiken.
Tip! Klik hier voor tips & tricks en belangrijke informatie met betrekking tot het gebruik van HTML templates in Brightspace.
Je kan verschillende types materiaal toevoegen aan je course. Zie het artikel Hoe voeg ik nieuwe inhoud toe aan mijn cursus? voor meer informatie.
Als er een HTML document wordt toegevoegd, heb je de mogelijkheid om templates te gebruiken voor een goed-gestructureerde tekst en eventuele afbeeldingen.
Let op: Het toepassen van een template op een bestaande pagina zal de content overschrijven en zal ervoor zorgen dat je al je werk kwijt bent. Klik Cancel om de wijzigingen ongedaan te maken.
Een template toevoegen
- Ga naar de module waar je materiaal wil toevoegen.
- Klik op Create New in de rechterbovenhoek.
- Klik op HTML Document.
1. Vul je titel in.
2. Als je geen gebruik wilt maken van een voorbeeld-template, begin met typen in het tekstvak. Indien je wel gebruik wilt maken van een voorbeeld-template, zie stap 4.
3. Nu heb je de mogelijkheid voor meerdere opties zoals het invoegen van afbeeldingen, het kiezen van een opmaak, het toevoegen van tabellen, etc.
4. Om een bestaand template te gebruiken, klik rechts bovenin op Templates en kies het juiste format. De templates bieden een voorbeeldstructuur aan voor het content item. Je kan zelf elementen invoegen zoals tekst, afbeeldingen, videos, etc. Kies een template dat goed bij jouw materiaal past.
5. Zet het item op Visible als het meteen zichtbaar voor de andere gebruikers in de cursus moet zijn, of kies ervoor om het item Hidden te houden totdat het item klaar is voor gebruik en om gezien te worden door anderen.
Tips & Tricks voor het gebruik van HTML Templates
Hieronder vind je een aantal Tips & Tricks betreffende het gebruik van HTML templates in Brightspace.
Ontwerp module / submodule pagina's
Je kunt de HTML-templates alleen selecteren als je HTML-bestanden aan de inhoud toevoegt. Ze kunnen niet worden gebruikt in een module- of submodulepagina.
Wat wel kan, is de template in HTML-code kopiëren, en deze plakken in de HTML-code van de module- of submodulepagina.
Start je module en/of submodules met een HTML-templatepagina om op een nette en gestructureerde manier informatie te verstrekken.
Werk in een groter HTML-bron-editorscherm
Het kan erg omslachtig zijn om het kleine HTML-bron-editorscherm te gebruiken dat in de HTML-bestandeditor verschijnt wanneer je beslist om inhoud toe te voegen. Via Manage files kun je toegang krijgen tot een veel groter scherm voor de HTML-broncode. Hieronder vind je de stappen die je moet volgen.
Stappen
- Ga naar Course Tools > Course Admin > Manage files.
- Klik op het pijltje naast het HTML bestand dat je wilt wijzigen.
- Klik op Edit File.
- Gebruik de resize knop in de hoek rechtsboven om het scherm te vergroten.
- Nu heb je een groot scherm om je HTML-code aan te passen.
Elementen uit HTML-templates kopiëren/plakken
Hieronder vind je de geadviseerde manier om HTML-elementen te kopiëren naar de uiteindelijke versie van je HTML-pagina in Brightspace.
Voorbereiding om elementen te kopiëren:
- Ga naar de cursus.
- Klik op Content > Add > HTML document.
- Laad je gekozen HTML-template; bijvoorbeeld 01_Course_Introduction.html
- Open een nieuw internetbrowsertabblad of -venster en ga opnieuw naar je cursus en open een ander HTML-document. Dit tweede venster zal functioneren als je notitieblok waar je een andere template etc. kunt laden.
HTML elementen kopiëren:
- Laad de HTML-template met de elementen die je in je tweede venster wil kopiëren. Als je de hele template wilt gebruiken, is het beter om die template in je eerste venster te laden.
- Kopieer elementen van het tweede scherm naar het eerste scherm.
- Je kunt de templates in het tweede scherm wijzigen en verschillende elementen van meerdere templates kopiëren.
Tekst uit andere bronnen kopiëren/plakken
Wij raden het af om geformatteerde tekst uit een woorddocument of andere bronbestanden te kopiëren naar Brightspace. Het is aan te raden om platte tekst te plakken zonder opmaak (ctrl, shift + v / cmd, shift + v).
Defecte HTML-code kan een bron van veel ongewenst gedrag zijn. Niet alleen kan de tekst er heel anders uitzien in edit mode en live mode, maar het kan ook de look and feel van de Leidse Templates verstoren.
Hieronder vind je de geadviseerde manier om een Word-document om te zetten in een HTML-pagina in Brightspace.
Voorbereiding
- Ga naar je cursus.
- Klik op Content > Add > HTML document.
- Laad je gewenste HTML-template; bijvoorbeeld 04_Basic_Page - No Banner
- Open het Word-document.
Kopiëren uit Word
-
Standaard paragraaf text:
- Selecteer en kopieer de paragraaf.
- Ga naar de gewenste plek in het HTML document met je muis.
- Gebruik de rechtermuisknop en selecteer 'paste as plain text' (ctrl, shift + v / cmd, shit + v).
-
(on)Geordende lijst - hele lijst:
- Selecteer de lijst in Word.
- Klik op het lijsticoon om de opsommingstekens te verwijderen.
- Kopieer de lijst.
- Ga naar de gewenste plek in het HTML-document met je muis.
- Gebruik de rechtermuisknop en selecteer 'paste as plain text' (ctrl, shift + v / cmd, shit + v).
- Klik op het lijsticoon in Brightspace om het opnieuw een lijst te maken .
-
(on)Geordende lijst - per element/opsomming:
- Indien je de Grote Getallen-lijst of de checkmarklijst wil gebruiken, adviseren we de lijst per element te kopiëren.
- Selecteer de lijst in Word.
- Klik op het lijsticoon om de opsommingstekens te verwijderen.
- Kopieer het eerste punt en plak het als platte tekst achter de grote 01 of het vinkje.
- Herhaal deze stap voor alle elementen totdat je klaar bent.
Je kunt de bovenstaande tips gebruiken voor andere bronnen; zoals webpagina's. Houd er rekening mee dat tekst als platte tekst moet worden geplakt!
Insert Elements voorbeelden
Voorbeeld 1: Accordion
'Accordion' is een van de opties die je kunt gebruiken voor Insert Elements. Zoals je in het onderstaande voorbeeld kunt zien, kun je haakjes maken die open en dicht gaan als je erop klikt. Hier krijg je meer informatie, afhankelijk van op welke haak je klikt.
Voorbeeld 2: Carousel
Een ander voorbeeld van Insert Elements is 'Carousel'. Met het sjabloon 'Carousel' kun je een willekeurig aantal afbeeldingen uploaden en een diavoorstelling maken binnen een HTML-pagina van een Brightspace course. Door op de pijltjes onder de afbeelding te klikken, ga je naar de volgende of vorige afbeelding.
Voorbeelden voor Insert Practice
Voorbeeld 1: Fill in the blanks
Een van de opties onder Insert Practice is 'Fill in the blank'. Met 'Fill in the blank' kun je lege plekken in zinnen invullen, zoals je in het onderstaande voorbeeld kunt zien. Daarna kun je controleren of de antwoorden juist zijn.
