[TUT]: Layouts coden mit NVU

Hi!
Immer wieder werde ich gefragt wie man Layouts codet. Also habe ich mich entschlossen, ein TUT zu machen, um euch es zu erleichtern.
Für diese Anleitung benötigt ihr NVU. Dies gibt es zum kostenlosen download. Zum Beispiel hier.
Chip.de kann ich empfehlen und kann euch versichern das es 100% legal ist, auch wenn ihr Programme wie GIMP sucht.
Weiter zur Anleitung:

1.
Euer fertiges Layout bei z.B. tinypic.com.
Klickt mit der rechten Maustaste auf das Bild und wählt: "Grafikadresse kopieren".

2.
Öffnet NVU.


es erscheint eine Tabelle.
Klickt links unten auf HTML-Tags, und nun auf "Table"



nun geht es so weiter. Klickt auf (unten rechts) erweitert:


Achtung nachdem ihr auf OK geklickt habt, müsst ihr noch auf "Anwenden" klicken

nun einen Klick auf unten links "Vorschau". Eier Layout müsste hienter der Tabelle erscheinen.
ACHTUNG Internet muss aktivirt sein!. wenn es noch nicht erscheint, müsst ihr etwas warten.


3.
3.1.Nun kommt der Schwierigste Teil. Die Scrollboxen.
klickt wieder auf "Vorschau"
Nun müsst ihr die Scrollboxen "auswählen" sag ich mal also:



3.2.nun weiter

wählt den 1. Kasten.
Klickt auf (oben in der Leiste) Einfügen=>HTML
Es erscheint ein Feld. Darin schreibt ihr <div> anschließend auf "ok"
Wieder auf HTML-Tags
Es ist ein Feld in dem 1. Kästchen erschienen. "DIV" steht darauf.
Klickt es an



die Leiste wird blau. Nun wieder auf Vorschau.
Nun musst du mit Hilfe der Balken an der Seite den blauen Kasten so vergrößern, das er das ganze Kästchen ausfüllt.



3.3.
Nun klcikt ihr auf "Quelltext". dort müsste die Scrollbox blau makiert sein.
Suche 171px;"></div> und schreibe zwischen die zwei "><" nur TEXT TEXT TEXT TEXT TEXT TEXT TEXT... usw ein. solange bis die Box gefüllt ist. ps klickt dazu auf "Vorschau" um zu sehen wie voll die Box ist.




Macht das so lange, bis ihr alle Scrollboxen so aussehen.

3.4.
Jetzt stören uns nur noch die Linien.
Klickt auf HTML-Tags. Nun wieder auf "Table".



Nun müssten alle Linien verschwunden sein. Ihr könnt nun noch ein bisschen die Scrollboxen verbessern.
indem ihr in den Text klickt und an den Balken noch ein bisschen hin und her schiebt.

Ich hoffe die Anleitung hat euch geholfen! Habt ihr Fragen? Fragt ruhig! ich beantworte sie. Wenn ihr wollt, könnt ihr mir euer Ergebniss zeigen.
LG Doro

Zitat :

Es erscheint ein Feld. Darin schreibt ihr <div> anschließend auf "ok

Du solltest vielleicht noch reinschreiben, dass sie </div> auch eingeben müssen...oder funktioniert das ohne </div> auch?

geht auch ohne! Hab ich versucht

oh..interessant^^ wusst ich noch gar net^^

ja is eig einfach

Dank dir wurde gleich mein erstes Layout geboren!

wow das ist aber schön!

*misstrauisch schau* Naja, habs mir eigentlich nicht so vorgestellt, aber Übung macht ja bekanntlich die Meisterin!

na ja ich hab es so gelernt und es geht auch! wenn du mir nich glaubst, schau dir das video an
video coden

mist, nvn hab ich leider nicht, wo gibts das??

ich hab oben einen link in der Anleitung

Danke für die Anleitung!

bitte ich hoffe sie bringt euch was^^

Ja, mir hat sie schon etwas gebracht.
Muss nur noch das richtige Layout hinkriegen, dann habe ich ein neues Profil.

das schaffst du schon

Ich hoffe es.

Mal, ne Frage: Wie meinst du das, mit "umkästeln der Scrollboxen"?
Außerdem sollte die Tabelle doch vor dem Layout sein, ist es bei mir aber nicht!
Kannst du mir helfen?
glg -Roma-

deine frage klingt in meinen ohren nach purer bloedheit (sorry).
ganz einfach:
du hast z.b. "meine zucht" und unten drunter so'n kasten wie bei doros beispiel.
da machste einfach n kasten drum (reihen/spalten anpassen, sodass der kasten von einem "tabellenkasten" umrandet ist).
die zweite versteh ich i-wie nich

Ok, achsoo, jaja, in solchen Dingen bin ich eben keine Leuchte

Beim zweiten hab ich meinen Fehler selbst gefunden

wie meinst du das klickt auf vorschau...wo finde ich das "vorschau"..?

Oh cool. Mein Layout wurde als Beispiel verwendet. lol

jup^^ is doch nicht schlimm oder?

Danke, hat super geklappt.

Eine Frage habe ich aber noch:
Wenn ich das jetzt zB bei Howrse ins Profil einfügen will und den Quelltext davon nehme und bei Howrse im HTML-Modus einfüge, sagt der mir immer, dass der fehlerhaft ist. Welchen HTML-Code muss ich denn dann nehmen?

Hey.
Vielen Dank für diese Anleitung..
Aber leider habe ich ein Problem.
Gleich am Anfang: Bei dem 1. Schritt. Eigentlich sollte es ja, nachdem ich auf "Vorschau" gedrückt habe, das Layout anzeigen. Aber bei mir wird nichts angezeigt. Obwohl ich es genau so gemacht habe, wie du es erklärt hast ô.o

Ich bin eben in so etwas ne Niete :/

SummerLo: Da bist du nicht die einzige!