Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion

collapse

* Alles hat ein Ende...

Eine Weisheit der Dakota-Indianer sagt:
"Wenn Du entdeckst, dass Du ein totes Pferd reitest, steig ab!"

Vor fast fünf Jahren habe ich die NOF-Community gegründet und nachdem just zu diesem Zeitpunkt das „alte NOF-Forum“ quasi über Nacht vom Betreiber geschlossen wurde, war mein Forum für viele Nutzer von NetObjects Fusion eine willkommene Alternative.

Inzwischen sind weit über 5000 NetObjects-Nutzer in der NOF-Community registriert und täglich kommen weitere hinzu. An interessierten Mitgliedern fehlt es also nicht. Was aber fehlt, sind Mitglieder, die Lust haben, anderen Nutzern bei der Lösung ihrer vielfältigen Probleme in der Anwendung von NetObjects Fusion zu helfen. Vielleicht, weil viele von ihnen - ebenso wie ich - das Interesse an NOF verloren haben und zwischenzeitlich mit anderen Programmen arbeiten.

Aktuell ist es so, dass der Support wie die Kosten für den Betrieb der NOF-Community fast ausschließlich von mir übernommen werden. Dies, und die Tatsache, dass ich die Arbeit mit NetObjects Fusion nicht mehr für zeitgemäß halte, veranlasst mich, den aktiven Forenbetrieb zu beenden. Die Beiträge, Tipps und Anleitungen aus den letzten Jahren stehen ab heute nur noch als Nachschlagewerk zur Verfügung.

Ich bedanke mich an dieser Stelle ganz herzlich bei allen, die mich und die NOF-Community in den vergangenen Jahren unterstützt haben.

Beste Grüße nettesekel

Die letzten Beiträge

Autor Thema: Google Web Fonts in NOF einbinden  (Gelesen 1554 mal)

0 Mitglieder und 1 Gast betrachten dieses Thema.

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Google Web Fonts in NOF einbinden
« am: 07. August 2012, 09:28:15 »
Google WebFonts in NetObjects Fusion (NOF) einbinden


Warum Schriften einbinden? Was soll das?

Ein wesentliches Gestaltungselement beim Erstellen einer Website ist die verwendete Schriftart. Auf unseren PCs haben wir eine ganze Menge solcher Schriften und können uns gestalterisch so richtig austoben. Häufig kommt dann jedoch das böse Erwachen, wenn man seine liebevoll gestaltete Seite auf dem PC eines Freundes oder auf der Arbeit aufruft und plötzlich alles in Times New Roman angezeigt wird, statt in der tollen Schrift, die da doch eigentlich zu sehen sein müsste.
Der Grund dafür ist Folgender: Wenn wir unsere Schrift formatieren, dann wird in einer Styledatei (CSS) oder direkt im Quelltext die von uns eingestellte Schriftart vermerkt, damit der Browser “weiß”, welchen Absatz er in welcher Schriftart darstellen soll. Steht im Quelltext unserer Seite, dass der Text auf der Startseite in der Schriftart ‘Metrophobic’ angezeigt werden soll, dann greift der Browser auf die auf unserem Computer installierten Schriften zu, damit eine entsprechende Darstellung möglich ist.  Betrachtet nun jedoch ein User unsere Website, der die gewählte Schriftart nicht auf seinem System installiert hat,
dann kann diese Schriftart natürlich nicht dargestellt werden. Damit der vorhandene Text jedoch für jedermann lesbar ist, wählt der Browser eine Alternativschrift (family) aus.  Um solche Probleme zu vermeiden, war es lange Zeit ratsam sich für Standardschriften zu entscheiden, die auf jedem System vorhanden sind. (Bsp.: Arial, Verdana) Um dennoch ein wenig gestalten zu können, behalf man sich hier und da, indem man eine ausgefallene Schriftart per Grafik ausgegeben hat.
Dies ist zwar optisch eine gute Lösung, für Suchmaschinen allerdings völlig uninteressant, die "lesen" nämlich keine Bilder.


Die google WebFonts schaffen hier schnell und unkompliziert Abhilfe. Google WebFonts “ersetzt” quasi die fehlenden Systemschriften unserer Seitenbesucher.

Und so geht man vor, wenn man die google WebFonts in seinem NOF-Projekt nutzen möchte.
Unter http://www.google.com/webfonts findet Ihr die Google Web Fonts. Weil nicht jeder Font jedes Zeichen unterstützt, solltet Ihr, wie im nächsten Screenshot zu sehen ist, zunächst einen eigenen Beispielstext mit Umlauten und “ß” eingeben, um zu testen, ob euer Wunschfont diese darstellen kann.
 



Nun suchen wir uns einen Font aus, der uns für unser Projekt zusagt und die gewünschten Anforderungen erfüllt. Zu jeder Schriftart findet Ihr verschiedene Buttons, so auch den Button Quick-use. Diesen klicken wir nun im nächsten Schritt an.




Und gelangen danach zu der folgenden Ansicht. Hier interessieren uns nun die zwei von mir rot gekennzeichneten Bereiche.
Zunächst kopieren wir uns den Codeschnipsel aus dem rot markierten Bereich 1 in die Zwischenablage. Es ist darauf zu achten, dass der komplette Code in der Zwischenablage liegt und nicht unvollständig kopiert wird. Mit dem Code in der Zwischenablage wechseln wir nun zu NetObjects Fusion und öffnen das gewünschte Projekt.




In der Seitenansicht drücken wir auf der Tastatur die Taste F10, wodurch die Master-Rahmen-Eigenschaften aufgerufen werden.
Auf der Eigenschaftenpalette klicken wir nun den html-Button und fügen den Code aus der Zwischenablage im sich öffnenden Fenster zwischen den head-Tags ein. In den älteren NOF-Versionen aktivieren wir im geöffneten Fenster hierfür den entsprechenden Reiter, in den neueren Versionen klicken wir das entsprechende Icon am oberen Fensterrand um den Cursor an der passenden Stelle zu aktivieren. Das alles könnt Ihr dem folgenden Screenshot nochmal anschaulich entnehmen.




Als nächsten kopieren wir uns auf google WebFonts den Codeschnipsel aus dem rot markierten Bereich 2 in unsere Zwischenablage und wechseln wieder zurück zu NetObjects Fusion.
Hier gibt es nun verschiedene Möglichkeiten den Codeschnipsel unterzubringen. Welche Möglichkeit Ihr nutzen möchtet, ist davon abhängig, in welchem Bereich eurer Website Ihr den Font einsetzen wollt.

Beispiel 1: Ihr möchtet den Font standardmäßig im gesamten Projekt verwenden.
Dazu ruft Ihr in NOF die Designansicht auf und fügt den kopierten Codeschnipsel in die Eigenschaften für den Haupttext ein.
Im folgenden findet Ihr jeweils einen veranschaulichenden Screenshots zur Vorgehensweise in älteren und neueren NOF-Versionen.
 

 








Wollt Ihr den Font nur für Eure H-Tags, also Überschriften nutzen, dann geht Ihr genauso vor wie in den letzten Screenshots zu sehen, nur markiert ihr zu Beginn dann den entsprechenden H-Tag, der formatiert werden soll.




Eine andere Möglichkeit ist, die Google-Fonts in Formatvorlage (CSS-Klassen) zu verwenden. In den folgenden Screens demonstriere ich, wie man eine Formatvorlage erstellt und dieser den Google-Font mitgibt.
 










Das wars eigentlich auch schon. Sobald Eure Formatvorlage zum Einsatz kommt, werden die formatierten Bereiche den Google-Font darstellen. Lasst Euch bitte nicht davon irritieren, wenn Ihr den Font in NOF nicht direkt sehen könnt. Die Informationen zum Font kommen über das Internet, deshalb muss die Seite zunächst einmal publiziert werden (lokal reicht) bei bestehender Internetverbindung ruft Euer Browser die Informationen zur Schriftart ab und Ihr könnt Euer Werk bewundern.

Viel Spaß! :-)

 

 

« Letzte Änderung: 27. Dezember 2016, 13:50:26 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion

 


Wenn dir dieser Artikel gefallen hat, dann empfehle ihn doch weiter... ;)