Vorbereitungen für den Einbau in NOF NetObjects Fusion

Runterladen: Datei niftycube.js | Runterladen: Datei niftyCorners.css

Ablageort der JavaScript-Datei

Wir erstellen folgenden Ordner in deinem Projektverzeichnis unter “Lokale Publizierung”:

Mach einen Ordner in den „Assets“ unter "Lokale Publizierung" und nenne ihn "scripte" => dorthin kopierst du die Datei „niftycube.js“

Ablageort der CSS-Datei

Die CSS Datei „niftyCorner.css“ muss hingegen dort liegen, wo auch die betreffende Html-Datei liegt. Also entweder im Verzeichnis mit der „index.html“ oder eben im Vezeichnisordner "html"

zum Seitenanfang

Einfügen der “nifty”-Scripte in NOF NetObjects Fusion

Es geht los: Projekt öffnen -> NOF-Benutzeroberfläche -> Seitenansicht -> Layout

Formatierung Textfeld oder Tabelle

1. im Layoutbereich ein(e) Textfeld/Tabelle aufziehen (der Einfachheit halber reden wir künftig nur noch von Textfeld).
2. Textfeld anklicken -> aus dem Bedienfenster "Layout-Eigenschaften" wird "Text-Eigenschaften".
    [Hinweis: mit F3 können die Eigenschaftsfenter ein- und ausgeblendet werden]
3. im Fenster "Text-Eigenschaften" auf den Knopf "HTML" gehen: Fenster "Objekt-HTML" öffnet sich.
4. im Fenster "Objekt-HTML" sind zwei Reiter: "Vor dem Tag" und "Nach Tag".
    *Einfügen in "Vor dem Tag": <div id="boxblue">
    *Einfügen in "Nach dem Tag"</div>
5. Mit "OK" bestätigen

=> So kannst du ein Textfeld nach dem anderen aufziehen und mit einer 'div id' versehen.
Hinweis: jedes Textfeld und jede Tabelle benötigen eine neue ‘div id’ - es ist nicht möglich, sie mehrmals zuverwenden. Mehr Infos hierzu siehe weiter unten unter “Boxen”.

Formatierung im Head-Bereich

Jedes <div> muss im Head-Bereich referenziert werden, und zwar 2mal!

Wir sind immer noch in der Seitenansicht -> Layoutbereich:

Irgendwo auf eine leere Stelle im Layoutbereich klicken -> aus dem Fester “Text-Eigenschaften” wird “Layout-Eigenschaften”. Im Fenster "Layout-Eigenschaften" auf den Knopf "HTML" gehen -> Fenster "Seiten-HTML" öffnet sich. Im Fenster "Seiten-HTML" den Reiter "Zwischen Head-Tags" auswählen. Dort das nachfolgende Script einfügen.

Mann kann auch auf eine leere Stelle im Layoutbereich mit der rechten Maustaste klicken, und dann “Layout-HTML” anwählen.

Das Script zum Einfügen in die "Zwischen Head-Tags":

<style type="text/css">
div#boxgreen{width:479px;padding:10px 0;background: #BAFB80}
div#boxpurple{width:300px;padding:10px 0;background:#DBCAEE}
div#boxblue{width:479px;padding:10px 0;background:#A0AED9}
div#boxred{width:175px;padding:10px 0;background:#FF8D8D}
div#boxbig{width:479px;padding:10px 0;background:#FF8D8D}
</style><script type="text/javascript" src="assets/scripte/niftycube.js"></script>
<script type="text/javascript">
window.onload=function(){
Nifty("div#boxgreen,div#boxpurple,div#boxblue,div#boxred,div#boxbig,");
}
</script>

zum Seitenanfang

Funktionen des Scriptes

Funktion des Scriptes:

1. Formatierung der Textfelder bwz. Tabellen
2. Referenzierung der Java-Script- & CSS-Dateien

So werden die Formatierungen der Tabellen bzw. Textfelder definiert: Hintergrundfarben, Breite der Boxen, Innenabstände:

1. „width“ = Boxenbreite
2. „background“ = Hintergrundfarbe
3. „padding“ = Innenabstand: legt theoretisch den Abstand zwischen Inhalt und Rändern fest (funktioniert aber nicht!)

Hinweise:
Die Breite des Textfeldes/Tabelle wird im Script definiert, und ist von der Breite des Feldes in der Layoutansicht nicht beeinflusst!
Die Höhe des Textfeldes/Tabelle dagegen wird im Layout erzeugt, z.B. durch Leerzeilen!
Der Textabstand kann nur über eine Formatvorlage eingestellt werden! Es geht weder über "Padding" in den Zwischen-Head-Tags, noch über "Tabellen-oder Textfeldeigenschaften"

zum Seitenanfang

Die “Boxen”

Die in diesem Tutorial so genannten „Boxen“ (boxgreen, boxpurple, etc.) formatieren die Textfelder bzw. Tabellen.

Die Boxen-Bezeichnungen (boxgreen, boxpurple, etc.) sind hier beispielhaft vergeben. Natürlich kannst Du auch eigene "Boxen" (Formatbezeichnungen) anlegen, z.B. "Beispielbox".

Dabei ist zu beachten, dass die "Beispielbox" insgesamt 3mal im Layoutbereich auftaucht, wie oben beschrieben:

1. als "div id" im Textfeld- oder Tabellen-HTML: <div id="Beispielbox">
2. als "div" im css-Style in den Zwischen-Headtags: div#Beispielbox{width: etc, ...}
3. als "div" im javascript in den Zwischen-Headtags: ("div#Beispielbox")

Hinweis:
Jedes Textfeld und jede Tabelle benötigen eine neue “Box” - es ist nicht möglich, eine “Box” mehrmals zuverwenden, also mehrmals in verschiedenen Textfeldern auf ein- und dieselbe “Box” zu verweisen! Möchtes Du z.B. 10 Textfelder oder Tabellen mit runden Ecken versehen, musst Du 10 einzelne “Boxen” anlegen!

Formatvorlage für den Textabstand (padding, = “Polster”)

Wie oben erwähnt, ist es tatsächlich so, dass der Textabstand nur über Formatvorlagen eingestellt werden kann! Es geht weder über "Padding" in den Zwischen-Head-Tags, noch über "Tabellen-oder Textfeldeigenschaften".

Erstellen einer Formatvorlage für den Textabstand:

1. Seitenansicht -> Text -> Formatvorlagen verwalten
2. -> Neu -> Neue Formatvorlage-> Formattyp: Benutzerdefiniert (Namen vergeben “niftyPadding”); Formatvorlagebereich: Siteübergreifend
3. -> Ok -> Fenster “Textformat” -> Reiter “Rahmen”, Feld “Textabstand”: wie gewünscht eintragen
4. -> Ok -> Schließen

Zuweisung des Formates:

1. Text in Textfelde/Tabelle markieren
2. Gehe zu Fenster “Text-Eigenschaften”, Auswahlfeld “Benutzerdefinieret Formatvorlagen”
3. Wähle “.niftyPadding” aus.

zum Seitenanfang