Impressum Suchfunktion

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann


Thema geschlossen 
Tutorial: Einfacher Hintergrund mit Schlagschatten
#1
Tutorial: Einen einfachen Hintergrund mit Schlagschatten in NOF erstellen:

Als Beispiel habe ich eine Demo-Website hochgeladen:

http://www.nof-schule.de/netobjects-tuto...index.html

Und so sieht die Website aus:


.png  Demo.png (Größe: 750,45 KB / Downloads: 1.601)


Für den Hintergrund bitte folgendes Bild öffnen und speichern:



.png  hg-transp_02.png (Größe: 1,12 KB / Downloads: 1.347)



Für die Navigation habe ich Grafiken aus unserer Grafik-Bibliothek (kostenlose Downloads) verwendet:

Buttons mit Schraffierung in ruhigen Erdtönen


1. Einbindung des Hintergrunds:

Neues Projekt öffnen, Schreibschutz auf Design-Ansicht deaktivieren.

Im Menü "Formatvorlagen" (früher "Text") > Formatvorlagen verwalten > den Menüpunkt "Haupttext/Body" auswählen.


.png  formatvorlage.png (Größe: 47,17 KB / Downloads: 1.245)


Hintergrundgrafik (halb-transparentes .png) und Hintergtundfarbe wie in folgendem Screenshot gezeigt einbinden:


.png  haupttext-body-hintergrund.png (Größe: 42,18 KB / Downloads: 1.591)


Der halb-transparente Grafikschnipsel besteht aus dem weißem Innenteil und aus dem Schatten rechts und links. Die Hintergrundfarbe füllt den Bildschirm rechts und links des weißen Feldes aus. Sie kann beliebig eingestellt werden.

Einstellung für den Hintergrund: Wiederholung > vertikal, Position > oben, zentriert - wie im screenshot gezeigt.

Somit ist der Hintergrund nun schon für die ganze Website eingebunden.

2. Banner und Navigation einfügen:

Wir wechseln zu Seitenansicht und stellen die Breite der Seite auf 990 px ein. Sichtbar ist nur der weiße Hintergrund. Zuvor müssen wir im Grafikprogramm unseren individuellen Banner vorbereitet haben. Das Bannerbild in unserer Demo hat eine Breite von 963 px.

Wir fügen den Banner im Masterrahmen wie unten gezeigt ein:


.png  Seitenaufbau-NOF-schlagschatten.png (Größe: 458,15 KB / Downloads: 972)


Das Bannerbild kann auch als Hintergrund eines layoutbereichs oder einer Zelle eingebunden werden.

Darunter ist sowohl eine horizontale als auch eine vertikale Navigation im Masterrahmen möglich und sehr einfach umzusetzen. Für unsere Demoseite haben wir Buttons aus unserer Bibliothek verwendet. Die Klappleisten-Navigation wird nach dem Tutorial von Pittiplatsch erstellt:

http://www.nof-schule.de/forum/t-klapple...ion-in-nof

3. Seite zentrieren

Auf Seitenansicht müssen noch alle Seiten zentriert werden.

Dafür Seite öffnen, mit Klick auf F9 die Layout-Eigenschaften aufrufen. Dort im ersten Reiter "Seiten im Browser zentrieren" anklicken und mit Häckchen aktivieren.

Die Seitenbreite der Bannerbreite anpassen und ganz links bei null anfangen.

Vorlage für NOF 12 # 3:


.zip   Schlagschatten-in-nof.zip (Größe: 455,99 KB / Downloads: 581)
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Thema geschlossen 


Möglicherweise verwandte Themen...
Thema Verfasser Antworten Ansichten Letzter Beitrag
  Tutorial CSS - Textfelder mit runden Ecken barbara0701 1 2.405 18.11.2012, 15:36
Letzter Beitrag: Supernofa
  Hintergrund mit fest positionierter Grafik barbara0701 0 2.020 21.05.2010, 18:00
Letzter Beitrag: barbara0701
  Hintergrund mit horizontalem Streifen endlos barbara0701 0 2.300 21.05.2010, 17:56
Letzter Beitrag: barbara0701
  Hintergrund mit vertikalem Farbverlauf barbara0701 0 3.023 21.05.2010, 17:48
Letzter Beitrag: barbara0701



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!