Arandolio got their homepage at Neopets.com

Willkommen guest!

So du willst also lernen wie man Layouts codet und ein paar Tipps zum Machen von Layouts. Schön hier bist du genau richtig. Ich will dich aber nicht lange aufhalten und schicke dich deshalb gleich zum Inhaltsverzeichnis ^^ So du willst also hier etwas lernen zum Machen von Grafiken und zum späteren coden? Schön, denn hier bist du genau richtig. Ich will dich aber nicht lange aufhalten und schicke dich deshalb gleich zum Inhaltsverzeichnis ^^

Wie mache ich Swirls+Brushs?

Coden eines Petpagelayouts

Bildränder mit PSP

Die Erklärungsbilder sind teilweise stark komprimiert, dies ist beabsichtigt, damit auch User mit weniger schnellen Internetverbindungen, nicht ewig warten müssen.

Wie mache ich Swirls+Brushs?

Dieses Tutorial ist für Paint Shop Pro X gemacht!

Wenn ich Grafiken mache, benutze ich immer PSP X (auf deutsch!). Dieses Tutorial ist genau für dieses Programm erklärt. Wenn du ein anderes Programm benutzt, ist es gut möglich, dass das Tutorial übertragbar ist, doch du musst dir dafür die Funktionen selber heraussuchen.

Gratulation guest! Du hast nun selber einen Brush gemacht, mit selbergemachten Swirls!

Coden eines Petpagelayouts

Dieses Tutorial beginnt gleich mit dem coden, also sobald du deine Grafik fertig gestellt hast!

Es gibt zwei-und einteilige Layouts, zuerst werde ich das Coden der einteiligen erklären. Am Schluss werde ich dir noch den Unterschied zwischen ein-und zweiteiligen Layouts zeigen.

Tipp: Wenn du es für eine Bewerbung machst, kannst du ja vorher nachfragen, was für eine Bildschirmgrösse er oder sie hat.

Deine Grafik sieht wahrscheinlich im groben so aus wie die unten (vermutlich grösser). Es ist nicht von Bedeutung wie gross die Grafik ist oder wieviele "Kästchen" (bekannt als div) sie enthält.
Tipp: Wenn deine Grafik nicht am äusseren Rand einfarbig ist, dann sieht es je nach Bildschirmgrösse wieder abgeschnitten aus. Bei dem Code, den ich dir hier zur Verfügung stelle und auch erkläre, solltest du nur oben und am linken Bildrand überschneiden lassen.

Weiterhin werde ich dir mit PSP und Paint zeigen wie du an die nötigen Bildinformationen kommst, da letzteres sozusagen jeder User auf dem Computer hat. Aber nun zum Code.

Die ist der Grundcode. Bei "BILDURL.jpg" musst du die URL deiner Grafik einfügen. Die Grafik ist von oben 14 Pixel entfernt, dies ist extra für Petpages, damit der Balken, der auf jeder Petpage zu finden ist (der auf dem "pets, games, homepages...." steht) nicht verdeckt ist.
Unten ist die Hintergrundfarbe auch noch definiert. Diese musst du dem Hintergrund deiner Grafik anpassen.

Bei PSP kannst du dir auch gleich den HTML-Code zeigen lassen:

Jetzt zum (individuelleren) schwierigeren Teil. Jedes div musst du einzeln anpassen. Dies ist der Grundcode zum öffnen eines divs:

<div style="width: 40px; height: 180px; overflow: auto; position: absolute; top: 70px; left: 50px; border: 0px;">
 
width=Breite 
height=Höhe 
top=Abstand von Oben (y-achse) 
left=Abstand von Links (x-achse) 
Diese Angaben werden meist in Pixeln (px) gemacht. Wie du auf diese Angaben von deiner Grafik kommst: 
bei Paint: <img src="http://i42.photobucket.com/albums/e307/nettesmadchen/Tutorials/9CodeneineseinteiligenLayouts.jpg"> 
Bei PSP: <img src="http://i42.photobucket.com/albums/e307/nettesmadchen/Tutorials/8CodeneineseinteiligenLayouts.jpg"> <ul>Du fährst mit dem Cursor über die Eckpunkte deiner angedeuteten Kästchen. Wenn du genau im Eckpunkt bist, merke dir die Kordinaten, die du bei 2tens siehst. Den x-wert kannst du einfach bei "left" eintragen, beim y-wert musst du noch 14px hinzuzählen, da die Grafik selber ja auch 14px von oben entfernt ist und so alles 14px nach unten rutscht. 
Jetzt musst du noch vom zweiten roten Eckpunkt die Kordinaten abmessen. Jetzt rechnest du x-Wert vom unteren rechten Eckpunkt minus den x-Wert vom oberen linken Eckpunkt und trägst das Ergebnis als Breite ein. Nun rechnest du den y-Wert vom unteren rechten Eckpunkt minus den y-wert vom oberen linken Eckpunkt (ohne 14px dazugerechnet zu haben!), das ist jetzt die Höhe deines Kästchens. Wenn du jetzt alles richtig gemacht hast, ist dein div am richtigen Ort.
</ul>
 
Als Beispiel der Kordinatenpunkt von oben links ist (x:100 y:200) und der unten rechts ist (x:300 y:400). 
Dh. top=200+14=214px; left=100px; width=300-100=200px; height=400-200=200px <img src="http://i42.photobucket.com/albums/e307/nettesmadchen/Inhaltsverzeichnisstern.jpg">
Divs sind wie Ebenen, du sagst wie gross sie sein sollen und wo sie hingehören. Wenn du nun einfach noch mal eine Ebene öffnest ohne die vorherige zu schliessen, wird die neue Ebene in der vorherigen Ebene sein und von der vorherigen Ebene z.B 50px weiter links sein. Wenn du dies nicht beabsichtigst, musst du das divs wieder schliessen. Das ist ganz einfach mit diesem Code, er schliesst die zuletzt geöffnete div. Wenn du mehrere schliessen willst, musst du den Code einfach so oft verwenden, wie du divs schliessen willst <textarea>