Lieber Gast …

… die Inhalte von PSD-Tutorials.de stehen nur registrierten Mitgliedern zur Verfügung. Damit wollen wir den Communitygedanken weiterführen. Als Mitglied trägst du - wenn auch nur im Kleinen - zum Puls der Community bei. Und nur so ist es möglich, weiterhin hochwertige Inhalte für alle bereitzustellen.

Jetzt kostenlos registrieren!

Vorteile der kostenlosen Mitgliedschaft

Mit der kostenlosen und schnell erledigten Registrierung erhältst du viele nachhaltige Vorteile, die wir dir hier in aller Kürze aufzeigen möchten:

  • PSD steht für professionelles Know-how in den Bereichen Bildbearbeitung mit Photoshop, Fotografie, Webentwicklung, Layout- und Vektorbearbeitung, 3D-Bearbeitung mit Cinema 4D und Co.
  • Über 3.000 Tutorials mit druckbarer PDF-Datei und teilweise den zugehörigen Arbeitsmaterialien
  • Mehr als 1.900 Video-Trainings als Stream zur Direktanzeige und zum Download
  • Abruf von über 2.200 Downloads zu Photoshop-Presets, 3D-Modellen, Grußkarten, Texturen & Co
  • Zugriff auf ein sehr aktives Forum mit Antworten im Minutentakt
  • Deine Daten sind sicher. Sie werden nicht weitergegeben! Die Mitgliedschaft kann jederzeit und ohne Aufwand wieder gelöscht werden.
  • Registriere dich bei uns und du erhältst die Selection-DVD mit über 24 Stunden Video-Trainings zu Photoshop, InDesign uvm. als Download gratis (sofern Newsletter aktiviert). 

Reinschnuppern als Gast

Niemand kauft gerne die Katze im Sack, auch wenn sie kostenlos ist. Wir haben eine Handvoll Tutorials und Video-Trainings ausgesucht, die du auch als Gast ohne Registrierung ansehen kannst. Gefallen sie dir, stehen dir nach der Registrierung alle oben genannten Inhalte zur Verfügung.

Jetzt kostenlos registrieren!

DVD-Werbung
Passend zum Inhalt empfehlen wir:

Photoshop-Workshop-DVD - Webdesign

  • Webdesign mit Photoshop: alle erstellten Layouts mit Arbeitsdatei (PSD)!
  • Umsetzung erstellter Weblayouts in HTML/CSS
  • Tipps & Tricks zum Webdesign in Photoshop und zur Webentwicklung
Jetzt informieren Trailer ansehen

Kommentare

  • Alternative Portrait von Coca_156

    Coca_156

    17.11.2011 - 08:46

    Ich habe es ausprobiert hat genau so geklappt.

    LG
    Coca_156

  • Portrait von Susan99

    Susan99

    21.09.2011 - 11:35

    Gut erklärt. Vielen dank!

    LG Susan

  • Alternative Portrait von artesmaracay

    artesmaracay

    10.11.2010 - 18:57

    Prima erklaert, vielen Dank! Bin voellig neu in dem Thema und hat schonmal geholfen.

  • Portrait von Kronod

    Kronod

    23.08.2009 - 18:38

    ok, gut beschrieben, aber nicht sehr gut.

    -Fon-family: Arial; Schriftart

    sollte man evtl. sagen, dass nur Schriftarten verwendet werden sollten, die standard sind, da nicht alle z.B. "Monotype Corsiva" haben. Wenn du auf deiner Webseite das mal anwendest, sieht es bei jemandem, der nicht die Schriftarten hat, nicht sooo toll aus. Desweiteren hast du "Fon" und nicht "Font" geschrieben.

    Du hast geschrieben.
    1 -border-style: outset; eine Formatierung für die Tabelle, die dafür sorgt, dass dies leicht 3D-mäßig heraussticht
    => du erstellst das CCS für den Link und nicht für die Tabelle.
    2 -border-width: 5px; hier wird festgelegt, dass die Tabellenumrandung 5px beträgt
    => hier dasselbse
    3 -border-color: #000000; die Tabellenumrandung ist schwarz
    => und nochmal

    weiterhin bleibt wohl festzuhalten, das die Rechtschreibprüfung nicht optimal war. Gruß Kronod

  • Portrait von katzenpup

    katzenpup

    21.08.2009 - 10:45

    Sehr gut formuliert und die Erläuterungen sind eingängig. Leider ist das PDF-Doc in den Quelltextabschnitten völlig unübersichtlich geraten. Zum Lesen nicht besonders geeignet.

  • Alternative Portrait von robtom

    robtom

    20.08.2009 - 11:58

    sehr gut und einfach erklärt

  • Alternative Portrait von werk2

    werk2

    20.08.2009 - 11:05

    sehr hilfreich, werde ich gleich mal ausprobieren

    • Alternative Portrait von Freistoss

      Freistoss

      20.08.2009 - 12:04

      Danke!

      Nicht ganz, was ich gesucht habe, aber gut erklärt!

Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.

Anleitung (Bilder + Extras werden nur für Mitglieder eingeblendet)


Hierfür brauchen wir keine großen Editoren. Textdateien oder MS Front Page reichen vollkommen aus.

Um jedoch den Überblick zu behalten, werde ich die wichtigsten Sachen in eine Textdatei schreiben… (wenn ihr das Gleiche machen wollt, müsst ihr, wenn ihr die Textdatei speichern wollt, ERST die Textdatei speichern und diese dann noch einmal im „html“–Format speichern, indem ihr hinter euren Dateinamen .html schreibt…).


Bilder

Dann mal los! Und wir starten gleich mit der Frage „WIE ERSTELLE ICH EINEN CSS BUTTON?“
Step 1: Das Nötigste

Als Allererstes erstellen wir uns ein Grundgerüst (wer einen Editor benutzt, braucht diesen Schritt nicht zu machen).

<html>
<header>
</header>

<body>
</body>

</html>


Wenn wir dies haben, gehen wir dann in den Body-Tag rein und erstellen uns eine Tabelle… (ab hier geht's für alle weiter ^.~ )

<html>
<header>

</header>

<body>


<table border="0" width="110" align="center">
<tr>
<td> ZELLENINHALT </td>
</tr>
</table>


</body>

</html>

Erläuterung:

- border="0" 0 Keine Umrandung
- "width="110" Breite 110px
- align="center" Die Tabelle wird zentriert (auch möglich: right, left)

Im nächsten Schritt werden wir nun den Code für den Link in die Tabellenzeile eingeben.

<table border="0" width="110" align="center">
<tr>
<td> <a href="#" class="menue">link 1</a> </td>
</tr>
</table>


Erläuterung:

- a href="#" im # wird wahlweise die Internetadresse (beachtet: nicht www, sondern: http:// etc… dass dies mit angegeben wird!)
- class="menue" das ist eine sog. „Klassifizierung“. Heißt einfach, dass eine „CSS-Gestaltungsklasse“ beigefügt wird
- link 1 das ist nachher der Link-Text, den ihr wählen könnt

Wenn soweit alles gemacht wurde, müsste es nun so bei euch aussehen:


Bilder

Lasst euch nicht davon beirren, dass mein Link lila ist. Wenn er bei euch blau ist, ist das auch korrekt.
Hauptsache, wir sehen Folgendes: Es ist ein Link und nichts ist drum herum! (da die Tabelle keine Umrandungsstärke hat, sieht man sie auch nicht, und da angegeben wurde, dass die Tabelle mittig sein soll, ist der Link auch in der Mitte).

Step 2: CSS

Jetzt geht es ans Eingemachte: Die Gestaltung. Dafür müssen wir wieder zurück in unseren HTML-Code und bearbeiten nun den Header-Tag!

Es kommen nun 5 wichtige Grundsachen dazu:

  1. Der Style Tag
  2. a:link
  3. a:visited
  4. a:hover
  5. a:active

(Das “a:” steht für den Hinweis: Link! Dies finden wir auch im Code “ a href“ wieder. Da wir den CSS Code irgendwo zuteilen müssen, ist es wichtig, darauf zu achten, dass die CSS Informationen dem jeweiligen „Namen“ zugeteilt werden. In diesem Fall: Die CSS (a:) Struktur wird der Art und Weise des „a’s“ (Link) zugeteilt).

<html>
<header>
<style type="text/css">
<!--
a:link { 
} 

a:visited { 
} 

a:hover { 
} 

a:active { 
}
-->

</style>
</header>


<body>

<table border="0" width="110" align="center">
<tr>
<td> <a href="#" class="menue">link 1</a> </td>
</tr>
</table>


</body>

</html>

Das ist nun unser CSS–Grundgerüst + Tabelle + Link, die wir nun formatieren werden.
Sieht nun etwas viel aus und kompliziert, aber es ist wirklich ganz einfach. Wichtig ist hier: VERGESST NICHT DIE GESCHWUNGENEN KLAMMERN! Sie müssen jeweils geöffnet und wieder geschlossen werden, ohne wird das alles nicht funktionieren!

Nun werden wir der jeweiligen CSS – Strukturihren Werte zuteilen (Achtung, ich habe nun nur den Header-Teil ausgewählt, heißt also: NICHTS LÖSCHEN!)

<header>
<style type="text/css">
<!--
a:link {
display: block; 
width: 110px; 

text-align: center; 
text-decoration: none; 

font-family: Arial; 
font-size: 12px; 

color: #FFFFFF; 
background-color: #333333; 

border-style: outset; 
border-width: 5px; 
border-color: #000000; }


Erläuterung:

- display: block; das ist ein einfaches Element zur korrekten Darstellung von Links (ich gehe hier drauf nicht weiter ein… Es ist nur wichtig, dass ihr hier display: block; für die korrekte Darstellung benutzt).
-width: 110px; Breite des Links: 110 Pixel
-text-align: center; der Text wird mittig gestellt
- text-decoration: none; hier gibt es die Möglichkeit, z. B. dafür zu sorgen, den Text durchzustreichen (line-through) oder anderes. Standardsgemäß steht: none; also keine Effekte. Man kann ihn auch weglassen, der Vollständigkeit halber führe ich ihn aber hier auf.
-Fon-family: Arial; Schriftart
-font-size: 12px; Schriftgröße
-color: #FFFFFF; Schriftfarbe
-background-color: #333333; Hintergrundfarbe
-border-style: outset; eine Formatierung für die Tabelle, die dafür sorgt, dass dies leicht 3D-mäßig heraussticht
-border-width: 5px; hier wird festgelegt, dass die Tabellenumrandung 5px beträgt
-border-color: #000000; die Tabellenumrandung ist schwarz

Zu achten ist folgendes: VERGESST NICHT DAS „ ; “ nach euren Werten! Ansonsten wird dies nicht gelesen und es entstehen Fehler.
Die Reihenfolge ist hier egal, nur wegen der Übersicht rate ich euch, Werte, die etwas bestimmen (wie die Schrift etc) zusammenzulegen


Bilder

Nun erkennen wir, wenn wir die Sachen abspeichern und diese in einem Browser anzeigen lassen, wie der Button als Link aussieht... Gar nicht mal schlecht, nicht wahr? Nun fehlen uns nur noch die anderen Werte… Denn wenn wir nun auf den Button klicken, passiert nicht wirklich was Spannendes…

Nun kümmern wir uns um den visited Teil…


a:visited
{
display: block; 
width: 110px; 

font-family: Arial; 
font-size: 12px; 

text-align: center;
text-decoration: line-through;

color: #FF0000; 
background-color: #FFFF00; 
border-style: dotted; 
border-width: 5px; 
border-color: #FFA5000; }

So – hier sehen wir die Angaben dazu, was passiert, wenn man den Link besucht hat. Ich habe die Schrift-Art gelassen, ebenso wie die Größen- und Display-Angaben und habe nur sichtbar die Farben verändert, ebenso die Border-Angaben…

Es müsste dann so aussehen (nein, ihr habt keine 2 Links! Ich habe einfach für den Unterschied die 2 Links untereinander gemacht! Lasst euch nicht beirren ^^ wenn ihr einmal auf euren schwarzen Link klickt, müsste er genauso aussehen wie der erste Button, oder etwas anders).


Bilder


Nun kommt der Hover-Bereich dran. Also jener Bereich, der bestimmt, was passiert, wenn man mit dem Cursor darüber geht.

a:hover
{
display: block; 
width: 110px; 

font-family: Arial; 
font-size: 12px;

text-align: center; 
text-decoration: none;

color: #0000FF; 
background-color: #00FF00; 

border-style: inset; 
border-width: 5px; 
border-color: #DA70D6; }


Bilder

Auch hier sehr schön durch das Beispiel zu sehen: die Unterschiede, die sich erkennbar machen, wenn man mit dem Cursor über den Button geht.
Kommen wir nun zum letzten Teil: dem Active… heißt also, dem aktiven Button, auf den man geklickt hat.


a:active
{
display: block;
width: 110px;

font-family: Arial;
font-size: 12px;

text-align: center;
text-decoration: none;

color: #00FFFF;
background-color: #000000;

border-style: double;
border-width: 5px;
border-color: #F4A460;
}
-->
</style>
</header>

Bilder

Und so sieht der Link aus, wenn man ihn angeklickt hat. Bestimmt habt ihr einiges an Problemen gehabt, diese Variante überhaupt zu sehen. Wieso? Ganz einfach. Um ihn „aktiv“ zu sehen, muss er einen internen Link besitzen.

Heißt also Folgendes: Wenn ihr auf eurer Seite ein Menü habt, und diese Seite (wie Home, about me, Impressum usw.) interne Buttons integriert hat, erst dann kann man sehen, dass er aktiv ist… Z.B:

<table border="0" width="110" align="center">
<tr>
<td> <a href="http://www.seite.de/home" class="menue">link 1</a> </td>
</tr>
</table>


So würde dieser Link (bzw: der link „home“) im Aktiv-Modus erscheinen.

Nun müsste euer kompletter HTML-Code so aussehen:
 

<html>
<header>
<style type="text/css">
<!--
a:link
{
display: block;
width: 110px;
text-align: center;
text-decoration: none;
font-family: Arial;
font-size: 12px;
color: #FFFFFF;
background-color: #333333;
border-style: outset;
border-width: 5px;
border-color: #000000;
}

a:visited
{
display: block;
width: 110px;
font-family: Arial;
font-size: 12px;
text-align: center;
text-decoration: line-through;
color: #FF0000;
background-color: #FFFF00;
border-style: dotted;
border-width: 5px;
border-color: #FFA5000;

a:hover
{
display: block;
width: 110px;
font-family: Arial;
font-size: 12px;
text-align: center;
text-decoration: none;
color: #0000FF;
background-color: #00FF00;
border-style: inset;
border-width: 5px;
border-color: #DA70D6;
}


a:active
{

display: block;
width: 110px;
font-family: Arial;
font-size: 12px;
text-align: center;
text-decoration: none;
color: #00FFFF;
background-color: #000000;
border-style: double;
border-width: 5px;
border-color: #F4A460;
} -->
</style>
</header>

<body>

<table border="0" width="110" align="center">
<tr>
<td> <a href="#" class="menue">link 1</a> </td>
</tr>
</table>

</body>


</html>



Wenn ihr es in dieser Form habt (fern ab von den Zwischenräumen oder nicht :) dann habt ihr es geschafft! Ihr habt einen CSS-gesteuerten Button erstellt!

Was habt ihr gelernt?

- Ihr habt gelernt, aus welchen Funktionen ein Link besteht
- Wie man eine CSS Struktur erstellt
- Wie man durch „Text-Dekoration“ und „Border-Style“ die jeweilige Objekte sichtlich verändert
- Wie man durch diverse Werte einiges hervorheben kann.

Um den Button letzten Endes zu positionieren, könnt ihr mit Tabellen arbeiten und deren Border auf 0 setzen. Dann habt ihr die Möglichkeit, vertikale und horizontale Menüs zu erstellen.

Wenn es noch Unklarheiten geben sollte, könnt ihr mich gerne kontaktieren und fragen.Ansonsten: Viel Spaß beim Herumexperimentieren!

Eure Black_Hat

PS: Es kann vorkommen, dass ihr was eingegeben habt, es aber nicht erscheint...

Z. B.: wenn ihr den Link-Teil macht (also den ersten Part des CSS Codes) und ihr speichert ab und seht dann einen lilanen Link, dann habt keine Panik! Es ist so, dass bei einer Textdatei, wenn ihr sie 1x abspeichert als HTML und ihr somit diese Datei 1x benutzt, sie auch weiterhin als benutzt angegeben wird (also ist dieser benutzte Link nicht mehr im "link"-Bereich, sondern im "select"-Bereich). Um euer Ergebnis dann zu sehen, müsst ihr die Datei irgendwo anders abspeichern, damit der Pfadname ein neuer ist.

Es ist auch ratsam (finde ich), nur Hover, Normal und vielleicht auch noch Select zu machen und Visited nicht. Wenn ein Besucher sich eure Seite anschaut und wieder geht, und nicht reinzufällig C-Cleaner hat, wird auch bei ihm alles beim 2. Besuch als "visited" markiert.

vBulletin 0.046 • ZF-App 0.541 • Total 0.587