Tutorial » Layouts coden - NVU

Damit wir unser Layout anschließend bei Howrse für die Präsentation verwenden können, müssen wir es coden. Ich werde zeigen, wie es mit dem Programm „NVU“ funktioniert. Andere Methoden wären mit margins oder mit Firebug (Addon für den Firefox Browser).

Wem das alles zu umständlich ist, kann auch einfach den Layoutcodegenerator verwenden, der kein zusätzliches Programm benötigt.

Nun fangen wir an…

1. Das Programm gibt es kostenlos über Google zu downloaden. Wenn wir es fertig installiert haben, öffnen wir es.

2. Nun gehen wir auf Tabelle à Einfügen à Tabelle…
Wir klicken auf die Registerkarte Präzise à Erweitert…

3. Bei Attribut geben wir „background“ ein und bei Wert unseren Direktlink mit dem Layout. Dazu müssen wir es bei einem Bilderhoster, wie Tinypic, Directupload und Konsorten uploaden. Wenn wir das getan haben, klicken wir zweimal auf „OK“.

4. Wir sehen nun unser Layout in klein. Um es richtig anzeigen zu lassen, ziehen wir es in die richtige Größe. Dazu klicken wir in die Ebene mit den roten Kästchen und ziehen an den kleinen Quadraten.

5. Jetzt klicken wir in den roten Kasten, wo unser Text hin soll. Ich habe in den 2. Kasten 2. Reihe geklickt und bin dann auf Einfügen à HTML… gegangen. Dort geben wir
ein und klicken auf Einfügen.

6. Als nächstes gehen wir unten auf die Registerkarte HTML-Tags und klicken unseren gelben DIV Kasten an. Darauf öffnet sich ein neues Fenster.

7. Bei diesem Kasten ( Inline Style (CSS) ) geben wir bei Eigenschaft „overflow“ und bei Wert „auto“ ein und klicken auf OK.

8. Jetzt sehen wir einen blauen Balken. Wir wechseln auf die Registerkarte Normal und ziehen unsere Textbox zurecht.

9. Das machen wir oben und unten links dort wo die Pixel stehen, bis wir zufrieden sind. Der blau markierte Bereich ist also die Scrollbox.

10. Zum Schluss wechseln wir unten auf die Registerkarte Quelltext. Die blaue Scrollbox ist hier als Code markiert.

11. Vor dem letzten div gebt ihr nun ein paar Zeilen (!) Text ein.

12. So sieht es bei mir nun in der Registerkarte Normal aus. Der Code kann nun unter Quelltext kopiert und bei der Howrsepräsentation im HTML-Modus eingefügt werden.

Die Verlinkungen sollte man nicht vergessen.
Unter dem letzten einfach <*/*d*iv><*a h*ref=„Link“*>Na*me eingeben (ohne die *).