Smart Components Seitennavigation. Seitennavigation

Transkript

1 Seitennavigation 1

2 Button Start : Auf der ersten Seite einer Lerneinheit befindet sich der Button Start. Zunächst befindet sich der Button im Normal-Zustand Berührt der Lerner den Button mit der Maus, so blendet sich der Hover-Event ein Beim Klick auf den Button ist der Klick-Event sichtbar Beim Loslassen wechselt das System von der Startseite auf die erste Inhaltseite Kann der Start-Button aus irgendwelchen Gründen nicht geklickt werden so wird der Disabled-Zustand dargestellt 2

3 Die Zustände werden durch den Versatz der Hintergrundgrafik [ button_start.png ] simuliert. Der Button hat das Format 66 x 82 px. Jedoch wird der Button überlappend an der rechten Kante positioniert, somit liegt ein Teil außerhalb des sichtbaren Bereichs, sodass letztendlich 59 x 82 px vom Button sichtbar sind. Achtung: Bei der Positionierung und Breite der Textbox bitte darauf achten, dass der Text innerhalb des sichtbaren Bereichs bleibt Ein Tool-Tipp wird nicht eingeblendet, da der Button mit seiner Beschriftung selbstsprechend ist Die Lerneinheiten können auf Basis folgender Sprachen erstellt werden Deutsch, Englisch, Französisch, Spanisch. Je nach Sprachauswahl wird die entsprechende Oberflächensprache gezogen Reicht der Platz für den Text nicht aus, so kann dieser in eine Folgezeile laufen. Ggf. Schriftgröße (z.b. bei FR-Version auf 9px setzen) 3

4 Button Weiter und Zurück Auf der rechten Seite einer Inhaltsseite befindet sich der Button Weiter. Auf der linken Seite der Button Zurück. Die Schaltflächen haben verschiedene Zustände, wie Normal oder auch Disabled und reagieren auf Mouse-Events, wie Mouse-Over und Mouse-Press. Die Zustände werden durch den Versatz der Hintergrundgrafik [ button_weiter.png und button_zurueck.png ] simuliert. 4

5 Beim Klick auf den Weiter-Button wechselt die Ansicht zur nächsten Seite der Lerneinheit. Beim Klick auf den Zurück-Button wechselt die Ansicht zurück zur vorherigen Seite. Die Schaltflächen werden am Rand der Seite in den Anschnitt positioniert. Der Button hat das Format 66 x 82 px. Jedoch wird der Button überlappend an der rechten bzw. linken Kante positioniert, somit liegt ein Teil außerhalb des sichtbaren Bereichs, sodass letztendlich 59 x 82 px vom Button sichtbar sind. 5

6 Button Beenden Der Button Beenden befindet sich rechts auf der letzten Seite einer Lerneinheit. Beim Klick des Beenden-Buttons wird die Lerneinheit beendet und das Browserfenster wird automatisch geschlossen. Die Schaltfläche hat die verschiedene Zustände, wie normal oder auch disabled und reagiert auf Mouse-Events, wie Mouse-Over und Mouse-Press. Die Zustände werden durch den Versatz der Hintergrundgrafik [ button_beenden.png ] simuliert 6

7 Der Button hat das Format 66 x 82 px. Jedoch wird der Button überlappend an der rechten Kante positioniert, somit liegt ein Teil außerhalb des sichtbaren Bereichs, sodass letztendlich 59 x 82 px vom Button sichtbar sind. Ein Tool-Tipp wird nicht eingeblendet, da der Button mit seiner Beschriftung selbstsprechend ist Die Lerneinheiten können auf Basis folgender Sprachen erstellt werden Deutsch, Englisch, Französisch, Spanisch. Je nach Sprachauswahl wird die entsprechende Oberflächensprache gezogen Texte und Einstellungen des Dialogs im Autorentool Titel des Dialogs: Buttons: Zurück, Weiter, Start, Beenden 1. Element: Label: Medienobjekt: + editierbares Textfeld mit dem Default-Eintrag: Buttons: Zurück, Weiter, Start, Beenden 2. Element: Label: Art: + Drop-Down-Liste mit den Werten [ Start Zurück Weiter Beenden ] 7

8 Hilfetext DE: Die Smart Component Buttons: Zurück, Weiter, Start, Beenden enthält Buttons für 4 Navigationsfunktionen für ein E-Learning. Zurück: Der Lerner springt zu der Seite, die er zuletzt besucht hat. Weiter: Der Lerner springt zur nächsten Seite Start: Dieser Button wird nur auf der ersten Seite eines E-Learnings verwendet und der Lerner startet damit das E-Learning. Beenden: Dieser Button wird nur auf der letzten Seite eines E-Learnings verwendet und der Lerner beendet und schließt damit das E-Learning. Nächste E-Learning starten: Dieser Button wird nur auf der letzten Seite eines E-Learnings verwendet, um auf ein Folge-E-Learning zu verweisen. Der Trigger muss manuell gesetzt werden. Hilfetext EN: The smart component Buttons: Back, Next, Start, Close has buttons for 4 navigation functions. Back: The Learner goes back to the previously viewed page. Next: The learner jumps to the next page. Start: This button is used only at the first page of the e-learning. The learner starts with this button the e-learning. Close: This button is used only at the last page of the e-learning. The learner closes with this button the e-learning. Start next e-learning: This button is used only at the last page of an e-learning in order to refer to the next e-learning. The trigger needs to be set manually. 8

9 Bilder Bildstreifen für die Schaltflächen normal, hover, pressed, disabled 9

10 Schrift Schrift 1: font-family: Trebuchet MS font-size: 10px color: #FFFFFF font-weight: bold text-align: center text-transform: uppercase line-height: 10px Arbeitshilfen Die Positionierung folgt einem Raster [ Raster_1260x800_lila ]. Die Bilder Seitensteuerung_Start_Raster, Seitensteuerung_Zurück_Weiter_Raster und Seitensteuerung_Beenden_Raster zeigen das Layout mit eingeblendetem Raster. Unter SmartComponentsTexte_de_en_fr_es liegen die Texte für die jeweilige Sprachversion ab. 10