Bilder und Videos laden und formatieren

Eigentlich hätte ich diese Seite lieber "laden und formatieren von Multimediadateien" nennen sollen, aber wenn ich dies mache, dann müsste ich auch zu allem Multimediadateien ausführliche Hinweise geben - dies würde jedoch für eine Seite entschieden zu groß und so wird es zu Bilder- und Flash-Dateien (Videos) etwas ausführlicher werden als zu normalen Videos (.mpg - .mpeg) und Musikdateien.

Aber fangen wir doch mal mit der eher wichtigsten Multimediadatei an - und ich meine dass das Bilder sind.

Im heutigen Zeitalter der digitalen Fotografie würde es mich wundern, wenn Ihr mir da nicht recht gebt. Mit Bildern kann man eine Webseite (Homepage) beleben ohne dass es blinkert und sonst welche Späßchen macht (was man aber damit auch veranstalten kann).

Was brauchen wir dazu - natürlich ein Fotobearbeitungsprogramm (kostenlos zum Beispiel Paint.net), den dafür notwendigen Quelltext und auch wichtig - Hinweise zum formatieren.

Was kann man mit Bildern - jedenfalls diese nicht nur anzeigen lassen - dazu erfährst Du auch einiges auf der Seite "Verlinkungen".

Packen wir es an und verschönern eine Homepage mit Bildern/Fotos.
Und schon geht das Drama los
wohin mit den Bildern? - Klar - in einen Ordner
Aber wo soll ich den hinmachen? - na da gibt es bestimmt viele Möglichkeiten - und wenn diese Suchmaschinen nicht auslesen sollen, dann den Bilderordner ganz einfach in den Ordner "privates" ablegen, denn diesen haben wir in der robots.txt für diese gesperrt.

Das Spiel könnten wir nun noch fortsetzen - für meine weiteren Erläuterungen befindet sich der Bilderordner mit Namen "bilder" im Ordner "privates" und da uns dieser eine Ordner für die Zukunft sicherlich nicht reichen wird, legen wir in diesem noch den Ordner "startseite" an.
Desweiteren empfehle ich schon jetzt, einen Ordner "allgemeine" und einen Ordner "button" im Bilderordner mit an zu legen.
Damit befinden sich im Ordner "bilder" folgende Unterordner: "startseite", "allgemeine" und "button".

Der Ordner "startseite" wird uns nun als nächstes für die Bilderablage dienen (die beiden anderen benötigen wir erst später - beim Seitenaufbau).

Wie Du Deine Bilder auf den PC bekommst, das weißt Du sicherlich - und wenn nicht - dann schau in Deinen Unterlagen nach - eine Hilfe von hier aus kann ich Dir nicht anbieten - dazu gibt es zu viel auf dem Markt.

Nun öffne einmal ein Bild von Deiner Digital-Kamera - ganz einfach mit Deiner Bild- und Faxanzeige auf dem Rechner - geht sehr schnell auf, oder irre ich mich? Jetzt schaust Du aber einmal in die Eigenschaften des Bildes - wie groß ist es in MB? Bestimmt mehr als einer, denn ein Bild mit der Auflösung von 2592 mal 1944 Pixel (Bildpunkten) hat allgemein zwischen 1,5 und 2 MB Dateigröße.
Da aber Internetleitungen nicht mit diesem Datenstrom und auch nicht mit Byte arbeiten, werde ich Dir das jetzt einmal in Kilobit umrechnen:
1,5 MB (Megabyte) = 1536 Kilobyte = 12288 Kilobit
2,0 MB (Megabyte) = 2048 Kilobyte = 16384 Kilobit

Sicherlich wirst Du Dich jetzt fragen - wozu das Ganze? - Ganz einfach - der Datenstrom im Internet wird mit Kilobit berechnet - damit ist es theoretisch möglich, bei einer DSL 16000 Leitung ein solches Bild binnen einer Sekunde zu übertragen - wohl bemerkt theoretisch!
Praktisch wird es wohl mindestens 2 Sekunden (oder mehr) dauern.
Wie lange es mit einer DSL 6000 oder DSL 2000 Leitung dauern würde - alles auch noch im erträglichem, aber dann wird es langsam kritisch, denn nun kommen noch DSL 1000, DSL 384 (Light), ISDN (64kb) und Modem (56kb).
Das Schlusslicht (Modem) benötigt mit 56 Kilobit Geschwindigkeit etwa 292 Sekunden Ladezeit - allerdings schafft dass das Modem nur, wenn das Internet fast leer ist. Meist wird es für ein solches Bild wesentlich mehr als 5 Minuten benötigen.

Das ganze wäre ja bis hierhin noch in Ordnung, wenn Du nur dieses eine Bild verwenden willst - aber das wird bestimmt nicht der Fall sein, oder irre ich mich dieses Mal?

Was bleibt - ist das Bild in den Abmessungen zu verkleinern. Eine optimale Größe ist hier eine Bildgröße von etwa 100 bis 150 Pixel Bildbreite und somit eine Dateigröße von 5 bis maximal 10 kb für die Vorschaubilder auf Deiner Homepage und Bilder mit einer Bildbreite von 800 bis 1280 Pixel und maximaler Dateigröße von 500kb als Großbild für eine separate Anzeige .

Wir erstellen das Bild "startseite01_kl.jpg" (Breite: 100 Pixel) und "startseite01_gr.jpg" (Breite 1024 Pixel) mit Paint.net oder dem Adobe Fotoshop.

Bildbearbeitung mit Paint.net

Foto 1 Paint.net: Wenn Du Paint.net und einen Fotoordner geöffnet hast, so kannst Du per Drag & Drop ein Foto aus dem Ordner in Paint ziehen.

Foto 1 Paint.net: Wenn Du Paint.net und einen Fotoordner geöffnet hast, so kannst Du per Drag & Drop ein Foto aus dem Ordner in Paint ziehen.
Foto 2 Paint.net: Nun ist das ausgewählte Foto in Paint.net und man kann es nun für eine Homepage bearbeiten.

Foto 2 Paint.net: Nun ist das ausgewählte Foto in Paint.net und man kann es nun für eine Homepage bearbeiten.
Foto 3 Paint.net: Als erstes erstellen wir die kleine Homepagevorschau über den Button "Bild" - und hier weiter auf Größe ändern.

Foto 3 Paint.net: Als erstes erstellen wir die kleine Homepagevorschau über den Button "Bild" - und hier weiter auf Größe ändern.
Foto 4 Paint.net: In dem aufgehendem Feld änderst Du jetzt auf zum Beispiel Breite: 100 worauf sich die Höhe automatisch anpasst und klickst anschließend auf OK

Foto 4 Paint.net: In dem aufgehendem Feld änderst Du jetzt auf zum Beispiel Breite: 100 worauf sich die Höhe automatisch anpasst und klickst anschließend auf OK
Foto 1 Paint.net: Wenn Du Paint.net und einen Fotoordner geöffnet hast, so kannst Du per Drag & Drop ein Foto aus dem Ordner in Paint ziehen.

Foto 5 Paint.net: Nun ist das Bild in den Anmessungen geändert und müssen es nur noch speichern.
Foto 2 Paint.net: Nun ist das ausgewählte Foto in Paint.net und man kann es nun für eine Homepage bearbeiten.

Foto 6 Paint.net: Zum Speichern gehst Du über den Button "Datei" und hier weiter auf "Speichern unter ... ".
Foto 3 Paint.net: Als erstes erstellen wir die kleine Homepagevorschau über den Button "Bild" - und hier weiter auf Größe ändern.

Foto 7 Paint.net: Hier kannst Du unter "Speichern in:" den Zielordner auswählen und unter "Dateiname:" einen neuen Dateinamen festlegen. Mit dem Klick auf "Speichern" gelangst Du zum nächsten Schritt.
Foto 4 Paint.net: In dem aufgehendem Feld änderst Du jetzt auf zum Beispiel Breite: 100 worauf sich die Höhe automatisch anpasst und klickst anschließend auf OK

Foto 8 Paint.net: Eh jetzt das Vorschaubild endgültig gespeichert wird musst Du noch die Bildqualität bestimmen - die Dateigröße sollte 15kb nicht überschreiten. Mit dem Klick auf "OK" wird jetzt das Bild unter dem ausgewählten Zielordner und Dateiname gespeichert.
Foto 9 Paint.net: Da wir jetzt noch das Bild auch als großes Bild speichern wollen müssen wir über den Butten "Bearbeiten" und hier auf "Rückgängig" gehen.

Foto 9 Paint.net: Da wir jetzt noch das Bild auch als großes Bild speichern wollen müssen wir über den Butten "Bearbeiten" und hier auf "Rückgängig" gehen.
Foto 10 Paint.net: Auch hier gilt eine Datenrate für große Bilder und somit sind Bildbreiten von 800 bis 1280 Pixel optimal. Mit dem Klick auf "OK" übernimmst Du den neuen Wert.

Foto 10 Paint.net: Auch hier gilt eine Datenrate für große Bilder und somit sind Bildbreiten von 800 bis 1280 Pixel optimal. Mit dem Klick auf "OK" übernimmst Du den neuen Wert.
Foto 11 Paint.net: Das größere Bild wird ebenfalls wieder wie das kleine Bild abgespeichert (Button: Datei - weiter auf Speichern unter ...).

Foto 11 Paint.net: Das größere Bild wird ebenfalls wieder wie das kleine Bild abgespeichert (Button: Datei - weiter auf Speichern unter ...).
Foto 12 Paint.net: Wieder den Zielordner auswählen, einen passenden Dateinamen bestimmen und über Speichern zum nächsten Schritt.

Foto 12 Paint.net: Wieder den Zielordner auswählen, einen passenden Dateinamen bestimmen und über Speichern zum nächsten Schritt.
Foto 13 Paint.net: Jetzt nur noch die Dateigröße (maximal 500kb) über die Bildqualität festlegen und über "OK" speichern - beide Bilder sind nun vorbereitet.

Foto 13 Paint.net: Jetzt nur noch die Dateigröße (maximal 500kb) über die Bildqualität festlegen und über "OK" speichern - beide Bilder sind nun vorbereitet.
Mit weiteren Bildern für diese Seite oder allgemein für Deine Homepage gehst Du ebenfalls so vor - vergib aber jedes Mal einen anderen Dateinamen.

Bildbearbeitung mit Adobe Photoshop

Foto 1 Adobe: Wenn Du den Adobe Fotoshop und einen Fotoordner geöffnet hast, dann kannst Du per Drag & Drop Bilder in den Fotoshop ziehen.

Foto 1 Adobe: Wenn Du den Adobe Fotoshop und einen Fotoordner geöffnet hast, dann kannst Du per Drag & Drop Bilder in den Fotoshop ziehen.
Foto 2 Adobe: Nun kannst Du das hineingezogene Bild für Deine Homepage weiter bearbeiten.

Foto 2 Adobe: Nun kannst Du das hineingezogene Bild für Deine Homepage weiter bearbeiten.
Foto 3 Adobe: Dazu gehst Du über den Button "Datei" und hier weiter auf "Für Web speichern ..."

Foto 3 Adobe: Dazu gehst Du über den Button "Datei" und hier weiter auf "Für Web speichern ..."
Foto 4 Adobe: In dem nun aufgehenden Feld gehst Du auf den Button "Bildgröße".

Foto 4 Adobe: In dem nun aufgehenden Feld gehst Du auf den Button "Bildgröße".
Foto 5 Adobe: Hier gibst Du jetzt unter "Breite:" den neuen Wert (zum Beispiel 100) ein - die Höhe wird automatisch dazu bestimmt. Die Bildqualität kannst Du über fertige Voreinstellungen (Einstellungen:) auswählen oder über den Schieberegler Qualität bestimmen. Die Dateigröße dazu wird links unten angezeigt. Zum Speichern selbst klickst Du dann ganz oben auf den Button "Speichern".

Foto 5 Adobe: Hier gibst Du jetzt unter "Breite:" den neuen Wert (zum Beispiel 100) ein - die Höhe wird automatisch dazu bestimmt. Die Bildqualität kannst Du über fertige Voreinstellungen (Einstellungen:) auswählen oder über den Schieberegler Qualität bestimmen. Die Dateigröße dazu wird links unten angezeigt. Zum Speichern selbst klickst Du dann ganz oben auf den Button "Speichern".
Foto 6 Adobe: Als letzten Schritt vor dem endgütigen Speichern wählst noch den Zielordner unter "Speichern in:" und gibst einen neuen Dateinamen unter "Dateiname:" an. Abschließend klickst Du jetzt auf "Speichern" und das Bild ist mit den neuen Werten auf dem PC gespeichert.

Foto 6 Adobe: Als letzten Schritt vor dem endgütigen Speichern wählst noch den Zielordner unter "Speichern in:" und gibst einen neuen Dateinamen unter "Dateiname:" an. Abschließend klickst Du jetzt auf "Speichern" und das Bild ist mit den neuen Werten auf dem PC gespeichert.

Um jetzt noch das große Bild zu speichern brauchst Du nur noch einmal diese Schritte ab Bild 03 mit der neuen Breite durchführen.

Und so kann man die bearbeiteten Bilder in die Homepage einbauen (Ordner: "startseite", welcher sich im Verzeichnis "bilder", was sich wiederum im Verzeichnis "privates" befindet):

Die erste Variante - normales Laden des Bildes:

Der grundlegende HTML-Befehl zum Bild laden lautet: <img src="Pfad_zur_Datei/bildname.dateinamenerweiterung">,
was in unserem Fall folgendes ergibt (gleichzeitig auch Quelltext für die "index"):
<img src="privates/bilder/startseite/startseite01_kl.jpg">
Als optionale Angaben sind Angaben zum Rahmen (border), Bildbreite (width) und Bildhöhe (height) sowie eine Bildbeschreibung (alt) möglich - Bildbreite und Bildhöhe empfehle ich zwingend anzugeben um beim Seitenaufbau das lästige Bildhopsen durch das Bild laden zu umgehen.
Die Bildbeschreibung (alt) empfehle ich ebenfalls zwingend, denn damit wird Behinderten ein alternativer Text als Bildbeschreibung angeboten.
Komplett würde dies dann so aus sehen (ist jetzt auch wieder Quelltext für die "index"):
<img src="privates/bilder/startseite/startseite01_kl.jpg" border="0" width="100" height="75" alt="Bildbeschreibung passend zum Bild">
Beschreibung:
border="0" - absolut kein Rahmen um das Bild (alternativ 1|2|...)
width="100" - Bildbreite 100 Pixel (vergleiche im Ordner Dein Bild - gegebenenfalls Wert ändern)
height="75" - Bildhöhe 75 Pixel (ebenfalls vergleichen)
alt="Bildbeschreibung passend zum Bild"> - ändere diese Angaben passend zu Deinem Bild
nochmal Pfad: Das Bild "startseite01_kl.jpg" befindet sich im Ordner "startseite", welcher sich im Ordner "bilder" und dieser wiederum im Ordner "privates" befindet.

Du kannst auch die Rahmenangabe in die CSS-Datei auslagern in dem Du folgenden Eintrag in der "formatierung.css" vornimmst:
img { border:none; ) /* absolut kein Rahmen um Bilder */
img.rahmen { border:2px; ) /* Klasse für Rahmenbreite von 2 Pixel um Bilder */
und als Quelltext für die "index" verwendest Du folgendes:
<img src="privates/bilder/startseite/startseite01_kl.jpg" width="100" height="75" alt="Bildbeschreibung passend zum Bild">
oder
<img class="rahmen" src="privates/bilder/startseite/startseite01_kl.jpg" width="100" height="75" alt="Bildbeschreibung passend zum Bild">

Alternativ-Angaben zur Formatierung in der CSS-Datei:
float:left; - Das Bild befindet sich Links vom Text und wird Rechts von diesem umflossen (Angabe float:right; - das Gleiche - eben halt Rechts)
padding/margin - mit padding:0px; und margin:0px; wird fest gelegt, das zum Bild kein Abstand genommen wird - alternativ sind Angaben mit Pixel (padding:4px; margin:4px;) um einen Abstand zum Bild zu erhalten, was optisch besser aussieht.
Für margin und padding empfehle ich jedes Mal den gleichen Wert zu nehmen - ansonsten kann es zu Anzeigeunterschieden bei unterschiedlichen Browsern führen.

Die zweite Variante - als Hintergrundbild:

Mit dieser Variante sparst Du viel Quelltext, denn die Hauptangaben machst Du in der CSS-Datei und rufst im Quelltext nur die Klasse auf.

So sieht am Anfang ein solcher Eintrag in der CSS-Datei aus:
Angabe (in der "formatierung.css") Erläuterung
div.bild01 { background-image:url(bilder/startseite/startseite01_kl.jpg); } mit "background-image" wird ein Bild mit der url (Pfadangabe) aufgerufen. Der Pfad bezieht sich auf den Sitz der CSS-Datei und dadurch, dass diese Datei bereits im Ordner "privates" sich befindet muss der Ordner nicht mehr aufgerufen werden.
Diese Angaben kann man nun unter anderem noch mit folgenden Angaben erweitern:
alternative Angabe Erläuterung
background-repeat:repeat; mit "background-repeat:repeat;" wird strickt angewiesen, mit dem Bild die ganze Seite aufzufüllen. Alternativ für repeat: no-repeat (nur einmal anzeigen), repeat-x (wiederholen - eine Reihe quer) und repeat-y (wiederholen - eine Reihe senkrecht)
background-attachment:fixed; Mit dieser Angabe legst Du fest, dass das Hintergrundbild sich nicht mit bewegt beim scrollen (alternativ:scroll - ist die Voreinstellung).
background-position:30px 20px; Mit dieser Angabe legst Du die Position des Bildes fest, Angaben in px und % möglich. Nützlich bei nicht ganz gewünscht geladener Position.
display:block; mit "display:block;" setzt Du, dass das Bild angezeigt werden muss.
float:left; das Bild selbst steht links und wird rechts vom Text umflossen (oder eben anders herum float:right;)
margin-left:25px; Der Abstand zur linken Seite beträgt jetzt 25 Pixel (andere Werte auch möglich). Außerdem gibt es noch margin-top (Abstand nach oben), margin-right (Abstand nach rechts) und margin-bottom (Abstand nach unten).
width:100px; Sehr wichtig - die Bildbreite solltest Du bei einem Hintergrundbild generell angeben!
height:100px; Sehr wichtig - die Bildhöhe solltest Du bei einem Hintergrundbild generell angeben!

Für unser kleines Vorschaubild müsste der Eintrag in der CSS-Datei (formatierung.css) dann folgender Maßen aussehen:
div.bild01 { background-image:url(bilder/startseite/startseite01_kl.jpg); background-repeat:no-repeat; width:100px; height:75px; float:left; margin:8px; }

Das Bild selbst rufst Du jetzt wieder mit folgendem Quelltext (in der index) auf:
<div class="bild01"></div>

Bildklassen müssen nicht unbedingt mit "img.bild01" erstellt werden - es ist auch möglich, den Blocksatz div zu verwenden. Die Klasse würde dann mit "div.bild01 { }" in der CSS-Datei erstellt werden und im Quelltext (index) mit "<div class=bild01>" aufgerufen werden, wobei dann keine Bildbeschreibung möglich ist.

- Hier findest Du die allgemeinen Möglichkeiten als Vorschau. -

- Hier gibt es eine weitere Anwendungsmöglichkeit -

Du fragst Dich jetzt sicherlich, was ist mit dem Bild "startseite01_gr.jpg"?

Ganz einfach - wir müssen einen Link zu diesem Bild anlegen um dieses größere Bild anzuzeigen.
Wie das geht, das erfährst Du auf der nächsten Seite (Verlinkungen).

Weitere Möglichkeiten, Multimediadateien einzubinden:

Musikdateien:

Um Musikdateien als Hintergrundmusik einzubinden musst Du im Head-Bereich (von <head> bis </head>) für dem Internet Explorer folgendes einfügen:
<bgsound src="Pfad_zur_Datei/Dateiname.Dateinamenerweiterung" loop="infinite">
und für die weiteren Browser gleich am Anfang des Body-Bereichs
<embed src="Pfad_zur_Datei/Dateiname.Dateinamenerweiterung" autostart="true" loop="true" hidden="true" height="0" width="0">
Folgende Typen kannst Du einbinden: MID, AU und Wav

Wenn Du jetzt den Musikordner "midis" im Ordner "privates" abgelegt hast, dann entsteht zum Beispiel für src folgende Angabe: "privates/midis/hintergrundmusik.mid"
Weitere Erläuterungen:
loop: Wiederholungsangabe (Internet Explorer infinite - wiederholen, weitere Browser true - ja)
autostart: true entspricht ja
height und width zwingend auf "0" da ansonsten ein Kästchen angezeigt wird.

VORSICHT: Musikdateien können sehr schnell sehr groß sein und damit die Ladezeit wesentlich erhöhen! Verwende dann lieber einen Player mit Musik ein und aus.

Videodateien (MPG, MPEG, AVI, ...):

Diese Dateien kannst Du nur per Download mit Beschreibungstext anbieten oder Dein Server muss Video-Stream unterstützen (nur Webspace funktioniert da nicht!).
Wie ein solcher download angeboten wird - mehr dazu erfährst Du auf der nächsten Seite (Verlinkungen).

Videodateien (Flash):

Immer beliebter werden zur grafischen Gestaltung Animationen mit Flash. Ähnlich den Bildern besteht auch hier eine Möglichkeit eine alternative Beschreibung einzurichten.
Günstig erstellen kann man sich eine solche Animation mit dem sehr preiswerten Programm "Kool Moves". Mit diesem Programm sind kleinere Flashdateien gar kein Problem und auch aufwendigere mit etwas Übung möglich.
Voraussetzung für Flashdateien sind Bilder welche mit Übergängen versehen werden.
Was kann das Programm:
Erstellen von Flash-Animationen aus Bild-Dateien, Einbindung von Musikdateien, Einbindung von Links, ...
Auf Wunsch erstellt das Programm auch den dazugehörigen Quelltext um die erstellte Datei in HTML einzubinden.
Was macht es nicht ganz korrekt:
Das Erstellen das alternativen Bereichs und schon bist Du wieder gefragt, denn Du musst diesen manuell Abändern.

So sieht eine solche Datei aus:
<object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="Test01" width="728" height="90" codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,0,0">
<!-- Anweisungen nur Internet Explorer -- >
<param name="movie" value="Pfad_zur_Datei/Dateiname.swf">
<param name="quality" value="high">
<param name="play" value="true">
<param name="loop" value="true">
<param name="bgcolor" value="#000000">
<!-- Ab hier für alle Browser -->
<SCRIPT LANGUAGE="JavaScript">
<!--
var ShockMode = 0;
if (navigator.mimeTypes && navigator.mimeTypes["application/x-shockwave-flash"] && navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin)
  {
    if (navigator.plugins && navigator.plugins["Shockwave Flash"])
    ShockMode = 1;
  }
if (ShockMode )
  {
    document.write('<embed src="Pfad_zur_Datei/Dateiname.swf"');
    document.write(' width=728 height=90 bgcolor="#000000" quality="high" loop="true"');
    document.write(' TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/">');
    document.write('</embed>');
  }
else if (!(navigator.appName && navigator.appName.indexOf("Netscape")>=0 && navigator.appVersion.indexOf("2.")>=0))
  {
    document.write('<img src="Pfad_zum/nonflash.gif" width=728 height=90>');
  }
//-->
</SCRIPT>
<NOEMBED>
  <img src="Pfad_zum/nonflash.gif" width=728 height=90 border=0 alt=alternativer Beschreibungstext>
</NOEMBED>
<NOSCRIPT>
  <img src="Pfad_zum/nonflash.gif" width=728 height=90 BORDER=0 alt=alternativer Beschreibungstext>
</NOSCRIPT>
Sollte Deine Flash-Animation nicht ordnungsgemäß angezeigt werden, dann musst Du folgende Angaben prüfen:
- Pfadangabe (Pfad_zur_Datei/Dateiname.swf), einmal für den Internet Explorer und einmal für alle Browser
- Bildhöhe und Bildbreite (width und height), sollten übereinstimmen, am besten für Flash und gif die gleiche Größe
- Flash-Datei wird nicht angezeigt und auch das Ersatzbild nicht, dann prüfe auch diese Pfadangaben (Pfad_zum/nonflash.gif)
- natürlich kannst Du als Flash-Ersatzbild auch andere Dateitypen wie JPG und PNG verwenden