Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Panoramafotografie: Virtuelle Touren mit Pano2VR

CSS-Datei in Pano2VR einbinden

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Eine externe CSS-Datei eröffnet vielfältige gestalterische Freiheit. Auf diese Weise können Sie neben unterschiedlichsten Formatierungen auch eigene oder externe Schriften einbinden.

Transkript

Um jetzt das Schriftbild innerhalb von Pano2VR zu verändern, müssen Sie eine CSS-Datei einbinden, in der dann genau diese Klassen, die ich hier diskret innerhalb des Textfeldes vergeben habe oder hier für die gesamte Textbox innerhalb des Skins und diese CSS_Datei, die binden Sie im Ausgabepanel unter HTML ein und dort gibt es bei der HTML-Geschichte den kleinen Button mit der Vorlage und dort finden Sie unten den Eintrag pano.css. Und der steht jetzt hier schon drin, stimmt aber nicht, weil ich die Datei woanders hinkopiert habe, unter Material habe ich jetzt eine Datei pano.css vorbereitet. Pano2VR wird diese Datei beim Erzeugen der Tour einlesen und dann praktisch in seine eigenen Styles, denn davon hat es eine Menge, einbauen. Denn alles das, was Sie im Skin machen, mit runden Ecken und mit den ganzen Farben, das ist auch nichts anderes als CSS, da wird nur einfach jetzt hier per Code, den wir selber schreiben müssen, etwas hinzugefügt. So, wenn ich das jetzt mache, dann wird diese CSS-Datei eingebaut und wird zusätzlich mit ausgegeben. Wenn wir uns jetzt kurz mal in der Bridge unseren Ordner anschauen, den Output-Ordner, dann schaut das im Moment so aus und da wird jetzt diese Styles-CSS hinzukommen, in der wir diese Geschichte einfügen. Zunächst zeige ich aber diese Datei mal her, ganz kurz nur, also für die Web-Leute ist das relativ einfach, was hier steht, und für alle Anderen kurze Erklärung: Ich habe hier eine externe Schriftdatei eingebunden, das geht über Google Fonts. und Google Fonts ist eine sehr, sehr nette Geschichte. Sie können einfach hier auf Fonts.google.com gehen und sich einfach Schriften suchen, nach bestimmten Typen und ähnliche Dinge mehr. Ich habe jetzt hier mal die Source Sans Pro genommen, also auch eine serifenlose Schrift, die aber ganz hübsch ausschaut, und recht brauchbar ist die Roboter, ist auch eine schöne Schrift. Das ist hier eben Most popular, die werden halt wirklich sehr oft verwendet. Ich habe jetzt mal einfach diese genommen, einfach nur um ein anderes Schriftbild zu bekommen und hier kann man die ganze Geschichte, dann wenn man das auswählt, sich einen Link holen und ich habe das jetzt hier schon mal gemacht, hier einen fix und fertige Codezeile, die man dann in eine CSS-Datei einbinden kann. Ich habe hier unten nochmal als Kommentar die Quelle hingeschrieben, sodass Sie finden, wo diese Schrift herkommt, wenn Sie diese Webadresse aufrufen und das sind jetzt meine Zuweisungen für die entsprechende Schrift. Dass Pano titlebar ist hier, da wird diese Schrift verwendet, etwas dicker, man kann ja zwischen normal und bold in diesen Zahlen mit 700 und 500 und 400, also in Hunderterschritten wählen, das ist so eine Angabe, die etwas flexibler ist, als nur normal und bold, und die verschiedenen Schriftgrößen, also naturhistorische Museum in 28 Pixel, der Panorama-Titel in 24 Pixel und das ist jetzt hier für den Titel. In der Box hsi-Titel, das sind also diese ganzen Klassen, die wir vergeben haben. Wenn ich das jetzt mit einbinde, dann sollte das funktionieren. Der Vorteil ist hier, die Schrift selber liegt bei Google, wird von Google geladen und da muss man auch nichts sonst machen, das kann man einfach so einbinden. Das sind relativ kleine Dateien, das kratzt Google nicht besonders, wenn die runtergeladen werden, das bieten Sie sozusagen gratis an bei der massiven Bandbreite, die die zur Verfügung stellen. Und man kann das natürlich auch selber machen, da muss man die Schrift auf den eigenen Server packen und dann statt diesen Teil hier oben einfach was anderes reinschreiben, eigener Server, eigener Font, wo auch immer der steht. Man muss allerdings die normalen Schriften, die man so für das Desktop Publishing braucht, dann entsprechend konvertieren in Webfonts. Das führe ich aber jetzt hier nicht aus, die Leute, die das machen, die wissen, wie das geht. So, ich binde mal diese Datei jetzt ein, also ausgewählt habe ich sie und wenn ich jetzt das Ganze ausgebe, dann sollte die Schrift ein bisschen anders ausschauen. So, jetzt sehen wir das hier, ist jetzt ein bisschen rausgerückt, aber die Schrift schaut auf jeden Fall deutlich anders aus. Auch hier, bei meiner Info-Box schaut es anders aus. Die Kopfleiste ist nämlich jetzt fett und der Rest ist in normalen Text. Das heißt, hier funktioniert die Formatierung auch innerhalb eines einzelnen Textfeldes und hier oben, da muss ich jetzt nochmal kurz hinschauen, da ist im Skin noch was verrutscht, das ist Aso was ich vorhin wahrscheinlich auf die Seite gegeben habe und das muss doch noch einen Stück rein, so. Eventuell da muss ich die Textbox ein bisschen vergrößern, denn sie sollte auf jeden Fall genug Platz bieten, so ist es schon ein bisschen besser. Verrutscht ist es noch etwas, aber das soll uns jetzt erstmal egal sein, mir geht es einfach darum zu zeigen, wie das funktioniert. Natürlich kann ich jetzt diesen Dingen, wie diesen kleinen Tooltips, also bei einem beliebigen Textfeld natürlich auch noch irgendwelche Styles geben und die in CSS dann einfach entsprechend definieren, das ist relativ einfach. Wenn ich nur ein Textfeld selber mit CSS-Klassen bedienen möchte, dann muss danach immer noch ein div stehen, weil der Text steht dann noch innerhalb eines untergeordneten Tags und da ist es immer div, aber wenn ich die Klassen direkt in den Text reinschreibe, von der Textbox, dann kann ich die auch direkt mit Ihren Klassen adressieren. Das dient aber mal als Ausgangspunkt zum Selber-Probieren, weil das natürlich auch bei dem Beispiel da und dabei dass Sie da die Anatomie von dem ganzen Projekt gründlich untersuchen können. Also so funktioniert die Einbindung von externen CSS-Dateien und im Resultat schaut es dann eben so aus, dass jetzt hier dieses styles.css dazugekommen ist, und wenn ich die öffne, dann sieht die so aus, dass die einfach nur anders heißt und meine Daten eins zu eins übernommen hat, sogar inklusive Kommentar. Es ist auch egal, wie die heißt, sie müssen einfach korrekt eingebunden sein und dann funktioniert die Geschichte eben hier unter HTML-Werkzeugkasten und hier muss die Datei vorhanden sein, die wir dafür brauchen. So viel also zur Gestaltung, zum Feintuning vor allen Dingen von Schriften 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!