Ein Tutorial von Pittiplatsch für die NOF-Schule!




Tja, da sitzt man vor seinem PC, möchte sich so gerne eine eigene Webseite bauen und natürlich hat man auch den Ehrgeiz alles selbst zu gestalten.
Aber wie fängt man das nur an?

Anfangen wird natürlich erst mal alles im Kopf....dann setzen wir die Idee in Grafiken um....und letztlich bauen wir diese z. B. in NetObjects Fusion ein.

Also fangen wir mal in unserem Grafik-Programm an.

Grundsätzlich und egal mit welchem Grafikprogramm gearbeitet wird, wir arbeiten immer mit mehreren Ebenen und erstellen jede Einzelheit in einer neuen Ebene.....der Vorteil: Wir können einzelne Ebenen mal ausblenden, verschieben oder auch löschen ohne die gesamte Arbeit zu zerstören.

Abspeichern werden wir das ganze grafische Werk immer als PSD-Datei, denn dieses Dateiformat erlaubt uns später jede einzelne Ebene unserer Gesamtgrafik wieder zu bearbeiten, verschieben oder zu löschen.

Am Anfang ziehen wir uns die erste Ebene (unsere Arbeitsbühne) auf. Diese sollte eine Breite von 1920 Pixel x was immer Ihr wollt (oder ca. 1000 Pixel) hoch sein.

Zwar gilt noch immer, dass eine Webseite nicht breiter als 990 Pixel sein soll, damit bei kleinerer Auflösung später im Browser nicht unten auch noch so ein hässlicher Scrollbalken entsteht, aber unsere Arbeitsbühne sollte dennoch 1920 Pixel Breite haben.

So erkennen wir nämlich beim Erstellen unserer Grafiken schon am Anfang, wie unsere spätere Webseite bei unterschiedlicher Auflösung wirkt.
In der Mitte dieser 1920 Pixel ziehen wir uns 2 Hilfslinien im Abstand der 990 Pixel (tatsächliche Breite unserer späteren Webseite) auf.

Eine 2. Ebene dient uns für die Hintergrundfarbe (in diesem Fall ein dunkles Grau).



 1-Arbeitsbühne_kl.jpg (Größe: 24,95 KB / Downloads: 481)


Die 3. Ebene benutzen wir um einen Streifen oben für den Hintergrund im Masterbereich (hinter Banner) zu gestalten. Ich habe in diesem Fall diesem Streifen das Muster einer nostalgischen Tapete gegeben und für diesen Hintergrund noch 2 weitere Ebenen erstellt.

Eine Ebene für die “Ablage” und eine Ebene für die schmale Leiste (siehe Bild).



 2 Bannerhintergrund.jpg (Größe: 48,17 KB / Downloads: 414)


Weitere Ebenen für die Navigation und für alles was ansonsten noch an Grafiken dazu kommt fügen wir je nach Bedarf hinzu, bis unsere Webseite grafisch schon beinahe so aussieht, wie wir sie uns vorgestellt haben.



 3-Banner_kl.jpg (Größe: 78,59 KB / Downloads: 297)


Es werden viele Ebenen hinzu kommen im Laufe der Arbeit.
Ebenen für den Footer, für Bilder oder Bilderrahmen, für besondere Schatten oder spätere Textbereiche. Ein Logo hier und eine Deko dort...auf unserer “Arbeitsbühne” können und werden wir nach und nach alles so platzieren, wie es auf unserer Webseite einmal aussehen soll. Die Größe von 1920 Pixel Breite verschafft uns auch gleich einen Eindruck davon, wie sie bei hoher Auflösung wirkt.

Wenn wir nun alle Grafiken auf einer separaten Ebene platziert haben und uns gefällt was wir da sehen, dann schneiden (slicen) wir alles in kleine Schnipsel und speichern diese fürs Web (meistens) als "jpeg" ab.



 4 slicen.jpg (Größe: 90,85 KB / Downloads: 265)


Ich habe hier nur den Bannerbereich erstellt, aber genau so erarbeiten wir natürlich auch den Footer (unteren Masterbereich) und slicen auch ihn in entsprechende Schnipsel.



 Master-BG.jpg (Größe: 8,8 KB / Downloads: 192)




 Button.jpg (Größe: 2,15 KB / Downloads: 211)


und



 Banner_kl.jpg (Größe: 52,99 KB / Downloads: 244)


Diese Schnipsel bauen wir jetzt in NOF unter “Design” für unseren eigenen Sitestyle ein.

Nun haben wir je nach Arbeitsintensität einen Haufen kleiner Schnipsel....und beginnen mit dem Einbau in NOF für einem neuen und eigenem Style.

Einbau in NetObjects Fusion

Wir öffnen unsere Seite in NOF und klicken oben auf Design....dann entfernen wir rechts im Eigenschaftsfenster den Haken bei “Schreibgeschützt”.



 01-Style-wählen_kl.jpg (Größe: 55,71 KB / Downloads: 352)


Links im Styles-Explorer klicken wir mit der rechten Mousetaste auf unseren derzeitigen Style und im sich öffnenden Fenster auf “duplizieren” und geben dem Baby einen Namen.

Schön hässlich sieht er aus....dieser Style, aber gottlob und dank unserer Grafikkünsten ja nicht mehr lange.

Wir scrollen nun etwas weiter nach unten bis zu “Seiten-Hintergrund” und markieren per Linksklick ein mal diesen Bereich.

Im Eigenschaftsfenster ändern wir jetzt von “Automatisch” alles nach unseren Wünschen....also bei Bild suchen wir unseren Hintergrund-Schnipsel und bei Farbe wählen wir den Farbton aus unserem Schnipsel.
Nicht erschrecken....das sieht noch ganz grausam aus.



 02-BG_ändern.jpg (Größe: 47,7 KB / Downloads: 296)


Damit unser Schnipsel (Hintergrund) sich nun nicht in alle Richtungen kachelt gehen wir ganz oben auf “Formatvorlage” und dann auch “Formatvorlage verwalten”.

An der linken Seite klicken wir auf “Haupttext” und dann auf “Bearbeiten”.

Im neuen Fensten gehen wir auf den zweiten Karteireiter (Hintergrund) und verändern die “Wiederholung” von Automatisch auf Horizontal.

Unser Schnipsel für den Hintergrund wird sich nun also nur horizontal vervielfältigen.



 03-Formatieren_kl.jpg (Größe: 85,85 KB / Downloads: 311)


Und gleich sieht alles schon viel besser aus und wir widmen uns nun der Navigation und dem Banner.

Durch Doppelklick auf das 1. Button wählen wir unser eigenes erstelltes Button aus....passen Schrift, Schriftfarbe, Position und Schriftgröße unserem Button an......und verfahren so mit allen weiteren Buttons.



 04_Buttons_auswechseln_kl.jpg (Größe: 60,4 KB / Downloads: 269)


Jetzt wechseln wir in die “Seitenansicht” und ziehen entweder eine Tabelle oder einen zusätzlichen Layoutbereich im Masterborder auf.......weisen als Hintergrund unser Banner zu .... platzieren unsere Navigation ...... lehnen uns zurück und freuen uns über unseren ersten eigenen Style.



 05 Ansicht.jpg (Größe: 69,39 KB / Downloads: 324)

Unmittelbar relevante Links zu Pittis Tutorial:

Verschiedene Hintergründe für die Website und Einbindung im NetObjects-Programm

Nützliche Codes wie Seitenzentrierung

Stil-Definitionen im Body > Designansicht

Einfügung des Banners

Einfügung der Navigation

Erstellung einer horizontalen Navigation mit Klappleisten-Untermenüs

So Ihr Lieben...um das Thema hier nun komplett abzurunden und damit jeder bei Bedarf sich alle noch so kleinen Einzelheiten runterladen kann, folgen jetzt diverse Downloads.

Zum 1. ist hier mal zum downloaden eine sogenannte PSD-Datei.....alles das was ich (wie ganz oben beschrieben) in einem Grafikprogramm erstellt habe.

  PSD Datei.zip (Größe: 949,55 KB / Downloads: 72)

Ich habe diese PSD-Datei mit diversen Ebenen in PhotoShop erstellt.......man kann dieses Dateiformat allerdings auch in PhotoImpact öffnen (sicher auch in PaintShop Pro) und weiter bearbeiten.
Wie das bei dem Grafikprogramm GIMP aussieht oder in anderen Grafikprogrammen müsst Ihr selbst etwas erkunden.

Zum 2. könnt Ihr hier die sogenannten "Schnipsel" runter laden (so wie man eben besagte Grafik dann passend für NOF zurecht schneidet)....damit auch unsere Anfänger hier nachvollziehen können, was oben so eingehend beschrieben wurde.

  komplette Grafik.zip (Größe: 107,23 KB / Downloads: 70)

Zum 3. (denn alle guten Dinge sind ja 3).... kommt hier auch noch eine komplette NOF-Vorlage....

  NOF 10 Vorlage.zip (Größe: 361,57 KB / Downloads: 92)
....welche ich mit NOF 10 erstellt habe (mit allen Updates) und somit aufwärtskompatibel für NOF 11 und NOF 12 ist.

Als kleinen Bonbon und weil es immer wieder mal Fragen dazu gibt, habe ich in dieser NOF Vorlage sowohl einen durchgehenden Footer eingebaut, die Seite im Browser zentriert gesetzt über die Eingabe im Masterrahmen und ich habe Euch eine Klappnavigation in dieser Vorlage eingerichtet.

Diese Vorlage ist absolut kostenlos für Euch....unter einer Bedingung!
Im Quelltext habe ich unter Copyright "Layoutdesign by http://www.webdesign-agentur24.de" reingeschrieben.......und das hat dort auch so stehen zu bleiben, solange eine meiner Grafiken in dieser/Eurer Seite/Webseite ist.

Aber ich denke, dafür habt Ihr sicher Verständnis.
Viel Spass und guten Durchblick