Danksagungen

Danksagungen

Nachfolgend möchte ich den Personen danken, ohne die diese Website nicht bzw. nicht mit diesem Layout zustandegekommen wäre.

Meine Freundin

An erster Stelle ist da meine Freundin zu nennen.

Dank ihres Verständnis für mein Hobby hatte und habe ich die notwenige Zeit für das Erstellen und Pflegen meiner Websites.

↑ ↓

Das Buch CSS-Praxis von Kai Laborenz

Das Buch CSS-Praxis von Kai Laborenz habe ich in der 3. Auflage (2005). Inzwischen gibt es die 4. Auflage (2006) und die 5. Auflage ist für Ende Juli 2008 angekündigt.

Auf den Verlagsseiten gibt es auch

• den Umschlagstext ,
• das Inhaltsverzeichnis ,
• ein Autorenporträt und
• eine Leseprobe (2.186 KB, 51 Seiten).

Es vermittelte mir meine ersten CSS-Kenntnisse.

Darüber hinaus enthält es im Kapitel 5.7.1 (Seiten 208 ff.) ein Beispielslayout mit CSS-Frames, das ich als Ausgangslayout für den Relaunch meiner Website heranzog.

Zu dem Buch gibt es auch eine eigene Webseite mit CSS-Tipps, CSS-Forum und CSS-Links unter css-praxis.de .

↑ ↓

Das Buch Professionelle Websites von Stefan Münz

Das Buch Webseiten professionell erstellen von Stefan Münz habe ich in der 1. Auflage (2005) mit dem ursprünglichen Titel "Professionelle Websites". Inzwischen ist die 3. Auflage (2008) erschienen, die auch einige neue Themen wie AJAX und Mikroformate aufgreift.

Auf den Verlagsseiten gibt es auch zur 3. Auflage

• das Inhaltsverzeichnis (308 KB, 11 Seiten) und
• eine Leseprobe (1.016 KB, 43 Seiten)

zum Herunterladen.

Es vermittelte mir insbesondere wichtige CSS- und HTML-Grundlagen.

Darüber hinaus enthält es

• im Kapitel 8.2 ein Beispiel für eine Navigation im Explorer-Stil, die keine Frames benötigt und die ich beim Relaunch meiner Website als Ersatz für das vorher genutzte JS-Menü heranzogen hatte, und
• im Kapitel 11.6 Beispiele für verständliche Fehlertexte auf individuellen Fehlerseiten, die ich als Beispiele für meine neugestalteten Fehlerseiten herangezogen habe.

Zu dem Buch gab es eine eigene statische Webseite mit ergänzenden Dokumenten, Software, Buch-Listings und Buch-Linkkästen unter professionelle-websites.de , die dann zur Googlegroupseite unter http://groups.google.com/group/professionelle-websites weitergeleitet wird. Dort gibt es auch die 2. Auflage des Buches Professionelle Websites kostenlos als pdf-Datei (38 MB, 1136 Seiten).

Zur 3. Auflage des Buches hat Stefan Münz unter http://webseiten-professionell.wikidot.com ein Wiki aufgesetzt.

Das Wiki bietet Listings und Links aus dem Buch in elektronischer Form, einen Nachschlageteil, eine (geplante) Abteilung für User-Lösungen und ein Forum.

↑ ↓

Das Skidoo (Lean) CSS-Layout von Ruthsarian

Bei der Suche für ein passendes zweispaltiges CSS-Layout zu meinem CSS-Frames-Layout bin ich auf die Seite webhost.bridgew.edu/etribou/layouts/skidoo/ gestoßen.

Dort stellt Ruthsarian auch eine abgespeckte Variante seines Skidoo-Layouts unter der Bezeichnung Skidoo (Lean) zur Verfügung.

Dieses Skidoo (Lean) habe ich ich in mein Seitenlayout mit CSS-Frames eingebaut.

↑ ↓

Das XHTML-Forum

Dank fricca im XHTML-Forum habe ich einige der gröbsten Fehler und Probleme beim Relaunch meiner Website beseitigen bzw. beheben können. Dazu gehörte insbesondere

• der richtige Einsatz der Conditional Comments (CC) für die verschiedenen Versionen des Internet Explorers,
• eine sinnvollere Dokumentenstruktur und
• der Relaunch dieser Seite unter Verzicht auf die explorerähnliche Navigation (Stichwort: Monstermenü).

Zudem hat mich im XHTML-Forum andir auf einen Artikel von Michael Jendryschik zum Thema Automatische Weiterleitung aufmerksam gemacht. Dadurch hatte ich keine Probleme beim Relaunch der Seite. Danke!

↑ ↓

Bene und Dr. Web

Bereits zu meinen NOF-Zeiten hatte ich Bene´s Fade-Trick in meine Webseiten eingebaut.

Dieser Trick basiert auf einem JavaScript (JS), das im Internet Explorer (IE) Links zum Glühen bringt.

Er ist in der Trickkiste von Dr. Web zu finden.

Danke an Bene und Dr. Web für diesen Gestaltungstrick!

↑ ↓

Little Boxes von Peter Müller

Das Einführungsbuch in die Grundlagen der Gestaltung von Webseiten mit CSS mit dem Titel "Little Boxes" von Peter Müller kann ich wärmstens empfehlen. Es hat mir sehr geholfen CSS besser zu verstehen und ist didaktisch hervorragend. Das Buch ist meines Erachtens besonders für CSS-Anfänger als auch Webdesigner geeignet, die bisher Seitenlayouts mit Tabellen erstellt haben.

Zu diesem Buch gibt es auch eine Internetseite des Autors unter www.little-boxes.de .

Dort gibt es folgende kostenlosen Leseproben zum Herunterladen:

• das Inhaltsverzeichnis (612 KB, 10 Seiten),
• das Kapitel 4 - CSS kennen lernen (1.549 KB, 22 Seiten) und
• das Boxmodell zum Ausdrucken (16 KB, 1 Seite)

Auf der Website www.infotekten.de des Autors kann man zudem Kapitel 1 “Das Web ist nicht aus Papier” online lesen:

• Teil 1 - Papierdenken und enttäusche Erwartungen und
• Teil 2 - Mediengerechte Webseiten - Jenseits von Papier

Ferner kann man sich das erste Kapitel bei dem Design & Webstandars Podcast Technikwürze auch anhören .

Dank des Buches "Little Boxes" (Seiten 100-105) hatte ich den Formular-Chef von nettz.de für mein Kontaktformular im Einsatz, solange es keine PHP-Funktionalität auf meinen Seiten gab. Ich war damit sehr zufrieden. Da ich aber die Website zu dem Provider one.com umgezogen habe, steht hier nun PHP zur Verfügung und gibt es jetzt ein neues Kontaktformular.

↑ ↓

Little Boxes Teil 2 von Peter Müller

Auch das Buch mit dem Titel "Little Boxes Teil 2" von Peter Müller kann ich wärmstens empfehlen. Es macht da weiter, wo der erste Band Little Boxes aufhört.

Auch zu diesem Buch gibt es auf der Internetseite des Autors unter www.little-boxes.de weitere Infos.

Dort gibt es folgende kostenlosen Leseproben zum Herunterladen:

• das Inhaltsverzeichnis (658 KB, 11 Seiten),
• das Kapitel 13 - Tabellen und Formulare (1.378 KB, 19 Seiten) und
• das Kapitel 13 - CSS-Layouts und Frameworks (1.144 KB, 11 Seite)

Dank dieses Buches habe ich den Zeichensatz meiner Seite problemlos von ISO-8859 auf UTF-8 umgestellt bekommen (Seiten 25-28). Darüber hinaus beruhen die flexiblen Kalenderblätter in meinem Blog auf einer ToDo-Liste aus dem Buch (Seiten 283-286).

↑ ↓

FS MP3 Player v1.5 von Matthias und Caroline Kannengiesser

Den genialen FS MP3 Player v1.5 gibt es auf der Website flashstar.de von Matthias und Caroline Kannengiesser unter www.flashstar.de/tutlist/index.php3?id=943 .

Er ermöglicht es einem beliebige mp3-Songs in einer Playlist anzulegen und abzuspielen.

Ich habe ihn auf meiner Seite im unteren CSS-Pseudoframe (sogenannte Fußzeile bzw. Footer) unten rechts verlinkt. Wenn man diesen Link anklickt, kann man meine fünf Gitarrensolos von Limitersongs direkt an einem Stück hören.

Danke an das Flashstar Duo Matthias und Caroline Kannengiesser für diesen tollen, kostenlosen und freinutzbaren Player.

↑ ↓

Multiple IE von TredoSoft

Der leider (!) immer noch am meisten verbreitete Browser, der Internet Explorer von Microsoft, kann einen beim Erstellen und Pflegen von modernen Webseiten mit CSS-Layouts in den Wahnsinn treiben. Ab der Version 5 unterstützt er zwar generell CSS, verfügt dabei aber über viele CSS-Bugs, die dem Webdesigner das Leben schwer machen. Erschwerend kommt hinzu, dass einige der Bugs versionsabhängig sind und standardmäßig nur eine Version des Internet Explorers auf einem Windowssystem eingerichtet werden kann.

Hier hilft dem Webdesigner die Installation des multiple IE von TredoSoft .

Damit besteht die Möglichkeiten die englischen Versionen des IE 3, 4.01, 5.01, 5.5 und 6.0 als Standalone-Versionen zu installieren. Es empfiehlt sich, zuvor den IE 7 zu installieren, sofern er nicht bereits vorhanden ist.

Danke an TredoSoft für den dadurch möglichen Browsertest in allen relevanten Versionen des IE.

↑ ↓

JavaScript "Alle Ordner auf bzw. zu" von Joachim aus dem SelfHTML-Forum

Die Navigation im Explorer-Stil von Stefan Münz wollte ich um die Möglichkeit "Alle Ordner auf" und "Alle Ordner zu" ergänzen, wie es sie beim js-menü unter www.js-menue.de gibt.

Leider fehlen mir dazu noch die erforderlichen JavaScript-Kenntnisse. Ich stellte deshalb eine entsprechende Anfrage in das SelfHTML-Forum, die unter http://forum.de.selfhtml.org/?t=145013&m=940933 von Joachim Wendenburg beantwortet wurde.

Die Antwort enthält ein JavaScript und den Code für die Links zum Öffnen und Schließen aller Ordner der Navigation im Explorer-Stil. Den JavaScript-Code habe ich als folder.js abgespeichert und in meine Root-Verzeichnis abgelegt. Im Header der HTML-Seiten habe ich <script language="javascript" type="text/javascript" src="folder.js"></script> und neben der Überschrift Navigation den Code für die verlinkten Grafiken eingefügt.

Herzlichen Dank an Joachim für seine Hilfe und das Script, auch wenn ich die explorerähnliche Navigation mit diesem Script nach dem Relaunch dieser Website vom 12. Mai 2008 hier nun nicht mehr verwende, sondern lediglich noch auf der Website www.jurafernstudium.de .

↑ ↓

Skalierbare Bilder von Dirk Jesse und Sven Kausche aus dem YAML-Forum

In dem Buch CSS-Layouts - Praxislösungen mit YAML 3.0 von Dirk Jesse (2. Auflage, 2008) ist auf den Seiten 360-362 ein praktischer Tipp für skalierbare Bilder mit CSS enthalten.

Diesen Tipp probierte ich anfangs nicht aus, da ich angeblich kein elastisches/liquides Layout mit der Einheit em für die CSS-Frames verwenden könne. Ursächlich hierfür soll der Einsatz von Expressions sein. Dabei handelt es sich um eine Microsoft-proprietäre Methode, Eigenschaften - wie beispielsweise die Höhe meiner CSS-Frames für den IE 5 bis 6 - dynamisch zu berechnen. Im YAML-Forum empfahl mir Sven Kausche es einfach mal zu probieren und ich war überrascht, dass es doch funktionierte. Damit war dann auch der Tipp mit skalierbaren Bildern aus dem Buch von Dirk Jesse für die Grafiken und Icons in meinen beiden CSS-Frames nutzbar. Inzwischen müssten alle Bilder in den CSS-Frames und die meisten in den Seiten skalierbar sein, so dass sich bei einer Vergrößerung des Schriftgrades durch den Besucher in seinem Browser auch die Bilder entsprechend vergrößern.

Herzlichen Dank an Dirk Jesse für den Tipp in seinem Buch CSS-Layouts - Praxislösungen mit YAML 3.0 und Sven Kausche für seine Hilfe im YAML-Forum .

↑ ↓

Praxisbeispiel einer mit Definitionslisten gestalteten Fotovorschau von Björn Seibert und Manuela Hoffmann

Das Buch Professionelles Webedesign mit (X)HTML und CSS von Björn Seibert und Manuela Hoffmann zeigt auf den Seiten 261-267 als Praxisbeispiel "Fotorahmen und Fotogalerien" mittels Definitionslisten.

Dieses Praxisbeispiel habe ich für meine Fotogalerien angepasst und verwendet. Den Quellcode dazu gibt es auf der Seite zum Buch unter www.xhtml-und-css.de auf der Unterseite http://www.xhtml-und-css.de/medien/beispiele/bsp-foto-galerie-komplett.html , so dass man ihn sich nicht mühsam aus dem Buch abtippen muss. Die Thumbnails (= kleine Vorschaubilder) habe ich entsprechend dem Tipp aus dem Buch CSS-Layouts von Dirk Jesse skalierbar gemacht, so dass sich bei einer Vergrößerung des Schriftgrades durch den Besucher in seinem Browser auch die Vorschaubilder entsprechend vergrößern.

Herzlichen Dank an Björn Seibert und Manuela Hoffmann für das hilfreiche Praxisbeispiel in ihrem Buch Professionelles Webedesign mit (X)HTML und CSS .

↑ ↓

Mindesthöhe und -breite mit dem Internet Explorer 5 bis 6 mittels eines Javascripts von Andrew Clover

Der Internet Explorer der Versionen 5 bis 6 kann leider die CSS-Eigenschaften min-height und min-width nicht interpretieren. Dirk Jesse beschreibt auf der Seite www.yaml.de/de/dokumentation/anwendung/minimale-maximale-breiten.html zwei Möglichkeiten den Internet Explorer der Versionen 5 bis 6 durch Workarounds doch dazu zu bewegen, dass er diese CSS-Eigenschaften beherrscht. Für die Fotovorschau hatte ich die CSS-Boxen mit den Thumbnails mittels der Variante 2 "Externes Javascript minmax.js" auf gleiche Höhe gesetzt, so dass sich diese CSS-Boxen dem Fluss (= Flow) folgend in jeder Zeile wieder von links nach rechts anordneten. Kurz danach fiel mir aber auf, dass ich keine Mindesthöhe der CSS-Boxen, sondern eine einheitliche Höhe brauche. Dies ist aber einfach mit der CSS-Eigenschaft height zu bewerkstelligen, so dass ich das Javascript minmax.js wieder entfernt habe.

Gleichwohl der Hinweis, dass das Javascript minmax.js von Andrew Clover ist und von seiner Seite doxdesk.com unter http://doxdesk.com/file/software/js/minmax.js heruntergeladen werden kann.

Herzlichen Dank an Adrew Clover für das nützliche Javascript minmax.js , auch wenn ich es für meine Fotogalerie nun doch nicht brauche.

↑ ↓

Hovereffekt auch für fast alle Elemente beim Internet Explorer 5 bis 6 mittels csshover2.htc von Peter Nederlof

Während fast alle modernen Browser den Hovereffekt für jedes Element unterstützen, kann dies der Internet Explorer der Versionen 5 bis 6 leider nur für <a> Elemente. Bei meinen Fotogalerien setze ich aber den Hovereffekt auch für Definitionslisten mit dl:hover ein. Damit der Internet Explorer der Versionen 5 bis 6 diesen Hovereffekt ebenfalls anzeigt, habe ich die Datei csshover2.htc von Peter Nederlof als CSS-Style mit body { behavior:url("csshover2.htc"); } in den Header der HTML-Dateien der Fotogalerien eingebunden.

Herzlichen Dank an Peter Nederlof für diesen ausgesprochen hilfreichen Workaround mittels der Datei csshover2.htc .

↑ ↓

Hovereffekt auch für Tabellen und Input beim Internet Explorer 5 bis 6 mittels IE7-Bibliothek von Dean Edwards

Während fast alle modernen Browser den Hovereffekt auch für Tabellen und Input unterstützen, kann dies der Internet Explorer der Versionen 5 bis 6 leider nicht. Dank der Bausteine ie7-core.js und ie7-css2-selectors.js kann dem abgeholfen werden. Die vollständige Bibliothek setze ich nicht ein, weil es dann Probleme mit der Darstellung des fixen Footers meiner Seiten gab.

Eingebunden habe ich die Javascripts in den Header der HTML-Dateien mit einem Conditional Comment, den nur der Internet Explorer bis zur Version 6 erkennt.

Herzlichen Dank an Dean Edwards für diesen Workaround mittels seiner IE7-Bibliothek auch wenn ich ihn wieder entfernt habe, weil mir dadurch der Seitenaufbau zu langsam wurde und bei meinen Sicherheitseinstellungen die ständige Frage, ob ActiveX eingeschaltet werden dürfte, nervte.

↑ ↓

Hinweis:
Die hier aufgeführten Bücher sind - soweit bei Amazon verfügbar - mit dem Angebot von Amazon verlinkt und einem Partnercode versehen. Ich erhalte also eine kleine Provision aus dem Amazon-Partnerprogramm, wenn Du durch einen der Links auf diesen Seiten etwas kaufst. Diese Provision wird ausschließlich zur Unterhaltung und Pflege der Website verwendet.
Der Kaufpreis des Artikels oder der Artikel verändert sich für Dich dagegen nicht.

↑ ↓