NVU Grundlagen

[Psycho_Ente]

NVU Grundlagen.
Hier kriegt ihr NVU:
Vorwort:
Dies ist mein erstes Tutorial!
Bitte nicht übel nehmen, wenn einiges nicht so gut ist.
Stattdessen mir dabei helfen, dieses Tutorial besser machen
Ich verlange kein Thx dafür, aber dafür bitte ich euch das Tutorial NICHT ohne Erlaubnis in einem anderen Forum unter euren Namen zu posten.

Ich bin selber noch kein Profi in dem Element, möchte euch trotzdem schonmal
die Grundlagen erklären um sehr einfach eine Homepage mit eigenem Design zu
machen.


NVU ist ein What You See Is What You Get (WYSIWYG) Editor.
Du hast eine Arbeitsfläche auf der du Elemente Platzieren und bearbeiten kannst.
Dies kennt man z.B. vom Koda Formdesigner bei AutoIT.
Allerdings ist es hier, nach meiner Meinung ein wenig komplizierter, da man nicht so viel Bewegungsfreiheit hat. (Man kann die Elemente nicht frei bewegen)




Kapitel 1
NVU- Orientieren.



Das ist unsere Arbeitsfläche.
Nach meiner Meinung sehr übersichtlich und praktisch gestaltet.
Oben sehen wir viele Funktionen wie : Grafik, Tabelle etc.
Diese Tools werden wir oft benutzen.
Unser erstes ziel ist nun, erst einmal die hintergrund farbe festzulegen.
Dazu klicken wir mit der rechten Maustaste auf die Arbeitsfläche
Dazu klicken wir auf Format -> Seitenfarben und -hintergrund.
Klicken auf : "Eigene Farben verwenden" Nun können wir die Farben vom Normalen Text, Linktext etc. verändern.
Auf wunsch kann man auch eine Hintergrundgrafik laden, aber mit Farbe langt es ersteinmal bei unserem Beispiel.

Kapitel 2
Tabellen und Grafiken.

Wir möchten nun eine Tabelle und eine Farbe für diese erstellen.
Um eine Tabelle zu erstellen klicken wir auf den Button "Tabelle"
Nun seht ihr ein "Gitter", an diesem Könnt ihr die Zeilen etc. festlegen.
Wenn ihr dies gemacht habt, drücken wir auf OK.
Nun habt ihr dort warscheinlich eine sehr kleine Tabelle.
Diese Vergrößern wir mit Hilfe der kleinen Kästchen an den Ecken und Seiten der Tabelle.
Um die Tabelle in der mitte zu platzieren selektieren wir eine Zelle, drücken auf Tabellenzelleneigenschaften.
Dann auf Tabelle.
Und nun wählen wir bei Tabellenausrichtung "Mitte" aus.
Wenn ihr eure gewünschte Größe erreicht habt, dann können wir nun damit Beginnen
Verschiedene Farben den einzelnen Zellen zuzuordnen.
Dies können wir machen indem wir folgendes tun:
Rechtsklick auf die Gewünschte Zelle ->Tabellen- oder Zellenhintergrund farbe.
Nun können wir die Gewünschte Farbe auswählen und bestätigen.
Wir ihr seht wurde eure ausgewählte Zelle gefärbt.
Wenn ihr alle Zellen gefärbt haben wollt, selektieren wir alle Zellen mit STRG + Mausklick.

Nun zu den "richtigen" Grafiken.
Um eine Grafik in die Tabelle einzufügen klicken wir schon einmal auf die Gewünschte Zelle der Tabelle wo anschließend die Grafik sein soll.
Nun klicken wir auf den "Grafik-" Button.
Um eine Grafik auszuwählen klicken wir auf Durchsuchen und wählen unsere gewünschte Grafik aus.
Nun müssen wir bei Alternativtext auch etwas hineinschreiben, da einige Leute mit Internet Browsern unterwegs sind, welche keine Grafiken anzeigen können.
In diesem fall nehmen wir einfach mal : "grafik" oder so in etwa.
Wir ihr seht ist nun eine Grafik in unserer Tabelle.
Wenn wir wollen, dass die Grafik Zentriert ist drücken wir auf den Button um in der Mitte zu schreiben. Dies kennen wir ja auch zum Beispiel auf Elitepvpers wenn wir eine Antwort oder Thema posten.
Nun ist eure Grafik in der Mitte eurer Zelle.

Kapitel3 Links.
Jetzt wollen wir einen Link in unsere Grafik einfügen.
Dies geschieht folgender Maßen:
Wir Selektieren unsere Grafik, klicken auf "Link", geben den Link an und drücken auf O.K. Dies funktioniert auch mit Texten.
Wir schreiben nun einen Text in eine unsere Zellen in der Tabelle.
Meinetwegen mit folgendem Text:

Hier geht es zu Elitepvpers.

Nun Selektieren wir das Wort "Hier" und drücken auf "Link", anschließend geben wir den link : "http://www.elitepvpers.com" ein.
Fertig.


Wenn ihr allein dies geübt habt, und kombinieren könnt, kann so eine Seite schnell so aussehen:

 Spoiler

Dieses Tutorial wird von mir ständig weiter geschrieben.
Denn ihr lernt mit mir :P

Bilder folgen!

Ich hoffe ich konnte euch helfen!
Joshi2122

[Psycho_Ente]

So, dass NVU Grundlagentutorial wird weitergeschrieben mit folgendem Thema:

Weitere Gestaltung durch:

1.Tabellenzentrieren mit richtiger Anwendung.
2.Header mit link.
4."Buttons"
5. Grafische Verschönerrungen



Tabellenzentrierung mit richtiger Anwendung

In diesem Kapitel lernen wir die Tabellen richtig zu benutzen.
Wir fangen an einen Header zu erstellen.
Wir machen uns eine Tabelle mit nur einer Zelle.
Jetzt machen wir ein Rechtsklick auf diese Zelle, und gehen auf:
Tabellenzelleeigenschaften.

Wir drücken nun auf: Tabelle.
Das sieht dann so aus:


Bei unserer Tabelle wollen wir keinen Rand, also tragen wir bei "Rand" eine 0 ein.
Bei Füllung geben wir auch 0 ein.
Genauso wie bei Abstand zwischen den Zellen auch eine 0.

Bei "Tabellenausrichtung" wählen wir nun die Auswahl "Mitte" aus.
Den Rest können wir eigentlich so lassen.
Wie wir sehen, ist unsere Tabelle nun in der Mitte der Homepage.
Damit unsere Grafik gleich auch in der Mitte der Tabelle ist, selektieren wir unsere Tabelle und klicken auf den "Zentrieren"-Button.
Den kennen wir auch aus Elitepvpers.
Wenn die Grafik sowieso größer wie die Tabelle ist, können wir diesen Schritt überspringen

Header mit Link


Um nun unsere Grafik einzufügen selektieren wir erst die Tabelle dann gehen wir auf "Grafik", suchen unsereGrafik, geben einen Alternativtext ein und klicken auf "OK"
Wie wir sehen, hat sich unsere Tabelle automatisch der Größe unserer Grafik angepasst.

Jetzt sieht unsere Seite so aus:


Jetzt wollen wir noch, dass wenn wir auf unseren Header klicken,
wir auf meinetwegen Elitepvpers kommen
Dafür selektieren wir unsere Grafik und klicken auf: "Link"
und fügen folgenden Link ein:


Schon ist unser Header fertig.

Buttons für unser Menü
Jetzt wollen wir ein Menü erstellen mit Buttons(der Schönheit wegen)
Wir haben folgende möglichkeiten für Unser Menü.
Entweder machen wir das Menü Neben unserem "Schreibfeld" Keine Ahnung wie man das jetzt nennen Mag (Bin auch nur ein Mensch)
Oder direkt unter dem Header.
Ich mach mir jetzt mal die Mühe, beide Wege zu erklären

Menü an der Seite
Als erstes kümmern wir uns um die Button.
Ich benutze
Es ist freeware und meiner Meinung kann es gut mit Photoshop mithalten.
Ich mache meine Buttons immer mit folgenden Maßen:
Breite: 150
Höhe : 30
Aber das ist euch selber überlassen wie ihr das haben wollt.
Als beispiel benutzt ich so einen einfachen Button:

Wir erstellen eine Tabelle unter dem Header mit 2
Zellen.Diese Tabelle zentrieren wir diesmal wieder.
Allerdings geben wir diesmal auch eine Breite an.
Die breite soll unseren Header gleichen bei mir ist es 640 px.
Die Anordnung der Zellen sieht bei mir so aus:

 Spoiler

Der Nachteil an dieser Art ein Seitliches menü zu erstellen sieht folgender Maßen aus: Das Menü ist nach unten hin genau so lang wie unser Haupttextfeld.
Ich werde mir demnächst noch eine neue Lösung dafür ausdenken und euch diese vorstellen!

Fangen wir nun an, unsere Buttons einzufügen.
Dies machen wir wie immer über dem "Grafik" tool, geben einen Alternativ text an.
Ich hab so vier Button eingefügt.
Unsere Homepage sieht nun so aus:

 Spoiler

Ihr fragt euch nun sicherlich, wie ich es hinbekommen habe, dass die Buttons nicht in der Mitte der Tabelle sondern Oben sind.
Es funktioniert folgender maßen:

Ihr selektiert eure Zelle wo dies der Fall sein soll.
Drück rechtsklick -> Tabellenzelleeigenschaften -> bei Inhalt ausrichten -> Vertikal -> Oben

Wie wir den Buttons links geben wisst ihr ja schon.
Wenn ihr noch eine HTML Seite habt, welche über einem Eurer links aufgerugen werden soll.
Gebt ihr bei Link einfach (Wenn eure Seite im selben ordner ist( NAMEDERSEITE.html ein.
Andere links wie zu Elitepvpers werden normal angegeben.

Menü unter dem Header

Der Teil wird einfacher erklärt als der hier drüber, da ihr jetzt wisst wie man richtig damit umgeht.

Um nun ein Menü unter dem Header zu machen, machen wir wieder eine Tabelle.
Sie ist Zentriert und hat so viele Zellen wie Buttons, in meinen Fall 4.
Die Tabelle wird Zentriert und kriegt die Breite eures Headers
Nun macht ihr in jede Eurer Zellen einen Button und gebt diesen einen Link.
Um nun direkt da drunter ein Schreib feld zu haben macht ihr eine Tabelle mit nur einer Zelle mit der Breite eures Headers und wählt ob ihr einen Rand haben wollt oder nicht, ob die schrift Oben, in der Mitte, Oder unten sein soll.
Fertig, eine Homepage kann dann so aussehen:

 Spoiler

Grafische Verschönerungen

Als beispiel wollen wir nun, ein unserer Homepage angepasstes Hintergrundbild basteln

Dafür brauchen wir
Und GIMP oder Photoshop.

Wir öffnen unsere HTML seite über Firefox.
Drücken Rechtsklick -> Fireshot -> Ganze seite aufnehmen -> Speichern
Nun öffnen wir das bild mit Gimp oder Photoshop

Jetzt können wir schön um Unsere Homepage herum designen.
und anschließend löschen wir den teil wo unsere Homepage zu sehen ist, raus.

Jetzt gehen wir bei NVU auf FORMAT -> Seitenfarbe und Hintergrund und wählen unser Hintergrund bild aus.

Fertig.

 Spoiler

Wenn ihr dieses Tutorial woanders posten wollt, fragt mich!

[Psycho_Ente]

Nun ein Thema auf das ich eigentlich zu Spät eingehe.
Es geht nähmlich um das Strukturierte arbeiten mit NVU heisst:
Mehrfache Tabellenanwendung.
Richtige Platzierung der Einzelnen Themen und Bildern etc.

In diesen Teil fangen wir gemeinsam eine komplett neue Homepage an, welche wir Strukturiert Gestalten- und für den Besucher interessant machen.

Als erstes müssen wir uns Gedanken machen, was für eine Zielgruppe mit unserer Seite ansprechen wollen bzw. begeistern möchten.
Ich denke das geht relativ schnell:

Wenn ihr euer Thema gefunden habt, habt schonmal einen Teil geschafft.
Wenn ihr wollt könnt ihr euch zu dem Thema jetzt schon Bilder suchen oder selber machen.
Ich habe mich für das Thema der Spielewelt entschieden.

Die Homepage Strukturieren und für den Besucher interessant machen.

Um unsere Homepage interessant zu gestalten, solltet ihr folgendes Beachten:
Treffende Überschrifften (Nicht zu lang, nicht zu Knapp, sollte zum Inhalt passen)
In diesem Fall habe ich folgende Themen herausgenommen:

Let's Plays
Game Trailer
News(Home)
Linkliste

Diese 4 Themen geben genau und knapp wieder, was auf sie in diesem Bereich erwarten wird.

Farbliche Gestaltung

Wenn unser Thema Sommer oder Umwelt ist, sollte unsere Homepage natürlich nicht im Gothikstiel sein oder eine Header im GTA- Style besitzen.
Das passt einfach nicht.
Stattdessen fröhliche Farben.
Und vielleicht eine Wiese als Header oder Ähnliches.

Homepage erstellen
Da wir nun die Strukturierung und Farbige Gestaltung geklärt haben, können wir nun Anfangen unsere Homepage zu erstellen.
Doch wir müssen immer im Hinterkopf beibehalten, dass die Homepage Übersichtlich sein soll.

Die wahl des Headers.
Ein Header sagt schon einiges über die Homepage aus.
Allein daran kann ein Besucher erkennen "Aha, das ist also eine Spiele-Homepage".
Unser Header gibt uns einen Wiedererkennungswert.
Als Header mag ich gerne 3 Bilder kombinieren.
Als aller aller erstes machen wir eine Tabelle mit 1 Zelle. welche Zentriert ist. Die Breite ist egal. Die Höhe auch.
In diese Fügen wir 3 Weitere Tabellen ein ;D
Dies funktioniert ab hier nicht mehr über den Tabellen button, da ihr sonst nur die Bestehende Tabelle bearbeitet.
Also klicken auf: Einfügen -> Tabelle und wählen die Zellen aus.
Ich nehme 3 da mein Header aus 3 Bildern besteht!
Diese Tabelle Zentrieren wir und geben ihr die Größe der 1. Tabelle
In meinen Fall 800 px.
Anschließend habe ich meine Drei Bilder eingefügt.
Den Rand habe ich entfernt
Jetzt machen wir eine Tabelle Mit der ZellenAnzahl unserer Button (bei mir sind es 4)
Wir nehmen wieder die Größe unseres Headers, zentrieren unsere Tabelle und machen den Rand nach wunsch weg.
Ich habe nun schon die 4 Buttons von mir eingefügt.
Nicht vergessen Links auf die Buttons zu machen!
und noch eine Tabelle da drunter mit einer Zelle.
So sieht das Ganze nun aus:

 Spoiler

Die 3. Tabelle ist unser Schreibfeld.
Hier kommt unser Themen Inhalt hinein.

Mit etwas Inhalt sieht unser Template nun so aus:


Und Nein die verlinkung verstößt nicht gegen die Forenregeln da dort steht:

Posts, in denen du für andere Websites etc. wirbst sind verboten, es sei denn die Seite enthält einen Backlink zu elitepvpers; bei Verstoß: Infraction (beim ersten Mal Warning)

Dieses Tutorial bitte nur mit Erlaubnis woanders Posten!