Panoramafotografie: Virtuelle Touren mit Pano2VR

CSS-Klassen für Skin-Elemente

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Die Ausgabe einer virtuellen Tour basiert neben HTML5 und JavaScript auch auf CSS. Erfahren Sie in diesem Video, wie Sie für die eigene Gestaltung Zugriff auf die Stile erhalten.

Transkript

Die Ausgabe von virtuellen Touren und interaktiven Panoramen in Pano2VR basiert ja auf den Standard-Webtechnologien HTML, JavaScript und CSS 3. Und genau das Letztere, das CSS, also die Cascading Style Sheets, das ist ja das wichtigste Gestaltungselement im Web überhaupt. Und das, was Pano2VR intern produziert, basiert zum großen Teil darauf und lässt sich natürlich auch entsprechend erweitern. Wenn Sie mal genau nachdenken über den Skin-Editor, dann haben wir dort zwar eine ganze Reihe von Gestaltungsmöglichkeiten, wenn wir aber zum Beispiel irgendein Textfeld nehmen, dann findet man da nichts, von wegen Fonts oder Schriften oder Schriftgröße, Schriftfarbe gibt es schon, das ist also relativ rudimentär. Das ist auch ganz bewusst offen gelassen worden, weil wir nämlich die Möglichkeit haben, das von draußen zu machen oder auch zum Beispiel so zu machen, dass wir das noch in der fertigen Tour ändern können. Wenn man hier bei einem Textfeld in die Abteilung Fortgeschritten geht, dann steht hier CSS Klassen oder CSS Stile. Bei CSS Stile könnte ich jetzt zum Beispiel eingeben font-size, das ist also die Schriftgröße, Doppelpunkt und eine bestimmte Pixelanzahl, ich könnte das hier ändern. Das geht hier direkt, dann wird das direkt übernommen, es ist aber sehr viel geschickter, das extern zu machen, und zwar vergibt man zunächst sogenannte CSS-Klassen, das heißt einfach eine ID, eine Kennzeichnung für dieses eine Textfeld und das werde ich jetzt einmal machen. Das heißt einfach pano, ich kopiere es mir mal gerade von daher, wo ich es gerne hätte, pano-titlebar-Text, das ist hier, ich habe das nämlich schon vorbereitet, damit es dann später mit den anderen Sachen zusammenpasst. Das heißt, ich habe jetzt hier mal eine CSS-Klasse pano-titlebar-Text. Unter dieser Klasse ist dann diese Box später zu erreichen von außen und kann beliebige Stile annehmen, andere Schrift, andere Farbe, was weiß ich, alles Mögliche, was man sich so vorstellen kann. Und das Gleiche, das gibt es auch hier für diesen fixen Text vom Naturhistorischen Museum und hier gibt es jetzt CSS-Klasse, ich kopiere mir das gerade, das heißt, pano-titlebar-NHM. Und diese beiden Dinge sind jetzt greifbar, das ist eine Möglichkeit, hier praktische eine Klasse einzufügen, die gilt dann für den gesamten Text. Es wird aber noch sehr viel interessanter, wir können nämlich zum Beispiel Folgendes machen, wir können auch innerhalb dieser Textbox noch Unterscheidungen treffen. Und zwar habe ich jetzt hier ja Folgendes gemacht: Wenn ich auf mein Info-Hotspot gehe, dann hat er aber in dem hs_info_text, hat er ja schon ein bisschen HTML-Code drin stehen. Das ist das, was wir hier sehen. Hs und dann kommt br, das ist HTML, das ist einfach einen Zeilenumbruch und ich habe jetzt mal einen kleinen Textschnipsel vorbereitet, der das Ganze ein bisschen anders macht. Und da schaut das so aus, dass ich jetzt hier das ersetze. Text ist nämlich der Gleiche und wir haben jetzt hier HTML-Code, und zwar ist das ein div-Tag, das heißt einfach eine normale Box und da steht jetzt class=hsi-title. Das ist das Gleiche im Prinzip, was hier unten passiert. Nur hier kann ich das jetzt noch etwas genauer unterscheiden. Das ist nur ein Textfeld, ich kann aber zwei verschiedene Textstücke einfügen und die haben auch unterschiedliche Textklassen. Und hier ist das die eine Klasse und das ist die andere Klasse, die bezieht sich auf den Text von der Hotspot Description, von der Beschreibung und das ist der Hotspot-Titel. So und das Ganze, das lässt sich jetzt unabhängig davon einstellen, wie ich die Klasse hier vergebe und beziehungsweise ich brauche dort auch gar keine Klasse, so, sondern ich kann die Sachen hier sozusagen direkt vergeben. Und ich kann natürlich das noch machen, also so habe ich es in meinem Muster gemacht, das kopiere ich nochmal kurz her, ich habe hier unten noch meine Klasse angegeben, die heißt hs_info-Text und dann kann man von da aus dann einfach hier weitergehen. Das schauen wir uns dann an, wie das genau ausschaut, welcher Code dann dafür nötig ist, dass diese Dinge genau angesprochen sind. Das heißt also, kurz nochmal rekapitulieren. Wir haben hier die Möglichkeit, dass wir den Text selber HTML-mäßig so auszeichnen, dass wir dort CSS-Klassen vergeben, um einzelne Teile dieses Texts zu stylen und wir haben hier sowohl für den gesamten Text nochmal eine Klasse, um den als gesamten zu identifizieren. Wenn uns das reicht, dann brauchen wir das nur hier zu machen oder hier zum Beispiel, nur an dieser Stelle und dann passt die Geschichte. Das ist jetzt sozusagen die Vorbereitung für die Gestaltung vor allen Dingen der Schrift, weil oft wollen zum Beispiel Kunden Ihre Hausschrift haben und ähnliche Dinge mehr oder einfach diese normalen Webfonts, hier ist es wie Arial oder wie Helvetica. Das ist natürlich ein bisschen langweilig und da was Eigenes zu bringen, ist natürlich immer netter, vor allen Dingen, weil wir auch die Möglichkeiten dazu haben. Dazu aber dann mehr im nächsten Video, das war jetzt die Vorbereitung für ein individuelles Styling von Text innerhalb von Pano2VR.

Panoramafotografie: Virtuelle Touren mit Pano2VR

Lernen Sie, wie Sie mit Pano2VR mehrere Panoramen zu einer interaktiven, begehbaren Besichtigungstour zusammenstellen und für das Web ausgeben.

9 Std. 51 min (103 Videos)
Derzeit sind keine Feedbacks vorhanden...

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!