Anzeige
Tutorialbeschreibung

Mac-OSX-Dock mit HTML, CSS und jQuery - Teil 1

Mac-OSX-Dock mit HTML, CSS und jQuery - Teil 1

Für alle, die gerne auf ihrer Homepage ein Dock wie im OSX von Mac hätten, habe ich hier mal ein kleines Tutorial geschrieben. Es ist sowohl für Anfänger als auch für Fortgeschrittene geeignet. Alle Dateien sind in den Arbeitsdateien als .zip-Archiv angehängt, falls jemand gerne reinschauen möchte.


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.

Das Dock als ScreendesignBilder



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!

DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Melly_maus
  • 18.03.2012 - 10:19

Vielen Dank. Hilft einem sehr gut.

Portrait von 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 :)

Portrait von maltehansen
  • 10.11.2011 - 12:11

Wann kommt der zweite Teil? Ich warte gespannt!

Portrait von 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

-versteckt-(Autor hat Seite verlassen)

  • 05.08.2011 - 17:58

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

Portrait von 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
  • 19.08.2011 - 09:58

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

Portrait von 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" ;)

x
×
×