HTML

Endlich steht eine neue umfangreiche Anleitung für den Aufbau eines eigenen Designs mit NOF zur Verfügung.

Es sind also nun zwei Versionen vorhanden:

Das Original wurde umgezogen:

Die alte Version – Ein eigenes Design mit NOF – Mit Tabellen (mit der Geranien-Vorlage)

 

Die neue Anleitung befindet sich auf den Hauptseiten der NOF-Schule:

Basisanleitung insbesondere für NetObjects Fusion 2013

NetObjects Fusion Tutorial

Inhalte:

Eine genaue Auflistung der Inhalte wurde in der NOF-Schule veröffentlicht:

http://www.nof-schule.de/forum/t-neues-tutorial-ein-eigenes-design-mit-nof

Die Themen sind übersichtlich mit Ankern verlinkt, so dass man in den Tutorials auch sehr leicht einzelne Themen finden und bearbeiten kann.

Eine Druckversion ist in Vorbereitung.

 

 

Im Seiten-HTML Editor früherer NOF-Versionen waren die Seitenbereiche klar voneinander getrennt und einfach zu befüllen. Seit NOF 11 wurde der Seiten-HTML Editor überarbeitet.

Nachfolgend eine bildliche Darstellung der verschiedenen Eingabebereiche (Tags):

 

HTML-Editor NOF 11 - NOF 12

HTML-Editor NOF 11 – NOF 12

 

In NetObjects Fusion ab Version NOF10 lassen sich iFrames auf Knopdruck erstellen. In dieser NOF-Anleitung möchten wir dem iFrame eine CSS-Klasse zuweisen.

Tutorial iFrame in NOF erstellen

CSS-Klasse zuweisen

Da kein CSS-Editor für den iFrame vorhanden ist, erstellen wir zuerst eine CSS-Formatvorlage.

Nach dem Einzeichnen des iFrames klicken wir in den iFrame Eigenschaften auf „HTML“. Die zuvor erstellte CSS-Class wird wie üblich im HTML-Editor „im Tag“ eingefügt:

 

Zuweisung der CSS-Class im i-Frame HTML-Editor

Zuweisung der CSS-Class im i-Frame HTML-Editor

 

 

Rahmen für den iFrame

mit oben beschriebener Vorgehensweise lässt sich z.B. ein Rahmen für den iFrame definieren. So sieht die CSS-Formatvorlage (CSS-Class) aus:

Rahmen für iFrame definieren

Rahmen für iFrame definieren

 

Nicht vergessen dann im Eigenschaftenfenster des iFrames „Rahmen“ abzuhaken!

 

 

Bei der Erstellung von Rahmen um Objekte werden von NOF sprachlich unterschiedliche Bezeichnungen verwendet.

Nachfolgend habe ich diese einmal zusammengefasst und beispielhaft deren Design dargestellt. Zwecks besserer Erkennbarkeit der Unterschiede ist die Rahmen-(Linien)dicke 10px gewählt, bis auf die ‚dotted‘ in 5 px Dicke. Die gewählte Farbe ist bei allen gezeigten Rahmen grün (RGB 0,128,0). Je nach Erstellungsart ist das Design erst auf der publizierten Seite sichtbar.

rahmen

Links zu externen oder internen Seiten können für die Suchmaschinenoptimierung genutzt werden, in dem man sie mit relevantem Text verknüpft und mit relevanten Mouseover-Titel beschreibt.

So sollte man es nicht machen:

http://www.nof-schule.de/forum

Besser ist es so:

Das beste  deutschsprachige NetObjects Forum

In der zweiten Verlinkung sind relevanten Keywords im Text und im Mouseover-Titel enthalten.

Tutorial zu Bild- und Link-Titeln in NetObjects Fusion

Man kann in HTML-Code Kommentare einbringen. Diese Kommentare werden vom Browser nicht verarbeitet, sondern dienen dem Programmierer dazu, sein eigenen Code eben mit Kommentaren zu versehen.

Dabei wird ein Kommentar mit

<!--

eingeleitet und beendet mit

-->

Bei den beiden Editoren von NOF muss man das nun manchmal auch anwenden, damit bestimmte Code-Schnipsel von NOF nicht das Layout oder die Tabelle verschieben. Wir nennen das “auskommentieren”, da ja hier nicht wirklich ein zusätzlicher Kommentar geschrieben wird, sondern eben bestimmte Tags oder Zeichen nicht verarbeitet werden sollen.

Für eine ausführliche Beschreibung mit Beispielen lest bitte auf meiner Hife-Seite.