Masterrahmen und Layout

Im Laufe der Bearbeitungszeit eines Projektes kommt es häufig vor, dass zusätzliche Master-Rahmen erstellt werden. Ist das Projekt zur Zufriedenheit fertiggestellt, sollte das Projekt von unnötigem Ballast befreit werden, um es zu verschlanken und die Fehlerhäufigkeit zu minimieren. Dazu gehört es die letztendlich doch nicht verwendeten Master-Rahmen wieder zu löschen. Wie finde ich aber diese Masterrahmen? Es gibt einen relativ einfachen und sicheren Weg:

Als erstes erstellt man sich eine ‚Bastelseite‘ (sollte in jedem Projekt als Versuchsseite zu allen möglichen Zwecken angelegt werden) wiefolgt:

masterrahmen1
Nachdem die Seite eingerichtet ist, wechselt in die Bearbeitungsansicht dieser Seite
Dort drückt Ihr die Funktionstaste 10 [F10] und es werden die Master-Rahmen-Eigenschaften angezeigt

masterrahmen3

rechts neben dem Namen des momentan verwendeten Master-Rahmens (ZeroMargins) drückt den Button ‚Hinzufügen/Bearbeiten‘

Nun erscheint dieses Fenster:

masterrahmen4

 

Ihr erkennt hier schon, dass der Button ‚Löschen‘ inaktiv ist, d.h. dieser Master-Rahmen kann nie gelöscht werden.

Markiert nun der Reihe nach jeden Master-Rahmen und drückt den Button ‚Löschen‘ (falls aktiv).

masterrahmen5

 

 Nun kommt der wichtigste Teil!

Es öffnet sich ein Meldungsfenster:

masterrahmen6

 

Der Master-Rahmen ist in Verwendung.

Hier drücken wir Nein, denn genau diesen benötigen wir ja.

ODER


masterrahmen7
Hier steht nichts von Verwendung und diesen Master-Rahmen können wir getrost löschen.

Somit sind sämtliche Master-Rahmen, die das Projekt nicht verwendet, entfernt und können nicht mehr zu Störungen und Fehlern beitragen.

Schöner Nebeneffekt ist, dass auch alle Objekte, die man dort einmal eingefügt hat, mit entfernt werden, wie Grafiken, Links, Scripte etc.. Solche komplexen nicht verwendete Master-Rahmen tragen gern dazu bei, dass es zu Fehlern bei der Vorlagenerstellung und beim Publizieren kommt.

Nachbemerkung:

Den gesamten Vorgang kann man natürlich auch ohne ‚Bastelseite‘ mit jeder anderen Seite machen aber es kann dabei vorkommen, dass das Layout verändert wird – nicht schädlich aber spätere Korrekturarbeit wäre erforderlich, abgesehen von dem ‚Schock‘ vor allem bei Newbies.

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.

 

 

 

Allgemeine Beschreibung der CSS-Palette

Aktivierung und Ansicht
Register der Palette und deren Funktion
die Befehle und die Syntax der Eingaben
Markierung der Objekte

Praktische Verwendung - Beispiele (erweiterbar)

Scrollbalken erzwingen
Seitenbackground, sich dem Browserfenster anpassend
Besondere Rahmenformatierungen
Runde Ecken
Schatten - Ergänzung 10.8.2013
Transparenzen - Ergänzung 30.7.2013
Scrollbare Textfelder - Ergänzung 10.7.2013
Zoom

Für Freunde der SwissKnife-Lytebox

Fortgeschrittene Anwendung mittels Erzeugung einer Class

Browserkompatibilität

____________________________________________________________________

 

 Allgemeine Beschreibung der CSS-Palette

NOF bietet mit der CSS-Palette eine weitere umfangreiche Formatierungsmöglichkeit für fast alle Objekte, incl. Layout und Masterrahmen.

Voraussetzung bzw. Vorbereitung für die Umsetzung:

Abhaken/Ausschalten des Quirksmodus unter dem Menüpunkt ‘Werkzeuge’ >  ‘Optionen’ > ‘Aktuelle Site’ > ‘HTML-Optionen.
Das solltet Ihr als erstes vornehmen und danach Eure Site lokal publizieren, um zu kontrollieren, ob noch alles wunschgemäß aussieht und funktioniert! In einigen Fällen, vor allem bei älteren Seiten oder Browsern ist bzw. war das Einschalten des Quirks im Sinne der Kompatibilität erforderlich.
Erst wenn Ihr das sichergestellt habt, kann es weitergehen.

Die Formatierungen über die CSS-Palette sind zum größten Teil in der Bearbeitungsansicht nicht sichtbar, sondern erst nach dem Publizieren.

Anmerkung: Ich rede im Folgenden stets von der ‚Bearbeitungsansicht‘, da NOF leider den Begriff ‚Design‘ zwei Mal verwendet, als Menüpunkt für den SiteStyle und eben auch für diese Bearbeitungsansicht. Ich denke Ihr wisst was gemeint ist.

 

Aktivierung und Ansicht

css-Palette aktivieren

In der Bearbeitungsansicht findet man in NOF im unteren Rahmen links die Aktivierungssymbole für die Eigenschaftspalette, die Sitenavigation, den Objektexplorer und die CSS-Palette.

 

 

 

 

 

 

 nach oben

 

Register der Palette und deren Funktion

Die Palette öffnet sich mit drei Registern
css-2 css-3css-4

 

CSS-Standard: wie der Namen schon sagt kann man hier objektbezogene Standardformatierungen vornehmen

CSS-Eigenschaften: hier befindet sich, der für uns jetzt interessante Eingabebereich, der auch alle über die Palette vorgenommenen Eingaben anzeigt (auch diejenigen, die über das Standardregister oder den CSS-Code-Editor eingegeben wurden)

CSS-Code-Editor: in diesem Register werden die gemachten Eingaben in Form eines CSS-Codes angezeigt. Wenn man die CSS-Syntax kennt, könnte man auch hiermit die Eingaben vornehmen aber insbesondere ist er interessant für Anpassungen (im Folgenden noch erwähnt) und zum Kopieren.

 

 nach oben

Die Befehle und die Syntax der Eingaben

Vom ursprünglichen Gedanken alle vorhandenen CSS-Eingabemöglichkeiten hier näher zu beschreiben, bin ich wieder abgekommen, da es den Rahmen dieses Tutorials sehr sprengen würde, zumal es im Netz im selfhtml-Bereich sowie Wikis eine Reihe umfangreicher Nachschlagewerke gibt.

Anhand folgender und künftiger Beispiele aus der Praxis werden die zugehörigen Begriffe natürlich erläutert.

 

Markierung der Objekte

Es ist schon klar, dass man ein Objekt auf der Arbeitsfläche erst markieren muss, um es zu bearbeiten. Die Markierung erkennt man an dem Rahmen mit den kleinen quadratischen ‚Anfassern‘ an den Ecken und den Mitten der Seitenkanten.
Bei der Auswahl des Masterrahmens oder des Layouts werden allerdings keine Markierungen erkennbar. Um sicher zu gehen, dass man die Eingaben in der CSS-Palette auch beim richtigen Objekt vornimmt, bedient man sich der Tasten [F9] für das Layout und [F10] für den Masterrahmen. Als sichere Kontrolle während der Bearbeitung gilt die vorhandene Anzeige des jeweiligen Eigenschaftsfensters. Wie schnell hat man einmal unbewusst in die Arbeitsfläche oder woanders hin geklickt! und später die gemachten Eingaben verzweifelt sucht.

 nach oben

Praktische Verwendung – Beispiele (erweiterbar)

Bei allen folgenden Beschreibungen wird vorausgesetzt, dass die CSS-Palette aktiviert und das Register CSS-Eigenschaften angezeigt wird

 

Scrollbalken erzwingen

Wir kennen das Problem, dass wir innerhalb eines Projektes sowohl kurze als auch lange Seiten haben. Die Browser erzeugen immer dann automatisch einen Scrollbalken, wenn die Anzeigefläche nicht ausreicht. Das führt leider zu dem unschönen Effekt, dass bei kurzen Seiten kein vertikaler Scrollbalken erzeugt wird, hingegen bei langen Seiten schon, was ein unschönes ‚Springen‘ des Seitenlayouts beim Seitenwechsel verursacht. Um das zu vermeiden, versehen wir alle Seiten nunmehr mit einem vertikalen Scrollbalken.

Dazu markieren wir den Masterrahmen und öffnen in dem Register CSS-Eigenschaften den Punkt ‚Anzeige‚ . Bei ‚overflow‚ wählen wir ’scroll‘ aus.
Nun würde sowohl der vertikale als auch der horizontale Scrollbalken erzeugt, was wir aber nicht wünschen.
Es folgt ein kleiner ‚Trick‘. Nach der Eingabe wechseln wir zum CSS-Editor und erkennen, dass dort die Eingabe als Code generiert wurde, nämlich „overflow: scroll;“. Wir ändern das dort ab in „overflow-y: scroll“ (Bitte darauf achten dass sich kein zusätzliches Leerzeichen ‚einschleicht‘!)

Profis werden jetzt sagen: „diesen Ausdruck hätte man ja gleich in den Editor eintragen können“. Das stimmt! Es geht mir aber an diese Stelle darum, die Zusammenhänge etwas verständlicher zu machen.

Wichtig: wenn Ihr im Code-Editor gearbeitet habt: speichern ! speichern

  nach oben

Seitenbackground, sich dem Browserfenster anpassend

Wir möchten ein Seitenhintergrundbild verwenden, dass sich dem Anzeigefenster anpasst.

Wir markieren den Masterrahmen [F10], wenn wir das Bild auf allen Seiten haben möchten, die diesen Masterrahmen verwenden oder wir markieren das Layout [F9], alles gilt dann nur für diese eine Seite.

Anmerkung:
je nach Größe und Seitenverhältnis des verwendeten Bildes wird dieses beim Verkleinern außerhalb des Seitenverhältnisses (z.B. wird das Fenster nur in eine Richtung verkleinert) nicht verzerrt sondern rechts oder unten ‚abgeschnitten‘. Dazu könnt Ihr dann selbst ja fleißig probieren.

 

Dazu öffnen wir in den CSS-Eigenschaften den Bereich ‚Hintergrund‘ und geben ein, bzw. wählen aus:

bei ‚background-attachment‘ : ‚fixed‘ (Hintergrundbild bleibt beim Scrollen stehen, sprich fixiert. ’scroll‘ (Hintergrundbild scrollt mit) sollte man vermeiden, da bei längerer Seite dann ins Leere gescrollt wird, das Hintergrundbild würde aus dem Fenster gescrollt.

bei ‚background-image‘ sucht und wählt man das gewünschte Bild

bei ‚background-position‘ kann man die Position top/oben, right/rechts, bottom/unten, left/links oder center/zentriert auswählen

bei ‚background-repeat‘ stellt man ein, ob sich das Bild wiederholen soll, wenn die Anzeigefläche größer als das Bild ist. Dabei gibt es folgende Möglichkeiten:

repeat‘ =>Wiederholung in der Horizontalen und der Vertikalen , 

‚repeat-x‘ => Wiederholung  in der Horizontalen,

‚repeat-y‘ =>Wiederholung  in der Vertikalen und

’no-repeat‘ => keine Wiederholung

bei ‚background-size‘ setzen wir cover ein, damit das Bild, falls erforderlich, auf die Größe des Anzeigefensters aufgezogen wird.

Anmerkung:
auch hier, wie bei allen anderen Tipps, ist es von Vorteil mit den Angaben etwas ‚zu spielen‘, um zu erkennen, welche Wirkungen zu erzielen sind. Bei Hintergrundbildern ist ein wesentlicher Punkt deren Größe und Seitenverhältnis (ich wähle beispielsweise im Verhältnis 16:9 und maximal 1600 x 900 px. Dabei muss das Bild selbstverständlich für das Web optimiert werden, was fast alle Bildbearbeitungsprogramme können, damit die Ladezeiten der Seiten nicht zu groß werden aber die Qualität noch ausreichend ist.

  nach oben

Besondere Rahmenformatierungen

Anmerkung:
Wenn man sich entschließt mit dem CSS-Editor zu arbeiten, sollte man es vermeiden, diesbezügliche Formatierungen an anderer Stelle vorzunehmen, bzw. diese, falls möglich, erst einmal zu entfernen (Beispielsweise hat man schon Eingaben über ein Eigenschaftsfeld vorgenommen). Das soll eine spätere langwierige Suche nach der Ursache verhindern, falls das Ergebnis nicht das gewünschte ist (Beispiel: statt eines 1px Rahmen wird ein 2px angezeigt, da an zwei Stellen formatiert wurde) 

 

Runde Ecken

beispiele

Hier seht Ihr eine Reihe Formatierungsmöglichkeiten, die sich mit einfachen Eingaben in der CSS-Palette im Punkt Feld realisieren lassen.
Von oben nach unten erkennbar:

Einfaches Textfeld, welches mit Angaben zum background-color , zum border = 2px  und zum border-radius = 10px versehen wurde.

Ein Bild, lediglich mit Angaben zum border-radius = 10px.

Ein weiteres Bild mit zusätzlichem border-color, border-radius =10px

 

 

 

 

 

Tabelle, hier wurde die gesamte Tabelle entsprechend formatiert sowie jede einzelne Zelle. Bei den unteren Zellen wurden die Angaben zum border-radius einzeln bei border-top-left-radius, border-top-right-radius, border-bottom-left-radius und border-bottom-right-radius vorgenommen.

In der Mitte der Beispiele seht Ihr weitere Möglichkeiten einer Tabellenzellenformatierung

Die beiden unteren Abbildungen zeigen links eine Formatierung im laufenden Text. Hierbei wird das Wort markiert und dann die Eingaben in der CSS-Palette vorgenommen. Im rechten Bild seht Ihr Textfelder, die zusätzlich mit Schatten versehen wurden.

  nach oben

Einfache Schatten

Wie eben zu den Beispielen genannt, kann man diese wie folgt angeben: In der Palette auch unter Feld ist der Begriff ‚box-shadow‘ zu finden, dort tragt Ihr ein, durch Leerzeichen getrennt: (im Beispiel) 5px 5px grey; d.h. 5px breit nach rechts, 5px breit nach unten in der farbe grau. Die Farbe kann man auch hexadezimal #ffff oder als rgb wie rgb(255,123,23)  eingeben.
Um Browsersicherheit herzustellen werden teilweise zusätzlich Angaben gemacht, wie z.B. -webkit-box-shadow: 5px 5px grey;
-moz-box-shadow: 5px 5px grey. Dazu schaltet einfach auf die Registerkarte ‚CSS-Code-Editor‘ um und schreibt den Code dort hinein.

Wichtig: falls schon etwas im Editor steht, setzt hinter den letzten vorhandenen Ausdruck ein  Jede Zeile endet mit einem ;

schatten2

Für Textschatten bedienen wir uns dem unter Text befindlichen Befehl ‚text-shadow‘ in gleicher Art und Weise.

Abbildung:

1.Zeile => bei markiertem Textfeld;
2.Zeile => bei markierten Zeichen;
3.Zeile => eine Kombination mit text-shadow und box-shadow.

Hier könnt Ihr auch hemmungslos ’spielen‘ und testen.

 

Ich beschränke mich hier auf diese ‚einfachen‘ Schatten. Da mit dem Befehl box-shadow wesentlich mehr möglich ist, bedarf es eines umfangreicheren separaten Tutorials für Fortgeschrittene.

 

Transparenzen

transparenzJedes Objekt kann, wenn darstellbar, mit einer Transparenz versehen werden.

In dem Beispiel seht Ihr ein Bild mit 30% Transparenz (opacity), daneben ohne Transparenz und einem überlagerten Textfeld mit Hintergrund und 50% Transparenz.

Diese Einstellungen nehmen wir vor unter Anzeige und ‚opacity‘.  Die Angaben erfolgen in Prozent als Dezimalzahl (!), d.h. bei 50%iger Transparenz geben wir 0.5 ein (Punkt als Trennzeichen, kein Komma!)

 

Anmerkung:
Transparente Bilder und Grafiken kann man natürlich auch über Grafikprogramme herstellen und diese zuweisen. Da diese Dateien als .png gespeichert und eingesetzt werden müssen, sind sie in der Regel wesentlich größer als die .jpg-Dateien .
Bei Grafiken/Bildern, die als Hintergrund eingesetzt werden, funktioniert diese Transparenzeinstellung nicht, da ja das Bild nicht als Objekt vorliegt, welches man anwählen könnte.

Transparente Farben (Ergänzung v. 30.7.2013)

Möchte man eine zugewiesene Farbe transparent anzeigen lassen, z.B. die Hintergrundfarbe eines Textfeldes, einer Tabellenzelle udgl. , dann gibt es einen einfachen Weg:

Wir wählen die Farbe in den CSS-Eigenschaften aus und es erscheint der Code (Bsp.) rgb(0,0,0). Nun wechseln wir in den CSS-Code-Editor und ergänzen wiefolgt in rgba(0,0,0,0.5), wobei das ‚a‘ für Alpha steht und die 0.5 in diesem Beispiel für einen 50%igen Transparenzgrad.

  nach oben

Scrollbare Textfelder

text

Diese sind relativ einfach herzustellen.

Das fertige Textfeld wird markiert und in der CSS-Palette unter Grösse die Höhe ‚heigh‘ sowie die Breite ‚width‘ in px festgelegt.

Unter Anzeige nutzen wir den Befehl ‚overflow‘ und wählen scroll.  Nun müssen wir wieder, wie unter ‚Scrollbalken erzwingen‘ schon beschrieben, den ‚Trick‘ anwenden indem wir zum Code-Editor wechseln und bei ‚overflow: scroll‘ das y einsetzen, damit overflow-y: scroll daraus wird, denn wir wollen nur einen Scrollbalken in der Vertikalen.

Die Formatierung und die Umrandung, falls gewünscht, nehmen wir unter dem Punkt Benutzeroberfläche vor und zwar mit den Parametern ‚outline‘ für den Rand sowie ‚scrollbar‘ für den Scrollbalken. Ich denke wir sind mittlerweile so fit, dass auf die Sytax der Eingaben dort verzichtet werden kann, auch da ohnehin die meisten per Auswahlfeld angeboten werden.

An dieser Stelle sei noch einmal wiederholt, dass sich der Effekt erst nach der Publizierung einstellt. Die Platzierung in der Bearbeitungsansicht ist, da das Textfeld dort immer in der automatischen Größe angezeigt wird, etwas problematisch da es zu Überlagerungen kommt.

Ergänzung 10.7.2013
In Tabellen kann man es auch einsetzen, indem man das erstellte Textfeld in die Tabellenzelle schiebt (Größenangaben dann bezüglich der Tabellenzelle). Das Textfeld bekommt zusätzlich unter Anzeige bei ‚display‘ per Auswahl den Eintrag ‚block‘.
In der Bearbeitungsansicht wird zwar die Zelle und Tabelle dadurch vertikal vergrößert aber wenn alle Größen in der CSS-Palette fixiert sind (Zellenhöhe/Tabellenhöhe) wird es nach der Publizierung richtig angezeigt.

 

Zoom

zoom

Möchte man ein Objekt aus bestimmten Gründen auf der Seite verkleinert oder vergrößert darstellen, so kann man sich der einfachen Funktion ‚zoom‘ bedienen. Diese findet man unter dem Punkt Benutzeroberfläche.

Die Eingabe erfolgt hier als dezimal dargestellte Prozentzahl (0.5 entspricht 50% der Originalgröße und 2 halt 200%).

Wie bei allen CSS-Eingaben sieht man das Ergebnis erst nach der Publizierung, was u.U. das Platzieren eines Objektes in der Bearbeitungsansicht erschwert.

 

nach oben

 

Für Freunde der SK-Lytebox

Wenn man z.B. Lytebox-Frame als Textlink einsetzt, stellt sich die Frage, ob und wie man den angezeigten Text im Design verändern kann.

lyteboxBeim Markieren dieses Platzhalters kann man ja keine Formatierung auch nicht per CSS-Palette vornehmen. Nun, zieht ein Textfeld auf und platziert den oder die Platzhalter dort hinein. Dann könnt Ihr mit Doppelklick in das Textfeld kommen und dort, wie bei einem Buchstaben im Text, das Symbol markieren. In diesem Moment steht Euch die CSS-Palette für alle Eingaben zur Verfügung.

Mein persönliches Beispiel seht Ihr hier in der Bearbeitungsansicht und hier  nach der Publizierung:

lytebox2

 

 

 

 

 

 

 

 

 

 

nach oben

 

Fortgeschrittene Anwendung mittels Erzeugung einer Class

Falls man einige der beschriebenen Formatierungen oder auch Kombinationen daraus öfter zum Einsatz bringen möchte, bietet es sich an eine ‚class‘ sprich Formatvorlage zu erstellen.

Das machen wir aber hier und jetzt im SiteStyle. Das hat u.a. den großen Vorteil, dass nun der SiteStyle, der auch für andere Projekte eingesetzt werden kann, diese Vorlagen enthält.

Dazu gehen wir in das Menü Design und dort in das Register ‚Selektoren‘. In der linken Spalte sehen wir alle vorhandenen Vorlagen. In dieser Spalte betätigen wir die rechte Maustaste und wählen ‚CSS-Regel hinzufügen‘. Sollte der Style schreibgeschützt sein, wird es dort angezeigt und man kann es durch Klick abhaken.

Im sich öffnenden Fenster vergeben wir einen Namen nach Wunsch (ohne Umlaute oder Sonderzeichen) und drücken OK. Nun befindet sich die erstellte Vorlage ganz unten in der linken Spalte.

Wir markieren diese und sehen rechts die CSS-Palette wie gewohnt. Falls nicht, dann bitte im Menü ‚Ansicht‘ aktivieren.

Die Eingaben erfolgen wie oben beschrieben oder (siehe Tipp unten) kopieren es vom Windows-Editor ins Register ‚Code-Editor‘ der CSS-Palette und speichern (!).

Diese Formatvorlagen sind dann wie üblich den Objekten in den Eigenschaften per Auswahl zuzuordnen oder, bei Bildern beispielsweise über die Objekt-HTML per class=“Formatvorlage xy“  innen (<!>) einzugeben.

Tipp: In der Regel entwickelt man ja die Formatierung per CSS-Palette in der normalen Bearbeitungsansicht. Ist das gewünschte Ergebnis erzielt, dann öffnet man den einfachen Windows Editor  (kein Word oder ein anderes Textverarbeitungsprogramm!). In der CSS-Palette gehen wir ins Register ‚Code-Editor‘, markieren dort ALLES (jedes Zeichen !) und kopieren es uns in den Editor. Damit kann man sich im Einzelfall viel Arbeit ersparen.

 nach oben

Browserkompatibilität

Die Beispiele wurden mit den gängigen Browsern IE10, FF, Chrome und Opera getestet. Für ältere Browser liegen mir keine Erkenntnisse vor.

Da ich die meisten Vorschläge auf meiner Homepage umgesetzt und diese in HTML5 publiziert habe, könnt Ihr, falls gewünscht die Praxis anschauen.

Um weitere Fragen zu beantworten steht Euch wie immer das NOF-Forum und die NOF-Schule zur Verfügung.

 

An dieser Stelle möchte ich für heute bei den Beispielen erst einmal enden. Weitere Möglichkeiten des Einsatzes der CSS-Palette werden mit Sicherheit folgen, wenn möglich sogar mit Eurer Mithilfe und Euren Vorschlägen.

nach oben

Zum NOF-Forum der NOF-Schule

Der Masterrahmen und seine Einstellungen

Für unser Projekt erstellen wir einen eigenen Masterrahmen.

Mit der Zeit und den Möglichkeiten für die Websitegestaltung muss man verschiedene Masterrahmen erstellen und verwenden.

Auf bestimmten Seiten werden vielleicht irgendwann Skripte benötigt z.B. für die Anzeige eines Slider, der aber nur auf einer bestimmten Seite laufen soll. Dann braucht man einen extra Masterrahmen.

1.  „Hinzufügen/Bearbeiten“

2.  „Hinzufügen

3.  Name vergeben (hier: MeinProjektRahmen)

4. Im Dropdownfeld kann ich nun meinen Rahmen auswählen

 

Eigenen Masterrahmen erstellen

 

Die Einstellungen in der Seitenansicht (Arbeitsansicht)

 

Masterrahmen Einstellungen

 

Die Inhalte des gleichen Masterrahmens werden auf jeder Seite identisch dargestellt,d.h. auch jede Änderung, deshalb bestens geignet für die Navigationsleiste, einen Banner, ein Wappen usw.

Im unteren Bild sind alle Masterrahmen auf 100 px eingestellt, damit ist die Layoutbreite nur noch 790 px. Wer nur mit dem Oberen (Header) und dem Unteren (Footer) arbeitet, hat dann natürlich die Breite von 990 px für seine Inhalte zur Verfügung.

 

Masterrahmen und Layout

Für einen Footer mit breitem horizontalem Balken verwenden wir in NOF

  • eine  halbdynamische Tabelle oder
  • einen <div> Container

Beide Methoden haben Vor-und Nachteile.

Die Methode Footer mit breitem Balken und halbdynamischer Tabelle wird in diesem Tutorial beschrieben:

Footer durchgehend für alle Browserauflösungen

Wir halten diese Lösung für sehr gut, da sie den unteren Abschluß der Seite immer klar definiert. Bei sehr kurzen Seiten und einer sehr hohen Bildschirmauflösung kann der Seitenhintergrund unter der Footer-Tabelle noch erscheinen, deshalb ist bei kurzen Seiten von dieser Methode eher abzuraten bzw. muss die Gestaltung dies berücksichtigen (hoher Footerbereich).

Anmerkung:  Diese Methode funktioniert nicht mit der NOF-eigener Zentrierung (mittels Häckchen in den Layout-Eigenschaften). Die Website-Zentrierung muss mittels Code erfolgen, wie hier beschrieben:

Nützliche Codes und Seitenzentrierung

Darüberhinaus ist diese Methode in der HTML-Ausgabe XHTML nur in NOF11, nicht in NOF12 möglich.

 

Die Methode mit dem <div> wird in diesem Tutorial beschrieben:

Footer und header im div-Container

Vorteil dieser Methode: der Footer wird immer unten am Bildschirmrand angezeigt.
Nachteil: Der Footer verdeckt Inhalte der Website bei kleinen Bildschirmen, die Gestaltung des Footers wird um einiges schwieriger und der Footer benötigt einen validen Doctype.

Infos zum Thema validen Doctype