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
23. SeptemberCoding-Probleme endlich behoben. xD Alle Codes sollten jetzt dem neuen Coding von Neo angepasst sein, falls nicht, bitte NM an mich! :)
16. März
Gilden-Layouts fertig übersetzt =)
09.November
Der Hintergrund funktioniert wieder. Hatte ich doch glatt den Footer vergessen ^^
Ihr seht also, Missgeschicke sind niemals ausgeschlossen. 08.November
JAAAA Lange nichts von mir gehört was? Ich habe endlich das Petlooki Tutorial übersetzt und die PP ein bisschen auf den neuesten Stand gebracht. Leider scheint der Tabellenhintergrund nicht mehr zu funktionieren. Ich hoffe das hab ich bald behoben. Bitte schreibt mir weiterhin Neomails wenn ihr Rechtschreibfehler oder ähnliches endeckt. Danke und viel Spaß!
25. Julie
Ich habe gefundene Fehler ausgebessert und die Farbtabelle endlich hinzugefügt. *das vergessen hatte* ^^'
Ausserdem bin ich gerade mit dem Petpage Tutorial fertig geworden.
24. Julie
User Layout Style 1 und 2 sind heute fertig geworden.
23. Julie
Geschäfts- und Gallerie- Layout Tutorial sind online_
Tutorials ------ Geschäfts/Galerie Layout
In diesem Tutorial werde ich dir erklären, wie du ein Geschäfts- oder Galerielayout machen kannst. Wir werden einen Code benutzen, der in beiden funktioniert. In deinem Geschaeft und in deiner Galerie. 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 Geschäft (oder eine Galerie). Klick hier um dein Geschäft zu bearbeiten. Wenn du noch keinen hast, kannst du einen erstellen.
Kopiere den Code unter diesem Text und füge ihn in das weisse Kästchen für die Geschäfts-Beschreibung ein.
Nachdem du Geschäft aktualisieren gedrückt hast, geh zum Schaufenster, du siehst dein Geschäftt ist jetzt komplett weiss. Lass uns also nun etwas Farbe ins Spiel bringen. Das nachfolgende Bild wird links oben in deinem Geschäft 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:
ACHTUNG: Viele Leute entfernen diese id="dontremovethis" Stelle aus dem Code. Wenn du das entfernst, wird dein Hauptbild nicht an der richtigen Stelle sein. Also entferne das nicht.
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 Geschäftslayout!
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 ------ 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:
Im ersten Teil fügst du die Bildadresse für deinen sich wiederholenden Hintergrund ein, im zweiten den für das Hauptbild. 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 inerrem Hintergrund, dem äusseren Hintergrund, dem Header und dem Footer now. 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.
Als naechstes bearbeite dein Hauptbild, so wie du es haen möchtest. Nachfolgend kannst du das Template sehen. Speicher es auf deinem Computer und bearbeite es. Um das komplette Bild zu sehen, rechts-klick auf das Bild und dann auf "Grafik anzeigen"
Wenn du fertig bist, können wir mit dem sich wiederholenden Hintergrund anfangen. Diesen erstellst du entweder, indem du einen Streifen vom unteren Teil deines Hauptbildes kopierst und als extra Bild speicherst, oder du nutzt dazu das folgende Template und bearbeitest es so, dass es zu deinem Hauptbild passt.
Fertig? Dann können wir jetzt das Layout coden. Als erstes musst du nun deine Bilder hochladen, zB. bei tinypic (punkt com). Du brauchst nichts einzufügen nach "Tags". Dann drück auf "Upload now" und warte bis die neue Seite geladen ist. Nun kopierst du den Link hinter 'Direct Link for Layouts'.
Füge die URL/Bildadresse für dein Hauptbild hier im Code ein:
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:
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.
Das sieht ziemlich merkwürdig aus, wenn du es zum ersten Mal siehst. Es ist auch verwirrend, weil du eine Menge Text und eine Menge Divs hast, du siehst nicht, wo deine neuen Divs anfangen.
Wenn du jedoch eine Seite besuchst, wo dieses Coding verwendet wird, sieht es genauso nett aus wie jede Seite, wo Methode 2 verwendet wird. Jetzt werde ich dir etwas über die Wörter im Code erzählen.
Im Beispielcode siehst du die Worte "position:absolute", was sicher stellt, dass dein Div absolut positioniert wird. Das bedeutet, dein Computer kalkuliert den Abstand zwischen der linken oberen Ecke des Bildschirms und dem Div, also wird es an der richtigen Stelle sein. In deinem Code musst du ebenso "left" und "top" einfügen. Diese beiden Wörter (mit der jeweiligen Pixelzahl danach) stellen sicher, dass das Div genau dort sein wird, wo du es haben willst. "Left" ist die Zahl der Pixel, die dein Div von der linken Seite entfernt sein soll, "top" ist die Zahl der Pixel, welche das Div von der oberen Seite des Bildschirms weg sein soll. Herauszufinden, welche Abstände dein Div haben muss, ist nicht sehr schwierig; wenn du Paint hast, kannst du eine Nummer unten auf dem Bildschirm sehen, die sich verändert, wenn du die Maus bewegst. Die erste Nummer ist dabei der Abstand nach links, die zweite Nummer ist der Abstand nach oben.
Eine Scrollbar bekommst du, wenn du "overflow:auto" (und "height:##px" für die Höhe des divs) in deinem Code unterbringst. Vergiss nicht ; (Strichpunkt) zwischen den beiden Befehlen, sonst wird es nicht funktionieren.
Methode 2. (die beste Art, Divs zu benutzen)
Der Unterschied zwischen Methode 1 und 2 ist, dass diese Methode sehr viel einfacher zu benutzen ist, weil jegliche Style-Codes sich am Anfang des Codes befinden. Das wird dir eine Menge Zeit sparen, falls du einmal im Code etwas ändern möchtest. Hier ist ein Beispiel:
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:
Und das hier sind die nötigen Schlusstags:
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 |
.