Datenschutz Impressum

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann


Thema geschlossen 
Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Footer "durchgehend mit Inhalte" (unterer Masterrahmen)
#1
Aktueller Hinweis (Oktober 2013) zum breiten Footer, der sich der Bildschirmauflösung anpasst:

Für die HTML-Ausgaben XHTML (NOF 12) und HTML5 (NOF 2013) verwenden wir ausschließlich divs für die Footer-Erstellung. Das Tutorial dazu findet Ihr auf Tommys NOF-Tutorials-Website unter "Footer im div-Container".

Folgende für NOF klassische Bauweise verwendet Tabellen und ist für die HTML-Ausgabe "HTML4 with Tables" (vor NOF 12 als "dynamisches HTML" bezeichnet) für alle NOF-Versionen bis NOF 12 mit der HTML-Standard-Einstellung geeignet:

Tutorial: Durchgehender Footer mit Inhalten mittels Tabellen in NOF

[Bild: safe_image.php?d=a060b721b85d9a12e57a403...o5n7j6.png] Um weitgehend jeder Monitorgröße und Bildschirmauflösung bei der Gestaltung einer Webseite gerecht zu werden, ist es oft notwendig einen optischen und funktionellen (mit Text, Verlinkungen und Grafiken) durchgehenden Footer (unteren Masterrahmen) zu verwenden.

Größere Monitore und höhere Auflösungen stellen gewisse Anforderungen an die optische Darstellung einer Webseite.
Zwar sollte die Breite einer Webseite noch immer bei ca 990 Pixel liegen, damit bei geringer Auflösung und kleinerem Monitor unten kein horizontaler Scrollbalken entsteht. Optisch betrachtet sehen diese grafischen Einschränkungen allerdings auf größeren Monitoren ziemlich „futzelig“ aus.

Wie setzt man dieses Vorhaben mit NetObjects Fusion in die Tat um?
(Die bildliche Erklärung der Arbeitsschritte seht Ihr vergrößert, wenn Ihr Euch im Forum angemeldet habt)

Vorweg erstellt man eine Grafik (ähnlich dieser hier)
.jpg  Footerhintergrund.jpg (Größe: 1,27 KB / Downloads: 944)
von z. B. 166 Pixel Höhe und einer Breite von 24 Pixel, die uns als optischen Hintergrund für den durchgehenden Footer dienen wird.

1. Wir öffnen unser NOF-Projekt und setzen die Webseite im Browser zentriert

2. Erstellen wir eine Tabelle mit einer Zeile und drei Spalten und 0 Textabstand sowie 0 Zellenabstand und 0 Rahmen
.jpg  Tabelle erstellen.jpg (Größe: 35,46 KB / Downloads: 1.061)

Dann wird die Tabelle 1 x angeklickt und für die gesamte Tabelle eine Breite vergeben
.jpg  Footergröße.jpg (Größe: 69,25 KB / Downloads: 1.172)


Weiter geht es mit den Einstellungen der jeweiligen Tabellen-Zellen

.jpg  Footerzelle links.jpg (Größe: 53,48 KB / Downloads: 1.095)

Die gleiche Einstellung machen wir in der 3. Spalte/Zelle (rechts) und dann klicken wir 1x die mittlere Zelle an und tragen dort den Wert von 990 Pixel (für unsere eigentliche Seitenbreite) ein.

.jpg  Footermitte.jpg (Größe: 38,13 KB / Downloads: 825)

Keine Panik Wink …weil sich jetzt in der NOF-Ansicht der Footer tierisch breit nach rechts ausdehnt. Publiziert und online sitzt das alles nachher schon perfekt und da wo es sitzen soll (egal wie groß der Monitor des Besuchers/Users auch später ist).

Nun können wir dem Footer noch einen grafischen Hintergrund geben, der sich später über die ganze Breite eines jeglichen Monitors (und bei allen möglichen Auflösungen) erstreckt.

.jpg  Footergrafik.jpg (Größe: 46,07 KB / Downloads: 858)

Optisch erzeugt man somit also eine gefällige Breite (besonders für große Bildschirme) ohne von der tatsächlichen 990 Pixel Breite (für kleinere Monitore) abweichen zu müssen und ohne einen horizontalen Scrollbalken zu verursachen.

In die mittlere Zelle dieser Tabelle kann man wie gewohnt Text, Grafik oder Verlinkungen eingeben.

Ich persönlich bevorzuge allerdings die Variante hier einen zusätzlichen Layoutbereich mit 990 Pixel Breite und 166 Pixel Höhe einzufügen, den ich vorher mit allen gewünschten Inhalten bestücke und dann einfach in der mittleren Tabellenzelle platziere.
Das Ganze sieht nachher online dann immer zentriert aus....

.jpg  Footer durchgehend mit Inhalt.jpg (Größe: 22,53 KB / Downloads: 827)
...wie hier zu sehen ist.

Viel Spaß Euch nun beim Nachbau Wink...isch haben fertisch!
Gruß Pittiplatsch
................................................
Jede Veränderung entsteht anfangs zwischen dem rechten und dem linken Ohr (und setzt den Einsatz der Mitte voraus).
Für Leute mit Humor...die noch den Knall hören.
Webdesign Agentur 24

Alle Beiträge dieses Benutzers finden
#2
Danke Pitti, super gemacht thumbs up :herzen:

Lieben Gruß
Barbara
--------------
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
#3
Zu dem Thema "durchgehenden Footer" gibt es aktuell auch neuere und perfekte Tutorials, die keine Begrenzung bei 1920 Pixel mehr haben und auch ohne Tabellen (mit Layoutbereichen) erstellt werden können.
Gruß Pittiplatsch
................................................
Jede Veränderung entsteht anfangs zwischen dem rechten und dem linken Ohr (und setzt den Einsatz der Mitte voraus).
Für Leute mit Humor...die noch den Knall hören.
Webdesign Agentur 24

Alle Beiträge dieses Benutzers finden
Thema geschlossen 




Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
nach oben An den Anfang der Seite scrollen
NetObjects Fusion Infos, Downloads und Updates Diese Website wird durch Bot-Trap vor Spam geschützt!