Grafik-Workshop: Grafiken und Fotos in die eigene Homepage einbinden
So richtig lebendig wird eine Webseite erst durch bunte Grafiken und Bilder. Aber es gibt vieles zu beachten, damit die Grafiken auch wirklich eine Zierde sind und keine Besucher verschrecken.
Grundsätzlich gelten folgende Regeln für Grafiken und Fotos:
- Kleine Grafiken mit wenigen Grundfarben immer als .gif-Format einbinden
- Fotos und große Grafiken sowie grundsätzlich vielfarbige Bilder immer im .jpg-Format einbinden
- Das Windows-Standard-Bildformat .bmp ist nicht zur Einbindung von Bildern in Webseiten geeignet, da die Bilddateien viel zu groß sind!!!
- Grundsätzlich sollten Grafiken maximal 100 kb groß sein
- Vermeiden Sie lästige Blink-Gifs. Das tut in den Augen weh und vertreibt die Besucher. Eine schöne Animation kann als Gif aber durchaus ein Eyecatcher sein!
- Animierte Grafiken sind nicht im .jpg Format möglich, sondern nur als .gif oder .png
Wie binde ich eine Grafik oder ein Foto ein?
Hier haben wir diese Schaf-Grafik als Beispiel eingebunden:
Im Quelltext sieht das wie folgt aus:
<img src="schaf.gif" width="120" height="120" alt="Das ist ein Schaf">
Wie Sie sehen, ist die Grafik mit img=src"schaf.gif" eingebunden, zusätzlich wird mit width="120" die Breite und mit height="120" die Höhe in Pixel angegeben. Der Alternativtext alt="Das ist ein Schaf" ist ebenfalls unverzichtbar
Falls Sie einen Editor wie Expression Web oder Dreamweaver benutzen, brauchen Sie sich um den Quelltext keine Gedanken zu machen. Sie finden in der Symbolleiste entweder ein Symbol wie dieses hier 
oder Sie gehen auf Einfügen > Bild.... Anschließend bekommen Sie ein Menü zur Auswahl Ihres Bildes, das dann wie folgt oder ähnlich aussieht:
Im oberen Teil dieses Auswahlfeldes können Sie ein Bild aus einer Datei einfügen. Dazu klicken Sie auf Durchsuchen und wählen eine Grafik-Datei aus einem Verzeichnis auf Ihrer Festplatte aus. Dann noch öffnen oder einfügen geklickt und schon ist das gewünschte Bild eingefügt.
Achten Sie darauf, dass Sie nur Bilder aus dem Heimatverzeichnis Ihrer Homepage so einbinden. Falls Sie Bilder aus anderen Verzeichnissen auswählen (z.B. Eigene Bilder etc) müssen Sie sich nicht wundern, wenn diese im Web nicht angezeigt werden. Der Grund ist ganz einfach: auf dem Webspace ist die Verzeichnissstruktur oft anders als auf Ihrer Festplatte.
Eine der häufigsten Fehlerquellen ist es, wenn Bilder wie folgt verlinkt sind: file:///C:/Eigene Dateien/Meine Bilder/bild1.jpg. Dieses Bild wird im Web nicht angezeigt, da die lokale Festplatte des jeweiligen Surfers als Bildquelle eingebunden ist und dort das gewünschte Bild natürlich nicht gefunden wird. Nur beim Autor wird das Bild angezeigt, da er es ja auf seiner Festplatte hat.
Im unteren Teil der Auswahlmaske haben Sie noch die Möglichkeit, ein Bild direkt aus dem Web zu verlinken. Dies ist eine Möglichkeit, um Bilder z.B. von einem 2. eigenen Webspace zu verlinken oder aber auch ganz fremde Bilder von anderen Webseiten einzubinden. Zu beachten ist dabei, dass nicht jeder Homepagebetreiber solch einen Bilderklau duldet und zudem diese Bilder auf dem fremden Webspace nicht dauerhaft vorhanden sein müssen.
Nun haben Sie schon mal ein Bild eingefügt aber es fehlt noch etwas. Das Bild bekommt noch eine Beschreibung, und zwar hat dies folgende Gründe:
- wichtig für blinde Surfer, die anstatt des Bildes den Beschreibungs-Text als Ausgabe erhalten (ist sehr wichtig, da viele Blinde das Web als aktuelles Informationsmedium nutzen)
- Während des Ladevorganges des Bildes wird der Text bereits angezeigt und der User kann schon mal entscheiden, ob er den Ladevorgang abwartet oder weitersurft - daher ist eine interessanter und gut beschreibender Text vorteilhaft
- Die Suchmaschinen können diese Alternativtexte zu den Bildern auslesen und bei der Bildsuche verwenden.
Mit Rechtsklick auf das eingefügte Bild können Sie die Bildeigenschaften bearbeiten und es öffnet sich ein Kontextmenü wie dieses:
Hier haben Sie jetzt folgende Möglichkeiten: Unter Alternative Darstellungsweisen sollten Sie unter Text die Beschreibung des Bildes eingeben. Unter Standard-Hyperlink können Sie das Bild mit einer Webseite verlinken, so dass bei Klick auf das Bild die entsprechende Webseite geöffnet wird. Unter Ziel-Frame können Sie einen Ziel-Frame definieren, in den der Link geöffnet werden soll. Nun ist das Bild komplett fertig eingefügt und der Quelltext sieht wie folgt aus:
<a href="http://www.meine-erste-homepage.com" target="_blank"><img src="schaf.gif" alt="Dies ist ein Schaf" border="0" width="120" height="120"></a>
| Twittern |
Weitere interessante Rubriken / Webseiten zu diesem Themenbereich:
- www.photoshop-tutorials.de - Seite für Photoshop- und Dreamweaver-Videotutorials
- Avatare
- Banner
- Fotos
- Fotoalbum
- Fun-Pics
- Grafiken
- Microbuttons
- Minigifs
- Smilies
Newsbox
Nachfolgend die 5 neuesten Nachrichten, Links und Tools für Webmaster:Werbeheini.name - schalten Sie kostenlos einen Zeitbanner
www.werbeheini.name - hier können Sie einen Zeitbanner schalten, dass heißt Ihr Banner wird für gewisse Zeit angezeigt (z.B. bis der nächste User sein Banner einstellt). Die Schaltung ist laut Anbieter kostenlos, zudem ist unter www.werbeheini.name/download.php das Script auch zum Download und Eigennutzung erhältlich. Desweiteren gibt es noch einige Webmastertools bei Werbeheini.name.
Geschrieben am 28 Jan 2012 von Karl Oltmanns
Google Gadget Fish für Ihre Webseite
Google Gadget Fish - hier findet sich ein sehr schönes Google-Gadget. Sie können online Fische füttern (einfach mit der Maus aufs Wasser klicken) - schon schwimmt etwas Fischfutter auf dem Wasser und die Fische kommen herbei, um sich die Leckerlies zu schnappen.
Geschrieben am 28 Jan 2012 von Karl Oltmanns
ms5.eu - kostenloser und werbefreier Webspace
www.ms5.eu - kostenloser Webspace mit folgenden Features nach Angaben auf der Webseite (ohne Gewähr auf Verfügbarkeit): 5 GB Webspace, PHP5, 5x MySQL5, 5x FTP, unlimitierter Traffic, unbegrenzte Dateigrößen, eigene Domains aufschaltbar, 128 MB Prozessspeicher, 60 Sekunden Skriptlaufzeit, 128 MB max. Upload-Size (PHP), PHPMyAdmin vorinstalliert, werbefreier Webspace
Geschrieben am 28 Jan 2012 von Karl Oltmanns
Gute Keywords finden ohne Keyword-Tool
Arno Ashoff beschreibt in seinem Blog, wie man gute Keywords findet, ohne eines der klassischen Keyword-Tools zu nutzen. Hier geht es zu seinem Blogbeitrag: www.website-seo-check.com/keywords/gute-keywords-finden-ohne-keyword-tool-2.html
Geschrieben am 28 Jan 2012 von Karl Oltmanns
ReinHTML Dialog Designer
Eine ganz andere Art, Webformulare für den Kontakt mit Ihren Webseiten-Besuchern zu erstellen bietet der ReinHTML Dialog Designer an. Das Tool befindet sich aktuell im Beta-Stadium und kann kostenlos getestet werden. Ziel ist es, reine HTML & CSS Kontaktformulare ohne die Nutzung von Javascript zu erstellen. Die Formulare können online im Desinger erstellt und dann in die eigene Webseite im Quellcode eingebaut werden. Hier geht es zu der Webseite des Projektes ReinHTML Dialog Designer: www.reinhtml.eu
Geschrieben am 28 Jan 2012 von Karl Oltmanns
Mehr Nachrichten in unserer Rubrik "Updates und News für Webmaster"
Feedback und Informationen zu meine-erste-homepage.com:
meine-erste-homepage.com ist bei 1&1 Webhosting gehostet.
