Tutorialwelt.de » wichtige Webtools

Webseiten auch für den Internet Explorer 6 optimieren

admin — Tue, 26 Jan 2010 10:00:31 +0000

Webdesign Tutorial – Webseiten auch für den Internet Explorer 6 optimieren

Auch wenn ich bereits in einem anderen Tutorial (Vorschau von Webseiten in allen gängigen Browsern) erklärt habe, wie man feststellen kann, ob eine Webseite in allen gängigen Browsern gut aussieht, so kann dieser Prüf-Vorgang doch verhältnismäßig lange dauern. Es kommt mit hinzu, daß man diesen Prüfvorgang nicht beliebig oft starten kann.

Viele Auftraggeber fordern, daß eine Internet-Seite auf allen gängien Browsern vergleichbar gut aussieht.
Hierbei beziehen sie auch gerne den Internet-Explorer in der Version 6-8 mit ein.
Das hat folgenden Grund: Der Internet Explorer 6 hat doch sehr viele Eigenarten. Bei einigem, was eigentlich standardmäßig funktionieren sollte… wollen wir es mal freundlich ausdrücken… tanzt der IE6 ein wenig aus der Reihe. Da der IE6 noch sehr häufig im Einsatz ist, kann es sinnvoll sein, Seiten auch hierfür zu optimieren.

Man kann den Internet Explorer allerdings nur einmal installiert haben.

Doch es gibt auch hierzu zwei Lösungen:
Multiple IE
Internet Explorer Collection

Ich persönlich bevorzuge die Internet Explorer Collection.

Mit dieser Software können Sie den Internet Explorer in allen alten Versionen simulieren lassen und darin Webseiten testen.

Diese Option sollten Sie erst recht in Erwägung ziehen, wenn Sie eine Auftragsarbeit für einen Kunden erledigen und dieser Ihnen mitteilt, daß Ihre Seite doch ganz anders aussieht, als es bei Ihnen der Fall ist.

Wenn Sie dann den Kunden fragen, welchen Browser er denn einsetzt und er Ihnen antwortet “den Internet Explorer…” oder vielleicht sogar: “Was ist ein Browser?” Spätestens dann ist der Einsatz eines solchen Programmes gefordert.

Eine Vorschau Ihrer Webseite in allen gängigen Browsern Jedem wird dies passieren. Sie haben Ihre Webseite fertig gestellt....
HTML Tutorial mit Video – Der Quirks Modus und margin auto im Internet Explorer Wer schon einmal versucht hat, im Internet Explorer Divs per...
WICHTIGES Sicherheits-Update für Internet Explorer 6-8 Heute möchte ich alle meine Besucher darauf aufmerksam machen, daß...

Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.

Webdesign Tutorial – Farbverlauf für den Hintergrund einer Webseite erstellen

admin — Mon, 25 Jan 2010 07:22:39 +0000

Webdesign Tutorial – Mit gradient-maker.com einen Farbverlauf für den Hintergrund einer Webseite erstellen

Es gibt verschiedene Möglichkeiten einen Farbverlauf für den Hintergrund seiner Webseite zu erstellen.
Man kann Photoshop oder GIMP als Software verwenden. Man erstellt ein neues Dokument mit der
gewünschten Höhe und einer Breite von nur einem Pixel und wendet dort das Farbverlaufswerkzeug an.

Man kann aber auch den kostenlosen Dienst einer Webseite in Anspruch nehmen.

Auf gradient-maker.com können Sie ganz einfach einen Farbverlauf für Ihre Webseite erstellen.

Stellen Sie einfach die Höhe ein die Startfarbe und die Endfarbe. Notieren Sie sich den Wert der Endfarbe. Diesen Wert benötigen wir dann noch für unseren CSS Code.

Diesen Farbverlauf können wir ganz einfach mit folgendem CSS-Code in den Hintergrund unserer Seite integrieren:

Beispielcode HTML:

Beachten Sie bitte, daß #ffffff der Farbwert für den unteren Wert des Farbverlaufes sein sollte.
Das hat folgenden Grund: Man kann einen Hintergrund leider nicht beliebig strecken.
Beim Erstellen des Hintergrundes legen wir bereits fest, wie hoch der Farbverlauf sein wird.
Eine 400px hohe Farbverlaufsgrafik wird auch nur 400px des Hintergrundes an Höhe abdecken.
Da wir dann einen schönen Übergang zu der eigentlichen Hintergrundfarbe wünschen, sollte der Hintergrund mit der unteren Farbe des Verlaufes flächendeckend gefüllt werden.

In der Breite fordern wir den Browser auf, den Farbverlauf zu wiederholen. Das machen wir mit dem Zusatz repeat-x. X steht hierbei für die X-Achse eines Koordiantensystemes… also einer waagerechten Linie.

In einem anderen Tutorial werde ich nochmals genauer auf das Erstellen von Hintergründen per CSS eingehen.

Webdesign – Karierte Hintergründe für Ihre Webseite Heute möchte ich eine weitere Webseite vorstellen, mit der man...
CSS Tutorial mit Video – Hintergrund für Internet Seite erstellen Um einen Hintergrund für eine Webseite zu erstellen kann man...
Webdesign – Hintergrundmuster für Ihre Webseite (Retro Look) Heute möchte ich Ihnen eine weitere Webseite vorstellen, auf der...

Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.

Webdesign – Hintergrundmuster für Ihre Webseite (Retro Look)

admin — Sun, 24 Jan 2010 15:05:09 +0000

Webdesign – Hintergrundmuster für Ihre Webseite (Retro Look)

Heute möchte ich Ihnen eine weitere Webseite vorstellen, auf der man kostenlos Hintergrundmuster im Retro Look erstellen und herunterladen kann. Diese Seite ist wirklich klasse.

bgpatterns.com

Hier kann man beeindruckende Hintergrundmuster erstellen.

Wählen Sie ein Motiv und dessen Farbe sowie Transparenz, Größe und Ausrichtung. Sie können nun noch die Farbe für den Hintergrund einstellen und dafür sogar eine Struktur auswählen.

Jeder Webdesigner sollte sich mit den Möglichkeiten dieses Konfigurators zumindest einmal auseindergesetzt haben.

Man darf auch nicht außer Acht lassen, daß der Retro-Look wieder zurückkommt.

Hier ein Screenshot der Webseite:

Hintergrundmuster für Webseiten

Ich habe Ihnen mal ein paar Hintergrundmuster hier mit eingefügt:

Herz-Hintergrundmuster für Webseiten

Hintergrundmuster für Webseiten

Die erstellten Hintergrundgraphiken kann man dann per CSS mit dem Befehl:
background: url(’dateiname.jpg’);
einfügen

Beispielcode HTML:

Webdesign – Karierte Hintergründe für Ihre Webseite Heute möchte ich eine weitere Webseite vorstellen, mit der man...
Webdesign – gestreifte Hintergründe für Ihre Webseite Heute möchte ich Ihnen zeigen, wie Sie gestreifte Hintergründe für...
Webdesign Tutorial – Farbverlauf für den Hintergrund einer Webseite erstellen Es gibt verschiedene Möglichkeiten einen Farbverlauf für den Hintergrund seiner...

Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.

Webdesign – Karierte Hintergründe für Ihre Webseite

admin — Sun, 24 Jan 2010 03:43:17 +0000

Webdesign – Karierte Hintergründe für Ihre Webseite

Heute möchte ich eine weitere Webseite vorstellen, mit der man diesmal karierte Hintergründe für die eignenen Webseiten erstellen kann.

Ich gebe zu, daß das meiste gräuslich anzusehen ist, aber mit dezenten Erdfarben kann man schon den einen oder anderen schönen Hintergrund erstellen.

Die Webseite nennt sich www.tartanmaker.com

Vergleichbar mit den gestreiften Hintergründen von diesem Tutorial kann man auch beim Tartanmaker die Farben, die Breite und die Ausrichtung der verschiedenen Muster einstellen:

karierte Hintergrundmuster für Webseiten erstellen

Auch hierzu habe ich ein paar Beispiele eingefügt:

kariertes Hintergrund Muster

Die erstellten Hintergrundgraphiken kann man dann per CSS mit dem Befehl:
background: url(’dateiname.jpg’);
einfügen

Beispielcode HTML:

Webdesign – gestreifte Hintergründe für Ihre Webseite Heute möchte ich Ihnen zeigen, wie Sie gestreifte Hintergründe für...
Webdesign – Hintergrundmuster für Ihre Webseite (Retro Look) Heute möchte ich Ihnen eine weitere Webseite vorstellen, auf der...
Webdesign Tutorial – Farbverlauf für den Hintergrund einer Webseite erstellen Es gibt verschiedene Möglichkeiten einen Farbverlauf für den Hintergrund seiner...

Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.

Webdesign – gestreifte Hintergründe für Ihre Webseite

admin — Fri, 22 Jan 2010 16:28:29 +0000

Webdesign – gestreifte Hintergründe für Ihre Webseite

Heute möchte ich Ihnen zeigen, wie Sie gestreifte Hintergründe für Ihre Webseite erstellen können.

Gestreifte Hintergründe können einer Seite einen sehr edlen Look verleihen.
Doch wie kann man diese Streifenmuster selbst erstellen?
Hierzu gibt es einen tollen kostenlosen Service auf www.stripegenerator.com

Hier kann man verschiedenfarbige Streifenmuster erstellen.

Einstellbar sind die Breite der Streifen, der Abstand zwischen den Streifen, die Streifenfarben, den Hintergrund, Schatten und die Ausrichtung der Streifen.

Hier ein Screenshot der Webseite, die jeder Webdesigner kennen sollte:

Hintergrundstreifen Webseite

Ich habe Euch mal ein paar Streifenmuster hier mit eingefügt:

Homepage Hintergrundstreifen

Die erstellten Hintergrundgraphiken kann man dann per CSS mit dem Befehl:
background: url(’dateiname.jpg’);
einfügen

Beispielcode HTML:

Webdesign – Karierte Hintergründe für Ihre Webseite Heute möchte ich eine weitere Webseite vorstellen, mit der man...
Webdesign – Hintergrundmuster für Ihre Webseite (Retro Look) Heute möchte ich Ihnen eine weitere Webseite vorstellen, auf der...
Webdesign Tutorial – Farbverlauf für den Hintergrund einer Webseite erstellen Es gibt verschiedene Möglichkeiten einen Farbverlauf für den Hintergrund seiner...

Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.

Eine Vorschau Ihrer Webseite in allen gängigen Browsern

admin — Sun, 23 Aug 2009 20:07:12 +0000

Eine Vorschau Ihrer Webseite in allen gängigen Browsern

Jedem wird dies passieren. Sie haben Ihre Webseite fertig gestellt. Sie haben Sie in Ihrem Lieblingsbrowser kontrolliert. Sie haben vielleicht noch ein oder zwei andere Browser ausgetestet. Sie sind von den Ergebnissen begeistert. Tage später sagt Ihnen ein Bekannter, daß Ihre Seite ganz verschoben aussieht. Sie bekommen Panik… stürmen an Ihren Rechner… Was ist da nur passiert? Sie öffnen Ihre Seite… Es sieht doch ganz normal aus…

Der Grund für solche Situationen ist, daß tatsächlich nicht jeder Browser das gleiche anzeigt. Je älter die Browser werden, desto schlimmer können die Ergebnisse sein. Der Internet Explorer 5 beispielsweise kann nicht all das verarbeiten, was die heutige Generation von Browsern kann… Wer mit Netscape immer noch im Web unterwegs ist… Na gute Nacht… Nun ist HTML 5 mit CSS3 am Start… jetzt wird das ganze noch verhehrender….

Man kann aber auch keine alten Browser mehr bei sich zum testen installieren… Manche kamen schon auf die abwägige Idee, die alten Browser in einem virtuellen Betriebssystem zu starten… alles Quatsch…

Die Lösung lautet: browsershots.org

Auf browsershots.org können Sie die Optik Ihrer Webseite wirklich auf allen (zumindest mir bekannten) Browsern austesten. Geben Sie die Adresse Ihrer Webseite ein und reloaden Sie die Seite nach einer halben Stunde… Sie werden sich wundern, wie unterschiedlich die Ergebnisse ausfallen können.

Interessant ist dies, sobald man bspw. transparente PNG’s zum Einsatz bringt. Hier sieht man auf welchen Browsern die Webseite korrekt angezeigt wird.

Bringen Sie generell in Erfahrung, welche Browser Ihren Kunden wichtig sind… checken Sie auf browsershots.org, ob Sie die Voraussetzungen Ihres Kunden einhalten können, oder ob Sie doch auf eine ältere HTML, CSS oder Flash Version zurückgreifen sollten.

Für mich eines der wichtigsten Tools des worldwide web für Webdesigner und Webprogrammierer.

Webseiten auch für den Internet Explorer 6 optimieren Auch wenn ich bereits in einem anderen Tutorial (Vorschau von...
Webdesign Tutorial – Farbverlauf für den Hintergrund einer Webseite erstellen Es gibt verschiedene Möglichkeiten einen Farbverlauf für den Hintergrund seiner...
Webdesign – Karierte Hintergründe für Ihre Webseite Heute möchte ich eine weitere Webseite vorstellen, mit der man...

Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.