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 Melly_maus

    Melly_maus

    18.03.2012 - 10:19

    Vielen Dank. Hilft einem sehr gut.

  • Alternative Portrait von horror_kid

    horror_kid

    10.01.2012 - 09:21

    wow echt cool ... vor allem weil das dock das einzige ist was mir an mac´s gefällt :P
    (liegt natürlich an mangelnden mac kenntnissen, kann damit nicht umgehen)

    danke für das SUPER tutorial !! du solltest auf unserer schule unterrichten dann
    müsste ich mir nicht alles selbst beibringen :)

  • Alternative Portrait von maltehansen

    maltehansen

    10.11.2011 - 12:11

    Wann kommt der zweite Teil? Ich warte gespannt!

  • Alternative Portrait von mad_basher

    mad_basher

    05.08.2011 - 20:56

    Sowas in der Art habe ich schon mal gelesen und auch ausprobiert, aber leider die Seite nicht gebookmarked.
    Schön dass ihr das in euere Tutorials mit aufgenommen habt.

  • Alternative Portrait

    User hat PSD-Tutorials.de verlassen

    05.08.2011 - 17:58

    Ein klasse Tutorial, ich habe lange nach etwas außergewöhnlichem wie DEM gesucht!

  • Alternative Portrait von shugger

    shugger

    04.08.2011 - 09:36

    Hi mindraper,

    ich finde, du hast da ein gut geschriebenes Tut abgesetzt. Kurz, gut zu lesen und, was mir am Besten gefällt, die kleinen Randbemerkungen die ein wenig Hintergrundwissen zu verschiedenen Funktionen vermitteln. Super, weiter so! Ich bin gespannt auf den 2ten Teil.

    • Portrait von pascal.k

      pascal.k

      19.08.2011 - 09:58

      Läuft alles in allem auf das hier raus, oder? http://interface.eyecon.ro/demos/fisheye.html

      • Alternative Portrait von niclas123456789

        niclas123456789

        26.03.2013 - 00:28

        Super Tutorial, doch wie verändere ich es so, das die icoons nicht nach OBEN sonder nach RECHTS "hüpfen", beispielsweise wenn man das ganze links zenriren möchte ?

        PS: sieht klasse aus "pascal.k" ;)



        geändert von niclas123456789 am 26.03.2013 - 00:29
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.

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


Willkommen zum ersten Teil meines kleinen Tutorials über das Erstellen eines Mac-OSX-ähnlichen Docks für eure Homepage. In diesem Teil konstruiere ich zunächst einmal ein Dock ausschließlich via HTML und CSS. Im zweiten Teil werden zusätzliche Features mit dem JavaScript-Framework jQuery eingebunden, die das Dock "echter" wirken lassen, sodass es vom Verhalten mehr an das aus Mac OSX erinnert. Natürlich muss euer Dock am Ende nicht genau so aussehen wie meines; dieses ist nur als Beispiel gedacht. Los geht's!


Schritt 1

Als Erstes macht ihr mal ein Screendesign. Ob ihr das Dock schon beim Planen und Gestalten eurer Website mitgestaltet oder als einzelnes Element erstellt, ist vollkommen egal. Ich habe es hier mal als Einzelelement in Photoshop erstellt. Die PSD findet ihr im .zip-Archiv im Ordner PSD.

Bilder


Wenn ihr fertig seid, exportiert die einzelnen Elemente als JPG, GIF oder PNG. Dabei benötigt ihr also das Dock als Bild ohne die Einträge und natürlich jeden Eintrag als einzelne Grafik.


 

Schritt 2

Das war es dann auch schon mit Photoshop. Alles Weitere passiert im Webeditor eurer Wahl. Bei mir war das Dreamweaver, allerdings geht auch jeder andere, wie zum Beispiel Weaverslave.

Öffnet ein neues HTML- oder XHTML-Dokument. Dann codiert ihr einen sogenannten Div-Container mit der ID "dock" und in diesen kommen die Verlinkungen. Für diese Links schreibt ihr jeweils ein A-Element, dem ihr eine Klasse mit dem class=""-Attribut, eine eindeutige ID mit id="" und – sofern sich die verlinkte Seite in einem neuen Fenster/Tab öffnen soll – die Angabe target="_blank" mitgebt. Vergesst auch bitte nicht, ein Ziel für den Link mit dem href=""-Attribut anzugeben, sonst macht euer Link nämlich exakt nichts! Bei mir sah das dann so aus:

Bilder


Soll euer Link auf eine Seite führen, die nicht auf eurem Server liegt, muss im href=""-Attribut übrigens immer http:// vor der Domain stehen.


 

Schritt 3

Jetzt steht schon mal euer HTML-Gerüst, an dem das CSS aufgehängt wird. Dieses könnt ihr entweder im <head>-Bereich der Seite mit einem <style type="text/css"> ... CSS-Angaben ... </style>, einem Verweis via <link rel="stylesheet" type="text/css" href="pfad/zur/CSS-Datei" /> oder mit dem style=""-Attribut direkt in den einzelnen Elementen notieren. Um eine klare Trennung zwischen HTML und CSS zu erreichen, ist die <link rel="stylesheet" type="text/css" href="pfad/zur/CSS-Datei" />-Methode die erste Wahl. Letzten Endes bleibt es jedoch euch überlassen.

Als Erstes solltet ihr die browsereigenen Vorgaben für die Außen- und Innenabstände auf 0px für alle Elemente setzen. Ich habe bei mir auch die Link-Unterstreichung unterdrückt, aber das ist Geschmackssache und hat keinen Einfluss auf die Funktionalität des Docks. Mit * wählt ihr dabei alle innerhalb der HTML-Datei vorkommenden Elemente aus.

Bilder


 
Danach habe ich dem html- und dem body-Element eine Höhe von mindestens 100% gegeben. Die erste Style-Angabe wird dabei vom IE < Version 8 missachtet, da diese Browser mit der Angabe !important nichts anfangen können. Alle anderen Browser missachten aufgrund von !important die zweite height: 100%;-Angabe.

Im letzten Block seht ihr das Styling des Div-Containers mit der ID "dock". Elemente mit einer ID werden in CSS übrigens immer mit der Raute, gefolgt von der ID ausgewählt. In den Kommentaren hinter den Angaben könnt ihr ersehen, wieso ich diese gemacht habe bzw. was sie bewirken. Falls euch etwas unklar ist, könnt ihr ja jederzeit die Styles in den Dokumenten im .zip-Archiv löschen und euch den Effekt direkt anschauen.


Schritt 4

Zeit für eine kleine Kontrolle. Bis jetzt sieht das Dock so aus:

Bilder


Soweit schon ganz nett, aber es fehlen ja noch die Icons der Dockeinträge. Auf geht's:

 

Schritt 5

Fügt eurer CSS-Datei folgende Angaben hinzu, und zwar unter den bisherigen Einträgen:

Bilder


Was passiert hier? Zunächst definiere ich den normalen Zustand der Links, bevor und nachdem diese angeklickt wurden. Dabei wandle ich sie in sogenannte Block-Elemente, verpasse ihnen eine Breite, Höhe und einen Außenabstand, lasse sie nach links "floaten" – also nach links fließen – und definiere dann einige Styles für den Hintergrund. Wieso ich die Hintergrundbilder nicht angebe, liegt daran, dass ja jeder Link ein anderes Bild im Hintergrund haben soll. Daher ist es sinnvoll, diese später über die eindeutige ID jedem Link einzeln zu geben. Aber dazu komme ich gleich.

Um meinen in den Links enthaltenen Text auszublenden, weise ich den Elementen die Eigenschaft text-indent: -999999em zu. text-indent definiert den Erstzeileneinzug in einem Text, und zwar nach rechts. Durch die negative Angabe wird hier der Text aber nach links aus dem Viewport "herausgezogen". So ist er später nicht sichtbar, für sogenannte "Screenreader" wie blinde Menschen sie benutzen jedoch problemlos zugänglich.

Im letzten Block habe ich dann noch die Stylesheetangaben für den Hover-Zustand der Links definiert. In diesem Fall "springt" der Dockeintrag einfach ein kleines Stück nach oben, wenn er mit der Maus überfahren wird.


 

Schritt 6

Im letzten Schritt weise ich dann den Dockeinträgen anhand ihrer ID das zugehörige Hintergrundbild zu. Da dies die einzige Style-Angabe ist, die sich bei jedem Eintrag unterscheidet, habe ich sie aus den Angaben für alle Einträge herausgezogen und an das Ende der CSS-Datei gehängt.

Bilder


Ende

So, das war's dann auch schon mit Teil eins. Ich hoffe, ihr hattet Spaß an diesem kleinen Tutorial und habt weiterhin Spaß am Gestalten und Erstellen eures eigenen Docks!
vBulletin 0.046 • ZF-App 0.549 • Total 0.595