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 12856 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
Re: Eine Homepage für mobile Geräte mit NetObjects Fusion
« Antwort #15 am: 12. Februar 2013, 16:58:48 »
Nun fügen wir unsere Navigation mit Hilfe einer weiteren Tabelle ein. In meinem Beispiel erstelle ich eine zweispaltige Navigationsleiste. Für eine Navigationsleiste mit 8 Schaltflächen füge ich also eine Tabelle mit 2 Spalten und 4 Zeilen in die dritte Zeile der vorhandenen Tabelle ein.
Die Tabellenhöhe der neuen Tabelle stellt ihr auf automatisch, die Breite darf nicht mehr betragen, als die Breite der Layouttabelle abzüglich der in der CSS-Klasse eingestellten seitlichen Ränder. Hier also 690px. (750 - 30 - 30)

Nachdem ihr die Tabelle eingefügt habt, fügt ihr in die einzelnen Zellen die Links zu euren Seiten und weist diesen Links die angelgete Formatvorlage zu.

Was ich persönlich für wichtig halte ist eine Schaltfläche die zur Desktopversion eurer Website führt. Ich persönlich halte eine Mobile-Page für eine Service-Leistung die man seinem Seitenbesucher durchaus anbieten kann. Die Entscheidung darüber ob und wann der Seitenbesucher welche der beiden Website-Versionen aufruft, sollte man ihm m.E. jedoch selbst überlassen.



Sollte der obere Masterrahmen nun doch etwas zu hoch eingestellt sein, könnt Ihr dies mit dem im Screen gekennzeichneten Schieber schnell noch korrigieren.

Lasst euch nicht vom Anblick der Navigation in der Arbeitsansicht irritieren. Die Einstellungen aus Eurer Formatvorlage werdet ihr nach Publizierung der Seite sehen können.
« Letzte Änderung: 28. Dezember 2013, 15:13:04 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 #16 am: 17. Februar 2013, 19:25:58 »
Als nächstes wenden wir uns dem Bereich zu, in welchem die Inhalte der einzelnen Seiten platziert werden sollen. Dem Bereich "Layout".
Hier habe ich nun eine neue Tabelle eingefügt, bestehend aus einer Spalte und einer Zeile. Die Tabellenbreite steht wie bei den anderen Tabellen auf "750px", die Höhe steht vorerst auf "automatisch" und Textabstand, Zellenabstand sowie den Rahmen habe ich auf "0" gestellt. Der Tabellenzelle, aus welcher die Tabelle besteht habe ich die selbe Formatvorlage zugewiesen, wie der Zeile in welcher wir die Navigation platziert haben.

« Letzte Änderung: 17. Februar 2013, 19:49: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

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 #17 am: 21. Februar 2013, 19:06:45 »
In diese Tabellenzeile können nun eure Inhalte (Texte, Bilder etc.) eingefügt werden. Bedient euch für Überschriften bitte auch eurer H-Tags, das macht die Seite SuMa-freundlich.



Wenn ihr Bilder in eure Seite einfügt, solltet ihr wieder darauf achten dass die Dateigröße möglichst gering gehalten wird und dass das Bildmotiv gut erkennbar ist. Damit meine ich, das Motiv des Bildes sollte auch dann noch erkennbar sein, wenn die Website auf die Größe eines Handydisplays herunterscaliert wird.
Ich würde mich also ggf. für Bildausschnitte entscheiden.

Beispiel

Während ich auf der Desktopversion meiner Website z.B. dieses Foto verwenden würde, ...



...würde ich für die Mobileversion eher einen solchen Bildausschnitt bevorzugen:


« Letzte Änderung: 28. Dezember 2013, 15:14:16 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 #18 am: 23. Februar 2013, 11:29:14 »
Nun geht es an den Footer. Dazu benötigen wir die nächste Formatvorlage. Für den Hintergrund des Footers habe ich die Header-Grafik einfach vertikal gespiegelt. Ihr könnt Euch diese Grafik wieder mit einem Rechtsklick speichern:


Die Formatvorlage sollte folgende Einstellungen beinhalten:
Reiter Hintergrund: Hintergrundbild einstellen, Position links/oben, wiederholen abschalten
Reiter Rahmen: Abstand oben 30px

Wie man eine Formatvorlage erstellt...


Wenn die Formatvorlage erstellt ist, fügt ihr im unteren Masterrahmen der Seite eine neue Tabelle ein. Die Höhe der Tabelle stellt ihr auf 220px die Breite wieder auf 750px. Die Tabelle bekommt 1 Spalte und zwei Zeilen, der Rahmen wird auf "0" gestellt.
Wenn die Tabelle eingefügt ist, schiebt ihr sie linksbündig unter die Layouttabelle, direkt an die Begrenzung des unteren MB. Nun stellt ihr für die obere Zeile eine
Zeilenhöhe von 190px ein. (stellt dazu die Höhe der zweiten Zeile vorher auf "automatisch" und anschließend wieder auf px zurück)
Wenn das erledigt ist, weist ihr der ersten Zeile die viorbereitete Formatvorlage zu.

Wie man eine Formatvorlage zuweist...


« Letzte Änderung: 28. Dezember 2013, 15:14:51 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 #19 am: 24. Februar 2013, 22:15:33 »
Im Fußbereich der Seite möchte ich nun den Link nach oben platzieren, für welchen wir eingangs den Anker gesetzt haben und zusätzlich möchte ich noch ein paar Social-Media-Button dort unterbringen.

Zu diesem Zweck platziere ich in der ersten Zeile der Footer-Tabelle eine weitere Tabelle , bestehend aus einer Zeile und zwei Spalten. Die Tabelle bekommt eine Breite von 680px, die Höhe kann vorerst auf automatisch stehen. Wenn sich die Tabelle in der ersten Zeile der Footer-Tabelle befindet, richte ich sie zentriert-oben aus.

Nun befülle ich die Tabelle mit Inhalt.
Alle Inhalte werden vertikal oben ausgerichtet, was die horizontale Ausrichtung betrifft, so richte ich die Inhalte der rechten Spalte rechts und die der linken Spalte links aus. In die linke Spalte lege ich nun meine 4 wichtigsten Social-Media-Buttons und verlinke sie...
Ihr dürft die Grafiken gern mit einem Rechtsklick speichern und verwenden. Auch bei diesen Grafiken habe ich mich bewußt für sehr große Abmessungen entschieden, damit beim Skalieren auf die Größe eines Handydisplays die Bedienbarkeit der Buttons mit dem Finger immer noch gegeben ist.



In die rechte Spalte füge ich den Text "nach oben" ein und verlinke ihn mit dem zu Beginn eingefügten Anker.

Allerdings nutze ich hierfür nicht die von NOF gegebene Möglichkeit den gesetzten Anker anzusprechen, weil ich in NOF den Anker nur auswählen kann, wenn ich zuvor eine Seite des Projekts auswähle und so würde der der Link immer zu dieser Seite führen und nicht seitenunabhängig nach oben.

Wenn der Link zum Anker immer nach oben führen soll, egal auf welcher Seite ich mich befinde, dann muss wie folgt verlinkt werden:




Wenn das alles erledigt ist, sieht der Fußbereich meiner Seite in etwa so aus:

« Letzte Änderung: 28. Dezember 2013, 15:17:04 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 #20 am: 28. Februar 2013, 20:19:06 »
Nun bleiben nur noch so Kleinigkeiten wie das Zentrieren der Seite, was man hier nachlesen kann: http://www.nof-community.de/index.php/topic,4.0.html und das Erzwingen eines Scrollbalkens was man bei Bedarf hier nachlesen kann: http://www.nof-community.de/index.php/topic,5.0.html

Damit haben wir den Grundaufbau einer Seite besprochen. Selbstverständlich kann man gestalterisch sehr unterschiedlich vorgehen... ich beschreibe hier natürlich nur eine Möglichkeit, sein Layout aufzubauen.
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 #21 am: 28. Februar 2013, 20:21:31 »
Zum guten Schluss möchte ich euch noch kurz eine Möglichkeit aufzeigen, eure Seitenbesucher automatisch über die Existenz einer Mobile-Version eurer Seite zu informieren und ggf. auf diese umzuleiten.

Das kleine Script wird zwischen die Head-Tags eurer Website eingefügt. Ich persönlich würde es einmalig ins Layout-html der Startseite einfügen. Warum nicht in alle Seiten? Sollte sich ein mobiler Seitenbesucher entscheiden, die Desktopversion eurer Website zu besuchen und von der mobilen Version keinen Gebrauch zu machen, so würde er beim navigieren durch eure Website bei jedem Seitenwechsel erneut gefragt, ob er nicht lieber die mobile Version aufrufen möchte. Mich selbst würde das spätestens nach der dritten Seite derart nerven, dass ich die Seite vermutlich verlassen würde.

Da es nun aber auch passieren könnte, dass ein mobiler Seitenbesucher durch ein Suchergebnis auf eine eurer Unterseiten gelangt und somit auf das mobile Angebot gar nicht aufmerksam würde, würde ich grundsätzlich in die Desktopversion eurer Website einen Hinweis mit Link zu eurer Mobile-Page einbinden.

Hier nun das Script zum einbinden ins Layout-html (F9) eurer Website. Dazu das Layout-html über den html-Button der Eigenschaftenpalette aufrufen und das Script zwischen den head-Tags einfügen und das Fenster mit dem OK-Button schließen.

Den rot markierten Teil, könnt ihr nach euren Wünschen anpassen. Ausserdem solltet ihr den Link zu mobilen version eurer Website anstelle des jetzt vorhandenen Links eintragen.

Code: HTML5
  1. <script type="text/javascript">
  2. $(document).ready(function() {
  3.   if ($(window).width() < 999) {checkmobile = confirm("[color=red]Für die Auflösung Ihres Bildschirms bieten wir eine mobile Version unserer Website an. Möchten Sie diese nun aufrufen?[/color]");
  4.    if (checkmobile == true) {
  5.       document.location = "http://mobile.nof-forum.info";
  6.        }
  7.    }
  8. });

Wenn nun ein Besucher mit Smartphone eure Website aufruft, wird seine Auflösung vom Script ausgelesen und er bekommt den im Script rot gekennzeichneten text zu lesen. Nun kann er bestätigen oder ablehnen. Bestätigt er, gelangt er zu mobilen Version eurer Website, lehnt er ab verbleibt er auf der Desktopversion eurer Website.

« Letzte Änderung: 31. Januar 2015, 14:18: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 #22 am: 01. März 2013, 13:47:10 »
Das wars eigentlich auch schon... ich wünsche gutes Gelingen!

Wenn ich mal etwas mehr Zeit habe, erweitere ich das Tutorial vielleicht noch ein wenig. :)
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... ;)