Dock-Menü für die eigene Webseite!

Die benötigten Dateien habe ich hier… auf der Seite des Programmierers gefunden und angepasst!

– WICHTIG – Wegen dem transparenten Hintergrund benutzt bitte die geänderten Dateien, die ihr hier… herunterladen könnt.

Anleitung für Dockmenü in iWeb ab Version 2.0!

Voraussetzung
– iWeb ab Version 2.0 wegen der Webwidget Funktion
– Bildbearbeitungsprogramm für die Icon’s
– Webserver mit der Möglichkeit ausgewählte Dateien hochzuladen

Vorbereitungen
1. Schritt Festlegung der Linkanzahl
2. Schritt Erstellen der Icon’s, jeweils 1 Icon pro geplantem Link
(empfohlenen Größe 250 x 250 Pixel mit transparentem Hintergrund und Spiegelung)

Mein Tipp:
Es gibt genügend Seiten im Netz, wo man kostenlose Icon-Sets zu allen möglichen Themen findet!

Mein Trick für die Spiegelung:
Bildbearbeitungsprogramm öffnen und ein neues Bild (250×250 Pixel mit transparentem Hintergrund) erstellen.

iWeb öffnen, eine leere Seite einfügen (kann hinterher wieder gelöscht werden), Icon auf die Seite ziehen, Größe einstellen und Spiegelung hinzufügen. Jetzt das Icon auswählen, kopieren und im Bildbearbeitungsprogramm einfügen.

Mit Photoshop hat dieses ohne Probleme funktioniert! Das Bild als PNG abspeichern, wegen der Spiegelung und der Transparenz.

Unter diesem Link… könnt Ihr alle nötigen Dateien herunterladen. Erstellt Euch einen Ordner und zieht die Dateien hinein. Im Ordner „images“ werden Eure Icons abgelegt, die 4 vorhandenen Bilddateien müssen erhalten bleiben, diese sind wichtig fürs Dock. Dem Paket liegt noch eine Datei „Dock Html Code.rtf“ bei, hier ist der HTML-Code, welcher in iWeb als Webwidget in die Seite einkopiert werden muss.

Jetzt kommt die Handarbeit:
Im Code findet Ihr eine Zeile, die sieht wie folgt aus:

<a class=“dock-item2″ href=“http://www.schoenwandt.info/ich/index.html„><span>Startseite</span><img src=“images/home.png“ alt=“Startseite“ /></a>

Die wichtigen Stellen habe ich rot markiert.

Der 1. Parameter href=““ gibt den Link zu der Seite an, die Ihr aufrufen wollt. Hier muss der komplette Pfad zu der Seite angegeben werden.

Der 2. Parameter <span> gibt den Titel des Links an, den Ihr aufrufen wollt. Dieser wir über dem Icon im Dockmenü angezeigt.

Der 3. Parameter src=““ gibt die Bilddatei (erstelltes Icon) an, welche zum Link gehört. Hier unbedingt den Bildordner „images“ stehen lassen, damit die Bilder auch gefunden werden.

Der 4. Parameter alt=““ gibt den Alternativtext des Links an, den Ihr aufrufen wollt.

Für jeden Link (Seite) muss eine Zeile eingefügt und angepasst werden. Denkt hier an die Sortierung, erster Link – erste Zeile usw.

Wenn Ihr den HTML-Baustein eingepflegt habt (Anwenden drücken) seht Ihr nur den Rahmen mit den Namen der Links und blau-weiße Fragezeichen. Das ist normal, weil iWeb die Dateien nicht findet. Den Rahmen noch an die Seite anpassen und dann veröffentlichen.

Erstellt erst einmal eine Testseite, die Ihr auf den Server hochladen müsst um es zu testen. Wenn alles läuft könnt Ihr den Webwidget in iWeb kopieren und in andere Seiten einpflegen. Wenn iWeb die Seite auf der Festplatte veröffentlich, erstellt es für jede Seite einen Ordner.

Beispiel: Die Seite heißt „test“, dann heißt der Ordner „test_files“.

In diesen Ordner müsst Ihr nun den Inhalt des Paketes + Eure Icons (im Ordner „images“) hinein kopieren. Die benötigten Dateien müssen in jeden Seitenordner auf der das Dockmenü verwendet wird eingepflegt werden, da das Menü sonst nicht funktioniert!

Nun könnt Ihr die Seite hochladen und ausprobieren, wenn alles richtig gemacht wurde, dann sollte es funktionieren.

Viel Erfolg!

1 Comment

  1. iWeb - Dockmenü für die eigene Homepage! - [...] Hier habe ich nach einigem suchen im Netz etwas gefunden und für iWeb modifiziert. Unter der Rubrik iWeb… findet…

Leave a Reply