Willkommen
Willkommen auf Inges Layoutguide. Zu allererst möchte ich sagen, dass ich hoffe, dass ihr durch diesen Guide etwas lernen könnt. Viele Holländische Leute habe bis jetzt schon ein schönes Layout mit diesem Guide gemacht, es sollte also für dich auch möglich sein! Ich wünsche dir viel Glück und viel Spass beim erstellen deines (ersten) Layouts :) Wenn du Fragen hast kannst du mir JEDERZEIT eine Neomail schreiben.Meine Templates sind NUR für den persönlichen Gebrauch, das heist du darfst diese nicht benutzen um eine eigene Grafikseite damit zu erstellen oder Anderen Lookups anzubieten. Wenn du eine Grafikseite erstellen möchtest bedeutet das, dass du etwas über HTML und CSS wissen solltest. Wenn du nicht selber coden kannst, solltest du auch keine eigene Grafikseite erstellen.
Ich würde mich darüber freuen, wenn du die Credits im Layout lässt, damit auch andere Leute diese Hilfeseite finden können.
News
26. MaiNachdem der PP-Filter die Positionsgeschichte gar nicht mehr durchgelassen hat, wurde "position:absolute" nun in (hoffentlich) sämtlichen Codes durch "white-space: normal" ersetzt, heißt:
Wenn ihr in einem Code, den ihr verwenden wollt, "white-space: normal" findet, müsst ihr es durch "position:absolute" ersetzen, damit es funktioniert.
Galerie-Layout sollte nun auch wieder funktionieren sowie Lookup Style 1/2/3. Möglicherweise treten browserspezifische Schwierigkeiten auf, ich habe SeaMonkey, FireFox, Opera und Internet Explorer, teste aber, zugegeben, nicht jeden einzelnen Code in allen Browsern; falls was ist, NM bitte.
Farbtabelle ist auch wieder bunt!
14. Februar
So, Textareas funktionieren wieder.
Ein paar generelle Probleme gibt es allerdings noch, was vorerst definitiv funktioniert:
- Fullpage Gildenlayout
- Overlay Gildenlayout
- Petpagelayout
- Pet Lookup
- Lookup Style 3 (Das Wort "positioon" muss hier im Code in "position" geändert werden, der Petpage-Filter lässt das nicht durch)
Falls es damit noch irgendwelche Probleme gibt, schreibt mir bitte eine NM.
Weitere Korrekturen/mehr Übersetzungen folgen... demnächst.
26. Juni
TNT scheint es Spaß zu machen, uns ein wenig zu ärgern ^^ - Lookup- und Petlookup-Codes sind vorerst erneuert, Galerie-Layout verursacht momentan noch mehr Probleme, aber ich werd sehen, dass ich das auch noch hinkriege die nächsten Tage.
Shop-Layout ist leider immer noch... ähm sozusagen nicht vorhanden.
Tutorials ------ Galerie Layout
In diesem Tutorial werde ich dir erklären, wie du ein Galerielayout machen kannst. Das ist ein Beispiel, wie dein Layout aussehen wird, wenn es fertig ist.
Für dieses Layout brauchst du ein Grafikprogramm, wie Paint oder Photoshop und du brauchst eine Galerie). Klick hier um deine Galerie zu bearbeiten. Wenn du noch keine hast, kannst du eine erstellen.
Kopiere den Code unter diesem Text und füge ihn in das weisse Kästchen für die Galerie-Beschreibung ein.
Nachdem du Galerie aktualisieren gedrückt hast, geh zum Schaufenster, du siehst deine Galerie ist jetzt komplett weiss. Lass uns also nun etwas Farbe ins Spiel bringen. Das nachfolgende Bild wird links oben in deiner Galerie erscheinen. Speicher es auf deinem Computer und veraender es mit dem Grafikprogramm so wie es dir gefällt. (Um die volle Grösse des Bildes zu sehen, must du das Bild entweder in die Adresszeile ziehen oder mit der rechten Maustaste kicken und dann auf Grafik anzeigen)
Wenn du dein Bild fertig hast, geht es weiter. Wir sind noch nicht fertig. Wir müssen jetzt einen sich Hintergrund machen, der sich wiederholt, damit dein Layout komplett ist.
Du kannst diesen Hintergrund machen indem du einen schmalen Streifen vom unteren Rand deines Hauptbildes nimmst und das als neue Datei speicherst. Wenn du es richtig gemacht hast, sollte es in Etwa so aussehen:
Wenn du es nicht hinbekommst, kannst du auch mein Beispielbild nehmen und bearbeiten bis es mit deinem Hauptbild zusammen passt. Sei sicher, dass es mit deinem Hauptbild zusammen passt, da dieses in den Hintergrund übergeht.
Nun lade deine Bilder hoch, zB. bei tinypic (punkt com). Du brauchst nichts einfügen nach "Tags". Drück auf "Upload now" und warte bis sich die naechste Seite geöffnet hat. Dannach kopiere den Link nach Direct Link for Layouts.
Jetzt können wir das Layout coden. Das ist nicht schwer, du brauchst nur die Bildlinks an die richtige Stelle im Code setzen. Geh zu dem Code, welchen du schon in deinem Geschäft eingefügt hast.
Füge den Bild für dein Hauptbild, welches links oben auf deinem Layout erscheinen soll, hier ein:
Die URL(Linkadresse) für den sich wiederholenden Hintergrund, Kommt hier hinn:
Jetzt bist du fertig! Wenn du möchtest, kannst du die Textfarben und die Scrollbarfarben aendern. Eine Farbtabelle kannst du hier finden. Du kannst zB. auch deine Navigation anders positionieren. Ich denke mit den Anweisungen, die du im Code findest, sollte dir das möglich sein. Gratulaion zu deinem neuen Galerielayout!
Tutorials ------ Lookup Style 1
In diesem Tutorial werde ich dir zeigen, wie du ein Lookup wie dieses ganz einfach selber machen kannst:
Ziehe das Bild in die Adresszeile deines Browser's oder rechts-klick und klick auf "Grafik anzeigen" um das komplette Bild angezeigt zu bekommen.
Das ist der Code den du für dieses Lookup brauchst:
Dieses Lookup braucht zwei Bilder, die du gestalten kannst. Bild eins ist das Hauptbild deines Lookups. Bild zwei ist ein sich wiederholender Hintergrund. Zuerst musst du das Template auf deinem computer speichern und so veraendern bis es dir gefaellt. Du siehst es hier ein bisschen kleiner als es im Original ist (damit es in meinen Guide passt), wenn du das Bild in Paint oder einem anderen Grafikprogramm öffnest, wirst du das komplette Bild sehen.
Wenn du dein Bild fertig desingt hast, bist du soweit um den naechsten Schritt zu tun! Ich denke du weißt schon welchen Teil des Layouts wir jetzt machen werden. Den sich wiederholenden Hintergrund. Du kannst diesen Hintergrund machen indem du einen schmalen Streifen vom unteren Rand deines Hauptbildes nimmst und das als neue Datei speicherst. Wenn du es richtig gemacht hast, sollte es in Etwa so aussehen:
Wenn du es nicht hinbekommst, kannst du auch mein Beispielbild nehmen und bearbeiten bis es mit deinem Hauptbild zusammen passt. Sei sicher, dass es mit deinem Hauptbild zusammen passt, da dieses in den Hintergrund übergeht.
Jetzt bist du schon fast fertig. Wir können anfangen den Code für dein Layout zu aendern.
Kopiere den kompletten Code (du findest ihn am Anfang des Tutorials) und füge ihn hier in das ÜBER MICH feld ein.
Nun lade deine Bilder hoch, zB. bei tinypic (punkt com). Du brauchst nichts einfügen nach "Tags". Drück auf "Upload now" und warte bis sich die naechste Seite geöffnet hat. Dannach kopiere den Link nach Direct Link for Layouts.
Das erste was wir aendern werden, sind die URL's/Bildadressen. Hier kannst du sehen wo du die URL/Bildadresse deines Hauptbildes aendern musst.
Wenn du das gemacht hast, klick auf "Vorschau" um zu sehen ob du es richtig gemacht hast. Wenn nicht, hast du wahrscheinlich diese Stelle id="dontremovetheid" entfernt. Das ist ein Fehler, den viele Leute machen.
Nun werden wir die URL/Bildadresse für den Hintergrund aendern. Weiter oben in deinem Code, findest du das:
Veraendere nur die URL/Bildadresse, und klick auf "Vorschau" um zu sehen ob du es richtig gemacht hast. Wenn du es richtig gemacht hast, kannst du mit dem Tutorial weitermachen. Wir müssen noch zwei weitere Sachen aendern. Den Balken über deinem Status und die Farben von deinem Text und deiner Scrollbar. Ich denke das schaffst du allein. Im Code sind einige Hinweise um dir zu helfen. Eine Farbtabelle kannst du hier finden.
Benutze dieses Template für die Balken:
Veraendere es und lade es hoch, dann füge die URL an der nachfolgenden Stelle im Code ein:
Dann bist du fertig! Gratulation zu deinem neuen, ganz persönlichem Lookup!
Tutorials ------ Lookup Style 2
In diesem Tutorial werde ich dir zeigen wie du ein Layout in diesem Stil machen kannst. Um das komplette Bild zu sehen klicke mit der rechte Maustaste und dann auf "Grafik anzeigen".
Nachfolgend siehst du den Code den du für dieses Lookup brauchst. Bitte füge ihn in das 'Über Mich' -Kaestchen ein, welches du hier findest.
Jetzt ist die Zeit gekommen die Bilder zu machen. Du brauchst das Template für dein Hauptbild und einen sich wiederholenden Hintergrund für dieses Lookup. Wir fangen an mit dem Hauptbild. Nachfolgend findest du das Template für dein Hauptbild. Bitte speicher es auf deinem Computer und öffne es in Paint (oder einem anderen Program zum Grafiken bearbeiten). Um das komplette Bild zu sehen, rechts-klick auf das Bild und dann "Grafik anzeigen".
Nun bearbeite es. Wenn du damit fertig bist, können wir uns dem Hintergrund widmen. Du kannst diesen Hintergrund machen, indem du einen schmalen Streifen vom unteren Rand deines Hauptbildes nimmst (die Stelle mit den schwarzen Streifen) und diesen als neue Datei speicherst und das als neue Datei speicherst. Wenn du es richtig gemacht hast, sollte es in Etwa so aussehen.
Wenn du es nicht hinbekommst, kannst du auch mein Beispielbild nehmen und bearbeiten bis es mit deinem Hauptbild zusammen passt. Sei sicher, dass es mit deinem Hauptbild zusammen passt, da dieses in den Hintergrund übergeht.
Sei sicher, dass es keine weissesn Stellen am Rand gibt, sonst wird es nicht gut aussehen.
Nun können wir anfangen dein Layout zu coden =D. Yay.
Jetzt lade deine Bilder hoch bei tinypic (punkt com). Du musst nichts einfügen nach "Tags". Dann drück "Upload now" und warte bis die neue Seite geladen ist. Dann kopiere den Link nach Direct Link for Layouts.
Füge den Link für dein Hauptbild hier ein.
Wenn du es geaendert hast, klick auf 'Vorschau' um zu sehen ob es funktioniert.
ACHTUNG: Viele Leute entfernen die id="dontremovethis" Stelle aus dem Code. Wenn du das tust, wird dein Hauptbild nicht an der richtigen Stelle sein. Also nicht entfernen.
Füge den Link für den Hintergrund hier in den Code ein.
Sieh nach ob es funktioniert hat. Wenn alles geht, gibt es nur noch zwei Dinge zu tun: die Balken und die Textfabe.
Das ist das Template für die Balken:
Bearbeite es, oder faerbe es, so dass es zu deinem Layout passt. Dann lade es hoch und füge den Link hier ein:
Nun brauchst du nur noch die Farbe deines Textes aendern (und die der Scrollbar wenn du möchtest). Im Code findest du einige Hinnweise, die dir helfen werden. Eine Farbtabelle findest du hier.
Gratulation zu deinem (ersten) Lookup!
Tutorials ------ Lookup Style 3
In diesem Tutorial lernst du, wie man ein Lookup mit einzeln platzierten Containern macht. Dadurch kannst du dein Lookup ganz individuell gestalten. Hier siehst du ein Beispiel.
Der Code, den du für ein solches Lookup brauchst, steht hier. Den kannst du schon mal in das Feld kopieren, wo er hingehört. Klick hier, um zu der Seite zu kommen, wo du deine Einstellungen ändern kannst.
Wenn du deine Einstellungen jetzt speicherst (oder auf "Profil-Vorschau" klickst), kannst du sehen, wie dein Lookup ungefähr aussehen wird. Das ist sehr praktisch.
Jetzt können wir mit den Hintergrundbildern anfangen. Der Hintergrund dieses Lookups ist aufgeteilt in zwei Bilder, damit die Ladezeit nicht zu lang wird. Unten siehst du das Grundgerüst dieser Bilder, die musst du dir nur auf den Computer speichern und dann in einem Grafikprogramm so bearbeiten, wie du möchtest. Wie du sie hier siehst, sind die Bilder verkleinert dargestellt, aber wenn du sie in die Adressleiste ziehst, werden sie die benötigte Größe haben. Du brauchst dir also keine Sorgen zu machen, dass dein Lookup zu klein geraten könnte.
Falls du gerne noch ein Textfeld haben möchtest (z.B. für Informationen über dich selbst), kannst du einfach noch eines hinzufügen. Im Code findest du momentan nur das, was auch auf den Bildern oben zu sehen ist, falls du also nicht so gut im Coden bist, kannst du einen Text über dich gleich im Grafikprogramm hinzufügen, Allerdings ist er dann später nicht mehr so einfach zu verändern. Die Titel der Container (Benutzerinfo, Neopets, Trophäen etc.), die auf den Bildern oben in den Feldern stehen, kannst du entfernen und entweder ganz weglassen oder deine eigenen hinzufügen.
Pass auf, dass deine beiden Bilder gut zusammen passen. Es soll schließlich so aussehen, als hättest du ein komplettes Hintergrundbild. Wenn du damit fertig bist, den Hintergrund zu bearbeiten, kannst du mit dem Coden anfangen; zuerst musst du natürlich die Bilder hochladen.
Zum Hochladen der Bilder benutzt du z.B. Photobucket (das findest du mit einer Suchmaschine). Dort kannst du einen Account machen und deine Hintergrundbilder verwalten. Wenn du die Bilder nun hochgeladen hast, siehst du sie unter dem Upload-Button verkleinert dargestellt; wenn du draufklickst oder den Cursor darüber bewegst, siehst du unter anderem den "Direktlink" zu den Bildern - diese fügst du dann in den Code ein.
Das obere Bild des Hintergrundes fügst du an dieser Stelle des Codes ein (an Stelle des Bildcodes, der jetzt noch dort steht):
Das selbe machst du dann mit dem unteren Bild an folgender Stelle im Code:
Vorsicht: Oft gemachter Fehler! Viele entfernen id="img1" und id="img2", wodurch die Hintergrundbilder dann nicht mehr dort platziert sind, wo sie hingehören. Lass diese Bezeichnungen also bitte stehen!
Die Textfarben kannst du selbstverständlich noch verändern, wenn du willst. Das einzige, was du dafür tun musst, ist, die Farbcodes an den richtigen Stellen verändern. Eine Übersicht mit Farbcodes kannst du hier finden (oder du benutzt das Pipetten-Werkzeug in deinem Grafikprogramm für ganz individuelle Farben, welche zu deinem Layout passen).
Nun kann es noch sein, dass die Trophäen zu groß sind, was wir natürlich nicht wollen. Der einfachste Weg, dieses Problem zu beheben, ist, die folgenen Zahlen in geringere Werte zu ändern (Achtung: Beide Zahlen sollten gleich sein, sonst hast du gestreckte Trophäen-Bilder):
Falls du bei deinem Layout rechts noch ein Stück siehst, das nicht mit deinem Hintergrundbild zusammen passt, ist dieses nicht breit genug. Deshalb änderst du am besten hier die Hintergrundfarbe so, dass sie zu deinem Bild passt (du kannst hier auch die Farbe des Scrollbalkens verändern):
Tutorials ------ Fullpage Gilden-Layout
In diesem Tutorial werde ich dir zeigen, wie du ein Gilden-Layout machen kannst. Um das komplette Bild zu sehen, klicke mit der rechten Maustaste und dann auf "Grafik anzeigen".
Das ist der Code, den du brauchen wirst; du fügst ihn bei den Gilden-Einstellungen ein.
Für dieses Layout brauchst du zwei Bilder, die du gestalten kannst. Für das erste, das Hauptbild, findest du nachfolgend ein fertiges Gerüst; das kannst du dir einfach auf dem Computer speichern und bearbeiten.
Als nächstes benötigst du außerdem einen sich wiederholenden Hintergrund, um den Rest der Seite zu füllen. Auch dafür gibt es hier ein fertiges Gerüst, aber du kannst ebenso einen schmalen Streifen unten von deinem Hauptbild abschneiden und als eigene Datei speichern.
Nun lade deine Bilder hoch, z.B. bei tinypic (punkt com). Du brauchst nichts einfügen nach "Tags". Drück auf "Upload now" und warte bis sich die nächste Seite geöffnet hat. Danach kopiere den Link nach „Direct Link for Layouts".
Nun musst du die Links für deine Bilder nur noch in den Code einfügen, hier den für das große Bild:
Und hier für das sich wiederholende Hintergrundbild:
Jetzt bist du fertig! Wenn du möchtest, kannst du die Textfarben und die Scrollbar-Farben ändern. Eine Farbtabelle kannst du hier finden. Gratulation zu deinem neuen Gilden-Layout!
Tutorials ------ Overlay Gilden-Layout
Anmerkung: Durch dieses Tutorial könntest du suspendiert werden, da die Gilden-Navigation nicht sichtbar ist. Nutzung auf eigene Gefahr!
In diesem Tutorial werde ich erklären, wie du ein Overlay-Gilden-Layout erstellen kannst. Das ist ein Layout, welches die normale Gilden-Navigation verdeckt, stattdessen hast du einen Beitreten- und einen Chat-Link. Falls du dieses Tutorial benutzen willst, denk bitte daran, dass eine Navigation mit den normalen Neopets-Links auf deinem Layout zu sehen sein muss.
Was du brauchst: Gimp/Photoshop/Paint oder irgendein anderes Bildbearbeitungsprogramm, Bilder und ein paar HTML-Kenntnisse.
1
Speichere das Bild unter diesem Text auf deinem Computer und öffne es mit einem Bildbearbeitungsprogramm. Um das ganze Bild zu sehen, ziehe es in die Adressleiste oder klicke mit der rechten Maustaste und dann auf „Grafik anzeigen".
Bearbeite das Bild und füge einige Textfelder ein. Vergiss nicht den Beitreten- und den Chat-Button irgendwo zu integrieren! Falls die Gilde eine Petpage hat, kannst du diese ebenfalls hinzufügen. Nun sollte das Bild in etwa so aussehen:
3
Nun geht es ans Coden des Layouts. Kopiere den Code aus der Box unten und füge ihn bei der Gildenbeschreibung ein.
Wie du siehst, hast du jetzt erst einmal das Layout des Tutorials in deiner Gilde. Nun musst du es so ändern, dass deine eigenen Bilder verwendet werden.
Dazu musst du sie hochladen, z.B. bei tinypic (punkt com). Du brauchst nichts einfügen nach "Tags". Drück auf "Upload now" und warte bis sich die nächste Seite geöffnet hat. Danach kopiere den Link nach „Direct Link for Layouts".
Unten siehst du den Teil vom Code, wo du den Bildlink durch deinen eigenen vom Hauptbild ersetzen musst:
Als nächstes musst du nun dem Rest deines Layouts noch einen schönen Hintergrund hinzufügen; entweder suchst du eine passende Farbe aus oder du machst z.B. einen gestreiften Hintergrund.
Die Bildadresse des Hintergrundes fügst du dann hier ein, wenn du das Bild hochgeladen hast:
Jetzt kannst du anfangen, die Textfelder zu positionieren. Im Code siehst du diesen Teil:
Das ist das Textfeld. Du musst es nur noch an der richtigen Stelle positionieren. Bewegen kannst du das Textfeld, indem du die Zahlen hinter „top" und „left" änderst; „top" ist der Abstand zwischen dem Textfeld und dem oberen Ende der Seite; „left" ist der Abstand zwischen der linken Seite des Textfeldes und dem linken Ende der Seite. Diese Zahlen kannst du ganz leicht berechnen, wenn du z.B. die Seitenlineale in Photoshop benutzt.
Wenn du nicht Photoshop oder ein anderes Programm mit dieser Möglichkeit benutzt, kannst du einfach ein paar Zahlen ausprobieren. Das dauert zwar eine Weile, aber schließlich wirst du die Position deines Textfeldes gefunden haben.
Beitreten & Chat – Methode 1 (Du brauchst Gimp, wenn du dieses Programm nicht hast, probier Methode 2)
Jetzt brauchst du die Bilder für den Beitreten- und den Chat-Link. Das machen wir mit einer Image Maps – so etwas kann man ganz leicht mit Gimp erstellen. Rechtsklicke auf das Bild und wähle Filter – Web – Imagemap, wie du es im Bild unten siehst.
Wenn du das gemacht hast, erscheint dieses Fenster. Mit der Maus kannst du nun die Teile des Bildes auswählen, die du verlinken möchtest. Welche Auswahlform du haben möchtest, kannst du mit den Optionen auswählen, die du im unteren Bild siehst (ebenfalls mit Rechtsklick).
Wenn du die Auswahl getroffen hast, erscheint dieses Fenster. Das einzige, was du hier tun musst, ist den Link einfügen, mehr nicht.
Wenn du das gemacht hast, klickst du auf „Ansicht" und dann „Quelle".
Daraufhin erscheint ein weiteres Fenster und mit dem Teil, der im Screenshot blau ist, musst du diesen ersetzen:
Nun bist du fertig mit dem Coden der Beitreten- und Chat-Links.
Beitreten & Chat - Methode 2 (ohne Gimp)
Du kannst die beiden Links auch ohne Gimp einbauen. Diesmal benutzen wir keine Imagemaps; auf diese Art kann es länger dauern, aber es ist eine gute Möglichkeit, wenn du Gimp nicht verwenden willst oder kannst.
Du hast die Boxen mit „Beitreten" und „Chat" in deinem Layout; schneide sie aus und speichere sie jeweils als eigene Dateien auf deinem Computer, etwa so:
Diese musst du nun jeweils als Divs in deinem Layout unterbringen. Die Zahlen, welche du für die Positionierung brauchst, kannst du selbst herausfinden, das ist weiter oben erklärt (im Abschnitt mit dem Textfeld).
Jetzt bist du fertig mit dem Positionieren von Beitreten und Chat.
Neopets Regel: Du musst die Navigation von Neopets in deiner Gilde haben! Bitte vergiss das nicht. Andere müssen in der Lage sein, die Gildenseite wieder zu verlassen. Hier ist eine Liste mit den Links, für die faulen Leute. ;D
Jetzt bist du fertig. Ich hoffe, du konntest ein tolles Layout für deine Gilde erstellen!
Tutorials ------ Petlookup
Um ein Petlookup zu machen brauchst du 2 Dinge: ein Grafikprogram und Notepad. Das ist ein Beispiel für ein Lookup, das mit diesem Tutorial erstellt wurde:
Öffne Notepad und und kopiere den nachfolgenden Code rein. Da die Box von der Neopets-Beschreibung sehr klein ist, denke ich es wäre hilfreich das zu öffnen.
Dieses Lookup hat einen header, footer, inner background, outer background und eine textbox mit einer Navigation.
Das erste was wir machen werden, ist der Header. Nachfolgend ist ein Template für den Header. Speicher ihn auf deinem PC und bearbeite ihn mit deinem Grafikprogramm.
Wenn du das getan hast, kannst du ihn hochladen zB. bei tinypic (dot com). Nach "Tags" brauchst du nichts mehr eintragen. Dann drück auf "Upload now" und warte bis die neue Seite geladen hat. Kopiere den Link der hinter "Direct Link for Layouts" steht.
Und füge den Link nun hier ein:
Nachdem Header, werden wir nun den Footer ändern. Das funktioniert auf dieselbe Art und Weise; Bearbeite das nachfolgende Template mit deinem Grafikprogramm.
Dann lade deinen Footer hoch und ersetze die URl hier:
Und nun werden wir den inneren Hintergrung ändern, auch "main" background genannt. Das ist der Hintergrund für den mittleren Teil des Layouts. Mein Hintergrund ist hell blau. Gib ihm eine Farbe, die zu deinem Lookup passt. Eine Farbtabelle findest du hier. Die Farbe änderst du hier:
So, wir sind fertig mit dem innerem Hintergrund, dem äusseren Hintergrund, dem Header und dem Footer. Jetzt müsses wir die Statistik-Farben ändern. Das sieht schwieriger aus, als es ist. Du brauchst dazu die Farbtabelle.
Als ersten ändern wir den Hintergrund hinter den Statistiken (das ist der Hintergrund aller Kästchen). In meinem Beispiel ist er weiss. Denke daran dunkle Buchstaben auf hellem Hintergrund und helle Buchstaben auf dunklem Hintergrund zu verwenden, damit es lesbar ist. Den Hintergrund änderst du hier:
Jetzt können wir die Textfarbe ändern. Das kannst du hier tun (ändere beide Farbcodes, die du hier sehen kannst, du kannst ihnen zwei verschiedene Farben geben oder zweimal die gleiche Farbe verwenden).
Als nächstes kannst du die Farben der Überschriften ändern. Du kannst die Hintergrund- und die Schriftfarbe ändern und zwar hier:
Dannach kannst du die Namen der Boxen ändern. Hier:
Nun sind wir fast fertig! Du kannst noch die Farben der Navigation ändern. Das könnte allerdings etwas verwirrend sein. Kannst du die nachfolgenden Codes in deinem Code finden? Das ist der Teil in dem du die Navigation ändern kannst.
Die Stelle wo du #nav a, #nav a:visited siehst, ist die Navigation im Normalzustand. Die Stelle mit #nav a:hover ist für die Farbe wenn du mit der Maus über die Navigation fährst. In der oberen Zeile must du die Hintergrundfarbe und die Farbe (textcolor) ändern . In der zweiten Zeile musst du auch die Hintergrundfarbe und die Farbe ändern. Entferne auf keinen Fall display: block!!
Jetzt hast du es geschafft. Füge den Code in die Beschreibung ein und schaue nach ob du alles richtig gemacht hast. Wenn dir die Farben, die du ausgewählt hast nicht gefallen, kannst du sie nochmal ändern. Gratulation zu deinem neuen Petlookup!
Tutorials ------ Petpagelayout
Du möchtest lernen wie man ein Petpagelayout macht? Es ist nicht so schwer. In diesem Turorial wirst du lernen, wie du die nachfolgenden Layouts machst. Das zweite hat by _shutupanddrive_96 gemacht. Um die Bilder komplett zu sehen, rechts-klick und klick auf "Grafik anzeigen".
Für dieses Layout brauchst du keine grossen Kenntnisse über HTML und CSS. Die einzigen Dinge, die du brauchst, sind ein Grafikprogramm und eine leere Petpage.
Geh hier hin und klick auf das Pet, dessen Petpage du bearbeiten möchtest. Kopiere den nachfolgenden Code und füge ihn in die weisse Box auf der Seite.
ACHTUNG Viele Leute entfernen den id="plaatje" Teil aus dem Code. Wenn du das entfernst, wird dein Hauptbild nicht an der richtigen Stelle angezeigt.
Nachfolgend kannst du sehen, wo du den Link für den Hintergrund einfügen musst.
Jetzt sieht deine Petpage schon richtig hübsch aus, oder?. Um sie noch schöner zu machen kannst du die scrollbar-farben und die Hintergrundfarbe aendern, da der sich wiederholende Hintergrund nicht die komplette Seite bedeckt. Die Hintergrundfarbe aenderst du hier (ersetze #ffffff durch deine eigene Farbe, zB. aus der Farbtabelle):
Eine Farbtabelle kannst du hier finden.
Ich würde sagen das wars! Gratulation zu deinem neuen Petpagelayout.
Tutorials ------ NewsBerichte
Auf Grafikseiten kannst du manchmal Stellen sehen, in die Leute Ihre Neuigkeiten reinschreiben. So etwas kannst du mit diesem Code ganz einfach selber machen. Bitte vergiss nicht zu mir zu verlinken wenn du diesen Code benutzt.
| News |
|
| Posted by: Inge | |
| Date: November 1st, 2007 |
|
text text text text text text text text |
Codinghilfe ------ Codes
Hintergrundfarbe für den äußeren Hintergrund des Petlookups:
Den inneren Hintergrund des Petlookups entfernen (auch main background genannt):
Hintergrundfarbe für den inneren Hintergrund des Petlookups:
Hintergrundbild für den inneren Hintergrund des Petlookups:
Farben der Scrollbar bearbeiten:
Text unterstreichen:
Fett geschriebener Text:
Schräger Text:
Druchgesrti Durchgestrichener Text:
Farbiger Text:
Großer Text (andere Zahl = andere Größe):
Text mit Hintergrundfarbe:
Durchlaufender Text
Verlinkter Text:
Eine Textbox (das Leerzeichen im Code entfernen, sonst funktioniert es nicht):
Breite der Textbox ändern (das Leerzeichen im Code entfernen, sonst funktioniert es nicht):
Höhe der Textbox ändern (das Leerzeichen im Code entfernen, sonst funktioniert es nicht):
Codinghilfe ------ Div's
Divs zu benutzen ist eine gute Möglichkeit, um Layouts zu gestalten. Das Layout auf dieser Petpage ist zum Beispiel mit Divs gemacht. Divs sind ein Teil von CSS. Mit Divs kannst du Text oder Bilder positionieren und deine Seite "stylen". Divs kann man auf zwei verschiedene Weisen benutzen. Nur eine kleine Warnung: Falls dies das erste Mal ist, dass du einen Code machst, kann das hier schwierig werden.
Methode 1. (die unorganisierte Art, Divs zu benutzen)
Ich empfehle diese Methode nicht, aber der Vollständigkeit halber erkläre ich, wie man sie benutzt.
Du kannst sie benutzen, um Blogs zu machen. Wie gesagt kannst du Divs benutzen, um deinen Text zu positionieren.
Ansonsten funktioniert das genauso wie Methode 1. Der einzige Unterschied ist, dass du ein # oder eine Punkt vor den Namen deiner Divs siehst. Ein # zeigt, dass dein Div eine Div ID ist. Ein Punkt vorher zeigt dir, dass das Div eine Klasse ist. Du kannst die Divs benennen, wie immer du willst; stell nur sicher, dass das Div am Anfang des Codes genauso heißt wie das, wo schließlich dein Text reinkommt.
Anmerkung: Die Scrollbar bekommst du, wie schon erwähnt, nur, wenn du "overflow:auto;" in den Code einfügst (wie beim zweiten Beispiel)! Ansonsten hast du ein div, das "endlos" nach unten weitergeht, also im Prinzip einfach eine definierte Position für deinen Text. Ich erwähne das, weil ich darauf aufmerksam gemacht wurde, dass mit dem Code keine Scrollbar auftaucht.
Das gilt auch für Methode 2!
Codinghilfe ------ Tabellen
Was sind Tabellen eigentlich? Das kann ich am besten mit einem kleinen Beispiel erklären, das hier ist eine Tabelle:
| hey | hey |
| hey | hey |
Jetzt fragst du dich wahrscheinlich, wie man das macht; es ist gar nicht so kompliziert, wie es vielleicht aussieht. Du brauchst dafür drei verschiedene Tags, nämlich Folgende:
Gut, aber was fängst du damit an, wenn du nicht weißt, was es bedeutet?
Table Dieses Tag brauchst du, um allgemein eine Tabelle zu benutzen. Es steht nur am Anfang und am Ende. Es hält deine Tabelle zusammen.
Table Row (tr) Dieses Tag sorgt dafür, dass du eine Spalte mit Zellen machen kannst. Hier ein Beispiel:
| Reihe 1 |
| Reihe 2 |
Table Data (td) Mit diesem Tag kannst du die Zellen nebeneinander platzieren. Zwischen diese Tags kommt dein Text! Der darf nirgendwo anders stehen, sonst funktioniert es nicht.
| Zelle 1 | Zelle 2 |
Das sollte nun jeder verstanden haben, allerdings ist das natürlich noch relativ einfach. Jetzt kannst du das alles kombinieren, dadurch bekommst du mehrere Reihen mit mehreren Zellen, wie im obersten Beispiel.
Einen Rand machst du mit dem Tag "border", das gehört hinter das "table"-Tag. Das stand auch bei meinem Beispiel, damit es deutlicher wird. Du kannst auch die Farben deines Rahmens verändern.
| Reihe 1 |
| Reihe 2 |
Dann gibt es noch das Tag "rowspan", damit kannst du die Reihen zusammenfügen.
| hey | hey |
| hey |
Und "colspan", damit kannst du die Spalten zusammenfügen.
| hey | ||
| hey | hey | hey |
Codinghilfe ------ Verborgener Text
In diesem Tutorial werde ich dir erklären, wie du Text und Bilder dazu bringen kannst, dass sie sich ändern, wenn man draufklickt. Hier ist ein Beispiel dafür, was ich meine:
Verändere den Text zurück
Ich fange an mit dem Teil des Codes, der zwischen die Styletags gehört. Erst codest du ein div, das du dort positionierst, wo du es haben möchtest. Dort wird dann der ganze Text zu sehen sein.
Danach setzt du noch zwei div classes in den Code.
Die div class ".hidden" macht den Text in der Box unsichtbar. Die div class ".visible" sorgt dafür, dass der Text innerhalb dieser div class sichtbar ist.
Jetzt kannst du auch den Teil außerhalb der Styletags verändern.
Wie du siehst, brauchst du ein div, das alles umfasst, definiert mit "div id". Danach brauchst du die div class, welche den unsichtbaren Text definiert. Zwischen den beiden divs steht die sichtbare div class. Du kannst so viele sichtbare div classes machen, wie du willst.
Jetzt brauchst du noch eine Navigation für die versteckten Teile deiner Seite. Zwischen den Styletags fügst du ein neues div hinzu, mit dem du die Navigation positionierst.
Wenn du damit fertig bist, brauchst du noch Links, die zu den nicht sichtbaren divs führen. Um das zu tun, benutzt du Anker. Setze alle Anker präzise über die jeweilige sichtbare div class und gib den einzelnen Ankern verschiedene Namen, weil sie sonst nicht funktionieren. Je mehr sichtbare div classes du hast, desto mehr Namen brauchst du, in unserem Fall würdest du beispielsweise mit d, e, f etc. weiter machen.
Für die Navigation benutzt du den folgeneden Code:
Wenn du mehr div classes hast, kannst du diese Codes kopieren und einfach jeweils das a, b und c zu d, e, f etc. machen.
Jetzt bist du fertig! Alles zusammen in einem Code sollte nun etwa so aussehen:
Wenn du dieses Coding benutzt, kannst du viele verschiedene Dinge auf deine Petpage setzen. So brauchst du weniger Petpages, wenn du mehrere Themen hast!
Übersicht ------ Farbtabelle
| #FFFFFF | #FFFFCC | #FFFF99 | #FFFF66 | #FFFF33 |
| #FFE4A3 | #FDD77D | #FDCB53 | #FFCC33 | #FFC412 |
| #FFE4C2 | #FECC8A | #FFB759 | #FFA32B | #FF9000 |
| #FED1C6 | #FFAA96 | #FD8A5C | #FF4B21 | #FF4800 |
| #FFC2DF | #FF83BD | #FF4A9F | #FF0078 | #BE0059 |
| #FFBAF3 | #FF82E9 | #FF49DF | #FF00D2 | #B70097 |
| #F5A8FE | #EE63FF | #E823FF | #E400FF | #9B00AD |
| #E59EFF | #D461FF | #C11AFF | #A200DE | #74009F |
| #C994FF | #A54EFF | #8C1CFF | #7800F2 | #6200C7 |
| #C7AFFF | #9C70FF | #6F30FF | #4500E1 | #3701B2 |
| #B1BAFF | #7989FF | #384FFF | #001EFF | #0019D2 |
| #B9D8FF | #76B3FF | #3690FF | #0072FF | #0048A0 |
| #B6E9FC | #70D8FF | #30C7FF | #00BAFF | #0098D0 |
| #D0F7FC | #88F2FF | #81F2FF | #37E7FC | #00E4FF |
| #ABFFEC | #6EFFDF | #00FFC6 | #01C79B | #009372 |
| #A6FFCE | #60FFA7 | #00FF72 | #00C95A | #019F47 |
| #99FFA7 | #58FF70 | #00FF24 | #00C41C | #008513 |
| #C0FFAF | #87FF67 | #36FF00 | #27B900 | #176E00 |
| #CCFF99 | #CCFF66 | #CCFF33 | #99CC00 | #366E00 |
| #C2DBB6 | #7EAB69 | #43732B | #295A11 | #164200 |
| #E8D6B3 | #CFAF72 | #B37600 | #744C00 | #462E00 |
| #D8A296 | #A15C4C | #682A1C | #732C1C | #4B0E00 |
| #CFCBE3 | #8F87B2 | #564890 | #271869 | #0C003F |
| #CCCCCC | #999999 | #666666 | #333333 | #000000 |
.