Benutzer führen Kanten glätten Entwerfen Optimieren Einbinden ![]() |
E i n b i n d e nWie ist es Ihnen ergangen bei der Erstellung der ersten Menügrafiken? Ich hoffe, Sie sind auf den Geschmack gekommen. Jetzt kommt es darauf an, das Menü in eine Webseite einzubinden.
Unten sehen Sie den Screenshoot eines HTML-Dokuments, in dem die Menügrafiken eingebunden sind. Ich erkläre in der Folge, was es mit den einzelnen Attributen auf sich hat. |
![]() ![]() HTML-Code mit eingebundenen Grafiken |
Sie sehen, daß im "IMG"-Tag verschiedene Attribute für jede Grafik angegeben sind. 1. "widht" steht für die Breite und "height" für die Höhe der Grafik in Pixel. Sie müssen diese Werte nicht angeben, damit die Grafik korrekt im Browser angezeigt wird. Aber es ist deshalb äußerst sinnvoll, weil die Browser mit diesen Angaben eine Webseite schneller laden. Wenn Sie z.B. viele Grafiken in eine Tabelle plaziert haben, wird der Inhalt der Tabelle schneller sichtbar, auch wenn noch nicht alle Grafiken vom Server geladen sind. Achten Sie aber darauf, daß Sie die korrekte Größe der Grafik in Pixel angeben, denn sonst werden sie verzerrt dargestellt, was sehr unschön aussehen kann. 2. "vspace" steht für den vertikalen Abstand, den die Grafik links und rechts von der Nachbargrafik oder auch einem Text einnimmt und "hspace" für den horizontalen Abstand oben und unten. Wenn Sie z.B. den Wert in der Grafik "Privat" von 5 auf 25 setzen, nimmt diese Grafik einen größeren Abstand zum oberen Rand des Browsers ein. Aber probieren geht über studieren ;-) 3. "alt" betitelt die Grafik. Das hatte vor allem in Zeiten Sinn gemacht, als viele Internet-Nutzer noch mit abgestellter Grafikoption durch das Netz surften, um die Ladezeit einer Seite mit Grafik nicht zu verlängern. Der Alt-Text zeigte dann wenigstens an, welche Funktion die Grafik hatte, vorausgesetzt man hat einen sinnigen Text gewählt. Wenn da nur Grafik steht, legt man sicher kein beredtes Zeugnis seiner Pfiffigkeit ab ;-) 4. "border": Hiermit wird die Rahmestärke angegeben, wenn Sie eine Grafik verlinkt haben, ihr also einen Verweis unterlegt haben. "border=0" bedeutet, daß kein Rahmen angezeigt wird. Probieren Sie einmal, wie schön häßlich so ein Rahmen um eine Grafik aussieht, indem Sie den Wert einfach mal auf 1 oder 4 setzen. Ohne Borderwert "0" wäre mir im Laufe der Zeit die Lust vergangen, schöne Grafiken zu erstellen. Nun wollen Sie sicher auch sehen, wie sich Ihr Menü im Browser präsentiert. Kein Thema! Wenn Sie unten auf den Link "Menü" klicken, wird ein neues Browserfenster geöffnet. Auf gehts!
Und? Fällt Ihnen etwas auf. Ja und Nein? Okay, folgend eine kleine Menükritik. Die Grafiken sind zu groß für ein Menü! Bei kleiner Monitor-Auflösung (640 mal 480, die Größe des neuen Browserfensters, das Sie gerade aufgeklickt haben) stehen die Menügrafiken nicht einmal in einer Reihe. Sie können diesen Umbruch zwar verhindern, in dem Sie die Grafiken in eine Tabelle mit festgelegten Pixelwerten legen, aber die Besucher mit der Auflösung 640 mal 480 müßten dann nach rechts scrollen. Keine schöne Voraussetzung für den Gebrauch eines Menüs. Schauen wir uns nun an, wie sich das Menü bei einer Monitor-Auflösung von 800 mal 600 Pixel präsentieren würde (dazu müssen Sie selbst natürlich Ihre Monitor-Auflösung ensprechend eingestellt haben. Logisch.
Sie sehen, selbst in der höheren Auflösung bleiben die Grafiken nicht in einer Reihe. Diese Beispiele sollten folgendes augenfällig machen: Die Größe der Grafiken spielt eine wesentliche Rolle bei der Erstellung eines Menüs. Damit ein Menü nicht übermäßig groß wirkt und vertikal wie horizontal nicht zu viel Platz in Anspruch nimmt, sollte der Größenwahl besondere Beachtung gegönnt werden. Der Nachteil dieser Sichtweise: Kleinere Grafiken, die Schrifttypen enthalten, bringen bei der Erstellung gewisse Probleme mit sich. Was mit 40 pt (unsere in PhotoImpact gewählte Schriftgröße) noch gut aussieht, verliert mit 18 pt an Glanz und Gloria. Hier ist also der Tüftler gefragt. Probieren, probieren und nochmals probieren! Ohne eine gewisse Hartnäckigkeit wird man keine schönen und proportional angemessenen Grafiken für ein Menü erstellen können. Ich fürchte, als zukünftiger Grafikmacher bleibt Ihnen die Erfahrung nicht erspart, schöne Menügrafiken erstellt zu haben, die proportional nicht stimmig zum Layout einer Indexseite sind. Aber das gehört zum Erfahrungsprozeß eines Webdesigners. Damit Sie hier gleich Fortschritte machen, gehen wir wieder zur Praxis über. :-) Erstellen Sie das gleiche Menü mit einer Schriftgröße von 18 pt. Sie werden sehen, das ist nicht nur eine gute Übung, sondern bringt auch ein wenig Anstrengung mit sich. Vergessen Sie nicht, immer mal wieder die Schriftart zu wechseln, denn manche Typen eignen sich einfach nicht für kleine Grafiken. Ich bin gespannt auf Ihre Ergebnisse. |
![]() ![]() |