Lichtregen got their homepage at Neopets.com

WICHTIG! Bitte verwende Firefox, um die Petpage richtig darstellen zu können!

Willkommen auf meiner Petpage, guest!
Ich bin kein Freund langer Reden, also komme ich gleich zur Sache. Hier findest du viele Anleitungen und Tutorials zu verschiedenen Themen (HTML, CSS, Grafiken...).
Bestimmt ist auch etwas für dich dabei, denn ich erweitere alles regelmäßig und füge gerne neues hinzu. Na ja, eigentlich mache das nicht ich, sondern meine Besitzerin Johanna. ^^

Wenn du Fragen hast, kannst du ihr gerne eine Neomail schreiben, schau aber zuerst, ob deine Frage nicht schon im FAQ beantwortet wird. Johanna freut sich auch über Kritik, Lob, Vorschläge, Tipps, Wünsche... eigentlich über jede Art von Nachricht! Sie beantwortet alles so schnell wie möglich. =)

Ach ja, ich soll euch auch noch sagen, dass ihr euch die Regeln durchlesen sollt, bevor ihr ein Tutorial durcharbeitet.

Das war's jetzt aber mir dem Gelabere, ich überlasse das lieber Johanna. x)

Viel Spaß beim Stöbern!

Ja, auch das muss leider sein. ^^

Du darfst die Tutorials, egal ob in normaler oder veränderter Form, nicht als deine ausgeben. Hinter jedem steckt eine Menge Arbeit.
Es wäre nett, wenn du diese Page verlinken würdest, wenn du eines der Tutorials verwendet hast, es muss aber nicht unbedingt sein.
Ja, du darfst Grafiken anbieten, die du mit Hilfe eines der Tutorials erstellt hast. Allerdings ist es dann Pflicht, dass du mich irgendwo auf deiner Petpage verlinkst.
Du darfst nicht vorgeben, alles "ganz ohne fremde Hilfe" erstellt zu haben.
Schicke mir bitte eine Neomail, wenn du Fehler auf der Page findest.
Hab Spaß hier! :D

Hast du Fragen zu den Regeln? Hier kannst du mir einfach eine Neomail schicken.

Frage vorschlagen

FAQ? Was ist das?
FAQ steht für Frequently Asked Questions, was Häufig gestellte Fragen bedeutet. Diese werden hier beantwortet.

Die Bilder in den Tutorials sind so klein, ich erkenne rein gar nichts! D:
Ziehe sie einfach in die Adressleiste, dann kannst du mehr erkennen.

Muss ich dich verlinken, wenn ich etwas mit einem deiner Tutorials erstelle?
In den Regeln erfährst du alles darüber.

Hast du die Tutorials alle selbst geschrieben?
Ja, sie sind alle von mir.

Ich komme bei einem Tutorial nicht weiter :'(
Kein Problem. Sende mir einfach eine Neomail und ich werde dir so gut wie möglich helfen.

Darf ich einen Award für dich machen oder dich verlinken?
Natürlich :)

Kannst du mir kostenlose Grafikprogramme empfehlen?
Die beliebtesten sind PhotoFiltre und Gimp. Frag einfach mal Google ;D

Muss ich mich an diese blöden Regeln halten?
Oh ja, diese "blöden Regeln" müssen unbedingt eingehalten werden.

Ich habe einen Fehler gefunden. Was soll ich jetzt tun?
Oje! Schicke mir bitte sofort eine Neomail, damit ich das ausbessern kann.

Lichtregen, Lichtregen... Der Name kommt mir bekannt vor. Gab's die Page früher auch schon?
Da liegst du richtig! Allerdings gehörte Lichtregen damals noch dunkelschatten oder cookie_love_x3, die beiden haben Neopets inzwischen verlassen. Auf der Petpage gab es damals nur ein einziges Tutorial, das erklärte, wie man ganz einfache Layouts erstellen konnte.

kommen bald, bin heute nicht so kreativ :P

Brushes, auch Werkzeugspitzen oder Pinsel genannt, kannst du ganz leicht selbst machen. Erst erstellst du eine Datei, sie sollte nicht zu klein sein, damit genug Platz ist.

Jetzt geht's ans Gestalten. Du kannst Bilder einfügen, etwas zeichnen, Text schreiben, was du willst. Lass deiner Fantasie einfach freien Lauf. Du kannst auch auf mehreren Ebenen arbeiten, das ist ganz egal. Achtung: Weiße Farbe ist nachher nicht mehr zu sehen, also transparent!

Ich habe einfach nur ein Angelpuss eingefügt. Es macht nichts, wenn rundherum noch viel freier Platz ist. Dein Brush wird nachher automatisch so zugeschnitten, dass nur noch Teile des Bildes zu sehen sind, auf denen sich Farbe befindet.

Sobald du deinen Brush fertig gestaltet hast, klickst du auf Bearbeiten - Pinselvorgabe festlegen. Ich arbeite mit Photoshop CS3, falls du eine andere Version verwendest, könnte dieser Befehl irgendwo anders im Menü versteckt sein. Gib nun einen Namen ein, in meinem Fall war "Angelpuss" sehr naheliegend :PWenn du auf OK klickst, wird dein Brush gespeichert.

Gut gemacht, du hast gerade deinen eigenen Brush erstellt!

Verwenden kannst du ihn wie jeden anderen. Wähle ihn einfach aus, nimm eine Farbe und mal drauf los. :)

Du kannst noch nicht so gut coden, möchtest aber trotzdem ein selbst erstelltes, schlichtes Petpage Layout? Keine Sorge, dieses Layout ist ganz einfach zu erstellen, du brauchst keinerlei Programmier- oder Grafikkenntnisse. ^^

Links siehst du ein Beispiel-Layout. Ziehe das Bild in die Adressleiste, um es in Originalgröße zu sehen.

Hm, willst du auch so eines? Kopiere zuerst den folgenden Grundcode:

Markiere ihn und drücke Strg+C, dann gehst du auf diese Seite, wählst die Petpage aus und fügst das ganze mit Strg+V in das HTML-Feld ein.

Gut, jetzt musst du nur noch einige Dinge ersetzen, vor allem HEX-Codes, das sind Codes, die Farben angeben. Der HEX-Code für weiß ist zum Beispiel #FFFFFF, der für rot #FF0000, der für pink #FF0055 und so weiter und so fort. Such einfach bei Google nach HEX-Codes, klicke auf ein Ergebnis und du hast gleich eine Menge Farbcodes vor deiner Nase, die du einfügen kannst. ^^

Oben im Code habe ich bei allen HEX-Codes, die du ersetzen kannst, einfach #FFFFFF eingegeben, damit du es gleich siehst.

body {
background: #FFFFFF; Hintergrundfarbe der Page
color: #FFFFFF;Textfarbe
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: 12px;
text-align: center;
}

h1, h2 {
color: #FFFFFF; Textfarbe der Überschriften
text-align: center;
font-weight: normal;
}

a {
color: #FFFFFF; Textfarbe der Links
text-decoration: none; Weiter unten erfährst du mehr über text-decoration!
}

a:hover {
color: #FFFFFF; Textfarbe der Links, wenn man mit der Maus darüber fährt
text-decoration: none; Weiter unten erfährst du mehr über text-decoration!
}

i {
color: #FFFFFF; Textfarbe von kursivem Text
}

b {
color: #FFFFFF; Textfarbe von fettem Text
}

.mitte {
text-align: center;
}

#all {
background: #FFFFFF; Hintergrundfarbe des Textfeldes
border: 2px solid #FFFFFF; Farbe des Rahmens
text-align: left;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 50px;
padding-left: 50px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
margin-bottom: 50px;
width: 500px;
}

Super, das wäre erledigt x)
Jetzt erzähle ich dir noch etwas über text-decoration. Mit text-decoration kannst du deine Links ein wenig anders gestalten.
Du kannst den Standard none so ändern:

underline: Text unterstreichen
overline: Text überstreichen
underline overline: Text unter- und überstreichen
line-through: Text durchstreichen
blink: Der Text blinkt, was von vielen Usern als nervend empfunden wird. Netscape 4 und Internet Explorer unterstützen blink nicht.

Gut, jetzt hast du das Layout fertig gecodet! :)
Natürlich kannst du auch noch alles mit Bildern und anderen Dingen verschönern, falls du dazu in der Lage bist.

Wenn du jetzt Text einfügen willst, ist es eigentlich ganz einfach:

<p>Absatz</p> <p>Und noch einer. ^^</p> <a href="http://www.neopets.com/">Link</a> <i>Kursiv</i> <b>Fett</b> <h1>Große Überschrift</h1> <h2>Kleine Überschrift</h2> <p class="mitte">Einzelner, zentrierter Absatz</p>

Viel Spaß mit deinem Layout! ;]