a. Bildtypen für Webseiten:

Transkript

1 HTML-Tipps 1. Ordnerstruktur Erstellt man eine umfassende Website, sollte man sich eine vernünftige Ordnerstruktur überlegen und nicht alle Dateien in einen Ordner stellen. Schließlich erleichtert einem das selbst und natürlich auch anderen Personen das Auffinden von Dateien. Üblich sind Einteilungen in die vorhandenen Menüpunkte als auch eigene Ordner für Grafiken und spezielle Dateitypen (z.b.: Java Applets). 2. Einfache Zeilenschaltung vs. Absatz Die einfache Zeilenschaltung erfolgt in einem HTML-Editor üblicherweise durch das Drücken der SHIFT-Taste zusammen mit der ENTER-Taste. Dabei bleiben Absatzformatierungen wie zb Schriftart und Textausrichtung erhalten. Betätigt man hingegen die ENTER-Taste wird ein Absatz eingefügt. Alle Formatierungen werden dabei zurückgesetzt. 3. Bildbearbeitung a. Bildtypen für Webseiten: Im Internet finden insbesondere die drei folgenden Bildtypen Anwendung. Über ihre Verwendung und Besonderheiten soll die nachfolgende Übersicht Aufschluß geben: JPEG, JPG, JPE (Joint Photographic Expert Group): - <= 16,7 Mio. Farben - Eignet sich deswegen besonders für Fotos und Grafiken mit feinen Farbverläufen - Kompressionsfaktor sowie DPI (Auflösung) mit Grafikprogramm bestimmbar - Je höher der Kompressionsfaktor, desto kleiner die Datei, aber desto schlechter die Bildqualität GIF (Graphics Interchange Format): Farben - Eignet sich deswegen besonders für Grafiken mit wenigen Farben, Cliparts, Buttons etc. - Interlaced: Grafik kann beim im Internet grob und mit der Zeit immer detaillierter angezeigt werden - Animation: erreichbar wenn man mehrere Grafiken im GIF-Format aneinanderreiht - Transparenz Ernst Rodlmayr, 2003 Seite - 1 -

2 PNG (Portable Network Graphic): - 16,7 Mio. Farben - Eignet sich für Photos aber besonders für Grafiken mit weniger Farben. Angeblich komprimiert JPEG besser als PNG, jedoch scheint PNG eine gute Alternative zu GIF zu sein. So unterstützt es auch Transparenz und die von GIF bekannte Interlaced-Funktion. Zusätzlich lassen sich jedoch noch Zusatzinformationen zu Bildern (Gamma-Werte, Copyright- Informationen) abspeichern. b. Bildgröße Mit der Verwendung der genannten Bildtypen GIF und PNG werden die Bilder automatisch optimal komprimiert. Bei der Abspeicherung von Grafiken im JPEG- Format muß man selbst einen Komprimierungsfaktor angeben. Normalerweise sollte eine Grafik nicht mehr als 100 KB haben. Es ist üblich für bestimmte Grafiken Thumbnails zu verwenden. Der interessierte Besucher kann dieses Vorschaubild anklicken und bekommt dann eine große Grafik angezeigt. Bestenfalls bringt man auch einen Verweis der Größe der verknüpften Bilddatei an. Hilfreiche Online-Image Komprimierung: oder der Image Cruncher: 4. Bilder vorladen Bilder können vorgeladen werden. Sinnvoll kann das sein, wenn es Internet- Seiten gibt, die sehr klein sind und deshalb wenig Ladezeit benötigen und andere Seiten wo der Aufbau aufgrund einer Grafik länger dauert. Damit verteilt sich die Ladezeit der Seiten besser. Ein weiterer Grund eine Grafik vorladen zu wollen könnte sein, dass man möchte dass die Grafik bei Aufruf der Seite sofort erscheint. Das Vorladen selbst funktioniert mittels eines Trickes. Man stellt die Bildgröße bei den Bildeigenschaften mittels eines HTML-Editor einfach auf 1 x 1 Pixel. Das Bild wird in diesem Fall später nicht angezeigt, aber sehr wohl in den Zwischenspeicher (Cache) des Browsers geladen. Bei jedem weiteren Aufruf der Grafik spart sich der Browser den direkten Zugriff auf das Internet. 5. Multimedia (Bilder & Ton) Vorerst einmal soll klargestellt werden. Der Einsatz von Multimedia, vor allem Bildern im Internet ist eine tolle Sache! Jedoch gibt es auch beim Durchschnittsbesucher eine Schmerzensgrenze, die auf jeden Fall dann überschritten zu werden droht, wenn die Website mit zuviel animierten Grafiken versehen wird. Vor allem Besucher mit dem Drang nach Content, die nur darauf aus sind Informationen in sich reinzusaugen, werden durch "zuckende" Bilder stark abgelenkt, weil die Augen den bewegten Dingen grundsätzlich den Vorzug Ernst Rodlmayr, 2003 Seite - 2 -

3 geben =). Die Besucher können sich dann nicht auf den statischen Text konzentrieren. Auch Musikdateien im MIDI-Format, die sich in die Homepage einbinden lassen, verärgern mit der Zeit vor allem die wiederkehrenden Besucher! Dazu muß man sagen, dass MIDI-Files sehr klein sind und man gerade aus Gründen der Ladezeit geneigt sein mag, sie in die Homepage einzubauen. Die verbreiteten Standardsoundkarten spielen diese Musik aber in einer äußerst schlechten Qualität ab! WAV-Dateien hingegen können in besserer Qualität systemunabhängig abgespielt werden. Jedoch findet man hier selten eine Kompromiß zwischen Qualität und Dateigröße! Wer Musik in annehmbarer Qualität und akzeptabler Ladezeit in seine Website einbauen will, muß Macromedia Flash verwenden (siehe Punkt 9 oder Webdesign). 6. Download-Links Werden Dateien zum Herunterladen angeboten ist es sinnvoll einen Verweis auf die Dateigröße anzubringen. Besonders Besucher mit Modem werden darüber dankbar sein, wenn auch unter anklickbaren Thumbnails die Dateigröße bekannt gegeben wird. 7. Farben und HTML 8. Favorite Icon Ob in der Adressleiste, in den Favoriten oder als Verknüpfung. Das Favorite Icon repräsentiert eine Website und ermöglicht in den Favoriten das schnellere Auffinden einer Webseite. Abb.1: Favorite Icon in der Adressleiste Mehr dazu:favorite_icon.pdf (68,6 KB) 9. Macromedia Flash Macromedia bietet eine eigene Software namens Flash an, mit der sehr kreative Webseiten mit weitreichenderen Möglichkeiten erstellt werden können als mit HMTL. So kann man die gesamte Website nur mit Flash erstellen oder einzelne Flash-Objekte (wie z.b. Sound, animierte Grafik) in eine Internetseite einbinden. Die korrekte Anzeige der Internetseite setzt aber das Vorhandensein eins Flash Ernst Rodlmayr, 2003 Seite - 3 -

4 Players voraus, welcher üblicherweise nicht zur Standardinstallation eines Betriebssystems zählt. Trotzdem sollte man nicht in Panik verfallen, denn vor dem Ausführen eines Flashs wird überprüft, ob der passende Player am System vorhanden ist und im Bedarfsfall diese Software automatisch downgeloadet und kostenlos installiert. Trotzdem kostet dieser Vorgang Zeit und es kann - meist abhängig von den Fähigkeiten des Besuchers - auch sein, dass hier Komplikationen auftreten. Das Schlimmste was passieren kann ist aber "nur" dass der Browser das Flash nicht erkennt und sämtliche Flashbestandteile auf der Internetseite einfach ignoriert - man sieht also nichts. Dieser Punkt und der oftmals langsame Aufbau von Flash-Seiten sprechen gegen deren Verwendung. Sollen User regelmäßig auf schnellebige Informationen zugreifen, wird man wohl zugunsten der content-orientieren Zielgruppe kein Flash verwenden. Flash-Beispielseite(Intro): siehe Webseite Wie erkennt man nun, ob eine Internetseite Flash Elemente enthält? Einfach mit der rechten Maustaste das verdächtige Element anklicken. Nun müßte in dem grauen Pull-Down Menü ganz unten "Über Macromedia Flash Player x.x" stehen. Außerdem kann man das Flash mit diesem Menü gegebenenfalls steuern. 10. Cascading Stylesheets Cascading Stylesheets (CSS) werden verwendet um Internetseiten mit all seinen Objekten (Tabelle, Überschriften, Standardschrift, Links, etc.) bestimmte Formate (z.b. Schrift, -farbe) zuzuweisen. Dieses CSS läßt sich in eine eigene Datei auslagern und man könnte später in nur einer Datei die Formatierung hunderter Seiten festlegen und müßte bei Veränderungen immer nur diese Datei aktualisieren. Daneben bietet CSS noch ein paar bereichernde Funktionen hinsichtlich Webdesign. Hier gibt es unter anderem Farbeffekte bei Links (siehe obiges Menü), spezielle Farben für Formularobjekte & Scrollingleiste, etc. Wie bei Java Script schreibt man CSS üblicherweise direkt in den Quellcode der HTML-Seite (Kopfteil). Manche HTML-Editoren bieten aber auch grafische Hilfsoberflächen zur Bearbeitung an. Ein CSS steht grundsätzlich im HEAD- Bereich, beginnt mit dem <STYLE TYPE="Text/CSS">-Befehl und endet mit </STYLE>... z.b: <STYLE type=text/css> A:link { FONT-WEIGHT: bold; COLOR: #ee0000; TEXT-DECORATION: none } A:visited { FONT-WEIGHT: bold; COLOR: #eeaaaa; TEXT-DECORATION: none } A:hover { FONT-WEIGHT: bold; COLOR: #ee0000; BACKGROUND-COLOR: #ffff99; TEXT- DECORATION: none } A:active { FONT-WEIGHT: bold; COLOR: #0000ee; BACKGROUND-COLOR: #ffff99 } BODY { FONT-SIZE: 12pt; FONT-FAMILY: Arial,sans-serif } </STYLE> Einfach zum Ausprobieren in den Quelltext im HEAD-Bereich reinkopieren. Ernst Rodlmayr, 2003 Seite - 4 -

5 Auch die Farbe der Scrollingleiste läßt sich mit folgendem Eintrag beeinflussen: <style type="text/css"> BODY { scrollbar-base-color:#33333; scrollbar-track-color:#cccccc; scrollbar-face-color:#ccff00; scrollbar-highlight-color:#ccff00; scrollbar-3d-light-color:#ccff00; scrollbar-dark-shadow-color:#66666; scrollbar-shadow-color:#cccccc; scrollbar-arrow-color:# } </style> 11. Java Script Javascript (JS) ist eine vereinfachte Programmiersprache und kann zur Optimierung von Webseiten eingesetzt werden. Dazu ist es grundsätzlich erforderlich, Einträge direkt im Quelltext vorzunehmen. Die Möglichkeiten mit JS sind natürlich sehr weitreichend und gehen von der Überprüfung von Formularfeldern auf die korrekte Eingabe von Werten bis zu grafischen Spielereien wie Laufschriften und Spezialmenüs. Wer sich dafür interessiert der sei auf meine spezielle JS-Beispielseite verwiesen: hier Wie kann man das für seine eigenen Seiten übernehmen? Einfach die fertigen Beispiele doppelklicken. Daraufhin kann man sich im Browser den Quelltext ansehen und das JS einfach rauskopieren und ins eigene Dokument einfügen. Meistens muß man den Bereich von <SCRIPT LANGUAGE... bis </SCRIPT> kopieren wie im ersten Beispiel: <SCRIPT LANGUAGE="JavaScript"> <!-- Beginn des JavaScripts alert("hallo Welt!\nMein erstes JavaScript"); document.write("ist ja ganz einfach"); //--> </SCRIPT> Dieses JS einfach in den Kopfteil (HEAD) der eigenen Webseite einfügen. Im Internet gibt es eine Vielzahl fertiger Java Scripts die man ausdrücklich kopieren darf. Auf dem Weg zu mehr JS-Wissen ist ein Besuch bei Stefan Münz unumgänglich ;-) (siehe Webseite). Ernst Rodlmayr, 2003 Seite - 5 -