Arrr, hallo und willkommen uff meener Petpage!
Mein Name is' Flauschkopf und isch möcht' dir allet beibringen wat du wissen musst, um disch in der Welt des HTML und CSS zurescht zu finden.
Naja, wohl eher meene Besitzerin Gaara, nech?
Isch bin schliesslich n waschechter Pirat und hab mit dem komischen Code-Gedöns nix am Hut. Aber nett wie isch eben bin hab ich meine Seete zur Verfüchung gestellt. Nunja, schätze Gaara möscht nu auch paar Worte an eusch richte, ihr Landradden.
Solltest du dich mit HTML und CSS 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 und Anleitungen für dich bereit. 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.
* - hier wird noch gearbeitet :)
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
Farben benutzen
Bei Seiten mit viel Text solltest du darauf achten, dass die Farben für das Auge angenehm sind, sich nicht beißen und die Schrift und Linkfarbe gut leserlich sind.
Pink mit Neongrün ist da nicht zu empfehlen.
Bei einer Art- oder Screenpage kann man schon mal zu Kräftigeren greifen. Auch, um spezielle Dinge hervor zu heben.
Farben sind Geschmacksache, trotzdem solltest du den Geschmack möglichst vieler User treffen, außer Du gestaltest deine Seite nur für Dich zum Spaß.
Die Farben gibst Du in sogenannten ″Hex Codes″ an, z.B.: #000000(schwarz), #ffffff(weiß).
Es gibt ″Websafe Colors″, die mit allen Betriebssystemen gleich aussehen. Das ist nicht ganz unwesentlich, denn was bei dir vielleicht toll aussieht, kann einen anderen User in den Augen weh tun.
Farbtabellen:
Estice - Farbtafel
KauSlippers - Farbabstufungen
_Soigne - Farbzusammenstellungen
Neo____Zafara - ganz unten auf der Seite. Hier sieht man auch, wie manche Farben benannt werden
Auch, wenn du einen Farbnamen kennst, nimm den Hex Code, der ist vor Filteränderungen sicherer.
|
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 Rede, allerdings ist dieses Programm sehr teuer und für Privatpersonen bzw. für einige Petpagegrafiken kaum bis gar nicht finanzierbar. Es gibt allerdings eine 30-Tage Testversion.
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 und kleinere Pixelarbeiten. Adoptables sind kleine Grafiken in Form von Pets oder Petpets, die du zur Verschönerung deiner Petpage oder deines Lookups nutzen kannst. Hier ein kleines Beispiel:
Für diese Art von Arbeit ist Paint wirklich am Besten geeignet, doch auch zeichnen kannst du mit etwas Übung wunderbar. Schau dich im Internet einfach mal nach einigen Anleitungen (oder Tutorials) um.
Immer bekannter wird nun auch das Zeichenprogramm Paint Tool SAI.
Auch hier gibt es eine 30-Tage Testversion, allerdings ist die Vollversion, im Gegensatz zu PhotoShop, in einem bezahlbaren Rahmen.
|
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 8-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, Tahoma, Verdana.
Wie bei der Farben, gibt es auch bei der Schrift ″Web safe Fonts″. Nicht jede Schrift kann von allen Browsern gelesen werden.
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.
|
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:
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 (NeoHTML)
Teil II (NeoSignatur)
Achte auf die geöffnete Klammer am Ende der NeoHTML und am Anfang der NeoSignatur, sonst bildet sich eine strichlierte Linie vor dem Unterteil deiner Neo-Unterschrift.
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.
Upps, Du weißt nicht wo du das eingibst? Bei Foren - Einstellungen.
|
Zurück nach oben
Schrift
Fett
Kursiv
Unterstrichen
Durchgestrichen
Zentriert
Textfarbe
Siehe auch den Unterpunkt Farben benutzen
Schriftgröße
Die Schriftgrößen: Du kannst die Größe in font size="1"-... angeben oder in px für ganze Bereiche z.B.
Zeilenumbruch
Absatz
Horizontale Linie
Schriftart, Größe und Farbe der kompletten Seite
Copyright anpassen
|
Zurück nach oben
Links
Normaler Link
Link öffnet sich in einem neuen Fenster - nicht mehr möglich!
Um die Links in einem neuen Fenster zu öffnen habt ihr nur mehr folgende Möglichkeiten:Wenn ihr ein Mausrad habt, beim Link auf dieses drücken.
Mit der rechten Maustaste drücken und ″In einem neuen Fenster öffnen″ auswählen.
Bildlink mit Rahmen
Bildlink ohne Rahmen
Linkfarbe
Linkgröße und Schriftart
Andere Farbe, Schriftart und Größe
text-decoration: none - ein wichtiger Befehl, um das automatische Unterstreichen von Links zu verhindern
Weiters kann man bei Verlinkungen noch angeben:
a:link - der Link im Ruhezustand
a:visited - schon besuchter Link
a:hover - beim darüber Fahren mit der Maus kann sich z.B. die Farbe ändern
a:active - gerade angeklickter Link
Nicht alle dieser Definitionen funktionieren bei allen Browsern. Bei manchen Browsern muss auch die Reihenfolge genau eingehalten werden, damit es funktioniert.
|
Zurück nach oben
Textarea
Diesen Code bitte auch mit den Größer/Kleiner-Klammern!
Ihr könnt auch die Größe einer Textarea bestimmen.
Wichtig ist er, wenn ihr z.B. wollt, dass wer Euren Banner verlinken kann um den Code dort hinein zu schreiben.
Oder für Seiten wie diese :).
Außerdem werdet ihr bemerken, dass ihr bei jeder Textarea jeder Seite selbst was reinschreiben könnt, ausschneiden, ändern oder ihre Größe verändern könnt.
Eine Seite hat das als Notizhilfe verwendet.
|
Zurück nach oben
Bilder
Einfügen
Bild verlinken
Bild mit genauer Position
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
sich wiederholendes Hintergrundbild
Bild in die rechte, untere Ecke
Um das Bild zu positionieren setze ein:
left = links
right = rechts
bottom = unten
top = oben
center = mittig
center center = zentriert(center/x-Achse und center/y-Achse)
Hintergrundfarbe mit Bild in der Mitte, oben
Hintergrundbild das sich beim Scrollen nicht mitbewegt
fixed = fixiert
Hintergrundbild welches nur einmal auf der Seite ist
no-repeat = nicht wiederholend
Hintergrundbild welches nur einmal auf der Seite ist und sich nicht beim scrollen mitbewegt
|
Zurück nach oben
Tabellen
Normale Tabelle, 2 Zellen nebeneinander
Normale Tabelle, 2 Reihen untereinander
Größe verändern
width=Breite, height=Höhe
Randfarbe (Border) ändern
Hintergrundfarbe ändern
Hintergrundbild ändern
Randfarbe und Stil, Größe und Hintergrundfarbe ändern
Randstil ändern
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 - eine durchgezogene Linie
dotted - gepunktet
dashed - strichliert
double - doppelte Linie, hier müsst ihr immer eine ungerade Pixelanzahl nehmen, ab 3 gehts los(1px-Strich, 1px-Leer, 1px-Strich)
|
Zurück nach oben
Ebenen
Ebenen werden in der Regel mit z-index angegeben. Je höher(1,2,3,...) der z-index, desto weiter ″oben″ liegt die Ebene., je niedriger(-1,-2,-3,-...), desto ″tiefer″.
Der z-index verhält sich leider bei den verschiedenen Browsern unterschiedlich. Vorallem bei Minuswerten.
Gut funktioniert er z.B. bei einem Userlookup, wenn man einen fixen Vordergrund haben möchte und will, dass die Infos scrollbar dahinter liegen.
Definiert wird das ganze durch 2 Codes:
der 1.Code - innerhalb der Styletags
width:100% - heißt die ganze Bteite soll einbezogen werden
margin-bottom/left:0px - heißt es soll bei jedem Browser, jedem Bildschirm links/unten liegen, die Anzahl der px müsst ihr anpassen
z-index:1 - eine Ebene über dem normalen Lookup
#vor - ist ein willkürlicher Name für das Vordergrundbild, es ist egal, wie ihr es nennt, ihr sollt nur bei der nächsten Änderung wissen, was ihr damit gemeint habt :).
2. Code - außerhalb der Styletags:
Eine weitere Möglichkeit:
1.Code - innerhalb der Styletags:
2.Code - außerhalb der Styletags
Diese Codes funktionieren für ein Userlookup bestens, bei einer Petpage wird Euch auffallen, dass manche Browser einfach nicht mitspielen.
Bei Dragonianon seht ihr in ff und chrome das Moach, beim Scrollen, immer nett an der Seite, bei explorer wird es nur am Ende der Seite angezeigt.
Beachtet auch, dass Euer Vordergrundbild den Blick auf Euer Lookup oder die Seite nicht behindert oder stört.
|
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:
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.
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
Diese Boxen kannst du dafür verwenden um kleine Adoptables zu sammeln. In meinem Beispiel habe ich nur Piratige.
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 background-color könnt ihr die Hintergrundfarbe 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
DIV(Element für Schrift und Bild)/Scrollbars
Der Vorteil einer Div liegt darin, dass du alles sehr genau definieren und sie deinen Bedürfnissen anpassen kannst.
Größe, Aussehen, Rahmen, Hintergrund, Schrift, wo sie auf der Seite liegen sein soll.
einfache DIV(Box), mit Hintergrund und automatischer Scrollbar
Text, Text Text, Text Text, Text Text, Text Text, Text Text, Text
Ihr könnt so gut wie alles angeben bei einer DIV, ein paar Beispiele:
- height: ...px = Höhe
- width: ...px = Breite
- background: #...... = Hintergrund
- text-align: center/left/right/
- padding: ...px = Innenabstand
- border: ...px solid/dotted/dashed #...... = Rahmen
- margin: ...px = Außenrandabstand
- Die Scrollbar wird durch den Befehl ″overflow: ...″ bestimmt:
overflow: auto(Scrollbalken erscheint automatisch, wenn Text oder Bild zu groß sind)
overflow: hidden(Text oder Bild werden von der Div automatisch abgeschnitten)
overflow: scroll(Scrollbalken vorgegeben)
overflow: visible(Text oder Bild schauen aus der Div raus)
Nicht jeder Browser zeigt alle overflow-Befehle so dar, wie es sein sollte.
Ihr könnt eine DIV innerhalb der Styletags beschreiben:
z.B eure Navigation(#nav)
dann müsst ihr außerhalb der Styltags nur mehr angeben um welche DIV-id es sich handelt:
oder ihr setzt alle Befehle direkt bei der DIV außerhalb der Styletags ein:
Mit DIVs könnt ihr alles auf eurer Petpage definieren.
Kästchen mit Inhalt, Scrollboxen, bestimmte Textabsätze und wo alles seinen Platz haben soll.
Das Zauberwort, ″margin″(margin-top, margin-bottom, margin-left), hilft bei der Positionierung, damit die Seite bei jeder Auflösung gleich aussieht. Die brühmte Frage dazu im Hilfeforum ist meistens: ″Ist das bei Euch auch in der Mitte, oder sieht es verschoben aus?″
|
Zurück nach oben
Cursor
Du kannst auf deiner Seite verschiedene Cursor und Symbole einsetzen. Die Gängigsten wären:
crossair - Fadenkreuz
pointer - Zeiger
wait - Sanduhr
help - Fragezeichen
progress - Pfeil mit Sanduhr
usw.
|
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.
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/CSS 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.
Mittlerweile erstrahlt sein Gefieder im königlichen Glanz, doch seine ruppige Art ist dieselbe geblieben. Mit seinem Partner Nipferdius, dem fliegenden Hippalop, macht er stets Neopia unsicher.
|
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 uns gerne anschreiben:
NM an Gaara |
NM an Claudia |
(Einfach die Items anklicken)
|
Zurück nach oben
Link back
Dir gefällt meine Seite? Prima, dann kannst du mich gerne verlinken.
Neue Buttons kommen bald =)
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
Zurück nach oben
Nützliche Links
Du hast noch nicht genug vom Thema Html/CSS und Grafiken?
Dann schau doch mal auf diesen Seiten vorbei.
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
Kopfzeile, Fußzeile und Sidebar entfernen:
Top Banner einfügen:
Breite des Lookups definieren:
|
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 Ganze am Ende mal aussehen. Gar nicht schlecht sowas zu können, oder? Das ist auch gar nicht schwer :D
|
|
Die ganze Sache besteht eigentlich nur aus einer Tabelle mit Hintergrund und einer DIV für die Textpassage. 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:
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:
Nun dürfte alles erledigt sein :)
Schriftart, Farbe usw kannst du ganz normal einstellen.
|
Zurück nach oben
|
