contact us

Use the form on the right to contact us.

You can edit the text in this area, and change where the contact form on the right submits to, by entering edit mode using the modes on the bottom right.

St. Peter Hauptstraße 8
8042 Graz
Austria

Videobasierte E-Learnings von digitaleducation.tv sind der Schlüssel zu kosteneffizienter Mitarbeiter-Ausbildung. Ihre MitarbeiterInnen trainieren zeit- und ortsunabhängig.

Zudem können Sie videobasierte E-Learnings von digitaleducation.tv ganz einfach in Ihr Lernmanagementsystem (LMS) integrieren. Dies garantiert der SCORM-Standard, in welchem die Trainings produziert werden.

Blog

So gestalten Sie individuelle Buttons für Ihren E-Learning Kurs

digitaleducation.tv

Die meisten Autorentools zur Erstellung von E-Learning Kursen, wie WBTs oder videobasierte E-Learnings, liefern bereits vordefinierte Buttons, welche Sie ganz einfach nutzen und in Farbe, Form etc. verändern können. Doch was, wenn Sie nicht mit einem Autorentool, sondern mit einem Content Management System (CMS) arbeiten oder Ihr E-Learning Kurs den Charakter einer Website aufweist? Oder möchten Sie einen individuellen Button für Ihr Lernmanagementsystem (LMS) erzeugen? Dann stehen Ihnen HTML- und CSS-Elemente zur Verfügung. Im Falle eines CMS können Sie ein Code-Element in Form eines Blocks einfügen und in diesen Ihren individuellen HTML- und CSS-Code eintragen. Doch auch manche Content Management Systeme bieten bereits vordefinierte Buttons an.

Möchten Sie einen individuellen Button erstellen, können Sie dies über einen Link tun. Das HTML-Element, welches Sie im <body> einfügen müssen, würde dann beispielsweise wie folgt aussehen:

Vergessen Sie bitte nicht auf den Verweis in Ihrem HTML-Bereich auf das CSS-Dokument. Dafür müssen Sie im <head> folgenden Code integrieren:

Danach können Sie mittels CSS Ihren Link als Button gestalten. In manchen CMS muss hierfür der CSS-Code in den HTML-Bereich integriert werden. Dies machen Sie am besten, indem Sie Ihren CSS-Code in folgendes Element packen:

<style> …. </style>

Beispielsweise könnte Ihr CSS-Code nun wie folgt aussehen:

Der Hover-Effekt sorgt dafür, dass sich der Button gestalterisch verändert, wenn Ihre Lerner die Maus über diesen bewegen. Im Einzelnen bedeuten die Code-Elemente folgendes:

  • background-color: Hintergrundfarbe
  • border: Rahmenart
  • border-radius: Radius des Rahmens
  • color: Textfarbe
  • padding: Abstand rund um Text
  • text-align: Testausrichtung
  • text-decoration: Textgestaltung
  • display: Art der Box
  • font-size: Schriftgröße
  • font-family: Schriftart
  • margin: Leerraum zwischen Elementen
  • cursor: Aussehen des Mauscursors

 

Natürlich stehen noch anderen Möglichkeiten zur Verfügung, um einen Button individuell zu gestalten und mittels HTML und CSS zu integrieren. Als HTML- und CSS-Beginner eignet sich diese Methode über einen Link schon sehr gut. Möchten Sie jedoch fortgeschrittenere HTML- und CSS-Codes anwenden, suchen Sie einfach im Web danach. Hier wird sich bestimmt etwas Passendes für Sie finden lassen.

DIGITALEDUCATION.TV PRODUCTS

Video-Trainings

UNIVERSITY

Allgemein
Webinar
English Webinar
Webinar on Demand

BLOG

Blog
English Blog
Blog Archiv
Podcast