Arrr, hallo und willkommen auf meiner Petpage! Mein Name is' Flauschkopf und isch möcht' dir allet beibringen wat du wissen musst, um disch in der Welt des HTML zurescht zu finden. Isch bin ein wascheschter Pirat und ich werd disch stets über diese Page geleiten. Und mach disch ja nisch über mich lustig, wa? Sonst kannst misch kennenlerne! Nuja war auch immer, Gaara meinte sie möcht' an dieser Stelle übernehmen. Solltest du dich mit HTML noch überhaupt nicht auskennen, dann bist du hier auf genau der richtigen Seite gelandet. Aber auch als Nachschlagewerk kann ich dir sicher weiter helfen. Ich versuche dir alles Schritt für Schritt zu erklären und ich bin mir sicher, dass es dir großen Spaß machen wird deine Petpage zu gestalten. Notfalls habe ich immernoch einige Vorlagen für dich bereit. Auch habe ich einige Anleitungen wie man Itempetpets, Geschäftsschilder, ein Pet- oder ein Userlookup gestaltet. Auch zu der Neo-Unterschrift wirst du einen Unterpunkt finden. Sprich: Du findest hier alles zum Thema Gestaltung in Neopia. Lange Rede, kurzer Sinn. Mein Partner, Nipferdius und ich wünschen dir viel Spaß auf unserer Seite. Erste Schritte Der Anfang Grafikprogramme Bilderupload Kleine Tipps Anderes Neo-Unterschrift Regeln Über Flauschkopf Link back Awards Kontakt Danke Nützliche Links Allgemeines Schrift Links Bilder Hintergrund Tabellen Ebenen Anker Toybox/DIV's Scrollbars/DIV's Textareas Cursor Farbtabelle Anleitungen Userlookupanleitung Petlookupanleitung Petpagevorlagen Geschäftsschilder Itempetpets Der Anfang Bei der Erstellung einer Petpage gibt es einige Dinge über die du dir schon vorher Gedanken machen musst. Es fängt damit an worüber du überhaupt eine Petpage machen möchtest und endet mit Codes, Text und Grafiken. Wenn du eine bekannte Petpage führen willst, musst du ein Thema finden über das es noch nicht viel im deutschen Rahmen gibt. Bist du besonders gut in einem Spiel, kannst du anderen Usern dein Wissen auf einer Petpage mitteilen und eine Spielhilfe starten. Diese Seiten sind nicht nur besonders beliebt, sondern auch hoch angesehen. Bist du eher der kreative Typ, dann denke dir doch eine Geschichte für dein Pet aus und gestalte ihm eine eigene Charakterpage. Solltest du einiges an Zeit haben, könntest du auch einige Items einer bestimmten Sorte auflisten wie z.B. Gruselmöbel, Plüschies, Petpets oder was dir sonst gefällt. Hier musst du beachten, dass die Seite immer aktuell sein sollte. Von Grafikpages und Linklisten rate ich dir für den Anfang ab. Davon gibt es Unzählige und du musst besonders gut sein, um aus dieser Masse hervorzustechen. So, nun hast du dich hoffentlich entschieden über was du deine Petpage machen möchtest und wir kommen zum nächsten Punkt, nämlich den Aufbau deiner Petpage. Du musst immer beachten, dass es Leute mit einem langsamen Pc, einer langsamen Internetverbindung oder eines kleinen Bildschirmes gibt und darauf musst du eingehen. Schliesslich sollte Jeder ungehindert deine Page nutzen können. Beachte also, dass du deine Page nicht mit allzu großen Grafiken überlädst. Wenn du eine Tabelle erstellst, pass auf, dass sie nicht zu groß wird, denn sonst könnte man leicht die Übersicht verlieren. Du solltest bei deinem Layout Farben nutzen, die angenehm für das Auge sind. Gerade bei einer Geschichte oder einer Seite mit viel Text ist dies zu beachten. Nimm keinen allzu irritierenden Hintergrund, außer, man kann ihn nicht zu sehr sehen. Pass außerdem auf, dass deine Schriftgröße weder zu groß noch zu klein ist und du solltest dir eine Schriftart aussuchen, die klar leserlich ist. Nun weißt du was du beachten solltest, doch wie baust du deine Page auf? Deiner Fantasie sind in diesem Punkt keine Grenzen gesetzt. Anker sind zum Beispiel eine gute Möglichkeit, um die Übersicht auf deiner Page zu halten. Doch mehr hierzu unter Tipps. Kommen wir generell zu den Grafiken. Du solltest schon bei der Auswahl deines Hosters sorgfältig auswählen. Ein Hoster ermöglicht dir Bilder von deinem Pc ins Internet hoch zu laden. Du erhälst eine Adresse, die du deinen Freunden schicken oder sie eben in jene Html-Codes einsetzen kannst. Nimm also am Besten einen Hoster, der bekannt ist oder wenige Ausfälle hat. So sind deine Bilder so gut wie immer erreichbar. Links darf ich hier nicht posten, doch ich empfehle die Namen Photobucket und Imageshack, welche Beide kostenlos sind und gut funktionieren. Wie weiter oben schon erwähnt, sollten deine Bilder nicht zu groß sein. Zudem empfehle ich, dass du deine Bilder als .gif oder .jpg abspeicherst. Oftmals wird .png benutzt und das sieht auch toll aus, allerdings verlängert es die Ladezeit und wird an manchen Computern überhaupt nicht angezeigt! Ich benutze stets .gif und bin damit sehr zufrieden, denn man sieht den Datenverlust kaum, ganz im Gegensatz zu .jpg. Zu guter Letzt, kann ich dir eigentlich nur raten sorgfältig auf deine Grammatik und Rechtschreibung zu achten und ansonsten wünsche ich dir hiermit viel Spaß beim Basteln deiner Petpage. Zurück nach oben Grafikprogramme Das ist ein wirklich gängiges Thema und immer wieder ist es sehr umstritten welche Programme nun wirklich die Besten sind. Oftmals ist von PhotoShop die Sprache, allerdings ist dieses Programm sehr teuer und für Privatpersonen bzw. für einige Petpagegrafiken kaum bis gar nicht finanzierbar. Es gibt eine 30-Tage Testversion und unter Nützliche Links habe ich eine Seite mit Anleitungen zu diesem Programm verlinkt. Gimp ist ein Gratis-Programm, das du dir im Internet downloaden kannst. Es hat viele Funktionen die auch PhotoShop besitzt wie Ebenen und etliche Pinsel-Funktionen. Daher kann ich dir dieses Programm ohne schlechtes Gewissen ans Herz legen. Ich selbst benutze PhotoImpact und bin damit sehr zufrieden. Mit einigen Tricks kannst du wirklich tolle Grafiken erstellen und ältere Versionen werden dir für wenig Geld regelrecht nachgeworfen. Zudem ist ein Animationsprogram bei der Installation mit dabei. Selbst Paint ist für einige Arbeiten sehr gut geeignet. Zum Beispiel Adoptables. Das sind kleine Grafiken, die du zur Verschönerung deiner Petpage, deines Lookups oder deines Geschäftes nutzen kannst. Hier ein kleines Beispiel: Für diese Art von Arbeit ist Paint wirklich am Besten geeignet, doch auch zeichnen kannst du damit wunderbar. Schau dich im Internet einfach mal nach einigen Anleitungen (oder Tutorials) um. Zurück nach oben Bilderupload Die Adressen müsst ihr selbst herausfinden, allerdings wurde ich schon so oft angesprochen wie das Ganze funktioniert, dass ich euch hier eine kleine Anleitung gebe. Imageshack Klicke auf 'Durchsuchen' und wähle die Bilddatei aus, die du später benutzen möchtest. Anschließend klickst du auf 'host it!'. Wie etwas weiter unten steht, sind nur Dateien erlaubt, die mit .jpg, .jpeg, .png, .gif, .bmp, .tif, .tiff oder .swf enden. Zudem dürfen sie eine Größe von 1.53 Megabytes (MB) nicht überschreiten. Nun hast du also auf 'host it!' geklickt und findest wenig später jede Menge Adressen vor. Du benötigst allerdings nur die, die neben 'Direct link to image' steht. Du kopierst die URL, setzt sie in deinen gewünschten Code ein und bist fertig. Photobucket Hier musst du dich zuerst einmal anmelden. Das ist nicht weiter schwer und wirst du sowieso ohne meine Hilfe hinbekommen. Anschließend loggst du dich bei deinem Benutzerkonto ein und kannst sofort anfangen deine Bilder hoch zu laden. Klicke zuerst auf 'Choose files'. Du hast hier den Vorteil, dass du gleich mehrere Bilder hochladen kannst. Halte dazu einfach Strg gedrückt und wähle alle Dateien aus, die du später brauchst. Erledigt? Prima! Drücke normal auf 'Öffnen' und schon werden deine Bilder hochgeladen. Du bekommst eine kleine Voransicht. Geh auf 'save and continue' und schon bist du zurück in deiner Gallerie. Einen Namen und eine Beschreibung kannst du dir zwar auch noch ausdenken, ist aber eigentlich unnötig. Wieder sind unter deinem Bild mehrere Adressen und Codes angegeben, allerdings nimmst du wieder den, der neber 'Direct Link' steht und nicht den 'Html Code' ;) Kopiere die Adresse, setze sie in deinen beliebigen Code ein und du bist fertig. Sicher gibt es noch unzählige, andere Hoster, allerdings sind diese Beiden bekannt, werden auf den Petpages, Lookups usw ohne Probleme angenommen und haben wenige bis gar keine Ausfälle. Zurück nach oben Kleine Tipps Schrift Als normale Schriftgröße wähle zwischen 1-2 oder zwischen 9-12px. Überschriften sollten größer, als deine normale Schriftgröße sein. Generell gilt: Dunkle Schrift auf hellem Grund und helle Schrift auf dunklem Grund. Empfohlene Schriftarten sind: Arial, Comic Sans MS oder Times New Roman. Textzentrierungen sehen bei wenig Text sehr ordentlich aus, kann bei mehr Text aber zu Verwirrungen führen. Gerade bei langem Text, sollten die Zeilen nicht zu lang sein, damit sich das Auge nicht zu sehr anstrengen muss. Profis empfehlen 50-60 Zeichen pro Zeile, allerdings sollte ein grober Richtwert 400px als Textbreite sein. Gliedere deine Inhalte. Gehört etwas nicht zusammen, so nutze Trennlinien und Ähnliches, um deine Petpage aufgeräumter wirken zu lassen. Links Sollten in einer anderen Farbe, als deine normale Schrift sein. Bilder Sollten im .jpg oder .gif Format sein, um Ladezeiten zu vermindern. Die Größe des Bildes sollte angemessen sein und nicht den Bildschirm sprengen. Hast du sehr viele Bilder oder gestaltest eine Grafikpage, so nutze Voransichten. Hintergrund Dein Hintergrund sollte nicht so stark gemustert oder grell sein, dass er vom Inhalt ablenken könnte. Tabellen Eine zentrierte Tabelle lässt deine Petpage stets ordentlich wirken. Gestaltest du deine Page gerne mit Item- oder Neopetsbildern so empfehle ich einen weißen Hintergrund. Man sieht keine weißen Ränder und es sieht gleich um einiges professioneller aus. Möchtest du nicht, dass man deine Tabelle als solche erkennt, so setzte border auf 0. Anker Anker dienen als perfekte Navigation. Du kannst sowohl Bilder, als auch Texte mit Ankern versehen. Du solltest Anker einbauen, die deine Besucher zurück zur Navigation führen. Beachte! Anker bestehen stets aus zwei Teilen. Einer definiert den Linknamen und der andere definiert wohin der Link 'springen' soll. Textarea Achte darauf deine Textareas stets zu schliessen. Zurück nach oben Neo-Unterschrift Im Gegensatz zum normalen Html werden die Befehle in eckigen Klammern umgeben. Möchtest du zum Beispiel deine Schriftart ändern, müsstest du folgendes eingeben: [font c=orange s=1]text[/font] c steht wie du siehst für die Farbe (hier kannst du auch Hex-Codes nutzen und um Platz zu sparen die Raute (#) weglassen) und s für die Schriftgröße. Deine Unterschrift muss jedoch immer das Wort neoHTML umschliessen. An dieser Stelle erscheint dann das, was du sagen möchtest. Möchtest du deine Unterschrift zentrieren benutzt du den Befehl center, bloss eben in Tags. Ebenso ist es mit Zeilenumbrüchen (br). Nun hast du zwischen deiner Unterschrift aber noch eine hässliche Trennlinie. Um diese zu entfernen öffne einfach am Ende deiner NeoHTML einen Tag und schliesse ihn am Anfang deiner Neo-Unterschrift. Du findest hier nun zwei Teile, die deine Unterschrift benötigen. Den ersten Teil kopierst du in den Bereich NeoHTML und den Anderen in den Bereich der Neosignatur. Teil I [font c=#427AFE s=2][center]Eigene Signatur erstellen?[/font][br][br][font c=#091046][b]neoHTML[/b][/center][/font][ Teil II ][font c=#427AFE s=2][center][br]Kein Problem![p]Mit der Petpage von Flauschkopf[/font][/center] Nach dem Speichern wird das Ganze dann so aussehen: Glückwunsch, du hast deine erste Signatur erfolgreich erstellt. Nun musst du einfach noch deine gewünschten Farben und deinen entsprechenden Text einfügen und du bist fertig. Zurück nach oben Schrift Fett <b>Text</b> Kursiv <i>Text</i> Unterstrichen <u>Text</u> Durchgestrichen <strike>Text</strike> Zentriert <center>Text</center> Textfarbe <font color="red">Text</font> Du kannst hierbei sowohl die englischen Farbnamen einsetzen, als auch gewisse Hex-Codes. Einige Codes findest du hier Schriftgröße <font size="1">Text</font> Die Schriftgrößen gehen hierbei von 1-7. Zeilenumbruch <br> Absatz <p> Horizontale Linie <hr> Schriftart, Größe und Farbe der kompletten Seite <style>td,p,body{color:pink;font:8pt arial}</style> Copyright anpassen <style type="text/css"> .sf { color:pink; font-family: verdana; font-size: small; font-weight: bold; } </style> Zurück nach oben Links Normaler Link <a href="URL">Text</a> Link öffnet sich in einem neuen Fenster <a href="URL" target="_blank">Text</a> Bildlink mit Rahmen <a href="URL"><img src="http://BildURL.jpg"></a> Bildlink ohne Rahmen <a href="URL"><img src="http://BildURL.jpg" border=0></a> Linkfarbe <style>a{color:pink}</style> Linkgröße und Schriftart <style>a{font:8pt arial;}</style> Andere Farbe, Schriftart und Größe <style>a{color:pink;font:8pt arial;text-decoration:none}</style> Zurück nach oben Bilder Einfügen <img src="http://BildURL.jpg"> Bild verlinken <a href="Ziel URL"><img src="http://BildURL.jpg" border=0></a> Bild mit genauer Position <img src="BildURL.jpg" width="200px" height="200px" style="position:absolute; top:500px; left:500px";> Height ist die Höhe des Bildes, width die Breite. Top ist der Abstand von oben, left der Abstand von Links. Zurück nach oben Hintergrund Hintergrundfarbe <body bgcolor="#FFFFFF"> Hintergrundbild <body background="http://BildURL.jpg"> Bild in die rechte, untere Ecke <style>body{background:url(URL DES BILDES) fixed no-repeat right bottom}</style> Um das Bild zu positionieren setze ein: Left=Links Right=Rechts Bottom=Unten Top=Oben Hintergrundfarbe mit Bild in der rechten, unteren Ecke <style type="text/css"> body { background:Farbe url(Bild Url) fixed no-repeat right bottom} </style> Hintergrundbild das sich beim scrollen nicht mitbewegt <style>body{background:url(URL DES BILDES) fixed}</style> Hintergrundbild welches nur einmal auf der Seite ist <style>body{background:url(URL DES BILDES) no-repeat}</style> Hintergrundbild welches nur einmal auf der Seite ist und sich nicht beim scrollen mitbewegt <style>body{background:url(URL DES BILDES) fixed; no-repeat}</style> Zurück nach oben Tabellen Normale Tabelle nebeneinander Text Text <table border=1 cellspacing=2 cellpadding=1> <tr> <td>Text</td> <td>Text</td></tr></table><br> Normale Tabelle untereinander Text Text <table border=1 cellspacing=2 cellpadding=1> <tr> <td>Text</td></tr> <tr> <td>Text</td></tr></table><br> Größe verändern Text Text width=Breite, height=Höhe <table border=1 cellspacing=2 cellpadding=1 width="100px" height="60px"> <tr> <td>Text</td> <td>Text</td></tr></table> Randfarbe (Border) ändern Nur mit Internet Explorer wirklich erkennbar Text Text <table border=1 bordercolor=purple cellspacing=2 cellpadding=1> <tr> <td>Text</td> <td>Text</td></tr></table><br> Hintergrundfarbe ändern Text Text <table border=1 cellspacing=2 cellpadding=1 bgcolor=#FEC7FD> <tr> <td>Text</td> <td>Text</td></tr></table> Hintergrundbild ändern Text Text <table border=1 cellspacing=2 cellpadding=1 background="http://BildURL.jpg"> <tr> <td>Text</td> <td>Text</td></tr></table> Randfarbe, Größe und Hintergrundfarbe ändern Text Text <table border=1 bordercolor=purple cellspacing=2 cellpadding=1 width="100px" height="60px" bgcolor=#FEC7FD> <tr> <td>Text</td> <td>Text</td></tr></table> Rand ändern Text Text <table style="border-width:2px; border-color:darkcyan; border-style:dashed;" cellspacing=2 cellpadding=1 height="60px" width="100px" bgcolor=white> <tr> <td style="border-width:2px; border-color:purple; border-style:dotted;">Text</td> <td style="border-width:2px; border-color:purple; border-style:dotted;">Text</td></tr></table> Hierbei musst du zuerst die Randbreite angeben (border-width) und anschliessend die Farbe. Dann die Art des Randes, wobei es drei verschiedene Grundarten gibt. Solid ist eine durchgezogene Linie, dotted eine Gepunktete und dashed eine Gestrichelte. Dasselbe musst du auch bei jeder einzelnen Zelle angeben. In dem Beispiel hat die Außenlinie eine gestrichelte Linie und die einzelnen Zellen eine Gepunktete. Zurück nach oben Ebenen Hier wird noch gearbeitet! Zurück nach oben Anker Anker sind dazu da um Links zu bilden, die an eine bestimmte Stelle der Page springen. So wie oben in meinem Menü, du klickst das Thema 'Schrift' an und der Link springt an die richtige Stelle. Das alles ist gar nicht so schwer wie es aussieht. Zuerst musst du dir überlegen welche Themen du hast und wie sie heissen. Benennen kannst du sie im Prinzip wie du willst. Nehmen wir an du hast auf deiner Page zwei Themen. Einmal ein 'über mich' und einem 'über meine Pets'. Mit diesen beiden Themen werden wir jetzt arbeiten, um das Ganze verständlicher zu machen. Also schreibe zuerst einmal Über mich und dann Über meine Pets Um an die bestimmte Stelle zu springen, muss der Code erstmal wissen wo genau er hin soll. Über mich nennen wir der Einfachheit halber a und Über meine Pets b. Nun erstellst du den Link der deine Page enthält und den Anker: <a href="http://www.neopets.com/~Flauschkopf#a">Über mich</a> <a href="http://www.neopets.com/~Flauschkopf#b">Über meine Pets</a> Fertiges Aussehen: Über mich Über meine Pets Um an die richtige Stelle zu springen fehlt dir jetzt noch der zweite Link an welchen er letzten Endes springen soll. <a name="a">Über mich</a> <a name="b">Über meine Pets</a> Wenn du alles richtig gemacht hast und deine Links anklickst müsste es jetzt an die entsprechende Stelle springen. (Zum Test klicke oben auf die beiden Links, die wir zum testen hatten). Achte immer darauf, dass der Linkname bei Beiden gleich ist. Zurück nach oben Toybox/DIVs Diese Boxen kannst du dafür verwenden um kleine Adoptables zu sammeln. In meinem Beispiel habe ich nur Sternige. <table style="border-width:2px; border-color:darkcyan; border-style:dashed;" cellspacing=2 cellpadding=1 bgcolor=white> <tr> <td style="border-width:2px; border-color:purple; border-style:dotted;"><div style="OVERFLOW:auto; height:200px; width:200px;"><center>Hier kommen deine Adoptables oder Anderes rein</div></td></tr></table><br> Kopiert euch am Besten erst den Code und dann schaut euch genau an wo was geändert wird. Als erstes bei border-width könnt ihr einstellen wie groß eure Außenlinie sein soll, anschliessend die Farbe bei border-color und die Art der Linie bei border-style. Hier ist sie gestrichelt. Bei bgcolor könnt ihr den Hintergrund einstellen, in dem Beispiel ist er weiss. Als nächsten Punkt haben wir die innere Linie. Da wird alles genauso gemacht wie bei der Äußeren, nicht schwer oder? Als letzten Punkt müsst ihr nurnoch die Größe des Scrollbalken einstellen, dies könnt ihr bei height und width machen. Fertig ist eure Toybox =) Man kann natürlich beliebig die Außenlinien weglassen. Zurück nach oben Scrollbars/DIVs Wenn du eine Tabelle in einer bestimmten Größe haben möchtest, kannst du ähnlich wie bei den Textareas einen Scrollbalken einfügen. Der einzige Unterschied zwischen den Beiden ist, dass du auch deine Schriftart etc ohne Probleme ändern kannst. So kannst du viel Text einfügen ohne, dass sich deine Tabellengröße ändert. <div style="OVERFLOW:auto; height:200px; width:400px;">Text</div> Zurück nach oben Textareas Textareas sind kleine Kästen in denen du Codes schreiben kannst, ohne dass sie auf der Page auch so erscheinen. So kannst du zum Beispiel bei deiner Graphikpage die Codes angeben. Dank dem Filter hier leider nicht zum kopieren angegeben. Du kannst auch die Größe deiner Textarea genau definieren, wobei width für die Breite und height für die Höhe steht: Zurück nach oben Cursor Du kannst auf deiner Seite verschiedene Cursor einsetzen. Möchtest du ein Fadenkreuz, dann setze dafür crosshair ein. Für einen Pfeil ne-resize und für eine Hand pointer. <style>body{cursor:hier einsetzen}</style> Um eigene einzusetzen, nutze diesen Code: <style>body, #content, a{cursor: url(URL.cur), default}</style> Dieser Code wurde von Seelenpet zur Verfügung gestellt und vielleicht solltet ihr einfach mal auf ihrer tollen Petpage vorbeischauen: Zurück nach oben Mein persönlicher Dank Newsmaus Sie hat mir den größten Teil der Lookupcodes überlassen, hilft mir immer und hat mir diese tollen Verlinkungsbanner gemacht. Seelenpet Hat mir freundlicherweise ihren Cursor-Code überlassen :) Lucitia Sie hat mir ihren Code für die Lookup-Navigation überlassen, wofür ich ihr hier nochmal herzlich danken möchte. Zoriss Sie hat fleissig Korrektur gelesen. Sevcik_24 Lieferte den Tipp mit den Textareas. Miraco_Morgenstern Lieferte insgesamt drei Tipps zur Bearbeitung der Petpage. Zurück nach oben Über Flauschkopf Flauschkopfs Petpage ist schon seit dem 13.07.2006 konstant aktiv und hat vielen Neopianern das Thema Html leichter gemacht. Wir freuen uns über jede Frage, das viele Lob und jeden Link, den wir entdecken. Deshalb möchten wir, also Flauschkopf und Gaara, die Page immer aktuell halten und so viele Erklärungen wie möglich liefern. Flauschkopf selbst war früher als Rosa Piratencybunny bekannt, doch als Neopets 2.0 herauskam, gefiel Gaara die Farbe und die Spezies nicht mehr. Es wurde im Forum abgestimmt und ihr habt entschieden, dass Flauschkopf in Zukunft als Sternen Pteri durch Neopia flattern soll. Mit ihrem neuen Aussehen ist Flauschkopf keineswegs ruhiger geworden, denn ihr ging der ruppige Dialekt nicht verloren. Sie lässt sich gerne von Nipferdius durch die Gegend tragen und ist immernoch der festen Überzeugung, dass sie irgendwann unter die Piraten gehen wird. ´´Wat soll das heissen, isch wäre der festen Überzeuchung? Irgendwann werd' isch auf See gehn und dann werdet ihr Leichtmatrosen scho' sehn was ihr davon habt, wa? Dann könnt ihr euch wen Anderes suchen, der eusch Html erklärt, nech?´´ Zurück nach oben Kontakt Du kommst bei deinem Code nicht weiter, hast Fragen, einen Fehler gefunden oder findest ein Thema sollte noch unbedingt auf die Page? Dann kannst du mich gerne anschreiben. Zurück nach oben Link back Dir gefällt meine Seite? Prima, dann kannst du mich gerne verlinken. <a href="http://www.neopets.com/~Flauschkopf"><img src="http://i109.photobucket.com/albums/n62/Gaara1988/flauschi2.gif" border=0></a> <a href="http://www.neopets.com/~Flauschkopf"><img src="http://i109.photobucket.com/albums/n62/Gaara1988/flauschi.gif" border=0></a> Zurück nach oben Regeln Im Prinzip gibt es nur eine, wichtige Regel. Ihr könnt meine Layouts gerne verwenden, dafür sind sie schliesslich da. Ihr könnt auch gerne eure Grafiken damit anbieten und für andere Layouts mit meinem Code und Design gestalten. Allerdings möchte ich nicht, dass ihr behauptet es wäre euer Layout. Schreibt eine kurze Anmerkung, dass ihr das Design mit Hilfe meiner Seite gemacht habt oder behauptet wenigstens nicht es wäre allein euer Werk. Über einen Link zurück freue ich mich immer, erwarte es aber nicht. Ich möchte nur nicht, dass ihr Lob für meine Werke einheimst und ich denke das ist verständlich. Zurück nach oben Awards Ich habe mehrere Awards bekommen, konnte jedoch einige hier nicht abbilden, da sie zu groß sind oder ich die Petpages verlegt habe, auf der sie sind. Wenn Jemand einen Award für mich gemacht hat und ich ihn noch nicht abgebildet habe, kann derjenige mich gerne nochmal anschreiben. Das war mein allererster Award für den ich mich beworben habe und ich bin sehr stolz darauf von Ciubie mit Gold ausgezeichnet worden zu sein. Das kleine Fischchen ist einfach zu niedlich und ich werde es immer in Ehren halten. Diesen Award habe ich einfach so als Dankeschön bekommen und das macht mich natürlich sehr stolz. Auch hier ein herzliches Danke. Auch für diesen Award habe ich mich nicht beworben, nein, ich wurde sogar vorgeschlagen :) Und zwar von Divlein, daher geht mein Dank sowohl an sie, als auch an die Erstellerin dieses Awards. Es ist eine große Ehre für mich mit diesem Award ausgezeichnet zu werden. Ich schätze Sheranyah sehr und freue mich natürlich umso mehr, dass sie meine Page für würdig hielt. Tausend Dank! Zurück nach oben Nützliche Links Du hast noch nicht genug vom Thema Html und Grafiken? Dann schau doch mal auf diesen Seiten vorbei. Hexcodes von Esrice Zurück nach oben Farbtabelle Das hier ist nur eine kleine Auswahl. Für noch mehr Farbcodes, klicke hier. #FF0000 #CD1414 #8E0D0D #FFB897 #FF4400 #DB4500 #FFC87A #FF9500 #D87F03 #FBE785 #FBD100 #C9AA0D #E1FA56 #C3E500 #98B205 #BAF963 #95FF00 #63A605 #96F4E4 #00E2BC #07937C #97FCFF #00DBE3 #008D92 #8BC9FF #0087FD #00549D #A1AEFF #0022FF #00159D #CE95FF #8800FF #4B0C83 #FF9EFF #FF00FF #A103A1 #FDB1E2 #E60095 #991069 #FF7A90 #FF002A #B7001E #A66D4A #834721 #5D2604 #BD8D1D #916600 #503903 #FFFFFF #E4E4E4 #C0C0C0 #989898 #606060 #000000 Zurück nach oben Über mich Über meine Pets Du hast alles richtig gemacht :D Zurück nach oben Userlookup Hier wird noch gearbeitet! Zurück nach oben Petlookup Hier wird noch gearbeitet! Zurück nach oben Petpagevorlagen Hier wird noch gearbeitet! Zurück nach oben Geschäftsschild Hier lernst du jetzt ganz leicht, wie du dein eigenes Geschäftsschild erstellen kannst. So soll das Ganz am Ende mal aussehen. Gar nicht schlecht sowas zu können oder? Kopiere dir am Besten zuerst den Code, dann kann das muntere Erklären auch schon losgehen. <table width="400" height="300" background=http://img53.imageshack.us/img53/448/geschaeftsschildyt7.gif border=0> <tr><td height=35 colspan=1></td></tr><tr> <td width=35></td><td valign=top><p align=left> <div style="width: 195; height: 215; overflow: auto; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px;">Dein Text hier rein</font> </div></td><td width=0></td></tr></table> Die ganze Sache besteht eigentlich nur aus einer Tabelle mit Hintergrund und einer Scrollbar. Hört sich nicht schwer an, hm? Ist es auch nicht, denn im Prinzip besteht das Ganze nur aus rumprobieren. In dem Beispiel hast du nun das Geschäftsschild das als Beispiel hier ist, jetzt musst du aber natürlich noch deine Bilddatei einsetzen. Ohne alles würde unser Geschäftsschild so aussehen: Hierbei ist deutlich zu erkennen wo die Scrollbar später hin soll, ich würde dir also raten es so ähnlich zu machen. Tja jetzt hast du einen Haufen Codes und hast noch keine Ahnung wie es jemals so fertig aussehen soll wie oben. Aber verzage nicht, es geht ja noch weiter. Logisch ist, dass da wo background steht deine Bilddatei hin soll, mach das gleich und setze bei "width=400 height=300" die Größe deines Bildes ein. Jetzt hast du immerhin schonmal dein Bild, der nächste Punkt wäre also die Scrollbar an die richtige Stelle zu setzen. Kommen wir also zu folgender Stelle im Code: <tr><td height=35 colspan=1></td></tr><tr> <td width=35></td><td valign=top><p align=left> Hier kannst du nun den Abstand von links und von oben bis zu deiner Scrollbar angeben. Als letztes wären nurnoch zwei Zahlen zu ändern und zwar die Höhe und Breite deiner gesamten Scrollbar. Diese fändest du hier: div style="width: 195; height: 215; Nun dürfte alles erledigt sein :) Schriftart, Farbe usw kannst du ganz normal einstellen. Zurück nach oben Itempetpets Diese kleinen Tierchen findest du auf vielen Petlookups. Hier lernst du ganz leicht wie du dir diese selbst machen kannst. Damit du weisst wie es am Ende aussehen soll hier ein kleines Beispiel: USERNAME hat ein Plüschiepetpet!!! PLÜSCHIENAME das Karo Kiko Plüschie (0 Tage und 0 Stunden alt) [ Geblitzt vom Plüschielaborstrahl ] Der Code: <br><br> <hr><br> <b></b>USERNAME hat ein Plüschiepetpet!!!<br><br> <img src=http://images.neopets.com/items/toy_kiko_checkered.gif> <br><b> PLÜSCHIENAME das Karo Kiko Plüschie</b> (0 Tage und 0 Stunden alt)<br> [ <img src=http://images.neopets.com/games/petpetlab/zapped.gif> <font size=1>Geblitzt vom <a href=http://www.neopets.com/~Flauschkopf>Plüschielaborstrahl</a></font></font> ]<Br><Hr> <br><br> Kommen wir zum Erklären. Den Text kannst du natürlich jederzeit ändern. Gleich nach dem "USERNAME hat ein Plüschiepetpet!!!" kommt eine Bildadresse wo du ein beliebiges Plüschie oder Item einsetzen kannst. Vergiss aber nicht den Namen zu ändern. In unserem Fall ist es ein Karo Kiko Plüschie. Tja und das wars eigentlich auch schon. Wenn du es nur auf dein eigenes Lookup stellen willst, wäre es lieb die Zurückverlinkung (Geblitzt vom Plüschielaborstrahl) zu lassen. Du kannst es aber auch für andere User anbieten und bei der Verlinkung den eigenen Petnamen einsetzen. Ich wünsche dir viel Spass beim Itempetpet basteln :) Zurück nach oben Byebye