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: Eine Homepage für mobile Geräte mit NetObjects Fusion  (Gelesen 12874 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
Eine Homepage für mobile Geräte mit NetObjects Fusion
« am: 16. Januar 2013, 11:36:44 »
Immer wieder tauchen Fragen, nach "handyfähigen" Websites auf und so habe ich mich mal für euch mit der Thematik auseinandergesetzt.
Wie ich finde, habe ich eine recht passable Lösung erstellt und bin nach Tests auf verschiedenen mobilen Geräten recht zufrieden mit dem Ergebnis, erhebe allerdings keinen Anspruch darauf, dass meine Lösung der Weisheit letzter Schluss ist. Dennoch erkläre ich euch gern, wie ich vorgegangen bin und worauf ich besonders geachtet habe.

Der eine oder andere von euch kennt sie vielleicht schon, unsere kleine Werbe- und Infopage für unser Forum. www.nof-forum.info
Zu dieser Website habe ich nun eine "handyfähige" Website-Version erstellt. Direkt aufrufen könnt ihr diese Version unter http://mobiledemo.nof-community.de/

Ich habe für die neue Website bei meinem Provider eine Subdomain angelegt und diese Domain auf das entsprechende Verzeichnis auf meinem Webserver umgeleitet, in welches ich später die Inhalte für meine Mobile-Page geladen habe.


Edit: Die Domain nof-forum.info ist von mir gekündigt und kann deshalb nicht mehr zur Demonstration der Weiterleitung genutzt werden. Die Mobile Version ist aber nach wie vor zum Anschauen online.

« Letzte Änderung: 21. Dezember 2016, 14:42:22 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

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Was hat es auf sich mit der handyfähigen Website?
« Antwort #1 am: 16. Januar 2013, 12:42:49 »
Die Weiterentwicklung und Verbesserung mobiler Endgeräte, wie Handys und Smartphones läuft rasant schnell und so ist Stand heut eigentlich jedes gängige Gerät durchaus in der Lage, eine normale Website optisch und technisch ansehnlich darzustellen. Nicht zuletzt deshalb wird von einigen Usern die Notwendigkeit einer speziellen Website-Version für mobile Endgeräte in Frage gestellt.
Ich habe diese Zweifel bislang ein Stück weit geteilt, habe sie jedoch durch das intensive Befassen mit der Thematik  ein gutes Stück ausräumen können.

Meines Erachtens zeichnet sich die Tauglichkeit einer Website für mobile Endgeräte nicht ausschließlich dadurch aus, dass die Website vom Gerät dargestellt werden kann, sondern vielmehr dadurch, wie gut eine Website in ihrer Bedienbarkeit an die technischen Besonderheiten mobiler Endgeräte angepasst ist.

Als wichtige Gesichtspunkte sehe ich hier Dinge wie:
  • genaue Planung dazu, welche Inhalte den Nutzern mobilder Endgeräte unbedingt verfügbar gemacht werden sollen
  • reduzieren von Dateigrößen - beispielsweise bei Bildern - und die damit verbundene Reduktion von Ladezeiten und Datenvolumen
  • Verzicht auf alle Inhalte, die Ladezeit und Datenvolumen unnötig erhöhen
  • Verwendung großer einfacher Schriftarten für bessere Lesbar- und Bedienbarkeit
  • Schaltflächen, Buttons, Logos so dimensionieren, dass sie auf dem Touchscreen mit dem Finger gut bedienbar sind
  • ein einspaltiges Layout schafft Platz für die nötigen Inhalte
« Letzte Änderung: 16. Januar 2013, 16:06:43 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

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Wie habe ich angefangen?
« Antwort #2 am: 16. Januar 2013, 16:57:31 »
Zunächst mal habe ich überlegt, welche Abmessungen meine Website haben soll. Erstelle ich eine Website maßgeschneidert auf das Display eines gängigen Smartphones, dann ist das zum einen sehr fummelig und zum Anderen würde ein Seitenbesucher mit einem IPad mini die Website auf seinem Display suchen müssen.
Bzw. würde die Qualität der Seite bei derartiger Vergrößerung extrem in Mitleidenschaft gezogen. Anders verhält es sich beim Verkleinern einer Website. Der Qualitätsverlust ist in diesem Falle vergleichsweise geringfügig.

Also habe ich mal nachgesehen, welche Auflösung das IPad mini hat, dessen Nutzer ich noch zur Zielgruppe für meine Mobile-Page zählen würde. Das IPad mini hat bei einer Displaygröße von 7,9 Zoll eine Auflösung von 1024 x 768px. Orientiert am kürzesten Maß habe ich mich für eine Seitenbreite von 750px für meine Website entschieden.
« Letzte Änderung: 16. Januar 2013, 17:23:40 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

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Was gilt es zur Schrift zu überlegen?
« Antwort #3 am: 16. Januar 2013, 17:43:37 »
Im nächsten Schritt habe ich getestet, welche Schriftarten und Schriftgrößen ich verwenden muss/sollte, damit diese auf einem kleinen Endgerät wie einem Smartphone mit einer Displaygröße von 3,5 Zoll ohne Zoom noch lesbar sind.

Bei meinen Tests habe ich festgestellt, dass man auf exotische Schriftarten besser verzichten sollte. Google Web Fonts z.B. wirken zum einen negativ auf die Ladezeit der Seite aus und zum anderen lässt die Darstellung und somit die Lesbarkeit dieser Schriften auf einem Handydisplay sehr zu wünschen übrig.
Gut steht man sich mit einer Schriftart wie Verdana, sie ist gängig und sehr gut lesbar.

Was die Schriftgröße angeht bin ich zu dem Schluss gekommen, dass diese für den Haupttext mindestens 30px betragen sollte (bezogen auf die Schriftart Verdana). Schriftgrößen für Schaltflächen und Überschriften sind ggf. entsprechend größer zu wählen.
« Letzte Änderung: 16. Januar 2013, 20:05:03 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

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Was ist bei Bildern und Grafiken zu beachten?
« Antwort #4 am: 16. Januar 2013, 19:22:03 »
Bilder, Grafiken und Logos sollten im eigentlichen Projekt ruhig überdimensioniert erscheinen, denn es gilt zu bedenken, dass diese auch auf einem Handy noch gut erkennbar sein sollen und das möglichst ohne dass der Betrachter die Website näher heran zoomen muss. 
In der Arbeitsansicht sollte eure Website also in etwa den Charakter einer 1.Klasse Lese-Fibel haben und den Eindruck erwecken, dass man die Schaltflächen der Navigation mit Fausthandschuhen bedienen könnte.
 (chuckle) ;-)
Heißt, auch die Schaltflächengrafiken sollten eine entsprechende Größe haben. In meiner Beispielwebsite betragen die Maße für eine Schaltfläche 320 x 75px.
Man kann hier aber durchaus auch zu quadratischen Schaltflächen greifen. 

Nun kann man sicherlich sagen, größere Bilder erfordern auch größere Dateien, aber diesbezüglich sollte man das Dateiformat seiner Bilder und Grafiken bedacht auswählen - JPG-Dateien sind z.B. von der Dateigröße her in aller Regel deutlich kleiner als PNG-Dateien. Wo es die Qualität erfordert, dass das PNG-Format genutzt wird, gibt es entsprechende Tools, welche selbst die Dateigröße transparenter PNG-Dateien ohne sichtbaren Qulitätsverlust um ein Vielfaches reduzieren. http://tinypng.org/
« Letzte Änderung: 16. Januar 2013, 20:06:31 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

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Aufbau der Homepage für mobile Geräte mit NetObjects Fusion
« Antwort #5 am: 17. Januar 2013, 20:00:12 »
Damit nach diesem Tutorial auch jedem klar ist, wie er für seine bestehende Website eine mobile Website-Version erstellen kann, gehe ich den Aufbau einer solchen Website mal in groben Schritten für euch durch.
Wir beginnen damit, dass wir uns ein neues leeres Projekt anlegen und sofort in den Design-Modus wechseln um dort die wichtigsten Einstellungen vorzunehmen.
Meine Screenshots stammen wie meistens aus der Version 9, damit auch Nutzer älterer Versionen eine Chance haben. Dort wo es gravierende Abweichungen gibt werde ich zusätzlich jeweils einen Screenshot einer aktuelleren NOF-Version bzw. einen Hinweis einfügen.

Angekommen im Design, legen wir zunächst einen neuen leeren Style an und bennen diesen nach unseren Wünschen. Mit einem Doppelklick auf den Sitestylenamen weisen wir den Style unserem Projekt zu. Dass der Vorgang erfolgreich war erkennt man daran, dass der Stylename nun fett gedruckt dargestellt wird.
Der vorher aktive Sitestyle wird mit einem Rechtsklick und der Auswahl "Löschen" entfernt, damit er nicht unnötig unser Projekt belastet.

« Letzte Änderung: 28. Dezember 2013, 14:48:14 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

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Re: Eine Homepage für mobile Geräte mit NetObjects Fusion
« Antwort #6 am: 17. Januar 2013, 20:20:05 »
Nachdem der Style angelegt und zugewiesen wurde, aktiviert ihr den Reiter "Grafik".
Nutzer neuer NOF-Versionen befinden sich automatisch beim Öffnen der Designansicht auf diesem Reiter und müssen ihn deshalb nicht anwählen.

Hier markiert ihr zunächst mit einem Klick den Absatzt Haupttext und klickt anschließend auf den Format-Button um zu dem Fenster für die Einstellungen zu gelangen. Nutzern höherer Versionen steht die Eigenschaftenpalette direkt zur Verfügung, sie brauchen den Button "Format" nicht suchen.



Über die Eigenschaftenpalette nehmt ihr nun für den Absatz Hauttext alle Einstellungen für den Hintergrund und die Schrift vor.

Das Besondere gegenüber einer "normalen" Website ist die erheblich größere Schrift. Ich habe mich hier für den normalen Text für eine Schriftgröße von 30px entschieden.
Ausserdem verwende ich Verdana, da diese Schrift sehr gut lesbar ist, was für die Benutzerfreundlichkeit auf mobilen Geräten ein entscheidendes Kriterium ist.




« Letzte Änderung: 28. Dezember 2013, 14:58:44 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

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Eine Homepage für mobile Geräte mit NetObjects Fusion
« Antwort #7 am: 19. Januar 2013, 13:20:30 »
Wenn Ihr die beschriebenen Einstellungen vorgenommen habt, dann markiert ihr nacheinander die im folgenden Screenshot abgebildeten Absätze und nehmt auch für diese die Einstellungen der letzen zwei Screenshots bezüglich Text vor.



Häufig ärgern sich User, dass sie bei einem harten Zeilenumbruch (Enter) eine Leerzeile eingefügt bekommen und/oder dass die Abstände bei Aufzählungen zu groß sind. Wer diese beiden Dinge abschalten möchte nimmt bei den letzten 4 Absätzen zusätzlich zu den Schrifteinstellungen noch die folgende Einstellung vor.



« Letzte Änderung: 28. Dezember 2013, 14:59:52 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

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Re: Eine Homepage für mobile Geräte mit NetObjects Fusion
« Antwort #8 am: 22. Januar 2013, 18:37:12 »
Als nächstes markiert ihr die Absätze für die Überschriften (h-Tags) und legt fest, wie eure Überschriften aussehen sollen. Die Mindestgröße für die erste Überschrift sollte 38px betragen. Bei den anderen Überschriften könnt ihr dann auch etwas kleiner werden, jedoch nicht kleiner als die Schriftgröße die ihr für den Haupttext eingestellt habt.



Die Einstellungen für die Links (Verknüpfungen) lasst ihr bitte unangetastet, da sie uns bei unserer weiteren Arbeit sonst in die Suppe spucken werden.

« Letzte Änderung: 28. Dezember 2013, 15:01:52 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

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Re: Eine Homepage für mobile Geräte mit NetObjects Fusion
« Antwort #9 am: 22. Januar 2013, 18:52:26 »
Damit haben wir die wichtigen Einstellungen im Design vorgenommen und wechseln in die Arbeitsansicht. Hier angekommen löschen wir zunächst alle von NOF standardmäßig eingefügten Inhalte.

Als nächstes stellen wir mal die Maße der Masterrahmen ein. Mit der Taste F10 auf eurer Tastatur ruft ihr die Masterrahmeneigenschaften auf. Da wir für eine Mobile-Page - wie Eingangs erwähnt - am besten mit einem einspaltigen Layout arbeiten, stellen wir die Werte für den linken und rechten Masterrahmen (MB) auf je 0px. Ich weiß schon in etwa, welchen Platz ich für Header und Footer benötige, deshalb stelle ich für oben 540px und für unten 200px ein. Es ist aber überhaupt kein Problem hier nachträglich noch zu korrigieren.



Im Anschluss wenden wir uns den Layouteigenschaften zu, welche ihr mit der Taste F9 aufrufen könnt. Wie ich bereits zu Beginn erläutert habe, stehen uns für eine Mobile-Page nicht die gewohnten 990px Breite zur Verfügung, sondern wir haben beschlossen uns auf 750px zu beschränken. Diese 750px tragen wir in den Layouteigenschaften unter "Breite" ein.
Für die Höhe habe ich vorerst mal 500px eingegeben um etwas Platz zum Arbeiten zu schaffen. Dieser Wert wird jedoch von Seite zu Seite unterschiedlich ausfallen und muss dann dementsprechend korrigiert werden.

« Letzte Änderung: 28. Dezember 2013, 15:03:06 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

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Re: Eine Homepage für mobile Geräte mit NetObjects Fusion
« Antwort #10 am: 24. Januar 2013, 19:12:18 »
Für alle die, die im Aufbauen einer Website noch nicht so fit sind und das Tutorial "Ein eigenes Design" vielleicht noch nicht durchgearbeitet haben, gehe ich den Aufbau der Website mal in "groben" Schritten durch.
Bis zur Version11 darf man seine Seite getrost auf Tabellen aufbauen, da NOF beim Generieren des HTML-Codes ohnehin alle Inhalte in Tabellen verpackt. Meist ist es dann sogar so, dass weniger Tabellen im Quelltext zu finden sind, wenn man selbst ein Tabellengerüst aufbaut als wenn man NOF diese Arbeit überlässt.
Bei den jüngeren NOF-Versionen gibt es HTML-Ausgaben, die keine Tabellen generieren, allerdings kann ich mich nach mehrfachem Testen dem Eindruck nicht erwehren, dass diese Varianten noch nicht so 100%ig ausgegoren sind.
Aus genannten Gründen werde ich in dieser Anleitung mit Tabellen arbeiten, wer allerdings lieber mit Textfeldern und Layoutbereichen arbeit, wendet meine Anleitung eben auf seine Arbeitsweise an. Los gehts!
« Letzte Änderung: 11. Februar 2013, 14:05:52 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

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Re: Eine Homepage für mobile Geräte mit NetObjects Fusion
« Antwort #11 am: 05. Februar 2013, 13:24:05 »
Zunächst bauen wir den Kopf der Website im oberen Masterrahmen auf. Hierzu erstellt ihr eine Tabelle mit 1 Spalte und 3 Zeilen. Die Breite der Tabelle beträgt 750px, die Höhe stellt ihr vorerst auf "automatisch". Textabstand und Zellenabstand stellt ihr auf "0" und bestätigt mit OK. Nachdem die Tabelle eingefügt ist, platziert ihr sie ganz oben links in der Arbeitsansicht und stellt auch den Rahmen auf "0".

Dann markiert ihr die zweite Zeile und stellt ihre Höhe über die Eigenschaftenpalette auf 190px.



In der ersten Zeile möchte ich einen Anker setzen, damit der Seitenbesucher nach dem lesen einer Seite bequem per Top-Button wieder nach oben springen kann und nicht scrollen muss. Also doppelklickt ihr in die erste Tabellenzeile, so dass der Cursor blinkt, klickt anschließend den Button "Anker" auf der Eigenschaftenpalette an, gebt als Namen für den Anker "oben" ein und bestätigt die Eingabe mit OK.

In Zeile 2 möchte ich ein Logo platzieren. Das Logo soll auf einem dunklen Hintergrund liegen, welcher von einem Schatten umgeben ist. Für diesen Hintergrund habe ich mir nun folgende Grafik erstellt:



Die Maße der Grafik sind identisch mit denen der ersten Tabellenzeile, 750 x 190px. Mit einem Rechtsklick auf die Grafik könnt ihr diese speichern und für euer Projekt verwenden.

« Letzte Änderung: 28. Dezember 2013, 15:04:19 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

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Re: Eine Homepage für mobile Geräte mit NetObjects Fusion
« Antwort #12 am: 05. Februar 2013, 17:15:57 »
Erstellt nun eine Formatvorlage für die erste Tabellenzeile. Die Formatvorlage sollte folgende Einstellungen beinhalten:
Reiter Hintergrund: Hintergrundbild einstellen, Position links/oben, wiederholen abschalten
Reiter Rahmen: Abstand oben 30px und links 40-50px
Und weist diese Formatvorlage der oberen Zeile zu.

Wie man eine Formatvorlage erstellt...

Wie man eine Formatvorlage zuweist...

Im Anschluss fügt ihr euer Logo in die erste Tabellenzeile ein.



Die eingestellten Ränder von 30px sorgen dafür, dass das Logo nicht links und oben am Rand klebt.
Auch das Logo sollte überdimensioniert sein, aber nicht die Maße der Tabellenzeile abzüglich Ränder überschreiten. Strebt für das Logo eine möglichst hohe Qualität an, da die Größe von den einzelnen Geräten skaliert wird und allein durch diesen Prozess Darstellungs-Qualität verloren geht.


« Letzte Änderung: 28. Dezember 2013, 15:04:54 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

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Re: Eine Homepage für mobile Geräte mit NetObjects Fusion
« Antwort #13 am: 09. Februar 2013, 17:47:48 »
In der nächsten Zeile möchte ich nun die Navigationsleiste platzieren, deshalb verpassen wir dieser Zeile nun zuerst mal einen Hintergrund. Die Hintergrundgrafik habe ich bereits erstellt, ihr könnt sie euch mit einem rechtsklick speichern.



Hierzu erstellt ihr eine neue Formatvorlage mit den folgenden Einstellungen:
Reiter Hintergrund: Hintergrundbild einstellen, Position links/oben, wiederholen vertikal
Reiter Rahmen: Abstand oben 20px, rechts und links je 30px und unten 10px (ggf. später nachkorrigieren)
Und weist diese Formatvorlage der dritten Zeile zu.

Wie man eine Formatvorlage erstellt...

Wie man eine Formatvorlage zuweist...
« Letzte Änderung: 31. Januar 2015, 14:05:29 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

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Re: Eine Homepage für mobile Geräte mit NetObjects Fusion
« Antwort #14 am: 09. Februar 2013, 22:21:40 »
Nun weiter mit der Navigationsleiste. Da man auf mobilen Geräten wie Tablets und Smartphones mangels Maus keinen Hover-/Rollovereffekt hat, belaste ich mein Projekt auch nicht unnötig mit der Rollover.js der nof-eigenen Navi, sondern nutze eine einfache CSS-Navigation. Die unnütze Ladezeit für die js-Datei haben wir unserem Seitenbesucher somit erspart.
Wichtig ist auch hier wieder die Größe der Schaltflächen sowie eine gut lesbare Schaltflächenbeschriftung.

Damit am Ende dieses Tutorials jeder das Erstellen von Formatvorlagen im Schlaf beherrscht, erstellen wir nun... na? Rrrrischtisch! Die nächste Formatvorlage.

Wie man eine Formatvorlage erstellt...

Wie man eine Formatvorlage zuweist...

Für die Formatvorlage der Navigationsschaltflächen nehmt ihr nun folgende Einstellungen vor:

Reiter Text: Schriftart, Schriftgröße 36-38px, Schriftfarbe, bei Effekte das Häkchen vor "automatisch" entfernen
Reiter Absatz: Abstand oben und unten je 2px, Abstand linker und rechter Rand je 8px (sorgt für den Abstand zwischen den Schaltflächen)
Reiter Rahmen: Rahmen nach Geschmack, Textabstand oben und unten je 15px, links 12px (dient der Schriftausrichtung)
Reiter Hintergrund: Hintergrundfarbe einstellen (Bild ist auch möglich, gehe ich hier aber nicht näher drau ein)
Reiter Benutzerdefiniert:
NameWertErklärung
width320pxBreite der Schaltfläche
displayblockdie gesamte Fläche von 320 x 75px wird zum Link, statt nur dem Text

In den neueren NOF-Versionen kann es passieren, dass NOF die Angabe "width" über den Reiter Benutzerdefiniert ablehnt.
In diesem Falle klickt ihr unten links am Fensterrand auf den Link "Mit CSS-Editor bearbeiten" und tragt den Wert dort von Hand ein:

width: 320px;

Damit sind wir eigentlich auch schon fertig, denn eine hover-Klasse benötigen wir für Smartphones etc. nicht. Wer in seiner Navigation die aktuell aufgerufene Seite optisch hervorheben möchte, findet in folgendem Tutorial (recht weit am Ende) eine Anleitung hierzu. http://www.nof-academy.de/eine%20horizontale%20CSS-Navigation%20mit%20NetObjects%20Fusion%20erstellen/index.html

« Letzte Änderung: 31. Januar 2015, 14:05:58 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... ;)