Webdesign-Tutorial: Transparenz auf der Homepage

ff-webdesigner

ff-webdesigner - Webdesign-Agenturen Regensburg & München

ff-webdesigner.de
Regensburg München Wien

Freelancer
 
Webdesign-Hotline
Homepage-Probleme? Testen Sie unseren Internet-Service!

Tel: (+49) 941 4618 3055
Skype:
ff-webdesigner ff-webdesign status

Internet-Service
   
   
   
     

 

 
ff-webdesigner Zum Seitenanfang
   
  ff-webdesigner - Webdesign-Agenturen Regensburg & München

ff-webdesigner.de
Regensburg München Wien

 
   
     

 

 
ff-webdesigner Zum Seitenanfang
   
Webdesign-Hotline
Homepage-Probleme? Testen Sie unseren Internet-Service!

Tel: (+49) 941 4618 3055
Skype:
ff-webdesigner ff-webdesign status

Internet-Service
   
     

 

 
ff-webdesigner Zum Seitenanfang
   
  ff-webdesigner - Webdesign-Agenturen Regensburg & München

ff-webdesigner.de
Regensburg München Wien

 
   
     

 

 
ff-webdesigner Zum Seitenanfang
   
Webdesign-Hotline
Homepage-Probleme? Testen Sie unseren Internet-Service!

Tel: (+49) 941 4618 3055
Skype:
ff-webdesigner ff-webdesign status

Internet-Service
   
     

 

 
ff-webdesigner Zum Seitenanfang
   
  ff-webdesigner - Webdesign-Agenturen Regensburg & München

ff-webdesigner.de
Regensburg München Wien

 
   
     

 

 
ff-webdesigner Zum Seitenanfang
   
Webdesign-Hotline
Homepage-Probleme? Testen Sie unseren Internet-Service!

Tel: (+49) 941 4618 3055
Skype:
ff-webdesigner ff-webdesign status

Internet-Service
   
     

 

 
ff-webdesigner Zum Seitenanfang

Webdesign-Tutorial: Echte Transparenz auf der Homepage?

Transparenz ist im Webdesign ein recht komplexes Thema. Es gibt viele verschiedene Ansätze. Die Einfachen sind häufig gestalterisch nicht befriedigend, die Komplexeren wegen dem Aufwand und wegen den häufig für Suchmaschinen negativen Auswirkungen nicht ratsam. Ist es möglich, transparente Bereiche einer Homepage einfach, zu jedem Browser kompatibel und suchmaschinengerecht darzustellen? Diese Anleitung erfordert Vorkenntnisse auf zahlreichen Webdesign-Gebieten. Daher richtet sich dieser Webdesigner-Workshop vor allem an Profis.

Lösungsansätze Zuerst betrachten wir die verschiedenen Lösungsansätze für Transparenz im Webdesign. Als erstes wäre da das Grafikformat GIF zu nennen. GIFs haben maximal 256 Farben. Es können transparente Bereiche dargestellt werden. Transparente Bereiche im Format GIF sind immer 100% transparent, d.h. es gibt keine Farbe, die halbtransparent ist. Daraus ergibt sich häufig ein gestalterisches Manko.

Transparenz im GIF Stellen Sie sich ein Quadrat und einen Kreis im Format GIF vor, angenommene Größe 20 Pixel. Um die Objekte soll jeweils ein transparenter Bereich in der Grafik beinhaltet sein. Das Rechteck hat gerade Kanten. Der Kreis wird im Normalfall mit Antialiasing erstellt, d.h. es werden zur Kantenglättung Mischfarben aus Vordergrund- und Hintergrundfarbe eingesetzt. Die Kanten wirken dann bei Rundungen nicht mehr so eckig. Das bedeutet, dass man bei GIFs mit transparenten Bereichen und runden Kanten immer wissen muss, welche Farbe als Hintergrund hinter diesem GIF verwendet werden soll. Man kann GIFs mit Rundungen und Transparenz nicht vor beliebigen Hintergründen verwenden. Betrachten Sie dazu folgende auf 200% skalierte Grafikbeispiele:

Antialiasing und Transparenz mit GIF
 

Antialiasing und Transparenz mit GIF
 

Antialiasing und Transparenz mit GIF
 

Antialiasing und Transparenz mit GIF
 

Antialiasing und Transparenz mit GIF
 

Antialiasing und Transparenz mit GIF
 

  • Die blauen Quadrate haben gerade Kanten. Es wird kein Antialiasing verwendet, deswegen können sie mit einem transparenten Umgebungsbereich vor jeder beliebigen Hintergrundfarbe verwendet werden.
  • Der erste Kreis wurde ohne Antialiasing erstellt. Seine Kanten wirken unsauber, aber auch er kann mit transparenter Umgebung vor jeder beliebigen Hintergrundfarbe verwendet werden.
  • Bei den folgenden Kreisen wurde Antialiasing verwendet. Ihre Begrenzungen wirken deshalb sauber, sie sind aber auch nicht mehr vor jedem beliebigem Hintergrund verwendbar. Würde man die Umgebung des blauen Kreises vor einem roten Hintergrund bei Verwendung von Antialiasing entfernen (=Transparenz), so könnte man diesen auch nur vor einem roten Hintergrund einsetzen. Setzt man diese Grafik vor einem anderen Hintergrund ein, erhält man ein Ergebnis wie in der letzten Grafik: Blau geht an der Rundung in Rot über, dieses schlagartig in Gelb.

Fazit: Das Format GIF bietet nur sehr beschränkte Möglichkeiten, Transparenz im Webdesign einzusetzen. Bei rechteckigen Formen ist akzeptabel, bei runden Formen muss die Hintergrundfarbe der Website schon vorher bekannt sein. Es ist nicht möglich, einzelne Farben halbtransparent zu schalten.

Flash und Transparenz Ein sehr ausgereiftes Mittel zum Erstellen echter Transparenz ist Flash. In Flash ist es möglich, jeder einzelnen Form einen Transparenzwert zuzuweisen: ein voll deckender blauer Kreis wird von einem halbtransparenten grünen Ellipse überlagert. Dank des Vektorformats erscheinen die Kanten immer sauber. Jedoch hat Flash neben den gestalterischen Vorteilen auch technische Nachteile.
Erstens dauert das erstellen einer analog einer HTML-Seite gestalteten Flashseite normalerweise deutlich länger. Der wichtigste Nachteil ist jedoch die Irrelevanz von Flash für Suchmaschinen. Wenn Sie eine Homepage einzig und allein in Flash erstellen, so wird Sie in keiner Suchmaschine gelistet werden. Flash kann sollte also nur in Teilbereichen eingesetzt werden, und dort auch nur, wenn grafische Inhalte aufwendig präsentiert werden sollen. Vermeiden Sie stets die Verwendung von Flash für Textinhalte!

Transparenz mit PNG Somit bleibt für das Erstellen echter Transparenz im Webdesign nur noch ein Mittel übrig. Jeder Webdesigner kennt die Grafikformate GIF und JPG. Das dritte Format, das jeder Browser darstellen kann ist PNG. Es führt seit Jahren ein Schattendasein im Webdesign. Es vereinigt die Vorteile von GIF und JPG: es komprimiert verlustfrei und kann 16,8 Millionen Farben verwenden. Das für uns wichtigste Detail von PNG ist jedoch, dass zusätzlich zu jeder Farbe ein Alpha-Wert gespeichert wird. Der Alpha-Wert ist das Maß der Transparenz. Jede Farbe kann somit in beliebigem Grad transparent geschaltet werden. Alles wäre ganz wunderbar einfach, würde sich Microsoft nicht nach der beinahe-Vernichtung sämtlicher anderer Browser so gnadenlos auf seinen Lorbeeren ausruhen. Der Internet Explorer wurde seit 1998 nicht mehr wirklich weiterentwickelt. Einige der Grundprinzipien (DOM, CSS-Implementation) sind zwar immer noch als vorbildlich zu bezeichnen, jedoch ändert dies nichts an der Tatsache, dass die Entwicklung seit der Vernichtung der Konkurrenz vollkommen stillsteht. Abgesehen vom Stopfen der dringlichsten Sicherheitslücken geschieht seit Jahren nichts.

PNG im Internet Explorer Dabei gäbe es viel zu tun, z.B. sich um eine korrekte Darstellung von PNG-Grafiken zu kümmern. Nehmen wir folgendes Beispiel: eine halbtransparente orange Grafik soll vor einem zweifarbigen Hintergrund erscheinen. Alle Browser ab Version 4 - außer dem Internet Explorer - stellen diese Grafik richtig wie links abgebildet dar. Nur der Internet Explorer kennt bei PNG keine echte Transparenz: er mischt einfach 50% Weiß zum angegeben Farbton, wie im rechten Bild dargestellt.


PNG 50% Transparenz - alle Browser außer IE


PNG 50% Transparenz - Internet Explorer


Echte Transparenz Es gibt jedoch einige Tricks, mit denen man echte Transparenz im Webdesign in allen Browsern korrekt darstellen lassen kann. Hierzu muss man eine Art Fallunterscheidung Internet Explorer und anderen Browser verwenden. Betrachten wir zunächst alle guten Browser wie Opera, Netscape, Mozilla Firefox. Sie stellen ohne jeglichen Tricks PNG wie im linken Bild gezeigt korrekt dar. Im Internet Explorer jedoch müssen wir das halbtransparente PNG anders einbinden, da es sonst falsch dargestellt werden würde. Zuerst definieren wir uns eine beliebige CSS-Klasse, in der wir vorerst nur eine Schriftart angeben. Dann legen wir für die gleiche Klasse eine weitere Attributsdefinition an. Solche Klassen mit Attribut werden von allen Browsern außer dem IE dargestellt, der Internet Explorer ignoriert diese Klassen mit Attribut vollständig.

.orange {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.orange[class] {
background-image:url(orange.png);
}

Bei Anwendung der Klasse .orange auf einen bestimmten Bereich Ihrer Webseite wird also in allen Browsern außer dem Internet Explorer der betreffende Bereich mit einem halbtransparenten orangen Hintergrund dargestellt. Die Darstellung im Internet Explorer wird dank dem Konstrukt des CSS-Attributs [class] umgangen. Für den Internet Explorer brauchen wir eine andere Art der Grafikeinbindung für echte Transparenz. Hierbei bedienen wir uns der CSS-Filter, welche nur der Internet Explorer und kein anderer Browser unterstützt. Ergänzen Sie die Klasse .orange in Ihrer CSS-Datei um folgenden Eintrag:

.orange {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingMethod=scale src='orange.png');
}

Das Resultat diese Eintrags ist, dass auch im Internet Explorer der Hintergrund des betreffenden HTML-Tags halb transparent erscheint. Das Beispiel ist getestet und funktioniert wirklich in allen Browsern ab der Version 4.

AlphaImageLoader Fehler Es gilt allerdings noch einen folgenschweren Fehler des Internet Explorers bei Verwendung des Filters AlphaImageLoader zu umgehen. Verwenden Sie nämlich Links vor einem Hintergrund, den Sie mittels dieses Filters geladen haben, so sind diese nicht mehr benutzbar. Der Internet Explorer zeigt diese Links als normalen Text an, man kann sie nicht mehr klicken. Dieser Fehler lässt sich durch die Verwendung eines anderen Bildformats für die halbtransparente Hintrergrundgrafik umgehen: benutzen Sie am besten ausschließlich Grafiken mit einer Größe von einem mal einem Pixel. Eine genaue Abhandlung zu diesem Fehler finden sie im Internet unter daltonlp.com.

AlphaOpacity Der Vollständigkeit halber möchte ich noch anmerken, dass es noch eine weitere Möglichkeit gibt, halbtransparente Bereiche im Internet Explorer zu erstellen. Der Effekt lässt sich auch mit folgendem Microsoft-CSS-Filter erreichen: filter:Alpha(opacity=80). Die Verwendung dieses Konstrukts hat jedoch den Nachteil, dass sich die Transparenz an untergeordnete HTML-Tags vererbt. Das bedeutet, wenn sie beispielsweise eine <DIV> mittels des Filters Alpha transparent schalten, auch alle Tags innerhalb dieser <DIV> maximal die Deckkraft dieser DIV haben. Es ist nicht möglich, innerhalb dieser <DIV> einen voll deckenden Text zu verwenden. Beachten Sie hierzu die Homepage von Olaf Bosch zum Thema Transparenz . Weitere Tips für Transparente PNG finden Sie unter alistapart.com/articles/pngopacity/.

Webdesign-Lehrmaterial Zu diesem Tutorial gibt es weiterführendes Lehrmaterial im ff-webdesigner Downloadbereich. Dort finden Sie jedes Tutorial als Acrobat Reader .pdf-Datei zum Offline-Studium oder zur Verwendung im Rahmen von Seminaren. Außerdem bieten wir dort zu jeder Webdesign-Anleitung umfangreiches Studienmaterial wie z.B. komplette Webprojekte, HTML-Seiten, CSS-Dateien, Templates, Bilder, oder Photoshop-Aktionen - und Homepagelayouts.

Hat Ihnen diese Webdesign-Anleitung weitergeholfen? Wir hoffen, Ihnen mit diesem Workshop bei den Arbeiten rund um Ihre eigene Homepage weitergeholfen zu haben. Sie haben noch Fragen oder Anregungen zu diesem Webdesigner-Tutorial? Mailen Sie uns Ihren Kommentar! Falls Sie trotz dem Tutorial mit Ihrer Homepage nicht mehr weiterkommen sollten, freuen wir uns natürlich über jeden Webdesign-Auftrag.

Webdesign-Angebot HGR :
Grafisches Redesign Ihrer Homepage
Unser Preis: ab 295 € 351,05 € incl. MwSt.
Für wen? Ihre Homepage gefällt Ihnen nicht mehr, aber die Inhalte sollen bleiben.

Die ff-webdesigner geben Ihrer Homepage ein neues Layout, das für Ihre Firma spricht, begeistert und Benutzer unaufdringlich durch Ihr Webangebot leitet. Das Webdesign-Angebot GRH beinhaltet:
  • Erstellung eines neuen einfachen Layouts für Ihre Homepage in Photoshop inclusive Korrekturen nach ihren Wünschen.
  • Platzierung aller nötigen Logos und Layoutgrafiken
  • Slicen (unterteilen) des Entwurfs in weboptimierte Grafiken
  • Umsetzung des Entwurfs in ein HTML-Mastertemplate
  • Erstellen aller Seiten und einfügen der alten Inhalte Ihrer Homepage
Sie erhalten das Redesign Ihrer Homepage als fertige HTML-Seite mit allen nötigen Grafiken als .zip per Email. Zusätzlich erhalten Sie die dem Redesign zugrundeliegende Photoshop psd-Datei. Aufwendigere Redesigns mit mehr grafischen Bestandteilen gegen Aufpreis.
[Jetzt bestellen!] [Mehr Webdesign-Angebote]

Webdesign-Angebot HPK :
Komplette Homepage-Erstellung mit Layout, 10 Seiten
Unser Preis: 590 € 702,10 € incl. MwSt.
Für wen? Sie wünschen eine kleine Homepage inclusive aller dafür nötigen Webdesign-Leistungen.

Komplettangebot aus den unter WDEpro, WEA und HUT aufgeführten Leistungen plus Suchmaschinenanmeldung plus Emailkonfiguration - Sparen Sie bis zu 350 € gegenüber den Einzelpaketen!
  • Homepage-Erstellung mit 10 HTML-Seiten incl. Impressum und Kontakt
  • Bis zu 5 Stunden Layouterstellung und Änderung nach Ihren Wünschen
  • Individuelles überzeugendes Layout mit Ihrem Firmenlogo
  • 10 HTML-Seiten mit Text/CSS-Navigation
  • Homepage-Erstellung unter Einsatz semantisch korrekten validem HTML
  • Einbau bis zu vier vom Auftraggeber zu liefernde Bilder pro Seite
  • Saubere Suchmaschinenoptimierung auf relevante Keywords
  • Layouttest in alle gängigen aktuellen Browsern + Internet Explorer 6 / 7
  • Upload auf Server Ihrer Wahl oder Übergabe auf CD
  • Anmeldung bei den wichtigsten Suchmaschinen
  • Einrichtung aller Email-Adressen
Bei mehr als 5h Layouterstellung fallen Mehrkosten an, über die Sie rechtzeitig vorab informiert werden. Mehrkosten werden zum aktuell gültigen Stundensatz für Webdesign berechnet. [Jetzt bestellen!] [Mehr Webdesign-Angebote]

Webdesign-Angebot WDEpro :
Webdesign-Entwurf + HTML
Unser Preis: ab 354 € 421,26 € incl. MwSt.
Für wen? Sie wünschen ein professionelles Webdesign-Layout nebst Umsetzung des Entwurfes in HTML, die einzelnen Seiten der Homepage aber selbst mit Texten und Bildern bestücken.

Angebot wie oben WDE, zusätzlich noch 2h Umsetzung des Webdesign-Entwurfes in HTML, incl:
  • saubere Umsetzung des grafischen Entwurfs in HTML
  • semantisch korrekter HTML-Code, W3C-valide, barrierefrei
  • CSS-Definitionen für Schriften, Hintergründe und Links und alle weiteren Seitenelemente
  • Anordnung Dummy-Überschriften / Texte / Bilder
  • Fertige Navigation incl. 1 Beispielnavigation für 2. Ebene
  • ausgeführte Meta-Angaben für Eingangsseite
  • Layouttest in alle gängigen aktuellen Browsern + Internet Explorer 6 / 7
  • Übergabe des Masterlayouts mit allen nötigen Dateien als .zip per Email
Das Angebote WDEpro beinhaltet keine Bilderrecherche im Internet: Alle Texte, Grafiken und Logos müssen in ausreichender Qualität und üblicher Form durch den Auftraggeber bereitgestellt werden. [Jetzt bestellen!] [Mehr Webdesign-Angebote]

 
Echte Tranpsarenz im Webdesign ist schwer zu erzielen. Hier erklären Ihnen die ff-webdesigner, wie. Webdesign-Tutorial: Transparente Homepage-Bereiche
Einträge aus dem ff-Webdesign Lexikon:

GIF bedeutet Graphic Interchange Format. GIF ist eines der drei Hauptgrafikformate im Webdesign. Der Einsatz empfiehlt sich für grafische Bilder mit einheitlichen Farben und geraden Flächen. Außerdem sind mit GIF auch Animationen und transparenter Hintergrund möglich. GIF ähnelt dem überlegenen Format PNG, hat jedoch maximal 256 Farben und keinen Alphakanal (stufenlose Transparenz für jede einzelne Farbe). Zum Erstellen eines GIFs werden Bildeditoren wie Photoshop, Photo Impact oder das kostenlose GIMP benötigt.

CSS ist eine zu HTML gehörige Ergänzung, die die Trennung von Layout und Inhalten ermöglicht. In seperaten Dateien werden allgemeingültige Regeln für das Aussehen bestimmter Tags auf der gesamten Website definiert. Änderungen am Layout sind so flexibler und in kürzerer Zeit möglich. Auch für unterschiedliche Ausgabegeräte (Audio, Drucker, WAP) können verschiedene Layouts definiert werden. Insbesondere CSS ist ein wichtiger Punkt bei der Cross-Browser-Compatibility, ... [ Mehr lesen ]

Flash ist ein von Macromedia entwickeltes Vektorformat für Webdesign. Mit Flash lassen sich Filme für Webseiten erstellen. Zum Anschauen muss das Flash-Plugin im Browser des Betrachters installiert sein, was derzeit bei ca 95% aller Internetnutzer der Fall ist. Vorteile des Formats Flash sind kleine Dateigrössen, die Möglichkeit zur freien Schriftwahl sowie fast unbegrenzte Designmöglichkeiten. Nachteile sind praktisch unmögliche Barrierefreiheit sowie häufig der falsche Einsatz. Flashfilme sind für ... [ Mehr lesen ]

Browser Der Browser ist das Programm auf Ihrem Computer, mit dem Sie gerade diese Definition lesen. Der derzeit weitverbreitetste Browser ist der Internet Explorer von Microsoft mit einem Marktanteil von ca. 75% (sinkend). Weitere wichtige Browser sind Netscape (jetzt von AOL weiterentwickelt), Opera sowie der auf der Netscape-Engine basierende Firefox Browser. Mit dem Trend zu Multimedia ... [ Mehr lesen ]

Cross-Browser-Compatibility bedeutet "übergreifende Browserkompatibilität" und steht für das Bestreben des Webdesigners, seine Webseiten in allen Browsern exakt gleich aussehen zu lassen. Jeder Browser stellt Webseiten etwas anders dar. Gute Webdesigner sorgen dafür, dass Ihre Homepages in allen Browsern möglichst gut aussehen. Prinzipiell gilt: Je einfacher eine Homepage aufgebaut ist, desto einfacher ist Cross-Browser-Compatibility zu erreichen.

Internet Explorer Der Internet Explorer ist derzeit mit ca. 75% der am weitesten verbreitete Browser. Im ersten Browserkrieg hatte Microsoft durch die enge Bindung an Windows andere Marken wie z.B. Netscape fast bis zur Bedeutungslosigkeit zurückgedrängt. Heute holen neuere Browser auf: insbesondere Opera und noch mehr der kostenlose Firefox Browser erfreuen sich zunehmender Beliebtheit. ... [ Mehr lesen ]

Opera ist ein Browser, der 1996 in Norwegen entwickelt wurde. Da der Internet Explorer von Microsoft kostenlos automatisch in jedem Windows Betriebssystem integriert war, glaubte zunächst niemand an einen Erfolg für Opera. Die HTML (und insbesondere CSS-) Darstellung in Opera ist angelehnt an die Standards des Internet-Explorers. Opera ist schnell, klein und bietet neben Popup-Blocker auch Tabbed Browsing sowie ... [ Mehr lesen ]

Netscape war der erste wirklich bedeutende Browser des Internet. Auf dem grafischen Browser Mosaic aufbauend war er um 1997 marktbeherrschend. Mit der fragwürdigen engen Bindung des Windows Betriebssystems an den Internet Explorer wurde Netscape darauf binnen weniger Jahre beinahe durch Microsoft vernichtet. AOL kaufte Netscape auf und verwendet eine modifizierte Version jetzt als Browser in der AOL-Software. Netscape ... [ Mehr lesen ]

Firefox ist der Browser mit den derzeit am stärksten steigenden Benutzerzahlen. Firefox basiert auf der Gecko Engine (Netscape). Firefox wurde optimiert für schnellen Programmstart und einfache Struktur. Er unterstützt - wie auch Opera und Internet Explorer 7 - Tabbed Browsing. Firefox ist u.a. dank fehlender ActiveX Controls bedeutend sicherer als der konkurrierende ... [ Mehr lesen ]
 
  ff-Webdesigner
Kostenrechner


Berechnen Sie jetzt online, was Ihre Homepage bei den ff-webdesignern kostet.

[ Jetzt berechnen ]
 
 
 
 
 
Business-HomepagesFreelancer Webdesigner