Freitag, 10. Februar 2012

06:10

 

Anleitung Kapitel III.: Text und ( weboptimierte ) Grafiken einbinden

Text im Html-Dokument einbinden

Wenn alle Seiten angelegt sind, kann nun der Text eingebunden werden. Öffnen Sie dazu jeweils die zu bearbeitende Seite in Ihrem Html-Editor. In der Html-Ansicht des Editors wird ersichtlich, wo die Inhalte einzufügen sind. Inhalts- oder Textabschnitte, die einer speziellen Formatierung oder Positionierung bedürfen, liegen häufig innerhalb eines <div>- bzw. <span>-Tags. Weiter unten finden Sie die wichtigsten Tags, die vorerst einmal ausreichen werden, um den Text in die Vorlagen einzubinden. Übrigens sind die Abschnitte, in die die Inhalte einzufügen sind, im Html-Text (Quelltext) bei allen Homepagevorlagen durch Kommentare gekennzeichnet.

Beispiel in der Html-Ansicht:

<html>
<head>
<title>Beispiel</title>
<link rel="stylesheet" type="text/css" href="css/beispiel.css">
</head>
<body>
<h1>Überschrift 1</h1>
<h2>Überschrift 2</h2>
<h3>Überschrift 3</h3>
<h4>Überschrift 4</h4>
<h5>Überschrift 5</h5>
<h6>Überschrift 6</h6>
<!-- Ich bin ein Kommentar, der normalerweise nicht
auf der Browseroberfläche erscheint. -->
<p>Ich bin ein normaler Text in einem Absatz.</p>
<div>Ich bin eine absolut positionierte Div-Box
und befinde mich da, wo Sie mich nicht vermuten.
Sie können mich sogar auch scrollen, obwohl ich kein Iframe bin.</div>
<p>bla bla bla <span>ich bin ein hervorgehobener Textabschnitt</span> bla bla</p>
<table>
  <tr>
    <td>Ich darf nur in der Zelle einer Tabelle
    geschrieben werden und habe einen Rahmen sowie
    eine andere Hintergrundfarbe erhalten.</td>
  </tr>
</table>
</body>
</html>

In diesem Beispiel wurden der <div>-, <span>- sowie der <table>-Tag über eine externe CSS-Datei formatiert, um es bei Ansicht im Browser übersichtlicher darzustellen. Die Überschriften sowie der Absatz blieben unformatiert, daher gibt sie der Browser im Standardformat aus. Mehr zur Formatierung mit CSS erfahren Sie auf der nächsten Seite in Kapitel IV.

Grafiken für das Web vorbereiten und optimieren

Bevor Sie Ihre digitalen Fotos oder Grafiken in die Html-Dokumente einbinden, die für Ihre Webseite vorgesehen sind, sollten Sie sich zuerst davon überzeugen, dass sich alle Grafiken bereits im Webordner 'images' befinden. Die Bilddateien sollten noch vor dem Upload zum Server physisch auf die Größe gebracht werden, in der sie auch ausgegeben werden, um dadurch die Ladezeit Ihrer Webseite bei Aufruf im Browser so gering wie möglich zu halten. Ein Bildbearbeitungs-Programm wie z.B. Picasa, IrfanView, Adobe Photoshop etc. kann dabei sowie auch bei der Optimierung durch Komprimierung bzw. Konvertierung der Grafiken sehr nützlich und sinnvoll sein.

Adobe Photoshop Elements 8.0
Adobe Photoshop Elements 8.0
Mit der richtigen Profi-Bildbearbeitungs-Software schneller zum gezielten Ergebnis!
(auch für Einsteiger geeignet)
mehr Infos

Beispiel: Es liegt eine Grafikdatei in der Bildgröße von etwa 3000 x 2000px im JPG-Format vor, die unbearbeitet einen Speicherplatz von ca. 750 KB einnimmt. Nun wird die Bilddatei auf das Ausgabeformat von 300 x 200px gebracht, wobei sie nun mit einer Bildqualität von 'Mittel' wieder in dasselbe Dateiformat (*.jpg) abgespeichert werden soll. Nach der angewandten Komprimierung hat die Grafik dann nur noch einen Speicherbedarf von ca. 25 KB. Der dadurch entstandene Qualitätsverlust ist relativ gering und sollte aufgrund einer optimaleren Ladezeit, der optisch nur minimal wahrnehmbar ist, mit einkalkuliert werden. Experimentieren Sie selbst ein wenig bis das optimalste Ergebnis erreicht ist!

Webhosting mit Host Europe

Weboptimierte Grafiken - wieso ist das so wichtig? Grafiken, die nicht oder nur minimal optimiert sind, können für Ihre Webseite fatale Folgen bzgl. der Besucherzahl nach sich ziehen, das häufig auf eine zu hohe Ladezeit zurückzuführen ist. Versetzen Sie sich selbst einmal in die Lage, wenn eine von Ihnen aufgerufene Seite einfach nicht laden will - Was tun Sie dann? ... mit höchster Wahrscheinlichkeit warten Sie nicht länger als etwa 10 Sekunden und ist die Seite bis dato nicht geladen, klicken Sie sie möglicherweise ab. Vermutlich kehren Sie auch zu keinem späteren Zeitpunkt auf diese Seite zurück. Genau der selbe Fall könnte auch bei Ihrer Webseite eintreten, sofern Sie diesen Faktor unberührt lassen. Tun Sie sich also selbst einen Gefallen, indem Sie die für Ihre Homepage vorgesehenen Grafiken optimieren - Ihre Besucher werden es Ihnen mit einem höheren Traffic danken!

Tipp: Um die Ladezeit im Browser möglichst gering zu halten, sollte die Grenze von 50 KB pro Seite nicht überschritten werden. Dabei sind alle dort eingebundenen Elemente wie der Html-Text, die Grafiken etc. zu berücksichtigen.

Wer möchte, kann das auch über folgendes Webtool unter dem Punkt Ladezeit-Check überprüfen! Im Übrigen finden Sie dort auch weitere Tools wie den Html-, Link- und Meta-Tag-Check, um Ihre Webseite noch intensiver zu analysieren. Ggf. können auch Grafiken über diese Seite komprimiert werden.

JPG, GIF oder PNG?

Für das Web sind Grafiken nur in den Dateiformaten wie JPG, GIF oder PNG geeignet. Maßgebend bei der Entscheidung ist die Auswahl des richtigen Formats über Ladezeit und Qualität der Grafik. Nachfolgend sind die Unterschiede der Formate aufgeführt, um Ihnen die Entscheidung ein wenig zu erleichtern:

Mit bis zu 16,7 Millionen Farben kann eine Grafik im JPG, bzw. auch JPEG (Joint Photographic Experts Group) genannt, gespeichert werden. Es lässt sich relativ gut komprimieren, hat aber den Nachteil, dass der Qualitätsverlust bei einer zu starken Komprimierung ziemlich hoch sein kann. Transparente Grafiken sind beim JPG tabu und werden daher nicht unterstützt. Geeignet sind Grafiken wie Fotos von hoher Bildqualität, mit filigranem oder stark strukturiertem Muster sowie welche mit Farbverläufen.

Das GIF (Graphics Interchange Format) lässt sich verlustfrei komprimieren wie auch das PNG. Der Nachteil jedoch ist, dass es maximal bis nur zu 256 Farben pro Bild speichern kann. Für Grafiken von sehr hoher Bildqualität wie Fotos oder Grafiken mit Farbverläufen sollte es besser nicht zum Einsatz kommen. Das Format eignet sich eher für Grafiken wie Buttons, Icons, Cliparts sowie welche mit Schrift. Übrigens lassen sich mit GIFs auch Animationen realisieren, indem mehrere, leicht voneinander abweichende Bilder in einer einzigen Datei gespeichert werden, um sie im Browser beweglich darzustellen. Außerdem unterstützt das GIF transparente (nur binäre also 100%ige Transparenz) Hintergründe von Grafiken, allerdings erst mit dem neueren 89er-Format (im älteren 87er-Format noch nicht).

Das PNG (Portable Network Graphics) vereint alle Vorteile vom GIF und JPG und wurde speziell für den Einsatz im WWW entwickelt. Es kann verlustfrei komprimiert werden und kann ebenfalls 16,7 Millionen Farben speichern wie das JPG. Das Highlight: das PNG unterstützt die Alpha-Kanal-Transparenz, die allerdings nur in modernen Browsern korrekt dargestellt werden kann.

Weitere Infos zu Transparenzen & Alpha-Kanal-Transparenzen finden Sie hier oder bei Wikipedia!

Grafiken einbinden

Die bereits weboptimierten Bilder oder Grafiken können Sie nun mit Hilfe des Html-Editors einbetten oder weisen den entsprechenden Befehl direkt per <img>-Tag im Html-Dokument an, wie folgt:

<img src="images/pic.gif" alt="pic" width="230px" height="170px">

...

Tipp: Richtig ist die Schreibweise "170px", falsch wäre "170 px"! Es gilt allgemein, das zwischen einem Wert und der Maßeinheit kein Leerzeichen enthalten sein darf. Gleiches gilt auch für alle anderen Maßeinheiten, wie z. B. "em", "pt", "%" etc.!

Der <img>-Tag:

img (image) = Bild: Der <img>-Tag weist den Browser an, eine Grafik auszugeben.
src (source) = Quelle der Bilddatei: Mit 'src' wird dem Browser übermittelt, wo sich die Bilddatei befindet.
alt = alternativer Text des Bildes: Ein Text, der anstatt der Grafik angezeigt wird, falls das Bild nicht geladen werden kann oder nicht vorhanden ist.
width = Bildbreite, height = Bildhöhe
px = Pixel: Maßeinheit der Grafik

Der Text sowie die Grafiken sind nun in die Html-Dokumente eingebettet und es geht dann weiter auf der nächsten Seite mit Kapitel IV. Dort erhalten Sie einen kleinen Einblick über das Formatieren in einer extern ausgelagerten CSS-Datei.

Das könnte Sie vielleicht auch interessieren:
[ Transparenzen & Alpha-Kanal-Transparenzen ]

  zurück | weiter 
Diese Seite wurde zuletzt am 28.04.2011 11:06 aktualisiert.
© 2007 - 2012 Copyright by www.homepage-vorlagen-webdesign.de | Hosted by 1&1

Anzeigen

News

zu den brandneuen Rollover-Buttons Jetzt brandaktuell - trendige Rollover-Buttons mit Spezial-Effekten wie Neon, Glanz, Glossy, Glas, Metall ... auch im Psd-Format mit Beispiel-Navigation zum kostenlosen Download [ ... ]

Tools

Webmaster finden hier außerdem nützliche Homepagetools wie Counter, Gästebuch, Forum etc., die alle kostenlos bereitstehen! [ ... ]

Marktplatz

E-Shops von Host Europe: Professionell & zuverlässig online verkaufen! Schon ab EUR 9,99* im Monat!
[ mehr Infos ]

Die neue AquaSoft DiaShow verwandelt Ihre Fotos schnell und einfach in professionelle Multimedia-Präsentationen für PC & TV ...
[ mehr Infos ]

Eigene Homepage mit Jimdo - schnell & einfach selbst erstellt incl. eigener Domain für nur EUR 5 / Monat ...
[ mehr Infos ]

Mehr als 150 Businessplanvorlagen zum Downloaden! Von Apotheke bis Zoofachhandel - alle Konzepte nur EUR 49 ...
[ mehr Infos ]