männlich, 
geschrieben am 31.Mai 2008, um 12:35 Uhr mit 383 Wörtern von Pasue
Stimmung: gut Musik: nichts TV American High | » ein Kommentar
Heute habe ich euch mal wieder ein Tutorial mitgebracht. Da ich mir lange überlegt habe, was ich denn so erlären könnte, bin ich zu dem Schluss gekommen: Ich erkläre euch wie man eine “Button-Navigation” mit einem schicken Rollover machen kann. Das ganze funktioniert mit CSS und ist total einfach!
So sollte das ganze aussehen, wenn es fertig ist:
photo credit: Aaron LandrySchritt 1
Als erstes fügst du folgenden Code in deine CSS Datei ein. Du kannst ihn beliebig verändern und anpassen, denn alle Angaben sind nur Beispielangaben. Achte aber darauf, dass dieser Part erst nachdem Part kommt, in dem du die Links in deiner CSS angepasst hast.
height:10px;
padding: 2px;
color:#F5428D;
border-bottom:1px solid #DBECBC;
display:block;
text-transform:uppercase;
background:#C6E094;
}
a.nav:hover {
height:10px;
padding:2px;
color:#F5428D;
border-bottom:1px solid #DBECBC;
display:block;
text-transform:uppercase;
background:#B4D773;
}
Schritt 2
Nun öffne die Seite, wo deine Navigation sein soll.
Füge
in den Linkcode ein.
Das wiederrum könnte dann so aussehen, also sieht der a-Tag danach so aus
Tipp!
Du kannst verschiedene “Buttons” machen, in dem du den Code beliebig oft in deine CSS einfügst, achte aber darauf “nav” immer anders zu nennen, zB.: nav2, nav3 ….
Das war’s auch schon und es war doch wirklich nicht schwer oder? Fragen können wie immer per Kommentar gestellt werden 
geschrieben am 6.April 2008, um 9:15 Uhr mit 563 Wörtern von Pasue
Stimmung: müde Musik: The Kooks | » 2 Kommentare
In diesem Tutorial werde ich versuchen dir zu erklären, was PHP-Include ist und wie du es benutzt.
Es erspart einem viel Arbeit und man kann iFrames damit übergehen. Außerdem funktioniert es in jedem Browser gleich.
Wenn du fragen hast, kannst du diese gerne als Kommentar stellen, ich werde versuchen sie zu beantworten.
photo credit: lewroSchritt 1
Als erstes stellen wie uns den typischen Aufbau einer HTML Seite vor, sprich ein Grundgerüst.
Ein HTML-Grundgerüst sieht ungf. so aus:
< head >
< title>Hallo ich bin der Seitentitel< /title >
< /head >
< body >
Hallo,ich bin der Seiteninhalt
< /body >
< /html >
Schritt 2
Nun öffne einen Texteditor und füge folgenden Part in eine neue Datei ein. Speicher sie danach als header.php (es kann auch .txt oder .inc sein, ich bevorzuge aber die Endung .php).
< head >
< title>Hallo ich bin der Seitentitel< /title >
< /head >
< body >
Schritt 3
Nun öffne ein neues Dokument im Texteditor und füge dann folgenden Part ein. Speicher die Datei anschließend wieder, diesemal als footer.php (wenn du vorher .inc o.ä. gewählt hast, wäre es sinnvoll, dies auch weiter so zu machen).
< /html >
Schritt 4
Nun setzen wir die Includes ein. Damit fügen wir die Header & Footer Dateien, die wir in den vorherigen Schritten erstellt haben, in die Seite ein.
Hallo,ich bin der Seiteninhalt
< ? include("footer.php") ? >
Schritt 5
Jetzt speichern wir die Datei, die wir in Schritt 4 erstellt haben ab. Wichtig ist hierbei, das die endung .php ist, da sie sonst nicht korrekt im Browser angezeigt werden kann.
Wenn alles geklappt hat, dann sieht deine Includierte Seite nun so aus: klick.
Wenn wir uns den Quelltext nun im Browser ansehen, sehen wir auch, dass der Browser die Header- & Footer Dateien in die von uns erstellte .php Datei “eingefügt” hat.
Was haben wir gemacht?
Im prinzip haben wir nichts anderes gemacht, als das HTML-Grundgerüst aus vielen einzelenteilen zusammen zu setzen.
Du kannst die Header Datei übrignes immer belibieg verändern. Zum Beispiel kannst du einen Stylesheet, verschiedene Div-Layer uvm. einbauen.
Du kannst auch mit einem Scrollbaren-Divlayer, ein “iFrame-Layout” mit PHP-Include coden. Es gibt unendlich viele Möglichkeiten.
Hilfreiche Links
Diese Links könnten hilfreich sein, wenn du das Tutorial verstanden hast oder weiterhelfen…
» Div-Layer Tutorial (englisch)
» dymanisches-Include Tutorial
» PHP-Skinning Tutorial
XOXO
geschrieben am 27.März 2008, um 11:18 Uhr mit 571 Wörtern von Pasue
Stimmung: müde Musik: Tegan and Sara | » 2 Kommentare
Da ich bisher noch nicht so häufig Tutorials geschrieben habe, hoffe ich, dass alles verständlich und nachvollziehbar ist.
Ich erkläre alles Schritt für Schritt. Fragen etc., bitte als Kommentar posten.
Ich setze allerdings vorraus, das du einigermaßen mit Photoshop klar kommst und auch logisch denken kannst ;).
Dieses Tutorial ist für die Version CS geschrieben, sollte aber auch in anderen Versionen ähnlich sein. Bitte fragt mich nicht, wie man das ganze in PaintShop oder sonst einem Porgramm macht…
Um das Ergebnis des Tutorials zu sehen, scrolle einfach nach ganz unten und schaue dir den Vorher-Nachher-Vergleich an :).
Schritt 1
Als erstes öffnest du das Bild, welches du Bearbeiten möchtest. Besonders gut eignen sich Bilder, mit längeren Haaren in denen evtl. Strähnchen drin sind. Das Bild sollte nicht zu “weich sein” und nicht zu scharf, da sonst das Endergebniss nicht so aussehn wird, wie ich es in dieserm Tutorial erkläre.
Ich habe dieses Bild gewählt und es dupliziert.
Credit
Schritt 2
Nun gehst du in der Rechts, in der Toolbox, auf das Weichzeichner-Werkzeug, machst einen Rechtsklick und wählst das Wischfinger-Werzeug aus.
Achte darauf, das in der oberen Leiste genau diese Einstellungen (s. die Bilder rechts & oben) sind:
Schritt 3
TIPP! Zoome dir das Bild etwas ran, damit’s ordentlicher geht!
Fange nun vorsichtig an, die Haare zu verwischen, aber mach nicht “einfach drauf los”, sondern lass dir Zeit. Achte immer darauf (besonders bei den Strähnchen) das du immer mit den haaren gehst, d.h. von oben nach unten.
Wenn du die Haare fertig hast, kannst du im Gesicht weiter machen. Im gesicht kannst du , “wild drauf los” machen, aber pass auf die Schattierungen auf, sowie auf Augen und Nase. Die Augen machen wir nicht weicher!
Hier ein Beispiel an dem du sehen kannst, wie das Bild nach diesem Schritt aussehen könnte.
Schritt 4
Jetzt stellst du die verwichte Ebene auf eine Zahl zwischen 50%-60%. Ich nehme 60%. Nachdem du das gemacht hast. Drückst du STRG+E, dadurch werden die beiden Eben zu einer. Danach duplizierst du die Ebene wieder und setzt die Ebene auf “Weiches Licht”. Dann fügen wir die Ebene wieder per STRG+E zusammen und können, je nach Bild und bedarf die Ebene Scharfzeichnen. Dieser Schritt kann von Bild zu Bild verschieden sein.
Und hier die beiden Bilder im vergleich, links das Original, rechts, das Bearbeitete.
XOXO